Wie wir unsere Website selbst entwickelt haben: Unsere Entscheidungen und Erfahrungen

Über unsere Website

Unsere Website ist mehr als nur eine digitale Visitenkarte. Es ist auch ein Ort, an dem wir unsere eigenen Ansprüche an uns selbst und unsere Arbeit widerspiegeln. Daher haben wir uns entschieden, unsere Website selbst zu entwickeln. In diesem Blogartikel möchten wir euch einen Einblick in unsere Entscheidungen und Erfahrungen geben. Erfahrt, warum wir uns für SvelteKit, Tailwind CSS und Vercel entschieden haben und wie wir unsere Website entwickeln.

Perfect Score dank der richtigen Technologie

Unsere Website ist schnell und performant. Das zeigt sich auch in den Ergebnissen des Google Lighthouse-Tests. Wir haben einen Perfect Score in allen Kategorien erreicht: Performance, Accessibility, Best Practices und SEO. Hier einmal kurz die Kateogrien im Überblick:

• Performance: Unsere Website lädt schnell und ist sofort interaktiv. Dabei werden eine Reihe an Messwerten ermittelt, die die Performance der Website bewerten. Beispielsweise die Zeit, die vergeht, bis die Website interaktiv ist, oder die Zeit, die vergeht, bis die Website vollständig geladen ist.
• Accessibility: Unsere Website ist barrierefrei und einer möglichst großen Anzahl an Menschen zugänglich. Dazu gehört beispielsweise, dass die Website auch von Screenreadern vorgelesen werden kann oder dass die Website auch für Menschen mit Sehschwäche gut lesbar ist.
• Best Practices: Unsere Website folgt den Best Practices der Webentwicklung und ist sicher und zuverlässig. Darunter fällt beispielsweise die Verwendung von HTTPS oder die Vermeidung von unsicheren Ressourcen und veralteten Technologien.
• SEO: Unsere Website ist suchmaschinenoptimiert. Das bedeutet, dass sie von Suchmaschinen wie Google gut gefunden und indexiert werden kann. Dazu gehört beispielsweise die Verwendung von sprechenden URLs oder die Verwendung von Meta-Tags.

Wichtig ist: Die Werte können sich ändern, da sie von vielen Faktoren abhängen. Unteranderem auch auf die Internetverbindung des Nutzers und die Hardware des Geräts. Aber wir sind stolz darauf, dass wir einen Perfect Score erreicht haben und werden weiterhin daran arbeiten, unsere Website zu optimieren.

Der TechStack

Für die Entwicklung unserer Website haben wir uns für SvelteKit entschieden, insbesondere die neueste Version Svelte 5.

Und besser könnten wir es nicht ausdrücken. Die Entwicklung mit Svelte und SvelteKit ist schnell und effizient. Das bedeutet, dass wir uns auf das Schreiben von HTML, CSS und JavaScript konzentrieren können, ohne uns um den Zustand und die Reaktivität kümmern zu müssen. Svelte übernimmt das für uns und generiert effizienten und performanten Code.

Während wir mit Svelte das Frontend entwickeln, nutzen wir Sveltekit für das Backend. Sveltekit ist ein Framework, das auf Svelte aufbaut und uns dabei hilft, unsere Website zu strukturieren und zu organisieren. Es bietet uns eine Reihe von Funktionen, die uns die Arbeit erleichtern, wie zum Beispiel das Routing, das Server-Side-Rendering und die Integration von Serverless Functions. Mit Sveltekit können wir unsere Website in einzelne Komponenten und Seiten aufteilen und so den Code übersichtlich und wartbar halten. Auch hier besticht SvelteKit mit seiner Performance und Effizienz.

Mit Tailwind CSS haben wir ein mächtiges Werkzeug für das Styling unserer Website. Tailwind ist ein Utility-First CSS-Framework, das es ermöglicht, direkt im HTML-Code zu stylen, ohne separate CSS-Dateien schreiben zu müssen. Das macht es auch für Entwickler ohne tiefgehende CSS-Kenntnisse einfach, ansprechende Designs umzusetzen. Außerdem ist Tailwind CSS sehr flexibel und erweiterbar, so dass wir unsere eigenen Komponenten und Klassen definieren können.

Für das Hosting nutzen wir Vercel. Vercel ist eine Cloud-Plattform für statische Seiten und Serverless Functions. Sie bietet eine herausragende Developer Experience mit blitzschnellen Deployments. Änderungen an unserer Website sind innerhalb von Sekunden live, und dank der automatischen Deployments für jede Branch können wir neue Features und Inhalte schnell testen und bereitstellen. Übrigens: Der Erfinder von Svelte und SvelteKit, Rich Harris, arbeitet heute bei Vercel.

Unser Entwicklungsablauf

Wir arbeiten mit zwei Haupt-Branches: dem Main-Branch, der den aktuellen Stand der live Website repräsentiert, und dem Beta-Branch, der unsere neuesten Entwicklungen enthält. Wenn wir an neuen Features oder Blogartikeln arbeiten, erstellen wir einen neuen Branch vom Beta-Branch.

Dank Vercels automatischer Deployment-Funktion wird jeder Branch automatisch gehostet. Dies ermöglicht es unserem Team, Änderungen online zu reviewen und Feedback zu geben, bevor sie in den Beta- oder Main-Branch gemergt werden. Dieser Workflow beschleunigt unseren Entwicklungsprozess und fördert die Zusammenarbeit im Team.

Dank GitHub sind wir auch gut aufgestellt was Versionierung und Zusammenarbeit angeht. Jeder Entwickler kann an der Website arbeiten und Änderungen einreichen. Diese werden dann von anderen Entwicklern überprüft und bei Bedarf verbessert. So stellen wir sicher, dass unser Code qualitativ hochwertig und fehlerfrei ist. In ca. einem Jahr haben wir 267 Commits, also Änderungen am Quellcode, vorgenommen.

Wie bereits erwähnt, bietet Vercel auch Web Analytics an. Das besondere daran ist, dass die Daten anonymisiert sind und keine Cookies verwendet werden. Das bedeutet, dass wir keine personenbezogenen Daten sammeln und die Privatsphäre unserer Nutzer respektieren. Wir können sehen, wie viele Besucher unsere Website hat, woher sie kommen und welche Seiten sie besuchen. So wissen wir beispielsweise, dass die meisten unserer Besucher aus Deutschland kommen und das unser Blog meist auf mobilen Geräten gelesen wird.

Fazit

Für uns war die Technologiewahl ein wichtiger Schritt, um unsere Website zu entwickeln. Mit SvelteKit, Tailwind CSS und Vercel haben wir eine Website entwickelt, die schnell, performant und sicher ist. Wir wissen aber auch, dass wir an einigen Ecken noch besser werden können. Deshalb arbeiten wir ständig daran, unsere Website zu optimieren und zu verbessern. Wir freuen uns auf euer Feedback und eure Anregungen. Wenn ihr Fragen oder Anregungen habt, schreibt uns gerne eine E-Mail.