A Triforce do Front-end

#HTML
#JavaScript
#CSS

#DesafioDIO

Na busca por cursos e estudos em programação é muito comum encontrar bibliotecas e frameworks amplamente utilizados no mercado. O framework normalmente já possui abstrações para muitos problemas e estrutura já definida que proporcionam maior facilidade para aprendizado e até mesmo agilidade no desenvolvimento de uma solução, principalmente comparando se ela fosse implantada do zero, o que o deixa atraente tanto para os negócios como para quem busca entrar no mercado de trabalho. Na área de front-end, muitas ferramentas já vêm até com um Hello World pronto, é praticamente instalar e já é possível executar o projeto padrão e visualizar resultado em navegadores.

Por possuir uma estrutura pronta, o aprendizado focado somente em frameworks e bibliotecas pode desenvolver um conhecimento que se limita à barreira deles, então para explorar o potencial da área de desenvolvimento web, é importante conhecer a base: a Triforce do Front-end.

A Triforce do Front-end

Quando a Internet estava nascendo, Tim Berners-Lee forjou o HTML para organizar o caos, Hakon Lie plantou a sabedoria do CSS para dar beleza e Brendan Eich criou o JavaScript (JS) para trazer vida ao novo mundo, se tornando as 3 bases essenciais para desenvolvimento web. Juntos o HTML, CSS e JS formam a Triforce do Front-end.

Por ser a base do desenvolvimento Front-end, as três tecnologias devem ser estudadas para que o desenvolvedor possa adquirir domínio sobre a solução, não se limitando apenas ao consumo de frameworks e bibliotecas existentes, mas poder criar sua própria solução, contribuir com melhorias e correções para o que já está no mercado ou criar mais ferramentas que agilizam o desenvolvimento.

Agora vamos conhecer cada uma das triforces: A Triforce do HTML, Triforce do CSS e Triforce do JS.

A Triforce do HTML

O HTML é o acrônimo para HiperText Markup Language, que em Português é Linguagem de Marcação de Hipertexto, alguns podem confundir o HTML como uma linguagem de programação, mas não é, como o nome da tecnologia já diz, é uma linguagem de marcação, tendo como função básica a definição da estrutura do conteúdo, para isso o HTML faz uso de tags.

O HTML é a força que trouxe ordem ao caos para que os conteúdos pudessem ser organizados com padrões para que os navegadores pudessem reconhecer e proporcionar a experiência gráfica.

Uma tag representa um elemento do HTML que pode ter atributos para estender as configurações de uma tag. Em resumo, uma tag é uma definição de uma parte da estrutura e os atributos podem ser utilizados para formas, dimensões e classificações da estrutura.

Exemplo de um documento básico em HTML:

<!DOCTYPE html>
<html>
<head>
<meta name = "keywords" content = "Exemplo, Triforce, HTML" />
<meta name = "description" content = "Exemplo para desbloquear a Triforce do HTML" />
<meta name = "author" content = "Nome Autor" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Título da página</title>
</head>
<body>
<h1>Título da página</h1>
<p>Hello World</p>
</body>
</html>

Para uma experiência de HTML, copie o conteúdo do exemplo acima, utilizando o Bloco de Notas (Notepad), cole o conteúdo e salve em um arquivo com extensão .html e abra o arquivo em qualquer navegador, o resultado será parecido com o da imagem abaixo:

Em HTML, as tags são diversas, além da estrutura básica da página, tal como apresentada no exemplo acima, como as tags <html>, <head> e <body>, as tags também identificam parágrafos <p>, links <a>, imagens <img>, tabelas <table>, camadas <div> e muitos outros elementos que um documento HTML possui. Para conhecer mais do básico do HTML e seus elementos existem 2 sites com ótimo conteúdo gratuito e de grande referência: Estruturando a web com HTML | MDN (clique aqui para acessar) e W3Schools HTML Tutorial (clique aqui para acessar)

Para conseguir desbloquear a Triforce do HTML é preciso conhecer e seguir boas práticas, tais como:

Declare sempre um tipo de documento: no início utilize <!DOCTYPE html> para indicar que é um documento HTML5.
Utilize o atributo lang na tag <html>: Este atributo indica qual o idioma da página e pode auxiliar tradutores na tradução do documento, exemplo: <html lang=”pt-BR”>
Utilize tags semânticas: Evite a tag <div> para tudo, prefira utilizar tags semânticas e que tenham a devida representação do conteúdo: como, por exemplo, usar <header> para o cabeçalho ou introdução da página, <nav> para menu de navegação, <main> para conteúdo principal e <footer> para rodapés de páginas.
Criar com Search Engine Optimization (SEO) em mente: utilizar a tag <meta> com metadados descritos e significativos, assim mecanismos de buscas terá facilidade em indexar a página e poderá melhorar o ranking em resultados de buscas. Abaixo seguem tags metas normalmente utilizadas:

<meta name = "keywords" content = "Triforce, HTML" />
<meta name = "description" content = "Desbloquear a Triforce do HTML" />
<meta name = "author" content = "Luis Zancanela" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />

Utilizar o atributo alt em toda tag <img>: o atributo alt é importante para mecanismos de buscas e leitores de telas.

Além do Bloco de Notas (Notepad), um editor muito conhecido e utilizado para Front-end é o Visual Studio Code (VSCode), para uso com o HTML é interessante considerar as extensões:

Live Server
Auto Rename Tag
IntelliCode
Prettier - Code formatter
Beautify

A Triforce do CSS

O HTML proporcionou a estrutura, mas for percebido que era possível melhorar o visual e organizar o conteúdo com uma tecnologia diferente, foi aí que nasceu o Cascading Style Sheets (CSS), que traduzindo significa folha de estilos em camadas, que proporciona estilos, como cores, tamanhos, formas, bordas, margens, posição, dentre outros, que melhoram a qualidade visual do elemento HTML, e ainda com a possibilidade de se aproveitar e facilitar a replicação das configurações em mais elementos da página ou mesmo de várias páginas e, com a separação de controle, sendo o HTML para a estrutura e o CSS para os estilos, facilita também a manutenção.

O CSS é a força que trouxe mais cores, formas e beleza para a estrutura até então existente, o HTML, deixando a experiência de navegação na web mais agradável e atrativa.

A sintaxe básica do CSS é formada pelo seletor e declarações com propriedade e valor

Exemplo de um documento CSS:

h1 {
color: red;
font-size: 30px;
}
p {
color: blue;
font-size: 14px;
}

Para experimentar o CSS, copie o código do exemplo acima, abra um bloco de notas, cole o código e salve em um arquivo com extensão .css, por exemplo, “estilos.css”, na mesma pasta em que salvou o arquivo do exemplo de HTML, após isso, abra o arquivo .html que criou anteriormente e acrescente a seguinte linha dentro no conteúdo da tag <head>:

<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" />

Abaixo segue exemplo de como fica o código HTML após a inclusão da linha acima:

Quando abrir o seu arquivo .html no navegador o resultado será parecido com a imagem de exemplo abaixo:

Para conhecer mais do básico do CSS e seus elementos existem 2 sites com ótimo conteúdo gratuito e de grande referência: Aprenda a estilizar HTML utilizando CSS - Aprendendo desenvolvimento web | MDN (clique aqui para acessar) e W3Schools - CSS Tutorial (clique aqui para acessar)

Para desbloquear o potencial do CSS é importante conhecer e aprender sobre:

O pré-processador “Syntactically Awesome Style Sheets” (Sass), que traduzindo pode ser entendido como folhas de estilo com uma sintaxe incrível, que auxilia a criação de documentos CSS de forma mais organizada e dinâmica, e
Sobre design systems e abstrações de CSS como Bootstrap e Tailwind que proporcionam configurações e padrões para configurações de estilos de forma profissional.

O editor VSCode já possui efeitos da extensão Raibow Brackets embutidos, melhorando a sinalização de sinais de chaves, colchetes e parênteses, mas para ajudar ainda mais na edição de arquivos, além das extensões já citadas para HTML em que muitas já atendem o CSS, é importante considerar também a extensão:

Color Highlight

A Triforce do JS

Com HTML e CSS já é possível construir páginas com visuais atraentes e modernos, mas com conteúdo estático, eis então que surgiu o JavaScript (JS), a força que trouxe dinamismo e interação para as páginas da Internet, se tornando a terceira tecnologia para o desenvolvimento web dominar.

O JS já é uma Linguagem de Programação, com características de ser uma linguagem interpretada, assim o código já é pronto para execução, sem a necessidade de compilação, e de ser client-side, com o código carregado no navegador.

O problema de ser client-side é que o código fica acessível ao usuário, expondo regras de negócio ou credenciais que porventura fossem utilizadas, então o JS era mais utilizado na manipulação de elementos do HTML e CSS e informações públicas, mas com o lançamento do Node.js, passou a existir também a possibilidade de executar JS em server-side, ou seja, agora o código fonte é carregado e executado em um servidor que libera para quem acessa a aplicação somente a parte necessária para que a interface de utilização possa estar acessível pelo navegador. Esta mudança que o Node.js proporcionou ampliou as possibilidades de uso do JS, promovendo espaço para ser utilizado em aplicações back-end, como também potencializou a criação e popularidade de frameworks e bibliotecas para o front-end, tais como Angular, React entre outros.

A sintaxe de JS é formada basicamente por valores, expressões e palavras-chaves (keywords), sendo que:

Valores podem ser literais ou variáveis
Valor literal normalmente são números e textos (strings) que são fixos, como um número (10) ou uma string (“Meu nome”)
Valor variável normalmente é representado por uma incógnita (x, nome, etc) e podem ter diversos tipos de valores, como números e strings, até mesmo um objeto, além de que o valor da variável pode ser modificado. Normalmente uma variável é declarada com as palavras-chaves var, let ou const.
Expressões são a combinação de valores e operadores, os tipos mais comuns de operadores são:
Aritiméticos, para calcular valores, como soma, multiplicação, divisão etc.
Atribuição, para atribuir valores às variáveis.
Comparadores e Lógicos que checam a relação de valores e variáveis, se são, por exemplo, iguais, maiores ou menores ou diferentes, dentre outras possibilidades.
As palavras-chaves (keywords) são palavras reservadas utilizadas pelo JS para declarações ou operações, as mais comuns são as keywords para declaração de variáveis e funções (function)

Exemplo de código JS:

const paragrafo = document.querySelector('p');
function atualizarTexto() {
var novoTexto = prompt('Insira um novo texto para alterar o Hello World');
paragrafo.textContent = novoTexto;
}
paragrafo.addEventListener('click', atualizarTexto);

Para experimentar o JS, copie o código do exemplo acima, abra um Bloco de Notas (Notepad), cole o código e salve em um arquivo com extensão .js, por exemplo, “script.js”, na mesma pasta em que salvou o arquivo do exemplo de HTML, após isso, abra o arquivo .html que criou anteriormente e acrescente a seguinte linha dentro no conteúdo da tag <body>:

<script src="script.js"></script>

Abaixo segue exemplo de como fica o código HTML após a inclusão da linha acima:

Quando abrir o seu arquivo .html no navegador clique no texto “Hello World”, então verá uma caixa solicitando novo texto, semelhante ao da imagem abaixo:

Depois de digitar o novo texto, a página ficará parecida com a imagem abaixo:

Com isso deve ter percebido que o código de exemplo faz manipulação do texto utilizando o clique no texto (elemento <p> no HTML) como evento para executar a função que solicita novo texto e faz a alteração dele.

Assim como para o HTML e CSS, seguem os links para 2 grandes referências públicas e gratuitas para o JS: JavaScript - Aprendendo desenvolvimento web | MDN (mozilla.org) e JavaScript Tutorial (w3schools.com)

Para desbloquear o potencial do JS, seguem as boas práticas:

Nas comparações prefira utilizar o "===" no lugar de "==", o JS possui tipagem fraca e o "==" considera o número 1 igual a string “1”, pode até parecer interessante, mas como os tipos são diferentes pode ser que ocorram erros no projeto, já com o operador === existe a restrição de tipo na comparação o que evita problemas na sequência lógica.
Prefira o const para constantes e let para variáveis na declaração das variáveis, lembrando que as definições são por escopo, ou seja, se você declara uma variável com const ou let dentro de, por exemplo, uma função, a variável só existe na referida função, o mesmo acontece se declarar dentro de um if ou for, a variável só irá existir dentro do respectivo bloco. Evite ao máximo variáveis de escopo global, por estarem acessíveis em qualquer parte do código, podem ocorrer transformações ou resultados indesejados, dê preferência para declarar variáveis no escopo em que são necessárias.
Declare as funções antes de elas serem chamadas, isso pode evitar problemas de execução, se, por exemplo, ao carregar a página uma função é chamada antes de estar declarada, o JS vai considerar que a função ainda está indefinida, o famoso tipo undefined que existe na linguagem, e poderá gerar resultados inesperados.
Cuidado ao utilizar o this, este é um termo muito utilizado para referenciar objeto, mas o this tem efeito de escopo e pode não funcionar corretamente dependendo de onde é usado. Prefira sempre utilizar variáveis para referenciar this e objetos em geral para facilitar a referenciação e manipulação dele.
Conheça padrões de projeto (design patterns), normalmente os padrões podem ajudar a organizar a lógica e o código para que a regra de negócio a ser aplicada funcione adequadamente e reflita boas práticas de programação.
Use a abuse das ferramentas de desenvolvedor dos navegadores, normalmente acessível pela tecla F12, é possível fazer inspeção de estrutura e código.
Usar o console.log() para registrar mensagens no Console parece ser legal, mas utilizar este recurso indiscriminadamente pode carregar o código ou aplicação desnecessariamente. Existem recursos de debugs e logs, além das extensões, que podem ajudar a localizar problemas e registrar o que é essencial.

No editor VSCode, além das extensões já sugeridas em HTML e CSS, é interessante também considerar:

ESLint
JavaScript (ES6) Code snippets

A Jornada só está começando...

Agora já conhece a Triforce do Front-end, mas para dominá-la não é fácil, normalmente leva tempo e muita prática, infelizmente não existe ocarina do tempo ou uma arma definitiva, temos que estudar muito e estar sempre praticando.

Se aproveitou e salvou os exemplos já deve ter percebido que são tecnologias simples para se criar, não exige praticamente nada de especial, apenas o Bloco de Notas (Notepad) e um Navegador de Internet (Browser), mas para conseguir criar até mesmo uma simples página com visual moderno deve ter percebido que existe muito o que aprender e explorar de cada tecnologia.

Conheça a base, se atualize e desfrute de ferramentas como VSCode e suas extensões e dos Frameworks e Bibliotecas.

Bora se aventurar no mundo do Front-end.