Es gab eine Zeit, in der ich mich von der rasanten Entwicklung des Webs überwältigt fühlte. Es schien, als ob kein Tag verging, ohne dass ein neues Plugin, Framework, eine neue Technik oder ein neues Sprachfeature veröffentlicht wurde. Ich glaubte, dass ich alles lernen musste, was alle anderen so gut konnten, um als Freiberufler zu überleben und mit anderen konkurrieren zu können: webpack, React, Angular, SVGs, Houdini, CSS Grid Layout, ES6, Sie nennen es. Die Aktivität auf Twitter und der Besuch von Konferenzen halfen dabei nicht, da ich ständig all den neuen Dingen ausgesetzt war.
Ergeben
Irgendwann gab ich auf. Ich entschied selbst, dass ich nicht mithalten kann. Beruflich hat es nichts für mich geändert, denn in Wirklichkeit erwartete niemand von mir, alles zu wissen, und dieser Eindruck, den ich hatte, spielte sich sowieso nur in meiner Blase ab. Langsamer zu werden war eine brillante Entscheidung, denn es war nicht nur eine mentale Erleichterung, sondern es half mir auch, mich auf die Dinge zu konzentrieren, die ich tatsächlich lernen wollte. Ich lese immer noch Newsletter, Blogs und Twitter, und ich nehme mir immer noch ab und zu Zeit, etwas Neues auszuprobieren, aber ich tue es ohne Druck. Ich versuche, auf dem Laufenden zu bleiben, aber ich habe nicht den Drang, alles wissen zu müssen.
So gehe ich seit einigen Jahren mit der Entwicklung im Web um, aber vor kurzem, besonders dieses Jahr, habe ich etwas Neues gelernt. Es war kein Framework oder eine Sprache – es war die Erkenntnis, dass wir bei unserem Streben nach Innovation und Fortschritt versäumen, auf die vielen Funktionen zurückzugreifen, die HTML, CSS und JavaScript heute bieten. Mit anderen Worten: Es gibt so viel zu lernen, wenn wir zurückblicken statt nach vorn.
Verfolge nicht die Wasserfälle
Ich spreche von Vernachlässigung, weil ich glaube, dass es eine erhebliche Kluft gibt zwischen den Dingen, von denen wir glauben, dass wir sie über Front-End-Sprachen wissen, und dem, was wir tatsächlich wissen sollten.
HTML
Es gehört zu meinem Job und zu meinem Hobby, Websites zu inspizieren und die Qualität ihres Front-Ends zu bewerten. Ich habe viele Websites unter die Haube geschaut und kann nur bestätigen, was Web-Accessibility-Experten jeden Tag predigen: Die meisten HTML-Dokumente sind in einem schrecklichen Zustand. Wenn Sie mir nicht glauben, schauen Sie sich die Daten an
- 98,1% der Top 1.000.000 Homepages weisen nachweisbare WCAG 2-Fehler auf.
- Tausende von Websites enthalten
<h7>und<h8>Elemente. - Nach Titel und Meta ist
divdas beliebteste Element. - Im Durchschnitt verwenden wir nur etwa 30 der über 110 verfügbaren Elemente.
Es gibt einen riesigen Unterschied zwischen dem Wissen der HTML-Syntax und dem Wissen, wie man sie richtig anwendet. Wenn es darum geht, gut strukturierte, semantische HTML-Dokumente zu schreiben, können wir alle eine kleine Auffrischung gebrauchen. Im Jahr 2020 habe ich viel Zeit damit verbracht, HTML zu lernen, und ich hoffe, dass die Nutzer der Websites, die ich baue, von meinen Erkenntnissen profitieren können.
Zwei meiner Lieblingsdinge, die ich 2020 über HTML gelernt habe
Sie können den Dateinamen einer herunterladbaren Datei ändern, indem Sie einen Wert im download-Attribut definieren.
<a href="files/yxcvc27.pdf" download="report.pdf">Download (2MB)</a>Sie können das value-Attribut verwenden, um die Nummerierung in einer geordneten Liste zu ändern.
<ol>
<li value="3">C</li>
<li value="2">B</li>
<li value="1">A</li>
</ol>CSS
Fast jedes Mal, wenn ich eine CSS-Eigenschaft auf MDN oder CSS-Tricks nachschlage, entdecke ich etwas Neues. Probieren Sie es selbst aus. Suchen Sie nach margin, list-style-type oder color. Ich bin sicher, Sie werden etwas lernen.
Die Liste der Dinge, die ich 2020 über CSS gelernt habe, ist ziemlich lang, hier sind zwei meiner Favoriten.
Sie können die url()-Funktion als (Teil) des Werts der content-Eigenschaft verwenden.
div::before {
content: url('marker-icon.png');
}Sie können natives Smooth Scrolling in CSS implementieren.
// Animate scrolling only if users don’t prefer reduced motion
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
// Add some spacing between the target and the top of the viewport
:target {
scroll-margin-top: 0.8em;
}
}JavaScript
Ich schreibe regelmäßig JavaScript, aber es ist keine meiner Kernkompetenzen, daher lerne ich ständig neue Dinge darüber. Hier sind zwei meiner Favoriten dieses Jahr
Sie können das nomodule-Attribut verwenden, um JavaScript-Code nur in Browsern auszuführen, die JavaScript-Module nicht unterstützen.
<script nomodule>
console.log('This browser doesn’t support JS Modules.');
</script>
<script type="module">
console.log('This browser supports JS Modules.');
</script>Fazit
HTML ist das Rückgrat jeder Website; zu wissen, wie man semantische Dokumente schreibt, sollte die oberste Priorität jedes Webentwicklers sein. CSS ist für sich genommen so komplex, dass wir, um neue Konzepte zu lernen, verstehen müssen, welche Probleme sie im Vergleich zu älteren Techniken lösen. JavaScript-Frameworks und -Bibliotheken kommen und gehen, aber was sie alle gemeinsam haben, ist, dass sie in Vanilla JavaScript geschrieben sind.
Im Jahr 2020 habe ich Dinge wieder gelernt, die ich bereits vergessen hatte, und neue Dinge über etablierte Elemente und Eigenschaften entdeckt. Es gibt so viel verborgenes Wissen zu finden, wenn man nur danach sucht. Ich werde das im Jahr 2021 ausbauen, denn es gibt noch so viel großartige Dinge zu entdecken.