My Open Source (Sept 2017)
- 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
- 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 Большое начинается с малого
- 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