Es handelt sich um einen schreibgeschützten Client für 4chan (https://4chan.org), der darauf ausgelegt ist, Threads und Antworten in einem baumbasierten Format anzuzeigen.
Ich finde die Art und Weise, wie 4chan Antworten auf Threads organisiert, sehr verwirrend und wenig hilfreich bei der Bestimmung des Gesprächsflusses. Im 4chan-Webclient werden Antworten in einer flachen Liste in der Reihenfolge angezeigt, in der sie ursprünglich gepostet wurden.
Je mehr Antworten ein Thread erhält, desto natürlicher ist es, dass sich mehrere Konversationen in Form von Antwortketten bilden. Von hier aus wird jede weitere Ergänzung der Kette einfach zur großen chronologischen Liste hinzugefügt.
Das bedeutet, dass Sie beim Scrollen durch diese Liste auf Beiträge aus mehreren Antwortketten stoßen, die wenig bis gar nichts miteinander zu tun haben und ständig miteinander verwoben sind, was Sie dazu zwingt, ständig den Kontext zu wechseln und sorgfältig zu überprüfen, welche Kette die Antwort ist tatsächlich antwortet, um mit dem Gespräch Schritt zu halten.
Alles in allem ist es ärgerlich.
Aus diesem Grund gibt es dieses Projekt – es ist jetzt sehr einfach, der Antwortkette zu folgen, weil sie tatsächlich richtig angezeigt wird! Antworten auf einen Beitrag werden zu dessen untergeordneten Beiträgen und werden eine Ebene tiefer angezeigt. So strukturiert auch Reddit seine Kommentare, und ich glaube, dass es sich um ein recht intuitives System handelt, das die Benutzererfahrung um das Zehnfache verbessert.
Die App ist in Svelte geschrieben und läuft fast ausschließlich clientseitig, wobei Nginx als CORS-Proxy für die API-Server von 4chan verwendet wird. Sie können einen Nginx-Container ausführen, der sowohl die App hostet als auch als CORS-Proxy fungiert, wodurch er sehr kompakt und einfach bereitzustellen ist.
Die App ist einschließlich aller HTML-, JS- und CSS-Assets etwa 38.43 KB
groß. Mit Gzip schrumpft es auf insgesamt 14 KB
. Die Erstellung erfolgt durch das Vite-Build-System und Typen werden im Code mit TypeScript erzwungen.
Bilder von Threads werden immer dann geladen, wenn sie in die Ansicht des Browsers gescrollt werden, um Spam-API-Aufrufe an die 4chan-API zu verhindern. Der Nginx CORS-Proxy fügt jeder Anfrage außerdem X-Forwarded-For
und X-Real-IP
Header hinzu, um den wahren Ursprung der Anfrage anzuzeigen.
Um Treechan auszuführen, benötigen Sie Docker und Git. NodeJS muss nicht auf dem Host installiert werden, da der Build-Prozess zu Ihrer Bequemlichkeit vollständig in Containern abläuft.
So überprüfen Sie, ob Docker installiert ist:
$ docker -v
Docker version 20.10.21, build baeda1f82a
$ git -v
git version 2.38.1
Die Docker- und die Git-Version müssen nicht übereinstimmen. Stellen Sie lediglich sicher, dass Sie über etwas Aktuelles verfügen.
Jetzt müssen Sie das Repository mit Git klonen. Dies ist wichtig, damit das Build-Skript ausgeführt werden kann. Laden Sie keine ZIP-Datei von GitHub herunter!
$ git clone --depth=1 https://github.com/xxcodianxx/treechan.git
Jetzt können Sie einfach das mitgelieferte run.sh
-Skript verwenden und es wird Treechan für Sie installieren und ausführen.
$ ./run.sh
Abgesehen von den Netzwerk-Downloadzeiten ist die Installation extrem schnell (ca. 2 Sekunden).
Standardmäßig läuft der Server auf Port 8080
, dies kann jedoch oben in der Datei ./run.sh
geändert werden.
Herzlichen Glückwunsch, jetzt läuft Treechan. Wenn Sie dies auf Ihrem lokalen Computer getan haben, können Sie jetzt http://localhost:8080 besuchen und genießen.
Wenn Sie dies auf einem Server getan haben, ersetzen Sie einfach localhost
durch die IP Ihres Servers. Denken Sie daran, Port 8080
oder den von Ihnen gewählten Port weiterzuleiten.