Čo robiť aby bol Váš front-endový kód prehľadnejší a znovupoužiteľnejší? O čom je BEM CSS, ako sa dnes píše JavaScript a čo je to ten Grunt a Gulp? Prednáška plná praktických tipov po ktorých aplikovaní nebudete rozumieť, prečo ste to niekedy robili inak.

1. WEBtlak**Dizajn / Technológie / Budúcnosť

2. Čo
s programátorom,
ktorý robí špagety?

3. HTML HELL 🔥

4. CSS HELL 🔥

5. JS HELL 🔥

6. GTFO
HELL
CODE
🖕

7. CSS

8. CSS
PREPROCESSORS
I ❤ YOU

9. LESS
Plugins:
🦄 glob - import ‘modules/**’;
🦄 clean-css
🦄 autoprefixer

10. BEM?
OOCSS?
SMACSS?

11. BEM CSS
Organizácia kódu
🦄 Blok .blok
🦄 Element .blok__element
🦄 Modifikátor .blok--modifikátor

12. BEM CSS

13. BEM CSS

15. BEM CSS

16. JS

17. ES2015

18. ES2015

19. ES2015 / class

20. ES2015 / arrow function

21. ES2015 / modules

22. WEBPACK
Module builder
🦄 1xJS
🦄 dobrá optimalizácia kódu
🦄 plugins /babel, …/

25. Grunt / Gulp
🦄 task runner / automatizácia
🦄 plugins

26. Grunt / Gulp
🦄 LESS, SASS, Stylus
🦄 Clean
🦄 Imagemin
🦄 Webpack
🦄 Watch

27. Grunt / Gulp
🦄 git
🦄 server / nodemon /
🦄 linters

28. Grunt / Gulp
🦄 time-grunt
🦄 eslint
🦄 XO
🦄 …

31. grunt watch
grunt release:major

33. Zhrnutie?

34. Zhrnutie?
- 1x optimalizovaný CSS
- 1x optimalizovaný JS
- minifikované obrázky
- prehľadný a kvalitný kód
- efektívne automatizované workflow
- radosť z práce
- ľahší návrat k projektu po čase

35. front-end dobrý,
čo zbytok?
🤗 🤗 🤗

36. procesy?

37. Čo čítať?
🦄 http://blog.scr.sk/2014/10/bem-metodika/
🦄 http://blog.scr.sk/2015/11/javascript-dnes-spravne/
🦄 https://babeljs.io/docs/learn-es2015/
🦄 http://webpack.github.io/
🦄 http://getbem.com/introduction/
🦄 http://andrejgajdos.com/setting-up-webpack-for-es6-react-sass-
and-bootstrap/
🦄 JavaScript Weekly / HTML5 Weekly / Node Weekly

38. Koho sledovať?
🦄 https://github.com/sindresorhus/ama
🦄 https://github.com/gaearon/ama
🦄 https://github.com/holman/ama
🦄 https://github.com/tj

39. WEBtlak**Dizajn / Technológie / Budúcnosť
Ďakujem
#5
@TomasStankovic
hello@slinto.sk
github.com/slinto
Ďakujem

40. WEBtlak**Dizajn / Technológie / Budúcnosť