10 Häufige Fehler bei Web-Entwicklern

Es scheint unendlich viele Möglichkeiten zu geben, wie man dieselbe Aufgabe erledigen kann: eine Website zu entwickeln, die im heutigen modernen Web funktioniert. Webentwickler müssen sich für eine Webhosting-Plattform und die zugrunde liegende Datenspeicherung entscheiden, in welche Tools HTML, CSS und JavaScript geschrieben werden sollen, wie das Design implementiert wird und welche potenziellen JavaScript-Bibliotheken / Frameworks eingeschlossen werden müssen.

Sobald die Auswahl eingegrenzt ist, ist die Online-Welt mit Artikeln, Foren und Beispielen gefüllt, die Tipps für ein besseres Web-Erlebnis bieten. Egal welcher Weg beschritten wird, alle Entwickler sind fehleranfällig. Obwohl einige Fehler sich auf einen bestimmten Ansatz beziehen, bestehen Herausforderungen für alle Webentwickler.

Durch Recherchen, Erfahrungen und jüngste Beobachtungen dachte ich, ich würde eine Liste mit zehn häufigen Fehlern, die Webentwickler machen, zusammenstellen und wie man sie vermeiden kann.

Die folgende Liste ist in keiner bestimmten Reihenfolge.

1. Schreiben von HTML der alten Schule

Fehler: Die Anfänge des Internets boten weit weniger Möglichkeiten für Markups als heute. Alte Gewohnheiten sterben jedoch schwer, und viele schreiben ihren HTML-Code so, als wären wir noch im 20. Jahrhundert. Beispiele hier verwenden

Elemente für das Layout, oder

Elemente, wenn andere semantisch-spezifische Tags angemessener wären oder Tags verwenden, die im aktuellen HTML-Standard nicht unterstützt werden, wie z oder , oder Abstand auf einer Seite mit einer großen Anzahl von Entitäten.

Auswirkung: Das Schreiben des HTML-Codes des letzten Jahrzehnts kann zu kompliziertem Markup führen, das sich in mehreren Browsern inkonsistent verhält. In neueren modernen Browsern wie Microsoft Edge und früheren Versionen von Internet Explorer (11, 10, 9) ist dies nicht erforderlich..

Wie zu vermeiden: Aufhören mit der

Element für das Layout des Inhalts und beschränken Sie die Verwendung auf die Anzeige von Tabellendaten. Machen Sie sich mit den aktuell verfügbaren Markup-Optionen vertraut, wie z. B. bei whatwg.org. Verwenden Sie HTML, um zu beschreiben, was der Inhalt ist, und nicht, wie er angezeigt wird. Um Ihren Inhalt korrekt anzuzeigen, verwenden Sie CSS.

2. "Funktioniert in meinem Browser ..."

FehlerEin Entwickler mag einen bestimmten Browser mögen oder einen wirklich verachten, und er kann Webseiten hauptsächlich mit dieser Neigung testen. Es ist auch möglich, dass online gefundene Codebeispiele geschrieben werden, ohne zu berücksichtigen, wie sie in anderen Browsern dargestellt werden. Einige Browser haben auch andere Standardwerte für Stile.

Auswirkung: Das Schreiben einer Browser-zentrierten Site führt wahrscheinlich zu einer sehr schlechten Qualität, wenn sie in anderen Browsern angezeigt wird.

Wie zu vermeiden: Es ist nicht praktisch, Webseiten während der Entwicklung in jedem Browser und jeder Version zu testen. Es empfiehlt sich jedoch, in regelmäßigen Abständen zu prüfen, wie Ihre Website in mehreren Browsern angezeigt wird. Heutzutage stehen kostenlose Tools zur Verfügung, unabhängig von Ihrer bevorzugten Plattform: kostenlose VMs oder Site-Scanner. Sites wie Browsershots oder BrowserStack zeigen Momentaufnahmen, wie eine bestimmte Seite über mehrere Browser / Versionen / Plattformen gerendert wird. Tools wie Visual Studio können auch mehrere Browser aufrufen, um eine einzelne Seite anzuzeigen, an der Sie gerade arbeiten. Berücksichtigen Sie beim Entwerfen mit CSS alle auf "meyerweb.com" angegebenen Standardeinstellungen.

Wenn Ihre Site CSS-Funktionen verwendet, die speziell für einen Browser erstellt wurden, sollten Sie vorsichtig sein, wie Sie auf Herstellerpräfixe wie z -Webkit-, -moz-, oder -Frau-. Für Hinweise zu Branchentrends in dieser Hinsicht lohnt es sich, die folgenden Referenzen zu prüfen:

Microsoft Edge Dev Blog: Eine Pause von der Vergangenheit, Teil 2: Verabschieden Sie sich von ActiveX, VBScript, attachEvent…
QuirksMode.org: CSS-Herstellerpräfixe gelten als schädlich
Bruce Lawson: Im Internet Explorer werden -webkit- Herstellerpräfixe unterstützt

Während die oben genannten Referenzen eine Abkehr von Herstellerpräfixen und warum erklären, gibt diese Seite praktische Vorschläge, wie dies heute durchzuarbeiten ist.

3. Falsches Formular

Fehler: Aufforderung an einen Benutzer zur Eingabe von Informationen (insbesondere bei Eingabe in ein Textfeld) und unter der Annahme, dass die Daten wie beabsichtigt empfangen werden.

Auswirkung: Viele Dinge können (und werden wahrscheinlich schief gehen), wenn der Benutzereingabe vertrauenswürdig ist. Seiten können fehlschlagen, wenn die erforderlichen Daten nicht bereitgestellt werden oder die empfangenen Daten nicht mit einem zugrunde liegenden Datenschema kompatibel sind. Noch schwerwiegender ist die vorsätzliche Verletzung der Datenbank der Website, möglicherweise durch Injection-Angriffe (siehe OWASP: Top 10 2013-A1-Injections)..

Wie zu vermeiden: Der erste Ratschlag hier ist, sicherzustellen, dass dem Benutzer klar ist, nach welcher Art von Daten Sie suchen. Wenn Sie nach einer Adresse fragen, kann dies zu einer geschäftlichen, privaten oder sogar E-Mail-Adresse führen. Nutzen Sie nicht nur spezifisch, sondern auch die im heutigen HTML verfügbaren Datenvalidierungstechniken. Unabhängig davon, wie Daten auf der Browserseite validiert werden, stellen Sie sicher, dass sie immer auch auf der Serverseite validiert werden. Lassen Sie niemals zu, dass eine verkettete T-SQL-Anweisung Daten aus der Benutzereingabe verwendet, ohne zu bestätigen, dass jedes Feld der Datentyp ist, der es sein soll.

4. aufgeblähte Antworten

Fehler: Die Seite ist mit vielen Grafiken und / oder Bildern von hoher Qualität gefüllt, die mit der Verwendung des Digitalfensters verkleinert werden Attribute für Elementhöhe und -breite. Von der Seite aus verknüpfte Dateien wie CSS und JavaScript sind groß. Das Quell-HTML-Markup kann auch unnötig komplex und umfangreich sein.

Auswirkung: Die Zeit für das vollständige Rendern einer Seite wird für einige Benutzer lang genug sein, um die gesamte Seite erneut aufzugeben oder sogar ungeduldig erneut anzufordern. In einigen Fällen treten Fehler auf, wenn die Seitenverarbeitung zu lange dauert.

Wie zu vermeiden: Denken Sie nicht daran, dass der Zugriff auf das Internet immer schneller wird, wodurch aufgeblähte Szenarien entstehen. Betrachten Sie stattdessen alles, was vom Browser zu Ihrer Site hin und her geht, als Kosten. Bilder sind ein schwerwiegender Straftäter in Seitenaufblähung. Führen Sie die folgenden drei Tipps aus, um die Kosten für Bilder zu minimieren, die das Laden von Seiten verlangsamen:

Fragen Sie sich: "Sind alle meine Grafiken absolut notwendig?" Wenn nicht, entfernen Sie nicht mehr benötigte Bilder. Sie können Ihre Website hier scannen, um Vorschläge für die zu komprimierenden Bilder zu erhalten.
Minimieren Sie die Dateigröße Ihrer Bilder mit Tools wie Shrink O'Matic oder RIOT.
Laden Sie Bilder vor. Dadurch werden die Kosten beim erstmaligen Download nicht verbessert, jedoch können andere Seiten auf der Website, auf denen die Bilder verwendet werden, wesentlich schneller geladen werden. Tipps dazu finden Sie in diesem Artikel.

Eine weitere Möglichkeit zur Kostensenkung besteht darin, verknüpfte CSS- und JavaScript-Dateien zu minimieren. Es gibt viele Tools, um dieses Unterfangen zu unterstützen, wie beispielsweise Minify CSS und Minify JS.

Bevor wir dieses Thema verlassen, bemühen wir uns, mit HTML aktuell zu sein (siehe Fehler # 1) und ein gutes Urteilsvermögen verwenden