Fragmentos de código JavaScript básico

En una nueva serie de publicaciones, destacamos algunas de las herramientas y técnicas útiles para desarrolladores y diseñadores. Esta vez, veamos fragmentos de código JavaScript básicos: recursos y bibliotecas livianas para ayudarlo a resolver un problema sin grandes gastos generales ni dependencias de terceros.

De vez en cuando tenemos que lidiar con código heredado, atravesando lados oscuros y espeluznantes del código base, a menudo con documentación vaga, ambigua e inquietante, si es que se proporciona alguna. En tales casos, refactorizar el componente parece inevitable.

O tal vez necesite administrar fechas y matrices, o manipular DOM; simplemente no es necesario agregar una dependencia externa para una tarea simple de ese tipo, pero debemos descubrir la mejor manera de hacerlo. Siempre es una buena idea explorar también fragmentos ligeros de JavaScript estándar , preferiblemente aquellos que no tienen dependencias de terceros. Afortunadamente, no faltan herramientas para hacer precisamente eso.

### Herramientas más útiles:

• Herramientas de auditoría CSS
• Generadores CSS
• Generadores SVG
• Componentes frontales accesibles
• Consejos y atajos útiles de DevTools
• Además, suscríbete a nuestra newsletter para no perderte las próximas.

30 segundos de código

30 Seconds of Code presenta un enorme repositorio de fragmentos de código cortos para JavaScript, que incluyen ayudas para manejar primitivas, matrices y objetos, así como algoritmos, funciones de manipulación DOM y utilidades de Node.js. También puede encontrar muchas pequeñas utilidades para Python, React Hooks, React Components y Node.js. También incluye útiles hojas de trucos de JavaScript .

dominio HTML

HTML Dom proporciona más de 120 fragmentos de JavaScript simples y a prueba de balas para todo, desde alternar la visibilidad de la contraseña hasta crear vistas divididas de tamaño variable, todo compatible con navegadores modernos e IE11+.

Kit de herramientas de JavaScript básico

Vanilla JavaScript Toolkit proporciona una colección cada vez mayor de métodos básicos de JavaScript, funciones auxiliares , complementos, textos estándar, polyfills y recursos de aprendizaje. Además, Chris Ferdinandi dirige una Academia Vanilla JS , y en su boletín informativo se envían muchos consejos diarios para desarrolladores sobre Vanilla JS .

Migrando de jQuery a Vanilla JavaScript

Si todavía se encuentra en la tierra de los sistemas heredados que se ejecutan en jQuery, existe una serie de recursos que le permiten alejarse lentamente de jQuery con opciones más livianas y estandarizadas. Una de las guías excelentes es la hoja de trucos de Tobias Ahlin para pasar de jQuery a JavaScript básico , una guía de referencia práctica con algunos de los patrones jQuery más comunes y sus equivalentes en JavaScript.

También hay muchos otros recursos útiles que vale la pena consultar:

• PlainJS , Puede que no necesites jQuery y No necesitas jQuery son excelentes referencias para fragmentos de JavaScript básicos. Los sitios cuentan con repositorios de fragmentos de código para todo, desde la interfaz de usuario y las entradas hasta los medios, la navegación y los efectos visuales (con casos de uso no solo para jQuery , sino para prácticamente cualquier código heredado).
• Learn Vanilla JS incluye libros, cursos, recursos permanentes , comunidades y podcasts sobre Vanilla JS. Un repositorio fantástico que vale la pena tener cerca.
• JavaScript Framework Diet es la serie continua de Sebastian De Deyne sobre tareas comunes, resueltas sin marcos de JavaScript. Aprenderá a seleccionar elementos, delegación de eventos, estructura de archivos, menús desplegables y transiciones de entrada y salida.

Microbibliotecas menores a 5K

Micro.js es un repositorio curado de pequeñas bibliotecas y utilidades de JavaScript, recopiladas por Thomas Fuchs. Todas las bibliotecas están agrupadas y tienen un tamaño inferior a 5k, hacen una cosa y solo una cosa, y lo hacen bien.

Una sola línea de código

Phuoc Nguyen ha lanzado Single-Line-Of-Code , un repositorio de utilidades de JavaScript para todo lo relacionado con matrices, fecha y hora, manipulaciones DOM, funciones, números y objetos.

Desafío del código Vanilla JS

30 Days Vanilla JS Code Challenge es un curso en video gratuito de Wes Bos donde aprenderá a crear 30 cosas en 30 días, con 30 tutoriales, sin marcos, compiladores, bibliotecas ni textos estándar. Esa es una excelente manera de mejorar tus habilidades de JavaScript. También puede obtener los desafíos y soluciones de los 30 días como repositorio de GitHub.

El curso intensivo en video de JavaScript Vanilla es otro curso en video gratuito con 43 sesiones, que comienza con JavaScript DOM hasta sincronizar JS, Babel y Webpack y un generador de contraseñas de JavaScript.

Formatear de forma nativa fechas y horas de JavaScript

¿Todavía necesitamos bibliotecas como Moment.js o date-fns para formatear fechas y horas de JavaScript? Dado que las capacidades del navegador nativo son bastante buenas en estos días y el soporte del navegador también es excelente, no necesariamente, como señala Elijah Manor.

Elías resumió tres métodos diferentes para tratar con el tiempo y las fechas . El toLocaleDateStringmétodo resulta útil cuando desea una fecha que contenga solo números, una fecha con muchas palabras o una que se genere en un idioma diferente. Si solo necesita generar la parte de tiempo de un objeto de fecha de JavaScript, existe toLocaleTimeString.

Finalmente, el método genérico toLocaleStringle permite pasar una o todas las opciones de los anteriores a un solo método. Elijah construyó un área de juegos CodeSandbox donde puedes experimentar con los diferentes enfoques.

thisvs.that

El conocimiento profundo de un tema realmente radica en comprender las diferencias sutiles entre formas alternativas de resolver el mismo problema. ¿ En qué se nodeNamediferencia de tagName? ¿En qué se diferencian los dos operadores de incremento, por ejemplo, ++valuey value++? thisvs.that es un sitio de referencia amigable para resolver este tipo de preguntas.

El pequeño y creciente repositorio de Phuoc Nguyen explica las diferencias entre propiedades y funciones para JavaScript y TypeScript, así como DOM, HTML y CSS. Además, WTF.js es un depósito cada vez mayor de dolores de cabeza comunes, errores y comportamientos inesperados en torno a JavaScript.

Escribir código limpio y reutilizable

A nadie le gusta lidiar con código mal escrito, pero en realidad sucede con demasiada frecuencia. Para ayudarnos a hacerlo mejor, Ryan McDermott adaptó los principios de ingeniería de software del libro Clean Code for JavaScript de Robert C. Martin. El resultado es una guía práctica para producir software legible, reutilizable y refactorizable en JavaScript.

Desde hacer que las variables sean significativas y explicativas hasta limitar la cantidad de funciones y lidiar con el manejo de errores, la guía compara ejemplos de códigos buenos y malos . Por supuesto, no es necesario seguir estrictamente todos los principios, pero las pautas lo ayudarán a evaluar la calidad del código JavaScript que usted y su equipo producen.

JavaScript de la manera correcta

Aprender un nuevo idioma puede ser todo un desafío, especialmente cuando existen tantas herramientas y marcos para aprovecharlo al máximo como en el caso de JavaScript. Para evitar que se pierda en todas las posibilidades y ayudarle a aprender las mejores prácticas desde cero , William Oliveira y Allan Esquina elaboraron la guía " JavaScript The Right Way ".

Dirigida tanto a desarrolladores principiantes como experimentados que desean profundizar en las mejores prácticas de JavaScript, la guía reúne artículos, consejos y trucos de los mejores desarrolladores, cubriendo todo, desde los conceptos básicos hasta el estilo de código, herramientas, marcos, motores de juegos, recursos de lectura, screencasts y mucho más para facilitar la vida del desarrollador. La guía está disponible en ocho idiomas. Una mina de oro llena de sabiduría de JavaScript.

Y si necesita profundizar más en JavaScript, You Don't Know JS de Kyle Simpson siempre es un buen punto de partida (Kyle está trabajando en la segunda edición en este momento y también tiene muchos libros y cursos en video para explorar).

Elegir el marco de JavaScript adecuado

Hay muchas opciones a la hora de elegir un nuevo marco de JavaScript. ¿Pero necesitas uno? Y si es así, ¿cómo eliges el correcto? La lista de verificación de 12 puntos de Sacha Greif destaca 12 cosas a tener en cuenta al evaluar cualquier nueva biblioteca de JavaScript. En particular, características, rendimiento, curva de aprendizaje, compatibilidad y trayectoria.

Perf-Track realiza un seguimiento del rendimiento del marco a escala . Básicamente, realiza un seguimiento del rendimiento en términos de Core Web Vitals para Angular, React, Vue, Polymer, Preact, Ember, Svelte y AMP, en dispositivos móviles y de escritorio. Actualmente, el conjunto de datos todavía es de 2020, pero nos brinda algunas ideas sobre qué tan bien se desempeñan los sitios con estos marcos en la naturaleza. Por ejemplo, React with Gatsby funciona mejor que los creados con la aplicación Create React.

Tim Kadlec también realizó algunas investigaciones al respecto, comparando jQuery, Vue.js, Angular y React . El resultado final: la cosecha actual de marcos no está haciendo lo suficiente para priorizar los dispositivos menos potentes y ayudar a cerrar la brecha entre las computadoras de escritorio y los dispositivos móviles. Estas cifras podrían brindarle al menos algo de contexto para tomar una decisión más informada.

Bibliotecas independientes Vanilla JS

Las siguientes bibliotecas son pequeñas bibliotecas de JavaScript básicas sin dependencias. Así como son livianos, a veces es posible que deba realizar algunos ajustes, por ejemplo, para proporcionar anuncios a los lectores de pantalla o admitir navegadores heredados. Es posible que también desee consultar una Guía completa de componentes frontales accesibles .

• Vista de 360 ​​grados
  ThreeSixty.js es una herramienta para convertir un objeto de imagen en una imagen de 360 ​​grados.
• Animación
  Anime.js es una biblioteca de animación liviana que funciona con propiedades CSS, SVG, atributos Dom y objetos JavaScript. Además, Sal.js es una biblioteca de animación de desplazamiento ligera.
• Visualización de datos
  Clusterize.js es una pequeña biblioteca de JavaScript para mostrar grandes conjuntos de datos.
• Filtrado
  MixItUp 3 proporciona filtrado, clasificación, inserción y eliminación animados.
• Forms
  Choices.js es un select-box/textcomplemento de entrada configurable.
• Vista previa de imagen en pantalla completa
  Intense Image Viewer , una biblioteca para ver imágenes en pantalla completa.
• Galería de imágenes
  PhotoSwipe , admite gestos táctiles y API del historial del navegador.
• Masonry Layout
  Columns.js y Waterfall.js son opciones para el diseño de Masonry escrito en Vanilla JavaScript.
• Media Player
  Media Player , un reproductor multimedia accesible y personalizable para varios navegadores, escrito en JavaScript simple.
• Modales
  access_modal_window de Scott O'Hara.
• Parallax
  Rellax.js es una biblioteca de paralaje JavaScript básica y liviana (si es absolutamente necesaria una).
• Estados reactivos
  Reef , una biblioteca liviana para crear una interfaz de usuario reactiva basada en estados.
• Search
  InstantSearch.js es una biblioteca de interfaz de usuario de código abierto que le permite crear una interfaz de búsqueda en su aplicación front-end.
• Sliders y carruseles
  Siema , Glide , Splide.js y Swipe.js .
• Navegación deslizante
  Slideout.js es un menú de navegación deslizante táctil para vistas móviles.
• Spinners
  Spin.js crea dinámicamente indicadores de actividad giratoria, sin necesidad de imágenes ni dependencias, distribuidos como un módulo ES nativo.
• Elementos adhesivos
  HC-Sticky hace que cualquier elemento de la página sea visible mientras se desplaza una personalización. (También considere usar position="sticky"CSS en su lugar).
• Navegación fija
  MenuSpy , un pequeño JavaScript para barras de navegación fijas que cambian a medida que el usuario se desplaza por las partes de la página.
• Listas y filtros de tablas
  List.js agrega búsqueda, clasificación y filtros a listas y tablas HTML simples.
• Clasificación de tablas
  Tablesort es un componente de clasificación simple para tablas.
• Transiciones
  Barba.js es una gran alternativa al paralaje, con transiciones fluidas y fluidas entre páginas.
• Inclinación
  Tilt-Vanilla.js es una biblioteca JavaScript de inclinación 3D fluida.
• Efecto de texto de máquina de escribir
  Typewriter JS genera un efecto de máquina de escribir.
• Destellos visuales
  Speckle.js es un módulo de JavaScript que agrega puntos estilizados y responsivos a cualquier elemento.
• Editores de texto WYSIWIG
  Froala , Etherpad y SunEditor son editores de texto WYSIWIG de JavaScript básicos. Y si desea crear el suyo propio, ContentTools es una biblioteca para crear editores WYSIWIG para contenido HTML.

(Illinois)Explora más en

• Herramientas
• javascript
• Redondeos
• jQuery