Best Practise

Bevor es weitergeht, möchten wir dir noch einige empfehlenswerte, etablierte Methoden und Praktiken zeigen, die du kennen und anwenden solltest.

Naming Conventions

Unter einer Naming Convention versteht sich das Einhalten etablierter Regeln bei der Benennung und Schreibweise von Befehlen und Dateien.

Es gibt dutzende Ansätze die sich mal mehr, mal weniger eignen. Für den Rahmen dieses Kurses gibt es nur ein paar sinnvolle Konventionen, die du einhalten solltest:

• Schreib alles klein!
• Keine Umlaute & keine Leerzeichen - Nutze Underline _ zur Worttrennung
• Verwende aufbauende Klassen-Namen (z.B. about und innerhalb about_bild)

Hinweis

Halte dich an diese Konventionen sowohl im Code, als auch bei der Benennung deiner Dateien. Insbesondere Dateinamen mit Leerzeichen führen oft zu Problemen.

Kommentare

In jeder Programmiersprache gibt es die Möglichkeit Kommentare einzufügen, die für den End-Nutzer im Browser unsichtbar sind. Wir empfehlen dir diese zu nutzen, um deinen Code zu dokumentieren. Zum Beispiel für andere Developer die ebenfalls an der Seite arbeiten, oder als Hilfestellung für dich selbst. Um Kommentare einzufügen, muss der Kommentar-Text von folgender Zeichenkombination eingeschlossen werden:

<!--Ein Kommentar in HTML -->
/* Ein Kommentar in CSS */

Formatierung & Lesbarkeit

Um die Verständlichkeit und Lesbarkeit des Codes für Entwickler zu erhöhen, sollten Codezeilen hierarchisch eingerückt werden. Du kannst dafür Tabs oder Spaces, also Leerzeichen verwenden.

Dem Browser ist die Formatierung relativ egal. Solange keine Schreibfehler in der Syntax gemacht wurden, könnte dieser auch die gesamte Seite in einer einzigen Zeile richtig interpretieren. Diese Technik nennt sich minifizieren und wird oft in CSS und Javascript angewendet. Sie dient vor allem dazu den Code kürzer und die Seiten damit schneller zu machen. Für den Rahmen dieses Kurses ist dies jedoch nicht relevant.

<main><!--1. Ebene-->
    <section><!-- 2. Ebene-->
        <p><!-- 3. Ebene -->
        Text
        </p>
    </section>
</main>

<!-- Dies ist theoretisch dasselbe nur schlechter lesbar. -->
<main><section><p>Text</p></section></main>

Editor Hilfen

Damit du fehlerfreien Code schreibst, solltest du unbedingt die Unterstützung deines Code-Editors beanspruchen.

Syntax Highlighting

Wie bereits erwähnt, wird Code zur Verbesserung der Lesbarkeit farblich ausgezeichnet. Zeigt dein Editor bei semantisch identischen Befehlen plötzlich unterschiedliche Farben an, ist dies ein Hinweis, dass wohl etwas nicht stimmen kann. Nutze dies bei der Fehlersuche!

Autocomplete

Auch die Vorschläge, die die meisten Editoren während der Eingabe anzeigen, können sehr hilfreich sein. Dadurch musst du nicht alle Tags und Befehle auswendig lernen. Wenn du in etwa weisst, wie das Gesuchte in Englischer Sprache heisst, sollte der Editor einen Vorschlag machen können.

In den meisten Code-Editors ist auch die Tab Taste ein wichtiger Begleiter. Sie hilft dir Befehle automatisch zu vervollständigen bzw. Vorschläge auszuwählen. Dadurch reduzierst du die Gefahr von Schreibfehlern und schreibst einfach schneller Code.

Plugins

Natürlich stehen auch diverse Plugins zur Verfügung die das Leben eines Developers erleichtern. Doch insbesondere als Beginner ist es durchaus sinnvoll, auf dies zu verzichten, um sich das präzise und fehlerfreie Schreiben von Code anzueignen.