Codex – Jahr 2024 im Rückblick: Wichtige Meilensteine und Innovationen

Zum Abschluss eines transformativen Jahres wollen wir die Fortschritte feiern, die Codex, das Design System für Wikimedia, gemacht hat. Von nutzerzentrierten Designverbesserungen bis hin zu grundlegenden Upgrades, die Teams und Freiwillige die richtigen Werkzeuge für unsere globale Reichweite zur Verfügung stellen.

Prägende Veränderungen und Fortschritte unseres Jahres

In diesem Jahr hatte das Design System Team der Wikimedia Foundation das Vergnügen, viele neue Mitwirkende zu begrüßen, von verschiedenen Teams innerhalb der Foundation bis hin zu Freiwilligen aus aller Welt.
Wir haben sowohl von Designern als auch von Entwicklern bedeutende Beiträge gesehen, die maßgeblich zur Weiterentwicklung der Codex-Funktionen beigetragen haben. Dazu gehören Verbesserungen wie das Internationalisierungssystem, Codex-PHP, native Constraint-Validierung und das Hinzufügen verschiedener Design-Token für eine erweiterte Farbpalette und einen dunklen Modus, neue Komponenten wie Table und Icons.

Codex in Aktion: Die wichtigsten Anwendungen im Jahr 2024

In diesem Jahr spielte Codex eine entscheidende Rolle bei der Durchführung von transformativen Projekten in verschiedenen Teams und stellte seine Vielseitigkeit und Wirkung unter Beweis:

Dark Mode in Vector und MinervaNeue

Durch den Einsatz der verbesserten Design-Token und der CSS-Variablen-Infrastruktur von Codex konnte das Web-Team eine nahtlose Dark-Mode-Experience in Vector 22 und MinervaNeue, den Standard-Desktop- und Mobile-Skins der englischen Wikipedia und vieler weiterer Wiki-Projekte, schaffen und so die einheitliche Ästhetik und Funktion aller Modi sicherstellen.

Community Configuration 2.0

Das Growth Team hat Codex-Komponenten eingesetzt, um die Arbeitsabläufe in der Community Configuration 2.0 zu verbessern und Benutzer:innen eine intuitivere und visuell ansprechende Oberfläche zu bieten, mit der sie die Wiki-Funktionen an ihre individuellen Bedürfnisse anpassen können.

Collaboration List
Die Flexibilität von Codex ermöglichte es dem Campaigns-Team, eine zugängliche und kohärente Oberfläche für die neue Funktion Collaboration List zu entwickeln, die es den Usern ermöglicht, gemeinsame Kampagnen mühelos zu verfolgen, zu filtern und zu verwalten.

Multiblocks

Noch in Entwicklung befindet sich das Multiblocks-Projekt des CommTech-Teams. Es ermöglicht Administrator:innen, mehrere, sich überschneidende Blockierungen für einen einzigen User zu erstellen. Die grundlegenden Komponenten von Codex und die responsiven Stile sind von zentraler Bedeutung für sein schlankes, benutzer:innenfreundliches Design.

Migration des Mismatch-Finders und Special:NewLexeme von WiKit zu Codex

Im Rahmen der Initiative zur Konsolidierung der Designsysteme hat das Migrationsteam von Wikimedia Deutschland erfolgreich Wikit-basierte Tools auf Codex umgestellt, um die Wartbarkeit zu verbessern und sie an die neuesten Designstandards anzupassen.

Barrierefreiheit, Inklusion, und Usability

Wie immer legt das Design System Team bei der Gestaltung und Entwicklung von Codex größten Wert auf Barrierefreiheit, Inklusion und Benutzer:innenfreundlichkeit.

• Barrierefreiheit der Komponenten: Auf der Grundlage der Bewertung durch unseren Partner, die American Foundation for the Blind, wurden fein abgestufte Verbesserungen an allen Komponenten der Bibliothek vorgenommen.
• Internationalisierung (i18n): Grundlegendes Internationalisierungssystem für die vollständige Sprachunterstützung in MediaWiki’s Verwendung von Codex eingeführt.
• Bi-Direktionalität für Vue-Anwendungen: Umfassende RTL-Unterstützung in eigenständigen Vue-Anwendungen mit bidirektionalen Codex-Stylesheets.
• Native Validation Unterstützung: Vereinfachte Validierung für die TextInput- und TextArea-Komponenten unter Nutzung der browser-eigenen Constraint Validation API.
• Formfeld-Statusklarheit: Statusmeldungen wurden durch benutzerdefinierte Slots in Feldkomponenten flexibler gestaltet, so dass die Übersichtlichkeit für verschiedene Anwendungsfälle gewährleistet ist.
• Unterstützung für Umgebungen ohne JavaScript: Codex bietet reine CSS-Versionen der meisten Komponenten, und die neue Codex-PHP-Bibliothek verspricht, die Entwicklung hochwertiger Benutzeroberflächen, die nicht auf JS im Browser des Benutzers angewiesen sind, weiter zu optimieren.

Designkonsistenz durch Design-Token und Styling:

Codex hat es geschafft, den dunklen Modus vollständig und gleichberechtigt mit dem hellen Modus durch CSS-Variablen, die in Design-Token eingebettet sind, zu unterstützen. Dies hat es den Teams ermöglicht, einen der größten Rollouts der Benutzer:innenfreundlichkeit in diesem Jahr durchzuführen, indem der dunkle Modus auf Wikipedia und anderen Projekten mit Vector 2022 Skin aktiviert wurde.

Im Zuge der Einführung der Modi wurde die Farbpalette grundlegend überarbeitet und erweitert, so dass nun bewusstere Farbtöne zur Verfügung stehen, die den Designern mehr Flexibilität bieten und dazu beitragen, die seit langem bestehenden Probleme der Zugänglichkeit und des Designs zu lösen.

Bei fast allen Codex-Komponenten wurden fortschrittliche Design-Verfeinerungen vorgenommen, um subtile, aber wirkungsvolle visuelle Hinweise zu geben.

Neue Komponenten

• Table als hochkomplexe Komponente, die eine großartige Entwicklungserfahrung bietet
• MenuButton mit benutzer:innendefinierten Menüpunkten und Gruppen
• MultiselectLookup
• Tooltip
• Accordion verwendet details semantisches HTML
• Image (WIP)
• Breadcrumb (WIP)
• Toast (WIP)
• ProgressIndicator (WIP)

Neue Fähigkeiten: Codex PHP

Unter der Leitung des freiwilligen Entwicklers Doğu Abaris haben wir gemeinsam eine eigenständige PHP-Bibliothek für die Erzeugung von Codex-Markup-Generierung als weiteren Teil des Design-Systems entwickelt – Codex PHP. Diese Bibliothek vereinfacht die Erstellung komplexer Codex-basierter Benutzeroberflächen, die kein JavaScript erfordern, erheblich.

Effiziente Entwicklung: Klügerer Code, schnellere Builds

Die Codebasis von Codex wurde dadurch wartungsfreundlicher und zukunftsorientierter:

• Verbesserte Modularisierung: ESM-Migration über Kernpakete hinweg, einschließlich Token und Icons, angeglichen an Industriestandards für JavaScript-Ökosysteme.
• Design-Token: Verfügbar gemacht als ES6-Variablen.
• Verbesserungen der Tabelle: Refaktorierte Logik in getRowHeaderScope reduziert die Komplexität bei gleichzeitiger Verbesserung der Funktionalität.
• Tabellen weiterentwickelt: Serverseitige Paginierung und reine CSS-Paginierung straffen die Arbeitsabläufe, während leere Statusanzeigen und Sortiersymbole die Datenpräsentation dynamischer gestalten.
• Integration von nativen Browser-Validierungs-APIs für einige Komponenten, um den Aufwand für Entwickler:innen zu verringern.

Dokumentation: Klarheit trifft auf Präzision

Die Dokumentation wurde grundlegend überarbeitet, um die Transparenz zu erhöhen und die Einführung zu erleichtern:

• Gestraffte Farbleitlinien: Die oberen Grafiken wurden aktualisiert, um die einheitliche Farbpalette widerzuspiegeln.
• Interaktive Token-Tabellen: Verbesserte Klarheit über die Verwendung von Token mit Live-Vorschauen, insbesondere für Token im dunklen Modus.
• Vereinfachte und verbesserte Demoseiten und Richtlinien für die Komponenten.
• Suchfunktion hinzugefügt
• Aufnahme neuer Richtlinien in den Codex Style Guide, z. B. zur Verwendung von Links und Schaltflächen, zum Aufbau von Formularen und zum Überlauf von Inhalten.

Icons: Einfachheit und Nützlichkeit

Die Hinzufügung zahlreicher Icons unterstreicht das Engagement des Codex für Universalität und Benutzerfreundlichkeit. Diese leichtgewichtigen, vielseitigen Elemente ergänzen die Verbesserungen bei der Zugänglichkeit und der ästhetischen Konsistenz.

Wie geht es 2025 weiter?

Die in diesem Jahr geleistete Vorarbeit bereitet den Codex auf ein aufregendes Jahr vor, in dem die Version 2.0 am Horizont erscheint:

• Beschleunigung der breiten Akzeptanz von Codex und Steigerung der Benutzerzufriedenheit durch erstklassige Zugänglichkeit, Internationalisierung und konsistente Benutzererfahrung.
• Weitere Verbesserung von responsiven Layouts und Verhaltensweisen.
• Stärkere Integration von nativen APIs in mehr Komponenten.
• Erweiterung der Komponentenbibliothek um datenintensive Visualisierungsrichtlinien und -werkzeuge.
• Erforschung von Möglichkeiten zur Verbesserung der Internationalisierungsunterstützung außerhalb von MediaWiki.

Wir möchten uns noch einmal bei unseren Freiwilligen und Kolleg:innen aus aller Welt für ihren unermüdlichen Einsatz für Innovation, Zusammenarbeit und hervorragende Leistungen bedanken. Gemeinsam gestalten wir ein Designsystem, das nicht nur die Bedürfnisse von heute erfüllt, sondern auch die Herausforderungen von morgen antizipiert.

Mit Blick auf das Jahr 2025 verspricht Codex 2.0 eine noch stärkere Integration, erweiterte Komponenten und Werkzeuge, um Wikimedia-Projekte mit einem konsistenten, nutzer:innenzentrierten Design zu unterstützen.