Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Im November 2021 haben wir als Team zusammengesessen und uns über Neuigkeiten oder zumindest neu entdeckte Informationen der Branche ausgetauscht. Die wichtigsten Infos archivieren wir in diesem Beitrag. Die Reihenfolge entspricht unserem Meeting.

Visual Studio Code als Browser-Tool

Der Texteditor von Microsoft ist nun komplett im Browser nutzbar. Moderne Browser ermöglichen (mit Erlaubnis) den Zugriff auf das lokale Dateisystem. Dadurch eröffnen sich interessante Wege, ohne installiertes Programm zu arbeiten.

Der WordPress Block-Editor »Gutenberg« erzeugt bald automatisch Anker für Überschriften

Diese neue Funktion fügt Überschriften eine individuelle ID hinzu, so dass Sprungmarken gesetzt werden können. Auch die Voraussetzung für ein automatisiert generiertes Inhaltsverzeichnis ist damit gegeben. Meldung bei Twitter

Online-Tool für thematische Platzhalter-Bilder

Mit dem Tool »lorem.space« kann man thematische Platzhalter-Bilder nach Kategorien wie Filmen,Computer-Spielen, Büchern, Mode oder Schuhen zufallsgeneriert in eine Webseite ausgeben.

Adobe XD unterstützt Videos und Lottie-Animationen

Adobe XD ermöglicht ab Version 45 die Integration von Animationen im Lottie-Format und Videos. Visuelle Prototypen können so  realistischer und bewegter gestaltet werden. Lottie-Animationen werden mit Hilfe des Bodymovin-Plugins für After Effects erzeugt und liegen im JSON-Format vor. Sie können sehr einfach in Websites integriert werden. Auf der Website lottiefiles.com – für die es ein offizielles XD-Plugin gibt – stehen fertige Animationen zum Download.

Illustrator und Photoshop bald in der Cloud

Die Adobe-Programme Illustrator und Photoshop sollen bald auch in der Cloud nutzbar sein. Derzeit noch in der Beta-Phase soll dadurch die Zusammenarbeit in Teams verbessert werden. Damit setzt sich der Trend fort, die (bisherige) Arbeit mit Desktop-Programmen mit teils exklusiven Features in die Cloud zu verlagern.

CSS Overview Panel in den Chrome-Devtools

In den Chrome-Devtools ist nun ein weiteres Werkzeug vorhanden, das CSS Overview Panel. Dieses stellt eine übersichtliche Zusammenfassung der CSS-Nutzung bereit. Die Aufstellung beinhaltet bspw. Angaben zur Anzahl von Regeln und Selektoren in unterschiedlichen Segmenten, zu Farben inklusive Check auf AA-& AAA-Kontraste, Typografie und nicht genutzten Deklarationen.

Hintergrund aus Fotos entfernen

Mit dem Online-Tool »remove.bg« kann man aus Fotografien recht einfach den Hintergrund entfernen, bzw. das Hauptmotiv freistellen. Für die Nutzung der API ist eine Registrierung notwendig.

Pattern-Sammlungen für Layout und Core Web Vitals

Auf »web.dev«, der von Google betriebenen Plattform für Webentwicklung, stehen nun Sammlungen von »Patterns« zur Verfügung. Für das Umsetzen von gebräuchlichen Layout-Mustern wie etwa Cards, Grids oder »Holy grail« und die Optimierung der Core Web Vitals stehen aktuelle Lösungen bereit.

Wo wird geklickt?

Mit »Mouseflow« kann man die Usability von Webseiten überprüfen. Das Tool zeichnet Mausbewegungen und -klicks von Benutzenden auf und stellt die Ergebnisse bspw. mit Heatmaps dar. Auch die sogenannte »Customer-Journey« kann erfasst und das Feedback der Testenden eingeholt werden. In einer eingeschränkten Version ist das Tool kostenlos nutzbar.

WordPress-Plugin ACF 5.11 Release mit neuen Funktionen

Dieser Major Release von »Advanced Custom Fields« enthält neben üblichen Bug Fixes und kleineren Optimierungen zwei interessante Neuerungen: Es wird nun die WordPress REST API unterstützt und es gibt Verbesserungen im Umgang mit dem ACF PRO-Lizenzschlüssel.

Shapes erstellen

Zwei Online-Tools zum Erstellen von Shapes: Bei shapedivider.app kann man den SVG- und CSS-Code direkt herunterladen, bei haikei gibt es den Shape als SVG- oder PNG-Download.

Neues CSS-Reset

Das Reset von Elad Shechter nutzt CSS-Features, die in den letzten Jahren hinzugekommen sind. Auf CSS-Tricks dazu die Vorstellung und ein Interview mit ihm.

WooCommerce: Visual Hook Guides

Bei Business Bloomer gibt es eine Liste von aufbereiteten Darstellungen, an welcher Stelle die zahlreichen WooCommerce-Hooks greifen. Anpassungen an beispielsweise der Produkt-Detailansicht oder am Warenkorb sind so wahrscheinlich schneller umgesetzt.

WooCommerce: Alle Bestellungen löschen

Während der Entwicklung wird ein WooCommerce-Shop i.d.R. intensiv getestet und zahlreiche Testbestellungen durchgeführt. Später möchte man diese Testbestellungen normalerweise löschen. Ein kleines SQL-Snippet genügt, um alle Bestellungen zu entfernen. Mächtig, also auf eigenes Risiko!

Neuer Online-Kurs für responsives Design

Der Kurs »Learn Responsive Design« auf der Plattform web.dev richtet sich in erster Linie an Einsteiger*innen, hält aber auch für CSS-Veteranen aktuelle Hinweise zur Umsetzung mit bspw. Flexbox oder Grid bereit.

Lazy Load im Bezug auf die Website-Performance

In der aktuellen Version zeigt Lighthouse einen Fehler an, wenn beispielsweise das Bild im LCP mit Lazy Loading ausgestattet ist. Der Artikel »The performance effects of too much lazy-loading« geht auf Lazy-loading in Hinsicht auf die Core Web Vitals ein und gibt Ratschläge für andere Lösungen.

Advanced Data Protection Control (ADPC)

Einstellungen im Browser statt auf jeder Site – eine neue Spezifikation schlägt eine nutzerfreundliche Lösung für Datenschutzeinstellungen im Browser vor.

DMARC Record für Mail-Adresse – »Security Header für E-Mails«

Diese Spezifikation zur Authentifizierung von E-Mails kann das Versenden von Spam und anderen schädlichen Mails verhindern.

Geschrieben von kulturbanause Team

thumb

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 →