Este documento proporciona una guía sobre las herramientas y flujos de trabajo fundamentales para un desarrollador frontend, incluyendo editores de código como Sublime Text, sistemas de control de versiones como Git, plataformas como GitHub, frameworks para CSS como Bootstrap, y librerías de JavaScript como Backbone para crear aplicaciones mantenibles siguiendo el patrón MVC. También recomienda herramientas como Gulp para automatizar tareas y compilar código.

1. Flujos de Trabajo para un desarrollador web
frontend

2. Hola soy @LeonidasEsteban
Estoy aprendiendo Frontend con
@LeonidasEsteban

3. ¿Qué es un frontend?
Un desarrollador que mezcla la programación y el diseño potenciando los
efectos visuales y las interacciones de la web.

4. HTML, CSS y Javascript

5. Herramientas

6. Editor de código
Será tu fiel compañero en esas noches de ideas geniales que debas llevar a la
web

7. Sublime Text

8. • Escribe código en modo sin distracciones (Distraction
free mode)
• Muevete ágilmente entre los archivos de tu proyecto
⌘P
• Personalizable
• Multiplataforma

9. Plugins
• Package control
• Emmet
• Sublime Linter

10. Control de versiones
Porque siempre es buena idea tener un historial de todo lo que hacemos

12. Git
http://git-scm.com/downloads

13. • add : agrega los archivos .
• commit : agrega una descripción.
• push : sube los cambios.
• pull : descarga los nuevos cambios.
• branch : ten múltiples ramas de tu proyecto.
• merge : mezcla las ramas cuando lo necesites.
• stash : si no quieres hacer un commit y debes
cambiar de rama es lo más útil.

14. Git flow
http://danielkummer.github.io/git-flow-cheatsheet/

15. • git flow feature start “nombre del feature”
nuevas rama del feature
• git flow feature finish “nombre del feature”
merge de la rama con dev
!

16. • git flow release start “nombre del release”
crear rama a partir de dev
• git flow release finish “nombre del release”
merge de rama en dev y master

17. • git flow hotfix start “nombre del hotfix” //nueva rama
con el nombre del feature
• git flow hotfix finish “nombre del hotfix” //merge de la
rama con dev y master

18. Github
https://github.com/

19. • “Red social de desarrolladores”
• Crear nuevos repositorios y organizaciones
• Revisar commits visualmente
• Editar archivos
• Muchos proyectos open source ya están en Github

20. Crea el website de tu proyecto automáticamente
https://pages.github.com/

21. ¿no sabes git?
Descarga un .zip del proyecto ;)

22. HTML
Define semánticamente el contenido de tu website

23. El problema
mala declaración de clases

24. La solución
Modulos, utilidades y jerarquía semántica

25. SuitCSS
http://suitcss.github.io/

26. 5 Simples convenciones
• u-utilityName
• ComponentName
• ComponentName--modifierName
• ComponentName-descendentName
• ComponentName.is-stateOfComponent

27. CSS
Pon lindo todo el contenido de la web

28. http://foundation.zurb.com/ http://getbootstrap.com/ http://purecss.io/

29. Crea CSS profesional

30. npm install stylus

31. Haz modular tu
código
Mientras más encapsules tu
aplicación será más fácil editar,
quitar, agregar nuevos modulos.

32. Olvidate de escribir
repetitivamente las
mismas clases
body
color red
.container
color blue
a
display block

33. Uso de variables

34. Crea tus propias
utilidades (Mixins)

35. Javascript
Controla absolutamente todo lo que ocurre en tu website

36. https://mejorando.la/programacion/

39. Construye aplicaciones mantenibles con un MVC

40. Backbone - Angular - Ember

41. npm install -g browserify

42. Programemos Pokemon
battle.js

43. Requerimientos

44. Modelos

45. Vistas

46. Colecciones

48. http://leonidasesteban.com/pokemonbattle/
Porque el frontend es divertido

49. battle.js to bundle.js
browserify battle.js -o bundle.js

50. Gulp
http://gulpjs.com/ npm install -g gulp

51. gulpfile.js

52. Compila
> gulp watch watchify

53. https://mejorando.la/frontend/

54. Muchas, muchas gracias.
Leonidas Esteban - @LeonidasEsteban