Presentación sobre Herramientas Frontend de Jesús Merino en Betabeers Salamanca.

1. Superpoderes para
desarrollo Front End
@jm_merino #bbSal

2. Jesús Merino
Responsable 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

3. ¿Qué es el Front End?
#bbSal@jm_merino

4. Cuando tu diseñador ve la web por primera vez
después de que la hayas maquetado
#bbSal@jm_merino

5. https://www.flickr.com/photos/adactio/6153558098
#bbSal@jm_merino

6. #bbSal@jm_merino

7. Superpoderes
(LOS QUE YO USO)
#bbSal@jm_merino

8. SublimeText
Plugins
➔ 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

9. Chrome Canary
Chrome Dev Tools
Extensiones
➔ Dimensions
➔ Awesome Screenshoot / Nimbus
➔ Postman (Probar API’s)
➔ LiveReload
#bbSal@jm_merino

10. ➔ Perfiles
➔ Guardar configuración de pestañas
➔ Skin personalizados
➔ Mucha personalización
Plugins zsh
➔ oh-my-zsh
➔ git
➔ z
iTerm
#bbSal@jm_merino

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

12. Grunt
Gestor 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

13. ➔ Gestor de dependencias de JS
➔ Fijar versiones
Bower-installer
➔ Para seleccionar los archivos principales
Bower
#bbSal@jm_merino

14. ➔ Scaffolding para aplicaciones web
Generadores
➔ backbone + grunt
➔ angular + gulp
➔ backbone + jasmine
➔ ....
Yeoman
#bbSal@jm_merino

15. ➔ Licecap
➔ BrowserStack
➔ BrowserSync
➔ Finch
➔ ImageOptim
Y algunos amigos más...
#bbSal@jm_merino

16. Jesús Merino
@jm_merino
jmmerino@gmail.com
github.com/jmmerino
https://www.flickr.com/photos/marcosbessa/6816307112
¡GRACIAS!