Must-have in modern Markup

Main speech by Yurii Artyukh on "Modern Markup" during First Front-end PizzaWine Pary, Lviv, 18.03.2016

Transcript

1. пам-пам
2. 10 лучших бразильских моделей Юрий Артюх
3. Must-have in вьорстка Юра Артюх, Львiв
4. Чем я занимаюсь • 11 лет верстаю • 18 человек в команде • Больше 2 тысяч сайтов • Сплю
5. Чем я не занимаюсь • Соблюдаю дедлайны • Сплю по 8 часов • Пишу много javascript
7. Slow, but clever
8. Slow, but open source
9. Photoshop CSS Hat Zeick
11. Avocode Sketch Photoshop XD CLOUD Mac OS Windows Linux
13. Адаптивность
14. not a big deal
15. CSS Media Queries Level 4 PostCSS
16. респонсификация сайтов
17. Сохранять пропорции блока
18. порядок элементов
19. порядок элементов
20. no media query! Работает в email!
22. Element query!
23. Еще • CSS Grid Layout - фантастика, http:// gridbyexample.com/examples/ • Flex, http://www.flexboxdefense.com/, flex-basis • nth-child - quantity селектор, http://alistapart.com/ article/quantity-queries-for-css
25. Сборка • Gulp • Webpack • NPM
26. PostCSS autoprefixer
27. PostCSS mqpacker
28. PostCSS postcss-svg
29. PostCSS RTL
30. PostCSS SugarSS
31. PostCSS postcss-bem
32. У каждого своя задача SASS PostCSS CSS CSS → → →
33. Pug (ex-jade)
34. Nunjucks by Mozilla пример
35. Premailer
36. Yeoman для тех у кого много проектов
37. Компонентность методологии
38. БЭМ
46. webcomponents another way to build it all
47. polymer
51. react+webpack sorry
54. Результат
55. React Webpack CSS Modules
56. react+webpack статичный сайт, postcss.org
57. Polymer vs React Реализация одной идеи
58. Иногда можно уже сейчас http://codepen.io/morgun/ pen/pyzZra
59. придется учить js чтобы верстать в 2017
60. Дякую! Запитання? Юрiй Артюх cssing.org.ua twitter.com/akella facebook.com/akella skype: akella_