Leseliste Nr. 158 für die Webentwicklung: Benutzerfreundlichkeit von Formularen, Vue.js und die Entfaltung von kritischem CSS
Veröffentlicht: 2022-03-10In diesen Tagen habe ich darüber nachgedacht, welchen Zweck wir als Entwickler in unserer Welt haben . Ich kann Ihnen hier keine Antwort geben, möchte Sie aber zum Nachdenken anregen. Haben Sie dazu eine Meinung? Befriedigen wir nur die Forderungen anderer? Oder sind wir dafür zuständig, die Menschen zu beraten, die Lösungen von uns fordern, wenn wir der Meinung sind, dass sie falsch liegen? Eine herausfordernde Frage, und die Antwort wird für jeden hier anders ausfallen. Wenn Sie mir Ihre Gedanken mitteilen möchten, würde ich mich freuen, sie zu hören.
Geduld mit mir, die Liste dieser Woche ist lang. Es tauchten zu viele gute Ressourcen auf, die technische und Designkonzepte erklärten, wie man neue JavaScript-Methoden verwendet, um intelligentere Anwendungen zu schreiben, wie man CSS-Grid-Layouts verwendet und wie man sich um sein Glück kümmert.
Weiterführende Literatur zu SmashingMag:
- Ein umfassender Leitfaden zur Benutzerfreundlichkeit von Webformularen
- Design von Webformularen: Showcases und Lösungen
- CSS Grid, Flexbox, Box Alignment: Neues System für Weblayout
- So verwenden Sie Analytics, um eine intelligentere mobile Website zu erstellen
Nachrichten
- Die Safari Technology Preview 17 fügt Unterstützung für benutzerdefinierte Elemente v1,
rel=noopener
und das Laden von Stylesheets über ein Link-Element innerhalb von Shadow-DOM-Unterbäumen hinzu. Darüber hinaus wurde das Vorladeverhalten geändert – es entspricht jetzt iOS, wo Ressourcen wie Bilder beim Laden weniger Priorität erhalten. - Die bereits in Nightly Builds verfügbare Funktion zum Emulieren gedrosselter Netzwerkverbindungen in den Firefox-Entwicklertools wird bald auch zur stabilen Version hinzugefügt.
Allgemein
- Matthias Beitl hat einen gut durchdachten Aufsatz darüber geschrieben, wie wir in die „JavaScript-Kriege“, den Paradigmenwechsel und eine Überstundenverbesserung geraten sind.
Konzeptentwicklung
- Erika Hall erklärt in ihrem jüngsten Beyond Tellerand-Vortrag, warum wir uns so sehr bemühen, Dinge zu messen und Daten zu sammeln, und warum dies nicht bedeutet, dass wir bessere Einsichten erhalten oder bessere Entscheidungen treffen.
- Etwas, das leicht vergessen wird, wenn man an die Benutzerfreundlichkeit von Formularen denkt, ist, wie wichtig das Platzieren von Beschriftungen sein kann, wenn ein Benutzer in eine Seite hineinzoomt. Beispielsweise müssen wir bedenken, dass das Platzieren von Beschriftungen über Elementen bedeutet, dass Benutzer, die hineinzoomen, den Kontext nicht verlieren.
- Wie gestaltet man ein einfaches, brauchbares Anmeldeformular für eine Steuerreform? @jelumalai erklärt den Prozess aus der Perspektive eines Designers und taucht tief in die Herausforderung ein, viele Informationen abzufragen und gleichzeitig einen klaren Arbeitsablauf für den Benutzer aufrechtzuerhalten.

Tools & Arbeitsabläufe
- FormLinter überprüft Ihr Formular auf Usability-Probleme. Wenn Sie mehr darüber wissen möchten, was es tut und wie es funktioniert, gibt Ihnen der Ankündigungspost von Ben Orenstein einige Einblicke.
Barrierefreiheit
- Stefan Judis erklärt, wann
aria-selected
zu verwenden ist und wann nicht. Die Anwendung auf das aktuell aktive Navigationselement ist beispielsweise nicht korrekt, die Anwendung auf den aktuell aktiven Tab in einertablist
hingegen wäre es.
JavaScript
- Mike Street zeigt, wie man mit Vue-Router eine Web-App mit Vue.js 2 erstellt. Eine gute Einführung, wenn Sie neu bei Vue.js sind.
- Die Methode
requestIdleCallback
von JavaScript kommt bald in Firefox 52. Wenn Sie nicht warten möchten, gute Nachrichten: Sie kann bereits in Nightly Builds getestet werden und wird auch in Chrome unterstützt, wo sie einen großen Mehrwert bei der Planung von Aufgaben in Zusammenarbeit mit der Browserumgebung darstellt . - Patricia Garcia erzählt ihre Geschichte, wie sie es geschafft hat, mit JavaScript bei der Bekämpfung von Ebola in Afrika zu helfen. Ein großartiges Beispiel dafür, wie man das Offline-Anwendungsdesign skalieren kann und warum gut durchdachte Konzepte wichtig sind, um eine gut funktionierende Lösung zu erstellen.
CSS/Sass
- Oliver Williams teilt mit, was er über CSS Grid Layout gelernt hat. Sobald Sie erkennen, dass es neben Flexbox und nicht als Ersatz verwendet werden soll, werden Sie langsam begreifen, wie leistungsfähig die neue Technologie wirklich ist.
- JP de Vries teilt die Herausforderungen der Entfaltung kritischen CSS und warum die meisten Websites ohne CSS besser dran sind.

Arbeitsleben
- Mike Monteiro hielt einen beeindruckenden Vortrag auf der diesjährigen Beyond Tellerrand Konferenz in Berlin. „Let Us Now Praise Ordinary People“ öffnet uns die Augen dafür, wie wir die Welt verändern können und warum wir übertriebene Startups brauchen, die nur behaupten, etwas zu verändern, um tatsächlich sinnvolle Arbeit zu leisten. Wenn ich Sie dazu bringen kann, sich diese Woche etwas anzusehen, nehmen Sie sich 45 Minuten Zeit, lehnen Sie sich zurück und hören Sie Mike Monteiro zu.
- selfcare.tech möchte Entwicklern helfen, sich besser um ihre Gesundheit zu kümmern. Es zeigt einige großartige Methoden zur Lösung allgemeiner Probleme, mit denen jeder von uns irgendwann konfrontiert wird.
Darüber hinausgehen…
- Diese Solarmodule sind sicherlich eine coole Erfindung: Sie können Trinkwasser direkt aus der Luft ziehen, bis zu 5 Liter pro Tag und Modul. Eine sehr schöne Art, Wasser zu beziehen, wenn Sie keine traditionellen Wasserressourcen haben.
Und damit schließe ich für diese Woche. Wenn Ihnen gefällt, was ich jede Woche schreibe, unterstützen Sie mich bitte mit einer Spende oder teilen Sie diese Ressource mit anderen Menschen. Mehr zu den Kosten des Projekts erfahren Sie hier. Es ist per E-Mail, RSS und online verfügbar.