webX ist online! Mein erster Beitrag als Freelancer Webentwickler

Der Weg zur eigenen Webseite

Als erfahrener Webentwickler, der sich in verschiedenen Technologien, sowohl modernen als auch veralteten, eingearbeitet hat und beherrscht, ist es nur natürlich, seine eigene Webseite zu entwickeln und zu präsentieren. Dies dient nicht nur dazu, das eigene Können und Interesse zu demonstrieren, sondern auch, stetig zu wachsen

Wie in jedem Beruf gibt es einen Zeitpunkt, an dem man sein angeborenes oder hart erarbeitetes Talent der Öffentlichkeit präsentiert. Dies geschieht nicht, um sich zu vergleichen oder zu bereichern, sondern um täglich besser zu werden

Meine Webseite repräsentiert meine kontinuierlichen Bemühungen, mich weiterzuentwickeln und wertvolle Lösungen für Webentwickler anzubieten. Das Ziel ist es, durch geteiltes Wissen und die Suche nach Lösungen für Probleme – unwichtig, wie klein oder groß sie auch sein mögen – einen Beitrag als Webentwickler zu leisten

Motivation

Fragen zu stellen bildet den Grundstein für jegliches Handeln. Was hat mich dazu veranlasst, meine eigene Webseite zu entwickeln? Warum entsteht die Webseite, während ich in einer Festanstellung als Webentwickler in einem IT-Dienstleistungsunternehmen tätig bin? Ist es die Motivation, Neues zu wagen und auszuprobieren, oder der Wunsch, ausgetretene Pfade zu verlassen und ins Unbekannte zu treten? Diese und viele weitere Fragen dienen der Orientierung und sind der Kompass auf dem Weg, meinen Kindheitstraum als Unternehmer endlich wahr werden zu lassen

AstroJS: Der Static Site Generator

Der handgeschriebene Code basiert auf Typescript und dem Web-Framework AstroJS. AstroJS ist ein Web-Framework, das eine umfassende Lösung für die Erstellung schneller und inhaltsorientierter Webseites bietet. Mit seiner Island-Architektur ermöglicht AstroJS die Integration der gängigsten Frontend-Frameworks und -Bibliotheken. Ein entscheidender Aspekt bei der Wahl dieses Web-Frameworks war die unglaublich hohe Geschwindigkeit und die Tatsache, dass SEO einen wichtigen Bestandteil dieser Webseite darstellt. Die Geschwindigkeit wird erreicht, weil standardmäßig keine Hydration im Frontend durch den Einsatz von Bibliotheken/Frameworks stattfindet. Native Entwicklung mit Javascript/Typescript ist weiterhin möglich und wird von AstroJS verarbeitet, optimiert und gebündelt

Vor diesem Hintergrund stellt sich die Frage, warum ich mich gegen die Verwendung von WordPress entschieden habe, obwohl es perfekt für diese Webseite geeignet wäre? Die Antwort liegt auf der Hand: Ich bin ein erfahrener Webentwickler und liebe es, Code zu schreiben. Es liegt in der Natur eines Webentwicklers, eigenen Code zu verfassen, anstatt ein Baukastensystem zu verwenden, um eine Webseite zu betreiben. Darüber hinaus empfinde ich WordPress als vergleichsweise langsam und für eine Webseite, die von einem Webentwickler für Webentwickler konzipiert und umgesetzt wurde, als nicht ideal

Mein Fokus mit AstroJS liegt auf der Philosophie jeder Webentwicklung: maximale Flexibilität durch wiederverwendbare und isolierte Komponenten, die in verschiedenen Bereichen einer Webseite Anwendung finden, die modulare Erweiterung durch offizielle und von der Community entwickelten Plugins und die Benutzerfreundlichkeit durch die Konzentration auf das Wesentliche. Mit diesem Ansatz und den eigenen Anforderungen, die ich als Webentwickler an mich stelle, setze ich eigene Standards für meine Webseite

SolidJS: Das reaktive UI-Framework

Ich habe mich gefragt, welches der populärsten Webframeworks in diese Webseite integriert werden soll. Nach langem Suchen, und um nicht immer die gleichen und bekanntesten Kandidaten auszuwählen, wenn es um die Frage geht, welche Technologie am besten für die Lösung der interaktiven Benutzeroberfläche geeignet ist, bin ich auf ein relativ neues Webframework aufmerksam geworden. Die Rede ist von SolidJS, das auf der Javascript-Konferenz im Jahr 2022 als vielversprechendes neues UI-Framework den “OS Award 2022” erhalten hat. Mit diesem Gedanken und der Notwendigkeit, die Insel-Architektur von AstroJS zu verwenden, die es erlaubt, Webframeworks in die Webseite zu integrieren, habe ich SolidJS eine Chance gegeben

SolidJS ist ein leichtgewichtiges, deklaratives und reaktives Framework, das auf einer flexiblen und modularen Architektur basiert. Es ermöglicht Entwicklern, eleganten Code zu schreiben, der effizient, einfach und ohne Virtuellen DOM ist. Dadurch erreicht es nahezu die Geschwindigkeit von Vanilla JS und vermeidet unnötige Komplexität

Perfekt geeignet, um Neues zu lernen und SolidJS in die Webseite zu integrieren, stellt sich lediglich die Frage, an welcher Stelle dies am besten möglich ist. Auf der Seite Tags befindet sich eine Suchleiste mit einem Autocomplete, der die verfügbaren “Tags” enthält, die in jedem Blogeintrag eindeutig vorkommen. Die Blogeinträge werden anhand der ausgewählten “Tags” gefiltert und angezeigt. Dies stellt ein pragmatisches Beispiel dar, wie eine gängige Anforderung einer Suchimplementierung umgesetzt wird

Javascript / Typescript

Gelegentlich ist es erforderlich, auf der Webseite mit minimalem Code Interaktivität zu implementieren, um die Benutzerfreundlichkeit zu verbessern. Dies kann beispielsweise erforderlich sein, um eine Animation zu starten, sobald der Benutzer einen bestimmten Bereich gescrollt hat, oder um ein Kontaktformular bereitzustellen, das die Eingabefelder im Voraus auf Fehler validiert und die Nachricht an einen Server überträgt. Für solch einfache Anwendungsfälle genügt es, kleine Skripte in Javascript/Typescript zu schreiben, ohne dabei auf Bibliotheken oder Frameworks zurückzugreifen

Markdown

Die Blogeinträge sind in der Auszeichnungssprache Markdown verfasst, einer Sprache, die es einfach macht, Texte zu formatieren, Bilder einzufügen, Listen zu generieren, Tabellen zu erstellen und viele weitere Formatierungen für das Web zu nutzen – Aspekte, die uns aus Microsoft Word bekannt sind. Markdown ermöglicht eine unkomplizierte Formatierung von Text für das Web durch die Verwendung von Steuerelementen, die sowohl für den Menschen als auch für Maschinen leicht lesbar sind. Es ist dabei nicht erforderlich, HTML oder CSS zu verwenden, um den Text zu formatieren. Ein Vorteil besteht darin, dass Markdown auf nahezu jeder Plattform verwendet werden kann und somit problemlos importiert und exportiert werden kann. Diese Eigenschaft macht es ideal, Beiträge wie diesen mit minimalem Aufwand zu verfassen

TailwindCSS

Die Webseite nutzt für das Styling das beliebte CSS-Framework TailwindCSS, das als Utility-First-Framework bezeichnet wird und auf Modularität und Flexibilität setzt. TailwindCSS bringt vordefinierte CSS-Klassen mit, die in HTML und nicht in einer CSS-Datei eingebettet werden. Dies erlaubt ein sehr schnelles Stylen von HTML-Elementen. Warum habe ich mich gegen das weitverbreitete CSS-Framework Bootstrap entschieden? Zum einen, weil die meisten Webseiten mit Bootstrap und vordefinierten Themes ein ähnliches Styling aufweisen, und zum anderen, weil ich gerne einen flexiblen Ansatz verfolge

DaisyUI

DaisyUI ist eine komponentenbasierte Bibliothek, die auf Tailwind CSS aufbaut. Als Plugin verfügbar und einfach zu integrieren, arbeitet DaisyUI mit semantischen Klassen, um HTML-Elemente schnell und einfach nach Belieben zu stylen. Um nicht das Rad neu erfinden zu müssen, wenn es um das Styling von HTML-Elementen geht, bringt DaisyUI zusätzliche Komponenten mit, die flexibel an Tailwind CSS angepasst werden können. Der Grund für die Entscheidung, diese beiden Kombinationen gegenüber dem weit verbreiteten CSS-Framework Bootstrap den Vorzug zu geben, liegt darin, dass ich den Utility-First-Ansatz von Tailwind CSS bevorzuge

Cloud-Hosting mit Azure

Beim Verfassen dieses Blogbeitrags habe ich mir Gedanken darüber gemacht, wo die Webseite am besten gehostet werden sollte. Angesichts einer Vielzahl verschiedener Hosting-Anbieter war es zunächst keine leichte Aufgabe, einen geeigneten Dienstleister zu finden. Welche Faktoren sind wichtig, und worauf lege ich besonders Wert? Welche Entwickler-Integrationen stehen zur Verfügung, und wo befinden sich die Server? Diese und andere nicht minder bedeutende Fragen verschafften mir einen Überblick und schränkten die Auswahl stark ein. Die Entscheidung fiel schließlich auf Azure. Als erfahrener Webentwickler mit fundierten Kenntnissen in der Cloud-Technologie bietet Azure mit Diensten wie Static Web App, CDN und DevOps eine ausgezeichnete Möglichkeit, statischen Content – der die Webseite hauptsächlich ausmacht – schnell, sicher und global bereitzustellen

Abschließende Gedanken

Mein erster Beitrag wurde etwas länger als ursprünglich gedacht, aber das passiert eben, wenn man an einer Sache arbeitet. Das anfangs noch verschwommene Bild wird klarer, je länger und intensiver man daran arbeitet. Trotzdem gibt es noch viel zu tun. Ein Beispiel wäre, die Themen, die in diesem Beitrag kurz als Überblick beschrieben wurden, weiter zu vertiefen und ihnen eigene Beiträge zu widmen

Meine Webseite ist die tägliche Bemühung besser zu werden, zu wachsen und kontinuierlich Neues dazuzulernen. Von der Planung bis zur Veröffentlichung dieser Webseite und die Blogeinträge, die darauf warten geschrieben zu werden, und der Wunsch, als Webentwickler einen Beitrag zu leisten, bildet dies den Grundstein und die Motivation, mein Ziel als Unternehmer zu verwirklichen