las herramientas de un frontend

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 display block

Uso de variables

Crea tus propias utilidades (Mixins)

Olvídate de prefijos propietarios por cada navegador

de:border-radius .5ema:-webkit-border-radius: .5em;-moz-border-radius: .5em;-o-border-radius: .5em;-ms-border-radius: .5em;

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 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

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 -C nombre-del-archivo.css

http://css2stylus.com/

¿no lo lograste instalar? ¿las variables de entorno te jugaron una mala pasada ?

http://alphapixels.com/prepros/ https://incident57.com/codekit/

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 respectivos websites y enjoy

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/pagespeed/

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 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

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 código en modulos para crear nuestras propios componentes y librerias

!

• AMD: API para cargar dependencias de modulos de forma asincrona

Automatiza tareas con Grunt o Gulp

“Estoy aprendiendo Frontend con @LeonidasEsteban”

Gracias