Aller au contenu
Álvaro Maldonado Peña

Comment ce site est fait

Rapide, accessible, sans traceurs et avec une boîte aux lettres anti-spam.

Ce qui se passe quand vous m’écrivez

Faites glisser les points ou lancez un mot.

  1. Votre navigateur Il reçoit des pages déjà prêtes et presque pas de JavaScript. HTML statique · îlots de JS · polices auto-hébergées
  2. Cloudflare, près de chez vous Il sert le site, vérifie que vous n’êtes pas un robot et enregistre votre mot. Workers · D1 · Turnstile
  3. Mon assistant privé Il récupère les mots toutes les minutes et écarte le spam. C’est moi qui les lis. interrogation sortante toutes les 60 s · aucun port ouvert
  4. Mon téléphone Il me prévient. Je réponds et la réponse apparaît dans votre conversation. notification push · réponse via l’API

Cette visite, en détail

Mesuré à l’instant, dans votre navigateur.

Votre navigateur ne permet pas de le mesurer.

Comment il a été fait

Lire comment il a été fait

  1. Un accord avant le code

    Le site, la boîte aux lettres et mon assistant partagent des règles écrites sur la façon dont ils communiquent. Elles ont été fixées avant de commencer et ne font que s’étendre : rien ne casse quand le projet grandit.

  2. Trois pistes de design, une retenue

    Trois pistes ont été étudiées : « le mot sur la porte », « la conversation » et « le studio éditorial ». Le mot l’a emporté : m’écrire doit ressembler à laisser un petit papier, pas à remplir un formulaire.

  3. Deux parties en même temps

    Le site et la boîte aux lettres sécurisée ont été faits en parallèle, chacun dans sa propre copie du projet et en suivant ces règles. Moi, j’ai dirigé et tranché.

  4. Un audit de sécurité indépendant

    Un audit de sécurité indépendant, sans voir comment le site avait été fait, n’a rien trouvé de grave ; quelques failles moyennes, comme un moyen de contourner la limite d’envois avec un certain type d’adresse Internet (IPv6 Le type moderne d’adresse Internet d’un appareil ; chaque foyer peut en avoir un nombre énorme, c’est pourquoi les limites se comptent par bloc.). C’est corrigé.

  5. Trois auditeurs de l’expérience

    Un expert en design, une personne sans profil technique et un auditeur accessibilité et performance. La personne non technique ne comprenait pas en 10 secondes ce que je propose : la page d’accueil le dit maintenant dès sa première phrase. L’expert a remarqué que l’envoi affichait « Pliage… » avant de savoir si le mot était arrivé : désormais il affiche « Envoi… » et le mot ne se plie qu’une fois remis.

  6. Aucun code qui traîne

    Le site applique une politique de sécurité du contenu Une règle qui indique au navigateur ce que le site a le droit d’exécuter ; si quelqu’un tentait d’y glisser du code, le navigateur ne l’exécuterait pas. stricte : le navigateur n’exécute que ce qui vient de ses propres fichiers. Un test automatique le vérifie sur chaque page.

Les choix

  • Des pages déjà prêtes, du JavaScript seulement là où il faut

    Chaque page arrive déjà construite : elle s’affiche instantanément, même avec une mauvaise connexion.

    Détail technique
    • Généré avec Astro Un générateur de sites qui livre des pages déjà prêtes et n’ajoute du JavaScript que là où c’est nécessaire. et TypeScript Du JavaScript avec des types : l’ordinateur signale beaucoup d’erreurs avant qu’elles n’atteignent les utilisateurs. en mode strict ; CSS écrit à la main sur les tokens de l’identité visuelle, sans framework de styles.
    • Du JavaScript uniquement dans les îlots De petits éléments interactifs dans une page statique ; le reste ne charge aucun JavaScript. qui en ont besoin : la boîte aux lettres, « En ce moment », la conversation, le changement de thème et les explications des termes.
    • Polices servies depuis le domaine lui-même (Nunito et Fraunces, sous licence libre) et préchargées.

  • Une boîte aux lettres sans compte qui filtre le spam

    N’importe qui peut m’écrire sans s’inscrire, et les robots restent dehors sans gêner les humains.

    Détail technique
    • API sur Cloudflare Workers De petits programmes qui tournent sur les serveurs de Cloudflare, partout dans le monde. avec une base de données D1 La base de données de Cloudflare où sont enregistrés les messages de la boîte aux lettres., sur le même domaine que le site.
    • Défenses en couches : Turnstile La vérification anti-robots de Cloudflare, sans casse-tête ni cookies de suivi. invisible, champ piège, temps de saisie minimal, limite par IP (stockée uniquement sous forme de hash Une empreinte irréversible : elle permet de reconnaître quelque chose de répété sans pouvoir savoir ce que c’était.), contrôle de la longueur et des liens, et score de spam.
    • La personne qui écrit reçoit une clé de conversation pour lire la réponse : ni e-mail, ni mot de passe.

  • Accessible et testé comme un produit

    Il s’utilise au clavier, avec un lecteur d’écran et avec un texte agrandi, en thème clair comme en sombre.

    Détail technique
    • Objectif WCAG AA Les règles internationales d’accessibilité du web ; le niveau AA est celui qu’exige la loi en Europe. : contraste vérifié, focus visible, cibles tactiles de 44 px et respect de « réduire les animations ».
    • Parcours clés testés avec Playwright Un outil qui pilote un vrai navigateur pour tester un site comme le ferait une personne. sur mobile et sur ordinateur, et analyse d’accessibilité automatique sur chaque page.
    • Lighthouse L’outil de Google qui note de 0 à 100 la vitesse, l’accessibilité, les bonnes pratiques et le SEO d’un site. sur mobile à 95 ou plus en performance, accessibilité, bonnes pratiques et SEO Ce qui permet à un site d’apparaître en bonne place dans les moteurs de recherche comme Google. : condition pour publier.

  • Confidentialité dès la conception

    Sans cookies propres, sans mesure d’audience et sans traceurs. Vous pouvez supprimer votre conversation quand vous voulez ; sinon, elle est supprimée au bout de 12 mois.

    Détail technique
    • Politique de sécurité du contenu stricte, sans code en ligne ; le site n’appelle aucun tiers, à part la vérification anti-robots.
    • Conforme au RGPD Le règlement général sur la protection des données de l’Union européenne. ; la page de confidentialité explique ce qui est conservé, dans quel but et pendant combien de temps.

  • Fait avec ma méthode

    Je l’ai fait comme je fais tout : plusieurs parties qui avancent en même temps avec des règles claires, des revues indépendantes, et moi qui dirige et qui tranche. Le travail en parallèle est fait par des agents d’IA.

    Détail technique
    • Une session Claude Code L’outil d’Anthropic utilisé pour le travail en parallèle, directement dans le code du projet. pour le site et une autre pour l’API, en parallèle, chacune dans son propre worktree Une copie de travail séparée du même projet, pour que chaque partie avance sans empiéter sur les autres..
    • Un contrat de types partagé entre le site et l’API, défini avant de commencer.
    • Des auditeurs indépendants UX/UI et accessibilité, ainsi qu’une personne non technique, passent chaque écran en revue jusqu’à ce qu’il ne reste plus aucun défaut grave ou moyen.

Vous voulez quelque chose de fait comme ça ?

Écrivez-moi Télécharger le CV en PDF