Доклад на Hacktoberfest 2017 в Avito. Про некоторые мои проекты и несколько жизненных выводов.

1. Роман Дворнов
github.com/lahmatiy

2. Basis.js

3. • JavaScript фреймворк для создания SPA
• github.com/basisjs/basisjs
• Разрабатывается с 2006 года, на GitHub с 2011 года
• Вся необходимая инфраструктура (dev-сервер, сборка, линтеры etc)
Basis.js

5. • Документация
• Basis.js – «под капотом»
• Basis.js – почему я не бросил разрабатывать свой фреймворк
Слайды Видео
• Доклад: Инструменты разные нужны, инструменты разные важны
Слайды Видео
• Доклад: Basis.js - Production Ready SPA Framework
Слайды Видео
• Доклад: МРТ для данных
Слайды Видео
Материалы

6. Insight #1
Большие проекты очень сложно продвигать

7. CSSO

8. • Минификатор CSS
• github.com/css/csso
• Начал разрабатываться в 2011 году, с 2013 заморозился
• В октябре 2015 я стал контрибьютером, вернул к жизни, сделал лучше
CSSO

10. Вернул к жизни

11. ВремясжатияCSS(600Kb)
500 ms
1 000 ms
1 500 ms
2 000 ms
2 500 ms
3 000 ms
3 500 ms
4 000 ms
4 500 ms
5 000 ms
5 500 ms
6 000 ms
Версия CSSO
1.4.0 1.5.0 1.6.0 1.7.0 1.8.0 2.0
1 050 ms
clean-css
CSSO стал одним из самых быстрых
csso
500 ms
cssnano
23 250 ms

12. • CSSO — СЖИМАЕМ CSS
Слайды Видео
• CSSO — история ускорения
Слайды Видео
Материалы

13. Insight #2
Заброшенный проект можно подхватить и
сделать из него конфетку
Еще показательный пример с TJ Holowaychuk

14. CSSTree

15. • Инструменты для работы с CSS: парсинг, обход, генерация, валидация
• github.com/csstree/csstree
• Проект начался в результате рефакторинга парсера CSSO, в сентябре 2016
• Все еще в разработке, но все активнее используется в других проектах
• Быстрый детальный парсинг близко к спекам и поддержке браузерами
CSSTree

16. github.com/postcss/benchmark

17. 17
csstree.github.io/docs/syntax.html
Документация синтаксиса

18. 18
csstree.github.io/docs/validator.html
Валидатор синтаксиса CSS значений

19. Кое что еще
• csstree-validator – npm пакет + консольная команда
• stylelint-csstree-validator – плагин для stylelint
• gulp-csstree – плагин для gulp
• SublimeLinter-contrib-csstree – плагин для Sublime Text
• vscode-csstree – плагин для VS Code
…
19

20. • Парсим CSS
Слайды Видео
• Парсим CSS: performance tips & tricks
Слайды Видео
Материалы

21. Insight #3
Нормально делай – нормально будет

22. Самое крутое – делать
веб-разработку лучше

24. mdn/data
general data for Web technologies
CSSTree задрайвил появление mdn/data и помог исправить множество ошибок

26. CSS свойств
•mdn/data – 367
•Alexa Top 250 – 483
•Известных свойств – 1150
Что нужно сделать:
• найти неописанное свойство
• нагуглить описание
• сделать PR с описанием в JSON
Отлично для Hacktoberfest!

27. Подобные проекты
• mdn/data
This repository contains general data for Web technologies
• browser-compat-data
This repository contains compatibility data for Web technologies
• caniuse
Raw browser/feature support data from caniuse.com

28. Insight #4
Большое начинается с малого

29. Component Inspector

30. • Инструмент для инспектирования интерфейсов (компонент)
• github.com/lahmatiy/component-inspector
• Проект вышел из basis.js + результат эксперимента
• Фасад для нового UX в разработке веб-интерфейсов
Component Inspector

33. Побочные проекты
• babel-plugin-source-wrapper
Плагин для babel для мета информации о локации создания
объектов и функций
• open-in-editor (express-open-in-editor)
Node.js пакет для программного открытия файлов в редакторе
• source-fragment (express-source-fragment)
Извлечение фрагмента кода из файла + раскраска кода

34. • Инструментируй это
Слайды Видео
• Component Inspector – инструмент для инспектирования
компонент
Слайды
Материалы

35. Insight #5
Пока не попробуешь, не узнаешь что из этого
выйдет – не бойтесь экспериментировать

36. More things