Forem: Willian Justen

Como configurar o Google Analytics no NextJS em 2021

Willian Justen — Wed, 15 Sep 2021 10:40:01 +0000

Introdução

Fala povo, tem um tempinho eu migrei meu blog do Gatsby para o NextJS e inclusive falei que iria fazer vários pequenos posts com dicas sobre alguns dos detalhes dessa migração e até mesmo como fazer certas coisas no NextJS. Acabei não tendo tempo, mas agora estou aqui! Vou começar com uma coisinha bem simples, mas que teve um diferencial com a versão mais nova do NextJS.

Enquanto vou escrevendo esse post vou ouvindo uma das minhas bandas favoritas de todas em um dos meus albuns favoritos, que é Freak Show - Silverchair

Novo componente de Script

Uma coisa que eu gosto muito do NextJS é que eles estão sempre se atualizando e tentando melhorar ainda mais a performance das aplicações. Como é o slogan deles Let’s make the Web. Faster.

Na versão 11 eles lançaram o Componente de Script que permite com que você tenha uma granularidade melhor no carregamento de scripts third-parties, o que como nós sabemos, pode afetar demais a performance dependendo do tamanho do arquivo e se ele é carregado junto com todo o resto ou se é carregado depois.

Com esse novo componente, nós temos 3 formas de carregamento:

beforeInteractive: Para scripts críticos que precisam ser baixados e executados antes mesmo da página ser interativa. Normalmente scripts que são fundamentais para o funcionamento da página. Esses scripts são adicionados no server side.
afterInteractive (padrão): Para scripts que podem ser baixados e executados após o carregamento da página. Coisas como tag managers e o próprio analytics. Esses scripts são adicionados já no client-side e rodam depois do hydrate.
lazyOnload: Para scripts que podem carregar quando o carregamento das partes fundamentais já tiver finalizado e não tiver mais nenhuma ação acontecendo. Normalmente para scripts de redes sociais, chats, elementos que não vão estar aparecendo na primeira dobra da página.

Configurando o Analytics e usando o Script

Agora que já conhecemos o componente de Script, podemos configurar o nosso Analytics para carregar no modo afterInteractive. Eu costumo criar um componente Analytics para ficar mais fácil de editar/adicionar:

import Script from 'next/script'
import { GA_TRACKING_ID } from 'lib/gtag'

const Analytics = () => (
  <>
    <Script
      strategy="afterInteractive"
      src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
    />
    <Script
      strategy="afterInteractive"
      dangerouslySetInnerHTML={{
        __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `
      }}
    />
  </>
)

export default Analytics

Note que o afterInteractive é o comportamento padrão, mas eu costumo deixar bem explícito, até para que mesmo quem não conheça o Script saiba o que vai acontecer.

Outro detalhe é que eu tenho um arquivo lib/gtag que fica responsável pelos métodos e variáveis, que é assim:

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}

Note que para tudo funcionar precisamos criar uma variável NEXT_PUBLIC_GA_ID no nosso .env.production para que o mesmo funcione. Se quiser testar em local, basta criar um arquivo .env.local.

Colocando para funcionar e enviando pageview

Só com os arquivos acima ainda não vai funcionar, pois precisamos adicionar esse componente na nossa _app e também precisamos enviar as pageviews sempre que tiver um acesso na página. Para isso, vamos precisar adicionar alguns detalhes, segue abaixo um arquivo _app só com os trechos necessários:

import { useEffect } from 'react'
import { useRouter } from 'next/router'

import * as gtag from 'lib/gtag'
import Analytics from 'components/Analytics'

function App({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = url => {
      gtag.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  )
}

export default App

Se você notar, na primeira parte nós temos:

const router = useRouter()

useEffect(() => {
  const handleRouteChange = url => {
    gtag.pageview(url)
  }
  router.events.on('routeChangeComplete', handleRouteChange)
  return () => {
    router.events.off('routeChangeComplete', handleRouteChange)
  }
}, [router.events])

Essa parte é a responsável por a cada mudança de rota enviar o gtag.pageview daquela url.

E para termos o gtag funcionando no escopo global, nós adicionamos o componente de Analytics bem ao final da _app:

return (
  <>
    <Component {...pageProps} />
    <Analytics />
  </>
)

Com esses passos, aí sim toda pageview já será enviada ao Google Analytics de forma prática e sem impactar tanto a performance! =D

Conclusão

Espero que tenha curtido esse post, ele já estava na minha lista de posts e tudo, mas semana passada mesmo teve um PR no repositório oficial do NextJS exatamente sobre isso, então achei bacana trazer para cá por agora e depois vou continuar com alguns outros posts do NextJS também, então fica ligado!

Configurando 2 contas de Git no mesmo computador

Willian Justen — Tue, 14 Sep 2021 10:31:30 +0000

Introdução

Fala povo, recentemente eu voltei ao mercado de trabalho para trabalhar numa startup chamada Zapt e consequentemente precisei configurar o Git da minha máquina para não usar somente o meu email pessoal, mas também o da empresa, principalmente porque lá utilizam o GitLab ao invés do GitHub, então ele é mais chatinho para reconhecer os emails e chaves SSH.

É bem simples de configurar, mas percebi que muita gente não sabe como fazer da mesma maneira que eu faço, então resolvi escrever esse post rapidinho para ensinar. Lembrando que os processos descritos abaixo funcionam no Linux, Mac e Windows com WSL, no Windows puro algumas outras configuração seriam necessárias, mas não irei abordar aqui.

Enquanto eu vou escrevendo esse post vou ouvindo Pitty, isso mesmo, aquela rockeira baiana que era bem famosa nos 2000, como já disse, escuto de tudo xD

Por que configurar o Git e como fazer?

Antes mesmo de começar a falar de SSH e etc, a gente precisa falar a razão de configurar o Git num é mesmo? Bom, quando nós criamos um commit, ao ver no log, ele fica numa estrutura similar a essa:

commit 82a24142b6df8049787760c82d29728f8fb0eee5 (HEAD -> master, origin/master, origin/HEAD)
Author: Willian Justen de Vasconcellos <willianjustenqui@gmail.com>
Date: Sun Sep 5 23:31:04 2021 -0300

    Remove dangerously to use Script

Se você notar, tem uma parte separada especificamente para o Author. Se você não configurar, o Git vai pegar o que tiver de informação no computador e na maioria das vezes ele não vai colocar direito nem o nome e muito menos o email.

Para configurar uma conta única e global é super simples, basta digitar:

git config user.name --global "Willian Justen de Vasconcellos"
git config user.email --global "willianjustenqui@gmail.com"

Mas e se precisar mudar para o email da empresa no projeto X? A forma não automatizada é dentro do projeto definir manualmente:

git config user.name "Willian Justen de Vasconcellos"
git config user.email "will.justen@zapt.com.br"

E aí talvez você pergunte:

Mas e se tiverem vários projetos da empresa, preciso fazer isso em cada projeto?

A resposta antes desse post seria que sim, você precisa definir manualmente. Mas como vocês sabem, programador é bicho preguiçoso e sempre vai querer automatizar as coisas e bom, é o que faremos xD

Configurando diferentes emails

Quando o Git vai assinar um commit ele primeiro procura as informações dentro da pasta .git dentro do projeto e caso não tenha nada definido localmente, ele procura pela configuração global que fica num arquivo chamado .gitconfig na pasta raiz do usuário.

E é aqui que iremos fazer uma jogada para o Git ler o que nós queremos que ele leia. Eu costumo ter uma estrutura de pastas da seguinte forma:

~/Development
   /github # meus projetos pessoais
   /zapt # projetos da zapt

Como é um padrão bem simples, fica fácil de falar para o Git o seguinte:

Se estiver na pasta github use meu email pessoal
Se estiver na pasta zapt use o email da empresa

E aí para definir isso, eu crio 2 arquivos:

.gitconfig-github
.gitconfig-zapt

E os conteúdos ficam:

# .gitconfig-github

[user]
  email = willianjustenqui@gmail.com

E no outro:

# .gitconfig-zapt

[user]
  email = will.justen@zapt.com.br

Lembrando que aqui estou mostrando só o email, mas outras configurações como aliases específicos para cada conta e qualquer outra coisa, você consegue separar tranquilamente nesses arquivos.

Mas só fazendo isso, ainda não vai funcionar, nós precisamos informar ao Git quando é parar ler um ou outro, para isso nós editaremos o .gitconfig original para ficar assim:

[user]
  name = Willian Justen de Vasconcellos
[init]
  defaultBranch = main

[includeIf "gitdir:~/Development/github/"]
  path = .gitconfig-github
[includeIf "gitdir:~/Development/zapt/"]
  path = .gitconfig-zapt

Note que eu tenho coisas globais ainda, como meu nome e o branch inicial quando criar. Mas utilizo um includeIf exatamente para quando cair numa opção ou outra, ele adicionar meus dados específicos. Só de fazer isso, se eu criar um commit na Zapt, já ficaria com o commit assim:

commit e07164f972a15bbf7c681970a5cf547db966867d (origin/fix/update-map-use-lat-long, fix/update-map-use-lat-long)
Author: Willian Justen de Vasconcellos <will.justen@zapt.com.br>
Date: Thu Aug 26 12:16:44 2021 -0300

    Fix Map position to use flat lat and long

Como podem ver, o email já fica certinho o da empresa e não o meu pessoal.

Configurando duas chaves SSH

Agora vamos a segunda parte que é ainda mais importante, afinal de contas, se as chaves não estiverem bem configuradas, você não consegue nem fazer push para o repositório.

Primeiro de tudo, você precisa criar chaves SSH separadas, até para facilitar nessa separação, para isso, é só rodar:

ssh-keygen -t rsa -C "email@pessoal.com" -f "id_rsa_pessoal"
ssh-keygen -t rsa -C "email@trabalho.com" -f "id_rsa_trabalho"

Ao fazer isso, ele vai criar duas chaves separadas na pasta ~/.ssh, depois basta adicionar na sua máquina usando:

ssh-add ~/.ssh/id_rsa_pessoal
ssh-add ~/.ssh/id_rsa_trabalho

Depois disso precisamos configurar o ssh para também entender quando usar uma chave ou outra. Para isso vamos criar um arquivo config dentro da pasta .ssh:

cd ~/.ssh
touch config
code config # você pode usar vi, vim, nano, enfim, editor favorito

Lá dentro do arquivo é só editar:

# Conta pessoal como default
Host github.com
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa_pessoal

# Conta do trabalho
Host github.com-trabalho  
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa_trabalho

Ali está como github, mas para o gitlab é só mudar no Host e Hostname, você inclusive pode ter diferentes configs de diferentes repositórios remotos no mesmo arquivo.

E aí, sempre que for clonar um repositório, se ele for de trabalho, basta editar na url para ficar de acordo com a estrutura acima:

git clone git@github.com-trabalho:seu_user/repo_name.git

Prontinho, agora sua máquina está configurada para trabalhar com duas contas do Git e assim você não fica misturando usuários e chaves entre coisas pessoais e empresa!

Conclusão

Espero que este post tenha sido útil e lembrando que qualquer dúvida e/ou sugestão é só me mandar um tweet.

Adicionando ícone de GitHub nos projetos opensource

Willian Justen — Wed, 14 Apr 2021 00:23:59 +0000

Introdução

Fala pessoal, eu recentemente comecei uma série de vídeos com dicas bem rápidas lá no meu canal do YouTube, mas como eu também gosto de texto e também quero facilitar a busca seja pelo Google ou pelo YouTube, vou portar os vídeos para cá também. Espero que dê certo =)

Vídeo

Utilizando com SVG puro ou componentes React/Vue

O projeto oficial é chamado de GitHub Corners e disponibiliza um código em SVG bem simples que você consegue colocar em qualquer site de forma simples.

Mas se você quiser, também pode utilizar este componente em React ou este componente em Vue.

Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no canal do YouTube para essa e mais outras dicas.

Como usar e se comportar melhor em chats

Willian Justen — Tue, 13 Apr 2021 10:50:09 +0000

Introdução

Fala pessoal, ontem eu lancei um vídeo no meu canal do YouTube dando algumas dicas que considero essenciais para que tenhamos um bom convívio em aplicativos de mensagens como o Slack, Discord, etc.

Como é um assunto muito importante, eu resolvi trazer essas dicas aqui para o blog também, para que mais pessoas leiam e passem a seguir essas dicas. Então vamos lá!

Dica 1: Utilize threads

Se o chat disponibilizar threads, utilize a mesma, crie uma mensagem e coloque o resto das mensagens dentro dela para evitar poluir.

Para quem não sabe, thread é uma maneira de criar mensagens dentro de uma mensagem em específico, isso é super útil pois organiza um contexto inteiro num ponto só.

Dica 2: Use a busca

Antes de mandar qualquer mensagem, use a busca, possivelmente alguém já teve a mesma dúvida e você pode conseguir sua solução mais rápido ainda.

Dica 3: Evite postar blocos grandes de código

Evite postar blocos grandes de código diretamente no chat, avise do erro/problema e então dentro da thread você coloca o código ou disponibiliza um link para um gist ou algo parecido, assim vai evitar a poluição do chat e mais possivelmente irá conseguir ajuda.

Dica 4: Evite mandar mensagens separadas

Evite mandar um "olá boa tarde" no chat separado e depois em outra mensagem escrever, se quiser ser cordial, bote na mesma msg, lembre-se da regra 1 de não poluir.

Uma coisa muito chata em chats é quando você recebe 99 notificações que na realidade poderia ser 1 mensagem só.

Dica 5: Ao enviar DM, seja educado mas seja direto

Ao mandar DM, mande diretamente qual seu problema, evite mandar um "Oi, tá por aí?", a graça dos chats é ser assíncrono, pode ser que a pessoa esteja ou não, mas quando ela puder, ela responde.

Dica 6: Dê o máximo de contexto

Sempre que tiver um problema, dê o máximo de contexto possível. Diga quais os passos para quebrar, que sistema está usando, browser, se possível, deixe um repositório para que possamos testar localmente.

Dica 7: Não só diga resolvido, mas diga como

Se alguém resolveu seu problema, agradeça e avise, é importante saber que foi resolvido e ainda mais importante, como foi resolvido.

Dica 8: Evite repetir a mesma mensagem

A sua mensagem está salva no chat, assim que alguém ver, pode tentar te ajudar e responder. Evite ficar colocando a mesma mensagem em diferentes canais e também ficar repetindo a mesma pergunta em intervalos muito curtos, isso além de poluir o chat, pode te dar uma imagem de "pessoa incômoda" e que não espera.

Dica 9: São pessoas do outro lado

Essa é a dica mais importante de todas. Lembre-se que existem pessoas reais do outro lado, seja educado e respeite as regras de conduta do chat. Uma comunidade saudável é uma comunidade que se ajuda mais.

Conclusão

Espero que tenham gostado das dicas e passem a fazer o mesmo nos ambientes de vocês, certeza que vai ser bem efetivo e terão resultados melhores.

E se você quiser participar de uma comunidade super legal, saudável e que se ajuda bastante, entra no Slack dos meus alunos, eu estou sempre por lá também e é bem legal.

Como configuro meu editor e desktop para gravar código

Willian Justen — Sat, 06 Mar 2021 11:30:49 +0000

Introdução

Vídeo

Nem todo mundo tem tela 4k gigante

Quando for gravar seus vídeos com código, lembre-se que você pode estar enxergando lindo na sua tela, mas tem muita gente que acessa por celular e as vezes um celular bem fraquinho, com uma tela pequena.

Pensando nisso, quando for gravar, tente seguir alguns desses passos:

Utilize fontes bem grandes
Se preocupe com um bom contraste para que dê para ler sem forçar
Remova qualquer coisa que ocupe espaço em tela e não seja útil

Evite distrações!

Quando você está ensinando algo, o que você menos quer é que o aluno perca a atenção e fique olhando outras coisas, ao invés do principal, que é sua aula.

Existem alunos com TDAH, outros que são simplesmente curiosos, então faça o seguinte:

Esconda sua barra de tarefas (dock)
Esconda qualquer notificação
Feche janelas desnecessárias
Evite ficar trocando muito rápido entre janelas/abas

Conclusão

Pode ter certeza que só de fazer esses pequenos ajustes, os alunos irão conseguir prestar muito mais atenção, além de aprender muito mais com isso.

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no canal do YouTube para essa e mais outras dicas.

Como deixar a imagem da webcam redonda no OBS

Willian Justen — Sat, 06 Mar 2021 11:15:30 +0000

Introdução

Vídeo

Máscara!

Bom, a ideia dessas dicas rápidas vai do código a qualquer outra coisa. Um aluno me perguntou como eu fazia para ter minha imagem redonda nos meus vídeos, então porque não ensinar isso?

Bom, eu utilizo o OBS Studio, que além de ser um projeto opensource, ele funciona em qualquer Sistema Operacional, o que facilitou minha vida, já que eu uso muito Mac OS e Windows.

Para fazer esse círculo, a única coisa que você precisa fazer é adicionar um filtro de máscara e utilizar uma máscara como essa aqui, onde ela basicamente remove tudo que é preto, deixa só a bolinha redonda.

Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no canal do YouTube para essa e mais outras dicas.

Criando componente de Tipografia com styled-components

Willian Justen — Sat, 06 Mar 2021 10:50:06 +0000

Introdução

Vídeo

Utilizando o poder do `as` polymorphic

Dentro do Styled Components existe um método muito bacana, que é a polymorphic prop, que serve para criar um componente e determinar que ele se comporte como (as) a tag que você desejar.

Isso é muito legal, pois permite que criemos diferentes estilos, mas sem perder a semântica das tags e não fiquemos reféns a usar div em tudo.

No vídeo acima eu mostro como utilizar o attr junto ao as exatamente para determinar estilos visuais e também que tipo de tag deve ser.

Exemplo de código

Ao trabalhar com styled components, normalmente nós temos um tema que tem as cores e tamanhos, um exemplo seria:

const theme = {
  colors: {
    white: '#eee',
    black: '#111',
    gray: '#333',
    lightGray: 'CCC'
  },
  sizes: {
    xsmall: '1rem',
    small: '1.2rem',
    medium: '1.6rem',
    large: '2.4rem',
    xlarge: '3.2rem',
    xxlarge: '4.0rem'
  }
}

Se você estiver utilizando TypeScript, nós também devemos determinar os types disponíveis para o componente, por exemplo:

export type HeadingProps = {
  color?: keyof typeof theme.colors
  size?: keyof typeof theme.sizes
  fontWeight?: 100 | 400 | 700
  level?: 1 | 2 | 3 | 4 | 5 | 6
}

E aí baseado nisso, podemos criar nosso componente, tendo valores default e também podendo receber esses valores passados:

export const Heading = styled('h1').attrs<HeadingProps>(({ level }) => ({
  as: `h${level}`
}))<HeadingProps>`
  ${({
    color = 'white',
    size: 'medium',
    fontWeight: 700
  }) => css`
    font-size: ${theme.sizes[size]};
    color: ${theme.colors[color]};
    font-weight: ${fontWeight};
  `}
`

Note que nós utilizamos um level exatamente para poder determinar qual vai ser a tag semântica e aí fazemos um concatenação da string no as para ter nosso h${level} que pode ir de 1 a 6.

Com o componente pronto, você pode usar da seguinte maneira:

<Heading>Esse é o h1 padrão branco, size medium e negrito</Heading>
<Heading level={2} size="xxlarge" color="gray">Esse é um h2 bem grande e cinza</Heading>

Como você pode ver, esse foi um exemplo bem rápido e simples, mas você pode criar toda uma estrutura para seus Headings, textos e etc. É essa maneira que bibliotecas maiores como o Material Design utilizam.

Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no canal do YouTube para essa e mais outras dicas.

Fazendo o browser falar por você - Web Speech API

Willian Justen — Sun, 21 Feb 2021 05:18:25 +0000

Introdução

Vídeo

Apresentando o Japanese Words

Você pode ver meu projeto no ar, através desse link.

Atualmente eu estou estudando japonês e pensando nisso, eu resolvi fazer um projetinho para me ajudar no vocabulário e pronúncia. Tem um site chamado mainichi que tem uma extensão com várias palavras, então parti dali. Como pode notar, meu card é uma cópia descarada deles xD

Mas para o projeto ficar mais interessante e diferente, resolvi aplicar a Web Speech API para fazer o browser falar as palavras.

Web Speech API

Você pode ver o projeto inteiro no repositório oficial, mas vou me ater somente as partes que utilizei da Web Speech, que é bastante simples.

Os passos são:

Primeiro pegamos as vozes disponíveis no device/browser usando o método SpeechSynthesis.getVoices()

const voices = window.speechSynthesis?.getVoices()

Depois nós filtramos essa lista para encontrar a voz que tenha a pronúncia da língua desejada, no nosso caso, o japonês.

const jpVoice = voices?.find((voice) => /ja-JP/.test(voice.lang))

Com as vozes, nós definimos o Utterance, que seriam as configurações da leitura.

const utterance = new SpeechSynthesisUtterance()

utterance.text = word // word é a palavra que desejamos pronunciar
utterance.lang = 'ja-JP' // língua a pronunciar
utterance.voice = voice // voz defina acima
utterance.rate = 0.8 // velocidade de fala

Já com a voz determinada e as configurações de voz, agora é só usar o método para falar, que é o speechSynthesis.speak

window.speechSynthesis.speak(utterance)

Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no canal do YouTube para essa e mais outras dicas.

Juntando arrays e objetos com Spread syntax no JavaScript

Willian Justen — Sun, 21 Feb 2021 04:12:03 +0000

Introdução

Vídeo

Utilizando o poder do ...Spread

Antigamente para fazer esse tipo de formatação nós precisávamos fazer algum método próprio ou cair em soluções como o Lodash. Mas agora graças ao Spread Operator nós conseguimos fazer isso de forma simples, somente utilizando o JS puro.

Vamos ver abaixo alguns exemplos na prática:

const arrayOne = [1, 2, 3, 4]
const arrayTwo = [5, 6, 7, 8]

// juntando os arrays
const newArray = [...arrayOne, ...arrayTwo] // [1, 2, 3, 4, 5, 6, 7, 8]

// funciona com objetos também!
const props = { id: '1', name: 'Willian' }
const moreProps = { age: 30, height: 178 }

const newObj = { ...props, ...moreProps } // { id: '1', name: 'Willian', age: 30, height: 178 }

// E você também consegue sobrepôr valores
const defaultProps = { id: '1', name: 'Willian' }
const newProps = { id: '3', age: 30 }

// Chaves iguais são sobreescritas pelo último objeto passado
const propsObj = { ...defaultProps, ...newProps } // { id: '3', name: 'Willian', age: 30 }

Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no canal do YouTube para essa e mais outras dicas.

Formatando datas com JS puro

Willian Justen — Thu, 18 Feb 2021 12:49:00 +0000

Introdução

Vídeo

Utilizando o poder do Intl.DateTimeFormat()

Antigamente para fazer esse tipo de formatação nós precisávamos fazer algum método próprio ou cair em soluções como o moment.js. Mas agora graças ao Intl.DateTimeFormat nós conseguimos fazer isso de forma simples, somente utilizando o JS puro.

Vamos ver abaixo alguns exemplos na prática:

// Digamos que a gente tenha a seguinte data
const today = new Date(); // Thu Feb 18 2021 12:55:04 GMT-0300 (Brasilia Standard Time)

// Para converter no formato mais simples do Brasil => 18/02/2021
console.log(new Intl.DateTimeFormat('pt-BR').format(date));

// Para converter em => 18 de fev. de 2021
console.log(new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'short', year: 'numeric'} ).format(today));

// Para converter com mês completo => 18 de fevereiro de 2021
console.log(new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'long', year: 'numeric'} ).format(today));

// Para converter em inglês => February 18, 2021
console.log(new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'long', year: 'numeric'} ).format(today));

// Convertendo horas com timeZone => 12:55 AM GMT+9
console.log(new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: 'numeric', timeZone: 'Asia/Tokyo', timeZoneName: 'short'} ).format(today));

Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no canal do YouTube para essa e mais outras dicas.

Formatando número em dinheiro com JS puro

Willian Justen — Thu, 18 Feb 2021 12:35:11 +0000

Introdução

Vídeo

Utilizando o poder do Intl.NumberFormat()

Antigamente para fazer esse tipo de formatação nós precisávamos fazer algum método próprio ou cair em soluções como o currency.js. Mas agora graças ao Intl.NumberFormat nós conseguimos fazer isso de forma simples, somente utilizando o JS puro.

Vamos ver abaixo alguns exemplos na prática:

// Digamos que a gente tenha o seguinte número
const money = 1234567.89;

// Para converter em Real ( retorna => R$ 1.234.567,89 )
console.log(new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(money));

// Para converter em Euros ( retorna => 1.234.567,89 € )
console.log(new Intl.NumberFormat('de-De', { style: 'currency', currency: 'EUR' }).format(money));

// Para converter em Yenes ( retorna => ￥1,234,567 )
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(money));

Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no canal do YouTube para essa e mais outras dicas.

Debugando e agilizando testes na React Testing Library

Willian Justen — Thu, 18 Feb 2021 12:09:30 +0000

Introdução

Vídeo

Método mágico

Dentro da React Testing Library existe um método chamado screen.logTestingPlaygroundURL() que ao rodar seu teste, ele gera uma url, onde você pode inspecionar o seu código e descobrir as melhores queries, além de ver tudo que está renderizado, podendo inclusive descobrir se existe algum bug ou algo inesperado. Super útil né?

Conclusão

E aí, gostou da dica? Se curtiu, não deixa de se inscrever lá no canal do YouTube para essa e mais outras dicas.

Forem: Willian Justen

Como configurar o Google Analytics no NextJS em 2021

Introdução

Novo componente de Script

Configurando o Analytics e usando o Script

Colocando para funcionar e enviando pageview

Conclusão

Configurando 2 contas de Git no mesmo computador

Introdução

Por que configurar o Git e como fazer?

Configurando diferentes emails

Configurando duas chaves SSH

Conclusão

Adicionando ícone de GitHub nos projetos opensource

Introdução

Vídeo

Utilizando com SVG puro ou componentes React/Vue

Conclusão

Como usar e se comportar melhor em chats

Introdução

Dica 1: Utilize threads

Dica 2: Use a busca

Dica 3: Evite postar blocos grandes de código

Dica 4: Evite mandar mensagens separadas

Dica 5: Ao enviar DM, seja educado mas seja direto

Dica 6: Dê o máximo de contexto

Dica 7: Não só diga resolvido, mas diga como

Dica 8: Evite repetir a mesma mensagem

Dica 9: São pessoas do outro lado

Conclusão

Como configuro meu editor e desktop para gravar código

Introdução

Vídeo

Nem todo mundo tem tela 4k gigante

Evite distrações!

Conclusão

Como deixar a imagem da webcam redonda no OBS

Introdução

Vídeo

Máscara!

Conclusão

Criando componente de Tipografia com styled-components

Introdução

Vídeo

Utilizando o poder do as polymorphic

Exemplo de código

Conclusão

Fazendo o browser falar por você - Web Speech API

Introdução

Vídeo

Apresentando o Japanese Words

Web Speech API

Conclusão

Juntando arrays e objetos com Spread syntax no JavaScript

Introdução

Vídeo

Utilizando o poder do ...Spread

Conclusão

Formatando datas com JS puro

Introdução

Vídeo

Utilizando o poder do Intl.DateTimeFormat()

Conclusão

Formatando número em dinheiro com JS puro

Introdução

Vídeo

Utilizando o poder do Intl.NumberFormat()

Conclusão

Debugando e agilizando testes na React Testing Library

Introdução

Vídeo

Método mágico

Conclusão

Utilizando o poder do `as` polymorphic