Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.628 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
  • Als Erste(r) kommentieren

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

×