Frontend Coding   GuidelinesEin Baustein zur Qualitätssicherung
Michael Kühnel• Macht Internet seit Netscape 4.7• Frontend Developer bei der SMA Solar  Technology AG• Twitter: @mkuehnel•...
Frontend Coding   Guidelines
Frontend Coding       Guidelines• Markup (HTML)• CSS• JavaScript
Frontend Coding   Guidelines
Frontend Coding       Guidelines• Für wen?
Frontend Coding       Guidelines• Für wen?• Warum?
Frontend Coding        Guidelines• Für wen?• Warum?• Was sollte enthalten sein?
Frontend Coding        Guidelines• Für wen?• Warum?• Was sollte enthalten sein?• Tools zur Überprüfung
Sinnvoll für
Sinnvoll für• Alle Projekte an denen nicht alleine  gearbeitet wird:
Sinnvoll für• Alle Projekte an denen nicht alleine  gearbeitet wird:    • Teams. Auch in kleineren Firmen
Sinnvoll für• Alle Projekte an denen nicht alleine  gearbeitet wird:    • Teams. Auch in kleineren Firmen    • Firmen die ...
Sinnvoll für• Alle Projekte an denen nicht alleine  gearbeitet wird:    • Teams. Auch in kleineren Firmen    • Firmen die ...
Warum?
Warum?• Qualität fördern:
Warum?• Qualität fördern:   • Webstandards
Warum?• Qualität fördern:   • Webstandards   • Barrierefreiheit
Warum?• Qualität fördern:   • Webstandards   • Barrierefreiheit   • Wartbarkeit
Warum?• Qualität fördern:   • Webstandards   • Barrierefreiheit   • Wartbarkeit   • Lesbarkeit
Warum?• Qualität fördern:   • Webstandards   • Barrierefreiheit   • Wartbarkeit   • Lesbarkeit • Vereinheitlichung über Pr...
Inhalte (Allgemein)
Inhalte (Allgemein)•   Encoding von Dateien
Inhalte (Allgemein)•   Encoding von Dateien•   Line endings (Unix vs.    Mac vs. Windows)
Inhalte (Allgemein)•   Encoding von Dateien•   Line endings (Unix vs.    Mac vs. Windows)•   Einrückungen
Inhalte (Allgemein)•   Encoding von Dateien•   Line endings (Unix vs.    Mac vs. Windows)•   Einrückungen•   Schreibweisen...
Inhalte (Allgemein)•   Encoding von Dateien•   Line endings (Unix vs.    Mac vs. Windows)•   Einrückungen•   Schreibweisen...
Inhalte (Allgemein)•   Encoding von Dateien     •   Code-Beispiele                                 (Dos and Don’ts)•   Lin...
Inhalte (Allgemein)•   Encoding von Dateien     •   Code-Beispiele                                 (Dos and Don’ts)•   Lin...
Inhalte (Allgemein)•   Encoding von Dateien     •   Code-Beispiele                                 (Dos and Don’ts)•   Lin...
Inhalte (Allgemein)•   Encoding von Dateien     •   Code-Beispiele                                 (Dos and Don’ts)•   Lin...
Inhalte (HTML)
Inhalte (HTML)•   Validierung nach    welchem Standard?
Inhalte (HTML)•   Validierung nach    welchem Standard?•   Bei HTML5: Welche    Schreibweise? (XHTML    vs. HTML)
Inhalte (HTML)•   Validierung nach    welchem Standard?•   Bei HTML5: Welche    Schreibweise? (XHTML    vs. HTML)•   Trenn...
Inhalte (HTML)•   Validierung nach    welchem Standard?•   Bei HTML5: Welche    Schreibweise? (XHTML    vs. HTML)•   Trenn...
Inhalte (HTML)•   Validierung nach          •   Spans vs. Divs    welchem Standard?•   Bei HTML5: Welche    Schreibweise? ...
Inhalte (HTML)•   Validierung nach          •   Spans vs. Divs    welchem Standard?                              •   Seman...
Inhalte (CSS)
Inhalte (CSS)•   Inline CSS verbieten
Inhalte (CSS)•   Inline CSS verbieten•   Vor !important warnen
Inhalte (CSS)•   Inline CSS verbieten•   Vor !important warnen•   Hinweis auf den Umgang    mit dem Internet    Explorer
Inhalte (CSS)•   Inline CSS verbieten•   Vor !important warnen•   Hinweis auf den Umgang    mit dem Internet    Explorer• ...
Inhalte (CSS)•   Inline CSS verbieten     •   Kommentare•   Vor !important warnen•   Hinweis auf den Umgang    mit dem Int...
Inhalte (CSS)•   Inline CSS verbieten     •   Kommentare•   Vor !important warnen    •   Verwendung von CSS3•   Hinweis au...
Inhalte (CSS)•   Inline CSS verbieten     •   Kommentare•   Vor !important warnen    •   Verwendung von CSS3•   Hinweis au...
Inhalte (CSS)•   Inline CSS verbieten     •   Kommentare•   Vor !important warnen    •   Verwendung von CSS3•   Hinweis au...
Inhalte (CSS)•   Inline CSS verbieten     •   Kommentare•   Vor !important warnen    •   Verwendung von CSS3•   Hinweis au...
Inhalte (JavaScript)
Inhalte (JavaScript)•   Schreibweisen
Inhalte (JavaScript)•   Schreibweisen•   Schützen des Globalen    Scopes
Inhalte (JavaScript)•   Schreibweisen•   Schützen des Globalen    Scopes•   Standards für    Kommentare
Inhalte (JavaScript)•   Schreibweisen•   Schützen des Globalen    Scopes•   Standards für    Kommentare•   JS Code Placement
Inhalte (JavaScript)•   Schreibweisen•   Schützen des Globalen    Scopes•   Standards für    Kommentare•   JS Code Placeme...
Inhalte (JavaScript)•   Schreibweisen           •   eval is evil•   Schützen des Globalen    Scopes•   Standards für    Ko...
Inhalte (JavaScript)•   Schreibweisen           •   eval is evil•   Schützen des Globalen   •   Zu verwendende    Scopes  ...
Inhalte (JavaScript)•   Schreibweisen           •   eval is evil•   Schützen des Globalen   •   Zu verwendende    Scopes  ...
Inhalte (JavaScript)•   Schreibweisen           •   eval is evil•   Schützen des Globalen   •   Zu verwendende    Scopes  ...
Inhalte (JavaScript)•   Schreibweisen           •   eval is evil•   Schützen des Globalen   •   Zu verwendende    Scopes  ...
Tools
Tools• JSHint: http://www.jshint.com/about• Sonar: http://www.sonarsource.org• PMD: http://pmd.sourceforge.net• Checkstyle...
Das wars ; )Fragen?Twitter: @mkuehnelE-Mail: mail@michael-kuehnel.de
Nächste SlideShare
Wird geladen in …5
×

Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung

2.420 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.420
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
167
Aktionen
Geteilt
0
Downloads
30
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung

    1. 1. Frontend Coding GuidelinesEin Baustein zur Qualitätssicherung
    2. 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. 3. Frontend Coding Guidelines
    4. 4. Frontend Coding Guidelines• Markup (HTML)• CSS• JavaScript
    5. 5. Frontend Coding Guidelines
    6. 6. Frontend Coding Guidelines• Für wen?
    7. 7. Frontend Coding Guidelines• Für wen?• Warum?
    8. 8. Frontend Coding Guidelines• Für wen?• Warum?• Was sollte enthalten sein?
    9. 9. Frontend Coding Guidelines• Für wen?• Warum?• Was sollte enthalten sein?• Tools zur Überprüfung
    10. 10. Sinnvoll für
    11. 11. Sinnvoll für• Alle Projekte an denen nicht alleine gearbeitet wird:
    12. 12. Sinnvoll für• Alle Projekte an denen nicht alleine gearbeitet wird: • Teams. Auch in kleineren Firmen
    13. 13. Sinnvoll für• Alle Projekte an denen nicht alleine gearbeitet wird: • Teams. Auch in kleineren Firmen • Firmen die Dienstleister beauftragen
    14. 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. 15. Warum?
    16. 16. Warum?• Qualität fördern:
    17. 17. Warum?• Qualität fördern: • Webstandards
    18. 18. Warum?• Qualität fördern: • Webstandards • Barrierefreiheit
    19. 19. Warum?• Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit
    20. 20. Warum?• Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit • Lesbarkeit
    21. 21. Warum?• Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit • Lesbarkeit • Vereinheitlichung über Projektgrenzen
    22. 22. Inhalte (Allgemein)
    23. 23. Inhalte (Allgemein)• Encoding von Dateien
    24. 24. Inhalte (Allgemein)• Encoding von Dateien• Line endings (Unix vs. Mac vs. Windows)
    25. 25. Inhalte (Allgemein)• Encoding von Dateien• Line endings (Unix vs. Mac vs. Windows)• Einrückungen
    26. 26. Inhalte (Allgemein)• Encoding von Dateien• Line endings (Unix vs. Mac vs. Windows)• Einrückungen• Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen)
    27. 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. 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. 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. 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. 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. 32. Inhalte (HTML)
    33. 33. Inhalte (HTML)• Validierung nach welchem Standard?
    34. 34. Inhalte (HTML)• Validierung nach welchem Standard?• Bei HTML5: Welche Schreibweise? (XHTML vs. HTML)
    35. 35. Inhalte (HTML)• Validierung nach welchem Standard?• Bei HTML5: Welche Schreibweise? (XHTML vs. HTML)• Trennung von Inhalt und Design
    36. 36. Inhalte (HTML)• Validierung nach welchem Standard?• Bei HTML5: Welche Schreibweise? (XHTML vs. HTML)• Trennung von Inhalt und Design• IDs vs. Klassen
    37. 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. 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. 39. Inhalte (CSS)
    40. 40. Inhalte (CSS)• Inline CSS verbieten
    41. 41. Inhalte (CSS)• Inline CSS verbieten• Vor !important warnen
    42. 42. Inhalte (CSS)• Inline CSS verbieten• Vor !important warnen• Hinweis auf den Umgang mit dem Internet Explorer
    43. 43. Inhalte (CSS)• Inline CSS verbieten• Vor !important warnen• Hinweis auf den Umgang mit dem Internet Explorer• Schreibweise von Selektoren, Eigenschaften und Werten
    44. 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. 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. 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. 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. 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. 49. Inhalte (JavaScript)
    50. 50. Inhalte (JavaScript)• Schreibweisen
    51. 51. Inhalte (JavaScript)• Schreibweisen• Schützen des Globalen Scopes
    52. 52. Inhalte (JavaScript)• Schreibweisen• Schützen des Globalen Scopes• Standards für Kommentare
    53. 53. Inhalte (JavaScript)• Schreibweisen• Schützen des Globalen Scopes• Standards für Kommentare• JS Code Placement
    54. 54. Inhalte (JavaScript)• Schreibweisen• Schützen des Globalen Scopes• Standards für Kommentare• JS Code Placement• Zu verwendende Vergleichsoperatoren
    55. 55. Inhalte (JavaScript)• Schreibweisen • eval is evil• Schützen des Globalen Scopes• Standards für Kommentare• JS Code Placement• Zu verwendende Vergleichsoperatoren
    56. 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. 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. 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. 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. 60. Tools
    61. 61. Tools• JSHint: http://www.jshint.com/about• Sonar: http://www.sonarsource.org• PMD: http://pmd.sourceforge.net• Checkstyle: http:// checkstyle.sourceforge.net
    62. 62. Das wars ; )Fragen?Twitter: @mkuehnelE-Mail: mail@michael-kuehnel.de

    ×