Working Draft Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer

Anlässlich eines tiefgehenden Metatalks, den Vanessa auf der VueJS Amsterdam
2024 von ihm erleben durfte, luden wir Niklas Dzösch, Developer Relations bei
Shopware und selbst Podcaster, zu uns ins virtuelle Studio ein.


UNSER SPONSOR



Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie
wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die
Decke gehen, deine Seite bleibt immer rasend schnell.

mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und
Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur,
benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server
selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs
kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen
Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade
beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine
Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet
bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting.
Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein
erstes Projekt!


SCHAUNOTIZEN

[00:02:13] ZUSAMMENARBEIT IN DER SOFTWARE-ENTWICKLUNG – EINE DISKUSSIONSRUNDE

Diesmal hatten wir keinen roten Faden, an welchem wir uns lang arbeiten wollten.
Stattdessen nahmen wir Niklas‘ Talk als Aufhänger, um in die Welt der
fehlerhaften und gelungenen zwischenmenschlichen Interaktionen in der
Software-Entwicklung einzutauchen. So kommen wir von Hölzchen auf Stöckchen und
möglicherweise wurde das Ganze mehr eine Therapiesitzung mit uns allen
abwechselnd auf der roten Couch :)


LINKS

COVVE

Die von Niklas erwähnte App zur Beziehungspflege.

DEVRELCON

Die Konferenz mit und über Developer Relations.

Schepp tritt in dieser Revision als Gast auf und lässt Vanessa und Peter an
seinen gesammelten Fun Facts rund um Internationalisierung und Lokalisierung
teilhaben.


UNSER SPONSOR



makandra bietet umfassende Unterstützung für Entwicklerteams mit Infrastruktur-
und Operations-Expertise. Das DevOps as a Service-Angebot umfasst Beratung und
Unterstützung in allen Bereichen der Infrastruktur, von der Dimensionierung über
Technologieentscheidungen bis hin zum Aufbau mit Infrastructure-as-Code,
automatisierten Deployments und mehr. Darüber hinaus im Angebot:
Maßgeschneiderte Schulungen zu Kubernetes, Terraform und AWS.

Sie suchen Unterstützung beim Monitoring Ihrer Infrastruktur oder fragen sich,
ob Ihre Backup-Strategie für einen Disaster-Fall ausreichend ist? Sie suchen
temporär Unterstützung, um Ihre Entwickler zu entlasten oder ein eigenes
Infrastruktur-Team aufzubauen? Wir helfen gerne. Mehr Infos unter
makandra.de/goto/workingdraft.


SCHAUNOTIZEN

[00:01:58] FUN FACTS ZU INTERNATIONALISIERUNG UND LOKALISIERUNG

Wir starten mit den zahllosen Herausforderungen schon bei der einfachen
Übersetzung von Texten, wie z.B. der Sortierung von Sprachen in einem
Sprach-Auswahl-UI (für das man natürlich keinesfalls Landesflaggen verwenden
sollte). In mäandernder Form sprechen wir unter anderem über kulturell
suboptimale Typografie, welche Sprache die längsten Wörter hat, die extrem
relevanten Unterschiede zwischen ISO 639 (Sprachcodes) und ISO 3166-1
(Ländercodes) und die unterschiedliche alphabetische Sortierung in verschiedenen
Sprachen (kein Problem mit Intl.Collator). Nebenher kommen auch text-overflow,
, die für Übersetzungen möglicherweise sehr relevante CSS-Funktion
attr(), automatische Übersetzungen, LINGsCARS und erste Fragen zu Webdesign zur
Sprache. Nach einem unerklärlichen Exkurs zu Macbook-Tastaturlayouts stellen wir
fest, dass Namen beliebige Strings sein müssen, Adressen ebenso (u.A. dank
Besonderheiten in Japan, Costa Rica und Mannheim) und dass diese Revision ein
Mehrteiler wird werden müssen.

Schepp, Vanessa und Peter setzen ihre Reise durch die Webtech-Features im
neuesten Safari-Release fort.


SCHAUNOTIZEN

[00:01:07] RE-MATCH SWITCH VS. CHECKBOX

Nach einer Woche des Mental-Marinierens haben wir neue Gedanken zu ausgebrütet. Zusammenfassend lässt sich festhalten, dass
Entwickler:innen (unter anderem) auch die Komplexität von Checkboxes, Selects
und Formularen allgemein unterschätzen. Auch die WHATWG ist mit dem Switch-Thema
noch nicht am Ende!

[00:10:20] ALTERNATIVTEXT FÜR GENERATED CONTENT

Der CSS-Property content kann ein Alternativtext mitgegeben werden. Wir denken
auf Screenreader-Kompatibilität herum und überlegen wie :lang() bei der
Internationalisierung und @supports bei der Implementierung helfen könnte.

[00:17:55] DISCRETE TRANSITIONS

Mit transition-behavior können wir festlegen, wie sich zu Transitions nicht
kompatible CSS-Properties verhalten sollen. View Transitions haben damit nur am
äußersten Rande zu tun, kommen aber natürlich trotzdem auch zur Sprache.

[00:30:23] CUSTOM PROPERTIES FÜR ::BACKDROP

Ging bisher nicht, weil Top Layer, geht jetzt aber schon!

[00:36:18] CHECKVISIBILITY()

Nomen est Omen, aber die Use Cases für u.A. Web Components und ggf. in
Kombination mit dem Intersection Observer bedürfen genaueren Durchkauens. Peter
überlegt, ob er nach seiner großen Mutation-Observer-Profiling-Kampagne nun auch
100.000 Intersection Observer testen muss.

[00:48:37] CUSTOM STATE SET

Kurzes Referat über CustomStateSet und warum es nützlich ist.

[00:53:24] PROMISE.WITHRESOLVERS()

Wir besprechen, ob das neue Promise.withResolvers() oder das weniger neue new
Promise() besser als Wrapping-Mechanismus für den gänzlich antiken FileReader
taugt. Nebenher stellt sich raus, dass CSS einen infinity-Wert kennt!

[01:12:30] OBJECT.GROUPBY() UND MAP.GROUPBY()

Peter erklärt schnell die Unterschiede zwischen den beiden neuen
Gruppierungs-Features (Spoiler: eins macht Objekte, eins macht Maps) und was die
beiden mit den neuen Iterator Helpers zu tun haben (Spoiler: nichts).

[01:15:58] NEUER MECHANISMUS FÜR DIE SOURCE-AUSWAHL BEI MEDIA-ELEMENTEN

Wer soll entscheiden, welche Quelldatei mit welchem Codec geladen werden soll,
Entwickler:in oder Browser? Schepp argumentatiert recht überzeugend für
letzteres.

Schepp, Vanessa und Peter nehmen ein neues Safari-Release zum Anlass,
ausschließlich über neue Web-APIs zu philosophieren. Kontroverse Themen wie der
Digital Markets Act oder Peters randständige Feature-Wünsche spielen keine
Rolle, wir blicken stattdessen positiv in die Zukunft!


SCHAUNOTIZEN

[00:04:05]

Ein neues Input-Element? Das eigentlich nur eine Checkbox ist? Und bloß etwas
anders aussieht? Und per HTML statt per appearance in die Welt gesetzt wird? Wir
sind leicht überfordert und bemühen Vergleiche zum mit gebauten
Accordion und dem Close-Watcher-Proposal. Auch der Indeterminate-State von
Checkboxen findet Erwähnung

[00:28:33] IN

Ähnlich wie bei sind wir uns nicht ganz über die
Notwendigkeit dieses HTML-Features im klaren und probieren Alternativen mit
zu formulieren.

[00:40:10] ALIGN-CONTENT IN BLOCK- UND TABLE-LAYOUTS

Exotisch, aber nicht unwillkommen.

[00:43:10] CSS SCOPING

Peter bekommt den Unterschied zwischen @scope und :scope nochmal neu erklärt und
moniert dann, dass weder das eine noch das andere seine absurden Anforderungen
zu 111% bedient.

Erneut haben wir uns Alexander Lichter (LinkedIn / Mastodon / Twitter) in die
Sendung eingeladen, der sich als Web-Engineering-Consultant, Trainer und
Video–Streamer nicht nur mit Vue.js, Nuxt oder UnJS auskennt, sondern auch in
den hohen Künsten der Suchmaschinenoptimierung, kurz SEO.


UNSER SPONSOR



Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet
Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über
80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig
unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative
Weiterbildungsangebote zu schaffen.

Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und
Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker,
Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale
Angular.DE, ReactJS.DE und VueJS.DE.

Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich
Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid
ihr bei Workshops.DE genau richtig.

[00:02:30] SEO

Alex eröffnet unsere Sendung mit der Feststellung, dass nur ein geringer
Prozentsatz aller Webseiten überhaupt organischen Suchverkehr von Google erhält,
weil sie zu weit hinten in den Suchergebnissen auftauchen. Umso wichtiger ist es
demnach, seine Seite für Suchmaschinen zu optimieren. Es gibt verschiedene
Aspekte der Suchmaschinenoptimierung, darunter das technische SEO, sowie
On-Page- und Off-Page-Optimierungen. Auf den vorderen Plätzen stehen
qualitativer Inhalt, gute User Experience und technische Aspekte wie Ladezeiten
und Sicherheit (in erster Linie HTTPS). Gutes SEO hat vor allem die Nutzer und
ihre Zufriedenheit im Sinn.



Neben hochwertigen Inhalten kann auch eine Keyword-Recherche nicht schaden, um
eine langfristige erfolgreiche Webseite zu gewährleisten. Zudem erörtern wir
Tools (Google Ads Keyword Planner, keywordtool.io, Ahrefs, Semrush oder Moz) und
Strategien zur effektiven Keyword-Recherche und Leistungsverbesserung von
Webseiten, insbesondere im Hinblick auf die Core Web Vitals zur Steigerung der
Benutzererfahrung. Wir gehen auch kurz auf verschiedene Core Web Vitals ein, wie
den Cumulative Layout Shift (CLS) und Largest Contentful Paint (LCP), und wie
man diese mit Tools wie Lighthouse messen kann. Auch die mobile User Experience
und Accessibility spielen eine Rolle.

Dann folgen Ratschlägen zur Verbesserung der Seitenstruktur und Verlinkung. Wir
sprechen über semantisches Markup, hierarchische Strukturen und deren Bedeutung
für Suchmaschinen. Wir diskutieren die Verwendung von Schema.org in
JSON-LD-Ausprägung zur Inhaltskennzeichnung für die Unterstützung von Google bei
der Interpretation und Darstellung auf den Ergebnisseiten. Weitere Themen sind
die effektive Nutzung von Sitemaps zur Unterstüzung der Indexierung von Seiten
durch Google, die Vermeidung von Duplikaten und die korrekte Verwendung von
Canonical-Tags. Abschließend thematisieren wir den Indexierungsprozess bei
Google bei Single-Page-Anwendungen (SPAs). Alex betont die Relevanz von
Server-Side-Rendering (SSR) für den Webseiten-Traffic anhand eines Beispiels von
Joel Hooks, Mitbegründer von Egghead.

Zum Schluß widmen wir uns noch den (potentiellen) Herausforderungen im
Zusammenhang mit AI-generierten Inhalten. Alex sieht Google in Zukunft ein
stärkeres Gewicht auf Vertrauenswürdigkeit und Autorität legen. Hier sind
Konsistenz und Qualität des Contents zentral.

Gast Markus Stahmann klärt in dieser Revision über Farbsehschwäche und
Farbblindheit auf. Markus ist 1. Vorsitzender des Interessenverbands der
Farbsehschwachen und Farbenblinden (der die hervorragende Webseite
farbsehschwaeche.de betreibt) und außerdem Webentwickler bei New Data Services,
was ihn zu einem einmaligen Kompetenzknäul für uns macht!


UNSER SPONSOR



Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet
Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über
80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig
unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative
Weiterbildungsangebote zu schaffen.

Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und
Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker,
Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale
Angular.DE, ReactJS.DE und VueJS.DE.

Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich
Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid
ihr bei Workshops.DE genau richtig.


SCHAUNOTIZEN

[00:02:21] FARBSEHSCHWÄCHE UND FARBBLINDHEIT

Wie beginnen mit den Grundlagen (Definition, Entstehung und Häufigkeit der
Farbfehlsichtigkeiten) und steigen danach sogleich in Alltagsbeispiele ein.
Bananen stellen sich als ein größeres Problem als der Straßenverkehr heraus,
Luft- und Wasserstraßen bleiben für die Farbefehlsichtigen durch den Lanterntest
gleich ganz gesperrt. Best und Worst Practices in Web und Webentwicklung kommen
natürlich auch nicht zu kurz; wer die drei Regeln einhält, ist meist schon ganz
gut aufgestellt. In Hinblick auf das Big Picture kauen wir mögliche Effekte des
European Accessibility Act durch und überlegen wie wir in ganz alltäglichen
Web-Projekten Farbsehschwächen-Kompatibilität erhöhen können.