Frontend Development

# Validieren und Testen

Nachdem du viel Arbeit in die Entwicklung deiner Website gesteckt hast, kannst du mit dem Validieren und Testen sicherstellen, dass deine Website auch bei allen Usern im Internet so gut funktioniert, wie auf deinem Computer.

# Website-Code validieren

Das W3C (World Wide Web Consortium) ist ein internationaler Zusammenschluss, welcher einheitliche Regelungen für die Verwendung von Webtechniken definiert.

Das W3C entwickelt technische Spezifikationen und Richtlinien in einem ausgereiften, transparenten Prozess, um maximalen Konsens über den Inhalt technischer Protokolle zu erreichen […]
— Wikipedia

Die meisten Browserhersteller und Entwicklerteams von Chrome, Firefox, Opera oder Safari halten sich grössten Teils an diese Standards. So ist es auch für dich sinnvoll, diese Standards zu berücksichtigen, damit dein Code in möglichst vielen Browsern einwandfrei funktioniert und einheitlich aussieht. Schliesslich soll jemand mit Chrome keine andere Experience (Nutzererlebnis) haben, wie jemand Anderes mit Firefox.

Manche Browser sind der Zeit und den allgemein geltenden Standards etwas voraus oder “kochen ihre eigene Suppe”. Deswegen müssen manche Properties von neuen Technologien in CSS beispielsweise mehrfach geschrieben werden, damit jeder Browser sie erkennt.

# Eine Geschichte der Browserunterstützung am Beispiel Flexbox

Mittlerweile liegt die Browserunterstützung der von dir gelernten Syntax für Flexbox bei über 98% (caniuse.com). In den Anfangszeiten von Flexbox war diese Syntax noch sehr umständlich:

.something-old-with-flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* Dank etablierter Standards gilt heute nur noch: */
.something-new-with-flexbox {
  display: flex;
}

# HTML-Code online validieren Aufgabe

Das W3C bietet einen Online-Validator an, der Fehler in der Syntax aufzeigt, z.B. ob ein Tag geöffnet (<p>), aber nicht geschlossen wurde (</p>). Dort wird ebenfalls überprüft, ob dein Code den W3C-Standards entspricht.

Solltest du einmal Probleme mit deinem CSS haben, so können dir Tools wie csslint.net zeigen, wo der Fehler liegt. In VSCode hast du unten ausserdem einen “Problems“ Tab, der dir zeigen kann, in welcher Datei und Zeile ein Fehler vorliegt. Natürlich gibt es solche Erweiterungen auch für andere Codeeditoren.

Validiere deinen HTML- und CSS-Code mit den unten erwähnten Tools.

Validierungstools

# Debugging

Unter dem Verb “Debugging” (Bug = Softwarefehler, “den Bug entfernen”) versteht man das Diagnostizieren und Auffinden von Fehlern in Computersystemen. Das kann ein mühsamer Prozess sein, deswegen gibt es bestimmte Vorgehensweisen und Hilfsmittel, um Fehler möglichst schnell zu finden und beseitigen zu können.

# Code-Bereiche auskommentieren

Kann der Fehler nicht auf Anhieb identifiziert werden, hilft es, Teile des Codes auszukommentieren. Es wird also ein ganzer Absatz an Code in einen Kommentar verwandelt, sodass dieser nicht mehr ausgeführt wird. Dadurch kann getestet werden, ob der Fehler durch diesen Block verursacht wird oder nicht. Es ist also eine Art Ausschlussverfahren.

<!-- Ich bin ein HTML-Kommentar -->

<!--
<div>
  <p>
    Dieser HTML Block wird nicht ausgegeben, da er auskommentiert wurde.
  </p>
</div>
-->

/* Ich bin ein CSS-Kommmentar */

/*
.about:before {
  content: "Dieser CSS Block wird nicht ausgegeben da er auskommentiert wurde.";
}
*/

/* 
  Ich bin ein mehrzeiliger Kommentar in Javascript
*/

// Ich bin ein einzeiliger Kommentar in Javascript

// window.alert("Dieses Javascript wird nicht ausgegeben, da es auskommentiert wurde.")

# Code-Bereiche zusammenklappen

Die meisten Code-Editoren bieten die Möglichkeit über kleine Pfeile in der Spalte der Zeilennummern am linken Rand ganze Codeblöcke zusammenzuklappen. Das macht deinen Code übersichtlicher und zeigt schnell, ob alle Elemente richtig verschachtelt sind und du keine schliessende Klammer vergessen hast (</div>) oder Tags zuviel geschrieben hast (</div></div>).

Code-Bereiche zusammenklappen

# Linter, Hinter und andere nützliche Tools

Es gibt viele Hilfsmittel für das Debugging. Du kannst sie direkt als Erweiterung im Code-Editor installieren, du kannst online deinen Code einfügen und testen lassen, oder auch mit den Developer Tools deines Browsers arbeiten. Diese Tools geben sehr oft konkrete Anhaltspunkte, was genau den Fehler verursacht.

In den Developer Tools siehst du zum Beispiel im Tab “Styles” welche CSS-Properties angewendet werden und welche etwa durch Schreibfehler oder doppelte Auszeichnungen überschrieben werden. Diese erscheinen durchgestrichen und werden somit nicht angewendet.

Im unteren Beispiel wird display: none; überschrieben durch display: inline; und angewendet.

CSS-Properties, die sich überschreiben

Innerhalb der Code-Editoren sind Technologien wie JSLint und JSHint zeitsparende Erweiterungen, um direkt während der Eingabe des Codes Fehler zu finden, ohne den Umweg über externe Tools gehen zu müssen.

# Performance-Tests Aufgabe

Eine schlechte Performance (Leistung) von Websites kann viele Ursachen haben. Zu grosse Bilder, falsches Markup, nicht für kleine Screens optimiert… Fakt ist, dass viele Suchmaschinen Websites mit schlechter Performance abstrafen, indem sie diese bei Suchergebnissen weiter unten platzieren und somit schlechter auffindbar machen.

Um herauszufinden, wie performant deine Website ist, kannst du das Tool “Pagespeed Insights” von Google verwenden, dass deine Website analysiert und dir Vorschläge zur Performance-Verbesserung liefert.

Beispiel für PageSpeed Insights

Weiterführende Links

# Wie verhält sich meine Website bei einer schlechten Datenverbindung?

In der Schweiz gibt es meistens eine schnelle Datenverbindung mit 4G- oder 5G-Geschwindigkeit. Dadurch kann leicht der Eindruck entstehen, das alle Websites schnell laden. Ressourcenintensive Daten fallen dann nicht so auf. Das ist nicht überall so. Da das Internet ein weltweites Netzwerk ist, musst du deine Seite auch dafür optimieren, bei langsameren Datenverbindungen schnell zu laden. Du wirst erstaunt sein, wieviel schneller dein Portfolio dann auch mit einer schnellen Datenverbindung lädt. Performance-Optimierungen lohnen sich immer, da sie ein wichtiger Bestandteil einer guten User Experience sind.

# Langsame Datenverbindung simulieren Aufgabe

Mit den Developer Tools von Chrome kannst du eine langsame Datenverbindung simulieren. Gehe dazu auf den Tab “Network” und wähle im Dropdown Online eine langsame Datenverbindung aus, z.B. Slow 3G. Mit der Checkbox Disable Cache erlebst du, wie deine Website lädt, wenn ein User sie zum ersten Mal besucht – es befinden sich dann keine Dateien von einem vorherigen Besuch im Zwischenspeicher (Cache).

Drücke dann ⌘COMMAND + R (MacOS) oder F5 (Windows), um die Website neu zu laden. Du erlebst nun deine Website mit einer langsamen Datenverbindung und kannst so mögliche Optimierungen erkennen.

Performance Throttling

← Ende & Weiterführendes →