Your SlideShare is downloading. ×
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Владимир Гриненко —Инструменты фронтенд-разработчика
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Владимир Гриненко —Инструменты фронтенд-разработчика

865

Published on

Мы поговорим о том, как создать эффективный и надёжный код, переложив всю лишнюю работу на роботов. Решим проблему с разным окружением у разработчиков (vagrant), научимся писать стили удобно (roole, …

Мы поговорим о том, как создать эффективный и надёжный код, переложив всю лишнюю работу на роботов. Решим проблему с разным окружением у разработчиков (vagrant), научимся писать стили удобно (roole, autoprefixer), оптимизируем получившийся CSS (clean-css, CSScomb) и графику (Imagemin, SVGO), проверим js-код (jshint, jshint-groups, jscs), убедимся, что некрасивый код не попадёт в репозиторий (git-hooks), и обсудим, как можно быстро и легко создавать новые инструменты.

Автоматизируем всё, что можно, и подумаем, что и почему — нельзя!

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
865
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Инструменты фронтенд- разработчика Владимир Гриненко BEMup в Москве, 17 мая 2014
  • 2. Бытие определяет сознание
  • 3. vagrant простая установка работа с файлами из хостовой системы прозрачная работа инструментов гарантия консистентности 4
  • 4. Поставка библиотек bower bower-npm-install 5
  • 5. Оптимизация borschik clean-css SVGO 6
  • 6. Линтеры и бьютифаеры jshint jshint-groups jscs csscomb 7
  • 7. Автоматизируй автоматику git-hooks 8
  • 8. Unit-тесты на всё mocha (visionmedia.github.io/mocha) chai (chaijs.com) sinon (sinonjs.org) sinon-chai (github.com/domenic/sinon-chai) phantomjs (phantomjs.org) mocha-phantomjs istanbul (gotwarlost.github.io/istanbul) 9
  • 9. Тесты на шаблоны html-differ (github.com/eGavr/html-differ) 10
  • 10. Тесты на верстку gemini (ru.bem.info/tools/testing/gemini) 11
  • 11. Автоматизируй автоматику travis saucelabs.com 12
  • 12. Модульная система YM Зачем: habrahabr.ru/post/181536 В чем фишка: habrahabr.ru/post/213627 Где взять: github.com/ymaps/modules 13
  • 13. Модульная система YM Асинхронный require модулей Асинхронный provide модулей Возможность передекларации/ додекларации модуля 14
  • 14. CSS-препроцессор В чем фишка: roole.org Где взять: npm i roole --save 15
  • 15. Roole написан на JS PEG.js богат фичами похож на Stylus и SASS 16
  • 16. Autoprefixer Где взять: github.com/ai/autoprefixer Забыли про вендорные префиксы 17
  • 17. ENB: Альтернативная сборка Что это: аналог bem-tools Где взять: github.com/enb-make 18
  • 18. Yoman Генераторы проектов 19
  • 19. node.js Все инструменты на node.js package.json можно использовать в качестве task-runner 20
  • 20. COA Парсер командной строки github.com/veged/coa 21
  • 21. COA цветоной хелп JS API автокомплит валидация 22
  • 22. tpl-cli volo npm i -g volo volo create my-tool arikon/tpl-cli 23
  • 23. bem-naming bem.info/tools/bem/bem-naming 24
  • 24. Спасибо!
  • 25. 26 clubs.ya.ru/bem twitter.com/bem_ru facebook.com/groups/bem.info bem.info
  • 26. 27 bit.ly/msk-bemup-feedback
  • 27. 28 Владимир Гриненко Руководитель службы разработки БЭМ tadatuta@yandex-team.ru @tadatuta

×