Trápí vás chybový a špatně udržovatelný kód? Nezvládáte krotit množství nepoužitého CSS ani svoji vášeň pro preprocesory? Nevyznáte se v HTML a CSS od svých kolegů, nebo dokonce ve vlastním kódu, který jste psali před půl rokem? Podívejte se, jak zavést do praxe lintování, code review, automatizaci a štábní kulturu obecně.

1. Kvalita kódu
Adam Kudrna — Frontendisti — 9. 5. 2018

2. 1 —
2 —
3 —
4 —
K čemu je kvalitní kód
Čím se vyznačuje
kvalitní CSS kód
Jak psát kvalitní kód
Code review

3. 1 — K čemu je
kvalitní kód

4. Kvalitní software

5. Proč je kvalitní kód
důležitý?

6. Odlišuje amatéry
od profesionálů

7. Čistý kód, který funguje

8. 2 — Čím se vyznačuje
kvalitní CSS kód

9. Udržovatelnost

10. Rozšiřitelnost

11. Výkonnost

12. Bezchybnost

13. 3 — Jak psát kvalitní
CSS kód

14. A. Udržovatelnost
B. Rozšiřitelnost
C. Výkonnost
D. Bezchybnost

15. A. Udržovatelnost
•Verzování – Git

18. A. Udržovatelnost
•Verzování – Git
•Struktura CSS souborů

20. A. Udržovatelnost
•Verzování – Git
•Struktura CSS souborů
•Jednotný coding style: Editorconfig + Stylelint

21. http://editorconfig.org

24. • https://stylelint.io
• https://github.com/stylelint/stylelint-config-standard
• https://github.com/visionappscz/stylelint-config-visionapps
• https://github.com/visionappscz/stylelint-config-visionapps-order

25. A. Udržovatelnost
•Verzování – Git
•Struktura CSS souborů
•Jednotný coding style: Editorconfig + Stylelint
•Metodiky: BEM, OOCSS, SMACSS, ITCSS

26. .branding-active #sidebar .navigation h2 { … }
.table-responsive
.product-preview--large .product-preview__title
?

27. A. Udržovatelnost
•Verzování – Git
•Struktura CSS souborů
•Jednotný coding style: Editorconfig + Stylelint
•Metodiky: BEM, OOCSS, SMACSS, ITCSS
•Efektivní využití preprocesorů: SASS, LESS

28. A. Udržovatelnost
•Verzování – Git
•Struktura CSS souborů
•Jednotný coding style: Editorconfig + Stylelint
•Metodiky: BEM, OOCSS, SMACSS, ITCSS
•Efektivní využití preprocesorů: SASS, LESS
•Jednoduchost a co nejmenší velikost zdrojového CSS

29. B. Rozšiřitelnost

30. C. Výkonnost
•Optimalizace načítání výstupního CSS

31. C. Výkonnost
•Optimalizace načítání výstupního CSS
•Efektivní CSS selektory

32. .nav li a { … } .nav > li > a { … }

33. C. Výkonnost
•Optimalizace načítání výstupního CSS
•Efektivní CSS selektory
•Eliminace na výkon náročných efektů

34. D. Bezchybnost
• Automatické testy, lintování (Stylelint)

35. D. Bezchybnost
• Automatické testy, lintování (Stylelint)
• Robustnost: buď připraven (na různé vstupy)

36. D. Bezchybnost
• Automatické testy, lintování (Stylelint)
• Robustnost: buď připraven (na různé vstupy)
• Testování v prohlížečích

37. https://browsersync.io

39. https://www.browserstack.com

41. 4 — Code review

42. „ Code review je proces, který zajistí, že každou změnu
v kódu uvidí další osoba, která ji může připomínkovat.“
https://www.zdrojak.cz/clanky/code-reviews-praxi/
— Josef Reidinger

43. Proč dělat code review
• Lepší kvalita kódu
• Udržení výstupní kvality
• Lepší zastupitelnost v týmu
• Rychlejší zaučení nových kolegů

44. Jak připravit změnu
• Usnadnit kolegům code review:
• Automatizovat co se dá: kontrola coding style, testy
• Dělat malé změny, velké změny v menších krocích
• Ověřit, že změna splňuje veškerá kritéria
• Boy scout rule

45. Jak dělat code review
• Být konstruktivní
• Být konzistentní
• Vzájemně se respektovat
• Vyhnout se emocím
• Dobré věci pochválit

46. Nástroje

47. 1 —
2 —
3 —
4 —
K čemu je kvalitní kód
Čím se vyznačuje
kvalitní CSS kód
Jak psát kvalitní kód
Code review

48. Frontend-školení.cz

49. @AdamKudrna
www.visionapps.cz
Díky!