Kvalita kódu
•
0 likes•464 views
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ě.
Kvalita kódu
- 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
- 5. Proč je kvalitní kód důležitý?
- 7. Čistý kód, který funguje
- 8. 2 — Čím se vyznačuje kvalitní CSS kód
- 9. žDZٱԴDz
- 10. dzšřٱԴDz
- 11. ýDzԲԴDz
- 12. Bezchybnost
- 13. 3 — Jak psát kvalitní CSS kód
- 14. A. žDZٱԴDz B. dzšřٱԴDz C. ýDzԲԴDz D. Bezchybnost
- 15. A. žDZٱԴDz •Verzování – Git
- 18. A. žDZٱԴDz •Verzování – Git •Struktura CSS souborů
- 20. A. žDZٱԴDz •Verzování – Git •Struktura CSS souborů •Jednotný coding style: Editorconfig + Stylelint
- 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. žDZٱԴDz •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. žDZٱԴDz •Verzování – Git •Struktura CSS souborů •Jednotný coding style: Editorconfig + Stylelint •Metodiky: BEM, OOCSS, SMACSS, ITCSS •Efektivní využití preprocesorů: SASS, LESS
- 28. A. žDZٱԴDz •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. dzšřٱԴDz
- 30. C. ýDzԲԴDz •Optimalizace načítání výstupního CSS
- 31. C. ýDzԲԴDz •Optimalizace načítání výstupního CSS •Efektivní CSS selektory
- 32. .nav li a { … } .nav > li > a { … }
- 33. C. ýDzԲԴDz •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
- 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. áٰ
- 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. DzԳٱԻ-šDZí.