Randys Machado

Nova versão do blog: saí do Next.js e fui para o Astro

Wed, 30 Sep 2026 00:00:00 GMT

O blog está de cara nova e, dessa vez, não foi só o visual. Reescrevi tudo do zero: saí do Next.js com Tailwind e MDX e fui para o Astro com CSS puro. Neste post eu conto o porquê, o que mudou por baixo e por fora, e mostro os números de antes e depois (medidos, não chutados).

Por que mudar

A versão 2.0 nasceu em 2024 com Next.js 14, Tailwind CSS, shadcn/ui, TypeScript, Velite e MDX. Funcionava bem, mas com o tempo ficou claro que era ferramenta demais para o que um blog faz: mostrar texto.

Cada página carregava 102 kB de JavaScript só para exibir um post estático. O projeto tinha 33 dependências diretas e instalava 685 pacotes. E o empurrão final veio de onde eu menos esperava: duas atualizações automáticas do Dependabot levaram o projeto para o Next.js 16, e o build simplesmente parou de funcionar. O Turbopack, agora padrão, recusa a configuração de webpack que o Velite injeta, e a API de params das páginas mudou.

Nota (o site não chegou a cair)

Quando um build falha, a Vercel mantém o último deploy que funcionou. Então o site continuou no ar, só que preso numa versão que eu não conseguia mais atualizar sem mexer em código que nada tinha a ver com escrever posts.

Manter um blog pessoal não deveria exigir isso. Queria algo mais simples, mais leve e que durasse.

Por que Astro

O Astro gera HTML estático e não manda JavaScript para o navegador por padrão: você só adiciona script onde realmente precisa. Para um blog, é exatamente o que faz sentido. Ele também trata Markdown e coleções de conteúdo de forma nativa, com validação dos campos do frontmatter, então o Velite deixou de ser necessário.

Duas referências me ajudaram muito no caminho: o astro-erudite, de onde vieram a ideia de CSS nativo, os callouts e os blocos de código, e o blog do Emile, de onde vieram o header de vidro, a paleta de cores e a organização da home.

O que mudou por baixo

	Versão 2.0	Versão 3.0
Framework	Next.js 14 (React)	Astro 7
Estilos	Tailwind CSS + shadcn/ui	CSS nativo
Conteúdo	MDX + Velite	Markdown (Sätteri) + content collections
Código nos posts	rehype-pretty-code	Expressive Code
Dependências diretas	33	14
Pacotes instalados	685	436

CSS nativo no lugar do Tailwind

Sair do Tailwind foi a parte que mais me divertiu. O CSS moderno resolve sozinho coisas que antes precisavam de biblioteca. O tema claro e escuro, por exemplo, virou uma linha por cor com a função light-dark():

:root {
  --text-main: light-dark(oklch(16.96% 0.002 17.32), oklch(84.63% 0.014 102.05));
  --bg-main: light-dark(oklch(99.01% 0.016 95.22), oklch(16.96% 0.002 17.32));
}

Escrevi sobre essa função num post anterior e agora ela está em produção aqui. Outros recursos que entraram:

color-mix() para os tons esmaecidos e as cores das categorias.
Container queries no nome gigante do rodapé: ele ocupa sempre a largura toda, em qualquer tela.
Popover API + @starting-style no menu do celular: abre, fecha com Esc e com clique fora, com animação, e sem nenhum JavaScript de framework.
backdrop-filter no efeito de vidro do header.

Markdown sem MDX

Os posts agora são Markdown puro, processados pelo Sätteri (o processador nativo do Astro). Os recursos extras vêm de plugins pequenos, sem precisar de componentes dentro do texto:

links de âncora em todos os títulos (passe o mouse sobre qualquer título deste post);
links externos abrindo em nova aba, com os atributos certos;
callouts como o que apareceu lá em cima;
blocos de código com título, botão de copiar e destaque de linhas, e até código colorido no meio do texto, como const blog = "Astro".

Escrever um callout, por exemplo, é só isto no Markdown:

:::note[título opcional]
Texto do aviso.
:::

O que mudou por fora

Visual novo: paleta Flexoki (tons quentes, com uma textura sutil de papel no fundo), fonte Figtree e JetBrains Mono no código, e um header flutuante com efeito de vidro (Liquid Glass).
Imagens nos posts: a versão antiga não tinha capas. Usei I.A. para gerar imagens para os posts antigos, e os posts novos também terão imagens, que podem ou não ter a ver com o texto.
Categorias: eu quero escrever sobre vários assuntos e não só sobre desenvolvimento e tecnologia, então os posts agora se dividem em Dev e Miscelânea, cada uma com a própria página e filtro no blog. As tags também ganharam páginas.
Projetos: uma página nova mostrando o que eu construo e mantenho, como o Busca CEP e o Por Onde Andei.
RSS completo em /rss.xml, com o texto inteiro dos posts para quem usa leitor de RSS.
Acessibilidade revisada: navegação por teclado, contraste das cores e hierarquia de títulos.

Os números

Medi as duas versões no mesmo computador, com o build de produção e o Lighthouse, sem o Google Analytics nas duas (para não entrar script de terceiros na conta):

	Versão 2.0	Versão 3.0
JavaScript no primeiro carregamento (post)	102 kB	2,4 kB
Peso total da home	336 KiB	106 KiB
Peso total de um post	342 KiB	171 KiB
LCP da home	2,4 s	1,4 s
Tempo bloqueando a página (TBT)	40 ms	0 ms
Lighthouse: performance (home / post)	98 / 97	100 / 99
Lighthouse: acessibilidade (post)	96	100
Tempo de build	32 s	3 s

A versão antiga já era rápida. A diferença está em não carregar o que não é usado. O pouco de JavaScript que sobrou serve para o botão de tema, o menu do celular, o índice lateral dos posts e o botão de copiar código.

O que ficou de fora (por enquanto)

Comentários: a versão antiga tinha comentários pelo Giscus. Ainda não trouxe para cá. Estou pensando se implemento ou não nesta nova versão.
Notas: a antiga seção de notas curtas não foi migrada; os posts dela ficaram na versão 2.0.

Nada disso se perdeu: a versão 2.0 continua guardada no repositório, na tag v2.0.

O que vem por aí

Agora que a base está pronta, quero usar o blog para mais do que posts. A próxima ideia é uma área mostrando o que estou lendo, assistindo e ouvindo. Se quiser acompanhar, o RSS está aí.

Valeu por ler até aqui! 🤘

Como utilizar o Browsersync no WordPress

Mon, 19 Aug 2024 00:00:00 GMT

No post anterior eu falei sobre as funcionalidades e benefícios de utilizar o wordpress/scripts em seu projeto. Caso tenha perdido clique aqui.

Agora quero continuar o post anterior adicionando um pouco mais de poder ao wordpress/scripts utilizando o Browsersync para sincronizar o código que você está escrevendo e atualizando automaticamente a página sem precisar fazer o reload manualmente.

O que é o Browsersync?

O BrowserSync é uma ferramenta que facilita o desenvolvimento web sincronizando automaticamente alterações do código com o navegador. Ele permite que você veja as mudanças do seu código em tempo real, sem precisar atualizar a página manualmente. Há outras funcionalidades que você pode explorar consultando a documentação.

Como instalar?

Para instalar é simples, somente executar o comando abaixo:

npm install browser-sync --save-dev

Partirei do princípio que você é uma pessoa esperta e leu o post anterior e já tem a estrutura inicial no seu projeto 😉.
Agora precisamos alterar o arquivo package.json adicionando na parte de scripts a seguinte linha de código:

{
   "scripts": {
      "sync": "browser-sync start -p \"URL_DO_SEU_SITE\" --files \"**/*.php\"",
   }
}

É necessário substituir a palavra URL_DO_SEU_SITE pela URL do servidor que está rodando a aplicação. Importante que não utilize as iniciais http:// ou https:// . Dependendo do servidor a URL pode ser algo como: meu-site.local, meu-site.test, localhost.

Explicando o código acima em poucas palavras, podemos dizer que ele está chamando o browsersync para iniciar o nosso site na URL indicada e ficar olhando os arquivos .php que foram alterados e atualizar o site automaticamente.

Juntando tudo

Para que tudo funcione lindamente, precisamos juntar os scripts do wordpress/scripts com o script do browsersync que acabamos de configurar. Para isso precisamos instalar um novo pacote que nos ajudar a executar tudo de uma vez.

npm i npm-run-all

Agora vem a cereja do bolo, vamos criar um novo script chamado dev que vai pegar nossos outros scripts e rodar todos juntos e em paralelo. No final nosso arquivo package.json ficará assim:

{
   "scripts": {
      "dev": "npm-run-all --parallel sync start",
      "sync": "browser-sync start -p \"URL_DO_SEU_SITE\" --files \"**/*.php\"",
      "build": "wp-scripts build",
      "start": "wp-scripts start",
      "lint:js": "wp-scripts lint-js",
      "format": "wp-scripts format"
   }
}

O script dev está utilizando no pacote npm-run-all que rodar vários scripts de uma só vez, neste caso nossos scripts sync e start em paralelo.

Conclusão

Agora temos um script que fica de olho nos nossos arquivos .php e atualiza a página automaticamente sempre que algo muda, graças ao BrowserSync. Legal, né?

Espero que vocês tenham gostado e fique de olho pois vamos deixar esse script mais poderoso futuramente.

Saudações,
Grande Abraço!

{/* ## O que é o @wordpress/scripts? O @wordpress/scripts é um pacote NPM desenvolvido pela equipe do WordPress que facilita a configuração e a automação de tarefas comuns no desenvolvimento de temas e plugins. Ele foi criado para simplificar o processo de desenvolvimento, oferecendo uma série de scripts pré-configurados que lidam com tarefas como compilação, empacotamento e minificação de arquivos JavaScript e CSS.

Principais Funcionalidades do `@wordpress/scripts`:

Compilação com Babel:
- O @wordpress/scripts utiliza Babel para transpilar o código ES6+ para uma versão compatível com navegadores mais antigos. Isso permite que você escreva código moderno sem se preocupar com a compatibilidade.
Empacotamento com Webpack:
- Webpack é utilizado para empacotar todos os seus módulos JavaScript em um único arquivo. Ele também lida com importações de CSS e outras dependências, otimizando o carregamento de recursos no seu site.
Minificação de Arquivos:
- O pacote inclui scripts para minificar tanto os arquivos JavaScript quanto CSS, o que reduz o tamanho dos arquivos e melhora o desempenho do site.
Linting e Formatação de Código:
- O @wordpress/scripts vem configurado com ESLint e Prettier, ferramentas que ajudam a manter a consistência e a qualidade do código, verificando erros e aplicando regras de estilo.
Watch Mode:
- Ele oferece um modo “watch” que recompila automaticamente os arquivos sempre que há uma mudança, agilizando o processo de desenvolvimento.

Por que utilizar o `@wordpress/scripts`?

Configuração Simples: Ele elimina a necessidade de configurar ferramentas complexas individualmente, permitindo que você comece a desenvolver rapidamente.
Padrões do WordPress: O pacote já vem configurado com as melhores práticas e padrões do WordPress, garantindo que seu código esteja alinhado com o ecossistema da plataforma.
Integração Facilmente Expandível: Embora ofereça uma configuração pronta para uso, você pode customizá-lo conforme necessário, adicionando suas próprias ferramentas e ajustes.

Como instalar e usar o `@wordpress/scripts`?

Para começar a usar o @wordpress/scripts, você precisa tê-lo instalado em seu projeto. Vale lembrar que é preciso ter o NodeJS instado no teu computador, para funcionar.

Aqui está um exemplo básico de como configurá-lo:

Instalação:

npm init -y

em seguida,

npm install @wordpress/scripts --save-dev

Configuração do package.json:
- Adicione os seguintes scripts ao seu package.json:

{
    "scripts": {
        "build": "wp-scripts build",
        "start": "wp-scripts start",
        "lint:js": "wp-scripts lint-js",
        "format": "wp-scripts format"
    }
}

Execução:
- Para compilar o código em modo de produção: npm run build
- Para iniciar o modo de desenvolvimento: npm run start

Com essas configurações, o @wordpress/scripts cuidará da maioria das tarefas de desenvolvimento, permitindo que você foque no que realmente importa: criar um site incrível.

Conclusão

O @wordpress/scripts é uma ferramenta poderosa que simplifica o desenvolvimento no WordPress, tornando o processo mais rápido e eficiente. Ao utilizá-lo, você adere às melhores práticas do WordPress, garantindo que seu projeto esteja bem estruturado e otimizado.

Nos próximos posts quero mostrar como utilizar o @wordpress/scripts juntamente com o Browser Sync e TailwindCSS de forma simples é pratica. Fique ligado! 😉

Saudações,
Grande Abraço! */}

O que é o @wordpress/scripts, como usá-lo e por que ele é essencial para seu desenvolvimento

Mon, 19 Aug 2024 00:00:00 GMT

O que é o `@wordpress/scripts`?

O @wordpress/scripts é um pacote NPM desenvolvido pela equipe do WordPress que facilita a configuração e a automação de tarefas comuns no desenvolvimento de temas e plugins. Ele foi criado para simplificar o processo de desenvolvimento, oferecendo uma série de scripts pré-configurados que lidam com tarefas como compilação, empacotamento e minificação de arquivos JavaScript e CSS.

Principais Funcionalidades do `@wordpress/scripts`:

Compilação com Babel:
- O @wordpress/scripts utiliza Babel para transpilar o código ES6+ para uma versão compatível com navegadores mais antigos. Isso permite que você escreva código moderno sem se preocupar com a compatibilidade.
Empacotamento com Webpack:
- Webpack é utilizado para empacotar todos os seus módulos JavaScript em um único arquivo. Ele também lida com importações de CSS e outras dependências, otimizando o carregamento de recursos no seu site.
Minificação de Arquivos:
- O pacote inclui scripts para minificar tanto os arquivos JavaScript quanto CSS, o que reduz o tamanho dos arquivos e melhora o desempenho do site.
Linting e Formatação de Código:
- O @wordpress/scripts vem configurado com ESLint e Prettier, ferramentas que ajudam a manter a consistência e a qualidade do código, verificando erros e aplicando regras de estilo.
Watch Mode:
- Ele oferece um modo “watch” que recompila automaticamente os arquivos sempre que há uma mudança, agilizando o processo de desenvolvimento.

Por que utilizar o `@wordpress/scripts`?

Configuração Simples: Ele elimina a necessidade de configurar ferramentas complexas individualmente, permitindo que você comece a desenvolver rapidamente.
Padrões do WordPress: O pacote já vem configurado com as melhores práticas e padrões do WordPress, garantindo que seu código esteja alinhado com o ecossistema da plataforma.
Integração Facilmente Expandível: Embora ofereça uma configuração pronta para uso, você pode customizá-lo conforme necessário, adicionando suas próprias ferramentas e ajustes.

Como instalar e usar o `@wordpress/scripts`?

Para começar a usar o @wordpress/scripts, você precisa tê-lo instalado em seu projeto. Vale lembrar que é preciso ter o NodeJS instado no teu computador, para funcionar.

Aqui está um exemplo básico de como configurá-lo:

Instalação:

npm init -y

em seguida,

npm install @wordpress/scripts --save-dev

Configuração do package.json:
- Adicione os seguintes scripts ao seu package.json:

{
    "scripts": {
        "build": "wp-scripts build",
        "start": "wp-scripts start",
        "lint:js": "wp-scripts lint-js",
        "format": "wp-scripts format"
    }
}

Execução:
- Para compilar o código em modo de produção: npm run build
- Para iniciar o modo de desenvolvimento: npm run start

Com essas configurações, o @wordpress/scripts cuidará da maioria das tarefas de desenvolvimento, permitindo que você foque no que realmente importa: criar um site incrível.

Conclusão

Nos próximos posts quero mostrar como utilizar o @wordpress/scripts juntamente com o Browser Sync e TailwindCSS de forma simples é pratica. Fique ligado! 😉

Saudações,
Grande Abraço!

Como adicionar fontes do Google de forma segura no WordPress utilizando o arquivo theme.json

Fri, 16 Aug 2024 00:00:00 GMT

Introdução

No WordPress, a maneira tradicional de adicionar fontes do Google utilizando links disponibilizados pela Google Fonts pode acarretar problemas de privacidade, especialmente em relação a GDPR, ao expor dados de usuários, como o endereço IP. Um exemplo disso é um site que foi multado por uma corte alemã por utilizar fontes hospedadas pelo Google de forma inadequada. Você pode ler mais sobre este caso neste artigo em inglês.

Para resolver esse problema, a equipe do WordPress desenvolveu uma solução integrada ao projeto Gutenberg, centralizando a configuração de fontes no arquivo theme.json. Este método não apenas melhora a privacidade, mas também pode aumentar a velocidade do seu site e simplificar o desenvolvimento, ao evitar a necessidade de configurar o @font-face manualmente.

O que é o `theme.json`?

Introduzido no WordPress 5.8 como parte do projeto Gutenberg, o arquivo theme.json permite centralizar várias configurações do tema, incluindo paleta de cores, tipografia e outras definições globais. Este arquivo pode ser utilizado tanto em temas clássicos quanto em temas baseados em blocos. Mais detalhes podem ser encontrados na documentação oficial do WordPress.

Como Adicionar Fontes do Google no WordPress?

Passo 1: Escolha e Baixe a Fonte

Acesse o site Google Fonts, escolha a fonte desejada e faça o download. Por exemplo, para utilizar a fonte “Inter”, baixe o arquivo correspondente e adicione-o ao seu tema WordPress. É recomendável criar uma pasta chamada assets e, dentro dela, uma subpasta fonts onde os arquivos de fontes serão armazenados. Note que os arquivos baixados podem estar no formato .ttf, que não é ideal para a web. Os formatos mais recomendados para uso na web são .woff e .woff2, que oferecem melhor desempenho e compatibilidade. Para converter os arquivos .ttf em .woff ou .woff2, utilize um conversor online como o Convertio.

Passo 2: Criação e Configuração do `theme.json`

Crie um arquivo chamado theme.json na raiz do seu tema e adicione o seguinte código básico:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {}
}

Passo 3: Configurando a Tipografia no `theme.json`

Para adicionar a fonte, insira a configuração de tipografia dentro do objeto settings:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "typography": {
            "fontFamilies": [
                {
                    "slug": "inter",
                    "name": "Inter",
                    "fontFamily": "\"Inter\", sans-serif",
                    "fontFace": [
                        {
                            "fontFamily": "inter",
                            "src": [
                                "file:./assets/fonts/inter/inter-VariableFont_opz,wght.ttf"
                            ],
                            "fontStyle": "normal",
                            "fontWeight": "300 400 500 600 700"
                        }
                    ]
                }
            ]
        }
    }
}

Usando a Fonte no Backend do WordPress

Agora que configuramos a fonte, vá ao painel administrativo do WordPress e acesse a área de posts do seu site. No editor de posts, localize o menu “Tipografia” no lado direito. Clique nos três pontinhos para expandir as opções e selecione “Fonte”. A fonte que configuramos estará disponível para uso.

Você poderá utilizar a fonte em qualquer parte do WordPress onde a tipografia estiver disponível. Os pesos das fontes, que também configuramos, estarão acessíveis também no menu “Tipografia” na opção de “Aparência”, permitindo personalizações adicionais.

Após realizar as alterações, salve o post e visualize-o no frontend do site. Todas as mudanças feitas no backend serão replicadas com sucesso no frontend, garantindo que o estilo aplicado esteja consistente em ambas as interfaces.

Variável Global

Como mencionado anteriormente, ao configurar uma fonte no theme.json, o WordPress gera automaticamente uma variável CSS global. Para descobrir o nome exato dessa variável, inspecione o código do site utilizando as ferramentas de desenvolvedor do navegador. Você verá que uma classe relacionada à nova fonte foi adicionada, algo como has-inter-font-family.

O nome da variável pode variar conforme o nome e as configurações da fonte que você escolheu. Essa variável estará disponível globalmente e pode ser utilizada em qualquer arquivo CSS do seu site. Por exemplo, ao inspecionar o código nas opções de style, você encontrará algo como --wp--preset--font-family--inter. Essa variável pode ser usada para aplicar a fonte personalizada em qualquer parte do seu site.

Incrível, não é?

Conclusão

Seguindo este passo a passo, você pode adicionar fontes do Google ao seu tema WordPress de forma segura e otimizada, evitando problemas com a GDPR e melhorando a performance do seu site. Se tiver dúvidas, sinta-se à vontade para deixá-las nos comentários abaixo.

Saudações,
Grande Abraço!

Nova função light-dark do CSS: Adaptando tema claro e escuro automaticamente

Fri, 26 Apr 2024 00:00:00 GMT

Embora existam várias maneiras de adaptar um tema claro e escuro em interfaces web, a nova função light-dark do CSS simplifica consideravelmente o processo.
Anteriormente, precisávamos recorrer a soluções complexas e às vezes trabalhosas para alcançar esse efeito desejado. No entanto, com a introdução da função light-dark, essa tarefa se tornou muito mais simples. Agora, implementar um esquema de cores adaptável ao tema claro e escuro é tão fácil quanto usar uma única função CSS.

O que é a função light-dark?

A função permite definir duas cores para uma propriedade, retornando uma delas com base na detecção do esquema de cores preferido pelo usuário ou do tema claro ou escuro do sistema operacional. Isso significa que podemos adaptar dinamicamente as cores de seus elementos sem a necessidade de consultar diretamente o esquema de cores preferenciais do usuário ou do sistema operacional.

Como funciona?

Como dito anteriormente a função aceita dois valores de cores light-dark(<color1>, <color2>) onde qualquer valor de cor CSS é válido. Ela retorna o primeiro valor se a preferência do usuário ou do sistema estiver definida como light (clara), e o segundo valor se estiver definida como dark (escura).
Ficou confuso? Vamos dar uma olhada em um exemplo prático para entender melhor.

Passo 1: Definindo o `color-scheme`

Antes de usar a função light-dark(), é importante definir o color-scheme no elemento :root do seu documento CSS. Isso informa ao navegador que o documento deve ser renderizado com um esquema de cores preferido que inclui tanto cores claras quanto escuras. Adicione o seguinte código ao seu arquivo CSS:

:root {
    color-scheme: light dark;
}

Passo 2: Usando a função `light-dark()`

Agora que o color-scheme está definido, você pode usar a função light-dark() para ajustar automaticamente as cores com base na preferência do usuário. Vamos abordar um exemplo comum na web, onde definiremos tons de preto e branco para cada esquema de cores. Você pode seguir os passos abaixo:

body {
  background-color: light-dark(white, #09090B)
}

h1 {
    color: light-dark(#111827, white);
}

Passo 3: Testando e ajustando

Após implementar a funcionalidade light-dark, você pode testá-la diretamente no seu navegador, sem precisar escrever código JavaScript. Por exemplo, no Google Chrome, abra as Ferramentas do Desenvolvedor clicando com o botão direito e selecionando “Inspecionar”. Vá até o menu “Customize and constrol Dev Tools” representado por três pontos, que pode ser encontrado no topo direito da aba, depois em “More tools” e em seguida clique na opção “Rendering”, conforme imagem abaixo:

Nas opções que se abrem encontre a opção “Emulate CSS media feature prefers-color-scheme” e altere entre as opções light e dark, e veja a mudança no navegador, conforme abaixo:

Obs.: É importante testar sua aplicação em diferentes dispositivos e sistemas operacionais para garantir que a adaptação de cores funcione conforme esperado. Você também pode ajustar as cores de acordo com as preferências visuais do seu projeto.

Por que isso é importante?

Adaptabilidade é a chave para uma ótima experiência do usuário. Com a funcionalidade light-dark, nos desenvolvedores podemos garantir que as interfaces se ajustem perfeitamente ao tema preferido do usuário, proporcionando uma experiência mais coesa e agradável.

Compatibilidade

Embora a funcionalidade light-dark do CSS ofereça uma maneira conveniente de adaptar automaticamente as cores da sua aplicação com base nas preferências do usuário, é importante estar ciente de que nem todos os navegadores oferecem suporte total a essa funcionalidade.
Portanto, ao implementá-la em seus projetos, é essencial realizar testes abrangentes em uma variedade de navegadores e dispositivos para garantir que a adaptação de cores funcione conforme o esperado em todas as plataformas.
Isso pode envolver a utilização de ferramentas de teste e validação, além de ajustes manuais, se necessário, para garantir uma experiência consistente para todos os usuários, independentemente do navegador que estiverem utilizando.
Uma boa dica é ficar de olho nos sites abaixo para acompanhar o desenvolvimento e adaptação da funcionalidade:

Conclusão

A funcionalidade light-dark do CSS é uma adição poderosa ao arsenal de qualquer desenvolvedor front-end. Com sua capacidade de criar interfaces adaptáveis e visualmente atraentes, ela está definida para se tornar um padrão na criação de experiências digitais modernas.
Experimente esta técnica em seus projetos e veja como ela pode melhorar a usabilidade e a atratividade das suas criações!

Saudações,
Grande Abraço!

Bem-vindos a versão 2.0 do blog

Fri, 19 Apr 2024 00:00:00 GMT

E aí, pessoal! É com grande entusiasmo que hoje trago para vocês o lançamento oficial da versão 2.0 do meu blog. Depois de semanas de dedicação e muito trabalho árduo, estou extremamente empolgado para compartilhar com todos vocês as novidades e melhorias que implementei.

Então, o que há de novo nesta versão, vocês podem estar se perguntando? Bem, vamos lá!

Next.js 14: Decidi dar um grande salto e migrar para o Next.js 14 para potencializar a experiência de navegação. Com sua eficiência e desempenho aprimorados, tenho certeza de que vocês notarão uma diferença significativa ao acessar o blog.

Tailwind CSS: Quanto ao design, adotei o Tailwind CSS para criar uma estética moderna e limpa. Sua abordagem baseada em classes tornou a estilização mais eficiente e flexível, permitindo-me personalizar cada elemento de acordo com minhas preferências.

Shadcn UI: Para os componentes da interface do usuário, escolhi o Shadcn UI. Sua vasta coleção de componentes prontos para uso me permitiu construir páginas de forma rápida e sem complicações, mantendo um visual consistente em todo o blog.

TypeScript: Em termos de desenvolvimento, adotei o TypeScript para garantir um código mais robusto e seguro. Com sua tipagem estática, pude detectar e corrigir erros mais rapidamente, proporcionando uma experiência de desenvolvimento mais tranquila.

Velite: Uma ferramenta para construir uma camada de dados segura por tipo, transformando Markdown/MDX, YAML, JSON ou outros arquivos em uma camada de dados do aplicativo com esquema Zod.

MDX: Por fim, para a criação de conteúdo, adotei o MDX, uma poderosa extensão do Markdown que me permite incorporar componentes React diretamente nos meus posts. Com isso, posso criar conteúdos mais dinâmicos e interativos para vocês, meus queridos leitores.

Em resumo, a versão 2.0 representa não apenas uma atualização, mas sim uma evolução significativa na minha jornada de conhecimento e experiências. Estou animado para ver como essas novas ferramentas e tecnologias irão enriquecer e tornar a experiência ainda mais gratificante.

Por favor, sintam-se à vontade para explorar o novo blog, ler os posts recentes e deixar seus comentários e feedback pois stou sempre aberto a sugestões e melhorias.

Saudações,

Grande abraço!

Diferença entre var, let e const

Thu, 25 May 2023 00:00:00 GMT

Atualmente há três formas de se declarar variáveis em JavaScript, utilizando as palavras var, let e const. Todas as formas são aceitas, mas a partir da versão ES6/ES2015 do JavaScript uma das medidas que foi adotada foi a utilização da sintaxe com const e let.

Mas o que torna diferente do var? Se você não sabe, este artigo é para você.

Aqui, vou abordar a diferença entre var, let e const com relação ao escopo e hoisting, que é um dos principais problemas que foi solucionado com o const e let.

Antes de mais nada precisamos entender dois conceitos importantes que são escopo e hoisting.

TL;DR

Escopo

É o local onde as variáveis ou expressões são declaradas dentro do código. Por exemplo, uma função cria um escopo, se uma variável for declarada dentro desta função ela não poderá ser acessada fora da função ou dentro de outras funções.

Hoisting

O hoisting foi introduzido no ES6 e foi pensado sobre como o código JavaScript funciona em modo de execução. Para definir o hoisting em palavras simples podemos dizer que todas as declarações de variáveis e funções são movidas para o topo do seu código antes dele ser executado.

Contudo não é isso que realmente acontece, as declarações de variáveis e funções são colocados em memória durante a fase de execução, mas permanece exatamente onde você as declarou no código.

Agora que foi esclarecido esses dois termos vamos falar um pouco sobre as variáveis declaradas com o var.

Var

Antes do ES6 as variáveis eram declaradas com o var, essa era a regra. Todavia havia problemas relacionados a essa declaração, por isso foi necessário o surgimento das duas novas formas. Antes de tudo, vamos entender o comportamento do var e depois discutir seus problemas.

Variáveis com var podem ser redeclaradas e atualizadas

Em outras palavras significa que podemos criar uma variável e alterar o valor que foi atribuído a ela. Isso pode ser feito de duas formas, veja abaixo:

var name = 'Bastião';
var name = 'Bastiana';

// ou

var number = 20;
number = 30;

Escopo de var

A declaração utilizando o var tem três escopos: global, de função ou local.

O escopo global é quando a variável é declarada fora de uma função, em outras palavras qualquer variável declarada com var fora de um bloco de função pode ser utilizada em todo o arquivo.

Sob o mesmo ponto de vista, quando a variável for declarada dentro de uma função significa que ela está disponível e pode ser acessada somente dentro da função correspondente.

Veja o exemplo:

var name = 'Bastião';

function sayHello() {
  var hello = "Olá!";
}

Aqui a variável name tem escopo global, pois foi declarada fora da função, enquanto a variável hello tem escopo de função por ser declarada dentro da função. Neste sentido, não é possível acessar a variável hello fora da função, se você tentar acessá-la um erro será retornado informando que hello não foi definida.

var name = 'Bastião';

function sayHello() {
  var hello = "Olá!";
}
console.log(hello); // helllo is not defined

Hoisting de var

Variáveis de var sofrem o hoisting e vão para o topo do escopo, e elas são inicializadas com o valor de undefined. Vejamos no código abaixo.

var name;
console.log(name); // undefined
name = 'Bastião';

Problemas com o var

O uso do var tem um ponto fraco, que abordarei no código abaixo.

var car = "Fusca";

if (true) {
  var car = "Palio";
}

console.log(car); // Palio

Inicialmente criamos a variável car e atribuímos o valor “Fusca”, quando chegar no if a variável será redefinida para “Palio”. A princípio você não verá um problema em atualizar o valor de car, mas se tornará um problema a partir do momento em que você não se lembrar de já ter declarado essa variável antes.

Imagine um código com várias linhas, nele é declarado inúmeras variáveis, consequentemente em algum momento você vai se surpreender com o resultado que vai receber e provavelmente poderá causar vários erros de código. Dessa forma é necessário o uso de cont e let.

Se você ainda não visualizou o problema do var no código acima, vou utilizar o mesmo código utilizando let.

Let

Atualmente é a forma mais indicada para criação de variável no lugar do var. Ele resolve o problema de escopo do var que acabei de mostrar acima, bem como mantém o escopo de bloco, evita redeclaração, mas permite alterar o valor da variável.

let name = 'Bastião';
let name = 'Bastiana'; // erro, name já foi declarado

// forma correta

let number = 20;
number = 30;

Vejamos agora o mesmo código do problema com o var utilizando o let.

let car = "Fusca";

if (true) {
  let car = "Palio";
}

console.log(car); // Fusca

Perceba que o uso do let impediu a redeclaração da variável car, evitando gerar bugs e resultados inesperados no código.

Escopo de bloco

Antes de mais nada, precisamos falar sobre o escopo de bloco que é o comportamento do let e const.

Um bloco é criado com chaves { }, ou seja, tudo que está dentro das chaves é um bloco. Não confunda com a criação de objetos ={ }.

Escopo de Let

Uma variável declarada com let dentro de um bloco, está disponível somente dentro daquele bloco.

Vejamos no exemplo:

let fruit = 'Maçã';

if (true) {
  let animal = "Gato";
  console.log(animal); // retorna Gato
}
console.log(animal); // animal is not defined - animal não foi definido.

Veja que a variável criada com let dentro do bloco retorna um erro dizendo que ela não foi definida, pois let tem escopo de bloco.

Para finalizar o escopo de let com chave de ouro, veja o código a seguir:

let car = "Fusca";

if (true) {
  let car = "Palio";
  console.log(car); // retorna "Palio"
}

console.log(car); // retorna "Fusca"

Se você olhar rápido vai falar que é o mesmo código anterior que retornou erro informando que a variável não foi definida, mas não é.

Mas porque não ocorre erro? Porque as instâncias de car são tratadas como variáveis diferentes por estarem em escopos diferentes, em outras palavras, pelo simples fato de adicionar um console.log() dentro do bloco if o JavaScript é inteligente o suficiente para diferenciar as variáveis.

Portanto é indicado utilizar let ou invés de var para declaração de variáveis.

Hoisting de Let

Assim como o var, as declarações de let também sofrem o efeito do hoisting, mas diferentes do var que é iniciado com undefined, o let não é inicializada. Sendo assim, se você tentar acessar a variável let antes da sua declaração terá um erro informando que a variável não foi definida.

Const

Variáveis declaradas com const tem os valores constantes, ou seja, não é possível reatribuir outro valor, nem redeclarar a variável. Caso tente reatribuir um valor ou redeclarar a variável um erro será impresso.

const name = 'Bastiana'
name = 'Joana' // Error: Assignment to constant variable

// ou

const car = 'Fusca'
const car = 'Palio' // Error: Identifier 'car' has already been declared

As declarações de const devem ser inicializadas no momento forem declaradas.

Portanto este comportamento muda quando declaramos um objeto com const, embora os objetos não possam ser atualizados é possível atualizar as propriedades do objeto. Vejamos:

const car = {
  ports: 2,
  name: 'Fusca'
}

Não é possível fazer isso:

car = {
  engine: '2.0',
} // error: Assignment to constant variable.

Porém isso é possível:

car.name = 'Palio'

O código acima atualizará o valor de car.name.

Escopo de const

Da mesma forma que as declarações de let, as declarações de const tem escopo de bloco, ou seja, podem ser acessadas somente dentro do bloco onde foram declaradas.

const fruit = 'Maçã';

if (true) {
  const animal = "Gato";
  console.log(animal); // retorna Gato
}
console.log(animal); // animal is not defined - animal não foi definido.

Hoisting de const

Assim como as declarações de let, as de const sofrem hoisting, mas não são inicializadas.

Resumo

Caso não tenha entendido a diferença, aqui vai:

Declaração de var, tem escopo global e de função
Declaração de let e const tem escopo de bloco.
Variáveis com var podem ser atualizadas e redeclaradas dentro do escopo.
Variáveis de let podem ser atualizadas, mas não podem ser redeclaradas
Variáveis de const não pode ser atualizadas nem redeclaradas novamente
Ambas declarações sofrem o hoisting, mas variáveis com var são inicializadas com undefined, e variáveis com let e const não são inicializadas
Portando var e let podem ser declaradas sem ser inicializadas
Enquanto const precisa de inicialização durante a declaração.

Considerações finais

Por fim, acredito que é importante saber as diferenças nas declarações de variáveis principalmente para quem está iniciando com o JavaScript, assim como entender conceitos como escopo, bloco, hoisting para não ser pego de surpresa quando estiver codando.

Espero que tenham gostado.

Grande abraço.

Nova sintaxe para media query CSS

Wed, 12 Apr 2023 00:00:00 GMT

Introdução

A media query atualmente recebeu uma pequena atualização simplificando a escrita e ajudando na compreensão.

Quem nunca ficou confuso na hora de escrever um media query e determinar se a propriedade seria min-width ou max-width?

Eventualmente a media query é mais utilizada para definir regra de acordo com o tamanho da tela, ou seja, a viewport e com a nova sintaxe a escrita ficará mais simples. Vejamos como funciona.

Como funcionará?

@media (min-width: 600px) {
  // code
}

Aqui temos um código de implementação de uma media query, é neste momento que fica um pouco confuso, porque escrevemos min-width para viewport maior ou igual à 600px.

Mas com a nova sintaxe o código ficará assim:

@media (width >= 600px) {
  // code
}

No código acima é utilizado uma regra matemática para definir o tamanho do width deixando o código mais simples, ao passo que utilizamos essas regras matemáticas o tempo todo.

Outros exemplos

Para utilizar duas ou mais definições de media query utilizamos:

@media (min-width: 600px) and (max-width: 800px) {
  // code
}

Com a nova sintaxe o código fica:

@media (600px <= width >= 800px) {
  // code
}

Suporte

Atualmente o suporte a nova sintaxe de media query está nos seguintes navegadores:

Chrome 104
Edge 104
Firefox 63
Safari 16.4

Conclusão

Eu gostei bastante, acho que simplifica um pouco a leitura e a escrita.

E você o que achou dessa nova sintaxe do media query?

Grande Abraço!

Adicione super poderes a seus comentários JavaScript

Sat, 25 Feb 2023 00:00:00 GMT

Introdução

Comentários é uma maneira muito eficaz de explicar o que o código faz e como ele funciona. Adicionando comentários úteis ao seu código você pode torná-lo fácil de entender, dar manutenções e manter. Além disso, comentários podem te ajudar a se lembrar do que você fez naquela sexta-feira às 17h50 e que depois é preciso refatorar (entendedores entenderão).

É importante lembrar que comentários também podem ser utilizados para documentar um código explicando o motivo de porque certas decisões foram tomadas e fornecer informações a outros devs que trabalham ou irão trabalhar no código.

Situação

Vejamos a seguinte situação:

Você criou uma função que vai retornar o nome completo do usuário, essa função vai receber dois parâmetros, name e lastName.

function fullName(name, lastName) {
  return `${name} ${lastName}`;
}

console.log(fullName("Maria", "Sebastiana")); // Maria Sebastiana

Esse é um código muito simples é só você bater o olho que consegue entender e se você estiver utilizando o VS Code ele é inteligente o suficiente para te falar que a função recebe dois parâmetros.

Mas perceba que o name e lastName são do tipo any, ou seja, podem ser qualquer valor, mas por algum motivo você quer ser explícito com os argumentos que deseja receber na sua função, como por exemplo falar que o name e lastName sejam do tipo string e quando for utilizar a função o editor já consiga avisar quais tipos de parâmetros deve passar.

Talvez adicionar algo assim:

// name e lastName são strings
function fullName(name, lastName) {
  return `${name} ${lastName}`;
}

console.log(fullName("Maria", "Sebastiana")); // Maria Sebastiana

Isso seria informativo, mas e se a função estiver sendo utilizada em outro arquivo? Além do mais o VS Code continuaria informando que os valores são do tipo any.

Como resolver?

É neste momento que você vai dar super poder a seus comentários utilizando a API de documentação do JavaScript o JSDoc. Na nossa função podemos adicionar a tag @param no comentário, informando o tipo de parâmetro que será recebido na função.

Agora os comentários devem ser adicionados antes do código documentado e começar com a seguinte sequência /**. Comentáro começando com /**, /*** serão ignorados.

/**
 *
 * @param {string} name
 */
export function fullName(name, lastName) {
  return `${name} ${lastName}`;
}

console.log(fullName());

A sintaxe é simples, você utiliza o @param { type } onde o type é o tipo de dado disponível em JavaScript como: string, number, boolean, Object etc. Ao colocar o mouse sobre a função fullName(), você verá que o name está assinalado como string.

Vamos fazer a mesma coisa para o parâmetro lastName.

/**
 *
 * @param {string} name - Chico
 * @param {string} lastName - Bastião
 * @returns {string}
 */
export function fullName(name, lastName) {
  return `${name} ${lastName}`;
}

Perceba que adicionei outra tag @param para o lastName e na frente adicionei uma descrição, isso é bem útil porque você pode adicionar uma descrição detalhada sobre o parâmetro. Outra tag que foi adicionada foi o @returns nela você pode discriminar que tipo de retorno terá a função.

Show!, não é?

Conclusão

Viram como é simples e interessante adicionar comentários inteligentes no seu código JavaScript? E você não precisa se limitar somente em @param ou @returns há diversas outras tags para você usar e abusar, é só olhar na documentação do JSDoc.

Claro que isso não seria necessário se você estivesse utilizando TypeScript. Mas às vezes você ainda não sabe TypeScript ou o projeto seja em JavaScript.

Espero que tenham gostado dessa dica.

Grande abraço.

Backstage: Introdução

Mon, 17 Oct 2022 00:00:00 GMT

Sejam bem vindos ao meu blog.

Neste primeiro post quero explicar porque criei um blog e como isso me ajuda na minha vida pessoal e profissional.

O principal motivo é praticar o que estou estudando e trabalhando. Eu utilizo uma metodologia de sempre escrever algo sobre o que estou estudando e tento escrever como se eu estivesse explicando o assunto para uma pessoa que tenha pouco conhecimento e de forma simples, assim eu consigo fixar melhor o conteúdo. Essa é uma metodologia que muitas pessoas utilizam.

Eu criei o blog do zero utilizando diversas tecnologias como? React, NextJS, Styled Components, NetlifyCMS dentre outras. Apesar de já trabalhar com a maioria dessas tecnologias eu aprendi diversas outras coisas que foram necessárias para que o blog funcionasse como deveria e isso é enriquecedor.

Como eu tento escrever como se fosse explicar para uma pessoa que tem pouco conhecimento, outra coisa que preciso aperfeiçoar é minha escrita, apesar de ler bastante eu tenho muitos vícios na hora que vou escrever e só conseguimos melhorar praticando.

Quero escrever sobre desenvolvimento web, tecnologias e demais assuntos que considero interessantes, além de criar tutoriais que possam ajudar outros desenvolvedores que estão começando e querem aprender algo novo ou até mesmo que tem dificuldades sobre determinado assunto.

Enfim, não quero me estender muito, mas como vocês viram será um blog pessoal e profissional. Espero aprender muito com ele e quem sabe ajudar outras pessoas.

Espero que curtam!

P.S.: Caso encontre algum bug, erro de escrita ou alguma outra coisa pode entrar em contato comigo através nas minhas redes sociais e reportar, pois não adicionei um sistema de comentários ainda estou analisando algumas opções.

Grande abraço!

Randys Machado

Nova versão do blog: saí do Next.js e fui para o Astro

Por que mudar

Por que Astro

O que mudou por baixo

CSS nativo no lugar do Tailwind

Markdown sem MDX

O que mudou por fora

Os números

O que ficou de fora (por enquanto)

O que vem por aí

Como utilizar o Browsersync no WordPress

O que é o Browsersync?

Como instalar?

Juntando tudo

Conclusão

Principais Funcionalidades do @wordpress/scripts:

Por que utilizar o @wordpress/scripts?

Como instalar e usar o @wordpress/scripts?

Conclusão

O que é o @wordpress/scripts, como usá-lo e por que ele é essencial para seu desenvolvimento

O que é o @wordpress/scripts?

Principais Funcionalidades do @wordpress/scripts:

Por que utilizar o @wordpress/scripts?

Como instalar e usar o @wordpress/scripts?

Conclusão

Como adicionar fontes do Google de forma segura no WordPress utilizando o arquivo theme.json

Introdução

O que é o theme.json?

Como Adicionar Fontes do Google no WordPress?

Passo 1: Escolha e Baixe a Fonte

Passo 2: Criação e Configuração do theme.json

Passo 3: Configurando a Tipografia no theme.json

Usando a Fonte no Backend do WordPress

Variável Global

Conclusão

Nova função light-dark do CSS: Adaptando tema claro e escuro automaticamente

O que é a função light-dark?

Como funciona?

Passo 1: Definindo o color-scheme

Passo 2: Usando a função light-dark()

Passo 3: Testando e ajustando

Por que isso é importante?

Compatibilidade

Conclusão

Bem-vindos a versão 2.0 do blog

Diferença entre var, let e const

Escopo

Hoisting

Var

Variáveis com var podem ser redeclaradas e atualizadas

Escopo de var

Hoisting de var

Problemas com o var

Let

Escopo de bloco

Escopo de Let

Hoisting de Let

Const

Escopo de const

Hoisting de const

Resumo

Considerações finais

Nova sintaxe para media query CSS

Introdução

Como funcionará?

Outros exemplos

Suporte

Conclusão

Adicione super poderes a seus comentários JavaScript

Introdução

Situação

Como resolver?

Conclusão

Backstage: Introdução

Principais Funcionalidades do `@wordpress/scripts`:

Por que utilizar o `@wordpress/scripts`?

Como instalar e usar o `@wordpress/scripts`?

O que é o `@wordpress/scripts`?

Principais Funcionalidades do `@wordpress/scripts`:

Por que utilizar o `@wordpress/scripts`?

Como instalar e usar o `@wordpress/scripts`?

O que é o `theme.json`?

Passo 2: Criação e Configuração do `theme.json`

Passo 3: Configurando a Tipografia no `theme.json`

Passo 1: Definindo o `color-scheme`

Passo 2: Usando a função `light-dark()`