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.
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.
Über das Wochenende habe ich meinen Blog einem kleinen grafischen Update unterzogen. Vor allem die Content-Breite wurde dabei an moderne Auflösungen angepasst. Diverse Abstände wurden etwas angenehmer gestaltet und zusätzlich wurde der bereits etwas veraltete Content im Projektbereich aktualisiert. Es wurden noch keine neuen Projekte hinzugefügt, dies folgt aber bald.
Eine weitere Änderung erfolgte intern in meinen Hugo Templates open_in_new, sodass die verschiedenen Artikel-Header nun einfacher global angepasst werden können. Dies erlaubte mir die letzte und auffälligste Änderung relativ schnell und einfach einzubauen. Denn aufgrund der höheren Breite wirkten die Artikel-Header teilweise etwas verloren und um dies zu umgehen sind sie nun mit einer vergrößerten, leicht transparenten und mit einem Blur belegten Version des Bildes hinterlegt.
Diese Änderungen sollen zum einen für mehr Übersicht und eine bessere Lesbarkeit sorgen, zum anderen aber auch etwas Moderne und Abwechslung in das durchaus schlichte Design bringen. Ich hoffe dieses kleine Update kommt gut an. Weitere Anpassungen werden wie gewohnt im Laufe der nächsten Zeit vorgenommen, betreffen aber vermutlich erst einmal das Backend in Form meiner Microservices.
Dem häufigeren Besucher ist es vielleicht schon aufgefallen, es gab ein kleines Design Update. Dieses bringt die Version meiner Website auf 8.2 und ist seit gestern Abend aktiv. Geänderte Hauptfarben, ein angepasster Header und Footer, sowie Anpassungen an den einzelnen Cards, welche den Content der Seite beinhalten, stellen die Basis für die Änderungen da. Ergänzt wird das Ganze durch leichte Abrundungen bei allen Bildern, diverse kleine Fehlerbehebungen und Optimierungen der Lesbarkeit.
Ein wirklich neues Feature ist der Dark-Mode (nutzbar durch das Sonne- / Mond-Symbol in der Navigation), welchen ich persönlich sehr mag und z.B. bei diversen Tools und auch Webseiten nutze. Unter anderem Twitter nutze ich nur im Dark-Mode. Das Ganze ist relativ simple implementiert und durch meinen Wechsel von CSS zu SCSS war der Aufwand sogar noch etwas geringer. Gespeichert wird euer Setting im Local Storage open_in_new eures Browsers, wodurch es an selbigen gebunden ist. Es wird nicht weiter an meinen Server weitergeleitet. Lediglich etwas JavaScript wird beim Laden der Seite bei euch lokal ausgeführt und prüft ob ihr den Dark-Mode aktiviert habt. Falls ja ändert es entsprechend eine CSS Klasse und ansonsten passiert einfach nichts. Inspiriert wurde ich zum genannten Vorgehen durch diesen Blogbeitrag auf flaviocopes.com open_in_new (englisch).
Ich hoffe die Änderungen kommen gut an und vielleicht findet der eine oder andere sogar gefallen am Dark-Mode. Über Feedback freue ich mich wie immer sehr. Selbiges darf gerne direkt in die Kommentare geworfen werden.
