Boehrsi.de - Blog

Anfang der Woche fiel mir auf das einige Kategorien und Tags hier im Blog Probleme machen, Grund dafür ist ein Update des Code Generators des Blogs gewesen. Um derartige Probleme in Zukunft zu vermeiden habe ich die Art und Weise wie meine Kategorien, Tags und weitere Daten gespeichert werden angepasst. Hierfür war ein Update von ca. 5000 Beiträgen nötig, was etwas Zeit in Anspruch nahm, vor allem da die Daten nach derart großen Änderungen zumindest grundlegend validiert werden sollten.
Mit dem heutigen Update sollten alle Kategorien, Tags und weitere Einträge wieder funktionieren und alle Daten sollten wieder sichtbar sein. Außerdem habe ich Kleinigkeiten bei der Anzeige von Kommentaren verbessert und ein weiteres Update des Code Generators des Blogs vorgenommen. Kleinere weitere Fixes und Optimierungen gab es nebenher ebenfalls.
Sollten euch Probleme auffallen oder ihr generell Feedback haben, meldet euch gerne in den Kommentaren.

Nach längerer Zeit habe ich mal wieder ein kleines Update an meinem Blog und nicht den dahinterliegenden Services vorgenommen. Das Update sorgt für eine bessere UI / UX durch minimale Anpassungen bei Abständen, Schriftgrößen und der Anordnung von Elementen. Ebenfalls verbessert wurde die Ladezeit in einigen Usecases. Zusätzlich sollten Screenreader nun besser funktionieren, da ich die Hierarchie der Elemente besser strukturiert habe.
Alles in allem ist es zwar nur ein kleines Update, aber ich finde es wichtig am Ball zu bleiben und neue Techniken oder UI / UX Flows zu unterstützen. Dazu gehört in diesem Update das Lazy Loading von Bildern open_in_new und die damit verbundene Verbesserung von Ladezeiten.

Heute gibt es mal wieder ein kleines Update für meinen Blog, denn es hatte sich ein Fehler bei den Empfehlungen eingeschlichen. Das Resultat von selbigem war die fehlerhafte Anzeige der Übersicht aller Empfehlungen. Das Problem ist behoben, verschiedene weitere kleine Updates im Hintergrund wurden vorgenommen und alles sollte wieder ordnungsgemäß funktionieren. Sofern ihr Fehler findet, Anregungen habt oder einfach Feedback geben wollt, meldet euch gerne in den Kommentaren.

In den letzten Tagen habe ich mal wieder ein paar kleine Updates am Blog vorgenommen. Vor allem im Über Bereich habe ich die Darstellung der Bilder und Logos optimiert. Global gab es aber auch Änderungen, denn ich habe mein Icon Set gewechselt.
Zuvor war ich mit den durchaus guten Material Icons open_in_new unterwegs, nun habe ich auf die neuen Material Symbols open_in_new gewechselt. Beide Sets werden von Google als Font zur Verfügung gestellt und die Umstellung war für mich extrem einfach. Lediglich die eingebundene Font und die Basis CSS Klasse musste ich austauschen. Da ich einige CSS Klassen von der Basisklasse ableite, welche dann die Größe und die Positionierung definieren, war der Rest quasi schon gegeben.
Ich bin ein Freund davon alles unter einem Dach zu haben, entsprechend nutze ich das lokale Hosting der Icon Font, wie hier beschrieben open_in_new. Die neuen Icons wirken etwas leichter und gliedern sich besser in das Design meines Blogs ein.
Falls ihr die Icons auch nutzen wollt folgt einfach den Related Links. Dort gibt es nicht nur Informationen für die Nutzung im Web, auch die Plattformen Android und iOS werden bedient. Für Flutter gibt es die Material Symbols zur Zeit leider noch nicht, dies soll sich aber noch ändern.

• Material Symbols Dokumentation open_in_new
• Material Symbols Webseite open_in_new

Vor einem Monat erfolgte der Release von Version 8.6 des Blogs und heute gab es noch ein paar Nachbesserungen. Vor allem im Bereich Farben und Konsistenz bezüglich Material 3 wurden Optimierungen vorgenommen. Dies sollte die Lesbarkeit verbessern und dafür sorgen das die Webseite noch etwas mehr wie aus einem Guss wirkt. Ebenfalls angepasst wurde das Formular für die Kommentar, welches bis dato etwas spärlich behandelt wurde.
Geholfen hat mir bei diesem Update eine weiteres Mal das bereits erwähnte Tool Material Theme Builder open_in_new, welches aktualisiert und erweitert wurde. Dort sieht man nun auch eine Vorschau für einzelne Elemente der UI und ein Export des erstellten Themes für Android, Flutter und das Web ist möglich. Ein sehr praktisches Tools, welche auch ohne großes Vorwissen genutzt werden kann.

Seit langem gab es mal wieder ein umfangreicheres Update für meinen Blog. Denn neben der angekündigten und auch durchgeführten Umstellung auf ausschließlich WebP Bilder, erfolgte auch eine Anpassung des Designs. In diesem Bereich setze ich bereits seit langem auf Material Design open_in_new und habe hier nun Änderungen vorgenommen, um Version 3 der genannten Designsprache zu implementieren.
Material Design Version 3 open_in_new setzt auf ein noch einheitlicheres Farbschema. Ansonsten wurden die Stile von Karten, Buttons und Chips angepasst, was ich entsprechend adaptiert habe. Ich nutze keine Library für CSS oder JavaScript, das genannte Design ist in SCSS / SASS selbst implementiert.
Durch die Neuerungen sollte sowohl im hellen, wie auch im dunklen Modus alles noch etwas mehr wie aus einem Guss wirken und dies Lesbarkeit sollte sich verbessert haben. Diverse Formen sind nun etwas geschwungener und zusätzlich wurden einige kleine Bugs des alten Designs entfernt. Auch alter Content wurde an einigen Stellen überarbeitet und von Fehlern befreit.

Ich arbeite gerade sowohl im Android Bereich, wie auch in der Flutter Welt, an Apps die Dark Mode Support erhalten sollen. In diesem Rahmen habe ich auch den Dark Mode des Blogs noch einmal unter die Lupe genommen und kleinere Anpassungen vorgenommen.
Während bis dato alles einen sehr starken Blaustich hatte (linker Teil des Screenshots), bin ich nun zu neutraleren Farben gewechselt (rechter Teil des Screenshots). Entsprechend verhält sich der Dark Mode mit dunklen Grautönen nun ähnlich wie das normale Theme, welches Weiß und ein helles Grau nutzt.

Über die letzten Wochen hinweg gab es diverse kleine Optimierungen an der Art und Weise wie Inhalte hier im Blog dargestellt und geladen werden. Die Änderungen sind eher minimal bezogen auf das Aussehen, aber die Performance sollte an einigen Stellen besser geworden sein. Vor allem der Cumulative Layout Shift (CLS) open_in_new, also das sich verschieben des Contents, nachdem der eigentliche Inhalt initial geladen wurde, sollte weniger geworden sein. Informationen zu Problemen mit diesen technischen Interna des Blogs erhalte ich übrigens über das PageSpeed Insights Online Tool open_in_new, für welches ich vor einiger Zeit auch ein kleines Bookmarklet erstellt habe.

Scheinbar hatte sich vor einiger Zeit der Konfigurations-Fehlerteufel eingeschlichen, welcher dafür sorgte dass der Blog unter der Subdomain https://www.boehrsi.de nicht ordentlich funktionierte. Weder die CSS Dateien, noch externe Services wurden wie gewünscht geladen, wodurch die Seite fehlerhaft aussah und die Kommentare und die Suche gar nicht funktionierten.
Das Problem wurde nun behoben, indem die eigentlich vorhandene automatische Weiterleitung auf https://boehrsi.de wieder aktiviert wurde. Ein Dankeschön geht an Peter für den Hinweis auf das Problem. Entsprechend sollte nun alles wieder wie gewohnt fehlerfrei funktionieren.

Da ich aktuell für andere Hugo Themes mal wieder mehr mit Hugo machen wollte, habe ich mir gedacht ein Blog-Design Updates wäre eine gute Idee. Seit langem wollte ich das ein oder andere umsetzen.
Dies tue ich mit dem aktuellen Design-Update. Es bringt hoffentlich eine bessere und weniger anstrengende Lesbarkeit von Beiträgen, vor allem wenn eine Vielzahl an Links in selbigen sind. Außerdem habe ich für diverse Link-Objekte Design-Komponenten erstellt, statt einfach nur Links zu nutzen. Outline-Buttons für die Sidebar und den Weiterlesen Link und Chips für Kategorien oder Bereiche sind hier ein Beispiel. Dadurch sollen sich normale Links zu Content-Unterseiten, von Links unterscheiden die anderweitige Funktionen bieten.
Ein Hugo Update gab es außerdem, ebenso wie viele CSS Aufräumarbeiten und Optimierungen. Ein paar kleinere Fehler wurden ebenfalls aus der Welt geschafft. Abgesehen von sehr alten Legacy-Beiträgen, welche noch immer HTML beinhalten, sollten alle aktuellen Beiträge nun keinerlei Probleme mehr in diesem Bereich machen.
In diesem Update habe ich diversen Legacy-Code durch Flex Layout-Komponenten ersetzt, wodurch die Seite auf zukünftig mit aktuellen Browsern gut funktionieren sollte. In den kommenden Tagen werde ich vermutlich noch den einen oder anderen aufkommenden Bug beheben, sofern welche gefunden werden. Solltet ihr Dinge finde die komisch oder fehlerhaft wirken, meldet euch gerne in den Kommentaren.