FROM PREPROCESSORTO POSTPROCESSOR

DA DOVE VENIAMO?CHE SIAMO?

DOVE ANDIAMO?

PERCHÉ LA FETTA BISCOTTATA CADE SEMPRE

DAL LATO IMBURRATO?

LE GRANDI DOMANDE DEL WEBDEV

LE GRANDI DOMANDE DEL WEBDEV

QUALE FRAMEWORK JS USO OGGI?QUALE FRAMEWORK JS USO DOMANI?

Matteo Guidotto

@j8matteoProject Manager

IL LONTANO 2006

ITALIA CAMPIONE DEL MONDO

IL LONTANO 2006

STAGISTA FULLSTACK

IL LONTANO 2006

ANGOLI TONDISFONDI GRADIENTI

ANGOLI TONDI

ANGOLI TONDI

.round {

-webkit-border-top-left-radius: 1px;

-webkit-border-top-right-radius: 2px;

-webkit-border-bottom-right-radius: 3px;

-webkit-border-bottom-left-radius: 4px;

-moz-border-radius-topleft: 1px;

-moz-border-radius-topright: 2px;

-moz-border-radius-bottomright: 3px;

-moz-border-radius-bottomleft: 4px;

border-top-left-radius: 1px;

border-top-right-radius: 2px;

border-bottom-right-radius: 3px;

border-bottom-left-radius: 4px;

}

2010: FLAT DESIGN FTW

2015 CSSDAY

DA CSS A SASS

.area {

@include border-radius(10px);

@include background-

image(linear-gradient(120deg,

#2ac363, #cd8c14, #9c4cc2));

}

.area {

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

background-image: -moz-linear-

gradient(330deg, #2ac363, #cd8c14,

#9c4cc2);

background-image: -webkit-linear-

gradient(330deg, #2ac363, #cd8c14,

#9c4cc2);

background-image: linear-

gradient(120deg, #2ac363, #cd8c14,

#9c4cc2);

}

SASS DARK SIDE

NO CSS STANDARDBLOCCO MONOLITICO

POSTCSS

“PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile

future CSS syntax, inline images, and more.”

POSTCSS NON È

COSA NON E’ POSTCSS

PREPROCESSOR

CSS FUTURE SYNTAX

POSTPROCESSOR

OPTIMIZATION TOOL

MINIFIER

PLUGIN JQUERY

ALL-IN-ONE TOOL

LINTER

SUBWAY SANDWICH

POSTCSS

TOOLPLUGIN ECOSYSTEM

POSTCSS - TOOL

THE MOJO

ESSENZIALEVELOCE

MODULAREINTEGRABILE

ESSENZIALE

Libsass: 110 files, 21 300 LOC of C++Stylus: 72 files, 7 900 LOCLess: 105 files, 9 800 LOC

VELOCE

PostCSS: 39 msRework: 73 ms (1.9 times slower)libsass: 77 ms (1.9 times slower)Less: 179 ms (4.5 times slower)Stylus: 269 ms (6.8 times slower)

Stylecow: 271 ms (6.9 times slower)Ruby Sass: 1101 ms (28.0 times slower)

MODULARE

Agglomerato di plugin 200+Creare proprio plugin

INTEGRABILE

CIOÈ?

border-radius: 10px -moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

CIOÈ?

border-radius: 10px -moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

brad: round10

I PLUGIN - AUTOPREFIXER

Display: flex display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex

I PLUGIN - CSSNEXT

:root {

--color: red;

}

div {

color: var(--color);

}

div {

color: red;

}

I PLUGIN - NESTED

.phone {

&_title {

width: 500px;

@media (max-width: 500px) {

width: auto;

}

body.is_dark & {

color: white;

}

}

img {

display: block;

}

}

.phone_title {

width: 500px;

}

@media (max-width: 500px) {

.phone_title {

width: auto;

}

}

body.is_dark .phone_title {

color: white;

}

.phone img {

display: block;

}

I PLUGIN - BEM

@b nav { /* b is for block */

@e item { /* e is for element */

display: inline-block;

}

@m placement_header {

background-color: red;

}

}

.nav {}

.nav__item {

display: inline-block

}

.nav_placement_header {

background-color: red

}

I PLUGIN - STYLELINT

I PLUGIN

PRECSSRTLCSS

POSTCSS-FOCUSCSSNANO

http://postcss.parts/

HANDS ON

npm install gulp-postcss

HANDS ON

var gulp = require('gulp');var postcss = require('gulp-postcss');

HANDS ON

gulp.task('css', function () {var processors = [];return gulp.src('./src/*.css').pipe(postcss(processors)).pipe(gulp.dest('./dest'));

});

HANDS ON

var autoprefixer = require('autoprefixer');var cssnext = require('cssnext');var precss = require('precss');

HANDS ON

var processors = [autoprefixer({browsers: ['last 1 version']}),cssnext,precss

];

HANDS ON - PLUGIN

brad: round10 -moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

HANDS ON - PLUGIN

var postcss = require('postcss');

module.exports = postcss.plugin('postcss-brad', function (opts) {

opts = opts || {};

return function(css) {

css.walkDecls(function(decl) {

if (decl.prop.match(/^brad$/)) {

if (decl.value === "round10") {

decl.replaceWith("border-radius:10px");

}

}

});

};

});

OLTRE GULP

GRUNT e WEBPACKCODEPEN

CLINODEJS

https://github.com/postcss/postcss

E REACT?

let prefixer = postcssJs.sync([ autoprefixer ]);

let style = prefixer({display: 'flex'

});

style //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }

https://github.com/postcss/postcss-js

A PICCOLI PASSI?

POSTCSS + SASS + AUTOPREFIXER

POSTCSS + PRECSS

POSTCSS + MODUL*

C’È DA FIDARSI?

WORDPRESSTWITTERGOOGLE

WIKIPEDIA

E 650 milioni di download al mese

LE GRANDI DOMANDE

SOLIDO E MONOLITICOO

NUOVO E MODULARE

SE STATE PER FARE IL SALTO

PRENDETE BENE LE DISTANZE

GRAZIE!

Matteo Guidotto@j8matteo