Dejé de procrastinar en el frontend con estos 5 trucos de automatización (y uno de gestión del tiempo)

Podcasts

Llevo años como frontend y siempre he luchado contra la gestión del tiempo. Entre el CSS, los estados de carga y las mil herramientas, mi productividad se iba al carajo. Últimamente he probado un par de cosas que me han cambiado la vida:

Automatización de tareas repetitivas: Uso plop para generar componentes con su test, stories y barrel export. En vez de escribir 4 archivos, escribo plop component Button y listo.
Pomodoro con enfoque real: Nada de temporizadores tontos. Uso timew (Timewarrior) y al inicio de cada bloque escribo EXACTAMENTE qué voy a hacer (ej: 'Arreglar overflow en sidebar'). Cero multitarea.
Git hooks para evitar distracciones: Un hook pre-commit que bloquea commits si hay console.log o debugger. Me ahorra rework.
Linters y formatters automáticos: eslint --fix y prettier en cada guardado con husky. Ya no pierdo tiempo en debates de estilo.
Atajos de teclado personalizados: En VS Code, mapeé Ctrl+Shift+T para crear un test automático con Jest. Increíble.

¿Alguien más tiene trucos? ¿O creen que la automatización nos vuelve perezosos y no aprendemos lo suficiente?

Comedy

Muy buenos consejos, sobre todo lo de plop. Yo uso hygen para lo mismo y va genial. Sobre la pereza: creo que automatizar lo repetitivo te libera para pensar en arquitectura, no te vuelve perezoso. Lo que sí, no estoy de acuerdo con los git hooks restrictivos: a veces dejas un console.log a propósito para debugging y el hook te lo bloquea. Mejor un warning que un bloqueo.

Gamer

El punto 2 (Pomodoro con enfoque) me parece clave. La mayoría de la gente usa temporizadores sin un plan concreto y acaban haciendo scroll en redes. Yo añado una regla: si en 5 minutos no tengo claro el enfoque, hago una caminata de 2 minutos. Aclara la mente. ¿Alguien usa técnicas de timeboxing para frontend?

Podcasts

@respuesta1: Buen punto sobre los hooks. La verdad es que lo configuré como bloqueo porque soy muy propenso a olvidarlos, pero entiendo que puede ser molesto. Lo cambiaré a un warning con opción de saltarlo si se fuerza el commit. Gracias por la sugerencia.

Metalwork

Yo no automatizo tanto porque siento que pierdo el control de lo que genera el código. Prefiero escribir cada archivo a mano y entender bien los imports, props, etc. Sí, es más lento, pero aprendo mejor. Además, las herramientas de generación a veces crean código basura que luego hay que limpiar. ¿No os ha pasado?

TechFan

Para gestión del tiempo, recomiendo el método 'Eat the frog': hacer la tarea más incómoda (como arreglar un bug feo) primero. Y combinarlo con bloques de 2 horas sin interrupciones. Uso pomatez que es open source y permite pausas largas. Sobre automatización: discrepo, creo que si no sabes lo que hace la herramienta, no deberías usarla. Pero si la entiendes, es un superpoder.

AI

Algo que me ha ayudado mucho es el uso de snippets personalizados. En VS Code, tengo snippets para patrones comunes (React Query hook, test con testing-library, etc). No es tan automático como plop pero me da más control. Y sobre el tema de la pereza: la automatización no es pereza, es eficiencia. El problema es cuando automatizas sin entender el proceso subyacente.

Podcasts

Veo que hay división de opiniones. Me quedo con la idea de que la automatización debe ir acompañada de comprensión. @respuesta4, tienes razón en que a veces el código generado es basura, pero si personalizas bien el template, sale bastante limpio. Y @respuesta6, lo de los snippets es un paso intermedio genial. ¿Alguien ha probado bit para compartir componentes? Eso sí que ahorra tiempo en equipos grandes.

Data

Sobre el timeboxing: yo uso todoist con etiquetas de tiempo estimado (15min, 30min, 1h). Si una tarea se pasa del tiempo, la muevo al día siguiente. Eso evita el perfeccionismo. Y para frontend, recomiendo usar Storybook con Chromatic para tests visuales automáticos. Ahorra horas de revisión manual. ¿Alguien más lo usa?