You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Conhecer a importancia de manter a estrutura do documento com semantica (sentido) por fatores como SEO e acessibilidade.
Conhecer quais são as principais tags que existem e quando usá-las
Conhecer quais atributos podem ser usados em determinadas tags e seus valores padrão
✏️ Como práticar: Busque por sites e observe visualmente como ele está organizado. Pegue papel e caneta e desenhe essa estrutura juntando esses bloquinhos. Defina quais seriam as tags que dariam sentido ao que representam. Ex: para dar sentido a um titulo, podemos usar uma tag de titulo como h1. Depois, inspecione o site e veja como foi realmente organizado. Compare os resultados.
CSS
Conhecer e entender quais as propriedades são compativeis com diversos tipos de browsers.
Saber como acessar elementos html com os diferentes tipos de seletores.
Saber a diferença entre seletores e qual a diferença em termos de performance ao usá-los para capiturar um elemento e aplicar as propriedades css.
Entender sobre o porque evitar o uso do !important
Dica: O sentimento sobre o css de que ele "é mágica" ou "não te obedece" são sinais que mostram que precisamos entender mais a fundo sobre o que as propriedades fazem.
Ser capaz de construir elementos geometricos básicos como circulos, retangulos, quadrados, triangulos, etc
Ser capaz de construir elementos de design básicos como botões, cabeçalhos, rodapés, modais, listas, formulários, etc.
DevTools
Saber a importancia dessa ferramenta para o desenvolvimento frontend;
Ser capaz de abrir a ferramenta;
Inspector
Entender as principais divisões da barra Inspector;
Ser capaz de encontrar o código html respectivo aos elementos apresentados na tela;
Entender o que é o box model e como interpretá-lo;
Ser capaz de encontrar as propriedades css do respectivo elemento selecionado; Neste ponto, vale tanto as propriedades que estão sendo aplicadas como aquelas que foram sobrescritas;
Ser capaz de gerenciar as propriedades (adicionar, remover, alterar);
Ser capaz de gerenciar a visão de dispositivo. Ex: Iphone4, IphoneX, colocar em landscape, etc;
Ser capaz de simular eventos de pseudo elementos como hover, actived, visited, etc e observar as mudanças.
Lighthouse
Entender o que significa;
Ser capaz de gerar uma auditoria/report;
Ser capaz de identificar o que a auditoria está apontando como pontos de melhoria e quais aqueles que já estão sendo atendidos;
Ser capaz de encontrar o material de referencia para cada um dos pontos de melhoria.
Application
Entender o que significa;
Ser capaz de encontrar dados referentes aos cookies, local storage e session storage;
Ser capaz de limpar todos os dados citados acima;
Console
Network
Performance
Ser capaz de gerar um report a partir do lighthouse;
Frontend é uma área bastante ampla que vai muito além construir o layout proposto pelo designer. É necessário que site tenha
boa usabilidade, acessibilidade, performance, que seja responsivo, se comunique com o backend, etc.
Não podemos esquecer que o usuário sempre vai considerar primeiro o que ele está vendo na tela, e muitas vezes, é o que ele
vai considerar como "entrega de valor".
❤️ lighthouse
O Lighthouse é uma das funcionalidades do dev tools, originalmente criada para ser usada no navegador Chrome. Com ela é possível realizar métricas de performance, acessibilidade, SEO, etc.
O ideal é que a metrica seja realizada em aba anonima, assim os dados de armazenamento local e o cache não vão interferir no carregamento da página.
❤️ Design thinking
Em um primeiro momento, pode parecer que, por mais que o design thinking seja um processo feito pelo UX/UI e PO/PM, não seja importante para o dev.
Porém, já aconteceram situações em que tive que participar um pouco desse processo e conversar com o PO sobre o que eu achava sobre o que foi proposto por ele e se, houvesse algum tipo de empecilho técnico, de dar outras sugestões para que, de um jeito ou de outro, o problema do usuário fosse resolvido.
❤️ Construção dos elementos básicos de design (menu, listas, cards, modais, carrossel, botões, loaders formas geométricas como circulo, quadrado, triângulo, retângulo, etc)
❤️ Pré-processadores como sass e less
O sass e o less não mudam completamente a forma do css, ou seja, ao utilizá-los, não precisamos nos preocupar em pensar que estamos de fato aprendendo uma linguagem nova. A diferença é que eles adicionam lógica ao css, permitindo a utilização de variáveis, loops e que possamos acessar elementos um dentro do outro por exemplo, facilitando o desenvolvimento.
❤️ Uso de dados moveis
Quanto mais fazemos requests de recursos externos como bater em uma API, carregar uma imagem com alta resolução, fonte family, etc, mais banda de internet o usuário precisará usar, fazendo com o que 3G do coitado acabe logo. Ou seja, se o publico alvo do cliente são usuários que acessarão muito mais via celular, é importante levar isso em consideração durante o desenvolvimento.
❤️ Uso da ferramenta dev tools para inspeção de elementos, monitoramento das requests, métricas do lighthouse, armazenamento local, debug de javascript, entre outros.
❤️ Comunicação com o design e PO
Em algum momento da nossa carreira como devs vamos olhar para o que foi proposto pelo time de UX e pensar: "Será que estão loucos? Isso não é fácil de fazer ... ou, simplesmente não dá para fazer como estão dizendo".
E é nesse momento que a skill Saber se comunicar com o time de UX/UI e PO é necessária, porque a menos que esse time já tenha muita vivencia com desenvolvimento, eles vão realmente acreditar que "tudo é possível".
Precisamos usar uma linguagem "não técnica" para explicar se determinada funcionalidade é viável. As vezes vamos precisar dar uma média de tempo para que ela seja desenvolvida. E se não foi possível, é muito bacana que a gente consiga dar alternativas e explicar do porque não pode ser feito.
Pode parecer simples, mas vai por mim, não é.
Além disso, devemos lembrar que estamos trabalhando para dar vida ao trabalho que o UX/UI fez, que com certeza também não foi só montar as telas no Figma.
❤️ Mobile First
Significa não só começar o desenvolvimento do layout pela versão mobile e depois ir adaptando para as versões tablet e desktop, mas considerar que, apesar da CPU (processamento) em dispositivos mobile ser menor, que seja possível acessar todas as funcionalidades por ele.
Ao garantir que tudo funcione no mobile, apesar da CPU e dados moveis serem menores, é muito mais fácil que funcione no desktop.
❤️ Armazenamento local (cookies, local storage, cache, etc)
O armazenamento local é muito útil para "salvar" pequenos dados referente a ações que o usuário tenha que fazer apenas uma vez como dar "ok" em um modal, concordar com as políticas do site, etc, além de tokens de sessão.
Os principais fatores que vejo impactar nas aplicações são o uso massivo de javascript, carregamento de fontes e imagens, integrações e plugins, além de requests muito demoradas e sem necessidade de serem processadas no momento em que a página é carregada.
❤️ Semântica no HTML
Em teoria, podemos abrir um bloco de notas, digitar qualquer texto, salvar como .html e abrir no navegador e ter o resultado na tela, mas um bom código deve ser organizado e fazer sentido.
E essa é a principal função do HTML: dar sentido ao conteúdo que será mostrado na tela. Ou seja, apenas lendo o código devemos saber o que é um titulo, um paragrafo, uma imagem, um menu, etc.
Por isso, é importante que o HTML seja o mais semântico possível. Hoje em dia os conteúdos dos sites são tão padronizados que é bem difícil não ter uma tag especifica para o tipo de conteúdo que queremos trazer.
❤️ Normalize css ou reset css
Por mais que voce não tenha escrito nenhum css no projeto, os browsers já trazem os seus próprios estilos default associados a cada uma das tags HTML. Pode ser um display, margin, font-size, mas eles já vem pré-definidos e podem mudar de acordo com o tipo de browser.
Quando eu estava começando, desenvolvia o layout em um browser como o Crhome e quando abria no Firefox ... surprise! Estava diferente.
Para amenizar esse problema, usa-se o normalize ou reset no css para "limpar" essas propriedades default e conseguir garantir um layout mais padronizado entre browsers.
❤️ Compatibilidade entre browsers
Um dos desafios com o desenvolvimento frontend é que algumas coisas são diferentes entre browsers, como as propriedades css por exemplo. Propriedades mais novas podem não funcionar em browsers mais antigos, por isso, é sempre bom dar uma verificada na documentação ou no site Can I Use para não ter surpresas.
❤️ Acessibilidade
Acessibilidade é um ponto importante que surge quando estamos desenvolvendo o frontend. Um site acessível significa que ele pode ser usado por pessoas que tem problemas de visão, audição, que tenha dificultardes motoras, etc, ou seja, temos que pensar na usabilidade usando apenas o teclado, no contraste e tamanho das cores e considerando o HTML semântico para que os softwares de leitura consigam "ler" a página.
Cursos:
A plataforma Origamid trás muitos cursos voltados para o frontend e design. Para quem está iniciando, daria enfase aos cursos HTML e CSS para iniciantes, Javascript. Como voce já está em um projeto com React, é uma boa fazer dele também React
Conteúdo/Materiais de auxilio:Frontend RoadmapMozilla
Apesar da comunidade dizer que o conteúdo do Mozila é melhor, mais atualizado, etc, pessoalmente adoro o w3schools também, porque ele é super organizado, é possível fazer o login e seguir trilhas de estudos com provinhas de conceito, eles mostram os exemplos na tela (try it yourself)
Conhecer a importancia de manter a estrutura do documento com semantica (sentido) por fatores como SEO e acessibilidade.
