Zum Inhalt springen
Álvaro Maldonado Peña

Wie diese Website gebaut ist

Schnell, barrierefrei, ohne Tracker und mit einem spamsicheren Briefkasten.

Was passiert, wenn du mir schreibst

Zieh die Punkte oder schick eine Nachricht los.

  1. Dein Browser Bekommt fertige Seiten und kaum JavaScript. statisches HTML · JS-Inseln · eigene Schriften
  2. Cloudflare, ganz in deiner Nähe Liefert die Website aus, prüft, dass du kein Roboter bist, und speichert deine Nachricht. Workers · D1 · Turnstile
  3. Mein privater Assistent Holt die Nachrichten jede Minute ab und sortiert den Spam aus. Lesen tue ich sie selbst. ausgehende Abfrage alle 60 s · keine offenen Ports
  4. Mein Handy Sagt mir Bescheid. Ich antworte, und die Antwort erscheint in deiner Unterhaltung. Push-Benachrichtigung · Antwort über die API

Dieser Besuch im Detail

Gerade eben in deinem Browser gemessen.

Dein Browser lässt das nicht messen.

Wie sie entstanden ist

Lesen, wie sie entstanden ist

  1. Erst eine Vereinbarung, dann der Code

    Website, Briefkasten und mein Assistent folgen gemeinsamen, schriftlich festgehaltenen Regeln dafür, wie sie miteinander reden. Sie standen fest, bevor es losging, und werden nur erweitert: Beim Wachsen geht nichts kaputt.

  2. Drei Designrichtungen, eine gewählt

    Zur Wahl standen „der Zettel an der Tür“, „das Gespräch“ und „das Redaktionsstudio“. Der Zettel hat gewonnen: Mir zu schreiben soll sich anfühlen, als würdest du einen Zettel hinterlassen, nicht als würdest du ein Formular ausfüllen.

  3. Zwei Teile gleichzeitig

    Die Website und der sichere Briefkasten entstanden parallel – jeder Teil in seiner eigenen Kopie des Projekts und nach diesen Regeln. Ich habe gesteuert und entschieden.

  4. Unabhängige Sicherheitsprüfung

    Eine unabhängige Sicherheitsprüfung, ohne Einblick in die Entstehung, fand nichts Schwerwiegendes, aber ein paar mittlere Schwachstellen, etwa eine Möglichkeit, das Sendelimit mit einer bestimmten Art von Internetadresse (IPv6 Die moderne Art von Internetadresse eines Geräts; jeder Haushalt kann sehr viele davon haben, deshalb werden Limits pro Adressblock gezählt.) zu umgehen. Das ist behoben.

  5. Drei UX-Auditoren

    Ein Designexperte, eine Person ohne technischen Hintergrund und ein Prüfer für Barrierefreiheit und Performance. Die nicht technische Person wusste nach 10 Sekunden nicht, was ich anbiete: Jetzt sagt es die Startseite gleich im ersten Satz. Dem Experten fiel auf, dass beim Senden „Falte …“ stand, bevor klar war, ob die Nachricht angekommen ist: Jetzt steht dort „Wird gesendet …“, und der Zettel faltet sich erst, wenn er angekommen ist.

  6. Kein loser Code

    Die Website folgt einer strengen Content Security Policy Eine Regel, die dem Browser sagt, was die Website ausführen darf; versucht jemand, Code einzuschleusen, führt der Browser ihn nicht aus.: Der Browser führt nur aus, was aus ihren eigenen Dateien kommt. Ein automatischer Test prüft das auf jeder Seite.

Die Entscheidungen

  • Fertige Seiten, JavaScript nur, wo es nötig ist

    Jede Seite kommt fertig gebaut an und ist deshalb sofort da, auch bei schlechter Verbindung.

    Technische Details
    • Erzeugt mit Astro Ein Website-Generator, der fertige Seiten ausliefert und JavaScript nur dort ergänzt, wo es nötig ist. und striktem TypeScript JavaScript mit Typen: Der Computer meldet viele Fehler, bevor sie bei den Nutzern ankommen.; eigenes CSS auf Basis der Identity-Tokens, ohne Styling-Frameworks.
    • JavaScript gibt es nur in den Inseln Kleine interaktive Bereiche in einer statischen Seite; der Rest lädt kein JavaScript., die es brauchen: Briefkasten, „Jetzt“, Unterhaltung, Designwechsel und Begriffserklärungen.
    • Schriften kommen von der eigenen Domain (Nunito und Fraunces, frei lizenziert) und werden vorgeladen.

  • Ein Briefkasten ohne Konto, der Spam filtert

    Jeder kann mir ohne Registrierung schreiben, und Bots bleiben draußen, ohne Menschen zu nerven.

    Technische Details
    • API auf Cloudflare Workers Kleine Programme, die auf den Servern von Cloudflare überall auf der Welt laufen. mit D1 Die Datenbank von Cloudflare, in der die Nachrichten aus dem Briefkasten gespeichert werden.-Datenbank, auf derselben Domain wie die Website.
    • Mehrschichtige Abwehr: unsichtbares Turnstile Die Bot-Prüfung von Cloudflare, ohne Rätsel und ohne Tracking-Cookies., Honeypot-Feld, Mindest-Schreibdauer, Limit pro IP (nur als Hash Ein unumkehrbarer Fingerabdruck: Damit lässt sich etwas Wiederholtes erkennen, ohne dass man herausfinden kann, was es war. gespeichert), Länge und Links sowie ein Spam-Score.
    • Wer schreibt, bekommt einen Schlüssel zur Unterhaltung, um die Antwort zu lesen: ohne E-Mail, ohne Passwort.

  • Barrierefrei und getestet wie ein Produkt

    Funktioniert mit Tastatur, Screenreader und vergrößerter Schrift, hell wie dunkel.

    Technische Details
    • Ziel WCAG AA Die internationalen Richtlinien für barrierefreie Websites; Stufe AA ist das, was in Europa gesetzlich verlangt wird.: geprüfte Kontraste, sichtbarer Fokus, 44 px große Touch-Ziele und Rücksicht auf „Bewegung reduzieren“.
    • Zentrale Abläufe mit Playwright Ein Werkzeug, das einen echten Browser steuert, um eine Website so zu testen, wie ein Mensch sie benutzen würde. auf Mobilgerät und Desktop getestet, dazu automatische Barrierefreiheitsprüfungen auf jeder Seite.
    • Lighthouse Das Werkzeug von Google, das Geschwindigkeit, Barrierefreiheit, Best Practices und SEO einer Website von 0 bis 100 bewertet. auf Mobilgeräten mit mindestens 95 in Performance, Barrierefreiheit, Best Practices und SEO Alles, was dafür sorgt, dass eine Website in Suchmaschinen wie Google gut gefunden wird. als Voraussetzung für jede Veröffentlichung.

  • Datenschutz von Anfang an

    Keine eigenen Cookies, keine Analyse, keine Tracker. Du kannst deine Unterhaltung jederzeit löschen; sonst wird sie nach 12 Monaten gelöscht.

    Technische Details
    • Strenge Content Security Policy ohne Inline-Code; die Website spricht mit keinen Dritten außer der Bot-Prüfung.
    • DSGVO Die Datenschutz-Grundverordnung der Europäischen Union.-konform; die Datenschutzseite erklärt, was gespeichert wird, wozu und wie lange.

  • Mit meiner Methode gemacht

    Ich habe sie so gemacht wie alles: mehrere Teile gleichzeitig nach klaren Regeln, unabhängige Prüfungen, und ich steuere und entscheide. Die parallele Arbeit erledigen KI-Agenten.

    Technische Details
    • Eine Claude Code Das Werkzeug von Anthropic, mit dem die parallele Arbeit direkt im Code des Projekts erledigt wurde.-Sitzung für die Website und eine weitere für die API, parallel, jede in ihrem eigenen worktree Eine separate Arbeitskopie desselben Projekts, damit jeder Teil vorankommt, ohne den anderen in die Quere zu kommen..
    • Ein gemeinsamer Typvertrag zwischen Website und API, festgelegt vor dem Start.
    • Unabhängige Prüfer für UX/UI und Barrierefreiheit sowie eine Person ohne technischen Hintergrund gehen jeden Bildschirm durch, bis keine schweren oder mittleren Fehler mehr übrig sind.

Willst du etwas, das genauso gebaut ist?

Schreib mir Lebenslauf als PDF herunterladen