Traduzindo as docs do Gatsby em 4 passos

Luís Lança — Fri, 01 May 2020 04:00:29 +0000

Muitos de nós brasileiros temos dificuldade em aprender outro idioma, seja por falta de recursos, oportunidades, interesse pessoal e por aí vai. Mas o assunto não é esse...

Pensando nisso, uma galerinha resolveu contribuir com a comunidade Gatsby brasileira ajudando na tradução das documentações para pt-BR e sabe o melhor disso tudo? Você também pode ajudar =)

É bem simples, vamos aprender:

Vá até o repositório oficial de tradução do Gatsby para pt-BR
Clique em issues, escolha qual você deseja contribuir e coloque nos comentários para que os moderadores possam ver no que você irá contribuir
De o Fork no repositório e comece a contribuição
Após ter realizado todas as alterações, abra um pull request para que os moderadores possam aceitar ou abrir correções daquilo que você traduziu

Caso você ainda tenha dúvidas em como contribuir, neste link tem todas as informações que você precisa saber

Você também pode aprender com este video aqui: Tutorial - Traduzindo as docs do Gatsby

Viu como é fácil? Tá aí uma boa maneira de você contribuir com a comunidade brasileira do Gatsby e ainda aprender um novo idioma, conhecer novos desenvolvedores e o mais legal de tudo: ter seu nome no repositório oficial do Gatsby !

Nenhuma DIV escapa dessa!

Luís Lança — Sat, 11 Apr 2020 05:01:25 +0000

Opa! Me chamo Luís, sou Desenvolvedor Frontend e este é meu primeiro post!

Segunda-feira 8h da manhã, você acabou de pegar 3 metrôs pra chegar no trampo. Tu faz um cafézinho, liga o pc e abre o e-mail, adivinha o que tinha na caixa de entrada? Isso aí, bug pra corrigir, mas não é qualquer bug é CSS!

Aí você pensa "Pô, é só um margin-top errado que colocaram ali, nada demais". 3h depois:

É eu sei... Nessas horas a gente pensa em mudar de profissão, virar desenvolvedor backend, ver se somos herdeiros de algo e por aí vai. Mas nem tudo está perdido, existem maneiras rápidas e fáceis (além do DevTools do navegador) de inspecionar esses elementos "fantasmas" que a gente acaba apanhando no dia a dia. Se liga:

**Utilizando o seletor universal (*)**

Há diversas maneiras de utilizar o seletor universal dentro do CSS, uma delas é desenvolver formas de pegar esses elementos "fantasmas" dentro do nosso código. Vamos ver alguns exemplos:

html * {
    background: rgba(255, 0, 0, .1);
    box-shadow: 0 0 0 1px red;
}

*{
   outline: 1px solid #fff !important;
   background-color: rgba(0,2,54,.1) !important;
}

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

Repare que os exemplos têm praticamente o mesmo resultado, contornar todo e qualquer elemento criado dentro da página web. Lembrando que esse hack será utilizado apenas para debug, não vai deixar dentro do seletor universal durante o desenvolvimento hein...

Tá, mas pra que eu iria contornar todos os elementos? É simples, quando você precisar arrumar algo que não vê, tu vai entender rsrs.

Pesticide Extension

Extensão do Chrome que injeta um "CSS pesticida" para visualizar todo e qualquer elemento, garantindo que possamos enxergar algo que deixamos passar e que está causando erro. Exemplo:

Screenshot do site oficial do GatsbyJs, antes de acionar a extensão

Screenshot do site oficial do GatsbyJs, depois de acionar a extensão

Link para baixar a extensão: Pesticide Extension

Links complementares: My favorite CSS hack, How to Find Ghost CSS Elements

Por hoje é só, jovens. Qualquer dúvida, sugestão ou chamar pro churras é só comentar aí. Arrivederci :D

DEV Community: Luís Lança

Traduzindo as docs do Gatsby em 4 passos

Nenhuma DIV escapa dessa!

Utilizando o seletor universal (*)

Pesticide Extension

**Utilizando o seletor universal (*)**