eFront+Plus+ (v2 0)

Licensed to Janderson Pestana Almeida - jandersonpestana@gmail.
com - HP2106010193
por Iuri Silva Versão 2.0

Licensed to Janderson Pestana Almeida - jandersonpestana@gmail.com - HP2106010193
Sinopse
A importância de utilizar as tecnologias mais utilizadas no mercado

frontend é indiscutível. O setor de desenvolvimento web está em
constante evolução, e ficar atualizado com as ferramentas e tecnologias
mais populares é essencial para se destacar e oferecer soluções de
qualidade aos clientes e usuários. No entanto, além de dominar as
linguagens de programação e frameworks mais populares, é igualmente
importante ter conhecimento em uma série de outros temas que
complementam e aprimoram o trabalho de um desenvolvedor frontend.
Dominar os temas complementares pode ajudar a aprimorar a qualidade

do trabalho, tornar-se um profissional mais completo e estar preparado
para enfrentar os desafios e demandas das empresas.
@iuricode 1
Sumário
Otimização de desempenho
Lighthouse ............................................................................................................... 6
Dicas de performance .......................................................................................... 11
Acessibilidade na web
WCAG ...................................................................................................................... 19
Pessoas com deficiência visual ...................................................................... 26
Pessoas com dislexia .......................................................................................... 28
Dicas para tornar seu site mais acessível ..................................................... 31
Deploy
Deploy na Vercel .................................................................................................. 41
Deploy na HostGator .......................................................................................... 45
GitHub Pages ........................................................................................................ 49
@iuricode 2
Sumário
Clean Code
Variáveis ................................................................................................................. 54
Funções ................................................................................................................. 55
Testes ...................................................................................................................... 57
Manipulação de erros ......................................................................................... 59
Formatação ........................................................................................................... 61
Comentários .......................................................................................................... 63
Figma
Do Figma ao código ........................................................................................... 66
Figma for VS Code .............................................................................................. 74
ChatGPT
Dicas ....................................................................................................................... 78
@iuricode 3
Sumário
Git e GitHub
Instalando o Git .................................................................................................... 90
Comandos básicos do Git ................................................................................. 94
GitHub ...................................................................................................................... 99
Contribuindo ........................................................................................................ 106
Freela
Como conseguir o primeiro freela .................................................................. 113
Tirando dúvidas ................................................................................................... 117
@iuricode 4
Módulo: Otimização de performance
Introdução
Neste módulo, abordaremos algumas dicas de como melhorar a

performance dos seus projetos. A performance no frontend é importante
por vários motivos, mas o mais importante deles é a experiência de
usuário. Otimizar a performance no frontend pode, portanto, ajudar a
melhorar a visibilidade e o tráfego do site, pois os mecanismos de busca
tendem a priorizar sites que carregam rapidamente.
O que é
Performance no frontend refere-se ao desempenho da interface de

usuário de um site ou aplicativo web. Isso inclui coisas como velocidade
de carregamento de página, tempo de resposta a interações do usuário e
uso de recursos do dispositivo, como CPU e memória. A performance do
frontend é importante porque afeta diretamente a experiência do usuário
e pode afetar a taxa de rejeição e conversão. Um site ou aplicativo com
uma boa performance no frontend é mais provável de ser usado e
recomendado por usuários.
@iuricode
Lighthouse
O Lighthouse é uma ferramenta automatizada de código aberto que
aprimora a qualidade dos apps da Web.
O Lighthouse simula diversas situações que podem afetar a experiência
do usuário. Ele executa uma série de testes que verificam os parâmetros
de cada página. Além disso, existem mais de 75 métricas testadas.
Confira as mais importantes a seguir
Desempenho: tempo para interativo, latência, índice de velocidade,
otimização de recursos, tempo de execução de scripts, tamanho do
DOM, entre outros
SEO: Mobile friendly, meta, rastreamento, estrutura, entre outros
Melhores práticas: Otimização de imagem, bibliotecas JS, registro de
erros do navegador, acesso via HTTPS, vulnerabilidades conhecidas
do JS, entre outros
Acessibilidade: Elementos da página, idioma, atributos ARIA, entre
outros.
@iuricode 6
PWA (Progressive Web Application): redireciona HTTP para HTTPS,

código de resposta, carregamento rápido em 3G, tela inicial, viewport,
entre outros.
Como utilizar
Se você utiliza o Google Chrome você pode usar o Lighthouse de dentro

do DevTools (irei fazer isso), mas caso utilize outro navegador basta
procurar a extensão do Lighthouse.
Basta entrar no site que você deseja ver as métricas testadas, clicar com
o botão direito do mouse em qualquer lugar da página e selecione
“Inspecionar”. Se você estiver usando o Google Chrome basta dar um
“Ctrl + Shift + i”.
@iuricode 7
Esse recurso abrirá um painel na parte inferior ou à direita da página.
Selecione o Lighthouse na barra de ferramentas. (Se você não encontrar
a opção, clique nas duas setas no final da barra de ferramentas).
O painel abrirá a ferramenta Lighthouse. Nesta aba você pode selecionar
as métricas que quer observar no relatório. Após escolher as métricas
basta clicar em “Analisar carregamento de página”.
@iuricode 8
A sua página pode ter alterações de aparência durante a auditoria, então

não se assuste.
Na imagem abaixo temos o relatório gerado para o teste.
Usando a barra de rolagem, você pode ver com mais detalhes os motivos
da pontuação em cada categoria bem como alguns comentários da
ferramenta.
Nos resultados de acessibilidade podemos ver métricas que podemos

fazer para melhorar nossa pontuação de 81.
@iuricode 9
Nos resultados de acessibilidade podemos que alguns dos feebacks que

recebo é que as cores que estamos usando não contém um contraste
bom o suficiente para tornar nossa aplicação acessível.
Bem, basicamente essa é uma forma de melhores performance,

acessibilidade, SEO e entre outras coisas em nossa aplicação.
O LightHouse é uma ferramenta simples de usar e que ajudar muito o

programador a encontrar problemas na sua aplicação. Uma vez sabendo
que estes problemas existem correções podem ser aplicadas, deixando a
sua aplicação cada vez melhor.
@iuricode 10
Dicas de performance
Otimização de imagens
Conseguir uma apresentação visual de alta qualidade em um site pode
resultar em tempos de carregamento mais lentos, já que imagens
pesadas são uma das principais causas desse problema. No entanto, ao
optarmos por imagens mais leves para acelerar o carregamento,
corremos o risco de comprometer a qualidade visual.
A chave está em encontrar um equilíbrio entre a qualidade das imagens e
o tempo de carregamento. Priorizar este equilíbrio é fundamental para
oferecer uma experiência satisfatória ao usuário.
Ferramentas como TinyPNG ou Compressor.io são excelentes recursos
para reduzir o tamanho das imagens sem comprometer drasticamente a
qualidade. Elas ajudam a otimizar o desempenho do site, mantendo uma
boa qualidade visual.
Assim, a estratégia ideal envolve a utilização dessas ferramentas para
comprimir as imagens, garantindo um carregamento mais rápido sem
sacrificar demais a qualidade. Isso resultará em uma experiência mais
ágil e agradável para os visitantes do seu site.
@iuricode 11
Lazy Loading
Lazy loading é uma técnica que atrasa o carregamento de imagens e

outros recursos até que estejam prestes a entrar na área visível do
usuário, conhecida como viewport. Essa abordagem inteligente pode
economizar largura de banda e melhorar significativamente os tempos
de carregamento, tornando a experiência do usuário mais ágil e eficiente.
É crucial ressaltar que a implementação de cada estratégia mencionada

requer cuidado e testes adequados para garantir que não afetem
negativamente a funcionalidade ou a experiência do usuário no site.
Quando aplicadas de forma eficiente, essas estratégias não apenas
melhoram o desempenho do site, mas também contribuem para uma
navegação mais rápida e agradável, fundamental para reter usuários e
converter visitantes em clientes.
A otimização inteligente do carregamento de recursos, juntamente com a

qualidade do conteúdo, não apenas destaca o desempenho do site, mas
também estabelece uma base sólida para uma experiência de
navegação superior, favorecendo a retenção de usuários e
impulsionando a conversão de visitantes em clientes satisfeitos.
@iuricode 12
Minificar arquivos
A minificação é um processo essencial que elimina todos os elementos
desnecessários de um arquivo, como espaços em branco, quebras de
linha e comentários, sem comprometer a funcionalidade do código. Essa
prática é fundamental para otimizar a velocidade do seu site. Por outro
lado, a compressão de arquivos reduz o tamanho dos mesmos,
compactando-os. Quando um usuário visita o site, o navegador
descompacta o arquivo para exibi-lo. Dois dos métodos mais comuns
para a compressão de arquivos web são Gzip e Brotli.
Ao minificar o código, a remoção de elementos como espaços em branco

e comentários não afeta a operação do site, mas contribui
significativamente para reduzir o tempo de carregamento. Por sua vez, a
compressão, seja por Gzip ou Brotli, reduz o tamanho dos arquivos,
permitindo um carregamento mais rápido e eficiente para os visitantes
do site.
A combinação dessas práticas, a minificação para eliminar elementos

desnecessários e a compressão para reduzir o tamanho dos arquivos, é
fundamental para otimizar o desempenho do site, proporcionando uma
experiência mais ágil e satisfatória para os usuários.
@iuricode 13
CDN
Um CDN, ou Content Delivery Network (Rede de Distribuição de

Conteúdo), é uma rede de servidores distribuídos geograficamente que
trabalham juntos para fornecer conteúdo da internet de forma mais
eficiente. Ele melhora a performance de um site de várias maneiras
Redução da latência: Ao armazenar cópias do conteúdo do site em

vários servidores ao redor do mundo, o CDN permite que os usuários
acessem dados a partir de servidores mais próximos
geograficamente. Isso diminui o tempo de resposta (latência) e
acelera o carregamento das páginas
Otimização de conteúdo: Além de simplesmente armazenar e

entregar conteúdo, os CDNs podem realizar otimizações, como
compressão de arquivos, minificação de códigos e outras técnicas
para reduzir o tamanho dos arquivos e, consequentemente, melhorar
a velocidade de carregamento.
@iuricode 14
Use cache
O armazenamento em cache é uma estratégia poderosa que
temporariamente guarda arquivos no dispositivo do usuário. Esses
arquivos são acessados de forma mais rápida na próxima vez que a
aplicação é carregada, contribuindo significativamente para a redução do
tempo de carregamento e aprimorando a experiência do usuário. Quando
uma aplicação contém uma grande quantidade de imagens, é altamente
recomendável utilizar o cache para armazená-las temporariamente no
dispositivo do usuário. Essa prática garante um carregamento mais ágil
das imagens quando o usuário acessar a aplicação novamente. Nossa
meta é aprimorar a velocidade e a eficiência, o que se reflete diretamente
na satisfação do usuário!
@iuricode 15
Outros
Minimização de consultas ao banco de dados
Evite consultas excessivas ao banco de dados. Opte por consultas

eficientes e utilize caches para resultados frequentemente
acessados.
Hospedagem confiável
Escolha um provedor de hospedagem de qualidade com recursos

escaláveis para lidar com o tráfego e garantir a disponibilidade
constante do site.
Evitar redimensionar imagen
Utilize os atributos width e height da tag <img> para evitar redesenho

desnecessário durante a renderização. No entanto, não use esses
atributos para reduzir o tamanho das imagens. Por exemplo, se deseja
exibir uma imagem em um espaço de 100x100px, carregue uma
imagem do tamanho apropriado em vez de carregar uma imagem
maior e redimensioná-la via HTML.
@iuricode 16
Evitar utilizar a diretiva @import para carregar arquivos CS
Existem duas maneiras de carregar arquivos CSS externos em uma

página: através da tag <link> ou utilizando a diretiva CSS @import. A
vantagem de usar a tag <link> é que, ao contrário do método da
diretiva, os arquivos inseridos via <link> podem ser baixados em
paralelo pelos navegadores.
Evitar buscar elementos do DOM desnecessariament
Apesar de os navegadores atuais serem bastante otimizados, a

busca por elementos do DOM é uma operação mais custosa.
Portanto, é sempre recomendável evitar manipular elementos do
DOM desnecessariamente.
@iuricode 17
Módulo: Acessibilidade na web
Introdução
Neste módulo, abordaremos um assunto muito importante:

acessibilidade. No entanto, iremos além da acessibilidade com a qual
estamos acostumados, como a utilização do atributo alt na tag img do
HTML. Embora isso seja sim importante, não é suficiente para tornar
nosso projeto acessível a todas as pessoas.
O que é
“Tá, mas o que é acessibilidade em geral?”
Acessibilidade refere-se à prática de tornar produtos, serviços, ambientes

e informações acessíveis e utilizáveis por todas as pessoas,
independentemente de suas habilidades ou limitações. O objetivo da
acessibilidade é garantir que todos, incluindo pessoas com deficiência
física, sensorial, cognitiva ou outras condições, possam perceber,
compreender, interagir e se beneficiar plenamente do que está sendo
oferecido.
@iuricode 18
“E como funciona a aplicação da acessibilidade na web?”
A acessibilidade na web envolve a aplicação de diretrizes e padrões

técnicos, como as diretrizes de acessibilidade para conteúdo da web
(WCAG - Web Content Accessibility Guidelines), estabelecidas pelo
World Wide Web Consortium (W3C). Essas diretrizes (que já iremos
abordar) fornecem orientações detalhadas para tornar o conteúdo online
mais acessível.
W3C
O World Wide Web Consortium (W3C) é uma organização internacional

que desenvolve padrões e diretrizes para a World Wide Web. Foi fundado
em 1994 por Tim Berners-Lee, o inventor da Web, com o objetivo de
promover a interoperabilidade e o crescimento contínuo da Web.
O W3C trabalha para desenvolver e manter especificações técnicas

abertas e de consenso que garantam a acessibilidade, usabilidade e
interoperabilidade da Web. Essas especificações incluem linguagens de
marcação (como HTML e XML), protocolos de comunicação (como
HTTP) e APIs (Interfaces de Programação de Aplicativos) para diversos
recursos da Web, como áudio, vídeo, gráficos, entre outros.
@iuricode 19
Em resumo, o W3C é uma organização que trabalha para padronizar e
melhorar a Web, garantindo sua acessibilidade, usabilidade e
interoperabilidade em benefício de todos os usuários.
“Ok, Iuri, mas quais são as tais diretrizes?”
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG - Web
Content Accessibility Guidelines) são um conjunto de diretrizes e
recomendações desenvolvidas pelo World Wide Web Consortium
(W3C) para tornar o conteúdo da web mais acessível para pessoas com
deficiências. Essas diretrizes estabelecem critérios técnicos e práticas
recomendadas para criar conteúdo web que seja percebível, operável,
compreensível e robusto para todos os usuários, incluindo aqueles com
deficiências visuais, auditivas, motoras, cognitivas e de outras naturezas.
A versão mais recente das WCAG é a WCAG 2.1, publicada em junho de
2018. Essas diretrizes são baseadas em princípios fundamentais de
acessibilidade, que são
Perceptível – toda a informação e interface deve ser legível e
percebida por todos;
@iuricode 20
Operável – a navegação e o acesso a todas as funcionalidades deve
ser garantida, independentemente do perfil do utilizador e dos
dispositivos de navegação que utiliza
Compreensível – toda a informação deve ser compreendida por todos
e prever tolerância ao erro
Robusto – deve garantir a interoperabilidade entre sistemas e
compatibilidade tecnológica.
As WCAG são organizadas em três níveis de conformidade: A (o mais
básico), AA (intermediário) e AAA (o mais alto). O nível AA é amplamente
aceito como o padrão mínimo de acessibilidade para a maioria dos sites
e aplicações.
Vamos ver agora os três critérios que cada diretrizes recomenda.
Perceptível
1.3.5 - Identificar o objetivo de entrada [AA]
As pessoas devem ter clareza do que devem preencher em campos de
formulários.
@iuricode 21
Dica: em um campo que solicita o preenchimento do e-mail, deve ser

claro qual e-mail deve ser preenchido (pessoal? comercial? etc).
1.3.4 - Orientação [AA]
Nenhuma funcionalidade deve depender de uma determinada

orientação de tela (exemplo: virar o celular na horizontal), a não ser que
seja imprescindível para execução da função.
1.4.4 - Redimensionar texto [AA]
Ao se aplicar zoom de até 200% na tela, deve ocorrer a responsividade

dos textos apresentados de forma que sua leitura e legibilidade
continuem adequados sem qualquer quebra na apresentação das
informações.
Operável
2.1.3 - Teclado (sem exceção) [AAA]
Todas as funcionalidades devem ser acionadas via teclado, sem exceção.
@iuricode 22
2.2.5 - Nova autenticação [AAA]
Quando uma seção autenticada expira, qualquer pessoa logada deve ser
capaz de continuar sua atividade, sem qualquer perda de dados, ao
efetuar uma nova autenticação no ambiente.
2.4.5 - Várias formas [AA]
As pessoas sempre deverão ter mais do que uma opção para encontrar
um determinado conteúdo.
Exemplo: um mesmo conteúdo pode ser acessado por um menu de

navegação ou também através de um campo de busca.
Compreensível
3.2.5 - Alteração a pedido [AAA]
Qualquer mudança de contexto que possa desorientar as pessoas,

deve ocorrer apenas quando solicitada pela pessoa que está utilizando
(exemplo: um botão para confirmar uma ação).
@iuricode 23
3.3.3 - Sugestão de erro [AA]
Sempre que uma mensagem de erro for exibida, ela deve também dar
dicas de como resolver o erro (não basta apenas indicar que ocorreu
um erro).
3.3.6 - Prevenção de erro (todos) [AAA]
Deve ser fornecida uma forma de confirmação de dados ou a

possibilidade de cancelamento do envio, sempre que campos de
formulários exigirem o preenchimento de dados (qualquer tipo de
dado).
Robusto
4.1.2 - Nome, função, valor [A]
Toda tecnologia assistiva faz uso das propriedades de nome, função e

valor para identificar adequadamente os elementos padronizados do
HTML. Qualquer componente customizado deve trazer também essas
marcações de forma adequada.
@iuricode 24
3.3.3 - Sugestão de erro [AA]
Sempre que uma mensagem de erro for exibida, ela deve também dar
dicas de como resolver o erro (não basta apenas indicar que ocorreu
um erro).
3.3.6 - Prevenção de erro (todos) [AAA]
Deve ser fornecida uma forma de confirmação de dados ou a

possibilidade de cancelamento do envio, sempre que campos de
formulários exigirem o preenchimento de dados (qualquer tipo de
dado).
Robusto
4.1.2 - Nome, função, valor [A]
Toda tecnologia assistiva faz uso das propriedades de nome, função e

valor para identificar adequadamente os elementos padronizados do
HTML. Qualquer componente customizado deve trazer também essas
marcações de forma adequada.
@iuricode 25
Pessoas com deficiência visual

Pessoas com deficiência visual são aquelas que têm algum tipo de
comprometimento na capacidade de enxergar ou processar informações
visuais. Essas deficiências podem variar em termos de gravidade e
causas.
As pessoas com deficiência visual podem enfrentar desafios

significativos no dia a dia, ler textos impressos, realizar tarefas visuais e
navegar na web.
Evite informações apenas com cores
Como vermelho para erro e verde para sucesso. Daltônicos (dependendo

do tipo e do grau de daltonismo) enxergam as duas cores muito
parecidas. Utilize ícones e/ou texto, por exemplo, para complementar a
informação.
Errado
Senha
@iuricode 26
Correto
Senha
Este campo não pode ficar vazio.
Evite pequenos espaços das entrelinhas
Textos com espaçamento entre as linhas muito reduzido dificultam a

leitura para todas as pessoas, mas para pessoas com baixa visão, pode
ser impossível entender o que está escrito.
Errado Correto
O nascer do sol tingia o céu de O nascer do sol tingia o céu de
tons rosados, anunciando um tons rosados, anunciando um
novo dia repleto de possibilidades.
novo dia repleto de possibilidades.
Na próxima atualização irei adicionar mais dicas de acessibilidade para

pessoas com deficiência visual.
@iuricode 27
Pessoas com dislexia
Pessoas com dislexia são aquelas que têm um distúrbio específico de
aprendizagem que afeta a habilidade de leitura, escrita e compreensão
da linguagem escrita. É uma condição neurobiológica de origem
genética, caracterizada por dificuldades na decodificação e no
processamento das palavras.
É importante ressaltar que a dislexia não é uma doença ou um problema
de visão, mas sim uma diferença na maneira como o cérebro processa a
linguagem escrita.
Não justifique texto
Justificar os textos pode acabar criando espaços irregulares entre as
palavras, o que dificulta a leitura para pessoas com dislexia. Textos
centralizados também não são uma boa ideia, já que fazem com que as
linhas comecem em lugares diferentes.
@iuricode 28
Errado Correto

novo dia repleto de possibilidades. novo dia repleto de possibilidades.
As árvores balançavam As árvores balançavam
suavemente ao sabor da brisa suavemente ao sabor da brisa
matinal, enquanto os pássaros matinal, enquanto os pássaros
entoavam melodias alegres, entoavam melodias alegres,
preenchendo o ar com sua doce preenchendo o ar com sua doce
canção. canção.
Use fontes sem serifa
Uma alternativa que pode oferecer melhor legibilidade é optar por fontes
semi serifadas, que permitem aos usuários visualizar o formato das letras
de maneira mais clara. No entanto, a escolha da fonte ideal pode variar
dependendo do contexto e das necessidades dos usuários.
@iuricode 29
Errado Correto
novo dia repleto de novo dia repleto de

possibilidades. As árvores
possibilidades. As árvores
balançavam suavemente ao
balançavam suavemente ao
sabor da brisa matinal,
sabor da brisa matinal, enquanto
enquanto os pássaros
os pássaros entoavam melodias
entoavam melodias alegres,
alegres, preenchendo o ar com
preenchendo o ar com sua
sua doce canção. doce canção.
Na próxima atualização irei adicionar mais dicas de acessibilidade para

pessoas com dislexia.
@iuricode 30
Dicas para tornar seu site mais acessível
Labels
É altamente recomendado o uso do elemento label sempre que possível

para associar texto aos elementos de um formulário. Essa prática facilita
significativamente a compreensão do usuário sobre a finalidade de cada
campo. É crucial garantir que o atributo 'for' do elemento label
corresponda ao atributo 'id' do input correspondente para evitar
confusão no código.
1
<label for="nome">Nome:</label>
2 <input type="text" id="nome">
Em situações onde não é possível incluir uma label diretamente junto ao

campo, por questões estéticas, é aconselhável adicionar o atributo 'aria-
label' ao input. Esse atributo fornece a descrição necessária e é
amplamente suportado por leitores de tela e outras tecnologias
assistivas. Veja um exemplo prático abaixo:
1 <input type="text" aria-label="nome">
@iuricode 31
Navegação via teclado
Muitas pessoas dependem da navegação via teclado para acessar todas
as informações de um site. Normalmente, a tecla 'Tab' é utilizada para
percorrer o foco de um elemento para outro.
No HTML, a ordem padrão de foco dos elementos segue a mesma
sequência em que estão dispostos no código. Por exemplo, se no código
há uma etiqueta 'label' seguida por um campo 'input', a ordem padrão
será label > input.
Entretanto, há situações em que não é viável dispor os elementos em
uma sequência lógica no código. Para contornar isso, existe o atributo
'tabindex', o qual permite definir uma ordem de navegação.
Suponhamos que você tenha um link com 'Séries' e 'HQs' e deseje que a
navegação siga primeiro todas as séries e depois todos os HQs. Nesse
caso, o 'tabindex' seria utilizado da seguinte maneira:
1
<a href="#" tabindex="1">Séries</a>
2
<a href="#" tabindex="3">Filmes</a>
3 <a href="#" tabindex="2">HQs</a>
@iuricode 32
Inclua um texto descritivo
É fundamental incorporar o atributo 'alt' e 'title' para oferecer descrições
significativas das imagens. Essa prática visa garantir que pessoas que
utilizam leitores de tela compreendam a mensagem transmitida por cada
imagem, inclusive quando contêm texto.
O atributo title proporciona uma breve descrição da imagem, sendo
visível quando o cursor é movido sobre a foto. Já o atributo alt
desempenha um papel mais abrangente, oferecendo uma descrição
detalhada que é crucial para pessoas com baixa ou nenhuma
capacidade visual. Por exemplo:
1
<img src="image.jpg"
2
title="Personagem de um jogo"
3
alt="Personagem do Red Dead trocando tiros"
4 />
@iuricode 33
SVGs semânticos
A internet é um ecossistema diversificado, indo além das imagens

estáticas. Uma das notáveis progressões na web foi a introdução do SVG
(Scalable Vector Graphics), que revolucionou a adaptabilidade e leveza.
Em adição aos atributos presentes em imagens tradicionais, o SVG

oferece ferramentas adicionais para aprimorar a acessibilidade dos
nossos vetores escaláveis: [title] e [desc]. Esses atributos desempenham
papéis fundamentais ao prover um título informativo e uma descrição
detalhada para enriquecer a compreensão do conteúdo do vetor.
1
<symbol id="icon-open" viewBox="0 26 100 48">
2
<title>Título</title>
3
<desc>Descrição</desc>
4
...
5 </symbol>
@iuricode 34
Aria-label e Role
Imagine um botão que visualmente é representado apenas por um ícone.

Sem um rótulo visível, a acessibilidade pode ser prejudicada. Nesse caso,
usar aria-label pode ser útil para fornecer um rótulo acessível para o leitor
de tela.
1
<button aria-label="Abrir Menu" role="button"> 
2
 
3 </button>
Neste exemplo
aria-label="Abrir Menu" fornece um rótulo acessível para o botão

role="button" especifica que o elemento é um botão, o que é útil para
usuários de tecnologias assistivas entenderem a função do elemento.
Essas práticas ajudam a melhorar a experiência de usuários com

deficiências visuais, tornando a interface mais compreensível e acessível.
@iuricode 35
Outros
Janelas de diálogo, light boxes, etc
Devem poder ser fechadas clicando fora delas ou pressionando ESC.

Isso evita que as pessoas precisem procurar a pequena cruz — Sim,
eu sei que tem quem faça isso de propósito.
Evite texto justificado, especialmente em grande quantidad
Texto justificado dificulta a leitura, e para algumas pessoas, torna a

leitura um processo confuso.
Certifique-se de que o espaçamento entre linhas é pelo menos

145-150% maior que o tamanho da fonte:
A falta de espaçamento entre as linhas de texto (altura da linha)

geralmente causa graves problemas de leitura.
Não desabilite o zoo
Algumas pessoas precisam da funcionalidade para consumir seu

conteúdo confortavelmente — Algumas situações incomuns exigem
que os usuários ampliem o conteúdo.
@iuricode 36
Não reproduza vídeos automaticamente
Se o fizer, não reproduza o áudio. Vídeos que rodam

automaticamente, e com som, passam rapidamente de irritantes a
danosos.
Fontes light e finas tendem a ser extremamente difíceis de le
Guarde esse tipo de fontes para manchetes e textos onde sejam

usadas fontes maiores.
Ferramentas para te ajudar
Vou apresentar algumas ferramentas que podem ser muito úteis durante
o desenvolvimento de sites, especialmente para torná-los mais
acessíveis
whoCanUse: Um site que permite testar a acessibilidade das

combinações de cores que você pretende utilizar, garantindo que
sejam legíveis e utilizáveis por todo o público-alvo,
independentemente de suas capacidades visuais.
@iuricode 37
webDevChecklist: Este recurso é um checklist abrangente para o

desenvolvimento de projetos web. Além de abordar a acessibilidade,
cobre outras áreas cruciais, como desempenho, semântica, boas
práticas e mais, ajudando a garantir um site completo e bem
otimizado.
Essas ferramentas são extremamente úteis para garantir que seus sites
sejam acessíveis a uma ampla gama de usuários.
@iuricode 38
Módulo: Deploy
Introdução
Quando desenvolvemos uma aplicação, uma das coisas mais
emocionantes é colocá-la no ar. É exatamente isso que farei neste
módulo. Vou hospedar uma aplicação já criada na plataforma Vercel,
utilizando o repositório do GitHub. Além disso, também aprenderemos
como funciona o processo de hospedagem sem utilizar a conta do
GitHub, utilizando outra plataforma de hospedagem de sites, como a
Hostgator.
O que é
Quando você trabalha em um projeto de desenvolvimento, um dos
passos mais importantes é a sua disponibilização, seja em um ambiente
de testes ou final. Essa prática é conhecida como deploy, que, em inglês
significa 'implantar'.
Ou seja, o deploy, basicamente, é a implantação do site, software ou

qualquer outro projeto que estivesse em fase de desenvolvimento.
@iuricode 39
Vercel
Antes de utilizarmos a plataforma, vamos entender o que é a Vercel.
A Vercel é uma plataforma voltada para a hospedagem de aplicações de

forma simples e rápida. Ela é conhecida por ser a empresa criadora do
framework Next.js, uma das tecnologias que aprendemos no eFront,
voltada para o mundo React. Como diz em seu próprio site: 'A Vercel é o
melhor lugar para implantar qualquer aplicativo de front-end.'
“Mas por que iremos utilizá-la, Iuri?”
Além de ser um dos serviços de hospedagem que mais cresceram nos

últimos anos, a plataforma é gratuita e perfeita para aplicações feitas com
JavaScript. Portanto, recomendo utilizar a Vercel.
Como fazer o deploy
Para fazer o deploy é bem simples! É possível fazer com apenas alguns
passos. Como já dito, o deploy será realizado através de uma integração
com o GitHub.
@iuricode 40
Deploy na Vercel
Primeiramente você deve ir até no site da Vercel e clicar no menu na

opção Sign Up. Nele vai ter 3 opções disponíveis que é login com o
GitHub, Gitlab e Bitbucket.
No meu caso fiz login usando a minha conta do GitHub e essa é a tela
inicial após ter efetuado o login.
Importar projeto
O próximo passo é criarmos um novo projeto e importar o projeto.
Para isso é bem simples.
@iuricode 41
Basta clicar no botão “Create a New Project”.
Após clicar no botão, irá aparecer os seus repositórios do GitHub. Para
exemplo criei um repositório chamado “efront” onde apenas contém os
arquivos readme e index.html.
Selecione o projeto desejado clicando em “Import”.
@iuricode 42
Agora a Vercel irá te levar para a página de configuração do seu projeto.
Nesta etapa você pode escolher o nome do seu projeto e baseado nisso
seu domínio será criado. Clique em “Deploy” após escolher o nome.
@iuricode 43
Após isso o site será processado por alguns instantes e já estará no ar.
Para visualizar basta clique na tela que está mostrando seu projeto.
Simples né?!
Uma das melhores coisas da Vercel é o deploy automático, ou seja, toda
vez que você fizer um commit no seu repositório a Vercel irá fazer o
deploy automático do seu site. Uma vez feito esses processos basta
mudar o seu código no GitHub.
@iuricode 44
Deploy na HostGator
Agora iremos entender como funciona a hospedagem na HostGator.
Vale a pena dizer que não estou sendo pago para citar os serviços da
HostGator, apenas estou aqui para mostrar o processo de hospedagem
em uma plataforma de sistema pago.
Após passar pelo processo de escolha do plano e pagamento, até
mesmo o processo de escolha e configuração do domínio, já podemos
colocar nosso projeto no ar.
Ao fazer o login na plataforma da HostGator entraremos nessa página.
@iuricode 45
Iremos navegar pelo menu da plataforma pela opção “Hospedagens e

Servidores”. Na nova página que se aparece iremos clicar na opção
“cPanel” no plano que estamos pagando.
Dessa forma irá abrir a página do cPanel. O cPanel é uma plataforma que
permite gerenciar sites que estão dentro de uma hospedagem.
Na nova página vamos selecionar a opção “Gerenciador de arquivos”.
@iuricode 46
Em gerenciador de arquivos é onde ficam as pastas responsável por

nossa aplicação está no ar. Não altere nenhum arquivo/pasta existente.
Apenas clique na pasta “public_html”. É nela que ficará nosso código

fonte da aplicação que desejamos deixar no ar.
Como pode ver na raiz da pasta public_html temos o index.html e a pasta

“assets” que se encontra o CSS e JavaScript da nossa aplicação.
@iuricode 47
Mas perceba também que temos as pastas bio, efront e teslabank. Estes
são outros projetos que podemos acessar em nossa aplicação.
Se você entrar em www.iuricode.com irá ser destinado ao meu portfólio,
mas caso acesse www.iuricode.com/efront irá ser destinado para a
página de vendas do eFront.
Para enviar o código fonte ao gerenciador de arquivos é bem simples.
Basta zipar a pasta do projeto em seu computador e clicar na opção
“Carregar” no menu superior.
Na nova página basta selecionar o arquivo ou arrastar até o local
solicitado pela plataforma.
@iuricode 48
Agora basta selecionar o arquivo zipado e clicar na opção “Extrair” no
menu superior do gerenciador de arquivos.
Pronto! Dessa forma nosso projeto já pode ser acessado pelo domínio
que você pagou na HostGator.
Deploy no GitHub Pages
O GitHub Pages é um serviço de hospedagem de sites estáticos
oferecido pelo GitHub. Ele permite utilizar arquivos HTML, CSS e
JavaScript diretamente de um repositório, executar esses arquivos por
meio de um processo e publicar um site. Esta plataforma possibilita
hospedar o site da sua empresa, organização ou de um projeto que você
deseja compartilhar com sua equipe.
@iuricode 49
Antes de hospedar o site, é necessário ter um repositório para ele no

GitHub. Para isso, iremos utilizar o código que acabamos de subir no
módulo anterior sobre Git e GitHub.
No GitHub, acesse o repositório que deseja hospedar. Se você usa o

Github Free, é importante que seu repositório esteja como público. Vá em
configurações (Settings).
Na seção ‘code and automation’ clique em Pages.
@iuricode 50
Na seção Branch abra o menu suspenso e selecione a opção “main” (ou
master) para o GitHub Pages possa encontrar o caminho dos arquivos
em seu repositório.
Caso a opção esteja como ‘/docs’ troque pelo opção ‘/ (root)’.
Aguarde enquanto o GitHub Pages conclui o processo de colocar seu
site no ar. Ele vai lhe dar uma URL com domínio github.io (talvez seja
necessário atualizar a página). Depois disso, é só acessar sua página!
@iuricode 51
@iuricode 52
Módulo: Clean Code
Introdução
Neste módulo, abordaremos algumas dicas de boas práticas de como

melhorar seus códigos JavaScript. Ter um código limpo é extremamente
importante para que uma aplicação seja escalável e fácil de dar
manutenção ao código.
“Qualquer tolo consegue escrever código que um computador

entenda. Bons programadores escrevem código que humanos possam
entender.” - Martin Fowler.
O que é
Clean Code, ou código limpo, refere-se a um estilo de programação que

prioriza a legibilidade, simplicidade e manutenibilidade do código. Trata-
se de um conjunto de boas práticas e princípios que tornam o código
mais fácil de entender, modificar e depurar. Além disso, busca reduzir a
complexidade desnecessária, eliminar duplicações e criar estruturas bem
definidas.
@iuricode 53
Este módulo se concentra em escrever um código JavaScript limpo , no

entanto, a maioria dos exemplos mencionados pode se aplicar a quase
qualquer outra linguagem de programação. Em geral, os seguintes
conceitos são recomendações adotadas principalmente do livro Clean
Code de Robert C. Martin.
Variáveis
Como os nomes estão por toda parte em um software, é muito

importante escolher nomes bem definidos para transmitir exatamente
nossa intenção.
Escolha nomes significativos e evite qualquer desinformação ou nomes

que tenham algum significado particular em outros contextos. Ao ler o
nome de uma variável ou função, devemos ter uma ideia clara do que ela
está fazendo.
1
// Ruim
2
const d = new Date();
4
// Bom
5 const currentDate = new Date();
@iuricode 54
Funções
Robert Martin afirma que a regra mais importante para funções é que
elas devem ser pequenas. Quanto mais longa a função, mais difícil se
torna entender claramente o que ela está fazendo e, portanto, refatorar ou
melhorar a função se torna mais difícil. Como regra geral, Robert Martin
afirma que as funções dificilmente devem ter mais de 20 linhas. Aqui
estão algumas regras recomendadas para ter funções limpas e
compreensíveis
As funções devem fazer uma coisa. Simplificando, uma função
chamada setSomething deve apenas fazer a ação “set” e nada mais.
1
// Ruim
2
function notifyUsers(users) {
3
users.forEach(user => {
4
const userRecord = database.lookup(user);
5
if (userRecord.isVerified()) {
6
notify(user);
7
}
8
});
9 }
@iuricode 55
1
// Bom
2
function notifyVerifiedUsers(users) {
3
users.filter(isUserVerified).forEach(notify);
4
}
6
function isUserVerified(user) {
7
const userRecord = database.lookup(user);
8
return userRecord.isVerified();
9 }
O nome da função deve ser claro o suficiente para dizer claramente o

que a função está fazendo. O par verbo/substantivo é uma boa
maneira de nomear funções
Quando se trata de argumentos de função, quanto menos

argumentos uma função tiver, melhor. Quanto mais argumentos uma
função tiver, mais difícil será testar essa função. Robert Martin afirma
em seu livro que deve haver alguma justificativa muito especial se
alguma função tiver três argumentos ou mais.
@iuricode 56
Testes
O teste de software é uma atividade essencial na engenharia de software
e tem como objetivo encontrar possíveis defeitos ou comportamentos
ausentes no sistema em teste para corrigi-los por depuração. Se não
tivermos nenhum teste ou se nossos testes forem insuficientes, não
temos ideia de que algum código enviado não está quebrando nada na
base de código já existente.
O teste de código deve, além de seguir os princípios do código limpo,

seguir as seguintes regras
Rápido: os testes devem ser rápidos. Se os testes forem lentos, não

os executaremos com frequência. Se não executarmos testes com
frequência, não encontraremos problemas com antecedência
suficiente para corrigi-los
Independente: os testes não devem depender uns dos outros.

Devemos ser capazes de executar cada teste independentemente e
executar os testes em qualquer ordem que desejarmos. Quando os
testes dependem uns dos outros, o primeiro a falhar faz com que
todos os testes seguintes falhem, o que torna difícil encontrar o mau
comportamento.
@iuricode 57
Para ter testes fáceis de entender e seguir, o autor do livro recomenda
testar cada conceito separadamente e minimizar o número de asserções
em uma função de teste. Idealmente, o autor recomenda ter uma
asserção por função, se possível. Isso tornará o código mais legível e fácil
de entender e seguir, como mostrado no exemplo a seguir.
1
// Ruim
2
import assert from "assert";
4
describe("MomentJS", () => {
5
it("handles date boundaries", () => {
6
let date;
8
date = new MomentJS("1/1/2023");
9
date.addDays(30);
10
assert.equal("1/31/2023", date);
11
12
date = new MomentJS("2/1/2024");
13
date.addDays(28);
14
15
});
16 });
@iuricode 58
1
// Bom
2
import assert from "assert";
4
describe("MomentJS", () => {
5
it("handles 30-day months", () => {
6
const date = new MomentJS("1/1/2023");
7
date.addDays(30);
8
9
});
10
11
it("handles leap year", () => {
12
const date = new MomentJS("2/1/2024");
13
date.addDays(28);
14
15
});
16 });
Manipulação de erros
Erros lançados significam que o tempo de execução identificou alguns
erros em nosso código e avisa o desenvolvedor interrompendo a
execução da função. Aqui estão algumas regras recomendadas do livro
sobre como lidar com erros:
@iuricode 59
- Quando temos algum código arriscado que pode gerar um erro, a

maneira recomendada de lidar com os possíveis erros que podem
aparecer é com exceções, como no exemplo abaixo. Exceções em
JavaScript são lançadas usando a palavra-chave throw.
Em vez de lidar com um possível erro da seguinte maneira
1
const setProperty = (obj, value, property) => {
2
obj[property] = value;
3
if (!value) {
4
return "Value not found";
5
}
6 }
Devemos lidar com o erro potencial com uma exceção:
1
const setProperty = (obj, value, property) => {
2
if (!value) {
3
throw new Error("Value not found");
4
}
5
obj[property] = value;
6 }
@iuricode 60
Também devemos fornecer contexto ao detectar erros para ajudar a
detectar o local e a origem do erro. Isso é feito exibindo mensagens de
erro informativas, como no exemplo a seguir:
1
function divideTwoNumbers(x, y) {
2
if (y === 0) {
3
throw "Can't divide by 0";
4
}
5
return x / y;
6
}
8
try {
9
const result = divideTwoNumbers(5, 0);
10
} catch (error) {
11
12 console.log(error);
Formatação
A formatação de código é sobre ter algum conjunto de regras que
governa o formato do nosso código. A formatação do código é
importante porque torna o código do desenvolvedor mais fácil de ler e
entender.
@iuricode 61
O trabalho de um desenvolvedor não é apenas enviar um código

funcional. Escrever código legível e sustentável é igualmente importante.
Abaixo estão algumas das regras recomendadas pelo autor para um bom
formato de código:
- O tamanho do arquivo deve ser pequeno: quanto menor o arquivo,

melhor. A regra a ter em conta e recomendada pelo autor é o máximo de
500 linhas.
- Declarações de variáveis: as variáveis devem ser declaradas o mais

próximo possível de seu uso. Isso significa que as variáveis locais devem
aparecer no início da função, as variáveis de loop devem ser declaradas
dentro do loop em que são usadas e as variáveis de instância devem ser
declaradas no início da classe.
- Funções dependentes: se uma função chama outra, elas devem estar

verticalmente próximas uma da outra.
- Formatação horizontal: Recomenda-se manter nossas linhas curtas.

Como regra, o autor sugere escrever linhas de código que não
ultrapassem 120 caracteres.
@iuricode 62
Comentários
Comentários devem ser evitados. O autor do livro recomenda sempre
buscar formas de nos expressarmos em código ao invés de usar
comentários.
Os comentários são ruins porque o que eles expressam geralmente está
longe do código que descrevem pela simples razão de que o código
muda e evolui e os comentários nem sempre são mantidos.
Existem, no entanto, alguns casos em que os comentários podem ser
úteis
Quando explica algum argumento obscuro ou valor de retorno de
algum código que não podemos alterar
Os comentários para os quais alguns desenvolvedores podem
escrever são apenas um lembrete para os desenvolvedores sobre as
tarefas que precisam ser feitas no futuro, mas, por algum motivo, não
podem ser feitas naquele momento.
@iuricode 63
Módulo: Figma
Introdução
Hoje em dia o Figma é uma das ferramentas mais avançadas quando o

assunto é construção de interfaces. Mas há muito mais para se descobrir
sobre essa ferramenta, como suas funcionalidades de prototipação, sua
capacidade de acessos simultâneos ao mesmo projeto, ou então suas
bibliotecas de componentes compartilháveis.
Para descobrirmos todas as informações necessárias e fundamentais

para dar os primeiros passos com a ferramenta fiz este módulo.
O que é
O Figma é uma ferramenta amplamente utilizada por designers, equipes

de desenvolvimento e outros profissionais envolvidos no processo de
criação de interfaces de usuário (UI) e experiências do usuário (UX).
O Figma permite que os usuários criem designs de alta qualidade para

aplicativos, sites e outros produtos digitais de forma intuitiva e eficiente.
@iuricode 64
Suas vantagens
Algumas das vantagens do uso do Figma incluem
Colaboração em Tempo Real: Uma das maiores vantagens do Figma
é a capacidade de colaborar em tempo real. Várias pessoas podem
trabalhar no mesmo arquivo ao mesmo tempo, ver as edições em
tempo real e até mesmo conversar diretamente dentro da plataforma.
Isso é especialmente útil para equipes distribuídas ou que precisam
de revisões constantes
Prototipagem Interativa: O Figma permite criar protótipos interativos
para testar a usabilidade e a interação do usuário. Você pode
adicionar transições, animações e interações sem precisar de
ferramentas adicionais, facilitando a validação das ideias de design
Componentes e Estilos: O Figma oferece recursos robustos para criar
componentes reutilizáveis e estilos de design, o que ajuda a manter a
consistência visual em todo o projeto. Isso é especialmente útil para
garantir que todos os elementos da interface tenham uma aparência
e comportamento consistentes.
@iuricode 65
Integrações e plugins: O Figma suporta várias integrações com

outras ferramentas de design, colaboração e desenvolvimento. Além
disso, a plataforma possui uma grande variedade de plugins que
estendem suas funcionalidades, permitindo automatizar tarefas
repetitivas e personalizar seu fluxo de trabalho.
Do Figma ao código
Neste tópico vamos entender como podemos transformar nossos

designs realizando no Figma em projetos “vivos” no frontend.
Para isso iremos fazer um card criado no Figma em nosso VSCode.
Título
Sou apenas uma descrição.
Acessar
@iuricode 66
Caso você não tenha conhecimento com código frontend como HTML,
CSS e JavaScript, recomendo compra meu material clicando aqui. Pois
neste material não iremos abordar profundamente código.
Ao acessar o projeto no Figma você terá esta interface (isso é, caso você
tenha feito o login na plataforma e que esteja com acesso a editar o
projeto, mas caso você não tenha acesso os lugares de cada opção
ficaram no mesmo lugar.
Caso você queria acessar o design deste card basta clicar aqui.
@iuricode 67
Recentemente o Figma lançou uma nova funcionalidade (Dev Mode)
com o objetivo de ajudar nós desenvolvedores e conversar melhor com
os designs realizado no Figma de forma rápida e eficiente.
Para ativar essa funcionalidade basta clicar nesta opção:
Nossa interface irá ter um pequena alteração ao ativar o Dev Mode.
@iuricode 68
Podemos que ver que as opções no canto direito foram totalmente

modificados. Nelas temos algumas funcionalidades muito massas, mas
que no momento não iremos abordar.
Mas gostaria que desse uma atenção na seção “Code settings”. Nela
podemos escolher a linguagem que queremos trabalhar, como CSS,
linguagens para Android e iOS. Além disso, também podemos escolher a
unidade de medida que estamos trabalhando, no momento para CSS
temos a opção “px” e “rem”. Iremos utilizar px em nossos exemplos.
Para ter acesso aos recursos do design, basta selecionar o elemento que
no canto inferior direito irá aparecer todas os assets que foram utilizadas.
@iuricode 69
De primeiro momento iremos apenas trabalhar com tamanhos, cores,

fontes e espaçamentos. Mas irei ir mais afundo neste material sobre essa
nova funcionalidade super massa chamado Dev Mode.
@iuricode 70
Ao selecionar o card teremos as seguintes informações na seção de

Layout. Nela o Figma está mostrando o tamanho do nosso elemento.
Lembrando que dependendo de como é nosso projeto essa informações

não serão tão úteis, pois podemos ter elementos como “auto” que irá algo
se adaptar dependendo a resolução.
Na seção abaixo temos as cores que foram utilizadas na criação do card,

nele podemos escolher o formato de cores que estamos trabalhando em
nosso projeto. Para copiar a cor basta clicar nela.
@iuricode 71
Com o Dev Mode, tornou-se muito mais simples baixar as imagens e

ícones utilizados no design. Antes, tínhamos que selecionar cada
imagem/ícone individualmente para, então, realizar o download. Além
disso, muitas vezes isso poderia acarretar em pequenos erros de seleção
ou até mesmo na falta de seleção do frame do ícone, sem mencionar a
ausência de uma visualização prévia dos elementos selecionados.
Anteriormente, a abordagem envolvia selecionar as imagens/ícones e,

em seguida, clicar em 'Exportar'. E, caso desejássemos baixar os ícones
como SVG e as imagens como PNG, precisávamos selecionar ambos de
forma separada.
@iuricode 72
Com o Dev Mode, na seção Assets temos a opção de baixar cada
imagem no design de forma separada e escolher o tipo que queremos
separadamente se forma simples.
Aqui está um exemplo de um componente com mais de uma imagem.
@iuricode 73
Por último, com o Dev Mode, é mais simples ver os espaçamentos entre
os elementos no design. Antes, teríamos que selecionar o elemento e
passar o mouse sobre outro elemento, segurando a tecla 'Alt'.
Agora, com o Dev Mode, basta apenas selecionar o elemento pai (o

design em si) e pronto. Ao passar o mouse pelos elementos, eles já irão
mostrar a quantidade de pixels entre si.
Figma for VS Code
Figma lançou uma extensão no VS Code que permite aos devs interagir
com designs na IDE. Ele permite navegar e inspecionar arquivos de
design, colaborar com designers, rastrear alterações e acelerar
implementações de design sem sair do ambiente de desenvolvimento.
@iuricode 74
Isso melhora a produtividade do desenvolvedor, eliminando a alternância
e o trabalho intenso necessário para transformar designs em código.
Após instalar a extensão irá aparecer um ícone do Figma na na barra
lateral do seu VS Code. Basta clicar nele e fazer o login da sua conta.
@iuricode 75
Depois de logar na sua conta já é possível ver os projetos que você

participa no Figma em seu VS Code.
Veja que se você selecionar algum elemento irá aparecer as suas

propriedades na aba inferior no seu VS Code.
@iuricode 76
A parte mais interessante é que você consegue pegar as propriedades

de cada frame selecionado no Figma e trazê-las para o seu VS Code.
@iuricode 77
Módulo: ChatGPT
Introdução
Este módulo fornece exemplos práticos de como desenvolvedores
frontend podem usar o ChatGPT em seu trabalho diário.
Aprenderemos a como usá-lo para otimizar o fluxo de trabalho e reduzir
ações rotineiras. Mas tenha em mente que é importante ter humanos
para tomar as decisões finais, validar os resultados e garantir que os
produtos sejam acessíveis e atendam aos padrões exigidos.
O que é
O ChatGPT é um modelo de linguagem de inteligência artificial
desenvolvido pela OpenAI. Ele foi treinado em uma enorme quantidade
de dados de texto para entender a linguagem humana e gerar respostas
que parecem naturais e coerentes. O ChatGPT pode ser usado para
conversar sobre uma ampla variedade de tópicos e fornecer respostas
para perguntas complexas.
@iuricode 78
Textos mais chamativos
Crie uma frase mais chamativa para “Assine em nossa newsletter de

programação”.
Mantenha-se atualizado com as últimas tendências da programação -

Inscreva-se agora em nossa newsletter!
Crie uma frase mais chamativa para “Crie seu cartão de crédito em
nosso banco”.
Descubra o poder do controle financeiro com nosso cartão de crédito

personalizado - crie o seu agora mesmo!
@iuricode 79
Fluxo do usuário
Crie um fluxo de login para uma página de notícias.
Claro, vou descrever um fluxo de login básico para uma página de notícias:
Na página inicial da página de notícias, haverá um botão de "Login" ou

"Entrar" no canto superior direito da tela.
Ao clicar no botão de "Login", o usuário será direcionado para uma
página de login separada.
Na página de login, o usuário verá campos para inserir seu endereço de
e-mail ou nome de usuário e senha.
O usuário insere suas credenciais de login e clica no botão "Entrar".
O sistema verifica as credenciais do usuário e, se forem corretas, permite
que o usuário acesse a página de notícias.
Se as credenciais estiverem incorretas, o usuário verá uma mensagem de
erro e será solicitado a tentar novamente.
O usuário pode navegar pela página de notícias, ler as notícias e ver
outras informações, como comentários e opções de compartilhamento.
Quando o usuário desejar sair da página de notícias, ele pode clicar no
botão "Sair" ou "Logout" para encerrar a sessão e retornar à página
inicial.
@iuricode 80
Cenários de testes
Crie um cenário de teste para um sistema de login.
Cenário de teste para sistema de login:
Teste de autenticação bem-sucedido: inserir nome de usuário e senha
válidos e verificar se o sistema permite o acesso ao painel do usuário.
Teste de autenticação malsucedido: inserir um nome de usuário válido,
mas uma senha incorreta e verificar se o sistema exibe uma mensagem
de erro adequada e não permite o acesso ao painel do usuário.
Teste de autenticação malsucedido: inserir um nome de usuário inválido
e verificar se o sistema exibe uma mensagem de erro adequada e não
permite o acesso ao painel do usuário.
Teste de segurança: inserir uma senha válida, mas um nome de usuário
inválido e verificar se o sistema não permite o acesso ao painel do
usuário.
Teste de segurança: inserir uma senha inválida e verificar se o sistema
não permite o acesso ao painel do usuário, independentemente do nome
de usuário inserido.
Teste de recuperação de senha: solicitar uma nova senha por e-mail e
verificar se a senha recebida permite o acesso ao painel do usuário.
Teste de recuperação de senha: solicitar uma nova senha por e-mail e
verificar se a senha antiga não permite mais o acesso ao painel do
usuário.
@iuricode 81
Novas ideias
Crie 5 ideias de projetos front-end para colocar no portfólio.
Desenvolvimento de uma aplicação de comércio eletrônico para uma loja

de roupas com sistema de carrinho de compras e integração de
pagamento online.
Criação de um site de receitas culinárias, com uma interface intuitiva e
amigável que permita a busca por ingredientes e preparação de pratos
de diferentes tipos de culinárias.
Desenvolvimento de um jogo de memória interativo para crianças, com
elementos visuais e sonoros atraentes, que possa ser jogado em
diferentes dispositivos.
Criação de um aplicativo de gerenciamento de tarefas para ajudar as
pessoas a organizar suas atividades diárias e aumentar sua
produtividade.
Desenvolvimento de uma plataforma de gerenciamento de eventos, que
permita a criação de eventos personalizados, venda de ingressos e
interação entre os participantes.
@iuricode 82
Tire suas dúvidas
Quando devo utilizar a tag H1 do HTML?
A tag H1 do HTML deve ser utilizada para o título principal de uma página.
Geralmente, é recomendável que cada página tenha apenas um elemento
H1, que deve conter a descrição resumida do conteúdo da página.
Além disso, é importante lembrar que os elementos H2, H3, H4, etc., são
usados para títulos secundários, subtítulos e títulos de seções menores,
respectivamente. Eles devem ser usados em ordem hierárquica, ou seja, o
elemento H2 deve ser usado após o H1 e assim por diante.
O uso adequado das tags de cabeçalho (H1, H2, H3, etc.) não só ajuda a
organizar o conteúdo da página, mas também pode ter um impacto positivo
na otimização para mecanismos de busca (SEO), tornando o conteúdo da
página mais fácil de ser lido e indexado pelos motores de busca.
@iuricode 83
Adeus “Lorem Ipsum”
Escreva uma copy para uma página web de clínica odontológica que
incentive o usuário pagar por um plano.
Bem-vindo(a) à nossa clínica odontológica! Estamos felizes em oferecer

planos de tratamento odontológico acessíveis e convenientes para nossos
pacientes. Se você está procurando uma maneira fácil e econômica de
cuidar da sua saúde bucal, um de nossos planos pode ser a opção ideal para
você.
Com nossos planos odontológicos, você terá acesso a uma ampla gama de
serviços de qualidade, incluindo limpezas regulares, exames completos,
tratamentos preventivos, restaurações, tratamentos de canal, próteses e
muito mais. Além disso, você poderá economizar significativamente em seus
tratamentos odontológicos regulares, o que pode ajudar a manter sua saúde
bucal em dia e evitar problemas futuros.
Ao escolher um de nossos planos odontológicos, você pode ter a

tranquilidade de saber que está cuidando da sua saúde bucal com
profissionais altamente qualificados e experientes. Nossa equipe de
dentistas dedicados e amigáveis está pronta para ajudá-lo a alcançar seus
objetivos de saúde bucal.
@iuricode 84
Fornecer exemplos de código
Quero um exemplo de código HTML e CSS de Footer (rodapé) com
logo e redes sociais
Claro, vou fornecer um exemplo simples de código HTML e CSS para um
footer que inclui uma logo e ícones de redes sociais. Este exemplo utiliza a
biblioteca de ícones FontAwesome para os ícones de redes sociais.
Certifique-se de incluir a biblioteca FontAwesome em seu projeto para que
os ícones sejam exibidos corretamente.
1
<!DOCTYPE html> 
2
<html lang="pt-br"> 
3
<head> 
4
<meta charset="UTF-8"> 
5
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
6
<title>Footer com Logo e Redes Sociais</title> 
7
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/..."> 
8
<style> 
9 ...
Lembre-se de substituir "caminho-para-sua-logo.png" pelo caminho real
para sua imagem de logo e ajustar os links das redes sociais conforme
necessário. Este é apenas um exemplo básico; você pode personalizar
estilos e conteúdo de acordo com as necessidades do seu projeto.
@iuricode 85
Fornecer feedback sobre erros
Meu código não está funcionando, por quê?
*Código*
Parece que há um pequeno erro de digitação no nome da variável. Você

declarou a array como fruts, mas depois tentou usar fruits.push. Certifique-
se de manter a consistência no nome da variável. Aqui está o código
corrigido:
1
const fruits = ["Banana", "Laranja", "Maça", "Manga"];  
2
3 fruits.push("Kiwi", "Limão");
Agora, a array está corretamente declarada como fruits, e o método push

será aplicado à array correta.
@iuricode 86
Fornecer feedback sobre melhorias
Melhore o código dessa função de somar
*Código*
Aqui estão algumas sugestões de melhoria
Mensagens de erro mais descritivas: Forneça mensagens de erro mais
descritivas para facilitar a depuração
Verificação de NaN: Adicione uma verificação para garantir que os
valores passados não sejam NaN (Not a Number).
Aqui está uma versão melhorada do código:
1
function somarNumeros(a, b) { 
2
// Código melhorado informado pelo ChatGPT 
3
return a + b; 
4 }
Essa versão verifica não apenas se os argumentos são do tipo número, mas
também se são valores válidos (não NaN). Além disso, a mensagem de erro
foi aprimorada para fornecer informações mais específicas sobre o problema
encontrado.
@iuricode 87
Responder perguntas técnicas
O que é JavaScript assíncrono?
JavaScript assíncrono refere-se à capacidade do JavaScript de executar
operações de forma não bloqueante. Em vez de esperar que uma operação
seja concluída antes de passar para a próxima, o JavaScript permite que
operações assíncronas ocorram em segundo plano, enquanto o código
principal continua a ser executado.
Isso é especialmente útil em situações onde o tempo de uma operação é
incerto, como leitura de arquivos, solicitações de rede e interações com
bancos de dados. As abordagens comuns para lidar com assincronia
incluem callbacks, Promises e async/await
Callbacks: Funções passadas como argumentos para serem chamadas
de volta quando uma operação assíncrona é concluída
Promises: Objetos que representam o resultado futuro de uma operação
assíncrona, permitindo tratamento de sucesso ou falha
async/await: Sintaxe mais recente que simplifica o código assíncrono,
tornando-o semelhante ao código síncrono, facilitando a leitura e
manutenção.
@iuricode 88
Módulo: Git e GitHub

Introdução
Bem-vindo ao nosso módulo de aprendizado sobre Git e GitHub! Neste
módulo, exploraremos em detalhes o Git e o GitHub, desde os conceitos
fundamentais até tarefas avançadas. Se você é um novato completo ou
já tem alguma experiência, este módulo irá ajudá-lo a aprimorar suas
habilidades e torná-lo um colaborador mais eficaz em projetos de
desenvolvimento de software.
O que é
O Git é um sistema de controle de versão distribuído que revolucionou a
forma como desenvolvedores de software gerenciam o código-fonte.
Com ele, você pode rastrear as mudanças em seu código, colaborar com
outros desenvolvedores de forma perfeita e, o mais importante, manter
um histórico de seu trabalho. Mas o Git, por si só, é uma ferramenta de
linha de comando poderosa e pode ser um pouco intimidante para
iniciantes.
@iuricode 89
É aqui que o GitHub entra em jogo. O GitHub é uma plataforma que

aproveita a potência do Git, tornando o controle de versão mais acessível
e colaborativo. Com o GitHub, você pode hospedar seu código, colaborar
com outras pessoas, realizar solicitações de pull, reportar problemas e
muito mais, tudo em um ambiente mais amigável.
Em resumo, o Git é um sistemas de controle de versão e o GitHub uma

plataforma que facilita o controle de versão. O Git e o GitHub são duas
coisas distintas, embora frequentemente sejam usados juntos para
facilitar o desenvolvimento de software colaborativo.
Instalando o Git
Para utilizar o Git, é necessário instalá-lo em seu computador. A
instalação pode ser realizada facilmente através do download da versão
mais atual diretamente do site oficial. As opções de download
disponíveis são compatíveis com diferentes sistemas operacionais.
Também é possível realizar a instalação do Git utilizando a linha de

comando. No entanto, vale ressaltar que os comandos a serem
executados variam de acordo com o sistema operacional utilizado. Neste
texto, iremos concentrar-nos na abordagem mais genérica e amplamente
aplicável.
@iuricode 90
Assumirei que, até este ponto, você já tenha concluído a instalação do
Git. Para confirmar, você pode executar o seguinte comando no terminal:
git --version
Isso mostrará a versão atualmente instalada no seu computador.
O próximo passo é configurar o seu nome de usuário e endereço de e-
mail, pois o Git utilizará essas informações para identificar o autor de
alterações específicas nos arquivos.
Para definir o seu nome de usuário, execute os seguintes comandos:
git config --global user.name "SEU_NOME_DE_USUARIO"
git config --global user.email "SEU_E-MAIL"
Após a conclusão da instalação e configuração do Git, é hora de criar
nosso projeto.
No meu caso, criei uma pasta chamada 'gitfront' na raiz do disco. Agora,
utilizando a linha de comando, navegue até a localização do seu novo
projeto. Podemos fazer com os seguintes comandos:
@iuricode 91
cd gitfront
Agora, para iniciar um repositório para o seu projeto, basta executar o
comando 'git init'. Isso instruirá o Git a começar a rastrear todas as
alterações nos seus arquivos. Veja como isso é feito na linha de
comando/terminal:"
Irá aparecer a resposta enviada de volta dizendo que o repositório foi
inicializado. Ele é considerado vazio porque não informamos ao Git quais
arquivos rastrear. Ao adicionar um arquivo na pasta teremos o seguinte
aviso ao dar o comando git init.
@iuricode 92
Se você está começando a aprender a usar a linha de comando e deseja

uma alternativa mais amigável, sugiro utilizar o terminal do próprio Visual
Studio Code. Ele já possui um terminal integrado que permite a execução
de comandos de forma mais intuitiva.
Para isso, abra o seu projeto no editor e inicie um novo terminal
(você pode fazer isso acessando a opção do menu superior ou clicando

na tecla Ctrl + ‘]) para o seu projeto. Isso configurará automaticamente o
terminal/linha de comando para apontar para o diretório do seu projeto.
Dessa forma, estamos prontos para começar a criar e enviar o projeto

para o GitHub. No entanto, antes de prosseguirmos, gostaria de
apresentar alguns outros comandos do Git.
@iuricode 93
Comandos básicos do Git
O Git é uma ferramenta incrível que oferece uma ampla gama de
utilitários para o gerenciamento de versões de projetos via linha de
comando. Vamos dar uma olhada nos principais comandos:
Git init
git init
git init: Este comando é usado para inicializar um repositório Git dentro de
um diretório do sistema. Após a sua utilização, o Git começa a monitorar
o estado dos arquivos no projeto.
Git clone
git clone <-caminho-do-repositório->
git clone: Este comando é utilizado para criar uma cópia de um
repositório remoto em um diretório da máquina local. O repositório pode
ser criado a partir de um repositório armazenado localmente, ou pode ser
um repositório remoto, acessado por meio de um URI de rede.
@iuricode 94
Ao clonar um repositório, você pode acompanhar o estado de um projeto

e suas modificações. Além disso, você tem a capacidade de contribuir
para o projeto, enviando suas próprias modificações para o repositório.
Git status
git status
git status: Este comando é utilizado para verificar o estado de um

repositório Git, incluindo o estado do repositório central. O comando
fornece informações sobre se o projeto local está sincronizado com o
repositório central, quais arquivos estão sendo monitorados pelo Git e em
qual branch você está no projeto.
Git add
git add <-arquivo->
git add: Este comando é usado para adicionar arquivos ao conjunto de

alterações a serem confirmadas. Você pode adicionar um único arquivo,
vários arquivos de uma vez (por exemplo, 'git add pasta1 pasta2 ...'), ou
até mesmo um diretório inteiro especificando seu caminho. Após
adicionar com o comando 'add', ele estará pronto para o commit.
@iuricode 95
Git commit
git commit -m "mensagem do commit"
git commit: Este comando é usado para criar uma nova versão do projeto
com base em um conjunto de alterações. O commit pega as
modificações que foram adicionadas ao pacote por meio do comando
'git add', agrupa essas alterações em um pacote e as identifica com um
código de hash único. Além disso, para cada commit, é necessário
escrever uma mensagem descritiva que explique claramente as
alterações realizadas no commit.
Git log
git log
git log: Este comando é usado para visualizar o histórico de alterações de

um projeto. Ele exibe todos os commits realizados, juntamente com suas
mensagens e códigos de identificação únicos. Essa funcionalidade é
muito útil para rastrear o progresso de um projeto e determinar em qual
ponto cada funcionalidade foi implementada.
@iuricode 96
Git branch
git branch <-nome-da-branch->
git branch: Este comando é usado para criar novos ramos (branch) de
desenvolvimento e visualizar os ramos existentes. Para criar um novo
ramo, basta utilizar 'git branch' seguido pelo nome do novo ramo
desejado. Para listar os ramos existentes, basta usar o mesmo comando
sem especificar um nome, e todos os ramos serão listados.
Git diff
git diff: Este comando é usado para visualizar as modificações feitas
entre commits, seja entre um commit específico e o estado atual do
projeto, dois commits específicos ou qualquer combinação de commits
distintos. Para visualizar as alterações entre um commit específico e o
estado atual, basta utilizar o comando:
git diff <- Hashcode do commit anterior ->
E todas as diferenças no projeto entre os dois commits serão listadas.
@iuricode 97
Git checkout
git checkout <- Hashcode do commit ->
git checkout: Este comando é utilizado para navegar entre as diferentes
versões do projeto e também para alternar entre as diferentes
ramificações criadas.
Da mesma forma, para alternar entre as ramificações (branch), podemos
utilizar o comando:
git checkout <- nome da branch ->
E a ramificação será alterada. O comando também possibilita criar uma
ramificação e mudar para ela imediatamente, usando o comando:
git checkout -b <- nome da branch ->
Isso criará a ramificação e a mudará para a nova ramificação.
@iuricode 98
GitHub
Agora que abordamos alguns comandos básicos do Git, podemos

começar a explorar como utilizá-lo em conjunto com o GitHub.
A primeira etapa é criar uma conta no GitHub, que é um cadastro básico

como em qualquer site ou serviço. Na página inicial você deve preencher
seus dados, escolhendo um username (que será sua identificação no
site), colocando seu e-mail e escolhendo uma senha.
Após ter feito o cadastro e efetuado o login na sua conta do GitHub, vá

em busca da opção "Novo repositório". Você pode encontrá-la na barra
lateral esquerda do site ou no ícone de adição (+) localizado na barra
superior.
Na próxima tela, você irá fornecer informações cruciais sobre o seu novo
repositório GitHub. A primeira delas é o nome do repositório, que será
utilizado por qualquer pessoa que deseje acessar seus arquivos na
plataforma. Portanto, é recomendável escolher um nome que seja
conciso, descritivo e de fácil memorização. Lembre-se de que o nome
não pode conter espaços ou caracteres especiais, pois eles serão
automaticamente substituídos.
@iuricode 99
Logo abaixo, você pode inserir uma breve descrição para o seu novo
repositório. Isso ajudará na sua própria organização e também guiará os
interessados que desejem visualizar seus projetos.
Em seguida, será necessário decidir se o repositório será público ou

privado. Os repositórios públicos são visíveis para qualquer pessoa, mas
o proprietário pode controlar quem pode realizar commits. Por outro lado,
os repositórios privados têm o acesso restrito apenas às pessoas
autorizadas pelo administrador.
Agora vem a hora de utilizar os comandos que o GitHub nos passou

assim que criamos nosso repositório.
@iuricode 100
Para compreender melhor as ações dos comandos a seguir, é essencial

ter uma visão do fluxo que nossas alterações percorrem até serem
registradas em nosso repositório no GitHub.
Quando utilizamos o comando "git add", estamos enviando o arquivo

para a área de preparação, o que significa que ele está sendo preparado
para fazer parte da próxima revisão do repositório. Esses são os
elementos que serão incluídos no próximo commit.
Ao executarmos o comando "git commit", capturamos tudo o que foi

preparado com o "git add" e "tiramos uma foto" do estado atual do
projeto, registrando essa imagem em nosso repositório local.
Por fim, o comando "git push" tem a finalidade de enviar essas alterações
já comprometidas (commitadas) para o repositório remoto.
@iuricode 101
Agora, vamos aplicar esses comandos em nosso repositório digitando-
os no terminal.
No exemplo a seguir, estarei usando o terminal integrado ao VSCode,
mas você pode utilizar o terminal do Windows. Certifique-se de estar no
diretório do projeto, que no meu caso é 'C:\gitfront'.
Observe que fizemos uma mudança: em vez de utilizar "git add
README.md", usamos "git add .", o que permite adicionar todos os
arquivos do nosso projeto local ao repositório. Neste caso específico,
temos apenas um arquivo vazio chamado index.html.
Se tudo ocorrer conforme o esperado, basta atualizar a página que
contém os comandos.
@iuricode 102
Mais simples do que você imaginava, não é verdade?
Apenas para realizar um teste, vamos fazer uma edição em nosso arquivo
index.html, adicionando algumas tags para confirmar que o Git está
realmente acompanhando as nossas alterações. E, é claro, depois iremos
enviar novamente as nossas modificações no projeto para o nosso
repositório remoto.
Se nenhum arquivo do nosso projeto foi alterado, ao executar o comando
"git status", o resultado será:
@iuricode 103
Isso nos indica que estamos atualmente na branch main e que estamos
sincronizados com o que está armazenado em nosso repositório remoto
(no GitHub). Além disso, nos informa que não há alterações a serem
commitadas neste momento, pois não fizemos nenhuma mudança.
Agora, vamos proceder à edição e ao salvamento do arquivo index.html,

acrescentando qualquer tag. Após concluirmos isso, executaremos
novamente o comando "git status".
Agora, com a modificação feita, obtemos a informação de que um arquivo

foi alterado e que temos alterações prontas para serem commitadas.
E assim faremos! Basta dar o comando “git add .” , commitar informando

uma mensagem do que alteramos com git commit -m “alterando o index”
e enviar ao repositório remoto no GitHub com o comando git push.
Com isso, todas nossas alterações foram enviadas para nosso repositório
remoto (no GitHub).
@iuricode 104
Este processo também pode ser aplicado quando desejamos alterar

outro projeto nosso. A principal etapa é usar o comando 'git clone', que
nos permite duplicar o repositório (arquivos) em nossa própria máquina.
Isso nos permite fazer as alterações necessárias no código e, em
seguida, modificar o projeto.
Isso é mais simples do que parece. Tudo que você precisa fazer é acessar
o repositório para o qual deseja alterar, clicar na opção 'Code' e, em
seguida, copiar o endereço HTTPS. Alternativamente, você pode copiar o
URL do repositório e adicionar '.git' ao final do endereço, caso prefira
essa abordagem.
1 git clone https://github.com/iuricode/efront.git
@iuricode 105
Contribuindo
“Okay Iuri, mas e se eu quiser contribuir para um projeto de outra
pessoa?”
Para isso, utilizamos o fork. O fork é um novo repositório que herda as
configurações de código de outro repositório (o original). Geralmente, os
forks são empregados para iterar ideias ou realizar alterações antes de
serem propostas de volta ao repositório original. Ele é útil quando um
usuário não possui permissões para modificar o repositório.
Ainda está confuso? Vamos criar um fork e demonstrar na prática como
funciona e qual é a sua importância para projetos open-source.
Ao acessar um repositório (vou usar o projeto da levxyca como exemplo -
https://github.com/levxyca/diciotech), você encontrará um botão
chamado “Fork” no canto superior direito da página.
@iuricode 106
Por padrão, os forks recebem o mesmo nome que os seus respectivos

repositórios originais. Opcionalmente, é possível alterar o nome do
repositório e sua descrição, mas é recomendável manter as informações
do repositório original.
Após clicar no botão 'Create fork', o GitHub irá criar o seu repositório.
Note que logo abaixo do nome do repositório, há a indicação 'forked
from', o que significa que você está utilizando o projeto de outra pessoa.
@iuricode 107
“Okay Iuri, mas o que faço com esse projeto gerado pelo fork?”
A partir de agora, você pode alterar o código do repositório, fazendo o

clone dele (mostrei como fazer antes de abordar o fork), e depois enviar
sua contribuição para o repositório original.
“Okay Iuri, fiz o fork, alterei o código do repositório e agora? Como faço
para enviar essas alterações para o repositório original?”
Agora, você vai aprender a palavra mais importante em projetos open-

source: o Pull Request.
O Pull Request é um mecanismo no qual um desenvolvedor pode gerar

uma notificação que sinaliza a conclusão do desenvolvimento de uma
feature qualquer. Isso permite que todos os envolvidos saibam que
precisam fazer o merge do código na branch principal (mais à frente,
saberemos o que significa branch).
Após fazer as suas alterações, vá para o seu repositório e você verá um

botão dizendo "Contribute". Clique nele.
@iuricode 108
Na próxima tela, o GitHub irá mostrar a comparação entre a sua versão e

a versão do repositório original. No meu caso, apenas adicionei dois
pontos para demonstrar para você.
@iuricode 109
Na nova tela, digite um título e uma descrição para a pull request.
Após clicar em 'Create pull request', sua solicitação de alteração no

repositório original será enviada.
Você pode visualizá-la no repositório original, na aba 'Pull request'.
@iuricode 110
"Iuri, existe outra forma de contribuir em um projeto sem ser por meio de
alterações de códigos?”
Sim, existe! Chama-se "Issue".
Issues, ou problemas em português, são itens que você pode criar em um

repositório para planejar, discutir e acompanhar o trabalho.
As issues são simples de criar e flexíveis, adaptando-se a uma variedade

de cenários. Você pode usá-las para monitorar o progresso do trabalho,
dar ou receber feedback, colaborar em ideias ou tarefas e comunicar-se
eficientemente com outras pessoas.
Ao acessar o repositório, observe que ao lado da opção “Pull request”, há

a opção “Issues”. Através dela, podemos relatar algum problema no
projeto sem precisar alterar algo. Essa página pode ser utilizada tanto
pelo proprietário da página quanto por qualquer outra pessoa que queira
ajudar o projeto.
@iuricode 111
Módulo: Freela
Introdução
Neste módulo, abordarei diversas sugestões e dicas sobre como
conquistar clientes para o seu negócio. Além disso, compartilharei
exemplos de conversas com meus clientes e como consegui entregar os
projetos exatamente conforme as solicitações recebidas. Também irei
tratar de outros temas, como valores, CNPJ, desenvolvimento, contratos,
hospedagem e outros assuntos relevantes.
O que é
Freela é uma abreviação comumente utilizada para se referir a um
freelancer. Um freelancer é um profissional autônomo que oferece
serviços de forma independente, sem estar vinculado a uma empresa. O
termo "freela" ou "freelancer" é frequentemente usado para descrever
pessoas que realizam trabalhos temporários, projetos específicos ou
serviços pontuais para diversos clientes, geralmente cobrando por hora
ou por projeto realizado (eu irei dar minha opinião sobre qual é melhor). A
flexibilidade e a capacidade de escolher os projetos que desejam realizar
são algumas das vantagens do trabalho como freelancer.
@iuricode 112
Como conseguir o primeiro freela
Sem sombra de dúvidas, é a pergunta que mais recebo dos meus

seguidores no meu Instagram. Afinal, quem não gostaria de ser
empreendedor e ter seu próprio negócio, não é mesmo?
No entanto, existe um obstáculo entre o seu serviço e os clientes, e ter

apenas um portfólio e o GitHub não é suficiente para superar essa
barreira (e você já sabe disso muito bem).
Depois de adquirir as habilidades necessárias para criar sites como

desenvolvedor frontend, é preciso ganhar visibilidade na web.
"Ok, Iuri, mas como posso conseguir isso?"
LinkedIn!
Essa rede social é um tesouro para quem deseja obter visibilidade e

oportunidades na área. Além disso, no futuro você precisará ter uma
conta no LinkedIn, mesmo quando estiver empregado, pois essa rede
social é amplamente utilizada para comunicação entre a equipe (além
das chamadas).
@iuricode 113
Comece criando um bom perfil no LinkedIn para chamar a atenção de

recrutadores/clientes. Para isso, adicione
Uma boa foto (se tiver uma participando de um evento, melhor ainda)
e uma capa
Título na sua área
Uma descrição falando sobre você e sua área
Suas experiências profissionais
Formação acadêmica
Recomendações
Depois de adicionar todas as informações no seu LinkedIn, faça

networking!
Essa, sem dúvida, foi a ação que me levou a receber propostas de freelas
e empregos. Fazer network com outros desenvolvedores vai proporcionar
mais experiência e criar um ciclo de amizade. Dependendo da amizade, a
pessoa pode recomendar você para alguma empresa ou proposta de
freela que ela recebeu, mas por algum motivo não deseja fazê-lo.
Participar de fóruns e grupos relacionados ao desenvolvimento é outra

ótima oportunidade para fazer networking no LinkedIn.
@iuricode 114
Ok, tudo que te falei até aqui são coisas "óbvias" e que independente da
área em que o usuário atue, ele precisa seguir esses passos para ter um
bom perfil.
O que realmente irá aumentar sua visibilidade é a auto divulgação. Sabe
aquele projeto que você fez assistindo um vídeo de algum canal no
YouTube? Poste no LinkedIn!
Mas não apenas poste com um título como "Projeto feito com HTML e
CSS". Crie uma boa descrição.
Aqui estão alguns tópicos importantes para citar na descrição da
postagem do projeto
O motivo pelo qual você fez o projeto
Quais linguagens você utilizou
Fale um pouco sobre o projeto e o que ele é
Descreva a experiência que ele proporcionou a você
Coloque o link do projeto rodando em alguma plataforma
Inclua o link do projeto no GitHub em um repositório público
Marque o @ do dono do vídeo que você utilizou para estudar (se ele
te responder, aumentará o alcance da postagem);
@iuricode 115
Na descrição, mencione que você está disponível para freelas;

Peça feedbacks (isso é super importante);
Além disso, levante discussões interessantes sobre o projeto na

descrição da postagem e envolva a comunidade de desenvolvedores
Outra coisa importante é: Ajude outras pessoas!
Não poste apenas projetos e, especialmente, não poste um a cada dia.

Você pode diversificar o conteúdo, postando curiosidades, fazendo
perguntas, comentando nas postagens de outras pessoas e levantando
discussões interessantes sobre o mundo da tecnologia.
A produção de conteúdo ajuda a engajar sua rede, aumentar conexões e

construir uma verdadeira network ao adquirir conhecimentos.
@iuricode 116
Tirando dúvidas
Este espaço será dedicado ao esclarecimento de dúvidas frequentes que
costumo receber sobre trabalhos freelancers, abrangendo tópicos como
hospedagem, código-fonte e a definição de valores a serem cobrados.
A hospedagem é uma das questões mais comuns e confusas para quem

está começando como freelancer. A pergunta recorrente é se deve pagar
pela hospedagem do cliente, cobrar por esse serviço ou oferecê-lo
gratuitamente.
Essa decisão, na verdade, está mais nas mãos do cliente do que nas suas
ou do projeto em si. Definitivamente, a escolha pertence a ele.
Se o cliente procura você (ou você o procura) e solicita um projeto que

inclua hospedagem, a responsabilidade pelo pagamento dessa
hospedagem é dele. No entanto, esse custo não deve sair do seu próprio
bolso. Se o cliente requisitar a hospedagem, você deve incluir essa
despesa no orçamento total do projeto.
@iuricode 117
Assim, sempre que discutir o projeto, orçamentos, prazos, etc., é

fundamental abordar também a questão da hospedagem. Caso o cliente
manifeste interesse nesse serviço, apresente as opções disponíveis,
mencione as hospedagens mais utilizadas, indique qual plano seria
adequado para suas necessidades, esclareça a forma desejada para o
domínio e discuta os custos associados à hospedagem e ao domínio.
“Iuri, mas não tenho conhecimento com hospedagem”
Neste caso, você deve conversar com o cliente e informar que não
trabalha com serviços de hospedagem. Se tiver alguém para
recomendar, essa é sempre a melhor solução para esse problema.
No entanto, quero ressaltar o quanto é importante hospedar os projetos

dos freelancers para apresentá-los aos clientes.
No módulo Deploy, já aprendemos como hospedar projetos do GitHub na

Vercel. Essa plataforma é tudo o que você precisa para impressionar os
seus clientes.
Uma das práticas que tenho é criar um repositório privado para

armazenar o código de forma segura e, em seguida, fazer o deploy na
Vercel. Isso permite que o cliente acompanhe todo o processo de
desenvolvimento do projeto.
@iuricode 118
Dessa forma, o cliente consegue compartilhar todo o processo com a sua

equipe, dar sugestões de melhorias e fornecer feedbacks em tempo real.
Com isso, entramos em outra questão: o código-fonte.
Na entrega do código do projeto, existem várias formas de fazer isso, e a

melhor opção depende de como o cliente prefere.
Até hoje, experimentei apenas duas abordagens para a entrega de

códigos: enviar através do Drive e usar um repositório privado no GitHub.
Em cerca de 80% das entregas, os clientes preferiram o Drive.
Mesmo quando solicitam o envio pelo Drive, eu forneço acesso ao

repositório privado no GitHub. Para isso, crio uma organização no GitHub
onde armazeno todos os códigos dos meus projetos freelancers.
@iuricode 119
Obrigado!
Quero expressar minha sincera gratidão por ter adquirido este ebook.
Lembrando que ele ainda em desenvolvimento e que terá novos
conteúdos todos meses.
Acesse os recursos
Acessar Notion
disponíveis no Notion
Entre em nossa comunidade

Entrar na comunidade
exclusiva no Discord
@iuricode 120

eFront+Plus+ (v2 0)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

eFront+Plus+ (v2 0)

Uploaded by

Copyright:

Available Formats

Licensed to Janderson Pestana Almeida - jandersonpestana@gmail.

por Iuri Silva Versão 2.0

A importância de utilizar as tecnologias mais utilizadas no mercado

Dominar os temas complementares pode ajudar a aprimorar a qualidade

Manipulação de erros ......................................................................................... 59

Figma for VS Code .............................................................................................. 74

Comandos básicos do Git ................................................................................. 94

Contribuindo ........................................................................................................ 106

Tirando dúvidas ................................................................................................... 117

Módulo: Otimização de performance

Neste módulo, abordaremos algumas dicas de como melhorar a

Performance no frontend refere-se ao desempenho da interface de

O Lighthouse é uma ferramenta automatizada de código aberto que

aprimora a qualidade dos apps da Web.

O Lighthouse simula diversas situações que podem afetar a experiência

do usuário. Ele executa uma série de testes que verificam os parâmetros

de cada página. Além disso, existem mais de 75 métricas testadas.

Confira as mais importantes a seguir

Desempenho: tempo para interativo, latência, índice de velocidade,

otimização de recursos, tempo de execução de scripts, tamanho do

DOM, entre outros

SEO: Mobile friendly, meta, rastreamento, estrutura, entre outros

Melhores práticas: Otimização de imagem, bibliotecas JS, registro de

erros do navegador, acesso via HTTPS, vulnerabilidades conhecidas

do JS, entre outros

Acessibilidade: Elementos da página, idioma, atributos ARIA, entre

PWA (Progressive Web Application): redireciona HTTP para HTTPS,

Se você utiliza o Google Chrome você pode usar o Lighthouse de dentro

Esse recurso abrirá um painel na parte inferior ou à direita da página.

Selecione o Lighthouse na barra de ferramentas. (Se você não encontrar

a opção, clique nas duas setas no final da barra de ferramentas).

O painel abrirá a ferramenta Lighthouse. Nesta aba você pode selecionar

as métricas que quer observar no relatório. Após escolher as métricas

basta clicar em “Analisar carregamento de página”.

A sua página pode ter alterações de aparência durante a auditoria, então

Na imagem abaixo temos o relatório gerado para o teste.

Nos resultados de acessibilidade podemos ver métricas que podemos

Nos resultados de acessibilidade podemos que alguns dos feebacks que

Bem, basicamente essa é uma forma de melhores performance,

O LightHouse é uma ferramenta simples de usar e que ajudar muito o

Conseguir uma apresentação visual de alta qualidade em um site pode

resultar em tempos de carregamento mais lentos, já que imagens

pesadas são uma das principais causas desse problema. No entanto, ao

optarmos por imagens mais leves para acelerar o carregamento,

corremos o risco de comprometer a qualidade visual.

A chave está em encontrar um equilíbrio entre a qualidade das imagens e

o tempo de carregamento. Priorizar este equilíbrio é fundamental para

oferecer uma experiência satisfatória ao usuário.

Ferramentas como TinyPNG ou Compressor.io são excelentes recursos

para reduzir o tamanho das imagens sem comprometer drasticamente a

qualidade. Elas ajudam a otimizar o desempenho do site, mantendo uma

boa qualidade visual.

Assim, a estratégia ideal envolve a utilização dessas ferramentas para

comprimir as imagens, garantindo um carregamento mais rápido sem

sacrificar demais a qualidade. Isso resultará em uma experiência mais

ágil e agradável para os visitantes do seu site.

Lazy loading é uma técnica que atrasa o carregamento de imagens e

É crucial ressaltar que a implementação de cada estratégia mencionada

A otimização inteligente do carregamento de recursos, juntamente com a

Ao minificar o código, a remoção de elementos como espaços em branco

A combinação dessas práticas, a minificação para eliminar elementos

Um CDN, ou Content Delivery Network (Rede de Distribuição de

Redução da latência: Ao armazenar cópias do conteúdo do site em