Get best of the week

5 herramientas gratuitas de productividad para desarrolladores web

El autor del art铆culo, cuya traducci贸n publicamos hoy, dice que una de las formas de organizar racionalmente el trabajo del desarrollador es utilizar herramientas que le permitan lograr m谩s con menos esfuerzo. Aqu铆 quiere hablar sobre 5 herramientas maravillosas que permitir谩n a cualquier desarrollador aumentar su productividad. Aqu铆 hay un video que brinda una descripci贸n general de estas herramientas.



Notas preliminares


S茅 que los que leen esto no tienen demasiado tiempo, as铆 que aqu铆 solo describir茅 brevemente las herramientas que se le ofrecen. Si le gusta algo, puede integrarlo f谩cilmente en su flujo de trabajo. Adem谩s, quiero se帽alar que no tengo nada que ver con ninguno de los proyectos considerados aqu铆. Solo quiero compartir con todos los que quieran beneficiarme.

1. Excalidraw



Excalidraw

Si est谩 dise帽ando una arquitectura de software y sigue dibujando todo tipo de esquemas, entonces puede que le guste el proyecto Excalidraw . Esta herramienta le permite participar en la construcci贸n de equipos de varios tipos de esquemas en el navegador. Nosotros en Devias, utilizamos Excalidraw para realizar sesiones de lluvia de ideas sobre diversos temas, como el comportamiento del usuario en el sitio o la arquitectura de nuestro backend. Como ya se mencion贸, Excalidraw admite la colaboraci贸n. Y esto, especialmente ahora, durante la cuarentena, cuando muchos trabajan en un sitio remoto, es especialmente 煤til. El 煤nico inconveniente de este proyecto, derivado de su apertura y de forma gratuita, es que no admite el almacenamiento de datos en la nube, lo que permitir铆a, por ejemplo, guardar los resultados del trabajo en su cuenta. Pero, francamente, este no es un problema particularmente grande, ya que los resultados del trabajo se pueden guardar localmente y, si es necesario, volver a cargar en el sitio.

2. Transici贸n del icono de Nucleo



Nucleo Icon Transition

Ahora pasemos a cosas m谩s pr谩cticas y hablemos de una peque帽a herramienta que le permite generar transiciones entre dos iconos SVG. Este es un proyecto Nucleo Icon Transition . Aqu铆 puede configurar el efecto de transici贸n (escalar o rotar), seleccionar el tipo de evento que desencadena la transici贸n (hacer clic o pasar el mouse). Esta herramienta genera un 煤nico archivo SVG que contiene descripciones de ambos 铆conos y el c贸digo JavaScript responsable de la transici贸n. La esencia de esta herramienta es que equipa iconos con las clases con las que trabaja el script.

Para agregar un icono animado a su proyecto, simplemente cargue el archivo SVG resultante y agregue su contenido a su c贸digo HTML. As铆 es como se ver铆a el contenido de este archivo.


Contenido de un archivo SVG generado autom谩ticamente

Esto es lo que obtuve.


Icono animado generado autom谩ticamente

Si planea usar el efecto de transici贸n para muchos iconos, puede optimizar el c贸digo con un script, ya que el mismo script se usa en todas partes.

3. Escala de tipo



Type Scale

Si, como yo, a menudo crea sitios desde cero, entonces puede que le guste el proyecto Type Scale , que puede ayudarlo en la selecci贸n de fuentes. Admite la selecci贸n de fuentes y la personalizaci贸n de sus propiedades, como el tama帽o y el factor de escala. La configuraci贸n de la fuente se muestra inmediatamente en la p谩gina utilizando el texto de la plantilla que contiene varios elementos. Puede exportar c贸digo CSS que contenga opciones de fuente. Normalmente uso esta herramienta cuando necesito algunas fuentes especiales, y no quiero pasar demasiado tiempo eligiendo sus par谩metros.

4. Investigaci贸n itinerante



Investigaci贸n itinerante

Mi productividad ayuda a mantener el uso continuo de las listas de tareas. Para mantener tales listas, uso la aplicaci贸n Roam Research, que, entre otras cosas, le permite conectar negocios. El proyecto utiliza algo como un lenguaje de marcado especial. Las relaciones entre casos le permiten considerar listas de tareas en forma de entidades interconectadas, lo que ayuda, por ejemplo, a llegar a los or铆genes de una determinada idea y analizar los pasos asociados con su implementaci贸n. De hecho, la forma en que funciona este proyecto es bastante dif铆cil de explicar, o tal vez simplemente no s茅 c贸mo expresar tales ideas. Empec茅 a usar Roam Research hace solo unos d铆as, pero debo decir que realmente me gust贸 la idea de este proyecto. Quiz谩s esto se deba al hecho de que me est谩 presionando para crear notas cortas que expresen las descripciones m谩s importantes, en lugar de largas, de casos que nunca le铆. Ahora Roam Research es un proyecto gratuito, debido a su novedad. Pero estoy bastante seguroque su opci贸n gratuita siempre existir谩.

5. Happy Hues



Happy Hues

Esta herramienta est谩 destinada a desarrolladores que est谩n un poco involucrados en el dise帽o. Se trata del proyecto Happy Hues . M谩s bien no es una aplicaci贸n, sino un recurso dise帽ado para aquellos que no son muy buenos para elegir paletas de colores. En este sitio puede encontrar muchas combinaciones de colores preseleccionadas. Supongo que es simplemente imposible no encontrar algo que coincida con tu estilo. Siempre tengo este recurso a mano, recurriendo a 茅l, por ejemplo, cuando necesito encontrar una buena combinaci贸n de colores, que se distingue por un nivel de contraste decente y pasa las pruebas de disponibilidad de contenido.

Resumen


Acabo de compartir con ustedes una lista secreta de herramientas que me ayudan a trabajar productivamente. Es posible que algunos de ellos te sean 煤tiles. Si conoce alguna herramienta interesante que aumente la productividad de los desarrolladores web, 隆comp谩rtala en los comentarios!

Le recordamos que continuamos con el concurso de predicci贸n en el que puede ganar un nuevo iPhone. Todav铆a hay tiempo para entrar y hacer el pron贸stico m谩s preciso sobre los valores t贸picos.

More articles:


All Articles