Charla sobre herramientas para ser más productivo y organizado como NPM, GulpJS, Sass, PostCSS y Yeoman para la OpenBootcamp 2016 de coSfera

1. CÓMO HACER FRONT-ENDy
parecer bueno

2. @RTeranTo
GDG Córdoba
@GDGCordobaESP
salmorejoS O F T W A R E
Recarga de celulares en Cuba
I’m Rafa Terán

3. Ya sé html, css y js
y
¿ahora qué?

4. Gestor de paquetes para JS
Ejecutar comandos a través de npm
Diferencia entre desarrollo y producción
Instalar, eliminar y actualizar dependencias

5. Package.json
{
"dependencies": {
"angular2": "^2.0.0-beta.13",
"angular-cli": "latest"
},
"devDependencies": {
"gulp": "3.9.1"
},
"name": "Slides",
"description": "Cómo hacer front-end",
"scripts": {
"start": "ng serve"
}
}

6. Node Modules
Carpeta donde se encuentran todos los módulos de Node
2 carpetas: global y proyecto

7. npm install -g package@1.0.0
Instalar, eliminar y actualizar dependencias
npm uninstall package
npm update package
npm install package@1.0.0
npm install

8. npm install package@1.0.0 —-save-dev
npm install package@1.0.0 —-save
Diferencia entre desarrollo y producción

9. npm start
ng serve
Ejecutar comandos a través de npm

10. https://www.npmjs.com/
Paquetes

11. Automatizador de tareas
Plugins
gulpfile.js
Ejecutar automágicamente tareas

12. Ejecutar automágicamente tareas
Livereload Transpilar a ES6
Compilar Sass Concatenar
Modularizar Javascript Linter
Minificar Optimizar imágenes

13. Gulpfile.js
var gulp = require('gulp'),
sass = require(‘gulp-sass’)
var buildSass = function(options) {
options = assign(defaultOptions, options);
return gulp.src(options.src)
.pipe(sass(options.sassOptions))
.on('error', options.onError)
.pipe(gulp.dest(options.dest));
}
gulp.task('sass', buildSass);
gulp.task('default', function() {
gulp.watch('./src/css/*.css', ['sass']);
});

14. Plugins
http://gulpjs.com/plugins/

15. Preprocesador de CSS
CSS con Super Poderes

16. CSS con Super Poderes
Nesting Referencias parentales
Variables Funciones (mixins)
Imports Operadores Herencia

17. Variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
body {
font: 100% Helvetica, sans-serif;
color: #333;
}

18. Nesting
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
}
}
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}

19. Funciones (mixins)
@mixin respond($media) {
@if $media == tablet {
@media only screen and ( max-width: $tablet + px ) {
@content;
}
}
@else if $media == mobile {
@media only screen and ( max-width: $mobile + px ) {
@content;
}
}
}
button {
@include respond(mobile) {
width: 100%;
}
@include respond(tablet) {
width: 580px;
}
}

20. Ref. parentales
nav {
ul {
margin: 0;
padding: 0;
background-color: black;
}
.container &.open {
background-color: white;
}
}
nav ul {
margin: 0;
padding: 0;
background-color: black;
}
.container nav.open {
background-color: white;
}

21. Imports
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

22. Operadores
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}

23. Herencia
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}

24. Transformar CSS con plugins de JavaScript
Plugins
Compatible con preprocesadores (Sass)
Funciona con un automatizador de tareas (Gulp)
No es ni pre ni postprocesador, pero podría serlo

25. Autoprefixer
.flex {
display: flex;
}
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
autoprefixer

26. PostCSS Modules
/* styles.css */
:global .page {
padding: 20px;
}
.title {
composes: title from "./mixins.css";
color: green;
}
/* mixins.css */
.title {
color: black;
font-size: 40px;
}
.page {
padding: 20px;
}
._title_116zl_1 {
color: black;
font-size: 40px;
}
._title_xkpkl_5 {
color: green;
}
Selectores automágicamente aislados
postcss-modules

27. PostCSS Sorting
p {
display: flex;
position: relative;
}
p {
position: relative;
display: flex;
}
Ordenar reglas CSS a tu gusto
postcss-sorting
{"sort-order": ["position", "display"]}

28. Container Queries Prolyfill
.element:container(width >= 100px) {
/* Styles for .element if its container is at least 100px wide */
}
.element:container(height > 100px < 200px) {
/* Styles for .element if its container is between 100px and 200px high */
}
.element:container(text-align = right) {
/* Styles for .element if its container has a right text-align */
}
Medias queries respecto al contenedor del elemento
cq-polyfill

29. PostCSS Andalusian Stylesheets
.foo {
border-radius: 3px;
background: #fff;
width: 300px;
height: 200px;
float: left;
top: 2rem;
bottom: 20px;
left: 100px;
right: 100px;
letter-spacing: -1px;
cursor: pointer !important;
text-transform: uppercase;
margin: 100px 50px;
animation: musho 5s;
}
postcss-andalusian-stylesheets
.foo {
reondeao: 3mijillah;
detrah: #fff;
ansho: 300mijillah;
largo: 200mijillah;
agarrao: isquierdah;
en-to-lo-arto: 2peasoh;
por-lo-bahini: 20mijillah;
isquierdah: 100mijillah;
deresha: 100mijillah;
huecoh: -1mijillah;
fleshita: manito !arfavó;
lah-letrah: en-grande;
separao: 100mijillah 50mijillah;
jorgorio: musho 5s;
}

30. Plugins
https://github.com/postcss/postcss#plugins

31. Herramienta para crear scaffolding
Miles de generadores
Crear tu propio generador
Crear nuevas secciones de un proyecto (controladores, test, etc)
Empezar rápido con un proyecto

32. Empezar rápido con un proyecto
yo generador-angular myPortfolio
npm install -g generator-angular
npm install -g yo

33. Crear nuevas secciones de un proyecto
yo angular:directive myDirective
yo angular:controller projects
yo angular:route myroute —uri=project/:id
yo angular:filter myFilter

34. Miles de generadores
http://yeoman.io/generators/

35. Crear tu propio generador
http://yeoman.io/authoring/

36. Preguntas

37. Muchas gracias