Monatliches Webentwicklungs-Update 7⁄2018: Praktische Zugänglichkeit, Designfehler und Funktionssteuerung

Das Web erstaunt mich immer wieder. Bei all ihrer Vielfalt und den verschiedenen Änderungen an der Plattform ist es schwer, ein klares Muster zu erkennen – wenn es überhaupt (nur) eines gibt. Aber es ist wunderbar zu sehen, was geändert wird, welche Funktionen der Plattform hinzugefügt werden, welche veraltet sind und wie Browser immer mehr Technologien implementieren, um den Benutzer vor böswilligen Website-Angriffen zu schützen. Es ist interessant zu sehen, dass diese Sicherheitsfunktionen heutzutage genauso viel Aufmerksamkeit erhalten wie eine Funktion für Entwickler; Dies zeigt, wie wichtig Datenschutz und Sicherheit sind und wie instabil und unsicher das Internet in der Vergangenheit war.

Aber das Beste an all dem ist, dass es zeigt, wie wichtig es ist, an den Dingen festzuhalten, die uns die Menschen geben. Anstatt für alles eigene Lösungen zu implementieren, ist es oft viel besser, ein bestehendes System wiederzuverwenden. Es ist nicht nur sicherer, sich darauf zu verlassen, sondern es ist auch weniger arbeitsintensiv und umfassender, ein natives DOM-Element mit einem benutzerdefinierten Element zu erweitern (anstatt unser eigenes benutzerdefiniertes Element von Grund auf neu zu schreiben). Wenn wir darüber nachdenken, ob wir unsere eigene Version von SSL erstellen oder dafür eine vorhandene Software verwenden sollten, warum sollten wir dann ein anklickbares Element erstellen, das auf nichts basiert, anstatt das Verhalten eines a oder button zu ändern? Und warum sollten wir selbst nach Ressourcen-Host-Validierung suchen, wenn der Browser uns dafür bereits eine API zur Verfügung stellt? Die Artikel dieser Woche sind alle diesen Themen gewidmet.

Eine andere Sache, die mir in Erinnerung geblieben ist, ist Andrea Giammarchis Artikel „A Bloatless Web“, in dem er beschreibt, wie wir als Entwickler blindlings Babel verwenden, wenn wir JavaScript schreiben, um modernes ECMAScript schreiben zu können. Aber wir erkennen normalerweise nicht, dass das Transpilieren unseres gesamten modernen Codes in moderne Browser nicht der effizienteste Weg ist. Ich freue mich, dass Andrea einige Ideen anbietet, wie wir diese Situation verbessern und die Leistung unserer Web-Apps verbessern können. Wäre es nicht erstaunlich, nur ein Drittel der Bundle-Größe bereitzustellen, indem der Code nicht mehr für jeden einzelnen Browser transpiliert wird?

Nachrichten

• Die Site-Isolierung erschwert es nicht vertrauenswürdigen Websites effektiv, auf andere Websites zuzugreifen oder Informationen von Ihren Konten zu stehlen. Chrome 67 wird jetzt damit ausgeliefert und Cross-Origin Read Blocking (CORB) lädt nicht mehr, z. B. eine JSON-Datei als Bild. Darüber hinaus führen diese Änderungen aber auch dazu, dass das ganzseitige Layout nicht mehr garantiert synchron ist. Diese neue Funktion betrifft Sie, wenn Sie berechnete Größen aus einem Element in JavaScript auslesen oder unload -Event-Listener verwenden. Stellen Sie sicher, dass Sie darüber Bescheid wissen, und prüfen Sie, ob Ihre Websites noch wie erwartet funktionieren.
• Inzwischen wissen wir ein wenig über Inhaltssicherheitsrichtlinien – eine Funktion, mit der Entwickler die Last bestimmter Ressourcen nach Hostnamen begrenzen können. Aber die Browserhersteller haben sich jetzt etwas Neues einfallen lassen: Feature Policy. Dadurch können Webentwickler das Verhalten bestimmter APIs und Webfunktionen im Browser selektiv aktivieren, deaktivieren oder ändern. Es ist wie CSP, aber anstatt die Sicherheit zu kontrollieren, kontrolliert es Features und Eric Bidelman hat eine Einführung in Feature Policy geschrieben, in der alles erklärt wird.
• Das Brave-Browser-Team zeigt sein neuestes Feature zum Schutz der Privatsphäre seiner Nutzer: Tabs, die sich über das Tor-Netzwerk verbinden.

Generisch

• Anton Sten fragt, ob die Werte des Technologiesektors gebrochen sind? Die Analyse der Marketingstrategien von Apple, Microsoft, Google, Amazon aber auch kleinen anderen Unternehmen und wie wir wirklich zielgerichtet arbeiten und an unseren Werten festhalten können, anstatt sie als Marketingmaterial zu behandeln, das wir nicht respektieren oder an das wir uns halten müssen.
• Jetzt, da der Technologiesektor der Welt alle Dinge der Welt schnell in digitale Dinge umwandelt, haben viele mehr Ethik in unserem Bereich gefordert. Das ist in vielen Fällen ein ziemlich vages Ziel, also wenden wir es auf einen Teil der Digitaltechnik an: die Front-End-Entwicklung. Wie können wir als Frontend-Entwickler ethischer vorgehen, was können wir tun? Hidde de Vries hat darüber einen Artikel geschrieben.

Sicherheit

• Die Kundendaten von Ticketmaster wurden kompromittiert, und wie es scheint, ist dies auf eine angepasste einzelne Codezeile zurückzuführen, die ein Skript eines Drittanbieters enthält.

UI/UX

• Eugen Esanu zeigt zehn kleine Designfehler, die wir immer noch machen und was wir stattdessen tun können, um unser Design benutzerfreundlicher zu machen.

Privatsphäre

• Dies ist ein interessanter Bericht darüber, wie Google es externen App-Entwicklern ermöglicht, die Google-E-Mails von Personen zu lesen, wenn sie während der App-Autorisierung die Erlaubnis erteilen. Das Problem dabei ist, dass es keine Möglichkeit gibt, dies einfach zu verhindern, und es kann erhebliche Auswirkungen haben, wenn Sie Gmail für Ihr Unternehmen verwenden, da es die Datenschutzrichtlinien beeinträchtigen kann und der DSGVO unterliegt.

Webleistung

• Max Bock darüber, wie wir Komponenten bauen können, die mit der Network Information API auf die tatsächliche Verbindungsgeschwindigkeit des Geräts reagieren. Und obwohl es derzeit nur in Chrome- und Samsung-Internetbrowsern verfügbar ist, lohnt es sich, es auszuprobieren und es diesen Benutzern vielleicht bereits anzubieten.
• Von Zeit zu Zeit können wir immer noch Artikel lesen, in denen erwähnt wird, wie wichtig es ist, CSS-Selektoren zu optimieren, um die Leistung zu verbessern. Dies hat seinen Ursprung in einer Recherche, die vor einigen Jahren durchgeführt wurde, aber Ivan Curic hat dies erneut recherchiert und herausgefunden, dass es keine Rolle spielt.

Barrierefreiheit

• Das Entwicklerteam von Microsoft teilt eine Video-Playlist über praktische Barrierefreiheit, einschließlich der Optimierung von Präsentationen oder der Sprache für die Aufnahme oder der Erstellung einer geeigneten Funktion zum Überspringen der Navigation auf Ihrer Website.
• Sara Novak erzählt, wie sie es geschafft hat, Empathie zu zeigen, indem sie damit experimentierte, farbenblind zu werden, um zu verstehen, wie andere Menschen die Welt anders erleben.
• Die Developer Tools von Firefox haben jetzt einen Accessibility Inspector -Modus. Hier erfahren Sie, wie Sie es aktivieren und verwenden.

JavaScript

• Leon Revill zeigt uns, wie wir bestehende native DOM-Elemente mit Webkomponenten erweitern können. Dies ist äußerst hilfreich und nützlich, da wir durch die Verwendung vorgefertigter Vorlagen für benutzerdefinierte Elemente nicht nur viel Zeit sparen können, sondern auch alle Optimierungen und Standardeinstellungen (Semantik, Zugänglichkeit, Browserfunktionalität) kostenlos erhalten und trotzdem unser eigenes Verhalten darauf aufbauen können davon. Zumindest, wenn wir überhaupt benutzerdefinierte Elemente verwenden könnten, aber das ist eine andere Geschichte.
• Gerardo Rodriguez zeigt, wie wir mit Service Workers und der Fetch-API leicht daran scheitern können, Websites auf Leistung zu optimieren, und wie dies zu einer Quotenausnahme in Browsern führen kann. Glücklicherweise fand er den Grund dafür heraus, und durch das Setzen der richtigen CORS-Header löste Gerardo schließlich das Rätsel der einzeln zwischengespeicherten undurchsichtigen Antworten und sagt uns, wie wir die Probleme vermeiden können.
• Filepond ist ein netter Open-Source-JavaScript-Datei-Uploader. Rik Schenkink teilt die Herausforderungen beim Bau.
• Andrea Giammarchi über das Problem der Bündelung von JavaScript mit Babel und warum das Transpilieren von Code nicht mehr die beste Lösung ist. Stattdessen sollten wir darüber nachdenken, wie wir je nach Browserunterstützung unterschiedliche Bundles bereitstellen können, um die Bundle-Größe zu verringern und die Leistung zu verbessern.
• Justin Fuller teilt drei großartige neue Funktionen mit, die bald für JavaScript verfügbar sein werden und uns dabei helfen werden, leichter verständlichen Code zu schreiben, wie z. B. Operational Chaining, Nullish Coalescing oder den Pipelineoperator.
• Addy Osmani und Mathias Bynens haben eine grundlegende Einführung darüber geschrieben, wie wir JavaScript-Module heute im Web verwenden können.

CSS

• Eine Artikelserie, die behandelt, wie wir ein automatisches Platzierungsraster mit Lücken im Internet Explorer vortäuschen können.
• CSS Grid ist nett, aber ich höre oft, dass Leute es nicht verwenden können, weil IE11 es nicht gut unterstützt. Aber das ist nicht ganz richtig, da IE11 eine frühere Version von CSS Grid zur Verfügung stellt, die wir einfach mit Autoprefixer transpilieren können. Daniel Tonon erklärt die CSS-Grid-Unterschiede und welche Funktionen wir verwenden können und welche nicht und wird mit noch mehr Tipps fortfahren.
• Für viele Leute ist CSS Grid noch sehr neu, und es ist sehr leistungsfähig und hilft uns, viele Probleme beim Erstellen von gitterbasierten Layouts in CSS zu lösen. Aber in der aktuellen Version gibt es ein paar Dinge, die noch nicht möglich sind. CSS Grid Level 2 wird uns Subgrids bringen und Rachel Andrew erklärt, wofür Sie das brauchen.
• Ist CSS in JS gut? Ist es nur schlimm? Warum wir ständig in die Streitfalle tappen, wenn es keine klaren Gewinner gibt, und wie wir es besser machen können, indem wir die Evolution anerkennen und die Dinge im Kontext sehen.

Arbeitsleben

• Warum das Konzept der Geduld und das Streben, etwas Dauerhaftes aufzubauen, in der Wirtschaft mehr Beachtung finden sollte. Einige Gedanken, die mir beim Lesen eines anderen Artikels in den Sinn gekommen sind, und es scheint, dass viele Leute die Idee dahinter mögen.
• Ethan Marcotte darüber, wie er an die Auswahl von Kunden herangeht und warum er es für wichtig hält, nur Kunden auszuwählen, die Sie ethisch unterstützen können. Das zeigt aber auch, wie schwierig das manchmal sein kann, wie jüngste Diskussionen über Microsofts geschäftliche Kooperationen mit juristischen Personen zeigen.