0
LAS HERRAMIENTAS DE UN FRONTEND
Hola soy @LeonidasEsteban
Estoy aprendiendo Frontend con
@LeonidasEsteban
Odio la sintaxis de CSS
Aprende a usar un pre-procesador de CSS
npm install stylus
Haz modular tu
código
Mientras más encapsules tu
aplicación será más fácil editar,
quitar, agregar nuevos modulos.
Olvidate de escribir
repetitivamente las
mismas clases
body

	 color red

	 .container

	 	 color blue

	 	 a

	 	 	 displ...
Uso de variables
Crea tus propias
utilidades (Mixins)
Olvídate de prefijos
propietarios por cada
navegador
de:

border-radius .5em

a:

-webkit-border-radius: .5em;

-moz-border...
Escribe solo una vez
el código
• Compila tus archivos .styl al buen .css:
“stylus nombre-del-archivo.styl” => “nombre-del-archivo.css”
• ¿Quieres que tu ...
stylus -u nib -w -c -o css/ stylus/nombre-del-archivo.styl
¿Te convencí y quieres ya mismo trabajar en
stylus? ah que ¿ya empezaste un proyecto y esta
en css puro ? OMG OMG …
stylus...
¿no lo lograste instalar? ¿las variables de
entorno te jugaron una mala pasada ?
http://alphapixels.com/prepros/ https://i...
Bootstraping:
Construye cosas complejas de una forma muy sencilla
http://foundation.zurb.com/ http://getbootstrap.com/ http://purecss.io/
¿Qué tienen en común?
• Sistemas de grillas
• Elementos de formulario
• Botones
• Modulos
¿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
re...
Juega con tu código hasta obtener lo que
necesitas
agregar, editar y borrar html y hasta ver shadow
DOM
Consulta variables, depura funciones y aprende
javascript con la consola
Prueba responsive design
http://www.responsinator.com/
consulta carga de la página, peticiones http y
request ajax
Preguntale que tan cool estás haciendo tu trabajo
o si no te gusta Chrome usa
https://developers.google.com/speed/pagespee...
Aprende a usar un motor de templates
http://underscorejs.org/
http://jade-lang.com/
http://mustache.github.io/
Las single pages están de moda, entonces
aprende a usar un framework MV*(lol)
• Backbone.js
• 	 Simple y flexible y usa jquery <3
• 	 perfecto para iniciar
• Angular.js
• 	 Pretende extender el comport...
Ordena el llamado de dependencia con requirejs
o browserify
!
• Browserify está básado en commonjs y Requirejs en AMD
(asynchronous module definition)
!
• Commonjs: encapsula todo el ...
Automatiza tareas con Grunt o Gulp
“Estoy aprendiendo Frontend con
@LeonidasEsteban”
Gracias
Las Herramientas de un Frontend
Las Herramientas de un Frontend
Las Herramientas de un Frontend
Upcoming SlideShare
Loading in...5
×

Las Herramientas de un Frontend

1,722

Published on

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

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,722
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
26
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Las Herramientas de un Frontend"

  1. 1. LAS HERRAMIENTAS DE UN FRONTEND
  2. 2. Hola soy @LeonidasEsteban Estoy aprendiendo Frontend con @LeonidasEsteban
  3. 3. Odio la sintaxis de CSS
  4. 4. Aprende a usar un pre-procesador de CSS
  5. 5. npm install stylus
  6. 6. Haz modular tu código Mientras más encapsules tu aplicación será más fácil editar, quitar, agregar nuevos modulos.
  7. 7. Olvidate de escribir repetitivamente las mismas clases body color red .container color blue a display block
  8. 8. Uso de variables
  9. 9. Crea tus propias utilidades (Mixins)
  10. 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. 11. Escribe solo una vez el código
  12. 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. 13. stylus -u nib -w -c -o css/ stylus/nombre-del-archivo.styl
  14. 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. 15. ¿no lo lograste instalar? ¿las variables de entorno te jugaron una mala pasada ? http://alphapixels.com/prepros/ https://incident57.com/codekit/
  16. 16. Bootstraping: Construye cosas complejas de una forma muy sencilla
  17. 17. http://foundation.zurb.com/ http://getbootstrap.com/ http://purecss.io/
  18. 18. ¿Qué tienen en común? • Sistemas de grillas • Elementos de formulario • Botones • Modulos
  19. 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. 20. Juega con tu código hasta obtener lo que necesitas
  21. 21. agregar, editar y borrar html y hasta ver shadow DOM
  22. 22. Consulta variables, depura funciones y aprende javascript con la consola
  23. 23. Prueba responsive design
  24. 24. http://www.responsinator.com/
  25. 25. consulta carga de la página, peticiones http y request ajax
  26. 26. Preguntale que tan cool estás haciendo tu trabajo o si no te gusta Chrome usa https://developers.google.com/speed/pagespeed/
  27. 27. Aprende a usar un motor de templates http://underscorejs.org/ http://jade-lang.com/ http://mustache.github.io/
  28. 28. Las single pages están de moda, entonces aprende a usar un framework MV*(lol)
  29. 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. 30. Ordena el llamado de dependencia con requirejs o browserify
  31. 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. 32. Automatiza tareas con Grunt o Gulp
  33. 33. “Estoy aprendiendo Frontend con @LeonidasEsteban” Gracias
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×