O começo do blog

Um resumo resumido

Meu nome é Matheus e estou cursando Ciência da Computação pela UFMT, o Blog é uma forma para aprender mais e também compartilhar conhecimento.

Talvez você ser pergunte, o porquê criar um blog ao invés de utilizar o medium.com? Bom, eu queria algo mais meu e também saber exatamente como funcionava um blog.

Já faz um tempo que me pergunto se é melhor usar Markdown, ou um editor que já retorna um HTML com os textos. Até o momento estou curtindo usar o Markdown e depois transpilar para HTML, funciona bem!

Sem termos técnicos demais: Markdown e HTML são 'apenas' linguagens de marcação, aqui eles devem deixar o conteúdo do blog em um padrão para eu poder manipular.

Um texto cru, o famoso .txt, ficaria feio e difícil para estilizar.

Quais conteúdos?

Faço algoritmos para tudo que me gera interesse... Então nesse blog pode ter de tudo, porém a maior parte de conteúdo possa ser relacionado a WEB, por conta que estou tentando trabalhar como front-end e UI/UX.

Criação dos textos/editor

Escrevo no stackedit e vejo as possíveis correções na clarice.ai.

O stackedit é apenas um editor de markdown com uma pré visualização, já o site clarice é uma IA que consegue corrigir textos e dar uma nota(é incrível, recomendo demais o uso).

Qual linguagem de programação foi utilizada, frameworks, libs?

Javascripto

A linguagem foi o tal do Javascript. Agora sendo mais preciso: foi o superset chamado Typescript (basicamente adiciona tipagem e alguns recursos interessantes para o javascript).

Nextjs

Ir só no javascript vanilla seria bem trabalhoso, então não tentei recriar a roda, utilizei o Nextjs.

Aproveitei a parte de gerar sites estáticos e fiz cada página do blog ser gerada na build do projeto(getStatisPaths + getStatisProps).

talvez você tenha percebido que esse blog abre tudo muito rápido, isso é por causa do Nextjs que já deixa tudo pronto e só envia alguns arquivos para você

Styled-components

Nos estilos eu optei por CSS in JS, o famoso styled-components.

Sou fã demais do Styled, alguns motivos: opção de passar os parâmetros para o CSS e evitar aquele monte de className e ID; melhora na legibilidade do código.

Vamos manter tudo em JS?
R.: Quase tudo :)

Remark

O Remark é o responsável por transpilar Markdown para HTML.

O código utilizado pelo blog está assim:

// src/service/markdown.js
import remark from 'remark'
import html from 'remark-html'
import footnotes from 'remark-footnotes'
import remarkGfm from 'remark-gfm'
import prism from 'remark-prism'

export default async function toHTML(markdown) {
  const result = await remark()
    .use(footnotes)
    .use(remarkGfm)
    .use(html)
    .use(prism)
    .process(markdown)

  // <img src="/img.png"> to <img src="img.png" loading="lazy">
  return result
    .toString()
    .replace(/<img (?<attributes>.*)">{1}/gm, `<img $1" loading="lazy">`)
}

Como está funcionando

1. Escrevo o conteúdo da postagem em um arquivo.md;

2. Faço o envio(push origin master) desse arquivo.md para o github;

3. A vercel entra em ação e faz a build do novo commit;

4. O algoritmo percorre todos os arquivos da pasta posts transformando-os em HTML(remark) e criando uma página para cada.

5. Vocês veem uma nova postagem no blog :)

Acredito que para algo usado por mais pessoas seria melhor usar um CMS, mas por aqui é só eu ✌️.

speedrun de uma postagem teste

(sem mandar para o repositório no github)

Acessibilidade

Usando como base meus conhecimentos de UI e também as postagens do Willian Justen, eu melhorei a acessibilidade desse blog. Coloquei em prática o uso dos tabindex, alt, title e html semântico + uns truques com a ContextAPI.

se você é uma pessoa portadora de necessidades especiais e/ou utiliza leitores de tela, por favor me mande um feedback sobre a acessibilidade desse blog.
email: matheuscorreia559@gmail.com

Eu testei, mas é sempre bom ter o feedback do público alvo.

No vídeo abaixo, a navegação foi feita apenas com o teclado, perceba a mudança do tabindex no canto direito. Esse menu da esquerda, quando ativo, desabilita o tabindex das postagens, permitindo que o usuário só navegue na área visível(aqui que entra a contextAPI).

Bônus

Por quê tem alguns quadrados do lado de cada postagem?

Isso aqui:

obs.: só aparece no desktop/computador/tablet

É um suporte para postagem, foi feito apenas para decoração. É realmente necessário? Não!
Cada postagem tem seu mapa(quadradinhos/pixels) único, ou quase único.

O algoritmo funciona indo em cada letra do título e pegando a posição dela no alfabeto, começando em 1 e indo até 26, depois é feito duas condicionais que usam o índice da letra no título, com isso é gerado um x e y, e o algoritmo desenha um retângulo de 1 pixel nessa posição.

condicional 1 => Se o índice daquela letra no título for par, o x recebe o valor do índice. Se não, o x fica sendo o índice da letra no alfabeto.

condicional 2 => Se o x for par, o y vai ser o índice da letra no alfabeto. Se não, o y fica sendo o índice da letra no título.

const x = indexInString % 2 === 0 ? indexInString : indexInAlphabet
const y = x % 2 === 0 ? indexInAlphabet : indexInString

Canvas.

Os pixels foram desenhados no Canvas.
É necessário adicionar no CSS do Canvas a propriedade:

/* src/components/Post/style.tsx */
image-rendering: pixelated;

essa propriedade mantém o estilo pixelado e com definição(sem um 'blur')

Abaixo você encontra como ficaria sem a propriedade image-rendering:pixelated

Código que cria os quadrados(js)

// src/components/Post/index.tsx

function drawRectanglePixel(
  cvs: HTMLCanvasElement,
  ctx: CanvasRenderingContext2D,
  str: string
) {
  str = str.replace(/[^\w\s]/gi, '').replace(/\s/gi, '')

  let size = str.split('').length

  size = size < 26 ? 26 : size

  cvs.width = size
  cvs.height = size

  drawChess(ctx, size)

  str.split('').forEach((s, indexInString) => {
    if (indexInString === str.length - 1) return

    const indexInAlphabet = s.toLowerCase().charCodeAt(0) - 97 + 1

    const x = indexInString % 2 === 0 ? indexInString : indexInAlphabet
    const y = x % 2 === 0 ? indexInAlphabet : indexInString

    ctx.fillStyle = theme.colors.primary
    ctx.fillRect(x, y, 1, 1)
  })
}

Final

Acredito que seja tudo para uma primeira postagem.

Obrigado por ler até aqui!