Download - Modern front-end Workflow
Future JavaScript?
๏ JavaScript is based on ECMAScript standard
๏ ECMAScript has Edition
๏ A lot of feature
ECMAScriptEdition Published at Change log
1 1997 first edition
2 1998 -
3 1999 ReExp, try/catch, ...etc.
4 - -
5 2009 "strict mode", getter/setter, JSON, ...etc.
5.1 2011 -
6 (2015) 2015 class and modules, iterator, generator, arrow functions, let/const, template string, Symbol, Promise, ...etc.
2016 2016 exponentiation operator (**), Array.prototype.includes
2017 -
ES2016 (Development)
ES5 (Production)
class Shape { constructor(id, x, y) { this.id = id; this.move(x, y); }
move(x, y) { this.x = x; this.y = y; } }
var Shape = function (id, x, y) { this.id = id; this.move(x, y); };
Shape.prototype.move = function (x, y) { this.x = x; this.y = y; };
PostCSS
๏ All features by 100+ plugins
๏ Fallbacks
๏ Language extension
๏ Optimizations
๏ Shortcuts
๏ Analytics
๏ Faster than Sass
๏ automatic vendor prefixes๏ custom properties & var()๏ custom properties set & @apply๏ reduced calc()๏ custom media queries๏ media queries ranges๏ custom selectors
๏ nesting๏ color() function๏ hwb() function๏ gray() function๏ #rrggbbaa colors๏ rgba function (rgb fallback)๏ rebeccapurple color
๏ font-variant property๏ filter property (svg fallback)๏ initial value๏ rem unit (px fallback)๏ :any-link pseudo-class๏ :matches pseudo-class๏ :not pseudo-class (to l.3)
๏ ::pseudo syntax (: fallback)๏ overflow-wrap property (word-wrap fallback)๏ attribute case insensitive๏ rgb() function (functional-notation)๏ hsl() function (functional-notation)
๏ Live reloads๏ Interaction sync (scroll, click, input text)๏ CSS Injection๏ Cuts out repetitive manual tasks.
Conclusion
๏ Scaffold with Yeoman๏ Coding with Babel & PostCSS๏ Avoid human error with Lint๏ Build with Gulp๏ Preview with Browsersync