front end workflows
TRANSCRIPT
Front-end workflowsHerramientas y buenas prácticas
OpenWebinarsCurso de front-end (2014)
Sergio Rus@sergiorus
Tres reglas fundamentales...
1. Sé consistente
● Espacios vs. tabuladores● Tamaño tabulación● Llaves● Sentido de iteración en bucles: ++ vs. --● Nombres de variables/IDs/clases: CamelCase vs.
snake_case vs. hyphen-case● Organización del código● Organización del proyecto
2. Evita “reinventar la rueda”
Muy probablemente la mayoría de los problemas a los que te enfrentes ya han sido solucionados previamente por expertos en esa materia. Aprovecha ese conocimiento.
3. Optimiza tu flujo de trabajo
Tareas repetitivas típicas:
● Crear esqueleto de un documento HTML● Renombrado de variables/funciones● Recarga del navegador● Navegación hasta la ruta del proyecto (shell)● Generación de estáticos (assets)
LiveReload
Herramientas y buenas prácticas
Es una de las herramientas más importantes para todo desarrollador (front-end). Un buen conocimiento de ésta es fundamental.
Shell
alias server="xdg-open http://localhost:8000 && python -m SimpleHTTPServer"
Shell
Linux cheat sheet
Shell
Junto a la shell, es otra de las herramientas que todo desarrollador (front-end) debe conocer y manejar con soltura.
Editor
Los buenos editores destacan por proporcionar un gran número de plugins, atajos de teclado, snippets, … En definitiva, cuentan con un gran ecosistema y una comunidad de usuarios activa.
Editor
GitHub StyleguideCode Guide by @mdo
Buenas prácticas en HTML/CSS
How to lose weight in the browserMake the Web faster
Rendimiento
HTML5 BoilerplateHTML5 Mobile Boilerplate
Plantillas HTML
BootstrapFoundation
Frameworks HTML/CSS
SassLess
Stylus
Preprocesadores CSS
