Fragmentos de código JavaScript básico

 

 

 

  • SmashingConf UX y diseño, Amberes 2024
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. 30 segundos de código
    2. dominio HTML
    3. Kit de herramientas de JavaScript básico
    4. Migrando de jQuery a Vanilla JavaScript
    5. Microbibliotecas menores a 5K
    6. Una sola línea de código
    7. Desafío del código Vanilla JS
    8. Formatear de forma nativa fechas y horas de JavaScript
    9. thisvs.that
    10. Escribir código limpio y reutilizable
    11. JavaScript de la manera correcta
    12. Elegir el marco de JavaScript adecuado
    13. Bibliotecas independientes Vanilla JS

    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 .

     

    30 Seconds of Code , con un enorme repositorio de fragmentos de código cortos y 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+.

    120 fragmentos de JavaScript simples y a prueba de balas, en HTML Dom .

    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 .

    Conozca el kit de herramientas Vanilla JavaScript , una colección cada vez mayor de métodos y funciones auxiliares de JavaScript Vanilla.

    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.

    Conozca una guía de referencia práctica con patrones jQuery comunes y sus equivalentes nativos de 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.

     

    Micro.js es un repositorio curado de pequeñas bibliotecas y utilidades de JavaScript.

    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.

    Línea única de código , con utilidades JavaScript para tareas básicas y manipulaciones DOM.

    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.

    30 Days Vanilla Code Challenge , un curso en vídeo gratuito de Wes Bos.

    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.

    Curso intensivo en vídeo de JavaScript Vanilla , un curso en vídeo gratuito con 43 sesiones.

    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.

    Formatee de forma nativa las fechas y horas de JavaScript, una guía completa .

    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. Tostadora de pan

    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.

     

    esto contra aquello

    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.

    Pautas de Código Limpio , con buenos y malos ejemplos.

    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 ".

    JavaScript The Right Way, una guía completa .

    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.

    Es una buena idea estudiar el impacto de los marcos de JavaScript con Perf-Track .

     

    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





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Fragmentos de código JavaScript básico

    Fragmentos de código JavaScript básico

    SmashingConf UX y diseño, Amberes 2024 Implemente rápidamente. Implementar inteligentemente Índice 30 s

    programar

    es

    https://aprendeprogramando.es/static/images/programar-fragmentos-de-codigo-javascript-basico-1089-0.jpg

    2024-05-21

     

    Fragmentos de código JavaScript básico
    Fragmentos de código JavaScript básico

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20