10 häufige Fehler, die Webentwickler machen

Die Möglichkeiten, die uns zur Bewältigung derselben Aufgabe zur Verfügung stehen, scheinen endlos zu sein, insbesondere wenn es um die Entwicklung einer Website geht, die in einer modernen Netzwerkumgebung betrieben werden kann. Webentwickler müssen zunächst eine Webhosting-Plattform und den zugrunde liegenden Datenspeichermechanismus auswählen und die bereitgestellten Tools zum Schreiben von HTML-, CSS- und JavaScript-Code verwenden. Außerdem müssen sie überlegen, wie sie den Designeffekt erzielen und welche potenziellen JavaScript-Bibliotheken/Frameworks enthalten sein können.

Sobald die Auswahl auf dieses Niveau verfeinert ist, können wir viele relevante Artikel, Foren und Beispiele im Internet finden und lernen, wie wir ein besseres Web-Erlebnis schaffen können. Aber ganz gleich, wie viele Wege zur Auswahl stehen, Entwickler können sich zwischen den Optionen verlieren. Während einige dieser Fehler mit bestimmten Szenarien zusammenhängen, gibt es auch einige allgemeine Herausforderungen, mit denen jeder Webentwickler konfrontiert ist.

Durch eine Reihe von Recherchen, Erfahrungen und jüngsten Beobachtungen habe ich die folgende Liste der zehn häufigsten Fehler zusammengestellt – in der Tat leiden viele Webentwickler immer noch darunter, dass ich beunruhigt war damit, und ich habe auch meine eigene Lösung gegeben.

Die folgende Liste ist in keiner bestimmten Reihenfolge.

1. Alten HTML-Code schreiben

Fehler: In den frühen Tagen des Internets standen nur wenige Markup-Optionen zur Verfügung, aber mittlerweile sind diese Optionen ziemlich umfangreich geworden. Einige alte Gewohnheiten bestehen jedoch auch heute noch, und viele Praktiker schreiben HTML-Code, als würden sie noch im letzten Jahrhundert leben. Konkrete Beispiele sind die Verwendung des

-Elements, die weitere Verwendung des -Elements, wenn andere semantische Tags geeigneter sind, und die Verwendung von Elementen wie werden derzeit nicht unterstützt. HTML-Standard-Tags verwenden sogar eine große Anzahl von Elementen, um Elemente auf der Seite anzuordnen.

Auswirkung: Das Schreiben des oben genannten HTML-Codes mit einem starken Stil des letzten Jahrhunderts kann zu einer übermäßigen Markup-Komplexität führen, was zu unterschiedlichen Betriebseffekten in verschiedenen Browsern führt. Darüber hinaus gibt es keinen Grund, ein derart komplexes Markup in Microsoft Edge oder sogar neueren Versionen des IE (einschließlich IE 9, 10 und 11) zu verwenden.

So vermeiden Sie: Verwenden Sie das Element

nicht zur Handhabung des Inhaltslayouts und schränken Sie die Häufigkeit seiner Verwendung bei der Anzeige von Tabellendaten streng ein. Um eine gute Vorstellung davon zu bekommen, welche Markup-Optionen derzeit verfügbar sind, sehen Sie sich die Zusammenfassung hier auf whatwg.org an. Verwenden Sie HTML-Code, um den Inhalt der Seite zu beschreiben, anstatt zu definieren, wie der Inhalt angezeigt wird. Um Ihre Designinhalte korrekt anzuzeigen, verwenden Sie zunächst CSS.

　2. „Es gibt kein Problem in meinem Browser …“

　Fehler: Entwickler bevorzugen möglicherweise einen bestimmten Browser oder verachten einen anderen Browser und bringen diese voreingenommene Perspektive in Ihre Webtestbemühungen ein . In einigen Fällen integrieren wir möglicherweise sogar Beispielcode aus dem Internet direkt in das Projekt, ohne zu testen, ob er in anderen Browsern korrekt dargestellt wird. Darüber hinaus verfügen einige Browser über unterschiedliche Standardeinstellungen für Stile.

Auswirkung: Das Schreiben einer Website, die nur für einen bestimmten Browser geeignet ist, führt wahrscheinlich zu einem sehr schlechten Zugriffserlebnis für Benutzer, die andere Browser verwenden.

So vermeiden Sie: Es ist offensichtlich unrealistisch, Webseiten während des Entwicklungsprozesses für jeden Browser und jede Version zu testen. Wir können jedoch mehrere Browser verwenden, um in jedem bestimmten Zeitraum zu überprüfen, ob unsere Website ordnungsgemäß funktioniert, was einen idealen Kompromiss darstellt. Unabhängig davon, welche bevorzugte Entwicklungsplattform Sie derzeit verwenden, gibt es eine große Anzahl kostenloser Tools, die Sie bei Ihrer Testarbeit unterstützen können, darunter kostenlose virtuelle Maschinen oder Site-Scanning-Tools. Websites wie Browsershots oder BrowserStack können auch Schnappschüsse bereitstellen, die uns helfen zu verstehen, wie eine bestimmte Seite in verschiedenen Browsern/Versionen/Plattformen dargestellt wird. Tools wie Visual Studio können auch verschiedene Browser verwenden, um eine einzelne Seite anzuzeigen, die wir gerade entwickeln. Denken Sie beim Entwerfen mit CSS daran, alle Standardwerte „zurückzusetzen“.

Wenn Ihre Website spezielle CSS-Funktionen verwendet, die für einen einzelnen Browser erstellt wurden, beachten Sie bitte die verschiedenen Anbieterpräfixe, einschließlich -webkit-, moz- oder -ms-. Als Leitfaden für Branchentrends empfehle ich Ihnen, die unten aufgeführten Referenzseiten sorgfältig zu prüfen (alle im englischen Original):

　• Microsoft Edge Development Blog: Eine Pause von der Vergangenheit, Teil 2: Abschied von ActiveX , VBScript , attachmentEvent…

• QuirksMode.org: CSS-Anbieterpräfixe gelten als schädlich

• Bruce Lawson: Im Internet Explorer werden -webkit- Herstellerpräfixe unterstützt

Obwohl in der obigen Referenz erläutert wurde, wie wir die Bereitstellung des Programms vermeiden können Präfixe und ihre Gründe, aber Sie können auch hier klicken, um mehr über Lösungen mit konkreten Vorschlägen zu erfahren (Original auf Englisch).

3. Achten Sie auf die Anpassung des Formats

Fehler: Informationen vom Benutzer durch Eingabeaufforderungen anfordern (insbesondere durch Eingabe von Textfeldern) und einfach davon ausgehen, dass die Daten vom Benutzer erhalten werden können erwartet erhalten.

Auswirkung: Wenn wir darauf vertrauen, dass Benutzer standardmäßig Informationen eingeben, können viele unerwartete Probleme auftreten. Wenn die angeforderten Daten nicht korrekt abgerufen werden oder die abgerufenen Daten nicht mit dem zugrunde liegenden Datenformat kompatibel sind, liegt wahrscheinlich ein Fehler auf der Seite vor. Noch schwerwiegender ist, dass einige vorsätzliche Verletzungen der Website-Datenbank sogar ausreichen, um einen Injektionsangriff darzustellen.

So vermeiden Sie es: Der erste Tipp besteht darin, sicherzustellen, dass Benutzer klar verstehen, welche Art von Daten sie auf der Website eingeben müssen. Im Moment kann eine einfache Aufforderung „Bitte geben Sie die Adresse ein“ bedeuten, dass der Benutzer eine Geschäftsadresse, eine Privatadresse oder sogar eine E-Mail-Adresse eingeben muss! Neben gezielten Erklärungen sollten wir auch die Technologie zur Überprüfung der Datengültigkeit, die modernes HTML bietet, voll ausschöpfen. Unabhängig davon, ob die Daten auf der Browserseite als gültig gelten, ist es wichtig, dass wir sie auch auf der Serverseite validieren. Erlauben Sie niemals, dass vom Benutzer eingegebene mehrzeilige Index-T-SQL-Anweisungen Site-Daten verwenden, ohne zu bestätigen, dass die Feldinhalte den Datentypanforderungen entsprechen.

4. Die Reaktionsgeschwindigkeit ist zu langsam

Fehler: Bei Seiten, die eine große Anzahl hochwertiger Bilder und/oder Bilder enthalten, sollten wir das -Element verwenden, um es anzupassen Höhen- und Breitenattribute. Und Links zu Dateien wie CSS und JavaScript von der Seite sind oft umfangreich. Darüber hinaus führt das Vorhandensein von Quell-HTML-Markup häufig zu unnötiger Komplexität und Ladeaufwand.

Auswirkung: Wenn das vollständige Rendern einer Seite zu lange dauert, geben einige Benutzer möglicherweise den Zugriff auf oder laden sogar ungeduldig die gesamte Seite neu. In einigen Fällen können sogar andere unbekannte Fehler auftreten, wenn die Verarbeitung der Seite zu lange dauert.

So vermeiden Sie: Denken Sie nicht, dass Sie mit der immer schneller werdenden Übertragungsgeschwindigkeit des Internets ohne Skrupel überladene Seitenergebnisse gestalten können. Betrachten Sie stattdessen jeden Datenverkehr von und zu Ihrem Browser zu Ihrer Website als Betriebskosten. Man kann sagen, dass Bilder die Ursache für aufgeblähte Seiten sind. Um die Ladekosten zu minimieren, die Bilder auf die Seite bringen, betrachten Sie es bitte aus den folgenden drei Blickwinkeln:

Fragen Sie sich: „Was ist darin enthalten?“ „Sind alle Bilder notwendig?“ Wenn die Antwort „Nein“ lautet, entfernen Sie unnötige Bilder. Sie können auch hier klicken, um Ihre Website zu scannen und Empfehlungen zu erhalten, welche Bilder komprimiert werden können.

Verwenden Sie Tools wie Shrink O’Matic oder RIOT, um die Größe Ihrer Bilder auf ein Minimum zu beschränken.

Übernehmen Sie eine Lösung zum Vorladen von Bildern. Dadurch werden die tatsächlichen Kosten des ersten Downloads nicht gesenkt, aber es ermöglicht, dass andere Seiten auf Ihrer Website, die verwandte Bilder verwenden, schneller geladen werden.

Eine weitere Möglichkeit, Kosten zu senken, besteht darin, die Größe von CSS- und JavaScript-Linkdateien zu komprimieren. Derzeit können wir aus einer Vielzahl von Tools wählen, die uns bei der Durchführung dieser Bewertung unterstützen, darunter Minify CSS und Minify JS.

Bevor wir den vierten Fehler beenden, müssen wir erwähnen, dass Sie bitte eine genaue Beurteilung treffen, bevor Sie das

　

　5. Schreiben Sie Code, der „funktionieren sollte“

　Fehler: Ob es sich um JavaScript oder Code handelt, der auf der Serverseite ausgeführt wird, als Entwickler sollten wir Tests bestehen, um zu überprüfen, ob er tatsächlich ist Betriebseffekt, um sicherzustellen, dass es nach der Bereitstellung die erwartete Rolle spielen kann. Ihr Code sollte bei der Ausführung keine Fehler verursachen, da wir ihn zuvor vollständig getestet haben.

Auswirkung: Websites, die ungetesteten Code enthalten, führen wahrscheinlich zu Fehlern, die für Endbenutzer sehr schädlich sind. Dies kann nicht nur schwerwiegende Auswirkungen auf das tatsächliche Benutzererlebnis haben, sondern der spezifische Inhalt der Fehlermeldung kann auch Details preisgeben, die für Hacker, die die Website kompromittieren wollen, streng geschützt werden sollten.

So vermeiden Sie: Menschen werden unweigerlich Fehler machen, daher sollten wir dieses philosophische Denken in die Programmierarbeit einbringen. Bei JavaScript sollten wir darauf achten, die besten technischen Mittel einzusetzen, um Fehler zu vermeiden und sie zu erkennen, wenn sie tatsächlich auftreten. Eine weitere Möglichkeit, die Codequalität zu verbessern, besteht darin, Ihren Code anhand möglicher zukünftiger Änderungen einem Unit-Test zu unterziehen.

Serverseitige Codefehler müssen entdeckt und behoben werden, bevor Benutzer davon erfahren. Zeigen Sie Benutzern nur die erforderlichen Fehlermeldungen an. Seien Sie bitte vorsichtiger und gestalten Sie Ihre HTTP-404-Fehlerseite ansprechender.

6. Fork-Code schreiben

Fehler: Aus der noblen Idee heraus, alle Browser und ihre Versionen zu unterstützen, werden einige Entwickler unterschiedlichen Code erstellen, der jeder möglichen Ausführungsszene entspricht. Diese Codes basieren auf if-Anweisungsschleifen und stellen entsprechende Fork-Versionen für verschiedene praktische Richtungen bereit.

Auswirkung: Da die Browserversionen weiterhin aktualisiert werden, wird die Verwaltung von Fork-Codedateien sehr kompliziert oder sogar unmöglich. Darüber hinaus ist dies, wie im ersten Punkt erwähnt, eigentlich völlig unnötig.

So vermeiden Sie: Überprüfen Sie die Funktionalität im Code, anstatt auf den Browser/die Version abzuzielen. Das Aufkommen funktionaler Erkennungstechnologielösungen reduziert die Codemenge erheblich und sorgt außerdem dafür, dass der Code einfacher zu lesen und zu verwalten ist. Sie können die Verwendung von Bibliotheken wie Modernizr in Betracht ziehen, um die Funktionserkennung zu implementieren und gleichzeitig automatisch Backup-Unterstützung für ältere Browser bereitzustellen, die sich nicht mehr an HTML 5 oder CSS 3 anpassen können.

7. Nicht responsives Design verwenden

Fehler: Bei der Arbeit auf der Website wird davon ausgegangen, dass der Benutzer die gleiche Monitorgröße hat wie der Entwickler/Designer.

Auswirkung: Wenn Sie die Website auf einem mobilen Gerät oder auf einigen sehr großen Bildschirmen betrachten, wird auch das Benutzererlebnis beeinträchtigt – zum Beispiel sind einige wichtige Aspekte der Seite nicht sichtbar oder es ist sogar nicht möglich, zu anderen zu navigieren Seiten.

So vermeiden Sie: Berücksichtigen Sie Responsive Design bei der Entwicklung. Verwenden Sie Responsive Design auf Ihrer Website und passen Sie die Bildgrößen auf die gleiche Weise an. Bootstrap, eine beliebte Bibliothek, kann Ihnen in dieser Hinsicht definitiv sehr helfen.

8. Erstellen bedeutungsloser Seiten

Fehler: Öffentlich zugängliche Seiten enthalten nützliche Inhalte und Informationen, bieten jedoch keine suchmaschinenbezogenen Schlüsselwörter, Tags und Hinweise. Es werden keine Barrierefreiheitsfunktionen bereitgestellt.

Auswirkung: In diesem Fall wird es für Benutzer schwierig, unsere Seite über Suchmaschinen zu finden, wodurch es schwierig oder sogar unmöglich wird, den gewünschten Traffic zu erhalten. Darüber hinaus muss der Seiteninhalt sorgfältig gestaltet werden, um sicherzustellen, dass die Sicht des Benutzers beim Betrachten nicht manipuliert wird.

So vermeiden Sie: Nutzen Sie SEO-Mechanismen (Suchmaschinenoptimierung) und unterstützen Sie die Barrierefreiheit von HTML. Wenn es um SEO geht, achten Sie darauf, Tags hinzuzufügen, um aussagekräftige Seiteninhalte mit Schlüsselwörtern und relevanten Beschreibungen bereitzustellen. Für eine bessere Barrierefreiheit können Sie das Attribut alt="Ihre Bildbeschreibung" unter jedem -Tag überprüfen. Natürlich reicht es nicht aus, dies einfach zu tun. Klicken Sie hier, um herauszufinden, ob die Seite mit Abschnitt 508 kompatibel ist.

　9. Die entwickelte Seite enthält zu viele Aktualisierungsvorgänge

　Fehler: Die erstellte Site enthält zu viele Seitenaktualisierungsschritte für jeden Vorgang.

Auswirkung: Ähnlich wie bei aufgeblähten Seiten (siehe Punkt 4) wird auch der wichtige Leistungsindikator der Seitenladezeit beeinträchtigt. Wenn es zu viele Aktualisierungen gibt, ist die Benutzererfahrung nicht reibungslos und jede Inhaltsaktualisierung kann zu einem kurzen (oder langen) Zurücksetzen der Seite führen.

So vermeiden Sie: Eine der bequemsten Möglichkeiten, dieses Problem zu lösen, besteht darin, zu überprüfen, ob jeder Vorgang wirklich notwendig ist, um den Server zu kontaktieren. Wenn wir beispielsweise für die Verarbeitung nicht auf serverseitige Ressourcen angewiesen sind, können wir die eigenen Skripts des Clients verwenden, um sofortige Ergebnisse bereitzustellen. Natürlich können Sie auch die AJAX-Technologie nutzen oder einen Schritt weiter gehen und sich für eine Single-Page-Application-SPA-Lösung entscheiden. Derzeit bieten verschiedene beliebte JavaScript-Bibliotheken/Frameworks viele Möglichkeiten, dieses Problem zu vereinfachen, wie z. B. JQuery, KnockoutJS und AngularJS.

　10. Zu viel Arbeit

　Fehler: Entwickler widmen möglicherweise zu viel Zeit der Erstellung von Webinhalten. Diese Zeit kann mit sich wiederholenden Aufgaben oder einfach mit der Eingabe großer Textmengen verbracht werden.

Auswirkungen: Wenn eine Website gerade erst gestartet ist oder nachfolgende Aktualisierungen durchläuft, wird der Zeitaufwand, den Entwickler in sie investieren, oft zu hoch angesetzt. Und wenn es andere Entwickler gibt, die den gleichen Effekt in kürzerer Zeit und mit weniger Aufwand erzielen können, wird der Zeitaufwand, den wir investieren, nicht die optimale Rendite erzielen. Diese einfache, sich wiederholende manuelle Arbeit kann zu Fehlern führen, und die Diagnose von Fehlern ist oft zeitaufwändiger als die Entwicklung des Projekts.

So vermeiden Sie: Finden Sie Ihre eigenen Lösungen. Wir können den Einsatz neuer Tools oder neuer Workflow-Technologien in Betracht ziehen, um jede Entwicklungsphase zu bewältigen. Ist beispielsweise der Code-Editor, den Sie derzeit verwenden, besser als Sublime Text oder Visual Studio? Unabhängig davon, welchen Code-Editor Sie verwenden, haben Sie sich jemals mit den Funktionseinstellungen befasst? Vielleicht können wir allein dadurch, dass wir uns sporadisch die Zeit nehmen, die Dokumentation sorgfältig zu lesen, neue Verwendungsmöglichkeiten finden, die ausreichen, um uns mehrere Stunden oder sogar noch mehr Zeit in der Zukunft zu sparen.

Verpassen Sie auch keine fertigen Tools im Internet, die helfen könnten! Durchsuchen Sie beispielsweise dev.modern.ie nach Tools, die das Testen (über mehrere Plattformen und Geräte hinweg) und die Fehlerbehebung vereinfachen.

Außerdem können Sie durch automatisierte Prozesse den Zeitaufwand und die Fehlerwahrscheinlichkeit reduzieren. Beispielsweise können wir Tools wie Grunt verwenden, um Aufgaben wie die Komprimierung der Dateigröße automatisch auszuführen. Darüber hinaus kann Bower Ihnen dabei helfen, Bibliotheken und Frameworks effizienter zu verwalten.

Gibt es also Raum für Optimierungen im Webserver selbst? Wir können Microsoft Azure Web Apps wählen und schnell eine Website erstellen, die für fast jedes Entwicklungsszenario geeignet ist. Dies ist definitiv eine ideale Lösung für die Erweiterung Ihres Unternehmens!

Abschließende Bemerkungen

Durch die Auflistung der oben genannten häufigen Fehler können Webentwickler viele der Fallen beseitigen, die unzähligen Vorgängern geschadet haben. Wir waren uns dieser Fallstricke nicht nur bewusst, sondern verstanden auch die Auswirkungen dieser Fehler und wussten, wie wir sie beheben können. Wir haben einen entsprechenden Entwicklungsprozess entworfen, um Vertrauen in unsere Arbeit aufzubauen und uns gleichzeitig an unsere Gewohnheiten anzupassen. Komm schon, Kameraden!

Originaltitel: 10 häufige Fehler bei Webentwicklern