Einiges, das ich von An Event Apart 2022 in Denver mitgenommen habe

An Event Apart 2022 Denver ging gestern zu Ende. Und obwohl ich diesmal nicht an allen drei Tagen dabei sein konnte, habe ich den gestrigen Tag mitverfolgt – und es war großartig. Ich bin nicht sehr sozial oder kontaktfreudig, aber dies war die erste Konferenz seit mindestens ein paar Jahren, und es war unglaublich erfrischend, Leute persönlich zu sehen.

Natürlich habe ich mir Notizen gemacht! Ich dachte, ich poste sie hier, weil Teilen eine gute Sache ist. Zumindest hat mir das mein sechsjähriger Sohn neulich gesagt, als er nach einem Bissen meines Desserts gestern Abend fragte.

Ich werde das hier nach Redner aufschlüsseln. Nur zur Warnung: Ich bin ein Fan von handschriftlichen Notizen und optisch ansprechenden Dingen, daher sind meine Notizen tendenziell weniger... strukturiert als die meisten. Und diese Notizen sind nur Dinge, die mir aufgefallen sind. Sie sind vielleicht nicht einmal die Hauptidee des Präsentierenden, aber sie haben meine Aufmerksamkeit erregt!

Chris Coyier: Websites sind jetzt gut

Chris hat diesen Vortrag schon einmal gehalten (wir haben ihn letzte Woche verlinkt), aber diesmal hat er ihn erheblich erweitert, insbesondere mit Details zu containerrelativen Einheiten, die in Kombination mit clamp() eine genauere Responsivität ermöglichen, da die Werte sich auf den Container und nicht auf den Viewport beziehen. Sie wissen also, wie wir oft die Viewport-Breite (vh) für fließende Schrift verwenden?

font-size: clamp(1rem, 1rem + 2vw, 2rem);

Nun, wir können stattdessen eine containerrelative Einheit wie container query inline-size (cqi) verwenden, wobei 1cqi 1 % der Inline-Größe des Containers entspricht (hier ist der Entwurf der Spezifikation dazu)

font-size: clamp(1rem, 1rem + 1cqi, 2rem);

Chris sprach auch viel über die Performance-Vorteile des Hostings am Edge. Wahrscheinlich keine Überraschung, denn er hat schon oft darüber geschrieben. Selbst als jemand, der diese Artikel bereits gelesen hatte, war mir das vollständige Konzept der Berechnung am Edge ehrlich gesagt nicht bewusst.

Die Idee ist täuschend einfach: Globale CDNs können Assets schnell ausliefern, da sie diese geografisch nah am Benutzer hosten. Das ist für die Auslieferung von Rasterbildern ziemlich Standardpraxis. Aber es hat sich auf statische Dateien ausgeweitet, wie z. B. dieselben HTML-, CSS- und JavaScript-Dateien, die eine Website antreiben – bauen Sie sie im Voraus und liefern Sie die bereits kompilierten und optimierten Dateien vom schnellen globalen CDN aus. Das ist das ganze Jamstack-Konzept!

Aber was, wenn Sie immer noch eine Serverantwort benötigen? Das ist nicht sehr "edge-y", oder? Nun, jetzt haben wir Handler, die auf einer einzigen URL laufen und Daten im Voraus abrufen und sie vor dem Rendern einspeisen – direkt vom CDN. Sicher, es gibt zusätzliche Arbeit im Hintergrund. Dennoch macht die Tatsache, dass wir dynamisch Daten abrufen, sie einfügen, vorab erstellen, statisch on demand ausliefern und sie geografisch näher am Benutzer ausführen können, diese extrem schnell.

Tolu Adegbite: Wie man bei ARIA gewinnt und die Web-Barrierefreiheit beeinflusst

Mein Gott, war das eine exzellente Präsentation! Tolu Adegbite hat mich so hart in WAI-ARIA unterrichtet, dass ich Schwierigkeiten hatte, all die Juwelen zu notieren, die sie teilte – Rollen! Zustände! Beschriftung! Beschreibungen! Alles wurde außergewöhnlich gut abgedeckt, und Dinge, von denen ich weiß, dass ich immer wieder darauf zurückkommen werde.

Aber eine besondere Sache, die meine Aufmerksamkeit erregte, ist die Barrierefreiheit von Inline-SVG. Obwohl SVG mit anderen Arten von Design-Assets verwandt ist, unterscheidet es sich dadurch, dass es am Ende des Tages Markup ist, denn es wird nicht immer als Bild erkannt.

<!-- Image tag is easily recognized as an image -->
<img src="cat.svg" alt="An illustrated brown and white tabby kitten looking lovingly into the camera.">

<!-- Could be an image, maybe not? -->
<svg viewBox="0 0 100 100">
  <!-- etc. -->
</svg>

Hilfstechnologie liest Inline-SVG eher als Bild, indem sie ihm eine geeignete barrierefreie Rolle und Bezeichnung gibt.

<svg 
  role="image" 
  aria-label="An illustrated brown and white tabby kitten looking lovingly into the camera."
  viewBox="0 0 100 100"
>
  <!-- etc. -->
</svg>

Miriam Suzanne: Cascading Layers of !mportance

Hey, noch ein CSS-Tricks-Alumni! Miriam hat viel Zeit und Mühe in die Cascade Layers-Spezifikation investiert. Sie hat auch hier bei CSS-Tricks einen großen Leitfaden dazu geschrieben und auf An Event Apart darüber gesprochen.

Was mir am meisten im Gedächtnis geblieben ist, ist, wie groß dieser mentale Wandel ist. Das Konzept ist an sich nicht kompliziert. Deklarieren Sie @layer am Anfang des CSS-Dokuments, listen Sie die Ebenen in der Reihenfolge ihrer Spezifität auf und schreiben Sie dann Stile in diesen Ebenen. Aber für einen alten Dinosaurier wie mich, der schon seit einiger Zeit CSS schreibt, muss ich mich daran gewöhnen, dass Cascade Layers es einem einfachen Klassenselektor ermöglichen, etwas zu schlagen, das normalerweise eine höhere Spezifität hat, wie z. B. eine ID.

🤯

Miriam erinnerte die Anwesenden auch daran, dass Cascade Layers nur ein Werkzeug in unserem Werkzeuggürtel zur Verwaltung der Spezifität sind, zusätzlich zu Selektoren, die die Spezifität beeinflussen (z. B. :is(), :where() und :has()).

Oh, und das ist eine interessante Randbemerkung. Als Miriam die Geschichte der Spezifität in CSS durchging, erinnerte sie sich daran, dass !important ursprünglich als Werkzeug für Benutzer gedacht war, um Benutzeragenten- und Autorenstile zu überschreiben. Aber irgendwo auf dem Weg haben wir es übernommen, um Autorenstile an die Spitze zu zwingen. Cascade Layers helfen, die Ausrede Notwendigkeit zu beseitigen, !important zu verwenden, da sie uns die Möglichkeit geben, "Ebenen zu priorisieren und Vererbung zu schützen".

Das ist schön gesagt, Miriam!

Dave Rupert: Ihr Zugangsfähigkeits-Backlog entblocken

Stellen Sie sich vor, Sie wachen eines Tages auf und sehen Hunderte von GitHub-Benachrichtigungen über gemeldete Probleme auf Ihrer Website. Wo fangen Sie überhaupt an? Vielleicht den Laptop zuklappen und stattdessen eine Wurzelkanalbehandlung machen lassen? Das ist Dave passiert! Ein automatisierter Barrierefreiheits-Audit ergab einen riesigen Stapel von Fehlern und wies sie Dave als Tickets zur Behebung zu.

Aber er bemerkte ein Muster, nachdem er eine Excel-Tabelle dieser Probleme genommen, sie in Notion für eine bessere Ansicht verschoben, unnötige Spalten ausgeblendet, alles kategorisiert und die Ergebnisse in logischen Gruppen angezeigt hatte. Viele der gemeldeten Probleme waren das gleiche Problem, das auf mehreren Seiten wiederholt wurde. Nur weil ein automatisierter Test eine Handvoll Fehler zurückgibt, heißt das nicht, dass sie alle einzigartig sind. Das hat einen guten Teil der Tickets reduziert.

Er zeigte dann, wie der Rückstand an Problemen mit relativ geringem Aufwand um fast 50 % schrumpfte.

Dort gibt es viel zu lernen, insbesondere in Bezug darauf, wie wir unsere Arbeit verarbeiten und organisieren. Die größte Erkenntnis für mich ist, als Dave sagte, wir müssen Individuen und Interaktionen über Prozesse und Werkzeuge stellen. Werkzeuge wie das, das auf Barrierefreiheitsprobleme prüft, sind hilfreich, aber sie erzählen möglicherweise nicht die ganze Geschichte. Anstatt sie beim Wort zu nehmen, lohnt es sich, Fragen zu stellen und mehr Kontext zu gewinnen, bevor man sich in das Chaos stürzt.

Als Bonus ermöglichte die Neuorganisation der Probleme in Notion Dave, Probleme so zu gruppieren, dass klar ersichtlich ist, gegen welche Beeinträchtigungen sein Produkt aktiv diskriminiert hat, was ihm ein größeres Einfühlungsvermögen für diese Fehler und deren Priorisierung verschaffte.

---

Eine weitere virtuelle Sitzung von Hui Jing Chen beschloss den Tag, aber zugegebenermaßen habe ich etwa die Hälfte davon verpasst, weil ich ein Gespräch auf dem Flur hatte. Das Gespräch war es wert, auch wenn ich traurig bin, die Präsentation verpasst zu haben. Ich werde mir das Video ansehen, wenn es veröffentlicht wird!