herramientas frontend - betabeers salamanca - enero 2015

Superpoderes para desarrollo Front End

@jm_merino #bbSal

Jesús MerinoResponsable de Front End en Selltag.com

En anteriores capítulos…● Programador Front End en LonelyPlanet● Responsable de Front End en TouristEye● Hombre orquesta en Exis-TI

Y además...● Organizador Betabeers● Comando en activo de Charrosfera

#bbSal@jm_merino

¿Qué es el Front End?

#bbSal@jm_merino

Cuando tu diseñador ve la web por primera vez después de que la hayas maquetado

#bbSal@jm_merino

https://www.flickr.com/photos/adactio/6153558098

#bbSal@jm_merino

#bbSal@jm_merino

Superpoderes(LOS QUE YO USO)

#bbSal@jm_merino

SublimeTextPlugins➔ Package Control➔ SidebarEnhancements➔ TabsExtra➔ Emmet➔ Color Highlighter➔ Sublime Linter (jslint, jshint, jscs)➔ Sintaxis (Sass, css, php, ruby…)➔ Snippets (Backbone, Twig, jQuery…)➔ EditorConfig

#bbSal@jm_merino

Chrome CanaryChrome Dev Tools

Extensiones➔ Dimensions➔ Awesome Screenshoot / Nimbus➔ Postman (Probar API’s)➔ LiveReload

#bbSal@jm_merino

➔ Perfiles➔ Guardar configuración de pestañas➔ Skin personalizados➔ Mucha personalización

Plugins zsh➔ oh-my-zsh➔ git➔ z

iTerm

#bbSal@jm_merino

Gestión de paquetes con npm

Módulos globales➔ grunt-cli➔ bower-installer

Módulos proyecto➔ grunt y compañía...

Node.js

#bbSal@jm_merino

GruntGestor de tareas para automatizar

Plugins➔ grunt-contrib-uglify: Minificado de javascript➔ grunt-contrib-sass: Compilación de sass en css. ➔ grunt-contrib-cssmin: Minificado de css➔ grunt-inject-scripts: Injección de etiquetas en HTML➔ grunt-aws-s3: Subir ficheros a amazon s3➔ grunt-imageoptim: Optimización de imágenes➔ grunt-contrib-jasmine: Tests unitarios en javascript➔ grunt-contrib-watch: Para auto-compilar css/js

#bbSal@jm_merino

➔ Gestor de dependencias de JS➔ Fijar versiones

Bower-installer➔ Para seleccionar los archivos principales

Bower

#bbSal@jm_merino

➔ Scaffolding para aplicaciones web

Generadores➔ backbone + grunt➔ angular + gulp➔ backbone + jasmine➔ ....

Yeoman

#bbSal@jm_merino

➔ Licecap➔ BrowserStack➔ BrowserSync➔ Finch➔ ImageOptim

Y algunos amigos más...

#bbSal@jm_merino

Jesús Merino@jm_merino

jmmerino@gmail.com

github.com/jmmerino

https://www.flickr.com/photos/marcosbessa/6816307112

¡GRACIAS!