Presentación de Mejorando.la Conferencia México 2014

1. LAS HERRAMIENTAS DE UN FRONTEND

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

3. Odio la sintaxis de CSS

4. Aprende a usar un pre-procesador de CSS

5. npm install stylus

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

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

8. Uso de variables

9. Crea tus propias
utilidades (Mixins)

10. Olvídate de prefijos
propietarios por cada
navegador
de:
border-radius .5em
a:
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
-o-border-radius: .5em;
-ms-border-radius: .5em;

11. Escribe solo una vez
el código

12. • Compila tus archivos .styl al buen .css:
“stylus nombre-del-archivo.styl” => “nombre-del-archivo.css”
• ¿Quieres que tu archivo css este comprimido ?
stylus -c nombre-del-archivos.styl
• ¿quieres que use algun plugin intermediario ?
stylus -u nib
• ¿quieres que el archivo compile cada vez que guardas cambios?
stylus -w nombre-del-archivo.styl
• ¿quieres exportar el archivo css en alguna otra carpeta
que no sea la misma del .styl? stylus -o

13. stylus -u nib -w -c -o css/ stylus/nombre-del-archivo.styl

14. ¿Te convencí y quieres ya mismo trabajar en
stylus? ah que ¿ya empezaste un proyecto y esta
en css puro ? OMG OMG …
stylus -C nombre-del-archivo.css
http://css2stylus.com/

15. ¿no lo lograste instalar? ¿las variables de
entorno te jugaron una mala pasada ?
http://alphapixels.com/prepros/ https://incident57.com/codekit/

16. Bootstraping:
Construye cosas complejas de una forma muy sencilla

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

18. ¿Qué tienen en común?
• Sistemas de grillas
• Elementos de formulario
• Botones
• Modulos

19. ¿Qué los diferencia a cada uno?
El nombre!
Elige cómo te gustaría que se vea tu app según lo que ves en cada una de sus
respectivos websites y enjoy

20. Juega con tu código hasta obtener lo que
necesitas

21. agregar, editar y borrar html y hasta ver shadow
DOM

22. Consulta variables, depura funciones y aprende
javascript con la consola

23. Prueba responsive design

24. http://www.responsinator.com/

25. consulta carga de la página, peticiones http y
request ajax

26. Preguntale que tan cool estás haciendo tu trabajo
o si no te gusta Chrome usa
https://developers.google.com/speed/pagespeed/

27. Aprende a usar un motor de templates
http://underscorejs.org/
http://jade-lang.com/
http://mustache.github.io/

28. Las single pages están de moda, entonces
aprende a usar un framework MV*(lol)

29. • Backbone.js
• Simple y flexible y usa jquery <3
• perfecto para iniciar
• Angular.js
• Pretende extender el comportamiento de HTML con directivas
• Las reglas y los data-binding definen como se comporta la
aplicación
• Ember.js
• Sigue las convenciones y todo estará bien
• Debes hacer las cosas como ember quiere que las hagas

30. Ordena el llamado de dependencia con requirejs
o browserify

31. !
• Browserify está básado en commonjs y Requirejs en AMD
(asynchronous module definition)
!
• Commonjs: encapsula todo el código en modulos para crear
nuestras propios componentes y librerias
!
• AMD: API para cargar dependencias de modulos de forma
asincrona

32. Automatiza tareas con Grunt o Gulp

36. “Estoy aprendiendo Frontend con
@LeonidasEsteban”
Gracias