Herramientas y enfoques para acelerar el flujo de trabajo del desarrollador web

El desarrollo web reúne una gran cantidad de pilas, herramientas, lenguajes de programación y más. Algunas de las herramientas / flujos de trabajo aquí funcionarían en algunos casos, algunas en otros. Para abordar mejor esto, considere esta publicación como escrita desde el punto de vista de un desarrollador de WordPress Front-End, aunque las herramientas son bastante amplias y se pueden usar en muchos casos.

1 - tmux

Uno de los mayores cambios que tuve en mi flujo de trabajo fue cuando configuré tmux en mi máquina (macOS, pero también funciona para Linux, por supuesto). Si bien es posible que no lo esté utilizando en su verdadero potencial, hace un gran trabajo y me permite cambiar entre proyectos al instante, lo que ahorra mucho tiempo.

tmux tiene una extensa página de "inicio" escrita en el repositorio de GitHub del proyecto para revisar. También funciona con un teclado de inmediato con soporte para mouse que se puede habilitar. tmux usa archivos de configuración que se pueden compartir entre sistemas para una configuración instantánea.

Entonces, ¿cómo ha cambiado mi flujo de trabajo?

• tmux le brinda una manera fácil de dividir pantallas y navegar dentro de un proyecto con solo presionar dos teclas. Así que puede tener un "trago" ejecutándose en una vista, comandos para ejecutar en otra, SSH al servidor en la tercera y algunas estadísticas en la cuarta.
• Le da ventanas para cada proyecto que son como "pestañas". Aquí puede cambiar a diferentes proyectos presionando dos teclas. Tengo alrededor de 20 proyectos abiertos en pestañas todo el tiempo y cuando tengo que trabajar en un nuevo proyecto, simplemente lo cambio allí y gulp ya se está ejecutando. Estoy en los directorios correctos y puedo empezar a trabajar en menos de 2 segundos.
• Mantiene toda la configuración encendida todo el tiempo. No tiene que hacerlo cada vez que comienza a trabajar, siempre está ahí. Si su máquina se apaga y la inicia de nuevo, puede simplemente "resucitar" (con un simple complemento) a su configuración estándar y en unos 5 segundos está funcionando nuevamente. Sin embargo, es gracioso que se requiera un uso del 100% en I7-9900K para hacer eso.
• Cada panel de una ventana es su propia instancia. Por lo tanto, puede tener diferentes versiones de Nodo ejecutándose para cada panel.

Fuente

2 - Alfred (o alternativa)

Alfred es una "aplicación de productividad" para Mac con equivalentes para Windows y Linux también. Algunas de las cosas que hace Alfred son:

• Le brinda acceso rápido a programas abiertos con solo escribir algunas letras
• Ir a directorios rápidamente
• Navegue hasta encontrar lo que necesita directamente en la ventana emergente
• Abrir archivos con diferentes programas
• Busque en la web o sus programas que se han integrado y muchos más.

Con su paquete de energía hay muchas otras integraciones de “flujo de trabajo” que también pueden automatizar el trabajo.

También funciona como una calculadora de acceso rápido, administra fragmentos en todo el sistema operativo (ni siquiera es necesario acceder a él, simplemente los expande automáticamente), guarda un historial del portapapeles (salvavidas), se integra con el terminal, etc. Puede encontrarlo todo en el sitio de la aplicación.

Cómo lo uso:

• Primero, por supuesto, para abrir aplicaciones. No estoy haciendo clic con el puntero sobre los iconos, solo escribo letras y listo.
• Úselo como calculadora al escribir CSS (sucede a menudo con valores EM).
• Historial del portapapeles: a veces apilo 5-6 cosas en el portapapeles y luego las pego en el editor de código donde sea necesario. O retroceda unos días atrás para encontrar algún correo electrónico, algún fragmento, etc. o incluso una pequeña función que hace algo en un proyecto y ayudaría en otro. Toma de 2 a 3 segundos en lugar de más de 10 minutos navegar por el código.
• Vaya a los directorios de trabajo cuando realice trabajos de diseño o directamente a los archivos XD sin navegar por el buscador. Toma de nuevo 2-3 segundos frente a un minuto más o menos en el buscador.
• Fragmentos: he preparado un buen fragmento de "comentario" para Asana con capturas de pantalla de los resultados, un lugar para agregar el enlace de confirmación, el mensaje para los próximos desarrolladores, el estado si está en etapa de preparación o no, etc. Este es un mensaje de apariencia consistente en todos los comentarios que el equipo sigue fácilmente. Se necesitan menos de 2 segundos para escribir y desplegar el fragmento.

3 - Complementos / herramientas de terminal

Oh My Zsh : haz que la terminal sea útil: ZSH es un tesoro. Hay más de 270 complementos para elegir. Utiliza un archivo de configuración simple, que solo tomó unos minutos migrar de mi configuración anterior a la nueva. tmux hace lo mismo, por lo que toda la configuración del desarrollador fue de minutos. Con una cantidad tan grande de complementos para elegir, definitivamente encontrará algo útil para su flujo de trabajo.

Uno de los complementos que utilizo con más frecuencia en ZSH es "Z", que aprende las rutas que usa para acceder a las cosas. Luego te llevará a donde quieras usando solo algunos caracteres clave.

Ejemplo: $z te saltaría a /folder/path/inner/more/content/testing , un acceso directo al lugar al que fuiste anteriormente. Hace que saltar entre directorios sea sencillo.

exa - Una salida LS más bonita. Puede encontrar más en su sitio web. En resumen, también proporciona una salida rápida y agradable de archivos y directorios. De nuevo, bonita.

ripgrep : una búsqueda súper rápida. Cuando necesite buscar miles de archivos con miles de líneas de código, no debe esperar demasiado. Ripgrep está aquí para salvarte. Y, por supuesto, viene con un montón de otras funciones útiles y banderas significativas con las que trabajar. También sigue los archivos .gitignore para que los resultados sean significativos.

Fuente

git-open : una pequeña herramienta de Paul Irish en Github que hace lo que dice: abre el repositorio de git. ¿Cuál es el problema que podrías decir? ¿Recuerda la URL exacta de ese proyecto en el que estaba trabajando, por primera vez, en 6 meses? ¿Cuánto tiempo se tarda en navegar hasta él? Este comando lo abrirá directamente por ti. Y más, también lo llevará a la rama correcta.

¡Tu CLI! En mi caso, nuestro trabajo gira en torno a WordPress. Que felizmente como CLI a través del cual puede trabajar con la instalación de WP. Una configuración de sitio nueva y simple requiere comandos básicos como mkdir (crear una carpeta), git clone (clonar un repositorio), wp core download, wp db create, wp db import (todo desde WP-CLI). Escribiéndolo todo y una configuración rápida y después de 1 minuto tiene una nueva configuración en ejecución.

¡Asegúrese de verificar dos veces si hay otras CLI similares que funcionarían para usted con las herramientas que está utilizando!

Fuente

4 - Complementos de código VS

Mi elección para el editor de código / IDE es VS Code. Antes era sublime, pero con una máquina más robusta ahora puedo usar correctamente el código VS sin los 3 FPS que obtenía antes al desplazarme hacia abajo en un documento más grande.

Para la lista a continuación, no iré con extensiones súper famosas como ESLint, GitLense o paquetes de temas / íconos, ya que están bien cubiertos en casi cualquier artículo que encuentre.

• Etiqueta de cierre automático: para que no tenga que escribir las etiquetas de cierre cada vez. Es inútil cuando se hace HTML limpio con Emmet, pero ayuda cuando tienes que hacer una edición rápida.
• Etiqueta de cambio de nombre automático: también es muy útil cuando edita. Cambiará directamente las etiquetas de cierre / apertura cuando edite solo una de ellas.
• Corrector ortográfico de código: ahora no tiene que sentirse avergonzado en las relaciones públicas cuando ha escrito algo con un error tipográfico. O simplemente úselo para mantener las cosas agradables y bonitas para proyectos de código abierto.
• Acción duplicada: muy útil para crear nuevos archivos a partir de los existentes. Es un comando que se ejecuta con Cmd + P. Funciona de maravilla al crear nuevos archivos sass / js en el trabajo de front-end.
• Jumpy: ¡una herramienta increíble! Simplemente presione un atajo que defina y generará dos pequeños cuadros de letras junto a cada palabra. Escríbalos y su cursor saltará a él. Una forma rápida de navegar en un archivo sin usar el mouse.

Y un consejo / recordatorio profesional: puede obtener una vista previa de las imágenes en código VS. Cuando desarrolla una interfaz de usuario y sigue una imagen de su diseñador, puede simplemente arrastrarla a la ventana gráfica y mirarla en el lateral.

En breve:

Está lleno de herramientas e instrumentos increíbles. Siempre que detectes un trabajo repetitivo que estás haciendo o te preguntes "¿no debería haber una manera más fácil de hacerlo?", ¡Haz una búsqueda! Lo más probable es que exista una forma más rápida. Si hace eso varias veces durante el año, terminará con un flujo de trabajo agradable y ajustado que le permitirá producir trabajo a un ritmo muy rápido.

Si es posible, busque también algunas "medidas seguras": configure algunas líneas, automatice la configuración de su compilación, cree "plantillas de inicio" para trabajar, tal vez incluso escriba un poco de CLI para usted.