Technik

Die Werkzeuge, mit denen Tüpfli baut, nach Kategorien geordnet, jedes mit dem, was es tut und was es für die Menschen ändert, die das Ergebnis nutzen.

Framework

  • Astro (öffnet in neuem Tab)

    Ein Web-Framework, das Seiten schon beim Build zu reinem HTML macht und JavaScript nur dort mitschickt, wo ein Teil es braucht. So bleiben Seiten leicht.

  • React (öffnet in neuem Tab)

    Die Bibliothek von Meta, mit der sich Oberflächen aus Komponenten bauen lassen. Sie passt zu Seiten, die sich wie eine Anwendung verhalten und deren Zustand sich bei der Arbeit ändert.

  • Next.js (öffnet in neuem Tab)

    Ein React-Framework, das Seiten auf dem Server aufbaut und fertig lesbar an den Browser liefert. Dazu kommen Routing und Bildverarbeitung.

  • TanStack Router (öffnet in neuem Tab)

    Ein Router für React-Apps, der jede Adresse und ihre Parameter mit TypeScript prüft. Defekte Links fallen so vor dem Release auf.

Daten

  • TanStack Query (öffnet in neuem Tab)

    Holt Daten vom Server, speichert sie zwischen und frischt sie im Hintergrund auf. Eine App zeigt bekannte Daten sofort und aktualisiert sie, ohne den Bildschirm zu blockieren.

Bedienelemente

  • Base UI (öffnet in neuem Tab)

    Ungestaltete Bedienelemente wie Menüs, Dialoge und Auswahlfelder, mit eingebauter Tastatursteuerung und Unterstützung für Screenreader. Die Gestaltung bleibt frei.

  • React Aria (öffnet in neuem Tab)

    Die Bibliothek von Adobe für zugängliche Bedienelemente, darunter Datumsauswahl und Kalender, angepasst an Sprache und Region.

Icons

  • Lucide (öffnet in neuem Tab)

    Ein quelloffenes Icon-Set in einheitlichem Linienstil. Jedes Icon wird einzeln eingebunden, darum liefert eine Seite nur die Icons aus, die sie zeigt.

Gestaltung

  • CSS (öffnet in neuem Tab)

    Die Sprache des W3C, die im Browser Layout, Farbe, Schrift und Bewegung beschreibt. Modernes CSS übernimmt vieles, wofür es früher JavaScript brauchte.

  • Tailwind CSS (öffnet in neuem Tab)

    Ein CSS-Framework aus kleinen Hilfsklassen, das grosse Oberflächen einheitlich hält. Der Build erzeugt nur die Klassen, die ein Projekt tatsächlich verwendet.

Bewegung und 3D

  • GSAP (öffnet in neuem Tab)

    Eine JavaScript-Bibliothek für genau getaktete, choreografierte Animationen. Sie kann auf die Seiten beschränkt werden, die die Bewegung brauchen.

  • Motion (öffnet in neuem Tab)

    Eine Animationsbibliothek für React und das Web (früher Framer Motion). Sie animiert Elemente, wenn sie ins Bild kommen oder der Scrollposition folgen.

  • Three.js (öffnet in neuem Tab)

    Eine JavaScript-Bibliothek, die 3D-Szenen und -Modelle mit WebGL im Browser darstellt, ohne Plugin.

Sprache

  • TypeScript (öffnet in neuem Tab)

    Die Erweiterung von JavaScript um Typen, entwickelt von Microsoft. Der Compiler findet viele Fehler schon beim Schreiben, bevor Besucher sie bemerken.

Laufzeit und Werkzeuge

  • Bun (öffnet in neuem Tab)

    Eine JavaScript-Laufzeit, die in einem einzigen Werkzeug auch Pakete installiert, Tests ausführt und Code bündelt.

  • Vite (öffnet in neuem Tab)

    Ein Build-Werkzeug und Entwicklungsserver für Web-Apps. Änderungen am Code erscheinen fast sofort im Browser, und für das Release bündelt Vite die App.

Dokumente

  • Typst (öffnet in neuem Tab)

    Ein Satzsystem mit eigener Auszeichnungssprache für Dokumente wie Offerten, Berichte und Briefe. Es erzeugt druckfertige PDFs und kann dieselben Markenwerte lesen wie eine Website.

Hosting

  • nginx (öffnet in neuem Tab)

    Ein quelloffener Webserver, der Dateien ausliefert, Sicherheits-Header und Cache-Regeln setzt und Anfragen an Anwendungen weiterreicht.

  • Vercel (öffnet in neuem Tab)

    Eine Hosting-Plattform, die auf Next.js ausgelegt ist. Sie baut jede Änderung, veröffentlicht sie weltweit und liefert Seiten aus einem Netz nahe beim Besucher aus.

  • Coolify (öffnet in neuem Tab)

    Eine quelloffene Plattform, um Websites, Apps und Datenbanken auf frei gewählten Servern zu veröffentlichen und zu betreiben, statt in der Cloud eines Anbieters.

Auswertung

Messung

  • Lighthouse (öffnet in neuem Tab)

    Das quelloffene Prüfwerkzeug von Google, das eine Seite in den Kategorien Leistung, Barrierefreiheit, Best Practices und SEO prüft und jeden Bereich von 0 bis 100 bewertet.