Flujos de Trabajo para un desarrollador web frontend

Hola soy @LeonidasEsteban

Estoy aprendiendo Frontend con @LeonidasEsteban

¿Qué es un frontend?

Un desarrollador que mezcla la programación y el diseño potenciando los efectos visuales y las interacciones de la web.

HTML, CSS y Javascript

Herramientas

Editor de código

Será tu fiel compañero en esas noches de ideas geniales que debas llevar a la web

Sublime Text

• Escribe código en modo sin distracciones (Distraction free mode)

• Muevete ágilmente entre los archivos de tu proyecto ⌘P

• Personalizable

• Multiplataforma

Plugins

• Package control

• Emmet

• Sublime Linter

Control de versiones

Porque siempre es buena idea tener un historial de todo lo que hacemos

Git http://git-scm.com/downloads

• add : agrega los archivos .

• commit : agrega una descripción.

• push : sube los cambios.

• pull : descarga los nuevos cambios.

• branch : ten múltiples ramas de tu proyecto.

• merge : mezcla las ramas cuando lo necesites.

• stash : si no quieres hacer un commit y debes cambiar de rama es lo más útil.

Git flow

http://danielkummer.github.io/git-flow-cheatsheet/

• git flow feature start “nombre del feature”

nuevas rama del feature

• git flow feature finish “nombre del feature”

merge de la rama con dev

!

• git flow release start “nombre del release”

crear rama a partir de dev

• git flow release finish “nombre del release”

merge de rama en dev y master

• git flow hotfix start “nombre del hotfix” //nueva rama con el nombre del feature

• git flow hotfix finish “nombre del hotfix” //merge de la rama con dev y master

Github https://github.com/

• “Red social de desarrolladores”

• Crear nuevos repositorios y organizaciones

• Revisar commits visualmente

• Editar archivos

• Muchos proyectos open source ya están en Github

Crea el website de tu proyecto automáticamente

https://pages.github.com/

¿no sabes git?

Descarga un .zip del proyecto ;)

HTML

Define semánticamente el contenido de tu website

El problemamala declaración de clases

La soluciónModulos, utilidades y jerarquía semántica

SuitCSShttp://suitcss.github.io/

• u-utilityName

• ComponentName

• ComponentName--modifierName

• ComponentName-descendentName

• ComponentName.is-stateOfComponent

5 Simples convenciones

CSS

Pon lindo todo el contenido de la web

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

Crea CSS profesional

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)

Javascript

Controla absolutamente todo lo que ocurre en tu website

https://mejorando.la/programacion/

Construye aplicaciones mantenibles con un MVC

Backbone - Angular - Ember

npm install -g browserify

battle.js

Programemos Pokemon

Requerimientos

Modelos

Vistas

Colecciones

http://leonidasesteban.com/pokemonbattle/

Porque el frontend es divertido

battle.js to bundle.js

browserify battle.js -o bundle.js

Gulp http://gulpjs.com/ npm install -g gulp

gulpfile.js

Compila

> gulp watch watchify

https://mejorando.la/frontend/

Leonidas Esteban - @LeonidasEsteban

Muchas, muchas gracias.