Web Design News & Link-Tipps – Nr. 13
Hallo zusammen,
zum letzten Mal in diesem Jahr fand unser regelmäßiger Austausch zu interessanten Informationen aus unserer Branche statt. Zur Sprache kamen die Themen in der folgenden Reihenfolge, nur die Tool-Sammlung haben wir an den Schluss gestellt.
Screenshots von HTML-Knoten im Browser erstellen
Zum Anfang eine Kleinigkeit, die vielleicht manchen noch nicht bekannt ist: Mit aktuellen Browsern wie Firefox, Edge oder Chrome kann man über die Entwickler-Tools Screenshots von HTML-Knoten erstellen. Mit der rechten Maustaste innerhalb der Dev-Tools auf den HTML-Knoten klicken und »Capture Node Screenshot« (Chrome) bzw. »Bildschirmfoto von Knoten aufnehmen« (Firefox) wählen. Recht praktisch, um z. B. einzelne Komponenten zu dokumentieren.
Übersicht über Media Queries
Der Beitrag »A Practical Guide to CSS Media Queries« führt ausführlich und informativ mit vielen praktischen Beispielen durch das Thema und hält auch recht unbekannte Varianten bereit.
Rechtschreibprüfung in Figma
Im Prototyping-Tool Figma ist nun nativ ein Spellchecker integriert. So sind Designs zumindest in der Rechtschreibung fehlerfrei.
Einstieg in Container Style Queries
Der informative Beitrag auf CSS Tricks zeigt, was alles mit Container Style Queries möglich ist bzw. sein wird, wenn diese erst genügend Browser-Support bekommen haben.
Rechner für fluide Layout-Raster
Die von uns bereits mehrfach positiv erwähnte Website »Utopia« hat ihre Tools um einen »Fluid grid calculator« erweitert, den sie mit einer anschaulichen Einführung begleitet.
Komponenten-Galerie
»The Component Gallery« ist eine umfangreiche und sehr gut verschlagwortete Sammlung von UI-Komponenten aus unterschiedlichen Design-Systemen. Die Komponenten-Typen werden mit Definitionen, Mark Up und Richtlinien weiter erläutert.
WordPress Core auf GitHub Codespaces
Das WordPress Core-Team stellt die Möglichkeit bereit, sich an der Core-Entwicklung auf Github Codespaces zu beteiligen. Mit der komplett Cloud-basierten Arbeitsumgebung sollen vor allem Einstiegshürden gesenkt werden.
Support für WordPress Classic Editor verlängert
Manchmal stimmt der Spruch mit den Totgesagten: Entgegen früheren Absichtserklärungen wird der Classic Editor mindestens bis 2024 vollständig unterstützt, oder auch »as long as is necessary« …
Neuer Blog für WordPress-Entwickler
Der WordPress Developer Blog ist eine neue Anlaufstelle für verlässliche Entwicklungs-Informationen aus erster Hand.
Barrierefreie Webseiten für Tastatur-Nutzung
Auf Smashing ist ein ausführlicher, zweiteiliger Ratgeber zum barrierefreien Webseiten-Zugang per Tastatur erschienen. Während der erste Teil HTML und CSS zum Schwerpunkt hat, geht es im zweiten um JavaScript.
Git-Alternative von Meta
Sapling ist eine von Meta entwickelte Alternative zu Git. Mit offenbar hohem Aufwand ist ein Tool entstanden, das manche Sachen kann, die Git (noch) nicht kann.
Minimap mit der CSS-Funktion element()
Die CSS-Funktion element() wird leider seit Jahren nur vom Browser Firefox unterstützt. Die Umsetzung einer ziemlich coolen Minimap kann daher nur in diesem gewürdigt werden. Zu weiteren Einsatzmöglichkeiten der Funktion haben wir schon vor längerer Zeit geschrieben.
Google Fonts aus WordPress entfernen
Dynamisch in die Webseite geladene Google Fonts haben in jüngster Zeit zu einer Abmahnwelle geführt. Plugins nehmen sich dieser Problematik an. Im Beitrag von FontsPlugin werden Mittel und Probleme erläutert, die beim Entfernen der Google Fonts auftreten.
WooCommerce: Varianten mit Buttons gestalten
Statt mit einer drögen Select-Auswahl kann man Varianten eines Produkts mit Farb- oder Größen-Buttons viel besser visualisieren. Der Beitrag von Misha Rudrastyh erläutert, wie es geht.
Block-Editor im WordPress-Support-Forum
Der Block-Editor soll nun auch im Support-Forum Einzug halten. Es gibt eine Live-Testseite sowie die Möglichkeit, sich am Testing zu beteiligen.
WordPress im Sandkasten
Das experimentelle Projekt WordPress Sandbox soll die Möglichkeiten aufzeigen, WordPress im Browser ohne einen PHP-Server laufen zu lassen.
Container Queries in FF Nightly/109
Gehört Firefox bislang noch zu den wenigen Browsern, die das zukunftsträchtige Layout-Feature »CSS Container Queries« nicht unterstützen, lässt das Schließen eines Tickets auf Bugzilla eine baldige Änderung erhoffen.
Unbenutztes CSS anzeigen
Ab der Version 108 zeigen die Browser Chrome und Edge in den Dev-Tools an, wenn CSS-Regeln nicht angewandt werden, was das Debuggen und Optimieren von Stylesheets erleichtert.
State of the Word 2022 am 15.12.2022
Die Keynote von WordPress-Gründer Matt Mullenweg ist für viele WordPress-Fans das Ereignis des Jahres. Am 15.12. erfahren wir, wie die Reise weitergeht.
Unser täglich Brot: HTML5-Elemente
Es ist immer wieder hilfreich, sich seiner Grundlagen zu vergewissern. Die Seite »HTML Content Model Categories« zeigt, welchen strukturellen/semantischen Kategorien alle HTML-Elemente zugeordnet sind.
Das Barrierefreiheits-Initiative WebAIM hält ein Cheatsheet zur Semantik von HTML-Elementen mit jeweiligen Erläuterungen und Empfehlungen bereit.
Ergebnisse der Umfrage »Design Tools Survey 2022«
Die Ergebnisse der jährlich durchgeführten Umfrage sind für uns interessant, aber nur bedingt aussagekräftig. Der Fokus liegt deutlich mehr auf Product Design und Web-Apps. Figma wird extrem stark für UI und Basic Prototyping genutzt, Sketch ist total abgeschlagen und XD baut ab. Wundert das jemand?
Gut finden wir das Statement von Dan Mall, dass Design-Systeme immer noch viel zu wenig mit Code aufgebaut werden. Im Bereich »Advanced Prototyping« scheint das mehr der Fall zu sein, natives Coding kommt nach ProtoPie auf den 2. Platz. Auch Webflow ist hier überraschend stark platziert.
Verschachtelte Liste mit HTML und CSS ausklappbar
Bei Kate Rose Morley gibt es eine interessante Anleitung zum Coden einer ausklappbaren Liste im »tree view«. Das Beispiel kommt ohne JavaScript aus und nutzt stattdessen die HTML-Elemente <details> und <summary>. Der Browser-Support und damit auch die Barrierefreiheit für diese Elemente sind weit fortgeschritten.
ChatGPT: ein beeindruckendes neues AI-Level
Das Chat-Modell für natürliche Sprache erzeugt mittels AI-trainierter Fähigkeiten recht überzeugende Texte und damit schon erste Schweißperlen auf den Stirnen von Gebrauchstextenden. Nach kostenloser Registrierung kann man sich selbst von den Möglichkeiten und Grenzen überzeugen.
AI für WordPress: CodeWP
Auch WordPress-Entwickelnde sollten die Zeichen der Zeit erkennen, mit »codewp.ai« dringt künstliche Intelligenz in ihre Domäne ein und liefert nach erstem Augenschein durchaus hilfreichen PHP-Code für Anfrage-Phrasen. Einen ersten Praxistest können wir positiv bewerten. Der generierte Code führte zur schnelleren Lösung.
Noch eine Umfrage: State of CSS
Die Ergebnisse der Umfrage zum aktuellen Stand der CSS-Entwicklung geben im Detail einiges her. So viel schon jetzt: Die App-Entwicklung ist wie bei der »Design Tools«-Umfrage überproportional vertreten und CSS-Verschachteln macht noch den meisten Ärger.
Tools, Tools, Tools
- Lottie Alternative: Rive ist ein Online-Editor für interaktive (SVG) Grafiken.
- more.graphics ist eine Sammlung von kostenfreien Pattern und Gradient-Generatoren.
- Function12 stellt einen Konverter bereit, mit dem man Figma-Designs in HTML umwandeln kann.
- Eine Sammlung von in die Zukunft gerichteten Icons, wie bspw. für eine interplanetarische Reise gibt es auf futicons.com.
- Metallisch schimmernde Buttons stellt man mit der kleinen JS-Bibliothek MetaliCSS her.
- Wenn einem die Logos fehlen, springt Logoipsum ein. Manche Platzhalter wären fast einen solchen auf einem T-Shirt wert.
- Ein weiterer Rechner für fluide Typografie ist auf fluidtypography.com zu finden.
- »Easing Gradients« kann das CSS für eine deutlich feinere Darstellung von Verläufen in Browsern erzeugen.
|
