Vorgeschlagener Standard zum Festlegen von Security Policies
security.txt ist ein Projekt zum Verankern eines neuen Standards, mit dem Sicherheitsrichtlinien definiert werden können. Google, GitHub und diverse Regierungen (UK, Niederlande, Italien) machen bereits mit.
Design System Tokens von Figma nach WordPress
WordPress VIP, der Enterprise-Zweig von Automattic, bietet ein Tool an, das Design System Tokens aus Figma nach WordPress exportiert. Es setzt auf vorhandenen Workflows auf und ist nur eingeschränkt zugänglich, aber es zeigt die Entwicklung: Design-Tools werden zunehmend kompatibel mit den technischen Systemen, in denen sie zum Einsatz kommen.
SPF-Record online erstellen
Das »Sender Policy Framework« (SPF) soll das Versenden von E-Mails über nicht legitimierte Mailserver unterbinden. spf-record.de bietet das Prüfen und Erstellen des SPF-Records an. Das ist u.a. dann relevant, wenn ihr mit dem Absender eurer eigenen Domain Mails über einen Drittanbieter verschicken möchtet.
Aufgaben von User Interfaces verdeutlichen
Ein Hierarchie-Streifen in einem UI-Design (»hierarchy strips«) verdeutlicht die Aufgaben einzelner Bestandteile und unterstützt ein besseres visuelles Design. Ein weiterer interessanter Ansatz, sich dem höchst komplexen Thema »Spacing« zu nähern.
System-Farben mit CSS einbinden
Wer die eingestellten Browser-System-Farben für das eigene Styling nutzen möchte, findet in diesem Eintrag bei mdn web docs die CSS-Befehle dazu. Mit LinkText könnt ihr beispielsweise die eingestellte Farbe für Links verwenden (Standard = blau). Mit VisitedText die Farbe von besuchten Links (Standard = violett) usw.
Mit HTML automatisierte Übersetzung regeln
Je mehr automatisierte Übersetzungen Einzug halten, desto mehr fallen uns im Kontext missverständliche oder schlicht falsche Übersetzungen auf. Mit dem HTML-Attribut translate kann man das verhindern (noch mal mdn web docs), leider noch nicht in Firefox.
Dokumentation von UX-Komponenten
Das UI Playbook stellt eine Sammlung von dokumentierten UI-Pattern bereit. Die ausführlichen Einträge beinhalten Best Practices, Implementierung, Beispiele, Barrierefreiheit und weitere Ressourcen.
Bilder-Layout mit CSS-Trigonometrie-Funktion
CSS-Trigonometrie-Funktionen sind schon experimentell nutzbar. Mit der Funktion sin() kann man bspw. Bilder-Layouts auf Sinus-Kurven legen.
Neue Transition-Effekte
Ein interessantes Beispiel für die Umsetzung von text transitions ist bei nerdy.dev zu finden. Ebenfalls noch experimentell, aber »behind the flag« schon in Chrome 109+.
Website-Performance in 2023
Auf ultimatelybetter.com gibt es einen sehr ausführlichen Ratgeber zum Thema Audit und Performance-Optimierung von WordPress-Websites. Checkpunkte und Abfolge entsprechen grundsätzlich auch unserem erprobten Verfahren. Die Core Web Vitals-Empfehlungen des Chrome DevRel-Teams für 2023 stimmen ebenfalls grundsätzlich mit unserem Vorgehen überein. Dennoch zwei sehr hilfreiche Zusammenfassungen auf aktuellem Stand.
Verbesserte Barrierefreiheit beim Nutzen des Block-Editors in WordPress
Mit Mini-Plugins vom WordPress-Kernteam kann die Barrierefreiheit von Webseiten verbessert werden:
Spacing Tokens semantisch gestalten
Dieser sehr interessante Artikel beschäftigt sich mit dem Gestalten von Zwischenräumen anhand semantischer Eigenschaften (Gestaltgesetz der Nähe) und der systematischen Umsetzung mit Design Tokens. Die oben genannten Hierarchy-Strips könnten das gut begründen.
Schriftgrößen im Responsive Design
Dieser interessante, dabei recht »printige« Ansatz macht die Schriftgrößengestaltung von der Anzahl der genutzten Spalten abhängig: Je breiter, desto wichtiger (also größer).
Responsive Images und Container Queries – noch nicht zusammen
Das Bereitstellen von responsiven Bildern funktioniert noch nicht im Zusammenspiel mit Container Queries. Stefan Judis gibt einen Überblick und zeigt schon vorhandene Ansätze.
»Unique visits« ohne Cookies feststellen
Der nach Selbstaussage datenschutzkonforme und umweltbewusste Web-Analyse-Dienst »Cabin« zählt die Anzahl der »unique visitors« über das Auswerten von direkt an den Browser geschickten last-modified-Abfragen.
Eine andere Methode der Cookie-freien Informationsgewinnung ist das sogenannte »CSS Fingerprinting«, welches das Abfragen von diversen Media-Queries nutzt. Zwar interessant, aber wohl erst mit der CSS-Spezifikation »Values 4« skalierbar einzusetzen.
Highlighter-Effekt mit CSS
Wie mit dem Marker markierte Textstellen wirken dynamisch, benötigen jedoch ein vergleichsweise aufwändiges CSS. Vadim Makeev zeigt, wie es gehen kann.
Produkt-Sync in WP-Multisites
Bei mehreren Web-Shops in einer Multisite-Umgebung kann es gewünscht sein, Produkte zwischen den Shops zu synchronisieren. Misha Rudrastyh zeigt, wie das mit der Funktion switch_to_blog geht, hält aber auch ein Plugin bereit.
WooCommerce: Nutzende bestimmen den Preis
In einem WooCommerce-Shop gibt man den Nutzenden mit einem PHP-Snippet die Möglichkeit, den Preis eines Produkts selbst festzulegen.
Barrierefreie Texte für SVGs
Unter bestimmten Umständen benötigen auch SVG-Grafiken eine barrierefrei zugängliche Text-Alternative. Der Beitrag der Deque University zeigt, wie man diese Anforderung umsetzt.
Kurs zur Barrierefreiheit ist komplett
Beim Online-Kurs »Learn Accessibility!« sind nun alle Module vorhanden. Damit ist eine überaus empfehlenswerte, zentrale Anlaufstelle zum Thema Barrierefreiheit vollständig.
Inhalte direkt aus dem Browser heraus teilen
Das W3C schlägt eine neue Web Share API vor, die das Teilen von Inhalten direkt aus dem Browser ermöglicht, so wie es schon diverse mobile Apps tun.
Gemeinsame Browser-Benchmark
Um die Leistungen ihrer Browser angemessen vergleichen zu können, planen die Hersteller Apple, Google und Mozilla die gemeinsame Entwicklung der Benchmark »Speedometer 3«.
Apache – kein passender Name mehr?
Die Initiative »Natives in Tech« fordert die »Apache« Software Foundation zur Namensänderung auf.
Tools, Tools, Tools
- CSS Clothoid Corners ist ein Generator zum Erzeugen von Klothoiden-Kurven, die organischer als abgerundete Ecken aussehen.
- PHP Monitor ist eine App zur Steuerung von Valet für die Menüleiste von MacOS, die das Handling von Valet erleichtert. Der Tipp kommt aus einem Kommentar zu unserem Blog-Artikel. Vielen Dank dafür!
- AiWriter ist ein WordPress-Plugin, das das Erstellen von Texten mit der GPT-3-API unterstützt. Hier noch nicht im Einsatz …
- Pattern Monster erstellt anpassbare SVG Pattern zum Download.
- Magician ist ein Design-Tool für Figma (Beta!), das durch KI angetrieben wird.
- web code tools ist eine recht praktische Sammlung von Code-Generatoren für CSS, HTML, Meta Tags, strukturierte Daten, Oopen Graph und mehr.
- htaccess tester ermöglicht das Testen von htaccess-Dateien ohne eventuelle Auswirkungen auf die Live-Site.
- SVG Wave ist ein Generator zum Erzeugen von auch animierten SVG-Wellen.
- TOOOLS.design ist eine weitere, sehr umfangreiche Anlaufstelle für eine Vielzahl von Design-Ressourcen zu vielen Themenbereichen (u. a. Illlustrationen, Icons, Mockups, Typografie).
Das Gegenteil von neu, aber zum Schluss bei all dem permanenten & multimedialen Crossover-Schingbumm-Geklingel vielleicht mal ein gutes Detox: So ging es mal los!
Bis zum nächsten Mal,
euer Team von kulturbanause
|
