Saltar al contenido

Más de 15 herramientas de front-end que debe conocer: Mis hallazgos favoritos para 2020

Más de 15 herramientas de front-end que debe conocer: Mis hallazgos favoritos para 2020

Ha pasado otro año y si eres como muchos desarrolladores web de la industria, probablemente hayas descubierto una gran cantidad de nuevas herramientas de front-end que has considerado incorporar a tu flujo de trabajo. Estoy en el mismo barco, especialmente porque estoy profundamente involucrado en investigar regularmente las novedades en el panorama de las herramientas.

En este post Voy a resumir (con algunas capturas de pantalla y demostraciones) algunas de las herramientas de front-end más interesantes que he encontrado y creo que te serán útiles en 2020. Estas no son necesariamente las herramientas más populares o las más populares, pero creo que cada una de ellas es única en su caso de uso y merece un poco más de atención. Estos son esencialmente mi hallazgos favoritos del año en herramientas de front-end.

Las mejores herramientas de front-end

Herramientas de front-end: teclas de acceso rápido

Detectar pulsaciones de teclas con JavaScript no es una tarea demasiado compleja, pero esta pequeña utilidad del equipo de GitHub lo hace súper simple.

Con él puedes activar una acción en un elemento con un atajo de teclado.

Los tipos de atajos incluyen una tecla, combinación de teclas o incluso una secuencia de teclas. También puede tener múltiples accesos directos para una sola acción.

El JavaScript es solo una declaración junto con una importación:

import {install} from './hotkey.js';

for (const el of document.querySelectorAll('[data-hotkey]')) {
  install(el)
}

Una vez que el código está en su lugar, el trabajo principal se realiza en el HTML. Aquí hay una lista de enlaces que creé para mostrar algún contenido dependiendo del acceso directo utilizado:

  • Example
  • Example
  • Example
  • Example
  • Example

Observe los atributos de teclas de acceso rápido de datos agregados a cada uno de los enlaces. Estos son los que habilitan las teclas de acceso rápido para las acciones específicas (en este caso, desencadenar un: selector de destino a través de CSS). Múltiples teclas de acceso rápido están separadas por una coma; las combinaciones de teclas están separadas por un símbolo más; y las secuencias de teclas están separadas por un espacio.

Aquí hay una demostración en vivo:

Pruebe cada uno de los accesos directos y observe que el código en el panel de JavaScript es mínimo. Muy simple de configurar, una vez que se importa el módulo. Y como un punto secundario aquí, si tiene una aplicación con múltiples teclas de acceso directo que desea mostrar en una ventana modal (como se hace en Twitter, GitHub, etc.), es posible que desee consultar QuestionMark.js y versiones anteriores proyecto mio.

Por supuesto, con los atajos de teclado, querrá tomar nota de las preocupaciones de accesibilidad, así que asegúrese de consultar el archivo README del repositorio para obtener información al respecto.

Herramientas de front-end: Freezeframe.js

Incrustar videos breves en páginas web es común para mostrar una acción que tiene lugar. A veces, un GIF animado también es apropiado. Pero los GIF tienden a distraer porque reproducen su contenido automáticamente.

Esta pequeña utilidad le permite agregar funcionalidad similar a un video a GIF animados incrustados en su HTML.

Una vez que incluya la fuente Freezeframe.js en su página, solo necesita una declaración de JavaScript:

new Freezeframe('.freezeframe', {
  trigger: 'hover',
  overlay: false
});

Si deja de lado el segundo argumento (por ejemplo, el nuevo Freezeframe (‘. Freezeframe’)), el botón predeterminado no se reproducirá y la animación se activará al pasar el ratón por encima. El único defecto con esto es que, debido a que es un GIF animado, técnicamente no puedes «pausarlo», solo puedes «detenerlo» (lo que significa que comienza de nuevo desde el principio). Pero generalmente con GIF, esto no es un gran problema.

Aquí hay una demostración con tres ejemplos diferentes:

Sin embargo, el uso de esta herramienta sola no puede ahorrar en rendimiento, ya que parece que el GIF completo se carga detrás de escena. Pero supongo que esto podría usarse junto con una biblioteca de carga diferida si el GIF está fuera de la pantalla cuando se carga la página.

Herramientas de front-end: ARC Toolkit

Sus herramientas de front-end deberían incluir muchas opciones de accesibilidad.

Esta es una extensión de Chrome que agrega una pestaña a sus herramientas de desarrollador para ayudarlo a encontrar errores de accesibilidad y advertencias relacionadas con las pautas WCAG 2.1 Nivel A y AA.

Dos razones por las que esta herramienta es tan genial:

  • Se integra con su flujo de trabajo de prueba / depuración existente dentro de las herramientas de desarrollador
  • Está hecho por The Paciello Group, conocido en la comunidad de desarrolladores por sus conocimientos de accesibilidad.

Características del kit de herramientas ARC

Una vez que la extensión esté instalada, simplemente elija la pestaña en sus herramientas de desarrollador y seleccione «Ejecutar pruebas». El resultado inicial será similar a lo que ves en la captura de pantalla anterior. Desde allí, puede profundizar para ver los posibles problemas de accesibilidad relacionados con una característica específica, como se muestra en la siguiente captura de pantalla:

Características del kit de herramientas ARC Desglose

Observe que la opción «Enlaces» a la izquierda tiene la marca de verificación al lado. Eso es lo que elegí examinar en este caso. Esto también agrega una superposición en la página que muestra dónde están todos los objetos seleccionados, como puede ver arriba de las herramientas de desarrollador en la página en vivo.

Herramientas de front-end: Scene.js

Cada año parece haber una nueva biblioteca de animación en el panorama de herramientas de front-end.

Mi elección para este año es Scene.js.

Este no es uno que puede recoger y trabajar en cuestión de minutos como los otros presentados hasta ahora.

Hay una curva de aprendizaje para acostumbrarse a la API, que se parece a esto:

let scene = new Scene({
  ".searchbox": {
    "0%" : "width: 50px",
    "70%": "width: 300px",
  },
  ".line": {
    "30%" : "width: 0%",
    "100%": "width: 100%",
  }
}, {
  duration: 1,
  easing: Scene.EASE_IN_OUT,
  selector: true,
}).exportCSS();

scene.setTime(0);
let toggle = false;

document.querySelector(".submit").addEventListener("click", function() {
  toggle = !toggle;
  scene.setDirection(toggle ? "normal" : "reverse");
  scene.play();
});

Ese es el código de uno de los ejemplos en la página de inicio. Es un pequeño cuadro de búsqueda animado simple. Aquí está su demo CodePen:

Nuevamente, esta no será una herramienta fácil de aprender rápidamente, pero si está interesado en probar una nueva biblioteca de animación con lo que parece ser una API bastante sencilla, esta podría ser una buena opción.

Herramientas de front-end: Commento

El panorama en línea actual de privacidad podría usar más herramientas como esta. He estado considerando opciones para mejorar los sistemas de comentarios en mi sitio web de WordPress por un tiempo y Commento se ve sólido.

Me gusta la funcionalidad de algo como Disqus (votos positivos / negativos, comentarios importantes, etc.) pero tiene demasiada hinchazón.

También me gusta que los comentarios de WordPress estén autohospedados de forma predeterminada, pero carecen de esas características adicionales de Disqus. Creo que Commento es un paso en la dirección correcta para solucionar estos problemas.

Si está considerando cambiar de una plataforma de comentarios existente a Commento, es bastante trabajo por lo que he leído, así que eso es una gran desventaja.

Además, aunque Commento le permite importar desde Disqus, no podrá importar los «votos» en comentarios antiguos de Disqus o los avatares de los usuarios que publicaron comentarios.

Tampoco hay forma de importar comentarios antiguos de WordPress en Commento a menos que primero exporte a Disqus, luego importe desde Disqus a Commento (lo que puede hacerse utilizando una herramienta de importación de Disqus cuando se registra en Commento).

El inconveniente final es el hecho de que Commento no es gratuito a menos que lo autohospede. Pero cuando considera los problemas de hinchazón y privacidad de Disqus, la pequeña tarifa mensual vale la pena.

Herramientas de front-end: historial de Git

Aunque esto no se encuentra únicamente en la categoría de herramientas front-end, es uno de mis favoritos en esta lista debido a su simplicidad y novedad en la forma en que funciona.

Git History le permite ver el historial de cualquier archivo en un repositorio público de Git (GitHub, GitLab o Bitbucket).

Por ejemplo, supongamos que desea ver el historial de cambios en el archivo fuente de Normalize.css. El archivo se encuentra en:

https://github.com/necolas/normalize.css/blob/master/normalize.css

Para ver su historial, reemplace github.com en la URL con github.githistory.xyz:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

La salida en la nueva URL carga una forma ordenada e interactiva de ver los cambios del archivo a lo largo del tiempo. Algunas animaciones geniales se activan cada vez que elige un punto de historial, lo que le permite ver qué cambios tuvieron lugar y qué usuario los confirmó.

Herramientas de front-end: alternar funciones CSS

Si todavía está trabajando en un entorno en el que tiene que hacer algunas pruebas de navegador heredadas, esta podría ser una pequeña extensión de Chrome agradable para agregar a su caja de herramientas de prueba.

CSS Feature Toggles, similar al ARC Toolkit mencionado anteriormente, agrega una nueva pestaña a las herramientas de desarrollador de su navegador.

En la pestaña, verá una lista de características modernas de CSS.

Funciones CSS disponibles para alternar

Puede alternarlos para ver instantáneamente cómo se ve su página cuando un usuario visita la página en un navegador que no admite esa función en particular. Esta es una excelente manera de obtener una visión general rápida de cómo se degradan sus diseños en entornos más antiguos.

Al seleccionar las diferentes funciones, la página se actualizará automáticamente para mostrar los cambios. Un sitio construido con Flexbox, por ejemplo, se beneficiará de algunos CSS más antiguos para mantener el diseño sano mientras mejora progresivamente en los navegadores más nuevos.

Herramientas de front-end: Crear aplicación

Sin duda, su flujo de trabajo de herramientas front-end incluye muchas opciones para compilaciones. Este sitio web es una combinación de un sitio de aprendizaje y una herramienta de generación de proyectos para desarrolladores que usan (o desean aprender a usar) webpack o Parcel, los populares paquetes de activos.

Desplácese por las categorías de la izquierda para elegir las opciones que desea para su compilación, luego vea los archivos necesarios y las opciones de configuración que aparecen en la ventana principal.

Crear opciones de configuración de la aplicación

La página es completamente interactiva, por lo que puede hacer clic en cualquiera de los archivos virtuales para ver su contenido, o puede desplazarse sobre una opción seleccionada para ver una descripción junto con las partes resaltadas de la compilación que son relevantes para esa opción.

¡Muy útil tanto para aprender como para crear nuevos proyectos!

Herramientas de front-end: CSS Janus

En el área de internacionalización, esta es una herramienta en línea que le permite convertir hojas de estilo de izquierda a derecha a derecha a izquierda, y viceversa.

Esto le permite crear fácilmente hojas de estilo para idiomas de derecha a izquierda (rtl) como el árabe y el hebreo.

Aquí hay un ejemplo de CSS:

.example {
  float: left;
  text-align: left;
  padding: 1px 2px 3px 4px;
  margin-left: 1em;
  background-position: 5% 100px;
  cursor: ne-resize;
  border-radius: 1px 2px;
}

Lo anterior se convertirá en lo siguiente:

.example {
  float: right;
  text-align: right;
  padding: 1px 4px 3px 2px;
  margin-right: 1em;
  background-position: 95% 100px;
  cursor: nw-resize;
  border-radius: 2px 1px;
}

Tenga en cuenta que las diferencias incluyen no solo líneas como float: left y text-align: left, sino otras como declaraciones de relleno horizontal y valores de posición de fondo.

Y útilmente, si desea que la herramienta ignore un bloque de estilo o una declaración única, puede usar la directiva @noflip:

/* @noflip */ .ignored {
  float: left;
}

.not-ignored {
  float: left;
  /* @noflip */ background: #fff (poster-ltr.png);
}

Herramientas de front-end: ladrón de colores

Color Thief es realmente limpio y bastante simple de usar, pero es muy específico en sus casos de uso.

Básicamente, con esta utilidad, puede usar JavaScript para obtener una paleta de colores de 2 a 20 colores en función de una imagen determinada.

Esto no es algo que usará en cada sitio web o aplicación, pero es una buena idea y aparentemente ha existido por un tiempo y se actualizó durante el año pasado.

Usando la API simple, puede tomar una paleta de la imagen con una sola línea:

let myPalette = colorThief.getPalette(img, 10);

A partir de ahí, solo se trata de manipular la matriz que se devuelve. Puede ver una demostración que creé en CodePen a continuación que toma un número de colores ingresados ​​por el usuario de la imagen que se muestra. El código que estoy usando en la matriz es:

myPalette.forEach(
  element => colors.innerHTML += "
" );

Estoy construyendo la paleta usando

elementos y estilos en línea. Los colores se devuelven como valores RGB.

En la demostración de CodePen, estoy usando una solución alternativa para solucionar los problemas de origen cruzado que encontré en CodePen, pero normalmente no necesitará esas líneas (comentadas) en un entorno habitual.

Herramientas de front-end: RegexGuide

Parece que cada año encuentro una aplicación interactiva genial para agregar a mi colección de herramientas de front-end que ayuda a construir expresiones regulares, así que aquí está la entrada de este año. Y si eres como yo, recibirás toda la ayuda que puedas para construirlos.

Este es un poco extraño para entenderlo al principio porque sigue los pasos uno por uno, como un mago.

Cuando haya terminado y tenga todas las condiciones establecidas, podrá probar diferentes valores para cumplir con las condiciones especificadas y la página indicará interactivamente qué funciona.

Este tipo de herramientas siempre son algunas de mis favoritas porque funcionan no solo como una forma de crear código que de otro modo sería tedioso, sino que también te ayudan a aprender la sintaxis.

Herramientas de front-end: menciones honoríficas

En mi opinión, esas son algunas de las herramientas de front-end más interesantes que he encontrado y que creo que no recibieron suficiente atención durante el año pasado. Estoy seguro de que tiene sus propios hallazgos, así que siéntase libre de dejarlos en los comentarios a continuación. Mientras tanto, aquí hay una lista final de cosas que no estaban en la lista principal, pero pensé que valía la pena mencionarlas:

  • wehatecaptchas: una alternativa de captcha sin descifrar imágenes o letras / números, ni siquiera una casilla de verificación para «confirmar que no soy un robot»

  • simpleParallax: una forma fácil de hacer efectos de paralaje con JavaScript.

  • Incorporación Lite de YouTube: aparentemente 224 veces más rápido que el código de inserción tradicional.

  • Estilos predeterminados del navegador: ingrese cualquier elemento HTML y esta herramienta le indicará el CSS predeterminado de cada navegador para ese elemento.

  • Quién puede usar: ingrese una combinación de dos colores y esta herramienta le dirá qué tipos de usuarios con discapacidad visual pueden usar ese combo para texto / fondo.

No te olvides de unirte a nuestro curso intensivo para acelerar tu sitio de WordPress. Con algunas soluciones simples, puede reducir su tiempo de carga incluso en un 50-80%:

Diseño y presentación de Karol K.

O inicie la conversación en nuestro grupo de Facebook para profesionales de WordPress. Encuentre respuestas, comparta consejos y obtenga ayuda de otros expertos de WordPress. Únete ahora, es gratis)!