Monatliches Update zur Webentwicklung 6⁄2018: Komplexität, DNS über HTTPS und Push-Benachrichtigungen

Wir sehen heutzutage Komplexität in jeder Ecke eines Webprojekts. Wir haben eine ganze Reihe von Artikeln darüber gelesen, wie komplex eine bestimmte Technologie geworden ist, und wir diskutieren dies immer wieder. Aus einer Zeit stammend, in der wir Websites per FTP hochgeladen haben und kein Git oder ähnliches hatten, jetzt in einer Zeit leben, in der wir ein Build-System, Transpiler, Frameworks, Tests und ein CI selbst für die kleinsten Projekte haben, ist dies leicht zu verstehen . Aber auf der anderen Seite ist die Webentwicklung in den letzten 15 Jahren so sehr gewachsen, dass wir heute nicht mehr wirklich mit der Vergangenheit vergleichen können . Und während manches früher scheinbar einfacher war, vernachlässigen wir die Vorteile und unzähligen Möglichkeiten, die wir heute haben. Als wir damals keine Tests geschrieben haben, hatten wir einfach keinen Test – also keine verlässliche Möglichkeit, den Erfolg zu testen. Als wir noch keinen Bereitstellungsprozess hatten, war es einfach, eine neue Version hochzuladen, aber ebenso einfach, etwas kaputt zu machen – und es passierte viel mehr als heute, wenn ein Continuous-Integration-System vorhanden ist.

Jeffrey Zeldman hat einen interessanten Artikel zu diesem Thema geschrieben: „The Cult of Complex“ beschreibt, wie wir uns in unnötigen Details verlieren und oft versuchen, Probleme zu überdenken . Ich mag die Herausforderung, Systeme zu bauen, die nicht zu komplex sind, aber ein angemessenes Maß an Verantwortung zeigen (in Bezug auf Ethik, Datenschutz, Sicherheit, eine großartige Benutzererfahrung und Leistung) und zuverlässig funktionieren (Tests, Bereitstellungen, Verfügbarkeit und Leistung wieder). Ich denke, das Problem, die richtige Balance zu finden, wird so schnell nicht verschwinden. Komplexität ist überall – wir müssen nur entscheiden, ob es sich um nützliche Komplexität handelt oder ob sie einfach hinzugefügt wurde, weil es einfacher war oder weil wir das ursprüngliche Problem überarbeitet haben.

Nachrichten

• Die kommende Safari-Version 12 wurde auf Apples WWDC vorgestellt. Das ist neu: Icons in Tabs, sichere Passwörter sowie eine Passwortgenerator-Steuerung über HTML-Attribute inklusive Zwei-Faktor-Authentifizierung, ein 3D- und AR-Modell-Viewer, die Fullscreen-API auf iPads, font-display und, ganz wichtig, Intelligent Tracking Prevention 2.0, das restriktiver denn je ist und erhebliche Auswirkungen auf die Funktionalität bestehender Websites haben kann.
• Die kopflose Chrome-Automatisierungsbibliothek Puppeteer ist jetzt in Version 1.5 verfügbar. Es bringt Browserkontexte mit sich, um Cookies und andere Daten zu isolieren, die normalerweise zwischen Seiten ausgetauscht werden, und Worker können jetzt auch zur Interaktion mit Web Workern verwendet werden.
• Google hat Lighthouse 3.0 veröffentlicht, die dritte Hauptversion seines Leistungsanalyse-Tools, das eine neue Berichtsoberfläche, einige Scoring-Änderungen, einen CSV-Export und First Contentful Paint-Messung bietet.
• Chrome 67 ist da und bringt Progressive Web Apps auf den Desktop sowie Unterstützung für die Generic Sensor API und erweitert die Credential Management API, um U2F-Authentifikatoren über USB zu unterstützen.
• Wir haben in den letzten Monaten einige Änderungen in den Sicherheitsschnittstellen der Browser gesehen. Erstens betonten sie Websites, die eine gesicherte Verbindung (HTTPS) anbieten. Dann entschieden sie sich, unsichere Seiten anzuzeigen, und jetzt kündigte Chrome neue Änderungen für den Herbst an, die HTTPS zum Standard machen, indem HTTP-Seiten als „nicht sicher“ markiert werden.

Allgemein

• In „The Cult of the Complex“ schreibt Jeffrey Zeldman darüber, wie wir oft zu vergessen scheinen, dass Einfachheit der Schlüssel und das Ziel von allem, was wir tun, das Gesamtziel für Projekte und das Leben ist. Er erklärt, warum es so schwer zu erreichen ist und warum es so viel einfacher – und verlockend – ist, komplexe Systeme zu kultivieren. Eine sehr gute Lektüre und definitiv ein Stück, das ich meiner „Evergreen“-Liste hinzufügen werde.
• Heydon Pickering hat einen neuen, sehr interessanten Artikel geteilt, der uns lehrt, wie man eine Webkomponente richtig baut: Dieses Mal erklärt er, wie man ein integratives und responsives „Karten“-Modul baut.

UI/UX

• Cool Backgrounds ist ein cooles Nebenprojekt von Moe Amaya. Es ist ein Online-Generator für polygonale Hintergründe mit Farbverläufen, der viele Varianten und Formen erzeugen kann. Einfach schön.

Werkzeuge

• Ben Frain teilt einige nützliche Textbearbeitungstechniken, die in fast allen modernen Code-Editoren verfügbar sind.

Sicherheit

• Da Sicherheitsangriffe über DNS immer beliebter werden, wird DNS über HTTPS immer wichtiger. Lin Clark erklärt die Technologie mit einem Cartoon, um sie leichter verständlich zu machen.
• Windows Edge zeigt jetzt eine Vorschau der Unterstützung für Cookies auf same-site . Das Attribut, um Cookies noch mehr zu sperren, ist bereits in Firefox und Chrome verfügbar, also ist Safari der einzige große Browser, der es noch implementieren muss, aber ich denke, es wird auch sehr bald in ihren Tech Preview-Builds landen.

Privatsphäre

• Die ACLU hat herausgefunden, dass Amazon sich nun offiziell mit den Strafverfolgungsbehörden zusammengetan hat und eine Massengesichtserkennungstechnologie anbietet, die bereits in Städten auf der ganzen Welt eingesetzt wird.

Webleistung

• KeyCDN hat 15 Personen, die viel über Web-Performance wissen, gebeten, ihre besten Ratschläge mit den Lesern zu teilen. Jetzt haben sie diesen Artikel geteilt, der viele nützliche Leistungstipps für 2018 enthält, darunter auch ein paar Worte von mir.
• Stefan Judis entdeckte, dass wir ECMA-Skriptmodule bereits in Chrome 66 vorladen können, indem wir ein HTML-Header-Tag link rel="modulepreload" .

Barrierefreiheit

• Es ist relativ einfach, einen Loading Spinner zu erstellen – zum Beispiel für eine Single Page Application während des Ladevorgangs –, aber wir denken selten daran, sie zugänglich zu machen. Wie das geht, erklärt Stuart Nelson jetzt.
• Paul Stanton teilt mit, welche Eingabehilfen wir verwenden sollten, um die besten Ergebnisse zu erzielen.

JavaScript

• JavaScript wurde in letzter Zeit von Leuten gemobbt, die Elm, Rust, TypeScript, Babel oder Dart bevorzugen. Aber JavaScript ist definitiv nicht schlechter, wie Andrea Giammarchi mit tollen Beispielen erklärt. Dieser Artikel ist auch eine großartige Lektüre für alle, die eine dieser anderen Sprachen verwenden, da er einige Fallstricke aufzeigt, die wir kennen sollten.
• Für viele Projekte möchten wir Analysen oder andere Skripte verwenden, die personenbezogene Daten sammeln. Mit der Einführung der DSGVO wurde dies viel schwieriger. Yett ist ein nettes JavaScript-Tool, mit dem Sie die Ausführung solcher Ressourcen blockieren können, bis ein Benutzer dem zustimmt.
• Ryan Miller hat eine neue Publikation namens „The Frontendian“ erstellt, die eine der besten Erklärungen und Leitfäden zu CORS enthält, die mir bisher untergekommen sind.
• Die Leute von Microsoft haben eine schöne interaktive Demoseite erstellt, um zu zeigen, wie Web-Push-Benachrichtigungen aussehen können und sollten. Wenn Sie sich noch nicht mit der Technologie vertraut gemacht haben, ist dies eine großartige Einführung, wie alles funktioniert und wie Sie eine Benutzeroberfläche erstellen, die die Benutzer nicht stört.
• Filepond ist eine JavaScript-Bibliothek zum Hochladen von Dateien. Es sieht toll aus und wird mit vielen Adaptern für React, Vue, Angular und jQuery geliefert.
• React 16.4 ist da und bringt ein ziemliches Feature in die Bibliothek: Pointer Events. Sie sollen den Umgang mit Benutzerinteraktionen erleichtern und werden schon seit längerem gefordert.

CSS

• Oliver Schondorfer teilt mit, wie man mit variablen Schriftarten im Web beginnt und wie man sie mit CSS gestaltet. Eine ziemlich vollständige Zusammenfassung der Dinge, die Sie beachten müssen, sowie möglicher Fallstricke.
• Da das kommende macOS Mojave einen „Dunkelmodus“ unterstützt, beginnt Safari damit, die Hintergrundfarbe von Websites automatisch auf Schwarz zu setzen, wenn keine background-color explizit festgelegt ist. Dies ist eine großartige Erinnerung daran, dass Browser ihre Standardstile festlegen und ändern können und dass wir die Standardeinstellungen unserer Website sorgfältig festlegen müssen. Ich hoffe immer noch, dass der „dunkle Modus“ einer CSS-Medienabfrage ausgesetzt wird, damit wir ihn offiziell unterstützen können.
• Rafaela Ferro erklärt, wie man mit CSS Grid eine Fotogalerie erstellt, die nicht nur gut aussieht, sondern auch großartig aussieht. Dieser Artikel hat die Antworten auf viele Fragen, die ich regelmäßig bekomme, wenn ich über das Grid-Layout spreche.
• Marcin Wichary erklärt, wie wir mit modernen benutzerdefinierten CSS-Eigenschaften in kurzer Zeit ein dunkles Design erstellen können.

Arbeitsleben

• Anton Sten schrieb über die moralischen Implikationen für unsere Apps. Eine aussagekräftige Erklärung, warum die Zeiten des „schnellen Handelns und Zerstörens“ definitiv vorbei sind, da wir uns mit künstlicher Intelligenz, sozialen Netzwerken, die das Leben der Menschen beeinflussen, und Datenschutzangelegenheiten, die von der DSGVO durchgesetzt werden, befassen.
• Basecamp hat jetzt einen neuen Diagrammtyp, um den Status eines Projekts anzuzeigen: Das sogenannte „Hügeldiagramm“ fügt einen besseren Kontext hinzu, als es ein einfacher Fortschrittsbalken jemals tun könnte.
• Ben Werdmuller teilt seine Gedanken über Lebensläufe und wie sie immer nicht widerspiegeln, wer Sie sind, was Sie tun und warum Sie eingestellt werden sollten.

Ich hoffe, Ihnen hat dieses monatliche Update gefallen. Die nächste ist für den 13. Juli geplant, also bleiben Sie dran. In der Zwischenzeit, wenn Ihnen gefällt, was ich tue, erwägen Sie bitte, mir zu helfen, die Webentwicklungs-Leseliste finanziell zu finanzieren.

Ich wünsche ihnen einen wunderbaren Tag!

– Anselm