Automating style guide documentation

These are the slides for my FOSDEM `18 talk about how we, Zalando Retail Unit, automated the process of documenting our style guide, creating it and keeping it updated.

For more details, check out the page. https://fosdem.org/2018/schedule/event/documentjs_to_document_a_styleguide_and_source_code/

Transcript

1. 1 AUTOMATING STYLE GUIDE DOCUMENTATION
2. 2 @Fokusman @Fokusferit FERIT TOPCU
3. 3 Markets 15 Employees >14K Items >250K Tech ~2000 • Europe’s leading online fashion platform founded 2008 in Berlin ZALANDO
4. WHY A STYLE GUIDE?
5. THE SAME LOOK AND FEEL
6. DON’T REPEAT YOURSELF
7. MOVE FAST
8. HOW TO CONTRIBUTE?
9. EASY TO MAINTAIN
10. EASY TO CONTRIBUTE
11. EASY TO CUSTOMIZE
12. MARKDOWN
13. SOLUTION
14. 14 WORKFLOW
15. 15 TECHNI CAL DETAI LS (SCSS REPOSI TORY)
16. 16 • Frontend Stack: • Webpack, Gulp • Babel • React • Testing strategy: • React • Preact • Karma & Jasmine • Documentation: • JSDocs • documentationjs TECHNI CAL DETAI LS (COMPONENTS)
17. 17 GENERATING COMPONENT DOCUMENTATI ON
18. 18 GENERATING COMPONENT DOCUMENTATI ON
19. 19 AUTOMATED COMPONENT DOCUMENTATI ON
20. CONCLUSION
21. DOCUMENTATION AS IMPORTANT AS CODE
22. KEEP ENTRY LEVEL LOW
23. USE DOCUMENTATIONJS
24. JAMSTACK IS A GREAT APPROACH
25. https://github.com/fokusferit/documentationjs-demo-project https://github.com/documentationjs/documentation https://fabric-design.github.io/styleguide/