Präsentation im Rahmen des ersten Marburger Webmontags (http://webmontag.de/location/marburg/index). Diese Präsentation beantwortet die folgenden Fragen: - Für wen sind Coding Guidelines sinnvoll? - Warum? - Was sollte enthalten sein? Des weiteren werden Links zu Tools zur Überprüfung der Einhaltung genannt.

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?

16. Warum?
• Qualität fördern:

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

22. Inhalte (Allgemein)

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

49. Inhalte (JavaScript)

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