Uma foto minha vestido com o uniforme da Grifinória do Harry Potter

Willian JustenSoftware Engineer

Instrutor na Udemy, escrevo sobre o mundo front end, viagens, vida pessoal e mais.

# NextJS

Usando Netlify CMS com NextJS, Vercel e GitHub

Como utilizar um CMS super simples como criar Pull Requests no GitHub

Usando o Preact no NextJS para mais performance

Diminua ainda mais o bundle do seu projeto NextJS usando o Preact

Como mostrar trechos de código num blog com NextJS

Aprenda a usar um syntax highlighter para mostrar trechos de código mais bonitos no seu blog

Como configurar o Google Analytics no NextJS em 2021

Como configurar corretamente o Google Analytics no NextJS com o next/Script

Gatsby e NextJS: Performance e Developer Experience

Uma breve comparação entre os frameworks e a experiência de desenvolvimento.

Migrei meu blog do Gatsby para o NextJS

Um pouco da razão da mudança, coisas que fiz e minhas impressões.

# Dicas rápidas

Criando toda a estrutura de um site usando o Strapi CMS

Nessa aula eu mostro como penso e monto o backend de um site institucional simples.

Como configuro meu editor e desktop para gravar código

São muitos anos gravando aulas, então aqui compartilho algumas coisas que descobri.

Como deixar a imagem da webcam redonda no OBS

Como utilizar filtro e máscara para ter seu vídeo mais legal

Criando componente de Tipografia com styled-components

Utilizando o poder do polymorphic no styled-components

Adicionando ícone de GitHub nos projetos opensource

Já pensou como o pessoal sempre usa aquele ícone bonitinho no canto? Agora vai saber!

Fazendo o browser falar por você - Web Speech API

Nesse post eu vou mostrar como utilizei a Web Speech API para meu projeto Japanese Words.

Juntando arrays e objetos com Spread syntax no JavaScript

Evite usar bibliotecas externas para coisas simples como fazer merge de objetos e arrays.

Formatando datas com JS puro

Nem sempre precisamos de bibliotecas enormes para resolver um problema simples.

Formatando número em dinheiro com JS puro

Evite usar bibliotecas externas para coisas simples como formatar números em dinheiro.

Criando imagens bonitas de código

Já viu blocos de código bonitos no Twitter e sempre quis fazer? Chegou sua vez!

Debugando e agilizando testes na React Testing Library

Como um método tão simples pode te ajudar a acelerar os seus testes e também descobrir erros escondidos.

# Dicas de CSS

Criando uma animacao de Card com Hover

Aprenda a fazer uma animação bem legal utilizar os pseudo-seletores :after e :before

Criando um tooltip animado com CSS clip-path

Aprenda a fazer uma micro interação bem sútil, mas que vai fazer toda a diferença no seu layout.

Criando uma animação de ondas com CSS e SVG

Aprenda a animar ondas feitas em SVG somente com CSS puro e cria um hero muito mais criativo e bonito.

Criando Textos Responsivos com CSS

Aprenda a deixar seus textos responsivos e fluidos em qualquer tela com viewport units e funções min-max do CSS.

Criando um background com gradiente animado com CSS Puro

Aprenda a criar um background animado para os seus sites e acaba com a monotonia dos fundos estáticos.

Criando uma animação de Reveal Block com CSS

Como fazer um efeito de mostrar um bloco e então revelar o conteúdo por trás com CSS.

Criando uma animação de digitação com CSS

Como fazer um efeito parecido com uma máquina de escrever digitando na tela somente só CSS.

Utilizando CSS Counters

Vamos aprender a fazer o CSS contar!

Dica de CSS: Scroll Snap

Criando fullpage scroll com simples linhas de CSS.

Como criar um loader com CSS puro e uma div

Todos nós já tivemos que usar um loader na vida, aprenda a criar o seu do zero com pouquíssimas linhas de código.

Criando Menu Fullscreen animado com CSS puro

Nesse post/video eu vou ensinar a segunda do nosso experimento, onde vamos criar um menu fullscreen animado e aprender um pouco de cubic bezier.

Criando ícone menu hamburguer animado com CSS puro

Nesse post/vídeo eu ensino como criar esse ícone animado para na segunda parte integrar a um menu real e bem legal.

Menu Sticky e Smooth Scroll com CSS puro

Aprenda algumas propriedades bem interessantes do CSS e já saia brincando por aí.

# Trabalhar no exterior, remoto, viagens, etc

Talk: Uma conversa sobre Trabalho Remoto

Será que remoto é para todo mundo? Quais os desafios? Quais os ganhos? Por onde começar?

Meus 15 dias no Chile

Meu roteiro, lugares que me hospedei, passeios que fiz e outras curiosidades.

Minhas experiências com Trabalho Remoto em TI

Após mais de 2 anos trabalhando remoto, venho compartilhar algumas das minhas experiências e também responder muitas perguntas

Meus 20 dias no Peru

Um pouco do roteiro que fiz, lugares que me hospedei, trilhas que fiz, meus equipamentos e mais.

Meus 50 dias na Espanha

Um pouco sobre como me locomovi, hospedagem, gastos e meu trabalho remoto.

O que preciso saber para trabalhar no exterior?

Algumas coisinhas que você precisa saber para poder conseguir um trabalho no exterior e/ou remoto.

Devs Brasileiros, Gringos e trabalhar no exterior

Será que a diferença é tão grande assim? Vamos conversar um pouco sobre isso.

Vindo morar e estudar na Irlanda

Algumas coisas que eu passei e você precisa saber se deseja vir morar e/ou estudar aqui também.

# Performance Web

Performance Web: Evite escrever HTML demais

Calma, HTML ainda é importante, mas é legal ficarmos atentos a quantidade de nós criados.

Como colocar seu site no ar de graca

Calma, não é click-bait, é hospedagem grátis mesmo! Conheça e domine o Netlify para subir todos os seus projetos e freelas de um jeito fácil, rápido e otimizado.

Como fazer seu site funcionar offline com PWA

O passo-a-passo de como criar um site PWA que funciona até offline.

Varrendo seu site atrás de links quebrados

Não perca a credibilidade do seu site com imagens ou links quebrados.

Perfomance Web: Critical CSS e Jekyll

A web é lenta, mas sempre podemos deixar mais rápido, mais uma dica simples para melhorar seus sites.

Performance Web: Usando fontes do sistema

Como algo tão simples como as fontes podem ajudar na performance do seu site.

Medindo a performance do seu site com Lighthouse

Uma ferramenta perfeita para dizer tudo que está bom e ruim no seu site.

# O mundo mágico do SVG

Mask e Clip com CSS e SVG

Dois efeitos simples que podem transformar seu site com estilo.

Criando um loader animado em SVG

Aprenda a criar um loader com uma animação única em SVG com apenas poucas linhas.

Pre-venda: Curso de SVG

Se adiante e adquira um dos cursos mais completos de SVG totalmente em português.

#16 - Criando e Exportando SVG para Web

Aprenda como otimizar seu SVG para ter a melhor entrega para web. Se você é designer ajude seu amigo dev.

#15 - Criando o efeito de desenhar com SVG

Um tutorial de como fazer aquele efeito legal de desenhar elementos na tela com SVG.

#14 - Manipulando SVG com JS

Veja como manipular SVG com JS e algumas libs para brincar.

#13 - Animando SVG com SMIL

Aprenda a criar animações usando só SVG e nada mais!

#12 - Animações em SVG com CSS

Aprenda como criar animações para o SVG usando só CSS e tenha um site leve e bonito.

#11 - Usando SVG Sprites

Já foi provado que o SVG substitui icon fonts, mas e Sprites? Aprenda a utilizar essa técnica com SVG de várias formas.

#10 - Criando um SVG responsivo e adaptativo

Hoje em dia com a variedade de telas que temos, o desafio é dar o melhor conteúdo para cada tipo de tela.

#9 - Colorindo em SVG

Vamos voltar a ser crianças e colorir as coisas! Aprenda as técnicas para mudar as cores do SVG.

#8 - Estilizando SVG com CSS - Parte 2

Aprenda quais as propriedades que o SVG possui e como trabalhar com elas.

#7 - Estilizando SVG com CSS - Parte 1

Aprenda as diferentes formas de mudar o estilo de um SVG somente com CSS.

#6 - Sistemas de Ícones em SVG

Como usar ícones em SVG e por que ele é bem melhor que outras alternativas?

#5 - Atomic Design no SVG - g, use, defs, symbol

Neste artigo iremos saber mais sobre a estruturação de um SVG, seus elementos, suas vantagens e um pouco de Atomic Design.

#4 - A estrutura do SVG

Saiba como o SVG funciona de verdade, seus elementos, alguns de seus atributos e alguns atalhos para facilitarem nosso trabalho.

#3 - Onde baixar SVG?

Eu sou programador e não designer, como é que vou fazer essas coisas aí? Aqui vou mostrar que não precisa ser designer para poder usar SVG.

#2 - Como usar SVG

Aqui irei explicar as diferentes formas de se inserir um SVG na sua página web. Um breve início da grandiosidade que se está por vir.

#1 - Por que usar SVG?

O SVG finalmente começa dar o ar das graças e você vai saber aqui o porquê disso.

# Aprendendo ReactJS

Criando Componentes React com Testes - Lyef-flag

Como escrever um componente React com Mocha, Chai, Enzyme e Storybook.

Lyef - Criando componentes desacoplados em ReactJS

Um boilerplate para criar componentes reutilizáveis e desacoplados em ReactJS

Vídeo: Iniciando um app React em 3 minutos

Iniciar um projeto React não precisa e nem deve ser muito trabalhoso.

Refatorando componentes React de ES5 para ES6

Aproveite a nova sintaxe e entenda a diferença entre os códigos.

Configurando o Webpack para rodar React e ES6

Aprenda como utilizar esse module bundler para facilitar sua vida nos projetos com ES6 e React.

Utilizando SVG Sprites com React

Aprenda a utilizar os famosos ícones SVG dentro do React de forma bem fácil com Stateless Functions.

#3 - O básico da API do ReactJS

Aprenda um pouco mais sobre a API do React e como começar a brincar.

#2 - Como usar o ReactJS

As diferentes formas de se usar e se iniciar um projeto com ReactJS.

#1 - Começando com ReactJS

Tentando entender o que é? Para que serve? Por onde começar?

# Links da Semana

Links da semana #6

Links da semana #6 - Links sobre coisas interessantes que fui vendo pela semana.

Links da semana #5

Links da semana #5 - Links sobre coisas interessantes que fui vendo pela semana.

Links da semana #4

Links da semana #4 - Links sobre coisas interessantes que fui vendo pela semana.

Links da semana #3

Links da semana #3 - Links sobre coisas interessantes que fui vendo pela semana.

Links da semana #2

Links da semana #2 - Links sobre coisas interessantes que fui vendo pela semana.

Links da semana #1

Links da semana #1 - Links sobre coisas interessantes que fui vendo pela semana.