Forem: Manual do Front

Veja as novidades sobre performance, SSR, linting e novos componentes contidas na nova versão do Angular: v19!

Manual do Front — Thu, 28 Nov 2024 12:11:12 +0000

Angular 19 chegou: tudo o que você precisa saber!

Manual do Front ・ Nov 28

Angular 19 chegou: tudo o que você precisa saber!

Manual do Front — Thu, 28 Nov 2024 12:07:47 +0000

Seguindo a frequência de lançamentos já conhecida pela comunidade, mais um fim de ano está chegando e, com ele, mais uma major version do Angular está disponível. Neste artigo, irei destacar as novidades que mais despertaram meu interesse com base no artigo original do lançamento, em alguns artigos que li e vídeos que assisti (você encontrará as referências/fontes no final).

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:

O vídeo do post original - que, infelizmente, a plataforma não permite adicionar aqui - 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"
      }
    }
  }
}

💡 Curiosidade

Ainda nessa versão, também teremos a validação de funções não invocadas: basicamente, isso irá destacar casos onde uma função é usada para um evento, mas não é chamada - frequentemente devido à falta do uso de parênteses no template. Exemplo: change=”onChange” ao invés de change=”onChange()".

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.

Veja as Novidades do Visual Studio Code para Outubro de 2024

Manual do Front — Fri, 01 Nov 2024 11:49:06 +0000

Chegamos ao ms de Outubro de 2024 (esse ano passou rpido demais, voc no acha?) e com ele, temos mais um release notes do nosso editor de cdigo favorito 💙

Nessa publicao, voc vai encontrar os destaques da verso 1.95 segundo a minha opinio. 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 comentrios para que possamos debater? Vejo voc l!

Github Copilot

Para mim, ainda meio bizarro as propores que a Inteligncia Artificial, os plugins e as novas ferramentas baseadas nisso esto tomando - e, especialmente, a forma como esto transformando nosso dia a dia. Nessa verso do VSCode, a publicao realmente foca muito ferramenta e coloca essa seo com destaque total. Nesse caso, eu concordo com algumas reclamaes de membros da comunidade que dizem que a Microsoft est focando demais nessa extenso, e esquecendo do editor.

Concordo com isso pois precisamos ter em vista que a extenso possui um trial (acesso a um produto/servio gratuitamente por um tempo determinado), mas no possui um freemium (acesso a esse produto ou servio 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 lanado. Contudo, no final das contas, nosso objetivo poder usar o VSCode e as atualizaes dele deveriam ser focadas nele mesmo (ao menos em sua grande maioria), melhorando performance e adicionando novas funcionalidades.

Modo de Trabalho

Agora podemos conectar mltiplas contas do GitHub no VSCode ao mesmo tempo! Como o prprio anncio comenta, existem situaes onde precisamos disso, tais como usar contas diferentes para extenses diferentes (ex: conta de estudante para o GitHub Copilot e a conta normal para seu GitHub) ou, a mais comum para mim, que preferncias diferentes entre o GitHub profissional (da sua empresa, por exemplo) e o seu pessoal. Isso muito comum quando voc precisa utilizar alguma extenso ou padro no cdigo da sua empresa, mas no gosta muito de utiliz-lo em seus projetos pessoais.

Editor

Quase nenhuma novidade alm da possibilidade de configurar a propriedade editor.occurrencesHighlightDelay que, em teoria, nos d o controle sobre o tempo de delay antes que as ocorrncias sejam destacadas no editor (ex: quando selecionamos uma varivel e desejamos buscar por todo o arquivo). Segundo a publicao, diminuindo esse valor pode nos fornecer uma experincia mais responsiva no editor quando trabalhamos com destaque semntico.

Eu confesso que fiz o teste no VSCode Insiders e no consegui notar diferena nenhuma. Ento, ou eu no entendi corretamente essa proposta e meus testes foram invlidos; ou a funcionalidade ainda est um pouco estvel. Vamos esperar e ver, mas esse aquele tipo de incremento que, na prtica, no agrega muito em nossas vidas.

Prvia das Prximas Funcionalidades

Nessa seo, sempre vou destacar a funcionalidade que est prxima de ser lanada que eu mais gostei e a de hoje : atualizao de imports ao colar para JavaScript e TypeScript.

Sabe quando voc est refatorando o cdigo e precisa recortar e colar algumas sees do seu cdigo em outro arquivo? Quando eu preciso fazer isso, a parte mais chata - sem dvidas - ter que revisar os imports do arquivo e remover aquilo que no mais usado, ou recortar para o novo arquivo. A voc pode dizer assim: ah, mas s usar extenses para isso - eu sei, pequeno gafanhoto, e j as utilizo, mas imagina se isso fosse nativo do editor? Alm de ser mais performtico, acaba sendo uma obrigao que a equipe que mantm o VSCode siga trazendo melhorias e corrigindo bugs, caso a gente encontre.

por isso que essa atualizao chamou minha ateno. Alm disso, parece que no vai ser uma simples atualizao de imports, mas algo mais inteligente que vai at adicionar um novo export para uma varivel local que era usada no cdigo que foi recortado. Para usarmos essa funcionalidade precisamos:

Usar o TypeScript 5.7+
Habilitar essas configuraes (elas so independentes):

Observao : por enquanto, essa funcionalidade s suportada quando colamos cdigo entre editores na mesma janela (sesso) do VSCode.

Comentrios finais

Claro que essa s uma parte (a que chamou minha ateno) dentro de toda a publicao que voc pode encontrar no link abaixo. Na pgina oficial, tambm podemos encontrar outros detalhes destacados pelos autores, como a confirmao que a equipe do VSCode migrou o repositrio principal e todos os exemplos de extenses para o ESLint 9; a prpria aplicao estvel, agora, est usando Electron 32, juntamente com o Chromium 128.0.6613.186 e o Node.js 20.18.0.

Link da publicao oficial: https://code.visualstudio.com/updates/v1_95

Mas me conta: voc vai testar alguma dessas funcionalidades? Voc sabe como configurar as alteraes que mencionei? Tem desejo de usar a verso Insider e tambm ser um usurio 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 comentrios se gostaria que eu ensinasse isso no prximo artigo!

Escrito com 💙 e 🎯 por Manual do Front .

]]>

3 Atalhos Essenciais do Visual Studio Code Que Você Precisa Conhecer

Manual do Front — Thu, 26 Sep 2024 11:45:58 +0000

Como alguém que gosta - muito - do Visual Studio Code e que usa esse editor de código diariamente há, pelo menos, 5 anos, eu posso afirmar que usá-lo de uma maneira produtiva, dominando essa ferramenta e suas possibilidades pode trazer benefícios que vão desde a otimização do seu tempo até seu crescimento profissional. Inclusive, eu gosto de afirmar que como desenvolvedores (especialmente web e Front-end), temos a obrigação de conhecer profundamente duas ferramentas: o editor de código e o browser.

É 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).

🗒 Observação:

Caso você esteja utilizando Windows ou Linux, provavelmente você precisará utilizar o Ctrl (Ctrl).

Mac ícones criados por Freepik - Flaticon

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:

👉🏼 Nota: Infelizmente o dev.to não está renderizando minhas imagens, então - enquanto busco soluções - por favor veja-as aqui:

Imagem animada (GIF) sobre a Paleta de Comandos

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):

👉🏼 Nota: Infelizmente o dev.to não está renderizando minhas imagens, então - enquanto busco soluções - por favor veja-as aqui:

Imagem animada (GIF) sobre comandos do GitLens disponíveis na Paleta de Comandos

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:

👉🏼 Nota: Infelizmente o dev.to não está renderizando minhas imagens, então - enquanto busco soluções - por favor veja-as aqui:

Imagem animada (GIF) sobre seleção múltipla

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:

👉🏼 Nota: Infelizmente o dev.to não está renderizando minhas imagens, então - enquanto busco soluções - por favor veja-as aqui:

Imagem animada (GIF) sobre busca

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:

👉🏼 Nota: Infelizmente o dev.to não está renderizando minhas imagens, então - enquanto busco soluções - por favor veja-as aqui:

Imagem animada (GIF) sobre temas

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.

O ponto de partida: a explicação de como tudo começou

Manual do Front — Thu, 12 Sep 2024 12:02:29 +0000

Minha história pessoal e como eu espero que o Manual do Front ajude você

É estranho... logo eu, que sempre gostei de escrever os famosos "textões" ou de falar muito, vejo esse cursor piscando e penso em tanta coisa para compartilhar - mas nem sei por onde começar. Sendo assim, depois de vários minutos parado, olhando para uma tela imóvel, decidi que era hora de digitar. E cá estamos!

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.

Imagem do Google Drive mostrando que em Março e Maio de 2015 eu já tentava criar tutoriais e conteúdo - e sim, já estou ficando velho 😂

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.

Créditos e fonte da imagem original (2022)

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.

Originalmente publicado no meu blog, em https://manualdofront.com no dia 11 de Setembro de 2024.

Forem: Manual do Front

Veja as novidades sobre performance, SSR, linting e novos componentes contidas na nova versão do Angular: v19!

Angular 19 chegou: tudo o que você precisa saber!

Manual do Front ・ Nov 28

Angular 19 chegou: tudo o que você precisa saber!

Introdução

TL;DR

Novidades

Hidratação incremental em “preview”

Controle de renderização de rotas

Standalone agora é o padrão!

Variáveis locais no template

Identificando imports não utilizados em componentes standalone

Novo componente "seletor" de hora (time picker)

Conclusão

Veja as Novidades do Visual Studio Code para Outubro de 2024

Github Copilot

Modo de Trabalho

Editor

Prvia das Prximas Funcionalidades

Comentrios finais

3 Atalhos Essenciais do Visual Studio Code Que Você Precisa Conhecer

Comandos Básicos

As estrelas do artigo

⒈ Cmd + Shift + P

⒉ Cmd + D

⒊ Cmd + Shift + F

Bônus

Cmd + K Cmd + T

O ponto de partida: a explicação de como tudo começou

Um pouco de história

Relevância e reconhecimento

O que você encontrará por aqui?

⒈ `Cmd` + `Shift` + `P`

⒉ `Cmd` + `D`

⒊ `Cmd` + `Shift` + `F`

`Cmd` + `K` `Cmd` + `T`