Diese Präsentation wurde erfolgreich gemeldet.

Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung

4

Teilen

1 von 62
1 von 62

Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung

4

Teilen

Herunterladen, um offline zu lesen

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.

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.

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung

  1. 1. Frontend Coding Guidelines Ein 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: @mkuehnel E-Mail: mail@michael-kuehnel.de

Notizen

  • \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
  • ×