Boehrsi.de - IT und Gaming Blog

Kleine Designverbesserungen für Boehrsi.de

Erstellt am event Uhr von account_circle Boehrsi in label Boehrsi
Kleine Designverbesserungen für Boehrsi.de Bild

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.

Boehrsi.de Version 8.6 erschienen

Erstellt am event Uhr von account_circle Boehrsi in label Boehrsi
Boehrsi.de Version 8.6 erschienen Bild

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.

Boehrsi.de - Dark Mode optimiert

Erstellt am event Uhr von account_circle Boehrsi in label Development
Boehrsi.de - Dark Mode optimiert Bild

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.

Boehrsi.de Version 8.5 - Viele kleine Verbesserungen und Optimierungen

Erstellt am event Uhr von account_circle Boehrsi in label Development
Boehrsi.de Version 8.5 - Viele kleine Verbesserungen und Optimierungen Bild

Ü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.

Bug mit www. Subdomain behoben

Erstellt am event Uhr von account_circle Boehrsi in label Development
Bug mit www. Subdomain behoben Bild

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.

Boehrsi.de Version 8.4 - Frischer Wind und klarere Strukturen

Erstellt am event Uhr von account_circle Boehrsi in label Development
Boehrsi.de Version 8.4 - Frischer Wind und klarere Strukturen Bild

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.

Boehrsi.de Version 8.3 - Design Update für bessere Lesbarkeit

Erstellt am event Uhr von account_circle Boehrsi in label Development
Boehrsi.de Version 8.3 - Design Update für bessere Lesbarkeit Bild

Ü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.

Boehrsi.de Version 8.2 - Dark-Mode und Design Update

Erstellt am event Uhr von account_circle Boehrsi in label Development
Boehrsi.de Version 8.2 - Dark-Mode und Design Update Bild

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.

Boehrsi.de - Mein Server

Erstellt am event Uhr von account_circle Boehrsi in label Development
Boehrsi.de - Mein Server Bild

Vor einiger Zeit wurde ich in den Kommentaren gefragt wie mein aktuelles Hosting für den Blog aussieht und darüber möchte ich heute mal ein paar Worte verlieren. Ich nutze derzeit einen Linux vServer open_in_new mit Ubuntu, da ich dort die Freiheiten habe die ich benötige. Ich setzte auf einen vServer, da ich die Performance eines vollwertigen Root-Servers derzeit nicht benötigte.
Der Server ist mit zwei virtuellen CPUs unterwegs, verfügt über 4GB RAM und kann 200GB Speicherplatz verarbeiten. Alles in allem ein sehr kleines, aber funktionales Modell. Web-Hosting Angebote kommen für mich nicht in Frage, da ich sowohl bei den Anforderungen an den Server, wie auch bei den Anforderungen bezüglich der Domain-Konfiguration einige Sonderwünsche habe.

Boehrsi.de - CI/CD Workflow

Erstellt am event Uhr von account_circle Boehrsi in label Development
Boehrsi.de - CI/CD Workflow Bild

Über die letzten Wochen und Monate habe ich meine Build-Pipeline für den Blog optimiert und erweitert und würde sie zum jetzigen Zeitpunkt als fertiggestellt betrachten. Verbesserungen kann man natürlich immer vornehmen, aber aktuell fallen mir zumindest keine mehr ein.
Das Ganze läuft komplett via Git ab, sodass ich als Nutzer lediglich einen Commit und Push durchführe und alles weitere automatisiert geschieht. Dabei werden direkt beim Commit neue Bilder optimiert, sodass der Server keine unnötige Arbeit durchführen muss. Sobald der Push durchgeführt wird, wird ein Git-Hook open_in_new ausgelöst und startet den Hugo open_in_new Build Prozess. Dieser sorgt durch Minification automatisiert für kleinere und optimierte Dateien. Anschließend kopiert das Script die Dateien ins Deploy Verzeichnis.

format_list_numbered  Seite 1 Nächste navigate_next