Upload
matteo-guidotto
View
562
Download
0
Embed Size (px)
Citation preview
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