Weiter gehts mit neuem Design

Der letzte Beitrag liegt lange zurück. Neben dem Rennradfahren verbinde ich mit dem Blog aber auch das Interesse an Web-Development und UX-Design. Für die nahe Zukunft habe ich mir vorgenommen, dem Projekt wieder etwas mehr Aufmerksamkeit zu widmen. Weil das Wetter in diesem Winter hierzulande sowieso eher nass und ungemütlich ausfiel, beschloss ich der Seite zuerst einen neuen Anstrich zu verpassen. Im Folgenden geht es daher etwas weniger ums Radfahren als sonst. 

Online seit 2019

Zu Beginn lag der Fokus für mich eher auf der Umsetzung der Funktionalitäten wie die Schnittstelle zu Strava um die Touren interaktiv präsentieren zu können. Nach und nach erweiterte ich die bestehenden Features. Die Google Map erhielt Fotos, Segmente und Wetterdaten, Ladezeiten wurden verbessert und es wurde an der Suchmaschinenoptimierung getüftelt. 

Nach den ersten Beiträgen folgte eine erste Überarbeitung des Designs. Mit dem Fotoraster auf der Startseite wollte ich mich von anderen Blogs absetzen. Das Farbschema und die Darstellung des Logos wurden geändert und ich setzte mehr auf eine Gestaltung in dunklen Farben. 

Zwei Jahre später hatte ich mich daran allerdings "satt gesehen" und es war Zeit für ein paar neue Ansätze. Wichtig war mir unter anderem, dass die Fotos noch größer dargestellt werden können und die Website in verschiedenen Scroll-Positionen cool aussieht. Ein wenig störend war auch das flache Format des Titelbereichs der Artikelansicht - besonders auf großen Screens. Es erschwerte zudem die Auswahl eines geeigneten Motivs.

Ein paar Pixel schubsen

Im Gegensatz zu früher zieht sich der Darkmode nun konsequenter durch den Entwurf, wodurch optisch mehr Platz entsteht. Die Module der Sidebar fügen sich damit besser in das Layout ein. Auch die Schriften sind in Bezug auf Größe, Schnitt und Schriftfarbe optimiert. Dabei verzichte ich nach wie vor auf CSS Fonts von Google und Co. Ich finde es schlichtweg nicht notwendig und nebenbei spart es auch etwas Ladezeit. Da ich keinen Klickdummy benötige, nutze ich einfach Indesign zum entwerfen. Indesign ist natürlich nicht die ideale Wahl, es reicht für den Zweck aber völlig aus. 

Ein Blick ins Backend (mehr für die Nerds unter euch)

Die Seite basiert auf dem Joomla CMS. Ich arbeite schon länger mit dem System und es gibt mittlerweile einige Gründe, warum ich es gerne nutze. 

Eine Stärke von Joomla ist die saubere Basis, die zum einen viele wichtige Funktionen mit sich bringt und zum anderen sehr gut erweiterbar ist. Dabei unterscheiden sich eigene Erweiterungen technisch gesehen nicht von den Basiskomponenten. Dadurch wird direkt eine gewisse Flexibilität der Basisklassen sichergestellt. Die Erweiterungen sind nach einem Pattern (Model, View, Controller) angelegt. Mittels CLI oder eines Component-Creators im Web hat man sehr schnell eine funktionelle Basis erstellt und hat mehr Zeit für den entscheidenden Code. Durch das festgelegte Pattern ist auch das Arbeiten mit fremden Extensions in der Regel unkompliziert. Dabei profitiert man von den Kernfunktionen des Systems wie User/Rechtverwaltung, Mehrsprachigkeit, Caching, Routing, Webservices, Templateengine inkl. Formularfelder und mehr. Hinzu kommt das aufgeräumte Backend, das sich ebenfalls anpassen lässt. 

Es ist also ideal, wenn man viele Funktionen selbst programmieren möchte bzw. muss. Dabei sind wir auch gleich bei den Nachteilen. Viele fallen mir zwar nicht ein, aber für Joomla ist die Anzahl an kostenlosen Extensions eher klein. Ich denke der größte Konkurrent in diesem Bereich ist Wordpress, für das einfach ein größeres Angebot existiert. Es kommt eben immer auf den Anwendungsfall an. 

Backend Ansicht: Eigene Ansicht zur Beitragsbearbeitung

Im Backend nutze ich eine selbst erstellte Komponente, welche mir die Authentifizierung zu Strava erlaubt und die eine individuelle Maske zum Erstellen der Beiträge bereithält. Hier werden zum Großteil Standardfelder verwendet. Eine Ausnahme bildet zum Beispiel das selbst erstellte Feld zur Auswahl der Strava-Aktivität(en). 

Nach dem Speichern werden die Daten der im Beitrag ausgewählten Aktivitäten angefragt. Die Strava-Daten enthalten unter anderem Streams, die zum Beispiel Koordinaten, Höhenmeter oder den Zeitstempel enthalten. Im Prinzip sind es einfache Arrays, die man in drei verschiedenen Auflösungsstufen anfordern kann. Für das Anfordern der Wetterdaten wähle ich z.B. 5 Messpunkte aus, die auf der Strecke verteilt liegen. 

Durch die Kombination der Streams kann ich bestimmen, wann ich mich an welcher Position befand. Mit diesen Informationen wird eine Anfrage an die open wheather Schnittstelle (RIP Darksky) generiert und die entsprechenden Wetterdaten empfangen. Zum Schluss entferne ich unnötige Daten, die ich nicht auf meiner Seite anzeigen möchte und speichere alles in der eigenen Datenbank. Nach Vollendung des Beitrags erfolgt der weitere Abgleich zu Strava mithilfe eines Cronjob stündlich, um zum Beispiel die Anzahl der Kudos, oder Fotos, welche ich erst später via Strava hinzugefügt habe zu aktualisieren. Dieser Abgleich aktualisiert auch die allgemeinen Strava-Statistiken, die im offcanvas-Bereich untergebracht sind.   

Google PageSpeed Insights

Anschließend wird auch die gesamte Seite noch ein Mal generiert und in einem Joomla Cache gespeichert. Die Anzeige und Steuerung der Karte und Marker erfolgt mit ein bisschen Vanilla Javascript, was für diesen Zweck gerade noch ausreichend ist. Auch die GPX-Datei zu den Aktivitäten wird aus den Strava Aktivitätsdaten generiert und zum Download bereitgestellt.  

Zusätzlich kann ich auch noch weitere Bilder in einer Galerie unterbringen. Für Bilder innerhalb des Contents sorgt ein eigenes Plugin, das die Verwendung von Shortcodes erlaubt. Alle Bilder hinterlege ich in ausreichend hoher Auflösung. Eine eigene Template-Klasse erzeugt skalierte Alternativersionen der Bilder für Mobilgeräte inklusive WebP-Format quasi on the fly. Dadurch sind auch die neuen Bildformate im Rahmen des Redesigns kein Problem. 

Ruft man die Website auf, wird nur noch die vorab generierte Version der Seite ausgeliefert, die nahezu ohne Datenbankabfragen und minimaler serverseitiger Ladezeit auskommt, was zu kurzen Zugriffszeiten führt. Die Kommentare werden ebenfalls durch einen weiteren Request nachgeladen. Hier bediene ich mich allerdings einer Third-Party-Extension.

Zur Bereitstellung einer lokalen Entwicklungsumgebung greife ich mittlerweile auf Docker+WSL zurück und ich benutze PHPStorm als Code Editor. Für mich ist es eine geeignete Wahl, denn Docker ist mit WSL2 wesentlich schneller als eine herkömmliche virtuelle Maschine. Bedingt durch verschiedene Apps (z.B. Indesign/Photoshop,Spiele etc.) möchte ich dagegen auch nicht komplett in Linux unterwegs sein. 

Es bleibt nur zu hoffen, dass Strava auch weiterhin die kostenlose Nutzung der Schnittstelle anbieten wird. Wer die letzten Entwicklungen verfolgte, hat vielleicht bemerkt, dass kräftig an der Preisschraube gedreht wurde. Gleichzeitig wurden Zugriffslimits auf die Schnittstelle weiter herabgesetzt. Läuft wohl nicht so bei denen.

Zurück in den Sattel

Gerade meldet sich langsam der Frühling zurück und mit dem neuen Layout habe ich direkt einen zusätzlichen Anreiz für neue Beiträge. Meine letzte Fahrt lief allerdings weniger glücklich, denn ich bin durch eine Bodenwelle vom Lenker abgerutscht und gestürzt. Dabei hatte ich gerade über 30 km/h auf dem Tacho und der Abgang war recht unsanft. Ich hatte aber noch Glück, denn es ist nichts Ernstes passiert. Der Rest verheilt zum Glück schneller als ein Bruch. In diesem Sinne: Passt auf euch auf und bis bald!