O desenvolvimento front-end envolve a criação dos aspectos visuais e interativos de um site ou aplicativo que os usuários veem e com os quais interagem.  Garantir que seu código de front-end seja otimizado, sustentável e siga os padrões do setor é essencial para criar uma experiência de usuário perfeita. Aqui estão algumas práticas recomendadas a serem lembradas ao trabalhar em projetos de front-end:    : o uso de marcas HTML semânticas ajuda a melhorar a acessibilidade e a legibilidade do código. Por exemplo, em vez de usar uma tag   para representar um cabeçalho, você pode usar a tag   . Isso dá mais significado ao conteúdo e facilita a interpretação dos leitores de tela. Marcas HTML semânticas div header    <div class="header"> <h1>Welcome to my website</h1> </div>  <header> <h1>Welcome to my website</h1> </header>  Pré-   CSS: pré-processadores CSS, como SASS ou LESS, permitem o uso de recursos e técnicas avançadas em CSS que não estão disponíveis no CSS vanilla. Por exemplo, você pode usar variáveis, mixins e regras aninhadas para tornar os estilos mais organizados e fáceis de manter. processador   /* Css */ .btn { color: #ffffff; background-color: #000000; font-size: 16px; border-radius: 5px; } /* Sass */ $primary-color: #000000; $secondary-color: #ffffff; $font-size: 16px; $border-radius: 5px; .btn { color: $secondary-color; background-color: $primary-color; font-size: $font-size; border-radius: $border-radius; }    : uma CDN é uma rede de servidores que entregam conteúdo com base na localização geográfica do usuário. O uso de um CDN pode melhorar o desempenho reduzindo a distância entre o usuário e o servidor. Além disso, permite o cache dos arquivos. Use a rede de entrega de conteúdo (CDN) para js, CSS e imagens    <script src="/scripts/jquery.js"></script>  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>    : otimizar imagens e outros recursos pode ajudar a melhorar o desempenho e a velocidade do site. Isso pode ser feito por meio de técnicas como compactação de imagens, uso de formatos de arquivo de imagem apropriados e carregamento lento de imagens. Otimize imagens e outros recursos   <img src="compressed-image.jpg" alt="A compressed image" loading="lazy">    responsivas são imagens dimensionadas adequadamente para diferentes tamanhos de tela e dispositivos. Isso pode ser feito por meio do uso dos atributos   e de   na tag   . Imagens responsivas: Imagens srcset sizes img   <img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w" sizes="(max-width: 500px) 500px, (max-width: 1000px) 1000px, 1500px" src="image-large.jpg" alt="An image" >    vetoriais são imagens definidas por pontos e caminhos, em vez de pixels, e podem ser redimensionadas para qualquer tamanho sem perda de qualidade. Isso pode torná-los mais eficientes de usar, especialmente para gráficos que serão exibidos em tamanhos diferentes. Gráficos vetoriais: gráficos   <svg width="200" height="200"> <circle cx="100" cy="100" r="50" fill="#000000" /> </svg>    : um sprite de imagem é uma única imagem que contém várias imagens menores, que podem ser exibidas usando a propriedade   em CSS. Isso pode reduzir o número de solicitações HTTP necessárias para carregar as imagens, melhorando o desempenho. Use sprites de imagem background-position   .icon1 { background-image: url('icons.png'); background-position: 0 0; } .icon2 { background-image: url('icons.png'); background-position: -20px 0; }  Princípios de Acessibilidade  Aderir aos princípios de acessibilidade ajuda a tornar seu site mais inclusivo e fácil de usar para pessoas com deficiência. Isso pode ser obtido por meio de técnicas como fornecer texto alternativo para imagens, usar uma estrutura de cabeçalho adequada e adicionar rótulos de formulário adequados.  O   fornece um rótulo para um elemento que não possui um rótulo visível. Isso pode ser útil para elementos como botões ou ícones que não possuem rótulos de texto. aria-label   <button aria-label="Search"><i class="search"></i></button>  O   fornece indica os campos obrigatórios do formulário. O atributo   pode ser usado para indicar que um campo de formulário é obrigatório. Isso pode ajudar a alertar usuários e tecnologias assistivas de que o campo deve ser preenchido para enviar o formulário. aria-required aria-required   <label for="name">Name</label> <input type="text" id="name" name="name" required aria-required="true">  O atributo   permite ocultar um elemento de tecnologias assistivas. Isso pode ser útil para elementos decorativos que não transmitem informações importantes. aria-hidden   <img src="decorative.jpg" alt="" aria-hidden="true">  A   permite indicar o estado de um elemento recolhível. O atributo   pode ser usado para indicar se um elemento recolhível, como um menu suspenso, está atualmente expandido ou recolhido. Isso pode ajudar a alertar usuários e tecnologias assistivas sobre o estado atual do elemento. aria-expanded aria-expanded   <button aria-expanded="false" aria-controls="menu">Menu</button> <ul id="menu" aria-hidden="true"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul>  A   para anunciar atualizações de conteúdo. O atributo   pode ser usado para indicar que o conteúdo de um elemento pode ser atualizado de forma assíncrona. Isso pode ser útil para anunciar atualizações de conteúdo, como novas mensagens ou notificações, para tecnologias assistivas. aria-live aria-live   <div id="notifications" aria-live="polite"> <p>You have 1 new message</p> </div>  A   permite fornecer uma descrição de um elemento. O atributo   pode ser usado para especificar um elemento que fornece uma descrição para o elemento atual. Isso pode ser útil para fornecer contexto adicional ou instruções para campos de formulário ou outros elementos interativos. aria-describedby aria-describedby   <label for="email">Email address</label> <input type="email" id="email" name="email" aria-describedby="email-description"> <p id="email-description">Please enter your email address</p>  Otimizar em JavaScript  JavaScript é uma linguagem de programação poderosa e flexível, mas também pode consumir muitos recursos. Portanto, é importante otimizar seu código JavaScript para garantir que ele seja executado com eficiência e não afete o desempenho geral do seu site ou aplicativo.  Aqui estão algumas dicas para otimizar o desempenho do JavaScript:    : remover espaços em branco, comentários e outros caracteres desnecessários pode ajudar a reduzir o tamanho de seus arquivos JavaScript e melhorar o tempo de carregamento. Minimize seu código    : um compilador JavaScript, como Babel ou TypeScript, pode ajudar a otimizar o código convertendo-o em um formato mais eficiente. Compilador JavaScript    : o thread principal é responsável por lidar com as interações do usuário e renderizar a página, por isso é importante evitar bloqueá-lo com tarefas de execução longa ou com uso intensivo de recursos. Em vez disso, considere usar web workers ou funções assíncronas para descarregar essas tarefas em outros threads. Evite bloquear o thread principal  A divisão de   permite dividir o código JavaScript em partes menores que podem ser carregadas sob demanda. Isso pode melhorar o desempenho reduzindo a quantidade de código que precisa ser carregado e analisado inicialmente. Você pode usar ferramentas como Webpack ou Rollup para implementar a divisão de código. código  O   permite atrasar o carregamento do conteúdo até que seja necessário. Isso pode melhorar o desempenho reduzindo a quantidade de dados que precisam ser carregados inicialmente. Você pode usar a API   para implementar o carregamento lento. carregamento lento IntersectionObserver   // Lazy loading with IntersectionObserver const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { // Load content observer.unobserve(entry.target); } }); }); document.querySelectorAll('[data-lazy]').forEach((element) => { observer.observe(element); });  O   permite o armazenamento de dados no navegador para que possam ser reutilizados sem a necessidade de serem buscados novamente no servidor. Isso pode melhorar o desempenho reduzindo o número de solicitações de rede que precisam ser feitas. Você pode usar a   para implementar o armazenamento em cache. cache Cache API   if ('caches' in window) { caches.open('my-cache').then((cache) => { cache.add('/data.json').then(() => { console.log('Data added to cache'); }); }); }  Ferramenta de   : uma ferramenta de monitoramento de desempenho permite rastrear o desempenho do site e identificar possíveis problemas. Isso pode ajudar a otimizar o desempenho do site e melhorar a experiência do usuário. Algumas ferramentas populares incluem Lighthouse e SpeedCurve. monitoramento de desempenho    Linting: Como o ESLint, verifica o código em busca de erros e sugere melhorias, ajudando a garantir que o código seja consistente e siga as melhores práticas. Ferramenta  Conclusão  O desenvolvimento front-end envolve uma ampla gama de práticas e técnicas que podem ajudar a melhorar o desempenho e a experiência do usuário de um site.  Algumas das práticas recomendadas que você pode seguir incluem a otimização de imagens e outros recursos, seguindo os princípios de acessibilidade e otimização de JavaScript. Seguindo essas práticas recomendadas, você pode criar sites de alta qualidade e bom desempenho que proporcionam uma ótima experiência ao usuário.

Actual themes and low-cost implementation

2021 - HackerNoon Contributor of the Year - FRONTEND

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - React

2021 - HackerNoon Contributor of the Year - JAVASCRIPT-DEVELOPMENT

2021 - HackerNoon Contributor of the Year - JAVASCRIPT

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - React

Este áudio é produzido no idioma original da história!

As melhores práticas para o desenvolvimento front-end

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Como melhorar seu fluxo de trabalho em 10 vezes: 17 aplicativos essenciais

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps