HTML ist das Web

Was ist los mit HTML im Frontend? Kürzlich habe ich mit vielen Entwicklern gesprochen. Es scheint, dass einige HTML nicht einmal verstehen. Ich meine, sie verstehen etwas. Sie verstehen, was ein div und was eine span , und wenn alles gut aussieht und mit einem Klick funktioniert, ist das genug für sie. In einem solchen Ausmaß, dass viele Leute die Frage zu HTML beantworten: "Oh ja, ich mache jetzt alles in React oder Vue." Aber es ist wirklich egal, dass Sie nur Javascript schreiben. Wenn Sie Websites entwickeln, ist HTML das Wichtigste für Sie. Das ist das Web.

Es geht darum, was der Benutzer verbraucht. Dies sind UI und UX. Hier ist das ganze Paket. In absteigender Reihenfolge der Wichtigkeit: HTML, CSS und Verhalten (die von Javascript bereitgestellt werden können - oder auch nicht).

Ich sehe ein Problem am Ende dieser Technologiepyramide. Der kleinste gemeinsame Nenner des Webs. Die Basis. Rhythmusband. Wirsing aller Desserts des Netzes. Das ist HTML. Und es scheint mir immer mehr, dass eine ganze Schicht von Front-End-Ingenieuren die Haupttechnologie des Front-End nicht kennt oder nicht versteht.

Eine Webseite ist ein Dokument. Jede Komponente, sei es eine Blog-Vorlage, eine News-Site, ein Marketing-Statistik-Panel oder ein Registrierungsformular, ist Teil des Dokuments. Dokumente haben eine Struktur. Im Internet geht es nicht nur um die visuellen Elemente oder die Architektur, die Ihre Plattform bietet. Es geht darum, die semantisch korrekten Elemente so auszuwählen, dass Ihre Webseite, Komponente, was auch immer, strukturell korrekt formatiert ist. Überschriften sollten Überschriften sein, Listen sollten Listen sein, Schaltflächen sollten Schaltflächen sein und Tabellen sollten Tabellen sein. Sie können sie (so ziemlich) nach Belieben stylen - der Titel muss nicht groß und fett mit Einrückungen unten sein. Es liegt an dir, aber es sollte definitiv eine Überschrift sein, und ich kann dich bekämpfen, wenn du es wie ein div machst.

HTML ist nicht so schwer zu lernen, insbesondere wenn Sie bereits JavaScript-Frameworks kennen. Ich habe nicht darüber nachgedacht, aber ich bin mir ziemlich sicher, dass es dort nur etwa 116 Elemente gibt und die meisten von Ihnen niemals gebraucht werden. Warum nicht lernen?

Ich bin einer von denen, die am äußersten Rand des Frontends arbeiten. Ich mache HTML und CSS, daher fällt es mir leicht, alle zu ermutigen, das zu lernen, was ich bereits weiß (ich weiß nicht alles - wir haben in unserem Büro immer noch viele Debatten darüber, wie eine bestimmte Komponente am besten markiert werden kann). Es ist nicht so, dass meine Arbeit wichtiger ist als deine. Wenn Sie Code schreiben, der etwas im Browser anzeigt, ist dies definitiv Ihre Aufgabe.

Es geht um Benutzerfreundlichkeit und Zugänglichkeit. Wenn Sie die semantische Struktur Ihrer Webseite oder Anwendung nicht für wichtig halten, sagen Sie im Wesentlichen: "Nun, alles funktioniert für mich, Sie können es freigeben." Ich denke nicht, dass Javascript hier genug ist, ebenso wie CSS. Suchmaschinen sollten Ihre Inhalte lesen und keine schnellen Animationen oder ausgefallenen Farbverläufe genießen. Der Bildschirmleser sollte Ihren Inhalt lesen. Benutzer ohne Maus sollten mit Ihrer Site arbeiten. Wer weiß, welche Technologie als nächstes kommt und wie Ihre Anwendung wahrgenommen wird, aber ich wette auf das neueste Bitcoin, das wahrscheinlich durch die Möglichkeit unterstützt wird, Inhalte einfach zu lesen, zu analysieren und zu navigieren. Alle diese Technologien sollten Inhalte als integralen Inhalt wahrnehmen und nicht nur Textzeilen, die in bedeutungslose Tags eingeschlossen sind. Sie sollten sehen, was eine Tabelle ist und wie sie dargestellt wird, was eine Liste ist und wie sie dargestellt wird, was eine Schaltfläche ist und was eine Flagge ist. Machen Sie alles div, und sie müssen verdammt viel Arbeit leisten, um solche Dinge zu erkennen.

„Aber mein Framework kümmert sich um alles. Ich schreibe nur .jsx-Vorlagen »

Nein. Schreiben Sie den richtigen HTML-Code in Ihre JSX. Du kannst es schaffen. Nur weil Sie React oder Vue oder etwas anderes verwenden, müssen Sie nicht alles mit divs schreiben. Nicht erforderlich.

"Diese Bibliothek fügt überall WAI-Aria-Attribute hinzu, sodass die Barrierefreiheit in Ordnung ist."

Großartig. Wenn Sie den richtigen HTML-Code geschrieben haben, werden die meisten dieser Attribute überhaupt nicht benötigt. Sie erhalten eine ganze Reihe von onClick kostenlos, indem Sie einfach eine echte button anstelle eines div mit einem onClick Ereignishandler verwenden. KOSTENLOS. Es ist kostenlos zugänglich, Leistung und Benutzerfreundlichkeit. KOSTENLOS!

Das sind wirklich wichtige Dinge. Wenn es nicht befolgt wird, bricht es langsam (eigentlich nicht so langsam) das Web. Zumindest macht es für Personen, die Ihr Produkt verwenden, weniger zugänglich. Wenn Sie sich als Front-End-Techniker bezeichnen, müssen Sie die Grundlagen des Webs herausfinden und nutzen, die allen Browsern, Plattformen, Geräten oder Haushaltsgeräten gemeinsam sind, die auf das Internet zugreifen können.

Bitte mach es. Machen Sie das Internet besser und gehen Sie verantwortungsbewusst mit der Entwicklung um. Es gibt genügend Ressourcen im Web, die Ihnen helfen können. Hier einige, um Ihnen den Einstieg zu erleichtern:

• Erfahren Sie, wie Sie ein Dokument in HTML anlegen. Probieren Sie einfache mentale Übungen aus, wenn Sie sich ein Konzertplakat oder eine Zeitungsseite ansehen - und stellen Sie sich vor, wie es in HTML strukturiert sein wird. Wenn Sie Zeit haben, schreiben Sie diesen HTML-Code. Nutzen Sie dieses Wissen in der täglichen Arbeit.
  
• MDN ist eine großartige Ressource mit Blogs, Tutorials und nützlichen Links.
  
• Erreichen Sie die Menschen in der Gemeinde. Lesen Sie Blogs (zum Beispiel Andy Bells jüngsten Beitrag über die Verwendung von semantischem HTML) und sehen Sie sich das Video an .
  
• Als ich studierte, war es immer noch nützlich, auf die Quelle zu schauen. Wir haben dies gemeinsam für aktuelle und zukünftige Generationen gebrochen, aber ich kann Sie mit der Leistung der „Entwicklertools“ im Browser beeindrucken
  
• Erfahren Sie, wie unterstützende Technologie im Web funktioniert
  
• Schauen Sie sich die HTML-Spezifikationen oder auch nur eine Liste von HTML-Elementen und Beispiele für deren Verwendung an.
  
• Wenn Sie als Team arbeiten, besprechen Sie das Markup. Wirklich argumentieren, es wird richtig sein, ein Element in Form einer table oder dl ( Description List Element , MDN) einzufügen. Es wird eine Menge Spaß machen, das verspreche ich.
  
• Finden Sie heraus, wer der beste HTML-Experte in Ihrem Team ist, und bitten Sie ihn, Ihren Code zu überprüfen. Wenn ich es bin, rede ich immer gerne.