Ich weiß, ich habe zwar schon einen Post bzgl. Huebi Charity 9 gemacht, aber in jenem ging es primär um einen bösen Bug und dass ich Code lieber vorher testen sollte. In diesem hier soll es darum gehen, was ich an Features und Änderungen seit dem Verwenden von Twig gemacht und daraus gelernt habe. Hier werde ich nicht nur Dinge ansprechen, die bis zum Huebi Charity 9 passiert, sondern was ich noch danach gemacht habe. Ja, mir ist selbst bewusst, wie blöd das eigentlich ist, große Änderungen kurz nach dem jährlichen Event zu machen, aber... Ich hatte halt bock drauf.

Spendenempfänger

Eine Sache, die ich schon etwas länger Interessant für das Dashboard fand, war eine Liste mit allen Spendenempfängern pro Huebi Charity Event. Noch bevor die Empfänger für dieses Jahr genannt wurden, hatte ich damit dann tatsächlich angefangen. Schwierig hier waren zwei Dinge: Die Daten sammeln und die Daten anzeigen.

Sammeln war dementsprechend schwierig, weil ich das primär nur durch die YouTube Suche finden konnte. Im Wiki zu Huebi stehen zwar die Spendenzahlen (mit Verweis auf meine Webseite, yay! ❤️), allerdings nicht die Ziele. Dementsprechend war das Teilweise echt Rätselraten, was jetzt richtig ist und was nicht. Könnte ich Huebi nicht einfach nach den Empfängern fragen? Sicherlich, aber wo wäre da denn der Spaß? 😃 (Okay, falls hier tatsächlich etwas falsch ist, kann man ja einfach bescheid geben und ich kanns anpassen.)

Das Anzeigen der Daten war... lustig. Ich war mir die ganze Zeit unsicher, wie man das vernünftig Darstellen soll. Ich hatte zwischenzeitlich eine einfache nicht-geordnete Liste. Jetzt, nach dem Live-Event, ists allerdings eine Tabelle. Sieht finde ich deutlich besser aus.

Neuladen der Seite

Da das Spendendashboard immer mehr auf dynamische Widgets basiert, habe ich die Entscheidung getroffen, dass, während das Live-Event läuft, die Seite nicht mehr nur die Spendensumme alle 15 Minuten aktualisiert. Ich wollte, dass die ganze Seite komplett neulädt, eben damit bestimmte Widgets o.Ä. auftauchen können.

Das hätte man jetzt natürlich einfach mit etwas JavaScript Code lösen können, aber... meh, kein Bock. Also habe ich mich mal umgeschaut, ob es nicht eine andere Lösung gibt, die kein JavaScript braucht. Siehe da: Es gibt eine!

<meta http-equiv="refresh" content="900">

Das hier ist eine Browser-Native Möglichkeit, eine Webseite automatisch neuzuladen. Sie ist auch in jedem Browser kompatibel, von daher... warum nicht einfach nutzen?

Klar, man sollte die Zeit nicht zu hoch haben, aber ich denke, 15 Minuten ist jetzt nicht zu schlimm. Erst recht, wenn die Seite sowieso sehr schnell lädt.

Stream-Highscore

Während des Livestreams dachte ich mir, dass es doch lustig wäre, wenn man sehen könnte, welcher Stream bisher der mit der höchsten Spendensumme war. Klar, das kann man zwar schon im Spendenverlauf sehen, aber ich dachte mir, dass man das doch noch etwas deutlicher darstellen könnte. Ja, mir ist klar, dass Huebi kein Fan von Vergleichen dieser Art ist, weshalb ich versucht habe, das so subtil wie nur Möglich zu machen. Falls Huebi das hier liest: Sorry ^^'

Ich habe also die Berechnung im Backend hinzugefügt, und als Visualisierung eines Highscores dachte ich würde ein Pokal passen.

Ich finde das ist Subtil genug und dennoch ein ganz cooles Zeichen a la "Wir haben es geschafft!".

Huebis Reaktion

Ab hier gab es dann keinen weiteren Fortschritt bis zum Ende des Streams. Allerdings hat es mich gefreut, dass Huebi tatsächlich mal wieder auf das Spendendashboard geschaut, danke gesagt und mich gelobt hat. Hier mal zwei Clips davon:

Als ich das gesehen hatte, war ich tatsächlich ultra happy. Ich hatte ernsthaft nicht damit gerechnet, nachdem paar Leute meinten, dass Huebi das Spendendashboard eher ungerne anschauen wollte, da er keine Lust auf Vergleiche hat. Dahingehend war das definitiv eine positive Überraschung. Danke Huebi!

Allerdings war anscheinend nicht nur Huebi vom Dashboard begeistert. Ich kann nämlich sehen, dass mein Dashboard innerhalb von zwei Tagen tatsächlich ungefähr ein tausend Mal auf Google angeklickt wurde. (Statistiken von Google Search - keine Sorge, ich tracke niemanden auf der Seite!)

Interessanterweise hat mein Blog dadurch auch einen kleinen Boost bekommen - 100 Klicks auf Google. Von daher... Hallo an alle, die mich durch Huebi Charity entdeckt haben! 👋

Neue Projektstruktur

Da das Huebi Charity Spendendashboard u.A. auch mein Lernprojekt ist - und ich auch Professionell mit PHP arbeite - dachte ich mir, dass es vielleicht interessant wäre, die komplette Projektstruktur etwas zu moderinisieren. Hier hat mir mein guter Freund @Kitsune_Yasu geholfen. Ohne ihn hätte ich das sehr wahrscheinlich nicht so gut geschafft.

So, was wurde gemacht... Ich nutze jetzt noch viel mehr Composer. Also keine imports / require's mehr, sondern alles per use SteffoSpieler/xyz/xyz. Somit musste alles eine eigene Klasse sein. Oh, und ich nutze jetzt eine .env als Config-Datei. Generell sind wir durch jede Datei gegangen und haben das alles mal etwas aufgeräumt. So genau kann ich das nicht beschreiben - da kann ich eher empfehlen, mal in den Commit zu schauen.

Bessere CLI Commands

Auch ein Punkt, der durch die neue Projektstruktur verbessert wurde: Die CLI Commands sind jetzt richtige Symphony/Console Commands. Das bedeutet, dass es jetzt unter anderem deutlich bessere Argument-Möglichkeiten gibt.

Jetzt kann ich sogar mit einem Command sehen, welche Commands es alle in diesem Projekt gibt!

Console Tool

Usage:
  command [options] [arguments]

Options:
  -h, --help            Display help for the given command. When no command is given display help for the list command
      --silent          Do not output any message
  -q, --quiet           Only errors are displayed. All other output is suppressed
  -V, --version         Display this application version
      --ansi|--no-ansi  Force (or disable --no-ansi) ANSI output
  -n, --no-interaction  Do not ask any interactive question
  -v|vv|vvv, --verbose  Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

Available commands:
  completion                          Dump the shell completion script
  help                                Display help for a command
  list                                List commands
 huebi-charity
  huebi-charity:create-all-snapshots  Create all snapshots for all streams from saved donations.
  huebi-charity:create-snapshot       Create a snapshot for the Huebi-Charity Stream

Finde ich sehr cool und hilfreich. 😄

Sitemap

Etwas, was ich für Google hinzugefügt habe, damit die vielleicht endlich mal besser meine Seite crawlen können, ist eine Sitemap. Dafür wollte ich eigentlich ein Composer Package nutzen, welches die XML für mich generiert, allerdings habe ich keins gefunden, welches meine Anforderung erfüllt: Die Sitemap muss auf dem Server live generiert werden. Der Grund dahinter ist relativ einfach... Ich möchte mir keine Sorgen um die Sitemap machen müssen. Wenn es einen neuen Stream gibt, möchte ich die nur in die Datenbank eintragen müssen und schon ist der Eintrag in der Sitemap da. Einfach.

Spannend hier ist, dass ich für die Sitemap sogar ein eigenes Sitemap Style Sheet erstellt habe, damit die Sitemap auch für den Endbenutzer gut aussieht. Hier habe ich einfach das Style Sheet von der Ghost Sitemap übernommen und dann auf meine Bedürfnisse angepasst.

Falls du jetzt die Sitemap selbst anschauen möchtest: https://huebi-charity.steffo.dev/sitemap.xml

Summe nach Abzügen

Ich hatte viel zu lange von meinem Dashboard erwartet, dass es 100% genau die richtigen Daten anzeigt. I mean, wie ich schon geschrieben hatte... die Daten werden sogar für ein Wiki verwendet. Allerdings war das auf längerer Zeit nicht sinnvoll machbar. Am Ende vom Huebi Charity 9 Stream habe ich gemerkt, dass da irgendwie ungefähr 100 € Unterschied zwischen dem Stream-Counter und meinem Dashboard waren. Das ist halt das Problem... Ich hab halt nur die Spenden-Events, während Huebi theoretisch noch andere Dinge mit dem Stream-Counter machen kann.

Auch ein Problem ist, dass letztendlich ja sowieso einiges abgezogen wird (u.A. weil Spenden zurückgezogen werden, und weil Tipeee natürlich Gebühren will). Heißt, meine "Endsumme" ist am Ende gar nicht die echte Endsumme.

Zum ersten Problem habe ich keine wirkliche technische Lösung gefunden. Ich denke mir eben jetzt einfach, dass das Dashboard für einen ungefähren Vergleich zwischen den Streams, sowie für eine leichte Informationsquelle für die Streams da ist. (Der Spendencounter im Stream ändert sich doch sowieso recht schnell, da fällt der Unterschied doch sowieso nicht auf! 😉)

Für die Endsumme habe ich mir allerdings etwas schlaues überlegt: Ich zeige unter der großen Summe noch einen Text mit der Summe nach dem Abzug an. Dieser ist dann der tatsächlich gespendete Wert, dementsprechend kann man sich auf diesen verlassen, dass der wirklich stimmt.

Leider habe ich da aktuell nur den Spendenwert von Huebi Charity 9, weil ich die Summen der vorherigen Jahre nicht mehr finden konnte. Falls ich aber irgendwie an die Daten komme, lässt sich das natürlich schnell nachtragen.

Redesign

Ich war schon länger leicht unzufrieden mit dem Design der Webseite. Irgendwas hatte sich einfach komisch angefühlt, aber ich konnte nicht genau sagen, was es war.

Als ich meine Gedanken auf Mastodon geteilt hatte, hatte mir Slatian einige gute Tipps gegeben.
Kurz zusammengefasst, was ich geändert habe:

• Andere Schriftart verwendet (Open Sans -> Noto Sans)
• Generell bessere Schriftarten
• Generell weniger px hardcoding, sondern eher mit em / rem gearbeitet
• FontAwesome selbst gehostet
• Besseres Design der Tabelle
• Nutzung von h1 und h2, anstatt nur h3.

Idee: Promo-Archiv

Ich hatte noch eine Idee, die ich aber noch nicht wirklich angefangen habe... Man könnte theoretisch noch ein Archiv für Promo-Material der verschiedenen Huebi Charitys anbieten. Huebi Charity 8 und 9 habe ich schon gesichert, aber ich glaube das würde sich eher lohnen, wenn ich für alle Streams das Promo-Material gesammelt habe.

Vielleicht hat da ja noch wer etwas, was ich da dann hinzufügen könnte! ^^

Schlussworte

Das Dashboard hat sich mal wieder viel verändert. Ich habe mehr über Composer gelernt und bin jetzt noch mehr zufrieden mit der Seite! Großes Danke nochmal an jeden, der mir mit der Seite geholfen hat. Und natürlich Danke an Huebi, dass ich das überhaupt machen kann - ist absolut nicht selbstverständlich! ^^