Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen
Von kulturbanause Team

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.

Aktualisiert am Lesezeit ca. 6 Min.

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

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →