FRIDAY SEMINARS - SEPTIEMBRE 2012- Multiplica tu productividad implicando al equipo
Multiplica tu productividad usando un preprocesador de css
-
Upload
leonidas-esteban-gonzalez -
Category
Documents
-
view
178 -
download
0
Transcript of Multiplica tu productividad usando un preprocesador de css
Multiplica tu productividad usando un preprocesador
de CSSLeonidas Esteban @LeonidasEsteban [email protected]
Estoy aprendiendo Frontend con @LeonidasEsteban en #CPQuito4
Páginas web(la era de ofrecer nuestro trabajo por solo dar presencia
en internet se acabó)
Aplicaciones web(porque es más rentable)
• Rendimiento • Escalabilidad • Soporte
Optimizar flujos de trabajo backend / frontend
Tecnologías del lado del servidorPython, PHP, Ruby
Frameworks para esas tecnologíasDjango, Laravel, Rails
Tecnologías del lado del clienteHTML, CSS, Javascript
Preprocesadores para esas tecnologíasJade, (Stylus, Sass, Less), Coffeescript
CONTEXTO
HTMLEstructura
CSSDiseño
JavascriptInteractividad
Hablemos de CSS
Sintaxis
https://mejorando.la/mini/Caso de estudio
Features
• Código optimizado
• Fácil de hacer cambios
• Reusable
• Soporte de navegadores modernos
Tiempo de creación4 horas
Escalabilidad
Tiempo de ediciónunos segundos dependiendo de cuanto demore el
compilador :P
Soporte
411 lineas !9KB
rendimiento
Una linea de código7KB
Rendimiento
¿Reusable? ¿Fácil de cambiar?
Esto no pudo haberse hecho de una forma
“Tradicional”
¿qué es un preprocesador de CSS?
Un mediador entre una mejor sintaxis y el css de toda la vida
Lenguaje > compilar > css
Escribe menos y haz más(slide no patrocinado por jQuery)
Resultado: mini-septiembre2014.styl
#likeabossCódigo optimizado
Variables(css no tiene variable >.<)
Fácil de hacer cambios
Módulos(Los quitamos si dejan de ser necesarios)
Reutilizable
OMG MágiaMiniDate.styl
Soporte de navegadores
mini-septiembre2014.css 7KB
Estoy aprendiendo Frontend con @LeonidasEsteban en #CPQuito4
Muchas, muchas gracias :)
https:mejorando.la/frontend/