The document discusses modern front-end development workflows. It addresses problems with traditional web development like slow build times. It then presents solutions like using Babel to transpile newer JavaScript syntax to older syntax for better browser compatibility, and using PostCSS to enable newer CSS features with plugins. It also recommends using linting with ESLint to catch errors, building with Gulp for faster automation, and live reloading of changes with Browsersync. The conclusion advocates setting up new projects with Yeoman and following these practices for a more productive development process.

1. Modern
Front-end Workflow
Shun Tedokon

2. ๏ I'm Programmer @ RyukyuInteractive, Inc.
๏ I ♥ JavaScript
๏ I ♥ Swift

3. Problems of
Web Development
fix checkdirection
...iterates too many times😭

4. Automation and
Productivity
Time
Cost
Scope
Quarity
Automation save time and boost productivity.

5. Next Generation
JavaScript & CSS

6. Future JavaScript?
๏ JavaScript is based on ECMAScript standard
๏ ECMAScript has Edition
๏ A lot of feature

7. ECMAScript
Edition 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 -

8. But... legacy browser does
not support ES2016😭

9. ๏ Babel is JavaScript Compiler (Transpiler)
๏ Use next generation JavaScript, today!

10. 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;
};

11. Future CSS?

12. PostCSS
๏ All features by 100+ plugins
๏ Fallbacks
๏ Language extension
๏ Optimizations
๏ Shortcuts
๏ Analytics
๏ Faster than Sass

13. @mdo: Creator of says

15. ๏ 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)

16. Linter
ESLint
Avoid human error with static code analysis.

17. ๏ Atom
๏ Sublime Text
๏ Vim
๏ Emacs
๏ etc...
Example (Vim + Syntastic + ESLint)

18. ๏ Most popular Task Runner
๏ Build assets
๏ Automation
๏ Faster than Grunt.js

19. ๏ Live reloads
๏ Interaction sync (scroll, click, input text)
๏ CSS Injection
๏ Cuts out repetitive manual tasks.

20. Video

21. ๏ "yo"
๏ Generic scaffolding system
๏ Lot of publicly generators
๏ Rapidly create a new project

22. Video

23. Conclusion
๏ Scaffold with Yeoman
๏ Coding with Babel & PostCSS
๏ Avoid human error with Lint
๏ Build with Gulp
๏ Preview with Browsersync

24. – Thank You -
“Happy coding with automation!!”