Web-Projekte

Ich bin in den 90ern groß geworden. Meine ICQ Nummer kenne ich immer noch auswendig. Logisch haben wir damals Webseiten gebaut. Und was für welche. Und wir kannten nur einen, der einen Server hatte, der PHP konnte. Da haben wir dann - eher geduldet als erlaubt - die php-Skripte und Datenbanken drauf gehostet. Cross-Site-Scripting hatten wir nicht betrieben um jemandem zu schaden, sondern weil wir einfach kein Geld hatten uns selbst richtige Server zu leisten. Und die Domains endeten oft auf .de.vu.

Damit ich - wenigstens ein bisschen - am Ball bleibe, mache ich immer mal wieder ein paar Fingerübungen. Das meiste davon hätte man aber auch (viel eleganter und viel zeiteffizienter) anders lösen können.

Aktive Webprojekte

Folgende Dinge, die ich mal gebaut habe, findet man noch...

FCU Zeitleisten

Die Historie des 1. FC Union Berlin in Balkendarstellung(en). Den Namen "Zeitbalken" habe ich nur genommen, weil die Domain noch frei war. Zeitleiste wäre mir eigentlich lieber gewesen...

https://fcu.zeitbalken.de

Technologie

Warum

Ich bin in dieses Fußball-Ding nach Corona wieder reingerutscht - ich konnte nicht nur Nachrichten aus Politik und Wirtschaft konsumieren, das machte mich depressiv. Und da ich schon zu Regionalliga Zeiten (es muss so 98/99 herum geswesen sein), als der VFC Plauen gegen Union spielte, die Fans und den verein irgendie cooler fand als die schwarz gelben auf dessen Seite ich damals stand, wurde Union mein Herzensverein. Und dann beschäftig man sich eben auch mit der Geschichte des Vereins.

Mein Gehirn kann gut mit Formeln, Zeichnungen und Diagrammen arbeiten. Texte und Tabellen hingegen interpretiert mein Hirn schlecht. Deswegen habe ich für mich Informationen zur Geschichte des 1. FC Union Berlin so zusammengestellt, wie ich diese gut aufnehmen kann.

Dabei interessierten mich inbesondere zeitliche Zusammenhänge - was passierte wann und wer waren die handelnden Personen. Deswegen wählte ich Zeitbalken / Gantt-Charts als Visualisierung.

Ergebnis

Das Ergebnis ist eine typische Webanwendung mit einer GANTT-Chart-ähnlichen Darstellung des Wirkens verschiedener Personen, sportlicher Meilensteine, Ligazugehörigkeiten, etc. Man kann in den Zeitbalkendarstellungen zoomen (da habe ich noch etwa über das gute Zusammenspiel zwischen CSS und Javascript lernen können) und man kann die Zeitbalken - wenn es denn der Browser unterstützt - im Vollbildmodus anschauen. Das war der Kompromiss zwischen "Grid-Layout" bzw. "Responsive-Design" und "ich will möglichst viel Bildscirmfläche für Informationen verwenden, deswegen will ich ja gerade die Zeitbalkendarstellung".

Es fehlen mir natürlich noch ein paar Daten, da suche ich an regnerischen Tagen und ruhigen Abenden noch. Das ist ja der meditative und erkenntnisgenerierende Teil des Projekts.

Good Things Tracker

Ein vollkommen unintegrierter Tracker für alles, was einem wichtig ist mit voller Kontrolle über SEINE Daten.

https://www.goodthingstracker.net/

Technologie

Warum

Ich wollte wissen, wie viele Kilometer ich pro Jahr mit meinen Fahrrädern fahre. Und das konnte ich nicht von meiner Smartwatch ablesen, denn die weiß ja nicht mit welchem Rad ich gerade fahre.

Ergebnis

Herausgekommen ist eine Single Page Application mit Nutzerverwaltung, den typischen Funktionen sich zu Registrieren, E-Mail-Validierung, Login, Saltet Hash zum Speichern des Passworts, Session-Timeout / und Logout sowie der Möglichkeit sich auch wieder abzumelden und all seine Daten zu löschen. Seine "Guten Taten" (z.B. mit dem Fahrrad fahren) kann man natürlich auch tracken und die werden auch aggregiert - wie man es eben haben möchte, auf Wochen-, Monats- oder Jahresebene. Eine Kalenderansicht (wann hat man was gemacht) gibt's auch und einen Avatar kann man mittlerweile auch hochladen - per Drag & Drop, das wollte ich auch immer mal bauen.

Das Frontend besteht auch aus mehreren Modulen, inkl. Lazy-Loading. Und es gibt auch Visualisierungen der getrackten guten Dinge als Balken und Kreisdiagramm (Listen sowieso). Responsive ist der Spaß auch, also sowohl auf dem Handy als auch auf dem Tablet bzw. Computer nutzbar.

Gelernt habe ich dabei eine ganze Menge. Wollte ich ursprünglich doch nur mal was mit Angular machen, habe ich entdeckt, wie weit sich mittlerweile auch PHP Frameworks entwickelt haben (und wie groß selbst die schlanken sind). Ich habe gelernt, wie man Datenbank-Schema-Updates managen kann - denn das muss man zwangsläufig, wenn sich mit der Weiterentwicklung der Anwendung auch die Datenstrukturen weiterentwickeln - und ich habe gelernt wie viel Zeit man in der Formatierung von automatisch versendeten E-Mails versenken kann (und wozu TWIG-Templates und E-Mail Tester wie mailtrap.io gut sind).

Dieses Projekt war auch mein Einstieg in die Code-Verwaltung mit git. Kein Hexenwerk, funktioniert aber wirklich ausgezeichnet. Und ich habe gelernt, dass man selbst für solche kleinen privaten Projekte ein Ticketsystem braucht, insbesondere dann, wenn man nur ab und an daran arbeitet - hier verwende ich die kostenfreie Version der Atlassian Toolchain (Jira + Bitbucket). Ich hatte auch mit dem Mantis Bugtracker herumgespielt. Wenn man allerdings schon einmal mir Jira gearbeitet hat (hatte ich ja im wirklichen Leben bei VW), dann fehlen einem recht schnell die Jira-Features, die der Mantis BT einfach nicht mitbringt. Beim nächsten Projekt werde ich mal linear testen.

Testdatengenerator für pt42

Ein Tool zum generieren von Testdaten.

http://pt42-tdg.riedprojects.net

Technologie

Warum

pt42 ist eine unternehmensinterne Anwendung und ich war damals der IT-Projektleiter. Die Herausforderung bestand darin, Testdaten zu haben mit denen man in einer komplex verzahnten Toollandschaft mit den Schnittstellensystemen zusammen testen kann. Hauptsächlich ging es darum, dass Meta-Daten zu einer Menge von Dateien passen müssen und dass man steuern kann, ob ein valides Datenset, oder ein invalides Datenset erzeut werden soll. Und bei den invaliden Datensets sollte man natürlich steuern können wo der bzw. die Fehler sein sollen.

Die erste Idee war tatsächlich: lass das einen Studierenden machen, der soll ein Excel-Makro bauen. Aber leider hatten wir damals keine Werksstudierenden und - wie immer - war der Zeitdruck so hoch (oder meine Planung so schlecht), dass man den Prozess "ich schreibe eine Stelle aus, finde eine passende Person, erkläre der Person was zu tun ist, begleite den Prozess und haben 12 Monate später das Ergebnis" nicht starten konnte. Also habe ich mich Abends hingesetzt und was mit den Mitteln gebaut, die ich an der Hand hatte.

Ergebnis

Sicherlich ist es unprofessionell, wenn man einen Testdatengenerator auf einem privaten Webspace hostet. Andererseits tut der Testdatengenerator seit 2017 seinen Dienst und wird immer noch für die Erzeugung von Testdaten verwendet.

Im wesentlichen ist es ein modulares PHP Skript, welches XML Vorlagen parst und an entsprechenden Stellen Platzhalten durch Strings ersetzt, die der Nutzer vorher in einer GUI eingegeben hat. Die GUI ist recht straight forward: reines HTML mit bisschen CSS. Wenn JS, dann "Vanilla".

Ich ärgere mich aber wirklich ein bisschen über die vergebene Chance, das nicht als Praktikums- oder Bacherlor-Arbeit herausgegeben zu haben. Man hätte das sicherlich auch so aufsetzen können, dass das Ding auf Servern im Rechenzentrum läuft und jemand hätte daran lernen und ggf. sogar seinen Einsteig bei uns finden können.

übergebene Webprojekte

Projekte, die ich irgendwann mal gemacht habe, die mittlerweile aber in anderen guten Händen liegen...

Webseite der SG Grün-Weiß Mehltheuer e.V.

http://www.sg-mehltheuer.de

Die Seite sieht fast immer noch so aus, wie in den 90ern als ich sie baute. Das war damals noch richtig schlecht "programmiertes" HTML + PHP gemisch (keine Schichtentrennung) mit einer mysql Datenbank hintendran. Das Layout basierte natürlich auf Tabellen und dem magischen 1x1 Pixel großen transparenten GIF. Hier war es auch so, dass die PHP Skripte erst auf einem anderen Server liefen, da der Vorstand des Vereins in den 90er Jahren nicht einsah, dass man mehr als 5 Mark pro Monat für eine Webseite ausgeben sollte. Es mussten ja Kredite bedient werden - wir hatten die Kegelbahn neu gebaut - und das Internet war eher was für Freaks (Kegeln ja nicht - grins).

Mittlerweile ist das technisch besser aufgestellt - Stefan macht da nen super Job. Und es gibt so nette Sachen wie einen Geburtstagskalender, PDF Downloads von Artikeln und einen Livestream.

Webseite des Refugium Flüchtlingshilfe e.V. Braunschweig

https://www.refugium-braunschweig.de/

Die jetzige Seite hat nichts mehr mit dem zu tun, was ich 2012 mal gebaut hatte. Damals war die Aufgabe eine 90er Jahre Homepage auf Wordpress neu aufzusetzen. Mittlerweile ist die Seite nochmals professioneller Überarbietet worden und auch die Verein hat sich verändert und hat sein Aufgabenprofil geöffnet. Sehr schöne Arbeit, die da gemacht wird.

ehemalige Projekte (RIP)

Und dann hatte ich noch zwei Projekte während des Studiums bei denen ich sehr viel lernte. Leider gibt es die Seiten nicht mehr. Bei beiden handelte es sich im Web-Shops. Einer für einen Computerladen in Chemnitz (ChemComp) und einer für Designer Mützen aus Leipzig (Cop Copine) - später wurden da aus Mützen auch andere Kleidungsstücke.

Letzterer ging leider nie richtig produktiv, aber da steckte von allen Seiten ganz viel Engagement (und - jedenfalls meinerseits - sehr wenig Gewinn) drin.