Und dann taucht das nächste Bootcamp auf. Alles mit KI. Alles automatisiert. „Warum noch selbst programmieren, wenn das System den Code für dich schreibt?“

Ich bin ehrlich gesagt ein wenig hin- und hergerissen.

Einerseits faszinieren mich die Möglichkeiten. Die Tools sind beeindruckend, und es wäre naiv, das zu ignorieren.

Andererseits frage ich mich, ob wir gerade dabei sind, uns selbst aus der Gleichung zu nehmen. Ob wir noch bauen – oder nur noch prompten?

Da klingt der Satz

Wenn du nicht der KI-Revolution beitrittst, wirst du überflüssig und zurückgelassen.

plötzlich nicht mehr ganz so motivierend.

Vielleicht ist genau das die eigentliche Frage: Wie viel KI ist sinnvoll? Und wo beginnt sie, unsere eigene Kompetenz zu ersetzen?

Noch habe ich ein paar Tage Zeit, bis das neue Bootcamp startet. Dennoch habe ich mich noch nicht entschieden.

Ich tendiere allerdings dazu, teilzunehmen – allein um zu sehen, wie die KI-Integration dort tatsächlich aussieht und um einschätzen zu können, ob das wirklich substanziell ist oder doch eher gut verpacktes Marketing.

Ich will verstehen, bevor ich automatisiere. Ich will bauen können, bevor ich delegiere. Wenn KI ein Werkzeug ist, dann will ich es führen – nicht von ihm geführt werden. Vielleicht ist genau das die Kompetenz, die in Zukunft zählt.

Mit dem Release von Angular 20 haben die Entwickler weit mehr eingeführt als das übliche Framework-Housekeeping. Das Team treibt einen klaren Wandel voran: hin zu saubereren Bezeichnungen, domänenorientierten Strukturen und einer insgesamt moderneren Projektorganisation.

Das habe ich selbst erlebt: Nachdem ich meine Tools auf Angular 20 aktualisiert und ein neues Projekt mit der Angular CLI erstellt hatte, fiel mir in VS Code etwas Merkwürdiges auf. VS Code bot plötzlich keinerlei Autovervollständigung mehr in meinen HTML-Templates für Properties und Methoden, die ich in den zugehörigen TypeScript-Dateien definiert hatte. Sogar der gewohnte „Go to Component“-Link war verschwunden. Mit anderen Worten: Der Editor verstand nicht mehr, dass .html- und .ts-Dateien zusammengehörten — einfach weil das neue Namensschema nicht erkannt wurde.

Die Ursache war banal: Ich nutzte noch eine ältere Version der Angular Language Service Extension. Wenn du mit VS Code arbeitest, stelle sicher, dass Angular Language Service 20.3.3 oder neuer installiert ist. Diese Version unterstützt die neuen Angular-20-Namenskonventionen vollständig und stellt IntelliSense sowie Navigation korrekt wieder her.

Ist das erledigt, funktioniert die Autovervollständigung wieder einwandfrei, und du kannst die neuen Angular-20-Konventionen konsequent nutzen.

Ein klarerer Namensstil

Angular 20 ermutigt Entwickler, sich vom alten Muster zu lösen, bei dem der Dateityp im Dateinamen untergebracht wurde:

1user-profile.component.ts
2auth.service.ts
3highlight.directive.ts

Stattdessen liegt der Fokus nun auf aussagekräftigen, domänenorientierten Namen:

1user-profile.ts
2auth-store.ts
3auth-api.ts
4highlight.ts

Einige Suffixe bleiben — vor allem dann, wenn sie tatsächliches Verhalten oder einen Vertrag beschreiben:

1auth-guard.ts
2currency-pipe.ts
3shared-module.ts

Die Idee ist einfach: Benenne Dinge nach dem, was sie repräsentieren — nicht nach dem Angular-Konstrukt, das sich zufällig darin befindet. Der Code wirkt dadurch leichter und deutlich besser lesbar, insbesondere bei größeren Projekten.

Eine durchdachtere Ordnerstruktur

Angular 20 orientiert sich noch stärker an einer domänengetriebenen Organisation. Statt eines „features“-Ordners mit etwas von allem strukturierst du deine App nach Kontexten.

Ein typisches Setup sieht heute so aus:

1src/
2└── app/
3├── core/
4├── domains/
5└── shared/

core/ – Globale Anwendungslogik

Alles in core gilt app-weit, ist aber nicht fachlich spezifisch: Authentifizierung, Layout-Grundstruktur, Fehlerbehandlung, Konfiguration usw.

Beispiel:

 1core/
 2auth/
 3guards/
 4auth-guard.ts
 5stores/
 6auth-store.ts
 7pages/
 8login/
 9login.ts
10login.html
11login.css

Geroutete Views liegen sauber in einem pages/-Verzeichnis, damit Navigation klar und nachvollziehbar bleibt.

domains/ – Deine eigentliche Fachlogik

Statt eines großen Sammelordners mit lose gruppierten „Features“ teilst du deine Anwendung in fachliche Bereiche:

1domains/
2jobs/
3pages/
4models/
5stores/
6services/
7jobs.routes.ts
8events/
9groups/

Diese Struktur skaliert deutlich besser. Gerade für mich als jemand, der Angular noch lernt, macht sie den Zweck jedes Ordners wesentlich klarer. Jede Domäne kann sich eigenständig weiterentwickeln, und Teams können parallel arbeiten, ohne sich gegenseitig in die Quere zu kommen.

shared/ – Wiederverwendbare, logikunabhängige Bausteine

Alles hier sollte möglichst „dumm“ und generisch sein:

 1shared/
 2components/
 3notification/
 4notification.ts
 5notification.html
 6notification.css
 7pipes/
 8format-date-pipe.ts
 9utils/
10string-utils.ts
11
12```text
13Eine `notification`-Komponente sollte zum Beispiel nicht wissen,
14ob sie eine Sicherheitswarnung
15oder eine Erfolgsmeldung
16aus einer völlig anderen Domäne anzeigt.
17
18## Standalone Components sind der Standard. Nutze das.
19
20Schon vor einiger Zeit eingeführt,
21aber weiterhin relevant:
22
23Seit Angular 17 sind Standalone Components der Standard,
24und Angular 20 setzt diesen Weg konsequent fort.
25Ein modernes Setup sieht typischerweise so aus:
26
27```text
28app/
29app.ts
30app.routes.ts
31app.config.ts

Module sind nur noch nötig, wenn ein spezieller Kompatibilitätsfall es erfordert. Die meisten Projekte profitieren sofort davon, Boilerplate zu reduzieren und Standalone-Komposition vollständig zu nutzen.

Fazit

Angular 20 fühlt sich an wie ein bewusster Schritt hin zu einer saubereren, skalierbaren Architektur — nicht durch starre Regeln, sondern indem der moderne Ansatz zum natürlichen Standard wird. Wenn deine Tools aktuell sind (vor allem der Language Server), verläuft der Umstieg reibungslos und intuitiv.

Ein paar zentrale Punkte

• Nutze bewusst gewählte Dateinamen statt .component.ts oder .service.ts.
• Strukturiere deine App nach Domänen, nicht nach Angular-Konstrukten.
• Halte gemeinsame Bausteine bewusst „dumm“.
• Setze auf Standalone Components — das Ökosystem ist bereit dafür.

Es ist ein guter Zeitpunkt, ein bestehendes Projekt noch einmal zu überprüfen, veraltetes Naming-Chaos aufzuräumen und eine klarere Struktur einzuführen, die auch langfristig trägt.

Viel Freude beim Coden mit Angular 20!

Der Weg zur richtigen Technologie

Ich war sofort von Bun begeistert – schnell, modern, mit einer eleganten All-in-One-Philosophie. Doch auf meinem Uberspace-Host scheiterte jede Bun-Version an einer zu alten glibc. Schade, aber Plan B war schnell gefunden: Deno. Deno versprach Sicherheit und moderne Features. Allerdings war die Kompatibilität mit manchen Bibliotheken hakelig, und ich stieß bei der Integration auf zu viele kleine Hürden. Nach diesen Experimenten landete ich bei klassischem Node.js (mit pnpm). Es ist robust, weit verbreitet und ließ sich auf meinem Host ohne Probleme einrichten. Mit TypeScript und ESM war ich trotzdem nah an einer modernen Entwicklungsumgebung.

Für das Web-Framework fiel die Wahl auf Hono. Es ist klein, schnell und hat eine klare, intuitive API – perfekt für ein Projekt, das keinen Overhead verträgt. Als Template-Engine wählte ich Eta, weil sie minimalistisch ist, eine einfache Syntax bietet und mir volle Kontrolle über die Templates gibt. Für die Datenhaltung experimentierte ich zunächst mit Markdown-Dateien im Dateisystem. Das war simpel, aber unpraktisch, sobald es um dynamische Inhalte oder Metadaten ging. Also wechselte ich zu LowDB, einem JSON-Datei-Store, der sich schnell einbinden ließ und für ein Single-Instance-Projekt wie dieses ideal ist.

Das Design hielt ich mit Tailwind CSS bewusst schlicht. Tailwind ermöglicht es, schnell ansprechende Layouts zu bauen, ohne sich in CSS-Details zu verlieren. Für die Umwandlung von Markdown in sauberes HTML kam Markdown-It zum Einsatz, das zuverlässig und flexibel ist.

Technik Stack

• Runtime: Node.js (ESM + TypeScript) – robust und kompatibel
• Framework: Hono – schlank, schnell, mit klarer API
• Templates: Eta – minimalistisch und leicht kontrollierbar
• Datenhaltung: LowDB – JSON-Datei-Store, ideal für kleine Projekte
• Styling: Tailwind CSS (CLI v4) – für ein sauberes, modernes Design
• Markdown: Markdown-It – für zuverlässige Markdown-zu-HTML-Konvertierung
• Sicherheit: CSRF-Schutz, Rate Limiting, sichere Cookies
• Build/Deploy: tsc, Tailwind CLI, rsync-Deploy mit Backup
• Performance: Statische Assets mit Cache-Headers, minimale JS-Bundles

Herausforderungen und Lösungen

Die größte Herausforderung war, die Balance zwischen Einfachheit und Funktionalität zu finden. Zum Beispiel war die Entscheidung für LowDB nicht trivial: Ich hatte zunächst überlegt, eine richtige Datenbank wie PostgreSQL einzusetzen. Aber für ein kleines Projekt mit überschaubarem Datenvolumen wäre das Overkill gewesen. SQLite schied leider auch aus, weil Uberspace keine Unterstützung aufgrund von fehlenden Bibliotheken bot. LowDB bot die perfekte Mischung aus Flexibilität und Einfachheit, auch wenn ich für größere Projekte vielleicht noch mal umdenken würde.

Sicherheit und Betrieb

Sicherheit war mir von Anfang an wichtig. Sessions werden im Speicher gehalten, was bei einem Server-Neustart zu einem Logout führt – für mein kleines Projekt akzeptabel. Cookies sind sicher konfiguriert (HttpOnly, SameSite, Secure in Produktion), und ein CSRF-Schutz sichert Login- und Admin-Formulare ab. Um Brute-Force-Attacken vorzubeugen, habe ich ein einfaches IP-basiertes Rate Limiting implementiert. Es ist nicht perfekt, sollte für meine Zwecke aber ausreichen.

Der Build-Prozess ist bewusst schlank: TypeScript wird mit tsc kompiliert, Tailwind CSS über die CLI gebaut. Die Artefakte werden mit rsync auf den Server übertragen, mit einem automatischen Backup vor jedem Deploy. Um CSS-Cache-Probleme zu vermeiden, nutze ich Cache-Busting durch Versions-Hashes in den Dateinamen. Das sorgt dafür, dass Nutzer immer die aktuelle Version der Stylesheets laden, ohne dass ich manuell eingreifen muss.

Ausblick: Was kommt noch?

Das Projekt ist jetzt stabil, aber es gibt noch Ideen für die Zukunft. Erst heute habe ich die RSS-Feed Funktion implementiert. Eine Kommentarfunktion wäre auch spannend, aber ich müsste entscheiden, wie ich das ohne großen Verwaltungsaufwand umsetze. Von daher gibt es erst einmal keine Kommentare. Wenn mir jemand etwas schreiben möchte, gibt es genügend Möglichkeiten, dies zu tun. Außerdem spiele ich mit dem Gedanken, Beiträge nach Veröffentlichung automatisiert auch ins Fediverse zu pushen.

Fazit

Aus einer kleinen Idee ist in kurzer Zeit ein stabiler, sicherer Microblog geworden – bewusst schlank gebaut, aber erweiterbar. Hono, Eta und LowDB haben sich als hervorragende Kombi für ein leichtgewichtiges Projekt erwiesen. Die Entscheidung für Node.js und TypeScript hat sich als pragmatisch und zukunftssicher herausgestellt. Am meisten freut mich, dass ich jetzt eine Plattform habe, die genau das tut, was ich wollte: kurze, fokussierte Inhalte teilen, ohne Overhead und unabhängig von großen Anbietern. Es war ein Lernprozess, aber jeder Schritt – von den gescheiterten Bun-Experimenten bis zur finalen Deploy-Strategie – hat sich gelohnt.

Voraussetzungen

• VS Code installiert
• Tailwind CSS v4 korrekt eingerichtet
• Tailwind CSS IntelliSense Extension installiert 👉 Hier herunterladen

Schritt 1: .vscode/settings.json konfigurieren

Erstelle oder bearbeite die Datei .vscode/settings.json in deinem Projektordner und füge Folgendes hinzu:

1{
2  "tailwindCSS.includeLanguages": {
3    "eta": "html"
4  },
5  "tailwindCSS.experimental.configFile": "src/styles/styles.css"
6}

• includeLanguages: Sagt VS Code, dass .eta-Dateien wie HTML behandelt werden sollen.
• experimental.configFile: Zeigt auf deine zentrale Tailwind-CSS-Datei (z. B. styles.css), in der du Tailwind importierst.

Schritt 2: Tailwind in styles.css importieren

In Tailwind v4 sieht deine zentrale CSS-Datei typischerweise so aus:

1@import "tailwindcss";

Optional kannst du auch Plugins oder Custom Styles hinzufügen:

1@import "tailwindcss";
2@import "./custom.css";

Schritt 3: tailwind.config.js anpassen

Stelle sicher, dass deine .eta-Dateien im content-Array enthalten sind:

1export default {
2  content: ["./views/**/*.eta", "./src/**/*.js"],
3  theme: {
4    extend: {},
5  },
6  plugins: [],
7};

Schritt 4: VS Code neu starten

Nach den Änderungen solltest du VS Code neu starten, damit die IntelliSense-Erweiterung die neuen Einstellungen erkennt. Das ist nicht immer erforderlich, aber in diesem Fall ist es ratsam.

Jetzt solltest du in .eta-Dateien:

• Autovervollständigung für Tailwind-Klassen erhalten
• Hover-Informationen und Vorschauen sehen
• Fehler bei ungültigen Klassen erkennen

Viel Spaß beim Coden mit Tailwind v4 und Eta! 🎨✨

Statt die Layer-Reihenfolge mit bringToFront() zu steuern, haben ich nun Leaflet-Panes benutzt. So kann ich die Z-Index-Reihenfolge der Layer exakt bestimmen:

• Länder liegen im Pane countriesPane (zIndex 400)
• POIs im Pane poiPane (zIndex 500)
• Hauptstädte/Capitals im Pane capitalsPane (zIndex 600)

Das sorgt für eine saubere und vorhersehbare Darstellung – unabhängig von Interaktionen oder Nachladen von Daten. Vorallem aber wird bei einem Hover-Over über Länder die Darstellung der POIs nicht mehr beeinflusst.

Neue map.js Datei

Hier die neue map.js Datei, die die Ländergrenzen, POIs und Hauptstädte verwaltet:

  1const map = L.map('map').setView([52.0705, 4.707], 6);
  2L.tileLayer('', {}).addTo(map);
  3var capitalsIcon = L.divIcon({ className: 'capitals-icon' });
  4
  5// Create custom panes for z-order control
  6map.createPane('countriesPane');
  7map.getPane('countriesPane').style.zIndex = 400;
  8
  9map.createPane('poiPane');
 10map.getPane('poiPane').style.zIndex = 500;
 11
 12map.createPane('capitalsPane');
 13map.getPane('capitalsPane').style.zIndex = 600;
 14
 15// Highlight-Funktionen
 16function highlightFeature(e) {
 17  const layer = e.target;
 18  layer.setStyle({
 19    weight: 2,
 20    color: '#ff0000',
 21    fillOpacity: 0.7,
 22  });
 23  layer.bringToFront();
 24}
 25
 26function resetHighlight(e) {
 27  geojson.resetStyle(e.target);
 28  overlayGroup.bringToFront();
 29}
 30
 31// Layer groups for better control
 32const baseGroup = L.layerGroup().addTo(map);
 33const overlayGroup = L.layerGroup().addTo(map);
 34const capitalsLayer = L.layerGroup().addTo(map);
 35
 36// Country boundaries with outlines and optional fill
 37let geojson;
 38
 39// Call layers in correct order
 40function initLayers() {
 41  addCountryLayer(addPOILayer);
 42}
 43
 44function addCountryLayer(callback) {
 45  fetch('/data/vm_medium_countries.geo.json')
 46    .then((res) => res.json())
 47    .then((data) => {
 48      if (baseGroup) baseGroup.clearLayers();
 49      geojson = L.geoJSON(data, {
 50        pane: 'countriesPane',
 51        style: (feature) => ({
 52          color: feature.properties.color || '#333',
 53          weight: 1,
 54          opacity: 1,
 55          fillColor: feature.properties.fillColor || '#eee',
 56          fillOpacity: 1,
 57        }),
 58        onEachFeature: (feature, layer) => {
 59          layer.bindPopup(feature.properties.name);
 60          layer.on({
 61            mouseover: highlightFeature,
 62            mouseout: resetHighlight,
 63          });
 64        },
 65      }).addTo(baseGroup);
 66      if (callback) callback();
 67    })
 68    .catch(console.error);
 69}
 70
 71function addPOILayer() {
 72  fetch('/data/poi.geo.json')
 73    .then((response) => response.json())
 74    .then((data) => {
 75      if (overlayGroup) overlayGroup.clearLayers();
 76      L.geoJSON(data, {
 77        pane: 'poiPane',
 78        style: function (feature) {
 79          if (!feature.properties) return {};
 80          return {
 81            color: feature.properties.stroke || '#3388ff',
 82            weight: feature.properties['stroke-width'] || 3,
 83            opacity: feature.properties['stroke-opacity'] || 1,
 84            fillColor: feature.properties.fill || '#3388ff',
 85            fillOpacity: feature.properties['fill-opacity'] || 0.2,
 86          };
 87        },
 88        onEachFeature: (feature, layer) => {
 89          if (feature.properties && feature.properties.name) {
 90            layer.bindPopup(feature.properties.name);
 91          }
 92        },
 93      }).addTo(overlayGroup);
 94    });
 95}
 96
 97// Capitals logic
 98function clearCapitals() {
 99  capitalsLayer.clearLayers();
100}
101
102document.getElementById('capitals-btn').onclick = async function () {
103  clearCapitals();
104  const res = await fetch('/api/capitals');
105  const capitals = await res.json();
106  capitals.forEach((capital) => {
107    const marker = L.marker([capital.lat, capital.lng], { icon: capitalsIcon, pane: 'capitalsPane' }).bindPopup(capital.name);
108    capitalsLayer.addLayer(marker);
109  });
110  capitalsLayer.bringToFront();
111};
112
113document.getElementById('remove-capitals-btn').onclick = function () {
114  clearCapitals();
115};
116
117initLayers();

Die Layer für Länder, POIs und Hauptstädte werden jetzt in eigenen LayerGroups verwaltet. Das macht das Nachladen, Entfernen und Aktualisieren von Daten viel einfacher und übersichtlicher.

Neue HTML-Struktur

Hier die neue index.html Datei, die die Karte und die Buttons enthält:

 1<!DOCTYPE html>
 2<html lang="de">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <title>Minimal Leaflet Karte</title>
 6    <link rel="stylesheet" href="styles.css" />
 7    <link rel="stylesheet" href="/public/leaflet/leaflet.css" crossorigin="" />
 8  </head>
 9  <body>
10    <header>
11      <h1>Leaflet Demo Map</h1>
12      <p class="subtitle">A simple demonstration of a Leaflet map</p>
13      <button id="capitals-btn">Load Capitals via API</button>
14      <button id="remove-capitals-btn">Remove Capitals</button>
15    </header>
16
17    <div id="map"></div>
18    <script src="/public/leaflet/leaflet.js" crossorigin=""></script>
19    <script src="map.js"></script>
20  </body>
21</html>

Neue Styles

Dazu passend die neuen Styles in der styles.css Datei, für die Karte und die Buttons:

 1/* Header ersetzen */
 2header {
 3  background-color: #f8f9fa;
 4  padding: 1em;
 5  text-align: center;
 6  border-bottom: 1px solid #ccc;
 7}
 8
 9/* und in der Map die Werte für 'margin' neu setzen */
10#map {
11  margin: 1rem 1rem;
12}
13
14button {
15  padding: 0.5em 1em;
16  margin: 0.5em;
17  border: none;
18  border-radius: 4px;
19  background-color: #007bff;
20  color: white;
21  cursor: pointer;
22}
23
24.capitals-icon {
25  background-color: #007bff;
26  border-radius: 50%;
27  width: 24px;
28  height: 24px;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32}

Neue index.ts Datei

Jetzt noch die index.ts Datei, die die API für die Hauptstädte bereitstellt:

 1import { serve } from '@hono/node-server';
 2import { Hono } from 'hono';
 3import { serveStatic } from '@hono/node-server/serve-static';
 4
 5const app = new Hono();
 6
 7// Serve static files from 'public'
 8app.use('/public/*', serveStatic({ root: './' }));
 9
10// Serve static files from 'data'
11app.use('/data/*', serveStatic({ root: './' }));
12
13// API endpoint for dynamic location data
14app.get('/api/capitals', (c) => {
15  const capitals = [
16    { id: 1, name: 'Berlin', lat: 52.52, lng: 13.405 },
17    { id: 2, name: 'Paris', lat: 48.8566, lng: 2.3522 },
18    { id: 3, name: 'London', lat: 51.5074, lng: -0.1278 },
19    { id: 4, name: 'Madrid', lat: 40.4168, lng: -3.7038 },
20    { id: 5, name: 'Rome', lat: 41.9028, lng: 12.4964 },
21    { id: 6, name: 'Vienna', lat: 48.2082, lng: 16.3738 },
22    { id: 7, name: 'Amsterdam', lat: 52.3676, lng: 4.9041 },
23    { id: 8, name: 'Brussels', lat: 50.8503, lng: 4.3517 },
24    { id: 9, name: 'Copenhagen', lat: 55.6761, lng: 12.5683 },
25    { id: 10, name: 'Stockholm', lat: 59.3293, lng: 18.0686 },
26    { id: 11, name: 'Oslo', lat: 59.9139, lng: 10.7522 },
27    { id: 12, name: 'Helsinki', lat: 60.1695, lng: 24.9354 },
28    { id: 13, name: 'Lisbon', lat: 38.7223, lng: -9.1393 },
29    { id: 14, name: 'Dublin', lat: 53.3498, lng: -6.2603 },
30    { id: 15, name: 'Warsaw', lat: 52.2297, lng: 21.0122 },
31    { id: 16, name: 'Prague', lat: 50.0755, lng: 14.4378 },
32    { id: 17, name: 'Budapest', lat: 47.4979, lng: 19.0402 },
33    { id: 18, name: 'Bratislava', lat: 48.1482, lng: 17.1067 },
34    { id: 19, name: 'Ljubljana', lat: 46.0569, lng: 14.5051 },
35    { id: 20, name: 'Zagreb', lat: 45.815, lng: 15.9819 },
36  ];
37  return c.json(capitals);
38});
39
40// Redirect root to public/index.html
41app.get('/', (c) => c.html('<script>location.href="https://cbrueggenolte.de/public/index.html"</script>'));
42
43// Start the server
44serve(
45  {
46    fetch: app.fetch,
47    port: 3000,
48  },
49  (info) => {
50    console.log(`Server is running on http://localhost:${info.port}`);
51  }
52);

Die API liefert eine Liste von Hauptstädten mit ihren Koordinaten. Diese werden später in der Karte als Marker angezeigt. Und mit den neu hinzugefügten Buttons kann der Nutzer die Hauptstädte dynamisch laden und entfernen.

Neue Daten

Und ins Verzeichnis data kommt neben der GeoJSON-Datei vm_medium_countries.geo.json, die du von geojson-maps.kyd.au heruntergeladen hast, die neue Version der `poi.geo.json Datei welche neue POI enthält.

Wie in der map.js Datei zu sehen ist, werden die Information zur Darstellung der POIs jetzt direkt aus den GeoJSON-Properties (stroke, stroke-width, fill, etc.) übernommen. So kann jeder POI individuell gestaltet werden – z.B. für besondere Städte oder Flächen.

Fazit

Durch die Nutzung von LayerGroups, Panes und klaren Funktionsaufrufen ist der Code jetzt deutlich modularer und leichter zu erweitern.

Wenn alles geklappt hat, solltest du nun eine funktionierende Leaflet-Karte haben, die Ländergrenzen anzeigt und dynamisch POIs und Hauptstädte laden kann und ungefähr so aussieht:

Hono ist ein leichtgewichtiger Web-Framework für Node.js, das sich hervorragend für einfache APIs eignet. Wenn wir fertig sind, haben wir eine minimalistische Leaflet-Karte, die offline funktioniert und die Ländergrenzen sowie dynamisch geladene Punkte anzeigt.

Schritt 1: Projekt initialisieren

Erstelle ein neues Hono-Projekt:

1npm create hono@latest

Folge den Anweisungen im Terminal und wähle die folgenden Optionen:

1create-hono version 0.19.2
2✔ Target directory leaflet-hono
3✔ Which template do you want to use? nodejs
4✔ Do you want to install project dependencies? Yes
5✔ Which package manager do you want to use? npm
6✔ Cloning the template
7✔ Installing project dependencies
8🎉 Copied project files
9Get started with: cd leaflet-hono

Wir installieren hier auch Leaflet um aus dem node_modules Verzeichnis auf die Leaflet-Bibliothek zugreifen zu können.

1cd leaflet-hono
2npm install leaflet

Schritt 2: Projektstruktur anlegen

leaflet-hono/
├── data/
├── public/
│   ├── leaflet/
│   │   ├── images/ ( << siehe unten für Details >> )
│   │   ├── leaflet.css
│   │   ├── leaflet.js
│   │   └── leaflet.js.map
├── src/
│   ├── index.ts

• data/ enthält heruntergeladene GeoJSON-Dateien (z. B. Natural Earth 50m).
• public/ enthält Frontend-Dateien.
• server.js enthält den Hono-Server und API-Endpunkte.
• public/leaflet/images Ordner mit Leaflet-Bildern aus dem node_modules/leaflet/dist/images Verzeichnis)

Kopiere die Leaflet Dateien aus node_modules/leaflet/dist/ in den public/leaflet/ Ordner:

1mkdir -p public/leaflet/images
2cp node_modules/leaflet/dist/images/* public/leaflet/images/
3cp node_modules/leaflet/dist/leaflet.css public/leaflet/
4cp node_modules/leaflet/dist/leaflet.js public/leaflet/
5cp node_modules/leaflet/dist/leaflet.js.map public/leaflet/

Schritt 3: App starten

Bevor wir weiter machen, stellen wir sicher, dass wir unsere App einmal starten können. Starte dazu den Hono-Server:

1npm run dev

Wenn alles richtig eingerichtet ist, solltest du die Standard-Hono-Seite unter http://localhost:3000 sehen.

Schritt 4: src/index.ts

Nun erweitern wir die src/index.ts Datei, um die Daten aus dem public und data Ordner bereitzustellen.

 1import { serve } from "@hono/node-server";
 2import { Hono } from "hono";
 3import { serveStatic } from "@hono/node-server/serve-static";
 4
 5const app = new Hono();
 6
 7// Serve static files from 'public'
 8app.use("/public/*", serveStatic({ root: "./" }));
 9
10// Serve static files from 'data'
11app.use("/data/*", serveStatic({ root: "./" }));
12
13app.get("/", (c) => {
14  return c.text("Hello Hono!");
15});
16
17serve(
18  {
19    fetch: app.fetch,
20    port: 3000,
21  },
22  (info) => {
23    console.log(`Server is running on http://localhost:${info.port}`);
24  },
25);

Zum Testen erstellen wir eine einfache Test-Datei, die wir später in der Karte verwenden werden. Erstelle dazu eine Datei data/poi.geo.json mit folgendem Inhalt:

 1{
 2  "type": "FeatureCollection",
 3  "features": [
 4    {
 5      "type": "Feature",
 6      "properties": { "name": "Den Haag" },
 7      "geometry": {
 8        "type": "Point",
 9        "coordinates": [4.3007, 52.0705]
10      }
11    },
12    {
13      "type": "Feature",
14      "properties": { "name": "Utrecht" },
15      "geometry": {
16        "type": "Point",
17        "coordinates": [5.09, 52.0907]
18      }
19    }
20  ]
21}

Wenn nun <https://localhost:3000/data/poi.geo.json> aufgerufen wird, sollte die GeoJSON-Datei angezeigt werden.

Schritt 5: public/index.html und public/styles.css

In die index.html Datei fügen wir die grundlegende Struktur für die Leaflet-Karte ein. Erstelle die Datei public/index.html mit folgendem Inhalt:

 1<!DOCTYPE html>
 2<html lang="de">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <title>Minimal Leaflet Karte</title>
 6    <link rel="stylesheet" href="styles.css" />
 7    <link rel="stylesheet" href="/public/leaflet/leaflet.css" crossorigin="" />
 8  </head>
 9  <body>
10    <header>
11      <h1>Leaflet Demo Map</h1>
12      <p class="subtitle">A simple demonstration of a Leaflet map</p>
13    </header>
14
15    <div id="map"></div>
16    <script src="/public/leaflet/leaflet.js" crossorigin=""></script>
17    <script src="map.js"></script>
18  </body>
19</html>

Um das nicht ganz so langweilig zu gestalten, fügen wir noch etwas CSS hinzu. Erstelle die Datei public/styles.css mit folgendem Inhalt:

 1html,
 2body {
 3  margin: 0;
 4  padding: 0;
 5  width: 100%;
 6  height: 100%;
 7}
 8body {
 9  font-family: Arial, sans-serif;
10  height: 100vh;
11  box-sizing: border-box;
12  display: flex;
13  flex-direction: column;
14}
15
16h1,
17.subtitle {
18  margin: 0 0 0.5em 0;
19  text-align: center;
20}
21.subtitle {
22  font-size: 1.2em;
23  color: #666;
24  margin-bottom: 1em;
25}
26#map {
27  flex: 1;
28  margin: 0 2vw 2vw 2vw; /* margin around the map */
29  background-color: #f0f0f0;
30  border: 1px solid #ccc;
31  border-radius: 8px;
32}

Schritt 6: public/map.js

Was nun noch fehlt, ist die Logik, um die Karte zu initialisieren und die GeoJSON-Daten zu laden. Erstelle die Datei public/map.js mit folgendem Inhalt:

 1const map = L.map("map").setView([52.0705, 4.707], 11);
 2
 3L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
 4  maxZoom: 19,
 5}).addTo(map);
 6
 7fetch("/data/poi.geo.json")
 8  .then((response) => response.json())
 9  .then((data) => {
10    L.geoJSON(data).addTo(map);
11  });

Hiermit initialisieren wir die Karte auf den Koordinaten zwischen Den Haag und Utrecht und laden die GeoJSON-Daten von unserem Hono-Server. Die Punkte werden dann als Layer zur Karte hinzugefügt.

Wenn alles geklappt hat, sollte es ungefähr so aussehen:

Schritt 7: OSM ersetzen und Ländergrenzen hinzufügen

Da wir aber eine offlinefähige Karte erstellen wollen, müssen wir die Ländergrenzen und andere Geodaten lokal bereitstellen. Wir verwenden dafür GeoJSON-Dateien von Natural Earth die sich gut für kleinere Karten eignen.

Um die Ländergrenzen herunterzuladen, navigiere zu geojson-maps.kyd.au, wähle “Medium Resolution” und aktiviere die Checkbox “All”. Die mittlere Auflösung ist für unsere Zwecke ausreichend und hat mit nur 4,5 MB eine handhabbare Größe. Die Option “All” stellt sicher, dass alle Ländergrenzen enthalten sind.

Klicke anschließend auf “Build Custom GeoJSON” in der rechten unteren Ecke, um die Datei herunterzuladen. Diese Datei enthält alle Ländergrenzen im GeoJSON-Format, das mit Leaflet kompatibel ist. Speichere die Datei im data-Ordner unter dem Namen vm_medium_countries.geo.json.

Anschließend erweitern wir die public/map.js Datei, um die Ländergrenzen zu laden und anzuzeigen:

 1const map = L.map("map").setView([52.0705, 4.707], 5);
 2L.tileLayer("", {}).addTo(map);
 3
 4fetch("/data/vm_medium_countries.geo.json")
 5  .then((response) => response.json())
 6  .then((data) => {
 7    L.geoJSON(data, {
 8      style: (feature) => ({
 9        color: feature.properties.color || "#333",
10        weight: 1,
11        opacity: 1,
12        fillColor: feature.properties.fillColor || "#eee",
13        fillOpacity: 1,
14      }),
15    }).addTo(map);
16  });

Der Code initialisiert eine Leaflet-Karte ohne Hintergrund-Layer (also ohne Basiskarte) und zeigt die Ländergrenzen aus einer lokalen GeoJSON-Datei an.

• Die Karte wird auf Europa zentriert und auf Zoomstufe 5 gesetzt.
• Es wird ein leerer Tile-Layer hinzugefügt, damit Leaflet korrekt funktioniert, aber keine Online-Kartenkacheln geladen werden.
• Die Ländergrenzen werden per fetch aus der Datei /data/vm_medium_countries.geo.json geladen.
• Mit L.geoJSON werden die Länder als Layer zur Karte hinzugefügt. Die Darstellung (Linienfarbe, Füllfarbe) kann für jedes Land individuell über die Eigenschaften im GeoJSON gesteuert werden (feature.properties.color und feature.properties.fillColor). Gibt es keine Angabe, werden Standardwerte verwendet.

Um das ganze noch etwas abzurunden können wir die Hintergrundfarbe der Karte in der public/styles.css Datei anpassen:

1#map {
2  flex: 1;
3  margin: 0 2vw 2vw 2vw; /* margin around the map */
4  background-color: #87ceeb; /* light blue, resembling the sea */
5  border: 1px solid #ccc;
6  border-radius: 8px;
7}

Damit erhält die Karte eine hellblaue Hintergrundfarbe, die visuell das Meer andeuten soll. Die Länder werden in einem neutralen Grau dargestellt.

Schritt 8: Ländergrenzen und POI kombinieren

Nun wollen wir noch die POI-Punkte aus der data/poi.geo.json Datei auf der Karte anzeigen. Dazu erweitern wir die public/map.js Datei:

1fetch("/data/poi.geo.json")
2  .then((response) => response.json())
3  .then((data) => {
4    L.geoJSON(data, {
5      onEachFeature: (feature, layer) => {
6        layer.bindPopup(feature.properties.name);
7      },
8    }).addTo(map);
9  });

Nach dem Neuladen der Seite sollten nun die POI-Punkte (Den Haag und Utrecht) auf der Karte angezeigt werden. Wenn du auf einen Punkt klickst, öffnet sich ein Popup mit dem Namen des Ortes.

Bonus: Fancy Leaflet Funktionen

Um die Karte ein wenig interaktiver zu gestalten, können wir noch einige zusätzliche Features hinzufügen. Leaflet bietet viele Möglichkeiten, um die Benutzererfahrung zu verbessern. Ersetze die public/map.js Datei mit folgendem Inhalt:

 1const map = L.map("map").setView([52.0705, 4.707], 6);
 2// Leaflet benötigt mindestens einen Tile-Layer, auch wenn er leer ist.
 3// Deshalb wird hier ein leerer Tile-Layer eingebunden, um die Engine korrekt zu initialisieren.
 4L.tileLayer("", {}).addTo(map);
 5
 6// Highlight-Funktionen
 7function highlightFeature(e) {
 8  const layer = e.target;
 9  layer.setStyle({
10    weight: 2,
11    color: "#ff0000",
12    fillOpacity: 0.7,
13  });
14  layer.bringToFront();
15}
16
17function resetHighlight(e) {
18  geojson.resetStyle(e.target);
19}
20
21// Country boundaries with outlines and optional fill
22let geojson; // Global variable to hold the geojson layer
23fetch("/data/vm_medium_countries.geo.json")
24  .then((res) => res.json())
25  .then((data) => {
26    geojson = L.geoJSON(data, {
27      style: (feature) => ({
28        color: feature.properties.color || "#333",
29        weight: 1,
30        opacity: 1,
31        fillColor: feature.properties.fillColor || "#eee",
32        fillOpacity: 1,
33      }),
34      onEachFeature: (feature, layer) => {
35        layer.bindPopup(feature.properties.name);
36        layer.on({
37          mouseover: highlightFeature,
38          mouseout: resetHighlight,
39        });
40      },
41    }).addTo(map);
42  })
43  .catch(console.error);
44
45// POI data with popups
46fetch("/data/poi.geo.json")
47  .then((response) => response.json())
48  .then((data) => {
49    L.geoJSON(data, {
50      onEachFeature: (feature, layer) => {
51        layer.bindPopup(feature.properties.name);
52      },
53    }).addTo(map);
54  });

Dieser Code fügt folgende Features hinzu:

• Hover-Effekte: Länder werden hervorgehoben, wenn der Mauszeiger darüber schwebt.
• Popups: Beim Klicken auf Länder oder POI-Punkte öffnet sich ein Popup mit dem Namen.
• Popup für Länder: Beim Klicken auf ein Land öffnet sich ein Popup mit dem Namen des Landes.
• Popup für POI-Punkte: Beim Klicken auf einen POI-Punkt öffnet sich ein Popup mit dem Namen des Ortes.

🧭 Fazit

Mit weniger als 100 Zeilen Code lässt sich eine minimalistische, offlinefähige Leaflet-Karte mit Hono realisieren. Ideal für Prototyping oder einfache Anwendungen – ohne externe Abhängigkeiten und voll anpassbar.

Die Karte kann leicht erweitert werden, um weitere Features hinzuzufügen, wie z. B. Marker, Polygone oder andere GeoJSON-Daten. Leaflet bietet eine Vielzahl von Möglichkeiten, um Karten interaktiv und ansprechend zu gestalten.

Das Projekt in Version 1 kannst du hier herunterladen: https://codeberg.org/cblte/leaflet-hono-offline/releases/tag/v1

Eine große Hilfe waren tatsächlich auch die Large Language Models. Dank Gemma, Qwen, Claude und Co. ließen sich größere HTML-Abschnitte ziemlich schnell und ohne viel Aufwand umbauen. Auch Anpassungen im Design mit Tailwind – das Einfügen von Klassen, das Ausprobieren verschiedener Layouts oder das Anpassen von Farben über ganze Seiten hinweg – gehen mit Unterstützung durch LLMs erstaunlich fix. Sind also gar nicht so schlecht, die Dinger. Leider konnte ich nicht alles mit einem lokalen Gemma- oder Qwen-Modell umsetzen, aber das wird langsam besser.

Ich hänge immer noch ein wenig im Bootcamp hinterher. Da ich die Aufgaben aber nicht schleifen lassen will, habe ich mir gestern einen kleinen Plan aufgestellt, um mein Projekt zu pushen: Es soll ein einfacher Filament-Manager werden, mit dem ich meine Spulen und deren Eigenschaften verwalten kann.

Da ich das nicht mit Astro, sondern mit Bun, Hono und TailwindCSS umsetzen möchte, stellte sich die Frage:

Wie kann ich TailwindCSS in mein Projekt integrieren? Für viele Frameworks gibt es entsprechende Plugins – aber für Bun und Hono leider nicht. Nach langem Suchen und Ausprobieren habe ich aber endlich eine Lösung gefunden!

Projekt-Setup mit Bun & Hono

Als Erstes legen wir ein hono-Projekt mit bun an:

1bun create hono@latest my-project
2cd my-project

Wir erstellen eine Startseite für die spätere Filamentübersicht. Lege den Ordner src/routes an, falls er noch nicht existiert, und erstelle darin die Datei index.ts. Trage dort den folgenden Code ein:

 1// src/routes/index.ts
 2import { Hono } from 'hono';
 3
 4const route = new Hono();
 5
 6route.get('/', (c) => {
 7  return c.text('🎉 Hello from your Filament Manager!****');
 8});
 9
10export default route;

Anschließend binden wir diese Route in unsere neue Datei src/app.ts ein. Diese Datei wird die zentrale Stelle sein, an der wir unsere Hono-App starten. Lege sie an (falls sie noch nicht existiert), und füge folgenden Code ein:

1// src/app.ts
2import { Hono } from 'hono';
3import indexRoute from './routes/index';
4
5const app = new Hono();
6
7app.route('/', indexRoute);
8
9export default app;

Zum Schluss starten wir den Server. Öffne die Datei src/index.ts und ersetze den bisherigen Inhalt vollständig durch den folgenden Code:

 1// src/index.ts
 2import app from './app';
 3
 4const port = process.env.PORT || 3000;
 5
 6console.log(`Server is running on http://localhost:${port}`);
 7Bun.serve({
 8  port,
 9  fetch: app.fetch,
10});

Starte den Server mit folgendem Befehl in einem Terminal:

1bun run dev

Wenn alles richtig eingerichtet ist, erreichst du die Startseite unter http://localhost:3000 in deinem Browser.

:::tip Da wir das Terminal gleich wieder brauchen, stoppen wir den Server mit Ctrl + C. :::

TailwindCSS integrieren

Jetzt kümmern wir uns um die Integration von TailwindCSS.

Installiere zuerst die nötigen Pakete als Entwicklungsabhängigkeiten:

1bun add -D tailwindcss @tailwindcss/cli

Erstelle nun das Verzeichnis src/styles (falls es noch nicht existiert) und eine Datei namens global.css und füge folgenden Inhalt ein:

1/* src/styles/global.css */
2@import "tailwindcss";

Da es derzeit keine offiziellen Plugins für Bun + Hono gibt, müssen wir die CSS-Datei selbst kompilieren. Führe dazu im Terminal folgenden Befehl aus:

1bunx @tailwindcss/cli -i ./src/styles/global.css -o ./public/output.css --watch

:::note Damit wird Tailwind verarbeitet und die fertige CSS-Datei unter ./public/output.css gespeichert. Der --watch-Modus sorgt dafür, dass Änderungen an deiner CSS-Datei oder deinem Projekt automatisch neu kompiliert werden. Du kannst ihn jederzeit mit Ctrl + C beenden. :::

HTML-Template einbinden

Jetzt, da wir unsere output.css im public-Ordner haben, können wir ein HTML-Template erstellen und in unsere Hono-App integrieren.

Lege im Verzeichnis src/templates eine Datei mit dem Namen layout.tsx an. Falls der Ordner templates noch nicht existiert, erstelle ihn zuerst.

Füge dann folgenden Code ein:

 1// src/templates/layout.tsx
 2export const Layout = ({ children }: { children: string }) => {
 3  return `
 4    <!DOCTYPE html>
 5    <html lang="de">
 6      <head>
 7        <meta charset="UTF-8" />
 8        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 9        <title>Filament Manager</title>
10        <link href="https://cbrueggenolte.de/public/output.css" rel="stylesheet">
11      </head>
12      <body class="bg-gray-100 text-gray-900 p-4">
13        <main class="max-w-2xl mx-auto">
14          ${children}
15        </main>
16      </body>
17    </html>
18  `;
19};

:::note Das Template ist eine Funktion, die ein vollständiges HTML-Dokument als String zurückgibt. Das Platzhalterfeld ${children} wird später mit dem eigentlichen Seiteninhalt ersetzt. :::

Jetzt passen wir unsere Startseite an, damit sie das HTML-Template verwendet.

Öffne die Datei src/routes/index.ts und ersetze ihren Inhalt durch:

 1// src/routes/index.ts
 2import { Hono } from 'hono';
 3import { Layout } from '../templates/layout';
 4
 5const route = new Hono();
 6
 7route.get('/', (c) => {
 8  const content = `
 9    <h1 class="text-3xl font-medium mb-4">🎨 Filament Manager</h1>
10    <p class="text-lg">Hier verwalten wir bald unsere Filamente.</p>
11  `;
12  return c.html(Layout({ children: content }));
13});
14
15export default route;

:::note Damit wird deine Startseite jetzt mit dem Template layout.tsx gerendert. Der HTML-Inhalt in der Variable content wird automatisch an der Stelle ${children} eingefügt. :::

Statische Dateien bereitstellen

Damit die Datei output.css im Browser geladen werden kann, muss Hono den Ordner /public freigeben. Das erreichen wir mit der Middleware serveStatic:

1app.use('/public/*', serveStatic({ root: './' }));

Füge diese Zeile in src/app.ts ein – zwischen der App-Initialisierung und dem Routing. Oder ersetze den gesamten Inhalt der Datei src/app.ts durch den folgenden Code:

 1// src/app.ts
 2import { Hono } from 'hono';
 3import { serveStatic } from 'hono/bun';
 4import indexRoute from './routes/index';
 5
 6const app = new Hono();
 7
 8// Statische Dateien wie /public/output.css bereitstellen
 9app.use('/public/*', serveStatic({ root: './' }));
10
11app.route('/', indexRoute);
12
13export default app;

Die Middleware sorgt dafür, dass der Browser statische Dateien aus dem public-Verzeichnis laden kann – zum Beispiel die Datei output.css.

Starte nun den Server erneut (ggf. in einem zweiten Terminalfenster) mit:

1bun run dev

:::tip Falls du den TailwindCSS-Compiler vorher gestoppt hast (z. B. mit Ctrl + C), starte ihn jetzt erneut – sonst wird die eingebundene Datei output.css nicht aktualisiert.

Verwende dazu denselben Befehl wie zuvor:

1bunx @tailwindcss/cli -i ./src/styles/global.css -o ./public/output.css --watch

Am besten lässt du den Compiler dauerhaft in einem separaten Terminalfenster laufen, während du am Projekt arbeitest. :::

Wenn alles funktioniert, wird die Startseite unter http://localhost:3000 angezeigt – diesmal mit TailwindCSS-Styling.

Deine Version ist bereits sehr gut – klar strukturiert, technisch korrekt und stilistisch passend zum Blog. Ich habe sie jetzt nur leicht sprachlich geglättet und einen durchgehenden, natürlichen Lesefluss hergestellt. Hier die überarbeitete Fassung:

Dev-Workflow verbessern

Damit du nicht ständig zwei Terminals gleichzeitig offen haben musst, eines für Hono und eines für Tailwind, kannst du deinen Workflow etwas bequemer gestalten.

Wir verwenden das Tool concurrently, um beide Prozesse parallel zu starten:

1bun add -D concurrently

Zunächst kannst du den folgenden dev-Befehl in deiner package.json unter "scripts" ergänzen:

1"scripts": {
2  "dev": "concurrently 'bun run --hot src/index.ts' 'bunx @tailwindcss/cli -i ./src/styles/global.css -o ./public/output.css --watch'"
3}

Wenn du möchtest, kannst du den Prozessen zusätzlich Namen und Farben zuweisen – das macht die Terminalausgabe übersichtlicher:

1"scripts": {
2  "dev": "concurrently --names 'server,styles' --prefix-colors 'yellow,blue'  'bun run --hot src/index.ts' 'bunx @tailwindcss/cli -i ./src/styles/global.css -o ./public/output.css --watch'"
3}

Statt alle Befehle in eine lange und schwer lesbare Zeile zu packen, kannst du das Ganze noch besser strukturieren, indem du zwei separate Scripts anlegst: Eines für den Server, eines für Tailwind. Dann kombinierst du sie im dev-Befehl über concurrently:

1{
2  "scripts": {
3    "start:server": "bun run --hot src/index.ts",
4    "start:styles": "bunx @tailwindcss/cli -i ./src/styles/global.css -o ./public/output.css --watch",
5    "dev": "concurrently --names 'server,styles' --prefix-colors 'yellow,blue' 'npm run start:server' 'npm run start:styles'"
6  }
7}

:::note Vorteil: Du kannst bun run start:server und bun run start:styles auch separat ausführen – z. B. wenn du nur einen der beiden Prozesse debuggen möchtest. :::

Wenn du jetzt bun run dev ausführst, starten Hono-Server und Tailwind-Watcher gleichzeitig, farblich getrennt, sauber strukturiert, und mit einem einzigen Befehl.

Fazit

Und das war’s auch schon! Eigentlich gar nicht so schwer – aber für mich war es trotzdem eine kleine Herausforderung, weil ich mit Bun und Hono bisher noch wenig Erfahrung hatte.

Aber genau deshalb hat es sich gelohnt: Ich habe nicht nur die Tools kennengelernt, sondern gleich eine funktionierende Entwicklungsumgebung aufgebaut, mit TailwindCSS, HTML-Template und Live-Reloading.