El desarrollo front-end implica la creación de los aspectos visuales e interactivos de un sitio web o una aplicación que los usuarios ven e interactúan.  Asegurarse de que su código front-end esté optimizado, se pueda mantener y siga los estándares de la industria es esencial para crear una experiencia de usuario perfecta. Estas son algunas de las mejores prácticas que se deben tener en cuenta al trabajar en proyectos front-end:    : el uso de etiquetas HTML semánticas ayuda a mejorar la accesibilidad y la legibilidad del código. Por ejemplo, en lugar de usar una etiqueta   para representar un encabezado, puede usar la etiqueta de   . Esto le da más significado al contenido y hace que sea más fácil de interpretar para los lectores de pantalla. Etiquetas HTML semánticas div header    <div class="header"> <h1>Welcome to my website</h1> </div>  <header> <h1>Welcome to my website</h1> </header>  Preprocesador de   de CSS, como SASS o LESS, permiten el uso de funciones y técnicas avanzadas en CSS que no están disponibles en Vanilla CSS. Por ejemplo, puede usar variables, combinaciones y reglas anidadas para hacer que los estilos estén más organizados y fáciles de mantener. CSS: los preprocesadores   /* 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; }    : una CDN es una red de servidores que entregan contenido según la ubicación geográfica del usuario. El uso de una CDN puede mejorar el rendimiento al reducir la distancia entre el usuario y el servidor. Además, permite el almacenamiento en caché de los archivos. Use la red de entrega de contenido (CDN) para js, CSS e imágenes    <script src="/scripts/jquery.js"></script>  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>    : la optimización de imágenes y otros recursos puede ayudar a mejorar el rendimiento y la velocidad del sitio web. Esto se puede hacer a través de técnicas como la compresión de imágenes, el uso de formatos de archivo de imagen apropiados y la carga diferida de imágenes. Optimizar imágenes y otros recursos   <img src="compressed-image.jpg" alt="A compressed image" loading="lazy">    : las imágenes receptivas son imágenes que se escalan adecuadamente para diferentes dispositivos y tamaños de pantalla. Esto se puede hacer mediante el uso de los   y   en la etiqueta   . Imágenes receptivas 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" >    vectoriales son imágenes definidas por puntos y rutas, en lugar de píxeles, y se pueden escalar a cualquier tamaño sin perder calidad. Esto puede hacer que su uso sea más eficiente, especialmente para gráficos que se mostrarán en diferentes tamaños. Gráficos vectoriales: los gráficos   <svg width="200" height="200"> <circle cx="100" cy="100" r="50" fill="#000000" /> </svg>    : un sprite de imagen es una sola imagen que contiene varias imágenes más pequeñas, que se pueden mostrar usando la propiedad   en CSS. Esto puede reducir la cantidad de solicitudes HTTP necesarias para cargar las imágenes, lo que mejora el rendimiento. Use sprites de imagen background-position   .icon1 { background-image: url('icons.png'); background-position: 0 0; } .icon2 { background-image: url('icons.png'); background-position: -20px 0; }  Principios de accesibilidad  Cumplir con los principios de accesibilidad ayuda a que su sitio web sea más inclusivo y más fácil de usar para personas con discapacidades. Esto se puede lograr a través de técnicas como proporcionar texto alternativo para las imágenes, usar una estructura de encabezado adecuada y agregar etiquetas de formulario adecuadas.  La   proporciona una etiqueta para un elemento que no tiene una etiqueta visible. Esto puede ser útil para elementos como botones o íconos que no tienen etiquetas de texto. aria-label   <button aria-label="Search"><i class="search"></i></button>  El   proporciona campos de formulario obligatorios. El atributo   se puede utilizar para indicar que se requiere un campo de formulario. Esto puede ayudar a alertar a los usuarios y las tecnologías de asistencia de que el campo debe completarse para enviar el formulario. aria-required aria-required   <label for="name">Name</label> <input type="text" id="name" name="name" required aria-required="true">  El atributo   permite ocultar un elemento de las tecnologías de asistencia. Esto puede ser útil para elementos decorativos que no transmitan información importante. aria-hidden   <img src="decorative.jpg" alt="" aria-hidden="true">  El   permite indicar el estado de un elemento plegable. El atributo   se puede utilizar para indicar si un elemento plegable, como un menú desplegable, está actualmente expandido o contraído. Esto puede ayudar a alertar a los usuarios y las tecnologías de asistencia sobre el estado actual del 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>  El   para anunciar actualizaciones de contenido. El atributo   se puede utilizar para indicar que el contenido de un elemento se puede actualizar de forma asíncrona. Esto puede ser útil para anunciar actualizaciones de contenido, como nuevos mensajes o notificaciones, para tecnologías de asistencia. aria-live aria-live   <div id="notifications" aria-live="polite"> <p>You have 1 new message</p> </div>  El   permite proporcionar una descripción de un elemento. El atributo   se puede utilizar para especificar un elemento que proporciona una descripción para el elemento actual. Esto puede ser útil para proporcionar contexto adicional o instrucciones para campos de formulario u otros elementos interactivos. 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>  Optimizar en JavaScript  JavaScript es un lenguaje de programación potente y flexible, pero también puede requerir muchos recursos. Por lo tanto, es importante optimizar su código JavaScript para garantizar que se ejecute de manera eficiente y no afecte el rendimiento general de su sitio web o aplicación.  Aquí hay algunos consejos para optimizar el rendimiento de JavaScript:    : Eliminar espacios en blanco, comentarios y otros caracteres innecesarios puede ayudar a reducir el tamaño de sus archivos JavaScript y mejorar los tiempos de carga. Minimice su código  Compilador de   : un compilador de JavaScript, como Babel o TypeScript, puede ayudar a optimizar el código al convertirlo a un formato más eficiente. JavaScript    : el subproceso principal es responsable de manejar las interacciones del usuario y mostrar la página, por lo que es importante evitar bloquearlo con tareas de ejecución prolongada o que consumen muchos recursos. En su lugar, considere usar trabajadores web o funciones asincrónicas para descargar estas tareas a otros subprocesos. Evite bloquear el subproceso principal  La división de   le permite dividir el código JavaScript en fragmentos más pequeños que se pueden cargar a pedido. Esto puede mejorar el rendimiento al reducir la cantidad de código que debe cargarse y analizarse inicialmente. Puede usar herramientas como Webpack o Rollup para implementar la división de código. código  La   le permite retrasar la carga de contenido hasta que sea necesario. Esto puede mejorar el rendimiento al reducir la cantidad de datos que deben cargarse inicialmente. Puede usar la API de   para implementar la carga diferida. carga diferida 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); });  El almacenamiento en   permite el almacenamiento de datos en el navegador para que puedan reutilizarse sin necesidad de recuperarlos del servidor nuevamente. Esto puede mejorar el rendimiento al reducir la cantidad de solicitudes de red que se deben realizar. Puede utilizar la   para implementar el almacenamiento en caché. caché Cache API   if ('caches' in window) { caches.open('my-cache').then((cache) => { cache.add('/data.json').then(() => { console.log('Data added to cache'); }); }); }  Herramienta de   : una herramienta de seguimiento del rendimiento permite realizar un seguimiento del rendimiento del sitio web e identificar posibles problemas. Esto puede ayudar a optimizar el rendimiento del sitio web y mejorar la experiencia del usuario. Algunas herramientas populares incluyen Lighthouse y SpeedCurve. seguimiento del rendimiento    : como ESLint, verifica el código en busca de errores y sugiere mejoras, lo que ayuda a garantizar que el código sea consistente y siga las mejores prácticas. Herramienta Linting  Conclusión  El desarrollo front-end implica una amplia gama de prácticas y técnicas que pueden ayudar a mejorar el rendimiento y la experiencia del usuario de un sitio web.  Algunas de las mejores prácticas que puede seguir incluyen la optimización de imágenes y otros activos, el seguimiento de los principios de accesibilidad y la optimización de JavaScript. Al seguir estas mejores prácticas, puede crear sitios web de alta calidad y buen rendimiento que brinden una excelente experiencia de usuario.

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 audio es producido en el idioma original de la historia!

Las mejores prácticas para el desarrollo front-end

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una breve introducción a la teoría del cerebro de Boltzmann

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Una breve introducción a la teoría del cerebro de Boltzmann

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps