O que estudar para ser um programador de Frontend? 🎨 Parte 1

Hello world 👋 Tudo bem malta?
Mais um artigo, e desta vez quero partilhar com vocês o que realmente faz um programador de Frontend. O que é, que ferramentas são usadas e claro o que tens de realmente fazer para seres um bom Frontend developer.
Nos últimos anos, as ferramentas têm evoluido bastante, por isso temos sempre que estar a par da tendência. Existe cada vez mais uma aproximação do Frontend ao Backend, por exemplo, existem regras de negócio que podem ser tratadas através do Frontend.

Os dias em que só havia problemas de layout, pode não ser exatamente o único problema no teu projeto. Daí teres que estar sempre a par das tendências e de todas as ferramentas que devem ser usadas.
Como 1ª abordagem, quero que vejas este enorme gráfico, acho que é mesmo um excelente guia de quem quer realmente começar a ser um Frontend developer.

Claro, que nem tudo o que está aqui mencionado sei, mas temos que trabalhar bastante todos os dias para o saber.

Então vamos lá começar, já deves ter ouvido falar muito destas siglas, e são o seguinte:

• HTML - Hypertext Markup Language
• CSS - Cascading Style Sheets
• JS - Javascript

Este é realmente o grande pilar do Frontend. Sabendo estes 3 principais pilares, consegues transformar o site que realmente idealizas em realidade. De uma forma simplificada, o HTML é a estrutura, o CSS é a estilização e o Javascript é a parte funcional do teu site/app.

A partir destas 3 peças chave, com o avanço da tecnologia, e também do web development, foram desenvolvidas novas ferramentas, como libraries e frameworks. Que também terás que estudar.
A Library podemos dizer que é um conjunto de código que é criado para resolver um problema. Podemos dizer que a framework também é parecido a uma library, mas é diferente ao mesmo tempo. Numa Framework tem toda uma estrutura que deve ser seguida (conhecido como "code convention") e por norma tem algumas boas funcionalidades prontas. Exemplos de frameworks, que mais tarde falarei mais sobre estas, mas são: React, Vue, Angular, Svelte e muitas outras provavelmente.

Mas aqui fica o aviso, que pela minha experiência, acontece bastante nos eventos, é um erro bastante comum: Nunca jamais em algum momento, deixes de aprender bem estes 3 pilares antes de começares a aprender qualquer tipo de framework. Esta é mesmo a base que qualquer Frontend deve ter.

Após ter já feito alguns projetos, onde eu tinha tudo localmente ou então espalhava por codepens (é um site onde podes criar projetos pequenos com HTML, CSS, JS, e que eu, estupidamente, apaguei alguns dos codepens que tinha na altura), depois deparei-me que havia algo incrível, onde podiamos fazer o controlo de versão dos nossos projectos, e que podiamos organizar como quiséssemos o nosso projeto, e alguns desses serviços são: o Github, Gitlab e o Bitbucket. São os 3 bastante conhecidos, e claro que eu uso e abuso bastante do Github.

Com isto, acho bastante importante sabermos usar e aprender sobre Git, e tentar seguir algumas convenções de organização, que me falhou na altura, onde tenho vindo a melhorar e aplicar.

Ok, sabemos as bases, como podemos criar repositórios (isto é, projetos) no github, deparei-me que existem vários package managers, mas os mais conhecidos são o npm e o yarn. Eu não vejo grandes diferenças entre os 2, mas ambos fazem bem o seu trabalho!

E os package managers são bastante importantes, porque vais usar sempre e para tudo, quando precisas de instalar novas libraries/frameworks no teu projeto. Antes de instalares, tem em atenção se o package atual não está já deprecated (significa que não existe muito mais evolução do package, por exemplo como passar 6 anos, em que não houve nenhuma pessoa a fazer novo código para o mesmo)

Então passamos a usar libraries ou até mesmo frameworks. A minha 1ª recomendação é mesmo usar o HTML5 boilerplate. Esta library é open-source (aos anos que não uso! Portanto não sei a 100% o que já mudaram, portanto partilho apenas o básico) porque já tem toda uma estrutura feita, e já tem as bases prontas para qualquer projeto. Para além disso, tem suporte para grande parte dos browsers (Chrome, Edge, Safari, Firefox, etc etc). A library ainda traz documentação para saberes o que faz cada ficheiro.

Depois disto tudo, lembro-me que queria ser mais eficiente e que queria melhorar mais o meu CSS (porque... cores, alinhamentos e fazer formas geométricas é fixe, tá? Isto é ironia!) o meu next step foi aprender pre-processors, como SASS, LESS, e SCSS, e o que são?
Explicado por alto, são outras ferramentas que permitem escrever menos código, ou seja ser mais eficiente, ter uma syntax mais "inteligente" de fazer CSS.
Um dos poderes dos pre-processors é podermos separar por camadas os nossos estilos, (como por exemplo, estilizar o header, e footer, teriamos 2 ficheiros separados e teriamos um outro ficheiro main que importava estes 2, mas isto é uma forma de organização, não é igual para todos nós!) adicionar funções, operações e mixins.

Uma das grandes frameworks de CSS e o que tem vindo a crescer bastante é o tailwindcss. É uma framework utility-first CSS, significa que tem milhares de classes, podemos através do Javascript criar ainda mais classes custom, e basta associarmos no nosso HTML. Conseguimos criar componentes HTML mais rapidamente, e sem necessidade de fazer realmente CSS. Esta framework é ligeiramente diferente das que posso vir a mencionar, porque esta é uma boa framework que podemos usar Javascript.
Tenho muito pouca experiência, ando a experimentar à alguns dias e tenho estado a gostar da experiência! Talvez faça um blog post sobre isto qualquer dia 😊

Outra framework CSS, que recomendo bastante e que tenho usado em vários projetos (usei para construir o meu blog/portfólio), é o bulma. Tem classes bastante simples e fáceis de perceber/decorar. A vantagem é que tem variáveis que podemos substituir por outros valores custom, que nos dá jeito para criar UI (User-Interface) simples e bonito.
Claro, que ambas as frameworks que escrevo, respeitam a regra de Mobile-First (muitas das vezes é dificil de aplicar 😜, mas respeitem sempre esta regra) e tem grid system! Um tópico para mais tarde também escrever 😃.

Atenção: isto são tudo escolhas pessoais, mas existem mais como bootstrap, MaterializeCSS entres muitos outros. Mas mudando de assunto, também deixo este link para poderes ler e atacar uma framework de CSS! 😃

E já expliquei um bom bocado! Isto é um tema grande de ser abordado, por isso, não percas o próximo episódio porque nós também não! (Dargonball Fan :D). Ou seja, amanhã temos 2ª parte.

Agradeço que partilhem feedback e se estão a gostar dos meus artigos ou não! Obrigado por terem lido até ao fim!