Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Als KEY, PDF herunterladen4 gefällt mir2,114 aufrufe
Das Dokument beschreibt die Entwicklungsrichtlinien für Frontend-Coding, um die Qualität in Projekten zu sichern, insbesondere für Teams und Unternehmen, die externe Dienstleister beauftragen. Es behandelt Themen wie Markup, CSS, JavaScript sowie Validierungsstandards und Best Practices, um Webstandards, Barrierefreiheit und Wartbarkeit zu fördern. Zudem werden nützliche Tools zur Überprüfung genannt, und es bietet Empfehlungen zur einheitlichen Codierung und dem Umgang mit verschiedenen Technologien.
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
- 1. Frontend Coding Guidelines Ein Baustein zur Qualitätssicherung
- 2. Michael Kühnel • Macht Internet seit Netscape 4.7 • Frontend Developer bei der SMA Solar Technology AG • Twitter: @mkuehnel • Website: www.michael-kuehnel.de
- 3. Frontend Coding Guidelines
- 4. Frontend Coding Guidelines • Markup (HTML) • CSS • JavaScript
- 5. Frontend Coding Guidelines
- 6. Frontend Coding Guidelines • Für wen?
- 7. Frontend Coding Guidelines • Für wen? • Warum?
- 8. Frontend Coding Guidelines • Für wen? • Warum? • Was sollte enthalten sein?
- 9. Frontend Coding Guidelines • Für wen? • Warum? • Was sollte enthalten sein? • Tools zur Überprüfung
- 10. Sinnvoll für
- 11. Sinnvoll für • Alle Projekte an denen nicht alleine gearbeitet wird:
- 12. Sinnvoll für • Alle Projekte an denen nicht alleine gearbeitet wird: • Teams. Auch in kleineren Firmen
- 13. Sinnvoll für • Alle Projekte an denen nicht alleine gearbeitet wird: • Teams. Auch in kleineren Firmen • Firmen die Dienstleister beauftragen
- 14. Sinnvoll für • Alle Projekte an denen nicht alleine gearbeitet wird: • Teams. Auch in kleineren Firmen • Firmen die Dienstleister beauftragen • Übergabe von Projekten an Kunden
- 15. Warum?
- 17. Warum? • Qualität fördern: • Webstandards
- 18. Warum? • Qualität fördern: • Webstandards • Barrierefreiheit
- 19. Warum? • Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit
- 20. Warum? • Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit • Lesbarkeit
- 21. Warum? • Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit • Lesbarkeit • Vereinheitlichung über Projektgrenzen
- 23. Inhalte (Allgemein) • Encoding von Dateien
- 24. Inhalte (Allgemein) • Encoding von Dateien • Line endings (Unix vs. Mac vs. Windows)
- 25. Inhalte (Allgemein) • Encoding von Dateien • Line endings (Unix vs. Mac vs. Windows) • Einrückungen
- 26. Inhalte (Allgemein) • Encoding von Dateien • Line endings (Unix vs. Mac vs. Windows) • Einrückungen • Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen)
- 27. Inhalte (Allgemein) • Encoding von Dateien • Line endings (Unix vs. Mac vs. Windows) • Einrückungen • Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen) • Verpflichtung zur Validierung
- 28. Inhalte (Allgemein) • Encoding von Dateien • Code-Beispiele (Dos and Don’ts) • Line endings (Unix vs. Mac vs. Windows) • Einrückungen • Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen) • Verpflichtung zur Validierung
- 29. Inhalte (Allgemein) • Encoding von Dateien • Code-Beispiele (Dos and Don’ts) • Line endings (Unix vs. Mac vs. Windows) • Anhang mit Best Practices • Einrückungen • Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen) • Verpflichtung zur Validierung
- 30. Inhalte (Allgemein) • Encoding von Dateien • Code-Beispiele (Dos and Don’ts) • Line endings (Unix vs. Mac vs. Windows) • Anhang mit Best Practices • Einrückungen • ggf. Definition der zu • Schreibweisen unterstützenden Browser (lowerCamelCase vs. benutzung-von- bindestrichen) • Verpflichtung zur Validierung
- 31. Inhalte (Allgemein) • Encoding von Dateien • Code-Beispiele (Dos and Don’ts) • Line endings (Unix vs. Mac vs. Windows) • Anhang mit Best Practices • Einrückungen • ggf. Definition der zu • Schreibweisen unterstützenden Browser (lowerCamelCase vs. benutzung-von- bindestrichen) • ggf. Merging von Dateien • Verpflichtung zur Validierung
- 32. Inhalte (HTML)
- 33. Inhalte (HTML) • Validierung nach welchem Standard?
- 34. Inhalte (HTML) • Validierung nach welchem Standard? • Bei HTML5: Welche Schreibweise? (XHTML vs. HTML)
- 35. Inhalte (HTML) • Validierung nach welchem Standard? • Bei HTML5: Welche Schreibweise? (XHTML vs. HTML) • Trennung von Inhalt und Design
- 36. Inhalte (HTML) • Validierung nach welchem Standard? • Bei HTML5: Welche Schreibweise? (XHTML vs. HTML) • Trennung von Inhalt und Design • IDs vs. Klassen
- 37. Inhalte (HTML) • Validierung nach • Spans vs. Divs welchem Standard? • Bei HTML5: Welche Schreibweise? (XHTML vs. HTML) • Trennung von Inhalt und Design • IDs vs. Klassen
- 38. Inhalte (HTML) • Validierung nach • Spans vs. Divs welchem Standard? • Semantisches HTML • Bei HTML5: Welche Schreibweise? (XHTML vs. HTML) • Trennung von Inhalt und Design • IDs vs. Klassen
- 39. Inhalte (CSS)
- 40. Inhalte (CSS) • Inline CSS verbieten
- 41. Inhalte (CSS) • Inline CSS verbieten • Vor !important warnen
- 42. Inhalte (CSS) • Inline CSS verbieten • Vor !important warnen • Hinweis auf den Umgang mit dem Internet Explorer
- 43. Inhalte (CSS) • Inline CSS verbieten • Vor !important warnen • Hinweis auf den Umgang mit dem Internet Explorer • Schreibweise von Selektoren, Eigenschaften und Werten
- 44. Inhalte (CSS) • Inline CSS verbieten • Kommentare • Vor !important warnen • Hinweis auf den Umgang mit dem Internet Explorer • Schreibweise von Selektoren, Eigenschaften und Werten
- 45. Inhalte (CSS) • Inline CSS verbieten • Kommentare • Vor !important warnen • Verwendung von CSS3 • Hinweis auf den Umgang mit dem Internet Explorer • Schreibweise von Selektoren, Eigenschaften und Werten
- 46. Inhalte (CSS) • Inline CSS verbieten • Kommentare • Vor !important warnen • Verwendung von CSS3 • Hinweis auf den Umgang • ggf. Infos zur mit dem Internet Verwendung von CSS Explorer präprozessoren • Schreibweise von Selektoren, Eigenschaften und Werten
- 47. Inhalte (CSS) • Inline CSS verbieten • Kommentare • Vor !important warnen • Verwendung von CSS3 • Hinweis auf den Umgang • ggf. Infos zur mit dem Internet Verwendung von CSS Explorer präprozessoren • Schreibweise von • ggf. zu verwendende Selektoren, Frameworks Eigenschaften und Werten
- 48. Inhalte (CSS) • Inline CSS verbieten • Kommentare • Vor !important warnen • Verwendung von CSS3 • Hinweis auf den Umgang • ggf. Infos zur mit dem Internet Verwendung von CSS Explorer präprozessoren • Schreibweise von • ggf. zu verwendende Selektoren, Frameworks Eigenschaften und Werten • ggf. Umgang mit mobilen Endgeräten
- 50. Inhalte (JavaScript) • Schreibweisen
- 51. Inhalte (JavaScript) • Schreibweisen • Schützen des Globalen Scopes
- 52. Inhalte (JavaScript) • Schreibweisen • Schützen des Globalen Scopes • Standards für Kommentare
- 53. Inhalte (JavaScript) • Schreibweisen • Schützen des Globalen Scopes • Standards für Kommentare • JS Code Placement
- 54. Inhalte (JavaScript) • Schreibweisen • Schützen des Globalen Scopes • Standards für Kommentare • JS Code Placement • Zu verwendende Vergleichsoperatoren
- 55. Inhalte (JavaScript) • Schreibweisen • eval is evil • Schützen des Globalen Scopes • Standards für Kommentare • JS Code Placement • Zu verwendende Vergleichsoperatoren
- 56. Inhalte (JavaScript) • Schreibweisen • eval is evil • Schützen des Globalen • Zu verwendende Scopes Frameworks • Standards für Kommentare • JS Code Placement • Zu verwendende Vergleichsoperatoren
- 57. Inhalte (JavaScript) • Schreibweisen • eval is evil • Schützen des Globalen • Zu verwendende Scopes Frameworks • Standards für • ggf. Infos zu Kommentare jQuery.noConflict() • JS Code Placement • Zu verwendende Vergleichsoperatoren
- 58. Inhalte (JavaScript) • Schreibweisen • eval is evil • Schützen des Globalen • Zu verwendende Scopes Frameworks • Standards für • ggf. Infos zu Kommentare jQuery.noConflict() • JS Code Placement • Fehlervermeidung (JSHint vs. JSLint) • Zu verwendende Vergleichsoperatoren
- 59. Inhalte (JavaScript) • Schreibweisen • eval is evil • Schützen des Globalen • Zu verwendende Scopes Frameworks • Standards für • ggf. Infos zu Kommentare jQuery.noConflict() • JS Code Placement • Fehlervermeidung (JSHint vs. JSLint) • Zu verwendende Vergleichsoperatoren • ggf. Anhang mit Best Practices
- 60. Tools
- 61. Tools • JSHint: http://www.jshint.com/about • Sonar: http://www.sonarsource.org • PMD: http://pmd.sourceforge.net • Checkstyle: http:// checkstyle.sourceforge.net
- 62. Das wars ; ) Fragen? Twitter: @mkuehnel E-Mail: mail@michael-kuehnel.de
Hinweis der Redaktion
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n