Mein Weg zum "richtigen" CSS Framework

Vor ein paar Tagen wurde ich in den Kommentaren gefragt wie ich zu Bulma kam, bzw. wie ich es im Vergleich zu anderen Frameworks sehe. In diesem Kontext vorweg schon einmal die Information, ich habe mir die Frameworks allgemein und oberflächlich angeschaut, kam zu Bulma und mache dort nun meinen ersten kompletten Tests, inklusive Implementierung.
Daraus ergibt sich, dass ich die anderen Frameworks bis dato noch nicht aktiv genutzt habe und meine Aussagen hier auf meinen Ersteindrücken basieren. Für mich waren in diesem Rahmen vor allem die folgenden Punkte relevant, bzw. bildeten die Anforderungen.
Statusseite für Boehrsi.de

Auch wenn ich aktuell eher nicht so fit bin, eine kleine News zum Ende der Woche muss noch sein. Denn letztes Wochenende habe ich im Rahmen meiner Tests mit dem Bulma CSS Framework eine kleine Status Website für den Blog erstellt. Für mich persönlich ist es wichtig, dass neue Dinge die ich teste mit sinnvollen Testcases oder Projekten verbunden sind und eine ordentliche Statusseite wollte ich schon lange erstellen.
Solltet ihr also Informationen zum Status des Blogs, den Services oder meinem aktuellen News-Schedule wollen, dort hinterlege ich alles. Außerdem gibt es dort auch den Link zu meinem Live-Monitoring. Den Link zur Statusseite open_in_new findet ihr ebenfalls auf der About Seite hier im Blog.
Das ganze liegt natürlich nicht auf meinem Server, denn dann wäre die Seite ja nicht erreichbar wenn es mal Probleme gibt, was durchaus ironisch für eine Statusseite wäre. Die Website liegt bei GitHub und wird dort auch automatisiert gebaut. Aktuell führe ich Updates manuell On-Demand durch, aber eine weitere Automatisierung wäre denkbar, falls benötigt. Zum gesamten Setup und dem Deployment werde ich noch ein paar Worte in einer extra News-Sammlung verlieren, da das Thema meiner Meinung nach durchaus interessant ist und mir die ganze Aktion einigen Spaß gemacht hat.
Abschließend noch ein paar Worte zu Bulma. Mithilfe des CSS Frameworks konnte ich schnell eine durchaus hübsche Website erstellen, die responsive ist und zugleich einfach wartbar. Ich bin weiterhin durchaus zufrieden und überlege zur Zeit welche größeren Projekte ich privat mit Bulma umsetzen könnte.
I'm a coder - Code Quality != true

Software kann in sehr unterschiedlichen qualitativen Zuständen sein. Manchmal startet man bei Null und kann alles frisch und gut entwickeln, mal übernimmt man eine betagte Legacy Software und manchmal findet man eine gut dokumentierte und gepflegte Software zum weiterentwickeln vor.
Sowohl in privaten, wie auch in professionellen oder Open Source Projekten findet man diese verschiedenen Typen und diverse Abstufungen von selbigen, zum guten und zum schlechten. Ich war bis dato meist an frischen Projekten beteiligt, wo ich die Architektur mit definierte und die Konzepte tiefgehend Verstand. Bereits laufende Projekte betreute ich ebenfalls, meist aber nicht extrem tiefgehend oder aber die Projekte waren durchaus gut strukturiert und verständlich.
Mit diesen Ansätzen und den entsprechenden Aufgaben konnte ich gut umgehen, doch aktuell stehe vor einer neuen Herausforderung, die meiner Meinung nach eine Erwähnung wert ist. Denn als Entwickler wird man über selbige früher oder später stolpern und man sollte auch mit dieser umgehen können.
Es geht um Software die gewachsen ist, über lange Zeit und vielleicht nicht die Liebe und Zuneigung erfahren hat die sie sollte. Software die einen manchmal mit der Stirn runzeln lässt und manchmal möchte man das Keyboard liebevoll in viele kleine Teile zerschmettern.
Bulma CSS Framework - Mein erstes Fazit

Ich interessiere mich neben der App-Entwicklung bekanntlich auch für die Erstellung von Webseiten, wie vielleicht dieser Blog zeigt. Generell arbeite ich gerne mit wenig externen Abhängigkeiten in diesem Bereich, doch manchmal sollte man ja auch etwas neues ausprobieren.
Mit einem Kollegen zusammen erstelle ich hin und wieder kleinere Webprojekte und zuletzt haben wir uns entschieden, auch in diesem Bereich auf den Static Site Generator Hugo zu wechseln. Zur Vereinfachung der Layout-Entwicklung wurde vorgeschlagen ein CSS Framework zu nutzen, worauf ich aus oben genannten Gründen erst einmal skeptisch reagierte. Nach diversen Reviews und Test entschieden wir uns aber Bulma eine Chance zu geben und bis dato bin ich durchaus zufrieden.
Bulma ist ein CSS Framework, welches diverse Basis Komponenten, Layout Strukturen und kleinere Elemente liefert. Das ganze ohne unnötiges JavaScript, dafür aber modular und direkt mittels einer einzelnen CSS Datei nutzbar. Für mich persönlich war ebenfalls wichtig, dass man vorhandene Komponenten ohne großen Aufwand anpassen kann. Auch hier steht Bulma nach meinen ersten Tests sehr gut da. Denn ich lud mit lediglich die neuste Version herunter, welche diverse SASS Dateien beinhaltet, importierte selbige mit einer Zeile in meiner SASS / SCSS Datei und überschrieb die gewünschten Variablen. Diese Variablen, wie auch fast alles andere, sind extrem gut dokumentiert, was ein massiver Pluspunkt im Vergleich zu einigen anderen CSS Frameworks ist.
Bis dato probierte ich vor allem mit kleineren Projekten herum und ein umfangreicher Test mit einem sehr komplexen Custom Layout steht noch aus, doch zur Zeit bin ich sehr zufrieden mit Bulma als CSS Framework. Habt auch ihr schon mit CSS Frameworks gearbeitet und wenn ja, was nutzt ihr am liebsten?
Flutter Version 1.22 erschienen

Es gibt wieder spannendes aus der Flutter und Dart Welt zu berichten, denn seit letzter Woche ist Flutter 1.22 verfügbar. Die neue Iteration von Googles Cross-Platform UI Toolkit wird zusammen mit Dart 2.10 open_in_new ausgeliefert und bietet einiges Neues.
Allem voran kann man mit der neuen Version Support für iOS 14 und Android 11 erwarten, wodurch Flutter auch auf den jeweils neusten mobilen OS Versionen genutzt werden kann. In diesem Zuge wurden auch die verfügbaren iOS Icons massiv erweitert und aktualisiert. Unter Android werden nun flexiblere Aussparungen für Kameras und Seitenränder unterstützt, sowie flüssigere Animationen in Verbindung mit dem virtuellen Keyboard. Ebenfalls neu ist der Support für die aktualisierten Material Design Buttons open_in_new.
Im Bereich Internationalization (i18n) und Localization (l10n) ist nun Hot Reload Support vorhanden und diverse weitere Verbesserungen wurden vorgenommen. Hier könnte das neue characters Package open_in_new hilfreich sein.
I'm a coder - Make a plan, stick to the plan, adapt the plan

Als Softwareentwickler hat man viele Wege um ans Ziel zu kommen und auch die Art und Weise wie man selbige Wege beschreitet ist vielschichtig. Ich persönlich bin ein Freund davon erst einen Plan zu machen und selbigen später auszuführen. Anpassungen an selbigem sind natürlich an der Tagesordnung, aber blind drauflos programmieren ist nicht so mein Fall. Dies gilt vor allem wenn ich an größeren und komplexeren Projekte arbeite. Denn in selbigen ergeben sich bei spontanen Änderungen gerne Seiteneffekte, welche bekanntlich ungern gesehen sind.
Doch so schön es ist diese Idee für den generellen Ablauf zu haben, manchmal sollte man sich daran erinnern die eigenen Ansätze auch konsequent zu verflogen. Denn sind wir nicht alle manchmal wie eine Feder im Wind? Vor allem wenn es darum geht etwas Neues zu machen, vielleicht sogar in einer neuen Sprache, mit einem neuen Framework oder etwas anderes motivierendes steht an. So passierte es mir beim Umbau / Ausbau einer alten Library aus einem Projekt und damit verbunden der Umstellung von Java auf Kotlin.
MarkUp - How To

Vor kurzem schrieb ich über MarkUp, eine Platform zum gemeinsamen diskutieren von Designs für Webseiten und andere Projekte. Im Rahmen des Beitrags stellte ich das Tool kurz vor, welches als Webseite verfügbar ist. Als Antwort auf diesen Beitrag wurde ich gefragt wie der generelle Ablauf ist, wenn man Markup.io nutz.
Diesen stelle ich nun mit wenigen Schritten, denn der Ablauf ist durchaus simpel und gut strukturiert, im Folgenden dar. Außerdem findet ihr im unteren Teil der News ein kleines Teaser Video zum Tool.
Flutter - Windows Alpha Support erschienen

Nach längerem Warten ist es nun soweit, Flutter Apps können nun auch unter Windows ausgeführt werden. Während Android und iOS von Anfang an Bord waren, wurden die Desktopsystem Stück für Stück nachgereicht. Angefangen mit MacOS und gefolgt von Linux. Windows war bis dato nur als Tech-Preview verfügbar, was für mich etwas zu gewagt war, auch wenn es nur um private Projekte geht.
Seit vorgestern ist es nun soweit und Windows wird über den dev Channel von Flutter als Alpha Version unterstützt. Für mich bedeutet dies endlich gute Desktop-Anwendungen, ohne Legacy UI mit problematischen UI-Generatoren und ähnlichem. Bis dato war ich mit Java und verschiedenen Tools drum herum unterwegs, um Desktop-Programme mit UI zu entwickeln, doch dies war leider nie sonderlich zielführend. Ich kam zwar meist zu nutzbaren Ergebnissen, aber der Weg dahin und auch die Pflege der Projekte, war meist eher unangenehm.
Flutter bietet mir hier nun eine Basis, die für mich persönlich ein Vielfaches flexibler und praktischer ist. Während ich im Android-Bereich an Java bzw. Kotlin für einige Projekte festhalten möchte und auf der Serverseite ohnehin mit Kotlin glücklich bin, werde ich Java auf dem Desktop wohl komplett Ad acta legen. Flutter wird hier für mich die Basis für folgende Projekte werden und wenn auch ihr Interesse an diesem Ansatz habt, der Weg dahin ist nicht sonderlich kompliziert. Bei der folgenden Beschreibung gehe ich davon aus, dass ihr bereits ein grundlegendes Flutter Setup open_in_new, z.B. für die Andorid-Entwicklung, betreibt.
Jetpack Compose Alpha erschienen

Falls ihr Android Apps entwickelt und gerne etwas agiler und effektiver beim Erstellen des User Interfaces wärt, schaut euch doch mal Jetpack Compose an. Die Jetpack Komponenten sind seit einiger Zeit die große neue Basis für moderne Konzepte im Android-Kosmos. In diesem Bereich wurde vor ca. zwei Wochen nun die erste Alpha der Jetpack Compose Bibliothek veröffentlicht.
Jetpack Compose bietet Entwicklern die Möglichkeit nativ und direkt im Kotlin Code UIs zu entwickeln. Keine XML Dateien mehr, kein Mapping, Data Bindung oder ähnliches. Auch wenn Jetpack Compose aktuell nur als Alpha verfügbar ist, für Entwickler dürfte es interessant sein eine UI im Code beschreiben zu können und das System abhängig vom Zustand alles automatisiert zusammenbauen zu lassen.
Um sich das Ganze etwas näher anzusehen gibt es einiges Codelabs und Sample Apps. Diese und auch der Link zum benötigten Setup (aktuell werden Canary Builds von Android Studio benötigt) findet ihr in den Related Links.
Ich finde den Ansatz sehr gut, da ich durch Flutter ähnliche Ideen gewohnt bin und aktuell sehr gut mit selbigen klar komme. Ich bin gespannt ab wann die Jetpack Compose API komplett stabil sein wird und wie gut das Ganze im Alltag funktionieren wird. Ich werde mir das Ganze auf jeden Fall aktiv weiter ansehen.
.gitignore Dateien leicht gemacht mit gitignore.io

Aktuell erstelle ich gerade das eine oder andere Git Repository für verschiedene Projekte. Fülle ich selbige nun gibt es die eine oder andere Datei die initial direkt auf die .gitignore Liste sollte.
Entsprechend gehe ich auf die Suche in offiziellen Repositories der jeweiligen Sprache / Build-Tools / Dependency-Management-Tools und natürlich auch auf Stack Overflow. Dort findet man verschiedene Teile der Lösung und zusammen mit meinem bestehenden Wissen bekomme ich meist eine recht gute initiale Lösung, welche dann über Zeit optimiert werden kann.
Wer allerdings etwas weniger suchen und mehr finden will, kann mal gitignore.io ausprobieren. Selbiges ist ein Dienst über den ich gestern gestolpert bin und welcher basierend auf von euch definierten Keywords eine .gitignore Datei erstellt. Die Auswahl der vorhandenen Keywords ist dabei groß und mehrere von ihnen können kombiniert werden. Auf diese Weise kann man mit sehr wenig Aufwand die entsprechenden Filterregeln erstellen.
Solltet ihr mit Git arbeiten und hier und da neue Projekte an den Start bringen, kann ich euch einen Blick auf gitignore.io nur empfehlen. Das Projekt selbst ist übrigens ebenfalls Open Source. Alle relevanten Links zum Thema findet ihr wie gewohnt in den Related Links.

