Como eu disse no meu último artigo, além de compartilhar com vocês os aplicativos que uso diariamente, também vou compartilhar como está meu setup físico atual. Eu preciso admitir que tenho muito orgulho - e sou muito feliz - com o que Deus me permitiu conquistar, e no final desse artigo você vai ver como era meu setup poucos anos atrás. Sem mais enrolação, vamos à lista atual!

• [Cadeira] DxRacer Air Pro: é o xodó do meu setup, pois foi a última aquisição. Recomendo muito.

  • Obs.: eu vi que no site da DxRacer está um pouco mais barato, mas estava indisponível (aqui está o link, caso queira dar uma olhada)

• [Computador] MacBook Pro, Apple M3 Pro 18GB 14”: em termos de configuração é, sem dúvidas, a melhor máquina que já tive. Engraçado que, recentemente, tenho enfrentado alguns problemas de gerenciamento de memória - mas com as atualizações, parece ter ajustado. De qualquer forma é MacBook, então desempenho, beleza e elegância são - praticamente - incomparáveis. É, de longe, o item mais caro do setup!

  • Obs.: eu deixei o link para que você veja mais especificações, detalhes e comentários; mas não vale à pena comprá-lo no Brasil - eu ganhei o meu da empresa para a qual trabalho (caso deseje comprar indo para os EUA ou importando e tiver alguma dúvida, fique à vontade para me chamar que eu posso tentar ajudar).

• [Monitor 1] Samsung LF22T35: comprei na Black Friday 2024 e não tenho do que reclamar. Por ser 27”, eu confesso que achava que ele seria mais “largo” - mas entendi que, se fosse, eu poderia chamá-lo de ultrawide. 😂

• [Monitor 2] DELL P2219H: meu primeiro monitor “melhorzinho”, e me acompanha desde 2021. Se você está pensando em comprar o seu primeiro - ou tem um “ruim” e quer dar um upgrade - sem gastar muito, recomendo de olhos fechados.

  • Obs.: esse é um monitor mais antigo e, se eu entendi direito, a Dell não está mais fabricando. Porém, ela criou um sucessor e eu deixei o link porque recomendo o anterior, então imagino que seja tão bom quanto.

• [Mouse] Logitech M170: talvez seja o item mais velho do meu setup (competindo com a mesa), e também já apanhou bastante (sabe aquele momento que você não consegue resolver o bug de jeito nenhum, depois de horas tentando? 🙈). Ele funciona com uma pilha AA, e dura muito! Eu penso em trocá-lo - esse ano ou ano que vem -, e pegar um mais ergonômico/maior mas, por enquanto, ele supre mais do que bem o uso no dia a dia.

• [Teclado] Logitech K380: ganhei como presente de aniversário e gosto demais. Você pode conectá-lo com 3 dispositivos e, com um click (teclas amarelas de bluetooth), alternar entre eles. Muito, muito útil para quem possui mais de um computador (ex: suporte técnico, ou dev com computador da empresa e pessoal).

• [Fone de Ouvido 1] AirPods Pro 2: foi o primeiro investimento mais caro que fiz em um periférico de tech (na época, paguei uns ~23% do meu salário nele) e quer saber? Foi a melhor coisa que fiz! Depois de ter iPhone, a integração dele com o celular (além da integração com o computador) é impecável. E eu não vou entrar no mérito do cancelamento de ruído, porque me faltariam elogios para explicar como isso mudou meu foco durante o trabalho (especialmente para quem trabalha em escritório, eu diria que é imprescindível).

• [Fone de Ouvido 2] HyperX Cloud Flight: é sensacional. Hoje não uso muito porque estraga o penteado (🤣), mas por ser sem fio, ele é incrível para uso no dia a dia. O microfone (removível) é muito bom - especialmente se você ainda usa o microfone do computador. E, por fim, a bateria dele é incrível e dura muito (com uso moderado de ~3h/dia, dura uns ~5 dias fácil).

  • Obs.: o detalhe mais engraçado (e aleatório) dele é ser o fone que o Cazé usava.

• [Webcam] Logitech C920s: eu sempre usei a webcam do computador, mas com o meu setup atual, eu acabava ficando “de lado” durante as reuniões. Isso impede que gere conexão com a pessoa que está do outro lado e, principalmente depois que comecei a dar consultoria, esse contato com o cliente é muito importante. Então eu comprei visando melhorar minha postura e posicionamento durante reuniões on-line (e funcionou!).

• [Mousepad] Desk Pad Max em Couro (Caramelo): esse é o tipo de coisa que acontece quando você começa a namorar (😅). Mesmo reconhecendo a importância do Naruto para a sociedade, digamos que minha namorada não achava meu desk pad da Kyuubi muito “profissional” e “sugeriu” que eu trocasse para algo mais, digamos assim, adulto. ☹️

• [Dock Station] Dell USB-C DA310: um dos únicos defeitos do MacBook é que ele não é tão compatível com equipamentos “mortais” (leia-se: que não sejam Apple). Então você vai precisar de uma Dock Station para conectar monitores, USB ou cabos de rede. O bom desse modelo é que ele é bem prático e eu consigo levá-lo para qualquer lugar; no entanto, ele já está ficando “pequeno” para mim (ex: eu tenho a webcam, meu fone da HyperX e meu mouse que usam USB; porém, ele só possui 2 entradas).

  • Obs.: é por isso que eu estou querendo trocar e, para minha sorte, meu cunhado possui uma Dell UD22 que ele não está usando.

  • Encontre aqui os links oficiais da Dell de ambos os produtos (DA310 e UD22). Sempre compare antes de comprar!

• [Mesa]: como eu disse na explicação do mouse, essa está na briga para o ser o item mais velho do setup. Infelizmente, por tê-la comprada em ~2021, eu não encontrei o link. Contudo, vou deixar aqui as medidas dela e afirmar que sou muito feliz com tanto espaço para trabalhar!

  • 150cm (largura) x 60cm (comprimento). Detalhe extra: 75cm (altura).

Um pouco de história

Essa seção, de maneira alguma, possui a intenção de “exibir” meu progresso - muito pelo contrário! Eu quero te mostrar que você não precisa ter o setup que eu mostrei aqui (e nem daquele influencer que você segue) para começar! O começo é assim mesmo: difícil, evoluindo aos poucos, com muita superação e disciplina. Contudo, o lembrete mais importante é: DÁ! Você só precisa fazer por merecer e deixar o resto com Ele! 🙏🏼

08 de Junho de 2015

Eu sei que a foto não está nem um pouco nítida (me perdoe por ter tirado-a em 2015! haha), mas note a mesinha simples, com um mouse de fio, e um suporte para o meu velho HP. Repare na cadeira! E quer saber? Eu passava umas 4h/dia fácil nesse lugar (porque estudava de manhã e de noite).

03 de Agosto de 2020

Aqui já estávamos melhor! Eu tinha comprado meu novo computador da Dell fazia ~6 meses (além do orgulho na época por ter pagado ele sozinho, ele está funcionando muito bem até hoje!), e o monitor já era melhor, porque tinha ganhado da empresa (note que as lentes de contato já eram necessárias 😂). O suporte era mais rústico (ganhei do meu Pai 💙) e o Tricolor sempre acompanhando (🇪🇪).

02 de Fevereiro de 2021

Aqui as coisas já estavam bem melhores (pós-auge da pandemia, tinha voltado para meu apartamento e, por isso, tinha mais espaço para uma mesa maior e a cadeira melhor). Na época, tentei usar a TV como um terceiro monitor, mas não funcionou tão bem. Mesmo assim, dava pra ver que as coisas estavam melhorando bastante! 🙏🏼

21 de Janeiro de 2023

Monitor bastante semelhante, mas aqui já surge uma nova - e cara - possibilidade: o MacBook! A adaptação foi bem rápida (“tudo que é bom, a gente acostuma fácil”) e sem demora eu já estava dominando os atalhos do macOS também. Note que uso o mesmo mouse desde àquela época (o que prova que tudo que escrevi aqui é verdade!). O abajur passava um ar mais elegante para o setup!

Conclusão

Foi incrível poder compartilhar com você um pouco da minha história. Eu espero, de coração, que isso te sirva (e inspire, talvez?) de alguma forma. Se tiver qualquer dúvida sobre os equipamentos, é só me perguntar nos comentários! 👇🏼

E você, como está seu setup atualmente? Coloca uma foto nos comentários aqui para gente ver e opinar! 🤪

Lembrete: inscreva-se na Newsletter para receber todos os conteúdos assim que forem publicados! E, melhor que isso, ter acesso a descontos exclusivos nas minhas mentorias!

Eu sempre gostei muito de ver artigos como esse do Elton Minetto, no qual o autor compartilha, sem esconder nada e objetivamente, ferramentas que ele está usando e aplicativos que tornam seu dia a dia mais produtivo. Além de ser uma oportunidade de conhecer ferramentas novas - validadas por alguém que você acompanha e confia -, essa é uma ótima fonte para aprender um pouco mais sobre algo que já faz parte do seu setup ou encontrar alguns cupons de desconto para testar planos premium!

Dessa forma, resolvi construir minha lista também e compartilhar com vocês todos aqueles serviços que são essenciais em meu dia a dia como Senior Software Engineer (Frontend) - mas não apenas isso! Também vou listar aqui aplicativos que me ajudam na vida pessoal e nos meus projetos paralelos (como esse blog). E para fazer isso de uma maneira mais organizada, eu dividi tudo em seções (assim como o artigo que me inspirou) - espero que você goste! 🚀

Programação

Esses são os aplicativos e ferramentas que, independente de qual aplicação eu estiver desenvolvendo - desde que seja Frontend -, eu irei usar.

• IDEs/Editores: esse é um assunto complicado porque eu tenho testado vários ultimamente, mas explico mais detalhes em cada item.

  • Visual Studio Code: ainda é - e acredito que será por muito tempo - meu editor favorito. Mas em virtude dos vários plugins que uso, tenho notado que a performance dele está diminuindo (consumindo muita memória RAM, por exemplo). Por isso, deixo ele como meu editor “oficial” e sempre deixo meu workspace configurado para tarefas sérias. Contudo, para projetos de aprendizado, estou experimentando novas possibilidades.

    • Cursor: tem sido a mais frequente das opções testadas. Ainda não me convenceu, mas a IA embutida nele é muito boa (estou usando o plano Enterprise - a razão mais forte para eu tê-lo escolhido).

  • Zed: tenho usado como meu “bloco de notas” - leve, minimalista, e o nome é legal 🤪

• GIT: é o sistema de controle de versão mais famoso do mundo e indispensável para qualquer desenvolvedor.

• iTerm2: gosto muito de rodar comandos (inclusive GIT, mencionado acima) no terminal e o iTerm2 é o terminal que eu tenho usado desde que migrei para o macOS.

  • Oh My ZSH: tudo bem que eu sou fanático por atalhos e customizações, mas eu realmente acho um desperdício se você ainda não usa esse “framework” para gerenciar suas configurações e turbinar seu terminal.

• Browsers: inevitáveis para um desenvolvedor (especialmente Frontend). É por isso que minha Dock está assim:

  

  • Brave: é meu browser principal e eu adoro o fato de ele ter adblock embutido, pois como eu o utilizo para o trabalho, geralmente estou com pressa e pesquisando coisas sérias, então realmente otimiza meu tempo.

  • Chrome: por ora, continua sendo o maior e mais compatível de todos os browsers, então é obrigatório para testes, por exemplo.

  • Safari: eu confesso que nunca consegui me adaptar ao Safari, mas sei que a integração dele entre sistemas iOS é maravilhosa. Talvez eu precise testar mais, mas o fato dele ter atalhos diferentes dos demais e algumas opções (tal como o Developer Tab) customizadas realmente me incomoda.

  • Microsoft Edge: apenas tentando ter mais opções para testar, ou quando quero testar a mesma aplicação com diversos usuários diferentes e gastei todas as abas anônimas possíveis.

Trabalho

Essa seção contém aplicações que são comuns em empresas de tecnologia e que eu já usei/utilizo por muito tempo. Se eu tivesse que escolher algum setup mais “empresarial”, provavelmente seriam minhas opções também.

• DBeaver: ótima ferramenta - gratuita - de conexão com inúmeros tipos de banco de dados. Uso em meus projetos pessoais, quando necessário, também.

• Slack: é a melhor ferramenta de comunicação empresarial que já usei (anos-luz melhor que Microsoft Teams, por exemplo).

• Datadog: excelente ferramenta de monitoramento (e você pode utilizá-la tanto para Backend, quanto Frontend).

• Jira: pior do que ter que organizar sprints ou usar kanban, é não ter organização nenhuma. Se bem utilizado (ex: aproveitando as numerosas integrações disponíveis), é uma boa ferramenta para organizar seu time.

• xCode / Android Studio: toda vez que trabalho com um aplicativo mobile (ou híbrido - ex: Ionic), acabam tornando-se obrigatórios (mesmo que eu não goste) para configurações do projeto e algumas alterações pontuais em arquivos nativos.

Exterior

Essa seção é apenas um “extra” ou bônus para ajudar aqueles que, assim como eu, já trabalham (ou sonham em trabalhar) para uma empresa do exterior.

• Cambly: estudei diariamente (e bastante) Inglês para poder fazer a entrevista, mas o Cambly me ajudou muito na prática da conversação (a perder o medo, tornar conversas mais fluídas e naturais, e melhorar meu listening). Detalhe: eu ainda faço 3 aulas por semana para melhorar minha pronúncia.

• Grammarly: apesar de estudar muito, sempre estaremos propensos a cometer erros. Esse aplicativo (que existe tanto em versão desktop, quanto em extensão do navegador) é incrível para corrigir os nossos erros ortográficos - e até gramaticais (especialmente para conversas através de aplicativos de mensagens ou e-mails empresariais).

• Remessa Online: é a plataforma que tenho utilizado para poder receber meu salário, e então transferir para um banco brasileiro.

Organização pessoal & Produtividade

Para alguém extremamente organizado e sistemático, nada melhor do que delegar um pouco dessas responsabilidades em algumas aplicações diferentes, né? Essas são as que eu uso para não pirar, enquanto acelero em busca dos meus objetivos. 🚀

• Notion: é o meu Segundo Cérebro. Nele eu anoto absolutamente tudo: desde as tarefas do trabalho, resumo de cursos, até meu planejamento financeiro familiar.

• Google Docs: algumas vezes, eu gosto de criar documentos “mais formais” - por exemplo, meus objetivos anuais. Nesse casos, eu deixo ali porque - não sei a razão exata, mas - parece que eu crio um compromisso maior (quase como se fosse um contrato comigo mesmo 😂).

• Enpass: é meu gerenciador de senhas há mais de 6 anos. Gosto muito dele e, principalmente para aqueles que ainda não estão habituados com um cofre de senhas, o plano free dele é completamente suficiente.

• Whimsical: remando contra a maré de devs que prefere Excalidraw, uso essa aplicação há ~4 anos para montar meus diagramas.

• Session: em certas situações, eu gosto muito de usar a Técnica Pomodoro. E para fazer isso, gosto muito dessa aplicação desktop como meu cronômetro.

• Tiles: gerenciador de janelas do macOS que permite mover, reorganizar e ajustar as aplicações facilmente. Foi uma das minhas salvações quando cheguei no macOS e ficava sofrendo com as janelas em diferentes workspaces.

Manual do Front: Blog & YouTube

Essa é a mais nova de todas! Como vocês sabem, o blog é bem recente - e o canal do YouTube está começando essa semana! Então ainda não tenho muita experiência, mas quero compartilhar com vocês com o quê estou começando.

• Namecheap: foi o local mais “barato” que achei para comprar e gerenciar meu domínio (BR e fora do BR). Ainda estou aprendendo como usar, mas por enquanto, está suprindo bem minhas demandas.

• Hostgator: já usei muito - e sei que muita gente ainda usa -, mas não estou utilizando atualmente. Contudo, é uma boa opção no caso de você querer hospedar um site mais complexo e eu também sou afiliado, então se você adquirir um plano deles usando esse link, você estará ajudando o blog.

• Hashnode: é uma plataforma muito boa para iniciar um blog, e é por isso que o Manual do Front foi criado lá. Eu preferi gastar todo esse tempo inicial em aprender a criar conteúdo, do que a desenvolver um blog do zero sozinho. Além disso, o Hashnode possui uma comunidade ativa, um feed que ajuda meus artigos a serem encontrados mais facilmente e várias funcionalidades prontas (ex: newsletter - inclusive, você já se inscreveu para não perder nada que eu posto aqui?).

• OBS Studio: é o app que estou usando para graver meus vídeos. Obs.: para alguém que está gravando seu primeiro vídeo, eu entendo se essa dica não for tão relevante. 😂

Extras

Aqui estão algumas aplicações mais descontraídas, mas que fazem parte dos meus dias há muito tempo. Algumas possuem um viés mais técnico, outras são auxiliares de dia a dia mesmo.

• Música: eu nem lembro quando foi a última vez que escrevi uma linha de código sem música, e para isso uso o Spotify (minhas playlists) e o YouTube Music (algoritmo incrível de recomendação).

• ChatGPT: ainda inserindo ele de forma forçada em minhas pesquisas, mas com o entendimento de que não posso deixar a IA e essa onda de agentes me atropelarem.

• Wappalyzer: recomendo muito se você for daqueles devs curiosos que deseja saber o que outras pessoas/empresas estão usando para construírem o site/aplicação deles e, talvez, usar como exemplo.

• Postman: especialmente para nós, desenvolvedores Frontend, é muito útil para testarmos endpoints rapidamente, simular cenários com diferentes valoresou parâmetros e diminuir o tempo dos testes manuais.

• Lightshot: ótima ferramenta para acelerar o processo de capturar e dar destaque a algum ponto da imagem, ou mesmo escrever uma mensagem simples.

  

Apostas

E, por fim, estes são alguns aplicativos que quero testar ao longo do ano de 2025 para ter uma opinião. Acredito fortemente que eles poderão ser game-changers na minha produtividade.

• Raycast: atalhos, notas, cálculos rápidos - tudo em um único lugar, melhor e mais rápido que o Spotlight do macOS (ao menos, isso foi o que me venderam 🤪).

• Arc: um browser moderno, com features específicas para focar na organização e no foco (teria como chamar mais minha atenção?).

• Windsurf Editor: é a evolução da excelente extensão Codeium. Um editor de código, criado com foco primário em IA, e gratuito. Se performar bem, tem todas as características necessárias para ser um concorrente e tanto ao VS Code e ao Cursor.

Conclusão

Eu preciso confessar que adorei escrever esse artigo! É muito interessante poder compartilhar com vocês tudo que tenho usado, e receber dicas de como posso melhorar meu dia a dia como desenvolvedor. Tem algum app que eu esqueci de mencionar? O que você mudaria? Mal posso esperar para ler seu comentário!

Ps.: em breve, pretendo fazer outro artigo parecido, mas falando sobre meu setup físico (computador, mouse, teclado..). O que vocês acham? Gostam da ideia? Me contem nos comentários! 👇🏼

Lembrete: inscreva-se na Newsletter para receber todos os conteúdos assim que forem publicados! E, melhor que isso, ter acesso a descontos exclusivos nas minhas mentorias!

Após respirar (é necessário!), pegar outro café e tomar coragem para analisar o que aconteceu, você descobre o motivo: alguns dos elementos HTML que você usou já possuem uma estilização por padrão (default) que está misturando-se com a folha de estilos que você criou. Em razão disso, os seus cálculos ficaram errados e você precisará refazer seus componentes, um por um. Caso você nunca tenha passado por isso, acredito que com essa introdução, já seja possível concordar que é uma situação - no mínimo - irritante.

Porém, esse problema é muito comum e, felizmente, existem desenvolvedores há muitos anos que encontraram formas consolidadas para evitar esse tipo de dor de cabeça. A mais famosa dessas práticas popularizou-se muitos anos atrás, e é conhecida como Reset CSS. Tendo em vista que, apesar da larga adoção desse mecanismo por inúmeras aplicações/sistemas web, esse conceito é cheio de fundamentos, esse artigo tem por objetivo explicar o que esse “reset” significa. Além disso, trarei detalhes sobre os benefícios da sua utilização e exemplos práticos para que você possa começar a utilizá-lo hoje mesmo.

O que é CSS

Antes de aprofundarmos nosso conhecimento, é importante fazer um nivelamente para garantir que possamos evoluir juntos (se você já usa - e sabe o que é - CSS, pule para a próxima seção 😉). CSS é o acrônimo para Cascading Style Sheets ou, numa tradução livre, Folhas de Estilos em Cascata. Apesar do nome difícil, entender o seu funcionamento não é tão complicado: arquivos CSS são arquivos que contém uma linguagem de estilização, utilizada para criar customizações em páginas HTML (por isso é muito difícil falar de um, sem falar do outro). Em resumo, CSS é quem nos permite dar vida (cores, formas, espaçamento) às nossas páginas. E para garantir que ficou claro, gostaria de compartilhar com você uma imagem - bem didática - sobre a relação entre HTML (a estrutura) > CSS (o estilo) > JavaScript (a lógica):

O padrão da web

Ao utilizarmos HTML e CSS enquanto criamos nossas páginas web, estamos fadados a herdar os estilos CSS default que os elementos HTML possuem. Para que isso fique mais claro, deixei esse link abaixo em destaque: ao abrí-lo, você encontrará o valor CSS default de todos elementos HTML.

Note que essa tabela contém 120 elementos e demonstra, um por um, quais são seus estilos. No exemplo abaixo, eu decidi pegar o elemento HTML de heading h1 para que possamos ver a diferença. Perceba como o texto não está mais em negrito, como o espaço entre o texto e a borda sumiu (era 0.67em antes) e como - claramente - o segundo é muito menor (antes era 2em). Esse é um exemplo simples para que você entenda que, mesmo sem ver, ao usar certos elementos você já está estilizando sua página.

O que é o Reset CSS e quando utilizá-lo

Atualmente, em virtude dos browsers modernos e completamente repaginados aos quais temos acesso, talvez não seja mais perceptível qual foi a motivação para esse tipo de técnica. Acontece que, no início, não havia nenhum padrão em como os estilos funcionavam e cada navegador (Google Chrome, Mozilla Firefox, Microsoft Edge - antigo Internet Explorer 🤢 -, Safari e outros mais) implementava suas renderizações de acordo com suas preferências e com o que parecia mais bonito.

Como dito anteriormente, os browsers evoluíram muito e, por isso, hoje não temos grandes divergências entre eles. No entanto, ainda existem certas customizações - tais como border, padding, margin, zoom, fonts - que são usadas para transmitir aquela sensação “única" de determinada empresa (uma forma de branding). O Reset, portanto, nada mais é do que a técnica de reiniciar, manualmente e por conta própria, através de um conjunto de estilos customizados, todas essas características “pré-prontas”, não deixando nada “original de fábrica” - dessa forma, você não verá nenhum estilo que você não tenha escrito ativa e intencionalmente.

Note que eu mencionei “manualmente” e “por conta própria”, o que implicitamente indica que cada desenvolvedor pode fazer o seu, de acordo com suas necessidades e preferências. Caso você tenha tempo/interesse, aconselho que você leia a discussão mais famosa sobre Reset CSS, que deu origem ao arquivo de Reset CSS mais famoso que temos atualmente - o Reset CSS do Eric Meyer. Contudo, ao pesquisar na internet, você encontrará vários outros exemplos: como uma opção mais moderna (por Josh Comeau), e outro que promete ser mais moderno (por Piccalilli). E para que você consiga analisá-los e escolher um (ou talvez criar o seu), gostaria de compartilhar aquelas que são, na minha opinião, as maiores vantagens e desvantagens dessa técnica.

Vantagens

• A primeira, e mais fundamental, é ter a habilidade de criar uma estrutura previsível e padronizada para o desenvolvimento web, sem deixar com que as - sutis - variações de estilo entre os navegadores influenciem o layout (ou padrão) da sua página.

• Para aqueles desenvolvedores mais perfeccionistas e que desejam “ter controle sobre tudo”, resetar o CSS fará com que - obrigatoriamente - seja necessário “lembrar-se” de estilizar todos os elementos, individualmente, uma vez que eles não possuirão mais nenhuma aparência e você não poderá mais apoiar-se nessas características.

• Finalmente, ao não ter mais um padrão de estilo, você será obrigado a analisar detalhadamente a semântica do seu arquivo HTML e escolher o elemento apropriado para uso naquele momento. Exemplo: ao invés de escolher um strong porque o design utilizou um texto em negrito, você escolherá o elemento certo (seja ele um p, um h3 ou qualquer outro) e então estilizará o elemente escolhido conforme necessário.

Desvantagens

Apesar dessa seção compartilhar os casos mais comuns - e os benefícios - para resetar seu CSS, todos nós sabemos que toda escolha possui consequências, e nem todas são boas. Como dizia o Tio Ben: “com grandes poderes, vem grandes responsabilidades”, e é por isso que eu gostaria de deixar você ciente sobre alguns “riscos” que a utilização dessa técnica pode trazer:

• Provavelmente, todos (ou quase) estilos padrão que vemos nos browsers são úteis e, mesmo que nem sempre sejam “bonitos”, eles irão garantir que nosso conteúdo seja acessível e legível. Ao removermos esses estilos, corremos o risco de que algum conteúdo que esquecemos de customizar fique “quebrado” ou sem estilo.

• Tecnicamente, aumentamos o consumo e diminuímos a performance de nossa página web, pois ao abrí-la, o browser terá que aplicar esses estilos imediatamente - e, geralmente, por primeiro -, para só então renderizar os demais estilos (tendo que adaptá-los ao nosso Reset). Disclaimer: muito provavelmente esse ofensor de performance seja imperceptível.

• Alguns estilos redefinidos podem ser prejudiciais para usuários que dependem de teclados para navegação.

Leia mais detalhes, opiniões e referências na série incrível que o William Craig escreveu.

Exemplos práticos

Teste rápido

Um dos primeiros estilos que são resetados quando adotamos a técnica de Reset CSS usando alguns dos modelos que eu mencionei previamente é o box-sizing. Para entendermos melhor porquê isso é feito, vamos fazer um pequeno e rápido teste.

Digamos que você não tenha nenhum outro estilo em sua página web além do snippet abaixo. Agora quero que analise esses valores e responda: “qual será a largura final dessa div?“.

div {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

Você ficaria surpreso se eu disesse que a resposta correta é 142px? 🤯

Explicação

Isso soa tão estranho porque, se eu tivesse que palpitar, diria que +90% das páginas web utilizam o atributo border-box; contudo, por padrão, o valor de box-sizing da web é o content-box. Em resumo, essa propriedade prioriza o conteúdo e, portanto, irá garantir que o conteúdo tenha os 100px que definimos. Dessa forma, o padding: 20px (que será aplicado em todos os lados da div) irá ser adicionado como extra ao elemento. O mesmo vale para as bordas, que incrementarão 1px em cada lado da div. Portanto, o valor final de 142px vem desse cálculo:

• 100px (do conteúdo) + 40px (20px de padding de cada lado) + 2px (1px de border de cada lado) = 142px

Já ao usar os Reset's mais comuns, geralmente esse valor será redefinido para border-box. Isso irá alterar a forma como o CSS irá calcular as medidas, uma vez que o conteúdo não é mais “priorizado” e passamos a utilizar uma forma mais natural - e, na minha opinião, muito mais simples - de calcular tamanhos, já que o valor passado é “respeitado” e, dessa vez, quem tem de adaptar-se é o próprio conteúdo. Vamos aplicar os mesmos valores do exemplo anterior, mas com o padrão border-box:

• 100px (do conteúdo) - 40px (20px de padding de cada lado) - 2px (1px de border de cada lado) = 100px

Note que o resultado que estou falando acima (100px) refere-se ao tamanho da div - ou seja, ela “esticou” até preencher exatamente o valor que passamos (width: 100px). Como eu disse anteriormente, nesse caso, quem tem que adaptar-se é o conteúdo e, por isso, no cálculo acima eu usei o sinal de subtração, tendo em vista que o tamanho final do conteúdo precisará acomodar-se no espaço que sobrar depois que o padding e a border forem aplicados.

Como eu sei que esse conteúdo não é simples de ser assimilado, eu deixei o exemplo abaixo para ajudar! 😃 Nele você consegue ver com mais clareza a diferença dos modelos, a largura total da div e a largura do conteúdo destacada com a borda pontilhada em azul. Note, por exemplo, que a borda pontilhada em azul da primeira caixa é exatamente igual ao tamanho total da segunda caixa. Com isso, conseguimos visualizar como o primeiro modelo prioriza o conteúdo (preenchendo o tamanho total com ele, para depois adicionar os cálculos), enquanto o segundo entende que o “total” deve ser o tamanho informado (e diminui os demais valores, encaixando o conteúdo no que sobrar). Convido você a analisar esse exemplo com calma e paciência, pois tenho certeza que isso irá te ajudar!

Caso você deseje aprofundar os conhecimemtno sobre box-sizing, vou deixar aqui o artigo do MDN: lá você encontrará mais exemplos interativos que ajudarão você a entender como essa propriedade altera nossas páginas e pode mudar completamente a forma como escrevemos nossos códigos CSS.

Comparações

Para encerrar esse artigo, ao invés de apenas citar e deixar o link para que você testasse por conta própria, eu decidi dar um empurrãozinho e deixar alguns live-examples de aplicações de diferentes opções de Reset CSS para que você visualize - e surpreenda-se - com as diferenças. Aproveite!

Reset CSS: Eric Meyer

Reset CSS: Josh Comeau

Reset CSS: Piccalilli

Bônus

E antes de encerrar, gostaria de trazer um outro ponto de vista para que você possa analisar: já que essa é uma técnica um pouco antiga e, como tudo na vida, possui suas desvantagens, será que não faria sentido criar algo mais moderno e que, ao mesmo tempo, resolvesse esses pontos negativos?

Pois isso já existe! E o mais famoso deles é o Normalize CSS (site oficial). E aí: você vai continuar “resetando” seu CSS ou prefere “normalizá-lo”? Qual será que é a diferença? Será que vale fazer um artigo sobre isso? 👀 Me dê sua opinião nos comentários! 👇🏼

Conclusão

Depois de entendermos o que é CSS, falarmos sobre o padrão da web e aprendermos o que é o Reset CSS - juntamente com suas vantagens e desvantagens -, eu acredito que foi possível contextualizar o que é essa técnica tão utilizada nas aplicações web. Eu espero que as seções “Exemplos Práticos” e “Comparações” tenham instigado você a brincar mais com as possibilidades, e dominar ainda mais de assunto. Por fim, você acha que faltou falar sobre alguma coisa? Tem alguma sugestão ou discordância?

Muito obrigado por ler. Continue ligado e inscreva-se na newsletter para receber mais conteúdos como esse! 🔥

Escrito com 💙 e 🎯 por Manual do Front .

Referências:

• https://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

  • https://meyerweb.com/eric/tools/css/reset/

• https://www.joshwcomeau.com/css/custom-css-reset/

• https://www.alura.com.br/artigos/o-que-e-reset-css

• https://piccalil.li/blog/a-more-modern-css-reset/

• https://web.dev/learn/css/box-model/

• https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do

Lembrete: inscreva-se na Newsletter para receber todos os conteúdos assim que forem publicados! E, melhor que isso, ter acesso a descontos exclusivos nas minhas mentorias!

Uma das coisas que mais me anima ao olhar para as perspectivas desse ano é que - intencionalmente - eu terei mais tempo para fazer esse projeto crescer e aumentarmos a comunidade do Manual do Front. Por isso eu acredito que este artigo combina totalmente com essa perspectiva, pois nele trarei algumas dicas valiosas, para várias áreas da vida, que eu gostaria de ter recebido anos atrás. Dessa forma, vocês que já acompanham o blog poderão absorver tudo aquilo que fizer sentido e terão mais ferramentas disponíveis para fazer 2025 ser um ano incrível.

Sendo assim, resumidamente, neste artigo você vai encontrar dicas práticas para o crescimento pessoal e profissional, com ênfase em organização, hábitos proativos e autodesenvolvimento. Os pontos principais incluem o uso de ferramentas de IA para aumentar a produtividade, a priorização de tarefas, a manutenção de um estilo de vida saudável, a gestão financeira e a aquisição contínua de novas habilidades. Também destaco a importância da comunicação eficaz, de abraçar novos desafios e de cultivar o desenvolvimento pessoal ou espiritual. O objetivo final é levar uma vida equilibrada e satisfatória, superando expectativas e maximizando o próprio potencial.

1. Seja organizado

Gostaria de convidá-lo a refletir comigo: se você tivesse uma Ferrari e pudesse usar toda a potência daquele motor incrível, você não se importaria com a direção que estaria indo? Isto é, se depois de 500m encontrássemos um muro, valeria à pena ter alcançado 300km/h? O que eu quero que você entenda com esse exemplo é que antes de colocarmos toda nossa energia em um projeto ou tarefa, vale à pena analisar a direção, o nosso objetivo com aquele esforço e onde queremos chegar. Dessa forma, você terá garantido que toda sua dedicação terá valido à pena, pois será canalizada em chegar exatamente onde você almeja. E, na minha opinião, não tem como priorizar tarefas, gerir seu tempo e selecionar os projetos que realmente te levarão onde você deseja sem organização: é através dela que você poderá medir seu progresso e saber quando dizer não às distrações. Aqui, não entrarei em detalhes sobre nenhum método específico de organização (lista de tarefas, objetivos SMART, …), nem sobre ferramentas (Planner, Notion, …), mas ficarei feliz de criar um artigo específico sobre isso se vocês quiserem!

2. Use Inteligência Artificial (I.A.) para otimizar seu dia a dia

Eu entendo se você, assim como eu, tem dificuldade em “desapegar” de uma forma já comprovada de fazer as coisas e “aventurar-se” em uma nova tendência. Contudo, precisamos entender que o mundo está mudando - e mudando rápido. Use minha profissão como exemplo: já existem ferramentas que estão convertendo o design de uma página (feito em uma ferramenta de prototipação como o Figma) em código pronto, com testes unitários e componentizado (se essa frase ficou muito difícil, o que eu quero dizer é que já existem inteligências artificiais fazendo uma parte do trabalho de um desenvolvedor Front-end). Se eu simplesmente ficar parado, olhando, eu vou ser atropelado pela concorrência e pela demandas. Então, eu recomendo que você comece aos poucos, mas comece - pode ser usando o ChatGPT apenas! E, se você também é desenvolvedor, sugiro que vá além e instale o Codeium (gratuito) ou o Github Copilot (pago) no seu editor, e comece a testá-los automatizando algumas tarefas simples. Se precisar de ajuda, deixa aqui nos comentários! 👇🏼

3. Seja pontual

Não há nada pior do que marcar um compromisso com seus amigos, e eles atrasarem - já aconteceu isso na sua festa de aniversário, e você teve que ficar esperando, ansioso, pensando se eles iam aparecer? É horrível, não é? Então, por favor, seja disciplinado com seus horários. Tenha empatia com os outros convidados. E um detalhe importante: isso vale para o ambiente virtual também, tá? Aquela reunião on-line que você atrasa 2 minutos também pode ser lembrada aqui. Chegar atrasado a algum compromisso não apenas afeta sua reputação e destroi a confiança que as pessoas têm em você, como é um sinal claro de desrespeito ao tempo da outra pessoa que chegou no horário.

3.1 Tenha autorresponsabilidade

Esse item aqui será um bônus, pois está totalmente relacionado ao tópico de pontualidade: ao decidir mudar, principalmente no começo, é possível que você ainda chegue atrasado em algum compromisso (especialmente se você estava habituado a fazer isso). Recomendo fortemente que você comprometa-se consigo mesmo a assumir a responsabilidade quando - e se - isso acontecer. Sugiro uma uma mudança simples: ao invés de falar “nossa, desculpem o atraso, o trânsito estava horrível!”, diga “obrigado por terem me aguardado, eu não me planejei corretamente e saí mais tarde do que deveria".

Você pode estar questionando-se agora: “qual a diferença?” - e isso é muito simples! No primeiro cenário, você é uma vítima; o trânsito estava assim e simplesmente não havia nada que você poderia ter feito para resolver isso. Acredito que nós concordamos que esse tipo de atitude não fará nosso 2025 épico, certo? Além disso, o trânsito foi o mesmo para todos que ali estão. Portanto, adotando a segunda alternativa, além de ser algo que está totalmente no seu controle, isso vai "machucar seu ego” (pois você estará se culpando em público). Eu garanto para você que, no máximo, na terceira vez em que tiver que fazer isso, você sairá 15 minutos antes de casa 😉

4. Tenha tempo de qualidade com as pessoas que ama

Em um mundo corrido e uma sociedade apressada como a nossa, é muito fácil nos esquecermos de valorizar as pequenas (e outras nem tão pequenas) coisas. Quando foi a última vez que você parou 10 SEGUNDOS para olhar para o céu, ou para admirar o pôr do sol? Desculpe deixar essa parte do texto um pouco mais pesada, mas você já agradeceu por ter a oportunidade de ESCOLHER não contemplar o pôr do sol? “Nossa, mas por quê eu agradeceria isso?” - simplesmente porque existem pessoas cegas, por exemplo, que não têm essa opção. Por isso, eu gostaria de te convidar a refletir: de que vale todas as conquistas, certificações, títulos e dinheiro se, ao voltarmos para casa, não temos ninguém para comemorar conosco, e para que possamos compartilhar os desafios superados? Nenhum sucesso “lá fora” justifica o fracasso dentro de casa.

E não me entenda mal, eu acho que está tudo bem “dar um gás” (priorizar; dizer não aos outros compromissos para focar totalmente no seu objetivo; abrir mão de fim de semanas; …) em um projeto - mas por um certo tempo. Se você não colocar um prazo para reorganizar sua vida, estará colocando suas relações (família, relacionamento, amigos) em risco, pois ninguém sente-se amado e querido por uma pessoa que está sempre ausente. E aqui vai o conselho de alguém que já errou bastante nisso na vida: um simples alinhamento pode resolver esse problema. Compartilhe com as pessoas que você considera importantes que você precisará de um período de foco, e eu lhe garanto: elas não apenas “não lhe atrapalharão” e respeitarão seu espaço, como se tornarão seus maiores motivadores, torcendo por você e incentivando cada etapa da jornada. Obs.: lembre-se de comemorar a conquista com eles quando chegar lá!

5. Estude & Adquira conhecimento

Eu acredito fielmente que a educação pode melhorar nosso país da forma como muitos de nós sonham, e que uma geração de crianças instruídas, educadas, respeitosas e com princípios transformaria nossa sociedade em um lugar melhor para todos nós. É por isso que eu apoio a ideia de que o conhecimento é uma das pouquíssimas coisas que realmente estão ao nosso (povo) alcance, e que têm poder para mudar nosso futuro. E para que não seja apenas uma opinião sem embasamento, eu gostaria de te convidar a olhar o perfil no Instagram do Eslen Delanogare, doutor em Neurociências e fundador do Reservatório de Dopamina (recomendo!). Ele fala muito sobre o poder de transformação que o conhecimento possui enquanto compartilha seu relato de vida: assim como eu, saiu de uma cidade do interior do Rio Grande do Sul com menos de 5 mil habitantes, e hoje é dono de +3 negócios, possui ~2 milhões de seguidores no Instagram, ~1.3 milhões de inscritos no YouTube e impacta a vida de milhares de pessoas diariamente com seus ensinamentos sobre hábitos, vida saudável e como lidar com nossa mente.

Pode não parecer muito, mas isso é exatamente o que eu estou tentando fazer aqui! 😄 Eu sou muito abençoado mas, mesmo sem mencionar meu viés cristão aqui, eu sei que o conhecimento foi o caminho que me abriu portas. E eu adoraria ajudá-los a abrir essas portas também, e ajudar famílias a mudarem de vida através do conhecimento (nesse caso, mais focado em tecnologia). Então, bora encher nossa cabeça de informações úteis e nos tornarmos pessoas cada vez mais interessantes? Conte comigo para isso!

6. Seja proativo

Eu costumo brincar usando uma frase que aprendi há mais de 5 anos: “toda proatividade será punida!” (inclusive, ainda esse ano farei um post apenas sobre ela). Em suma, o objetivo dessa frase é ironizar as situações - muito comuns em desenvolvimento de software, por exemplos - nas quais você busca tomar alguma atitude, liderar algum projeto, melhorar algum processo e, de repente: boooom! 💥 Você acabou de criar mais um demanda na sua lista de tarefas e, mais do que isso, você será cobrado pelo andamento desse projeto. E me vendo explicar desse jeito, parece algo ruim - quase que indesejável -, não é mesmo?

Mas a grande verdade é que eu sou um proativo nato (por natureza e por influência do meu pai) e não abro mão disso. Já perdi a conta de quantas vezes fui elogiado e “ganhei moral” com líderes e com a equipe por fazer algo por iniciativa própria. É muito simples, reflita comigo: imagine que você é um empresário e quer ver sua empresa prosperar. Você acha que isso será possível se você tiver que micro-gerenciar todos seus colaboradores, e passar em detalhes as tarefas de cada um? É por isso que, quando a minoria deles entende que é responsável pelas suas tarefas e começa a executar coisas que podem trazer bons resultados por conta própria, não há outra reação possível a não ser criar confiança nele e querer ele cada vez mais perto, com mais responsabilidades dentro da empresa. E você, como colaborador que busca promoções, aumentos e visibilidade, lembre-se: existe uma diferença muito grande entre tomar a iniciativa e fazer algo proativamente, ou fazer essa mesma coisa depois que alguém pediu para você fazer.

7. Cuide da saúde: exercícios físicos + alimentação saudável

Você vai notar que neste artigo existem 2 ou 3 conselhos específicos para a saúde e eu sei que isso pode soar estranho para um blog focado em desenvolvimento Front-end e tecnologia. Porém, a menos que você já tenha dominado completamente a arte da Inteligência Artificial (comentei sobre isso no item 2), eu acredito que você seja um ser humano que - veja só! - vai precisar ter saúde e capacidade para trabalhar e conquistar a vida que deseja. Ou seja, gostando ou não, cuidar da saúde é uma necessidade, um fato e não podemos lutar contra. Além disso, eu gostaria que refletíssemos juntos: você permite que seu celular fique sem bateria por muito tempo? Caso tenha um carro, você deixa ele ficar sem gasolina? Se você foi sincero, acredito que as duas respostas foram “não”. Nesse caso, você consegue me explicar por quê fazemos isso com nosso corpo? Porque comer besteira e fast food todo dia é normal? Por que “não dar manutenção” na máquina que move todos os nossos dias é aceitável? Sendo assim - e levando em consideração que não temos escapatória -, a melhor saída é tornar esse processo legal e interessante. Portanto, recomendo fortemente que você encontre alguma modalidade que goste para praticar, e que comece a trocar algumas refeições extremamente calóricas por comida de verdade. Aos poucos, você notará os benefícios por conta própria - eu te garanto!

8. “Sempre deixe o lugar melhor do que encontrou”

Eu não tenho certeza se esse é um lema dos escoteiros, mas sei que uma vez ouvi alguém explicando esse conceito e achei genial: “sempre deixe o lugar melhor do que você encontrou” - isso vale para lugares, para pessoas e para a vida! Por exemplo, onde eu mais tento aplicar isso é no próprio código. Quem é desenvolvedor vai se identificar: quando estamos fazendo uma nova funcionalidade, é muito comum que precisemos mexer em arquivos antigos (talvez até legados ou defasados). Nesses momentos, muito provavelmente iremos encontrar trechos de código que poderiam ser melhorados. É nessa hora que você pode botar em prática essa frase! Seria muito mais fácil “fingir que não viu”, não alterar porque não está no escopo da tarefa ou porque não foi você que escreveu, mas já pensou o resultado que poderíamos ter no longo prazo se todos os devs da equipe levassem isso a sério? Aos pouquinhos, o código tornaria-se melhor e mais atualizado. Por isso, sempre que eu vejo um comentário desnecessário, uma variável que poderia ser constante, um código duplicado que poderia tornar-se uma função, eu melhoro o tanto que for possível (e ainda tento criar testes unitários para isso). Contudo, também recomendo o teste nos ambientes em que você está (recolhendo um lixo que foi jogado no chão, abrindo a porta para alguém que está com as mãos ocupadas, etc…). Tente e veja o resultado!

9. “Se vai demorar menos de 2 minutos, faça imediatamente”

Quando você seguir a recomendação do primeiro item dessa lista e tornar-se organizado, você corre o risco de cair na armadilha de adicionar qualquer pequena tarefa em sua lista. Isso já é melhor do que deixar tudo sobrecarregando a sua cabeça e aumentando sua ansiedade. Porém, melhor do que ficar pensando nisso, ou anotar, é resolver os problemas! E aqui entra esse conselho que ouvi anos atrás e nunca mais me esqueci: “se o que você precisa fazer vai levar menos de 2 minutos, faça imediatamente”! E se, nesse momento, você estiver pensando em qualquer argumentação, pare. Esse tempo de 2 minutos são apenas 120 SEGUNDOS - você gastou quase esse tempo para ler apenas o item 9 👀 - e precisamos concordar que você TEM SIM 2 minutos. Por isso, guardar aquela camiseta jogada, levar o prato na pia, botar seu celular para carregar são tarefas que não podem drenar nossa energia mental, sem levar em consideração que são coisas que você vai ter que fazer em algum momento. Sendo assim, minha sugestão é: não enrole e faça agora! Além de treinar sua mente para ser um solucionador de problemas, sua lista de tarefas será muito menor 😉

10. Regra das “3 prioridades”

Eu acredito muito em conceitos como do Essencialismo, que afirma que quanto menos coisas forem nossas prioridades e, por consequência, quanto mais focados em algo estamos, maiores são os resultados que obtemos. Dessa forma, procuro aplicar no meu dia - e na minha vida - um conceito sobre 3 prioridades: são as 3 tarefas que você fará ao longo do seu dia e que vão te aproximar dos seus objetivos de vida. Inclusive, eu também costumo colocar - no máximo - 3 grandes objetivos para meu ano (e posso afirmar que desde que tenho feito isso, tenho conseguido alcançá-los 🙏🏼). Como um graduado da Mentoria Vida de Titã (na qual eu aprendi esse conceito), eu afirmo que isso ajuda - e muito - na priorização e clareza de nossas atividades. Dessa forma, separe 3 grandes coisas que você irá fazer naquele dia (e faça apenas elas no começo, sem culpa, pois você já está progredindo). E, como eu disse, recomendo que faça a mesma coisa para os seus objetivos do ano, pois te garanto que é melhor atingir 3 grandes objetivos no final do ano, do que marcar 6 itens “normais” daquela lista de 30 coisas que todo mundo costuma fazer no Ano Novo.

11. Organize suas finanças através de um planejamento financeiro

Se você deseja prosperar financeiramente, o dinheiro precisa deixar de ser “senhor” em sua vida, e tornar-se seu “servo”. E não tem como você dominá-lo se você não possuir um planejamento de gastos e souber exatamente quais são suas despesas. E eu digo isso como uma pessoa que organiza, planilha e analisa seu orçamento pessoal desde 2016. Eu comecei a dar atenção a esse assunto acompanhando canais como o Você Mais Rico (Bruno Perini) e lendo livros escritos pelo Gustavo Cerbasi. Então, aprendi que precisava dar atenção ao dinheiro para que eu pudesse, com o tempo, fazê-lo “trabalhar para mim”. Porém, esse artigo já está ficando grande e existem muitos conceitos nos tópicos financeiros que vão aparecer aqui, então permitam-me ser objetivo e, caso queiram saber mais, peçam nos comentários!

Eu não consegui achar o link para colocar a fonte de algumas metodologias sugeridas para orçamento familiar, então vamos dizer que os números aqui são “fictícios” e você pode adaptá-los como bem entender:

• Exemplo 1 (mais rígido): 50% Investimentos | 30% Moradia | 20% Qualidade de vida

• Exemplo 2 (balanceado): 50% Gastos Essenciais (aluguel, luz, alimentação) | 30% Opcionais (hobbies, confraternização, saídas em restaurantes) | 20% Investimentos (estudos, investimentos financeiros, reserva de dinheiro de curto prazo)

• Exemplo 3 (balanceado + doação): 55% Gastos Essenciais | 10% Investimento de liberdade financeira | 10% Investimento a longo prazo | 15% Lazer | 10% Doação

Nos exemplos acima, você encontra algumas sugestões de como organizar seu orçamento (se quiser mais informações, você pode começar por conteúdos como esse, esse ou esse). Porém, é óbvio que você não conseguirá seguir esse planejamento se você nem, ao menos, souber onde está gastando seu dinheiro. Por isso, eu preparei um template do Notion - totalmente gratuito e customizado - para que você comece a registrar suas despesas (lembre-se: o Notion pode ser usado no computador e no celular)! E para que você aprenda como utilizá-lo, assista esse vídeo que eu preparei com carinho para te mostrar o passo a passo do primeiro movimento rumo ao controle da sua vida financeira!

12. Tenha uma reserva de emergência

Como o próprio nome já diz, reserva de emergência é uma quantia de dinheiro que você deve ter guardada para o momento em que algo inesperado acontecer. E aqui já vale um esclarecimento importante: não estamos falando se algo inesperado vai acontecer; a questão aqui é simplesmente quando, e é por isso que você deve estar preparado. Esse é (ou deveria ser) o primeiro passo na vida de quem deseja ter uma vida financeira organizada e saudável, pois a reserva de emergência funciona como um “habilitador” dos próximos passos (ex: investimentos) e também assegura uma segurança mínima para o caso de demissão ou necessidade de mudar de emprego. Não se engane: esse não é um valor que vai render muito, pois é um montante que tem como único objetivo te auxiliar em um momento de emergência e evitar uma perda considerável, que pode arruinar seus planos completamente. Dessa forma, a característica mais importante desse dinheiro é que ele tenha liquidez - isto é, que você possa resgatá-lo imediatamente (de preferência, no mesmo dia). Contudo, é importante que ele seja seguro/estável (você não vai colocar essa quantia em Bitcoin, beleza?!) e que renda o mínimo para não perder para a inflação (ex: Tesouro Selic). Finalmente, falando sobre o valor, recomenda-se que você tenha - ao menos - 6 meses dos seus custos fixos mensais guardados (especialmente se você for um trabalhador CLT; caso seja um empresário, o ideal é que você tenha 12 meses guardados, em virtude da volatilidade da sua renda). Portanto, se você gasta R$ 2.000,00 fixos/mês, sua reserva de emergência precisa conter R$ 12.000,00 (encontre mais informações aqui).

13. Tenha mais de uma fonte de renda

Como diria Flávio Augusto, “a estabilidade não existe”. Pensando nisso, mesmo possuindo um emprego menos volátil (CLT, por exemplo), precisamos buscar outras fontes de renda - o que está totalmente alinhado com o próximo item (14). E, idealmente, essas fontes “extras” não deveriam ser vistas como parte do seu salário, mas sim como um dinheiro novo com o qual você já está acostumado a viver sem. Note que, dessa forma, você tem a liberdade de escolher o que fazer com esse dinheiro, e essa decisão pode ser um caminho inédito (tal como investir ou criar um pequeno negócio - por quê não?). Independente de qual atividade você escolher fazer (aqui você encontrará algumas sugestões: 52 ideias de renda-extra + 10 sugestões para fazer entre R$ 1200 e R$ 2000), o que precisa mudar é nossa mentalidade: substituir aquele pensamento restrito, que foca apenas em um único valor mensal recebido através do emprego, por uma visão empreendedora, esperta e que enxerga oportunidades para fazer dinheiro de outras (várias) formas. Não será fácil, e talvez por um tempo você tenha que ter um trabalho depois do trabalho; talvez vender produtos ou serviços aos finais de semana; talvez usar suas noites, que até então eram livres, para trabalhar por hora em algum restaurante; ou mesmo investir todo seu tempo livre em aprender uma nova habilidade (tecnologia, programação, finanças, marketing, gestão de tráfego, copywriting, …) que te permitirá trabalhar como freelancer. O que buscamos aqui é não depender de uma única fonte de renda e aumentar nossa capacidade de gerar dinheiro que, se corretamente aplicado, poderá encurtar nossa jornada rumo à liberdade financeira.

14. Invista seu dinheiro

Tem uma frase icônica do Warren Buffet que não sai da minha cabeça: “Se você não encontrar um jeito de ganhar dinheiro enquanto dorme, você vai trabalhar até morrer”. Essa frase é muito impactante pra mim porque ela me lembra de que eu preciso encontrar formas de fazer renda passiva (recomendo a leitura do livro Pai Rico, Pai Pobre) se eu não quiser ter de trabalhar até o final da minha vida (e adivinha: eu não quero! Minha meta é trabalhar porquê e com o quê amo, ajudando as pessoas, e não porquê eu preciso). Sendo assim, um dos jeitos mais consolidados é investir seu dinheiro (recomendo essa playlist do canal Primo Pobre). Esse é um tópico que precisaria de 100 posts para que pudéssemos cobrir tudo, então minha dica resume-se a isso: retire seu dinheiro da poupança e invista-o agora mesmo! Se, por acaso, você não sabe por onde começar ou o quê fazer, me envia uma mensagem no LinkedIn ou no Instagram (como alguém que faz isso desde ~2017-2018, eu posso te dar algumas dicas!).

15. Aprenda Inglês

Esse aqui é, por enquanto, o item do qual mais tenho orgulho de falar sobre. Há ~1 ano atrás, eu conseguia ler coisas em Inglês, mas quase não entendia o que ouvia - e nem preciso comentar como era minha fala, né? Extremamente nervoso, tímido, com vergonha do meu sotaque, sem lembrar em que momento deveria usar ”are” ou “is” e nomeando variáveis com a pior concordância possível. Hoje tenho o maior prazer de compartilhar que faz quase 8 meses que trabalho para uma empresa dos Estados Unidos, com colaboradores de ~15 países diferentes, usando Inglês literalmente o tempo todo. Essa história tem tudo a ver com o item 25, mas eu vou adorar trazer mais detalhes desse processo aqui para o blog e no canal do YouTube se vocês quiserem, mas a dica aqui nada mais é do que aprenda Inglês - agora! Sem deixar para o futuro, é esse ano, esse mês, essa semana… hoje!

Aqui estão os meus links de indicação do Cambly e do Preply, que são duas plataformas incríveis que eu usei para exercitar meu Inglês enquanto aprendia. Quer saber o que mais eu fiz para falar de forma confiante? Deixa suas dúvidas nos comentários 👇🏼 ou me chama no LinkedIn!

16. Diminua o tempo de uso das redes sociais

Eu tenho tantos argumentos para explicar o porquê deveríamos usar menos redes sociais, que me faltam palavras para descrever aqui! 😅 Mas um fato interessante é: redes sociais são ótimas! Nunca foi tão fácil estarmos em contato com pessoas que amamos e estão longe fisicamente; nunca tivemos acesso às notícias tão rapidamente como agora; e, também, nunca estivemos tão próximos de pessoas que, até então, eram inacessíveis. Contudo, elas são boas quando sabemos como usá-las. E quando eu digo isso, estou pensando que deveríamos seguir pessoas que gostamos - claro -, mas também pessoas que vão nos ensinar algo, nos ajudar a evoluir alguma área da nossa vida ou que compartilham aprendizados sobre diversos assuntos. Você precisa concordar comigo que acompanhar a notícia mais recente sobre a vida pessoal de um famoso não agrega nada na sua vida. Além disso, somos a sociedade da depressão e da ansiedade (1 bilhão de pessoas possuíam algum transtorno mental em 2019) e, na minha humilde opinião, ficar comparando seus desafios diários, sua luta constante para ter uma vida melhor com o dia a dia de uma pessoa famosa (que também tem suas dificuldades, mas jamais irá mostrar isso no “mundo perfeito do Instagram”) não contribui nem um pouco para esse cenário. Além disso, existem milhares de coisas mais úteis para nossa vida do que ficar scrollando a tela de um celular. Sendo assim, eu recomendo o app Tempo de Tela (que já vem instalado, caso você tenha iPhone) ou o YourHour, caso tenha Android. Esses dois aplicativos são limitadores que permitirão que você defina um tempo máximo de uso de aplicativos como Instagram e TikTok e, quando esse limite for atingido, “bloquearão” o aplicativo. Tente isso por uma semana, e use o tempo que ganhará para ler um livro, meditar, estudar, treinar ou QUALQUER outra coisa. Ao final dessa semana, reflita o que valeu mais à pena.

17. Tenha mentores

Eu demorei muito tempo para “aceitar” isso porque, até ~2020, eu acreditava no poder de aprender tudo sozinho e da forma mais barata possível. E, de fato, isso funciona e me ajudou muito. Contudo, em 2020 foi o ano que comprei minha primeira mentoria (paguei R$ 5.000,00 parcelados, em um período da vida que eu ganhava R$ 4.500,00 por mês) e sim, foi muito difícil para mim. Além de ser muito dinheiro para mim na época, eu tinha dificuldade de acreditar que uma metodologia organizada ou uma pessoa com mais experiência poderia me fazer avançar mais rápido em direção aos meus objetivos. Coincidentemente - contém ironia -, 2020 também foi o ano que mais progredi em minhas metas até então (defini 3 grandes objetivos no ano, e alcancei todos, relacionados a diferentes áreas da minha vida: investimentos, profissional e saúde/corpo). Foi aí que, finalmente, minha ficha caiu e eu entendi que se eu quiser chegar mais rápido em um objetivo, faz todo sentido eu me aproximar de uma pessoa que já chegou onde eu almejo (mesmo que eu tenha que pagar por isso) e que pode me dar conselhos que evitarão que eu “desperdice” tempo cometendo os mesmos erros que essa pessoa já cometeu.

Você consegue entender o poder disso? Vou tentar fazer uma analogia cômica aqui para facilitar: é quase como se a gente aprendesse a pilotar com o Ayrton Senna e, semanalmente, ele nos desse conselhos. Tais conselhos são mais do que dicas que vão evitar que a gente bata nas primeiras curvas - são ensinamentos que deram certo pra ele e que, por estar aprendendo com ele, permitirão que você habitue-se a fazer as coisas dessa mesma forma, e ainda mais cedo na sua carreira! Ou seja, você terá grandes chances de ir ainda mais longe, pois terá mais tempo para aprimorar as técnicas - ótimas - que acabou de aprender. E aqui eu gostaria de quebrar uma objeção: eu não estou sugerindo isso porque tenho a minha própria mentoria para desenvolvedores (especialmente Júnior e Pleno) que desejam acelerar na carreira e aprender sobre hard skills, soft skills, trabalho internacional e muito mais. Eu estou recomendando isso porque eu fiz, funcionou comigo e, portanto, se eu não indicasse, eu estaria sendo injusto com você. Se você está gostando do conteúdo, de uma forma ou de outra, você entrará em contato e eu poderei te ajudar, então não tem porquê eu estar “forçando a barra” aqui e inventando esse tópico só para poder me “promover". Portanto, leia com carinho mais informações sobre essa prática na internet e considere fazer uma mentoria. Eu garanto que seus resultados serão impulsionados.

18. Durma 7 horas por dia

Existem vários estudos que mostram que, se você for adulto (muito provavelmente é seu caso), você precisa ter, ao menos, 7 horas de sono por noite em horários regulares. Isso não só beneficiará sua saúde, como também te dará mais energia e deixará sua mente mais disposta para enfrentar aquelas tarefas mais difíceis que costumamos procrastinar. E sim, eu sei que isso nem sempre é possível, mas aqui estamos falando sobre o que é ideal. Eu mesmo, enquanto morava sozinho, trabalhava e fazia faculdade, dormia ~5 horas/dia nos dias de semana, e tentava usar os finais de semana para descansar. Nessa época, eu me alimentava muito mal e não fazia exercícios físicos (item 7). Mesmo assim, não morri 😅 mas posso te afirmar com experiência de causa que a minha qualidade de vida não era boa - contudo, foi a fase onde eu mais programei (veja aqui uma publição minha de 2019 com uma média diária de 3h 38 minutos de código - sem contar pesquisas e estudos -, totalizando 832 horas programando durante o ano). Para que não fique confuso ou contraditório, o que quero dizer é: se você preocupa-se com sua saúde e sua vida nos anos que virão, você vai ter que dormir 7 horas por dia. Se no momento isso não é possível, tudo bem: faça o possível para plantar com a melhor qualidade que puder agora (para que a colheita seja satisfatória) e certifique-se de que isso não dure tempo suficiente para trazer mais prejuízos do que benefícios.

19. Beba água

Assim como o item anterior, esse conselho tende a ser menosprezado e, talvez, até ironizado. Contudo, a única diferença entre os dois é que para esse você não tem desculpas. Você tem que beber água e ponto final (óbvio, eu entendo que existem pessoas em situações extremas que não têm esse privilégio - mas se você está lendo esse post, tenho 99.99% de certeza de que você não é uma delas). Sendo assim, por favor, leve isso a sério, pois eu sei que muitos - assim como eu há 1 ano atrás - não tem o costume de beber água e, muitas vezes, não tomamos nem 1 litro por dia. A água não só te dará mais energia, como te ajudará a não reter líquido (melhorando o aspecto visual do seu corpo) e evitará pedras nos rins.

Acreditando fielmente que eu não preciso listar todos os benefícios de beber água porque concordamos (né?!) que isso é importante, vou deixar abaixo uma tabela e um link de uma calculadora de quantos litros de água você tem que beber por dia (ex: uma pessoa que pesa 60kg deveria ingerir 2,1 litros de água por dia) - inclusive, poderíamos fazer alguns vídeos no canal do YouTube que estou prestes a criar desenvolvendo uma calculadora dessas, né? Gostam de ideia? Me dêem sugestões nos comentários 👇🏼

20. Tenha uma agenda

Se você realmente deseja evoluir sua vida e crescer profissional e pessoalmente, eu acredito que é porque almeja sair da sua situação atual e alcançar uma melhor. E para fazer isso, eu não conheço outra forma além de dar prioridade aos seus projetos e abrir mão, por um tempo, de “regalias” como fins de semana, saídas à noite, festas e tempo de descanso. Infelizmente, essa é a verdade e até atingir o resultado esperado, não existe nenhum glamour e a jornada não é fácil. Mas eu garanto: vale à pena! Porém, não tem como você separar um tempo diário para realizar as atividades que te levarão onde você deseja se você não organizar sua rotina. E, para fazer isso, a melhor forma é criar uma agenda - eu recomendo o formato virtual, como o Google Calendar (pode ser usado no computador ou celular). Essa ferramenta não apenas te ajudará a organizar seus dias, mas também trará clareza sobre quais são as tarefas que mais consomem seu tempo, além de te fazer refletir se essas tarefas são as mesmas (ótimo) - ou não (sinal de alerta!) - que te farão alcançar seus sonhos. Crie uma conta no aplicativo que sugeri acima e comece gradualmente, adicionando as coisas básicas, tais como trabalho, academia e faculdade. Conforme você habituar-se a seguir o que colocou lá e criar a confiança necessária, adicione coisas mais pontuais, como tempo de estudo e de oração, por exemplo. Conforme o tempo passar e você entender a importância da agenda, seu aplicativo passará disso:

Para isso (a foto está borrada propositalmente, porque esta é minha agenda pessoal 🤪):

21. Aprenda a recompensar o processo, mas acostume-se com ele

Por mais que pareça um conselho “abstrato” - e, talvez, até filosófico -, eu garanto que essa mudança de mentalidade possui um bom embasamento neurocientífico (e nos seguintes links você encontrará mais pessoas falando sobre o assunto: blog, reels do Instagram ou shorts do YouTube). Eu gosto de colocar as referências do que estou falando, e outras pessoas melhores que eu recomendando a mesma coisa, para que não pareça que eu estou recomendando algo “que inventei” ou que “tirei da minha cabeça”. Esse tipo de abordagem para os processos da vida - especialmente nossos objetivos - vai te ajudar não apenas com o stress, mas também com o bem-estar subjetivo (felicidade). A partir do momento que paramos de focar no resultado do processo e passamos a concentrar-nos em fazê-lo melhor, dia após dia, degrau por degrau, passamos a ver progresso constante, conseguimos notar que já estamos melhores naquela atividade do que estávamos na última vez e, finalmente, conseguimos encontrar a “motivação” para continuar. Eu quero aproveitar e chamar sua atenção para um fato: notou que +90% dos conselhos que eu dei aqui são para o longo prazo e muito provavelmente não teremos um benefício visível no mesmo dia que fazemos? Como você acha que seria possível priorizar esse “jeito” de enxergar a vida se eu buscasse prazer imediato em tudo que faço? Não somos super-heróis, e seria muito difícil fazer isso de maneira sustentável (sem falhar). É por isso que quando você para de buscar aquele curto período de tempo em que você está “feliz” porque atingiu seu objetivo e começa a notar o quanto está evoluindo, você diminui a ansiedade para alcançar aquele estado logo, e passa a comemorar as pequenas vitórias - que, veja só, são os passos que você precisa para alcançar tudo aquilo que quer. Não tem problema você cobrar mais de si mesmo, e eu sugiro que você acostume-se com a dificuldade; mas não esqueça de recompensar o processo e comemorar os pequenos progressos. No final, você está hackeando (driblando) a vida e encontrando maneiras de manter-se focado, motivado e animado de um jeito saudável e promissor.

22. Desafie-se

Quando foi a última vez que você fez algo pela primeira vez? Quando foi a última vez que você colocou-se na posição de aprendiz, em um ambiente no qual você é o que menos sabe? Recentemente, eu fiz isso com duas coisas completamente distintas: jiu-jitsu e futevôlei. E posso confessar? Foi (e ainda está sendo) muito difícil. Contudo, a sensação é maravilhosa! É quase como se você pudesse “sentir” que está evoluindo, que está melhorando e adquirindo novos conhecimentos. Portanto, aprenda a tocar violão, inscreva-se em uma academia, junte-se ao time de futebol da sua cidade, matricule-se em um curso de culinária, faça o que for, mas faça alguma coisa nova! Precisamos acostumar nosso cérebro a estar constantemente expandindo e pronto para receber novas informações.

23. Aprenda a “vender-se” = melhore sua comunicação

Não adianta, você pode ter uma habilidade invejável em qualquer área da vida, mas se não souber vendê-la, ninguém dará o devido valor. Esse blog é um excelente exemplo: desde que o criei, eu considero possuir conhecimentos interessantes para compartilhar com os leitores. Contudo, se eu não souber escrever ou postar artigos de uma forma incompreensível, de que adiantará? É por isso que sempre peço para pessoas próximas (obrigado J e L ❤️‍🔥) revisarem todos artigos antes de eu publicá-los, com o objetivo de entender se meu conteúdo ficou claro suficiente. E o mesmo vale para você - especialmente em sua vida profissional. Eu já trabalhei com desenvolvedores geniais, realmente muito bons naquilo que faziam, mas que não conseguiam mostrar para seus líderes a importância que tinham e todo o conhecimento que possuíam, pois sua comunicação não era boa. Resultado? Em 99% das vezes, não eram valorizados como mereciam. Em contrapartida, já conheci muitos profissionais que não eram tão bons (às vezes, nada bons) e que sabiam fazer um “marketing” próprio fenomenal e, com isso, recebiam promoções e aumentos anuais em seus cargos. Portanto, recomendo que você pesquise como melhorar sua comunicação (cursos, mentorias - item 17 -, workshops, livros) e lembre-se dessa frase: “não basta ser, tem que parecer”.

24. Organize suas tarefas e use algum método para executá-las

Com a correria de nossas rotinas atarefadas, é muito comum que novas tarefas apareçam ao longo do dia e juntem-se àquelas que já tínhamos planejado fazer. Nesse caso, eu sinceramente não sei o que faria se não tivesse um lugar no qual eu pudesse salvar uma lista simples com esses itens. Ou melhor, não sei, mas consigo imaginar: com certeza, acabaria esquecendo várias dessas tarefas e só me lembraria quando já fosse tarde demais. Por isso, eu recomendo que você utilize algum aplicativo, tais como o Todoist, Notion, Trello ou, se você é aqueles organizadores “raiz”, pode ser em uma agenda ou planner - apenas anote suas tarefas. E, para que fique mais fácil executá-la, eu recomendo fortemente que você teste a Técnica Pomodoro usando uma ferramenta on-line como essa ou instale um aplicativo como esse (em resumo, essa técnica te ajuda a focar na sua tarefa por 25 minutos e descansar por 5 minutos, mas você pode alterar esses valores para outros que funcionem melhor para você).

25. Busque a Deus e leia a Bíblia

Eu sou cristão, então naturalmente esse é meu conselho mais importante. Contudo, eu respeito outras crenças - ou aqueles que não as tem. Também, por ser um blog técnico de desenvolvimento Front-end, procuro limitar o tanto que falo da minha fé e de como Deus é bom (mas talvez não devesse). Enfim, a minha sugestão nesse tópico é que você desenvolva a área espiritual da sua vida (assim como devemos desenvolver o âmbito pessoal, acadêmico, etc). E é óbvio que, como já dito neste artigo, eu entendo que existem momentos na vida que não conseguimos “equilibrar todos os pratos” e que precisamos priorizar alguns deles. Sem problemas, está tudo bem, desde que haja um prazo para reequilibrar sua rotina - o importante aqui é garantir que, no longo prazo, analisando todos os períodos, sua vida estará equilibrada.

26. Sempre entregue mais do que te pediram

Você nunca vai se arrepender de entregar mais do que foi solicitado, de estudar mais do que precisa, de dedicar-se mais do que a maioria, de mostrar que você quer mais e que tem mais “fome”, de dar aquele “toque a mais” (mais atenção, mais cuidado, mais carinho) na sua tarefa ou de surpreender o seu cliente/chefe com um “extra” (algo inesperado). Isso vale para cenários simples, como quando você precisa comprar um item e ele não está disponível, mas proativamente (item 6) você encontra alternativas, até situações mais complexas, que podem envolver a conclusão de um negócio milionário ou a aquisição de um novo cliente. Sempre faça mais! Não é por eles, é por você - e se serve de motivação, alguém sempre está vendo.

Sem dúvida nenhuma, essa é a publicação do blog que eu mais me dediquei para escrever e eu espero, de coração, que algo que escrevi aqui te ajude verdadeiramente! Tem algo que ficou faltando? Algum assunto que eu não abordei como você esperava? Alguma dúvida que você tenha? Me conta nos comentários e vamos fazer dessa publicação um lugar de referência para que você possa compartilhar com os amigos e que todos nós possamos usar como um guia de excelentes sugestões e conselhos que podem mudar nossas vidas. Te espero aqui! 👇🏼💥

Escrito com 💙 e 🎯 por Manual do Front.

Lembrete: inscreva-se na Newsletter para receber todos os conteúdos assim que forem publicados! E, melhor que isso, ter acesso a descontos exclusivos nas minhas mentorias!

Introdução

Para quem vem acompanhando os últimos lançamentos, acredito que é possível perceber um claro esforço do Angular em melhorar a qualidade de vida do desenvolvedor (o que chamamos de developer experience) e a performance do framework. Para que isso seja possível - e, ainda mais importante, para que as melhorias sejam assertivas e realmente adotadas pela comunidade -, o time da Google vem analisando como os últimos lançamentos foram vistos (e até julgados) pelos desenvolvedores.

TL;DR

O Angular continua a evoluir em direção a uma experiência de desenvolvimento mais intuitiva, performática e poderosa. O foco agora parece ser, cada vez mais, em funcionalidades que tenham como base o SSR (Server-Side Rendering), pois a versão 19 traz a hidratação incremental e uma configuração de renderização de rotas mais granular. Já os componentes standalone passam a ser o padrão, enquanto ganhamos a possibilidade de declarar variáveis localmente no template. Por fim, podemos destacar o lançamento de melhorias muito aguardadas pela comunidade, como a remoção de imports não utilizados e um novo componente seletor de hora.

Novidades

Hidratação incremental em “preview”

Essa funcionalidade permite ao desenvolvedor dizer ao Angular quais partes do template ele deseja carregar e “hidratar” em momentos específicos - tudo isso utilizando a sintaxe @defer. Veja essa animação retirada do anúncio oficial para entender melhor como isso funciona:

Esse vídeo exibe uma página renderizada com SSR (no lado do servidor), na qual três efeitos visuais foram adicionados: 1) os componentes em cinza, indicando que ainda não foram carregados nem hidratados pelo Angular; 2) a animação de “pulsar” que representa o momento em que o Angular está fazendo o download desse componente através da rede; e 3) a borda roxa que indica que o Angular fez o download e hidratou o componente (que já não possui mais a cor cinza).

Controle de renderização de rotas

Quando o SSR é habilitado na aplicação, o comportamento padrão do Angular é renderizar todas as rotas parametrizadas no servidor e pré-renderizar todas as rotas sem parâmetros. Na v19, a nova interface (ServerRoute) disponibilizada vai permitir que, individualmente, o comportamento das rotas seja configurado e determinar se a rota será renderizada no servidor, pré-renderizada ou renderizada no lado do cliente.

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', mode: RenderMode.Server },
  { path: '/dashboard', mode: RenderMode.Client },
  { path: '/**', mode: RenderMode.Prerender },
];

• RenderMode.Server: a rota será renderizada no lado do servidor

• RenderMode.Client: a rota será renderizada no lado do cliente

• RenderMode.Prerender: a rota será pré-renderizada

Standalone agora é o padrão!

Na verdade, permita-me explicar dois cenários diferentes para que esse título não cause confusão: atualmente, ao criar um novo componente utilizando o Angular CLI (ng g c MeuTexto, por exemplo), esse componente já é criado como standalone. Contudo, antes da versão 19, ao criar um componente sem utilizar a propriedade standalone: true no decorator, esse componente não seria um componente standalone - e aqui entra a grande novidade: a partir da v19, ele é!

Isso quer dizer que na nova versão, esse componente vai ser considerado standalone:

@Component({
  imports: [],
  selector: 'meu-texto',
  template: './meu-texto-component.html',
  // mesmo não possuindo a propriedade, será standalone no Angular 19!
})
export class MeuTextoComponent {…}

E, para criar um componente que não seja standalone, a propriedade standalone deverá ser explicitamente adicionada:

@Component({
  imports: [],
  selector: 'meu-texto',
  template: './meu-texto-component.html',
  standalone: false
})
export class MeuTextoComponent {…}

Ps.: essa regra é aplicada para componentes, diretivas e pipes.

Variáveis locais no template

Com essa nova sintaxe, o Angular simplifica muito o processo de definir e reusar uma variável no template, atendendo uma demanda muito requisitada pela comunidade e permitindo nos livrarmos de alguns workarounds (palavra bonita para gambiarra! 😝) que eram usados. A nova forma trabalha elegantemente com referências e com a async pipe.

<!-- Exemplo com a variável referenciando um elemento -->
<input #nome type="text">
@let texto = 'Olá ' + nome.value;
<span>{{ texto }}</span>

<!-- Exemplo com a async pipe -->
@let usuario = usuario$ | async;
<div>Detalhes do usuário: {{ usuario.nome }}</div>

Identificando imports não utilizados em componentes standalone

A animação abaixo demonstra perfeitamente (com o RouterOutlet) os benefícios desse comportamento. É muito comum que durante a criação das telas, com o uso dos componentes standalone, vários imports sejam feitos - pois são através deles que obtemos todas as “peças” necessárias para montar um componente. Contudo, algum tempo depois pode ser necessário mudar o template daquele componente e existe a chance de um import que antes era obrigatório tornar-se desnecessário. Com essa adição, não precisaremos de nenhuma configuração extra na IDE ou de plug-in, pois a própria Angular CLI indicará isso.

Caso você queira desabilitar essa validação (entendo que pode ser necessário em casos de projetos legados; caso contrário, não faça isso), basta atualizar seu arquivo angular.json:

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "unusedStandaloneImports": "suppress"
      }
    }
  }
}

Novo componente "seletor" de hora (time picker)

Como a própria nota de lançamento afirma, um dos pedidos mais populares no GitHub tem sido um “seletor de tempo” para o Angular Material. E, finalmente, ele foi lançado! Veja uma animação do componente na prática e um trecho de código demonstrando uma abordagem mais simples:

<mat-form-field>
  <mat-label>Pick a time</mat-label>
  <input matInput [matTimepicker]="picker">
  <mat-timepicker-toggle matIconSuffix [for]="picker"/>
  <mat-timepicker #picker/>
</mat-form-field>

Conclusão

É claro que estas não são as únicas novidades dessa versão. Temos outras opções interessantíssimas, tais como: as novas primitivas de reatividade introduzidas (linkedSignal e a resource API); diversos novos comandos schematics (que nada mais são do que geradores de código); atualizações na função effect; e muito mais!

Mas eu resolvi destacar aquilo que eu achei legal, misturando game-changers que colocam o Angular em um novo nível (como a hidratação incremental) com coisas simples, mas que melhoram muito nosso dia a dia (como o alerta para imports não utilizados).

Quais novidades você sentiu falta? Teve alguma coisa que você não gostou nessa nova versão ou algum detalhe que você acha que eu deveria ter abordado com mais detalhes? Me deixa saber nos comentários, esse espaço é nosso! 😁👇🏼

Referências

• Post oficial no blog do Angular (link)

• Post do Andrew Rosário no Medium (link)

• Post do Mateusz Dobrowolski no Angular.love (link)

• Vídeo do Joshua Morony no YouTube (link)

• Vídeo do Maximilian Schwarzmüller no YouTube (link)

Escrito com 💙 e 🎯 por Manual do Front.

Lembrete: inscreva-se na Newsletter para receber todos os conteúdos assim que forem publicados! E, melhor que isso, ter acesso a descontos exclusivos nas minhas mentorias!

Nessa publicação, você vai encontrar os destaques da versão 1.95 segundo a minha opinião. Tem bastante coisa legal chegando, e outras ainda melhores por vir. Espero que você realmente goste desse artigo. Ao acabar de ler, me conta o que você mais gostou nos comentários para que possamos debater? Vejo você lá!

Github Copilot

Para mim, ainda é meio bizarro as proporções que a Inteligência Artificial, os plugins e as novas ferramentas baseadas nisso estão tomando - e, especialmente, a forma como estão transformando nosso dia a dia. Nessa versão do VSCode, a publicação realmente foca muito na extensão e coloca essa seção com destaque total. Nesse caso, eu concordo com algumas reclamações de membros da comunidade que dizem que a Microsoft está focando demais na Copilot, e esquecendo do editor.

Concordo com isso pois precisamos ter em vista que a extensão possui um trial (acesso a um produto/serviço gratuitamente por um tempo determinado), mas não possui um freemium (acesso a esse produto ou serviço gratuito, sem tempo determinado, mas que passa a ser pago para contar com algumas funcionalidades extras). Dessa forma, somos “obrigados” a pagar para contar com tudo que está sendo lançado. Contudo, no final das contas, nosso objetivo é poder usar o VSCode e as atualizações dele deveriam ser focadas nele mesmo (ao menos em sua grande maioria), melhorando performance e adicionando novas funcionalidades.

Modo de Trabalho

Agora podemos conectar múltiplas contas do GitHub no VSCode ao mesmo tempo! Como o próprio anúncio comenta, existem situações onde precisamos disso, tais como usar contas diferentes para extensões diferentes (ex: conta de estudante para o GitHub Copilot e a conta normal para seu GitHub) ou, a mais comum para mim, que é preferências diferentes entre o GitHub profissional (da sua empresa, por exemplo) e o seu pessoal. Isso é muito comum quando você precisa utilizar alguma extensão ou padrão no código da sua empresa, mas não gosta muito de utilizá-lo em seus projetos pessoais.

Editor

Quase nenhuma novidade além da possibilidade de configurar a propriedade editor.occurrencesHighlightDelay. Essa propriedade nada mais é do que um número, que pode variar entre 0 e 1999 (milissegundos) que, em teoria, nos dá o controle sobre o tempo de delay antes que as ocorrências sejam destacadas no editor (ex: quando selecionamos uma variável e desejamos buscar por todo o arquivo). Segundo a publicação, diminuir esse número pode nos fornecer uma experiência mais responsiva no editor quando trabalhamos com destaque semântico.

Eu confesso que fiz o teste no VSCode Insiders e não consegui notar diferença nenhuma. Então, ou eu não entendi corretamente essa proposta e meus testes foram inválidos; ou a funcionalidade ainda está um pouco estável. Vamos esperar e ver, mas esse é aquele tipo de incremento que, na prática, não agrega muito em nossas vidas.

Prévia das Próximas Funcionalidades

Nessa seção, vou destacar a funcionalidade que está próxima de ser lançada que eu mais gostei. E a escolhida de hoje é: atualização de imports ao “colar” código em arquivos JavaScript e TypeScript.

Sabe quando você está refatorando o código e precisa recortar e colar algumas seções do seu código em outro arquivo? Quando eu preciso fazer isso, a parte mais chata - sem dúvidas - é ter que revisar os imports do arquivo e remover aquilo que não é mais usado, ou recortar para o novo arquivo. Aí você pode dizer assim: “ah, mas é só usar extensões para isso” - eu sei, pequeno gafanhoto, e já as utilizo, mas imagina se isso fosse nativo do editor? Além de ser mais performático, acaba sendo uma “obrigação” que a equipe que mantém o VSCode siga trazendo melhorias e corrigindo bugs, caso a gente encontre.

É por isso que essa atualização chamou minha atenção. Além disso, parece que não vai ser uma simples atualização de imports, mas algo mais inteligente que vai até adicionar um novo export para uma variável local que era usada no código que foi recortado. Para usarmos essa funcionalidade precisamos:

• Usar o TypeScript 5.7+

• Habilitar essas configurações (elas são independentes):

  • javascript.experimental.updateImportsOnPaste

  • typescript.experimental.updateImportsOnPaste

Observação: por enquanto, essa funcionalidade só é suportada quando colamos código entre editores na mesma janela (instância) do VSCode. Ou seja, se você tiver duas janelas do VSCode abertas e colar código entre elas, não vai funcionar.

Comentários finais

Claro que essa é só uma parte (a que chamou minha atenção) dentro de toda a publicação que você pode encontrar no link abaixo. Na página oficial, também podemos encontrar outros detalhes destacados pelos autores, como a confirmação que a equipe do VSCode migrou o repositório principal e todos os exemplos de extensões para o ESLint 9; a própria aplicação estável, agora, está usando Electron 32, juntamente com o Chromium 128.0.6613.186 e o Node.js 20.18.0.

Link da publicação oficial: https://code.visualstudio.com/updates/v1_95

Mas me conta: você vai testar alguma dessas funcionalidades? Você sabe como configurar as alterações que mencionei? Tem desejo de usar a versão Insider e também ser um usuário “beta”? E, por fim: você já ouviu falar sobre o Cursor? Parece que o VSCode está tentando eliminar mais um concorrente, assim como tenta fazer com o Zed. Me conta nos comentários se gostaria que eu ensinasse isso no próximo artigo!

Escrito com 💙 e 🎯 por Manual do Front.

Lembrete: inscreva-se na Newsletter para receber todos os conteúdos assim que forem publicados! E, melhor que isso, ter acesso a descontos exclusivos nas minhas mentorias!

Se você é um desenvolvedor web, talvez seja obcecado em encontrar um site que possa economizar muito tempo para você.

Aqui estão sites que eu, pessoalmente, uso para economizar - ao menos - 25 horas/semana.

UI verse

É uma biblioteca enorme com centenas de elementos que você pode apenas copiar e colar em seu site. É uma das maiores bibliotecas de UI de código aberto.

Link: https://uiverse.io/checkboxes

Glitch

Este site ajuda você a criar seu próximo projeto web no browser sem a necessidade de configurar e instalar nada, além de possuir um deploy instantâneo.

Link: https://glitch.com/

Shots.so

Cria lindos planos de fundo projetados para suas imagens. Com mais de 100 modelos pré-construídos e customizáveis, permite que você torne suas imagens 10x melhores.

Link: https://www.shots.so/

Dev Docs

E se você tivesse uma documentação que tenha documentado quase tudo que você precisa? O DevDocs combina e agrupa diversas documentações de API em uma interface rápida, organizada e pesquisável.

Link: https://devdocs.io/

LambdaTest Free Online Tools

Uma coleção de ferramentas, utilitários e bibliotecas online e gratuita que ajuda desenvolvedores, testadores, designers e etc em suas tarefas do dia a dia.

Link: https://www.lambdatest.com/free-online-tools

Mobbin

A maior biblioteca de design para dispositivos móveis e web do mundo. Economize horas de pesquisa de UI e UX com essa biblioteca que conta com mais de 300.000 telas dos aplicativos mais bem desenhados/projetados do mundo.

Link: https://mobbin.com/

Ping Test

Você pode checar qualquer endereço IP ou nome do host (hostname) de diversas localidades em paralelo.

Link: https://tools.keycdn.com/ping

LandingFolio

Precisamos admitir que a maioria dos desenvolvedores não são designers… é por isso que esse site é a melhor escolha para nós, desenvolvedores, encontrarmos inspiração:

Link: https://www.landingfolio.com/

Free for Dev

Uma coleção de aplicativos, sistemas e serviços gratuitos, cobrindo tudo que um desenvolvedor precisa - desde SaaS, até ferramentas de desenvolvimento, APIs e plataformas de nuvem.

Link: https://free-for.dev/#/

Tiny Wow

Nós sempre buscamos uma alternativa gratuita e este site é uma mina de ouro. Descubra uma ampla gama de ferramentas e serviços gratuitos.

Link: https://tinywow.com/

Conclusão

Este post é uma tradução autorizada, originalmente publicada no dev.to pelo adarsh.

Muito obrigado por ler. Continue ligado e inscreva-se na newsletter para receber mais conteúdos como esse! 🔥

Escrito com 💙 e 🎯 por Manual do Front.

Lembrete: inscreva-se na Newsletter para receber todos os conteúdos assim que forem publicados! E, melhor que isso, ter acesso a descontos exclusivos nas minhas mentorias!

É por isso que, com esse artigo, iniciamos uma série de publicações onde pretendo compartilhar minhas preferências, dicas, atalhos, extensões e novidades do Visual Studio Code, com o objetivo de ajudá-lo a usar esse recurso com maestria e tornar-se referência na sua equipe e/ou empresa. Particularmente, considero isso importantíssimo porque pode fazer parte do seu branding pessoal e, assim como aconteceu comigo, você passar a ser reconhecido como expert na ferramenta, ser aquela pessoa que todos chamam quando precisam de ajuda, ou até mesmo começar a compartilhar as novidades que descobriu com seu time.

Sem perder mais tempo - já que teremos muitos artigos pela frente -, gostaria de compartilhar os atalhos que eu mais utilizo ao longo do meu dia, com uma observação: para esses atalhos, estou utilizando um Macbook (macOS) e, por isso, a tecla principal será o Cmd (Cmd).

Comandos Básicos

Assim como na programação, antes de aprender o framework mais recente ou querer entender detalhadamente como uma biblioteca funciona, o ideal é conhecer os fundamentos, melhorar a base, estar familiarizado e, só então, passar para o próximo nível. Confira a seguir alguns comandos simples, mas que precisam fazer parte das suas habilidades:

• Cmd + A: permite que você selecione todo o conteúdo do arquivo.

• Cmd + S: salva suas alterações recentes.

• Cmd + →: move o cursor para o final da linha.

• Cmd + ←: move o cursor para o início da linha.

• Cmd + ← Backspace: apaga a linha inteira.

• Cmd + C: copia o conteúdo selecionado para a área de transferência.

• Cmd + V: cola o conteúdo disponível na área de transferência.

As estrelas do artigo

Finalmente! Depois de entendermos a importância de comandos simples como “Copiar e Colar”, está na hora de listar os 3 comandos que eu mais gosto de utilizar no VSCode.

⒈ Cmd + Shift + P

Vou começar com esse não tanto por ser o que eu, particularmente, mais utilizo; mas sim porque se você tiver que encerrar esse artigo decorando apenas um comando, que seja esse. O principal motivo é que essa combinação abre o que chamamos de Paleta de Comandos e, através dela, você poderá executar uma série de comandos. Veja na imagem a seguir, dois exemplos: o primeiro formatando um arquivo e o segundo recarregando todo o editor:

E a parte mais legal é que também será possível acessar, através desse comando, todos os comandos que as extensões que você instalou disponibilizam (no exemplo abaixo, eu abro a página inicial do GitLens):

Vale lembrar que muito provavelmente, todos os comandos que eu demonstrei aqui através da Paleta de Comandos também possuem um atalho próprio. Caso você - assim como eu - goste desse tipo de desafio, eu encorajo você a decorar aqueles dos quais gostar mais. Mas até lá, esse comando já será muito útil para você!

⒉ Cmd + D

Sabe quando você criou a variável principal do seu script e acabou notando que o nome não ficou tão descritivo (mas agora ela já é usada em 5 lugares)? Ou quando você quer saber se aquela propriedade está sendo utilizada em outros lugares do mesmo arquivo? Ou quando você precisa mudar uma palavra de camelCase para PascalCase? Nesses momentos, eu realmente sou fã desse comando. Veja:

Eu sei que também existe um arquivo para substituir todas as ocorrências, caso você prefira fazer tudo de uma vez só - mas esse eu não vou contar. Qual tal você colocar a resposta desse desafio nos comentários? 👀

⒊ Cmd + Shift + F

A terceira combinação de teclas vai para aqueles que já precisaram encontrar um exemplo parecido em um projeto muito grande ou, talvez, os arquivos que utilizam certa função em uma aplicação JavaScript e não sabiam direito como fazer isso (ou, talvez, tiveram que recorrer ao mouse). Com esse comando, você vai poder buscar um termo em todos os arquivos do seu Visual Studio Code (inclusive, caso você tenha criado um workspace, essa busca será aplicada a todos os diretórios adicionados - mas acho que isso pode ser assunto em outro artigo, né?). Confira abaixo uma busca aplicada em 7 pastas, com diversos arquivos dentro:

Bônus

E é óbvio que, para você que chegou até o final deste artigo, haveria um bônus! 🎁 Inclusive, essa é uma cultura que eu quero criar por aqui, entre a gente: você sempre pode esperar de mim mais do que o combinado (nesse caso, prometi 3 atalhos essenciais, mas ao todo entreguei mais de 10) e, em contrapartida, eu só espero que você aplique o que for útil no seu dia a dia e me conte sobre isso (curtindo, comentando ou recomendando esse blog para os seus amigos), combinado?

Cmd + K Cmd + T

Como todo desenvolvedor que se preza, é indispensável (ironia!) que você tenha alguns temas para trocar de vez em quando, e também consiga fazer isso o mais rápido possível! Brincadeiras à parte, particularmente, eu tenho ~5 temas que são meus preferidos e, quando sinto que preciso de alguma pequena “mudança”, costumo recorrer à essa troca (e, sem dúvidas, eu faço isso através de atalhos). Configura alguns deles na imagem abaixo:

E aí, já conhecia esses atalhos? Já utiliza algum? Conhece algum outro que eu devia ter mencionado aqui? Me conta nos comentários, ou me chama no LinkedIn! 👇🏼

Escrito com 💙 e 🎯 por Manual do Front.

Lembrete: inscreva-se na Newsletter para receber todos os conteúdos assim que forem publicados! E, melhor que isso, ter acesso a descontos exclusivos nas minhas mentorias!

Seja muito bem-vindo! Esse é meu primeiro post e, independente do dia, eu agradeço seu interesse em ler o que tenho para compartilhar. E como prometido, eu gostaria de explicar como decidi começar esse projeto e eu, particularmente, acredito que tudo começa com um porquê. Nesse caso, não foi diferente.

Contudo, se você me perguntar qual é, neste momento, eu não saberia dizer.

Não porque eu não saiba o que quero trazer como conteúdo aqui ou que estas publicações não tenham finalidade - muito pelo contrário. Mas sim porque acho que nada define melhor do que a mais pura vontade de compartilhar o conhecimento que adquiri nesses quase 8 anos de carreira, somada à busca por evolução constante e por novas oportunidades ou desafios.

Um pouco de história

Desde os primeiros Windows com quais tive contato, eu sempre gostei de documentar tudo que faço, criar anotações para lembrar o passo a passo de como cheguei em determinado resultado e, especialmente, tornar isso útil para alguém - mesmo que, em 90% dos casos, essa pessoa fosse eu mesmo. Isso me mostra que, apesar de ter demorado para tirar esse projeto do papel, essa vontade sempre esteve lá, presente - mas talvez adormecida. E hoje eu acredito que tudo acontece na hora certa.

Com a correria de uma rotina preenchida pelo curso Técnico em Informática (no qual me formei em 2016) - que, posteriormente, evoluiu para a graduação em Bacharel em Ciência da Computação (formado em 2021) - e por um trabalho CLT que começava às 07h42 e deveria ir até às 18h (assunto para outra publicação), eu deixei esse ímpeto de lado para perseguir uma ascensão profissional e concluir minha faculdade com maestria. Posso dizer que sim, valeu à pena! Me formei condecorado como o melhor aluno da minha turma e hoje minha carreira é próspera, sólida e promissora.

Contudo, isso não me fez parar de estudar. Pelo contrário! Eu ainda leio diversos blogs, consumo inúmeros vídeos técnicos no YouTube e assino algumas newsletters (inclusive, pretendo compartilhar vários desses conteúdos como recomendações em publicações futuras aqui do blog). E toda vez que eu estou estudando ou tentando aprender algo, aquele mesmo sentimento do menino que fazia tutoriais em tom de brincadeira volta, e eu me sinto "devendo" para a comunidade - ou, no mínimo, deixando uma grande oportunidade de contribuir e conhecer pessoas incríveis que podem agregar à minha vida.

Dessa vez, pensei: por que não compartilhar isso e, talvez um dia, atingir dezenas, centenas ou até milhares de pessoas? Por que não, no futuro, ter a possibilidade de ser uma referência para os novos desenvolvedores, assim como outros desenvolvedores foram (e ainda são) pra mim? Imagina só um dos inúmeros artigos que pretendo publicar ter o mesmo impacto que artigos do passado tiveram no início da minha carreira... que honra seria! Só de pensar nisso, já fico empolgado!

Relevância e reconhecimento

Se você é um desenvolvedor Front-end, peço que me ajude nos comentários - ou me corrija, se eu estiver errado - quando digo que: atualmente, é muito difícil encontrar uma certificação reconhecida nacional ou internacionalmente para esse novo "cargo" - um grande número de devs atribui o surgimento do termo Front-end entre os anos de 2007 e 2011, como você pode ver nesse fórum do frontendbr. Isso quer dizer que, talvez, esse cargo ainda nem tenha chegado à maioridade. 😂

E por que isso é um problema? Porque, diferente de linguagens estabelecidas há muito tempo, como o C (1972) e o Java (1996), por não haver certificações ou outras formas oficiais de comprovar seu conhecimento, torna-se difícil mostrar que "você é bom". Ainda neste cenário, recentemente tivemos a popularização de cursos on-line, que derrubaram as barreiras para adquirir um certificado (neste caso porém, a grande maioria baseiam-se em horas-aula e não em uma prova de validação de conhecimento). Isso é ótimo, não me entendam mal, nunca foi tão fácil obter conhecimento útil mas, ao mesmo tempo, nem todo curso terá conteúdo suficiente para prepará-lo para o mercado de trabalho e para os desafios diários.

Quem trabalha na área, nesse momento muito provavelmente já identificou o problema. Para você que ainda não tem tanta experiência, está começando na área ou migrando de carreira, eu vou explicar com mais detalhes. Com a explosão de tech-startups dos últimos anos e os investimentos bilionários na área, houve uma demanda excessiva por desenvolvedores, já que a tecnologia é a maneira mais rápida de fazer uma empresa tornar-se competitiva ao mercado. Com o aumento da demanda (vagas) e o aumento expressivo da oferta (desenvolvedores), ficou muito difícil filtrar a capacidade de cada profissional e, especialmente, identificar quem tem mais experiência.

Dessa forma, certificados como os criados pela AWS, Google ou Microsoft, por exemplo, tornaram-se uma forma reconhecida e segura de comprovar seus conhecimentos. Infelizmente, não temos um exemplo equivalente para o desenvolvimento Front-end (afirmação em Set/2024). Parafraseando Fabio Akita no seu post de boas vindas (assim como eu estou fazendo aqui): "os pioneiros sempre caminham por território árduo, mas a recompensa dos primeiros sempre será maior também", eu consigo compartilhar com você como vejo essa situação: oportunidade.

Aliado à essa visão, eu sempre tive o sonho de ser reconhecido como um profissional capaz de agregar conhecimento e fazer parte de grandes projetos de software. Mas sem uma certificação específica e trabalhando para empresas privadas (nas quais o código não é público), restava-me minha graduação, meu GitHub e alguns cursos. Mas eu queria (e quero) mais, e vejo esse blog como uma excelente forma de ser meu portfólio. E penso assim não apenas porque vou compartilhar o que sei, mas porque vou estar aprendendo com você que - assim espero 🙏🏼 - vai deixar um comentário, vai assinar a newsletter no futuro ou, de alguma forma, também contribuirá comigo e poderá acompanhar, semana pós semana, minha evolução nessa jornada.

O que você encontrará por aqui?

Como alguém que é desenvolvedor há quase 9 anos e, no início da carreira, foi um desenvolvedor full-stack que atuava desde o levantamento de requisitos no cliente até à implantação (ou melhor, eu gosto de brincar com quem acompanha futebol que eu cruzava o escanteio e ia correndo para a área cabecear), eu não gostaria de limitar tudo que vamos conversar aqui. Acredito que podemos falar de ferramentas, GIT, código, design patterns, desafios do dia a dia e novidades da área de tecnologia.

A imagem acima, caso não seja familiar para você, representa o termo T-shaped, que nada mais é do que uma carreira profissional conhecida como "<T\>". Eu gosto dessa teoria porque ela defende que um bom profissional é especialista em certo assunto (a linha vertical do T), mas ele "sabe se virar" em diversas outras áreas (a linha horizontal do T) que são relacionadas à sua especialidade. Aplicando isso para um desenvolvedor Front-end, por exemplo, podemos entender que é esperado que esse profissional seja muito bom em tecnologias do desenvolvimento Front-end, como HTML, CSS e JS. Porém, ele nunca conseguirá trabalhar em equipe se ele não souber o que é um JSON ou não poderá versionar seu código, caso não saiba GIT.

Acho que essa imagem representa bem, em uma visão geral, o que será esse blog. Com certeza, tendo trabalhado profissionalmente por 2 anos com React, 3 anos com Vue e - até o momento - 3 meses com Angular, eu vou priorizar e trazer mais conteúdos de Front-end. Mas, como mostrei na imagem acima, nós precisamos - e vamos - falar sobre outras tecnologias que são fundamentais no dia a dia e que irão colocar você em outro nível de profissionalismo e domínio da sua profissão. Então, teremos diversos assuntos, tais como (mas não limitado à):

• Conteúdo básico:

  • Boas práticas (de separação de código, criação de projetos, ...)

  • Semântica (escrever um HTML com significado)

  • Estilização (com CSS, SCSS, etc...)

  • Ferramentas (como ser mais produtivo no Visual Studio Code, ...)

  • GIT Básico (add, commit, push, pull)

• Conteúdo avançado:

  • Performance (como deixar seu site mais rápido, quais métricas analisar, ...)

  • Acessibilidade (como é uma página compatível com tecnologias assistivas)

  • GIT Avançado (squash, rebase, reset, cherry-pick, log)

• Conteúdo especializado:

  • Reatividade (comparando Angular x Vue x React)

  • Como funcionam as stores utilizadas por esses frameworks

  • Desafios que surgem no dia a dia (e como foram resolvidos)

  • Testes unitários (com JEST, Testing Library, ...)

• Conteúdo compartilhado:

  • Terminal (como utilizá-lo para ser mais eficiente no dia a dia, ...)

  • Protocolo HTTP • JSON • UI/UX • Documentação

  • e muito mais!

Esse é o Manual do Front, um perfil simples e direto mas que, com muito cuidado e qualidade, tentará compartilhar dicas, tutoriais - algumas brincadeiras - e conteúdo que estejam relacionados às nuances que envolvem o desenvolvimento Front-end no dia a dia. Quero muito te ver por aqui, bora?

Escrito com 💙 e 🎯 por Manual do Front.

Lembrete: inscreva-se na Newsletter para receber todos os conteúdos assim que forem publicados! E, melhor que isso, ter acesso a descontos exclusivos nas minhas mentorias!