Vai al contenuto
Álvaro Maldonado Peña

Com'è fatto questo sito

Veloce, accessibile, senza tracker e con una casella antispam.

Cosa succede quando mi scrivi

Trascina i punti o lancia un messaggio.

  1. Il tuo browser Riceve pagine già pronte e quasi niente JavaScript. HTML statico · isole di JS · font propri
  2. Cloudflare, vicino a te Serve il sito, verifica che tu non sia un robot e salva il tuo messaggio. Workers · D1 · Turnstile
  3. Il mio assistente privato Ritira i messaggi ogni minuto e scarta lo spam. Li leggo io. polling in uscita ogni 60 s · nessuna porta aperta
  4. Il mio telefono Mi avvisa. Rispondo e la risposta compare nella tua conversazione. notifica push · risposta tramite API

Questa visita, nel dettaglio

Misurato adesso, nel tuo browser.

Il tuo browser non permette di misurarlo.

Come è nato

Leggi come è nato

  1. Prima un accordo, poi il codice

    Il sito, la casella e il mio assistente condividono delle regole scritte su come comunicano tra loro. Sono state fissate prima di cominciare e si possono solo estendere: crescendo, non si rompe niente.

  2. Tre direzioni di design, una scelta

    Sono state valutate «il biglietto sulla porta», «la conversazione» e «lo studio editoriale». Ha vinto il biglietto: scrivermi deve sembrare lasciare un foglietto, non compilare un modulo.

  3. Due parti in contemporanea

    Il sito e la casella sicura sono stati fatti in parallelo, ognuno nella propria copia del progetto e seguendo quelle regole. Io ho diretto e deciso.

  4. Revisione di sicurezza indipendente

    Un controllo di sicurezza indipendente, senza vedere come era stato fatto il lavoro, non ha trovato nulla di grave, ma qualche problema medio sì, come un modo per aggirare il limite di invii con un certo tipo di indirizzo internet (IPv6 Il tipo moderno di indirizzo internet di un dispositivo; ogni casa può averne moltissimi, per questo i limiti si contano per blocco.). È stato corretto.

  5. Tre revisori dell'esperienza

    Un esperto di design, una persona senza competenze tecniche e un revisore di accessibilità e prestazioni. La persona non tecnica non capiva in 10 secondi cosa offro: ora la home lo dice nella prima frase. L'esperto ha notato che l'invio diceva “Piegando…” prima di sapere se il messaggio era arrivato: ora dice “Invio in corso…” e il biglietto si piega solo se arriva.

  6. Niente codice volante

    Il sito segue una Content Security Policy Una regola che dice al browser cosa può eseguire il sito; se qualcuno provasse a infilare del codice, il browser non lo eseguirebbe. rigorosa: il browser esegue solo ciò che proviene dai suoi stessi file. Un test automatico lo verifica su ogni pagina.

Le scelte

  • Pagine già pronte, JavaScript solo dove serve

    Ogni pagina arriva già costruita, quindi si vede all'istante anche con una connessione scarsa.

    Dettagli tecnici
    • Generato con Astro Un generatore di siti che consegna pagine già pronte e aggiunge JavaScript solo dove serve. e TypeScript JavaScript con i tipi: il computer segnala molti errori prima che arrivino alle persone. in modalità strict; CSS scritto a mano con i token dell'identità visiva, senza framework di stile.
    • Il JavaScript c'è solo nelle isole Piccole parti interattive dentro una pagina statica; il resto non carica JavaScript. che ne hanno bisogno: la casella, «Adesso», la conversazione, il cambio di tema e le spiegazioni dei termini.
    • Font serviti dal dominio stesso (Nunito e Fraunces, con licenza libera) e precaricati.

  • Una casella senza account che filtra lo spam

    Chiunque può scrivermi senza registrarsi, e i bot restano fuori senza disturbare le persone.

    Dettagli tecnici
    • API su Cloudflare Workers Piccoli programmi che girano sui server di Cloudflare in tutto il mondo. con database D1 Il database di Cloudflare in cui vengono salvati i messaggi della casella., sullo stesso dominio del sito.
    • Difese a più livelli: Turnstile La verifica anti-bot di Cloudflare, senza rompicapi né cookie di tracciamento. invisibile, campo trappola, tempo minimo di scrittura, limite per IP (salvato solo come hash Un'impronta irreversibile: serve a riconoscere qualcosa di ripetuto senza poter risalire a cosa fosse.), lunghezza e link, e punteggio di spam.
    • Chi scrive riceve una chiave della conversazione per leggere la risposta: niente email, niente password.

  • Accessibile e testato come un prodotto

    Si usa con la tastiera, con lo screen reader e con il testo ingrandito, in chiaro e in scuro.

    Dettagli tecnici
    • Obiettivo WCAG AA Le linee guida internazionali sull'accessibilità del web; il livello AA è quello richiesto dalla legge in Europa.: contrasto verificato, focus visibile, aree di tocco da 44 px e rispetto di «riduci movimento».
    • Percorsi chiave testati con Playwright Uno strumento che pilota un vero browser per testare un sito come farebbe una persona. su mobile e desktop, e analisi automatica dell'accessibilità su ogni pagina.
    • Lighthouse Lo strumento di Google che assegna un punteggio da 0 a 100 a velocità, accessibilità, best practice e SEO di un sito. su mobile con 95 o più in prestazioni, accessibilità, best practice e SEO Ciò che fa comparire bene un sito nei motori di ricerca come Google. come requisito per pubblicare.

  • Privacy by design

    Niente cookie propri, niente analytics e niente tracker. Puoi cancellare la tua conversazione quando vuoi; altrimenti viene cancellata dopo 12 mesi.

    Dettagli tecnici
    • Content Security Policy rigorosa, senza codice inline; il sito non contatta terzi, a parte la verifica anti-bot.
    • Conforme al GDPR Il Regolamento generale sulla protezione dei dati dell'Unione europea.; la pagina sulla privacy spiega cosa viene salvato, a che scopo e per quanto tempo.

  • Fatto con il mio metodo

    L'ho fatto come faccio tutto: diverse parti che avanzano insieme con regole chiare, revisioni indipendenti, e io a dirigere e decidere. Il lavoro in parallelo lo fanno agenti di IA.

    Dettagli tecnici
    • Una sessione di Claude Code Lo strumento di Anthropic usato per il lavoro in parallelo, direttamente sul codice del progetto. per il sito e un'altra per l'API, in parallelo, ognuna nel suo worktree Una copia di lavoro separata dello stesso progetto, così ogni parte avanza senza pestare i piedi alle altre..
    • Un contratto di tipi condiviso tra sito e API, definito prima di iniziare.
    • Revisori indipendenti di UX/UI e di accessibilità, più una persona non tecnica, controllano ogni schermata finché non restano problemi gravi né medi.

Vuoi qualcosa fatto così?

Scrivimi Scarica il CV in PDF