El documento resume tres reglas fundamentales para el desarrollo front-end: 1) ser consistente, 2) evitar reinventar la rueda y aprovechar soluciones existentes, y 3) optimizar el flujo de trabajo mediante herramientas como LiveReload. También recomienda herramientas como la shell, editores, estilos guías, plantillas HTML, preprocesadores CSS, gestores de dependencias y automatización de tareas para mejorar la productividad.

1. Front-end workflows
Herramientas y buenas prácticas
OpenWebinars
Curso de front-end (2014)
Sergio Rus
@sergiorus

3. Tres reglas fundamentales...

4. 1. Sé consistente

5. ● Espacios vs. tabuladores
● Tamaño tabulación
● Llaves
● Sentido de iteración en bucles: ++ vs. --
● Nombres de variables/IDs/clases: CamelCase vs.
snake_case vs. hyphen-case
● Organización del código
● Organización del proyecto

6. EditorConfig

7. 2. Evita “reinventar la rueda”

8. Muy probablemente la mayoría de los problemas
a los que te enfrentes ya han sido solucionados
previamente por expertos en esa materia.
Aprovecha ese conocimiento.

9. 3. Optimiza tu flujo de trabajo

10. Tareas repetitivas típicas:
● Crear esqueleto de un documento HTML
● Renombrado de variables/funciones
● Recarga del navegador
● Navegación hasta la ruta del proyecto (shell)
● Generación de estáticos (assets)

11. LiveReload

12. Herramientas y buenas prácticas

13. Es una de las herramientas más importantes
para todo desarrollador (front-end). Un buen
conocimiento de ésta es fundamental.
Shell

14. alias server="xdg-open http://localhost:8000 && python -m SimpleHTTPServer"
Shell

15. Linux cheat sheet
Shell

16. z - jump around
Shell

17. Junto a la shell, es otra de las herramientas que
todo desarrollador (front-end) debe conocer y
manejar con soltura.
Editor

18. Los buenos editores destacan por proporcionar
un gran número de plugins, atajos de teclado,
snippets, … En definitiva, cuentan con un gran
ecosistema y una comunidad de usuarios activa.
Editor

19. GitHub Styleguide
Code Guide by @mdo
Buenas prácticas en HTML/CSS

20. How to lose weight in the browser
Make the Web faster
Rendimiento

21. HTML5 Boilerplate
HTML5 Mobile Boilerplate
Plantillas HTML

22. Bootstrap
Foundation
Frameworks HTML/CSS

23. Sass
Less
Stylus
Preprocesadores CSS

24. Bower
Gestor de dependencias front-end

25. Grunt
Automatización de tareas

26. Yeoman
Andamiaje de proyectos