{"id":962,"date":"2026-04-22T20:27:20","date_gmt":"2026-04-22T20:27:20","guid":{"rendered":"https:\/\/simonertel.net\/blog\/?p=962"},"modified":"2026-04-26T06:22:00","modified_gmt":"2026-04-26T06:22:00","slug":"frankensite-ou-comment-lia-a-ressuscite-un-site","status":"publish","type":"post","link":"https:\/\/simonertel.net\/blog\/frankensite-ou-comment-lia-a-ressuscite-un-site\/","title":{"rendered":"Frankensite – ou comment l’IA a ressuscit\u00e9 un site"},"content":{"rendered":"\n
\"\"<\/a><\/figure>\n\n\n\n

Derni\u00e8rement, comme beaucoup d\u2019entre nous, j\u2019ai profit\u00e9 de la puissance de l\u2019IA pour mener \u00e0 bien certaines choses qui \u00e9taient plus ou moins en stand-by par manque de temps, le genre de t\u00e2ches un peu ingrates qu\u2019on repousse toujours au lendemain sans trop y penser, et parmi elles il y avait notamment le fait de changer d\u2019h\u00e9bergeur et de r\u00e9organiser ma constellation de sites \u00e9pars, avec de vieux trucs qui tra\u00eenaient sur free.fr, Vercel, Ionos, le tout reposant sur des bases techniques disparates.
<\/p>\n\n\n\n\n\n\n\n


Bref, en remuant ces vieux meubles et ces vinyles que l’on garde sans jamais trop savoir pourquoi, j’ai \u00e9t\u00e9 submerg\u00e9 par une v\u00e9ritable bouff\u00e9e de nostalgie et propuls\u00e9 dans le temps. J’en ai profit\u00e9 pour remettre en ligne la toute premi\u00e8re version de mon site internet qui, je l’avoue, m’avait rendu tr\u00e8s fier : compatibilit\u00e9 avec les navigateurs de l’\u00e9poque, rendu visuel \u00ab\u00a0artisanal\u00a0\u00bb, easter eggs cach\u00e9s un peu partout et librairie jQuery exploit\u00e9e \u00e0 son maximum. Pierre angulaire de ce design : un fond violet au motif assez original, que j’avais peaufin\u00e9 puis t\u00e9l\u00e9charg\u00e9 via un outil en ligne de l’\u00e9poque.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

En tirant le fil de la nostalgie, je me suis rem\u00e9mor\u00e9 \u00e0 quel point cet outil de g\u00e9n\u00e9ration de motifs \u00e9tait g\u00e9nial pour planter un d\u00e9cor \u00e0 moindres frais. C\u2019\u00e9tait surtout un outil pour les profils visuels et cr\u00e9atifs, un bac \u00e0 sable aux r\u00e8gles tr\u00e8s contraignantes, mais o\u00f9 les possibilit\u00e9s \u00e9taient infinies. Le fonctionnement \u00e9tait le suivant : un set de motifs \u00e9tait \u00e0 disposition, avec de nombreux param\u00e8tres comme la taille, les couleurs ou la texture. Comme j\u2019avais mis le lien de cet outil directement sur mon site, dans ma liste de \u00ab\u00a0liens cools\u00a0\u00bb, il m\u2019a \u00e9t\u00e9 ais\u00e9 de voir ce que le service \u00e9tait devenu plus de quinze ans apr\u00e8s.

De plus, s’il m’avait vraiment plu \u00e0 l’\u00e9poque, je restais assez frustr\u00e9 de ne pas retrouver cet outil qui mariait, dans son interface, la complexit\u00e9 et la simplicit\u00e9 de mani\u00e8re aussi \u00e9l\u00e9gante. Bref, pouss\u00e9 par une curiosit\u00e9 gonfl\u00e9e de nostalgie, je clique sur le lien pour aller voir ce que le site est devenu.<\/p>\n\n\n\n

L’URL r\u00e9pond. Mais le site n’a plus rien \u00e0 voir : ce ne sont d\u00e9sormais que des pages de contenus SEO sans grand int\u00e9r\u00eat.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Comme tout bon historien d’Internet qui se respecte, la r\u00e9ponse a cette d\u00e9ception \u00e9tais de passer par web.archive.org<\/a>. Les dieux des internet sont de mon cot\u00e9, les archives sont pl\u00e9thoriques.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n


Les temps de r\u00e9ponses sont laborieux, les pages archiv\u00e9es manquent parfois de ressources, mais au moins il y a de quoi explorer dans cet oc\u00e9an de cache. mon choix s’arr\u00eate sur une archive des ann\u00e9es 2008<\/a>, surement la version qui est la plus proche de ce que j’ai connue et utilis\u00e9e.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n


En explorant les diff\u00e9rentes versions, je tombe sur la version actuelle du projet, patterninja.com<\/a>, beaucoup plus compl\u00e8te, plus propre, plus moderne \u00e9videmment, mais avec ce d\u00e9calage difficile \u00e0 expliquer o\u00f9 quelque chose manquait malgr\u00e9 tout, peut-\u00eatre la simplicit\u00e9, peut-\u00eatre juste le contexte de l\u2019\u00e9poque, ou alors ce biais un peu trompeur qui embellit tout ce qui est pass\u00e9. Je retrouve \u00e9galement le nom de la personne qui a tenu ce projet \u00e0 bout de bras.<\/p>\n\n\n\n

Ressusciter d’entre les morts<\/h2>\n\n\n\n

J’aurais pu m’arr\u00eater l\u00e0. Mais j’avais envie de refaire fonctionner cet outil ancestral \u2014 pas une r\u00e9plique parfaite, mais retrouver ce \u00ab\u00a0truc\u00a0\u00bb qui g\u00e9n\u00e8re un rendu vibrant directement \u00e0 partir d’un motif simple. Facilement, en quelques clics, avec une palanqu\u00e9e d’options intuitives \u00e0 utiliser. Je le voulais car j’\u00e9tais pass\u00e9 par ce chemin pour d\u00e9clencher l’inspiration de mon vieux site. Je ne me souvenais plus si le motif avait \u00e9t\u00e9 un point d’entr\u00e9e ou de sortie, mais il avait \u00e9t\u00e9 une \u00e9tape essentielle de la composition de son <\/strong>univers graphique. Et c’est parce que je voulais r\u00e9emprunter le m\u00eame chemin pour mes nouveaux projets que j’avais \u00e0 nouveau besoin de cet outil. L’outil d’origine n’existait plus, mais l\u00e0 o\u00f9 j’aurais jet\u00e9 l’\u00e9ponge tout seul, j’ai estim\u00e9 que le temps de le recr\u00e9er avec l’IA \u00e9tait d\u00e9sormais jouable.<\/p>\n\n\n\n

Je suis donc parti de quelque chose de tr\u00e8s simple : sauvegarder la page en local, nettoyer tout ce qui n\u2019\u00e9tait pas essentiel et virer les couches inutiles (les restes de fonctionnalit\u00e9s sociales, les frames de la Wayback Machine<\/em>). Assez vite, je me suis retrouv\u00e9 face \u00e0 une s\u00e9rie de petits blocages techniques, pas forc\u00e9ment complexes mais nombreux : des miniatures bas\u00e9es sur des GIF plut\u00f4t que des SVG, des probl\u00e8mes de rendu en local avec des images floues, etc.<\/p>\n\n\n\n

C\u2019est l\u00e0 que \u00e7a devient int\u00e9ressant parce que j\u2019ai commenc\u00e9 \u00e0 d\u00e9l\u00e9guer ces micro-probl\u00e8mes \u00e0 l\u2019IA : demander un script pour aller r\u00e9cup\u00e9rer des SVG depuis des URLs reconstitu\u00e9es, ajuster des comportements, comprendre pourquoi certaines choses ne marchaient pas, et petit \u00e0 petit tout s\u2019est remis en place. Pas d\u2019un coup, mais plut\u00f4t par it\u00e9rations successives. Avec ce sentiment assez \u00e9trange de voir un syst\u00e8me ancien reprendre vie sans vraiment passer par le processus classique de d\u00e9veloppement. En un week-end, le gros du travail avait \u00e9t\u00e9 fait ; A l’heure de l’AI, \u00e7a peut sonner comme peu efficace, mais malgr\u00e9 tout, j’\u00e9tais assez content du r\u00e9sultat. Une fois que tout fonctionnait \u00e0 peu pr\u00e8s, je me suis permis de d\u00e9river un peu, ajouter deux ou trois fonctionnalit\u00e9s qui manquaient selon moi.<\/p>\n\n\n\n

Panique \u00e9thique <\/h2>\n\n\n\n

J’aurais pu garder le site dupliqu\u00e9 en local et ne jamais le repartager. Une question se posait donc : ce que je faisais \u00e9tait-il du vol, un hommage ou du fan art ? Apr\u00e8s tout, il y avait des motifs tr\u00e8s travaill\u00e9s que je n’avais pas cr\u00e9\u00e9s. Le mieux \u00e9tait de prendre le taureau par les cornes : contacter l’auteur original pour lui d\u00e9crire honn\u00eatement ma d\u00e9marche. Je m’engageais, lors de mon premier e-mail, \u00e0 ne pas en faire une version commerciale et \u00e0 le citer comme auteur original. \u00c0 noter que, l\u00e0 encore, l’IA m’a aid\u00e9 \u00e0 r\u00e9diger un message cisel\u00e9 pour ce besoin relativement unique en son genre.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Le lendemain, il me r\u00e9pondait et me donnait carte blanche.<\/p>\n\n\n\n

Phylog\u00e9n\u00e9tique des internet<\/h2>\n\n\n\n

Je l’ai donc mis sur GitHub<\/a> et j\u2019ai continu\u00e9 \u00e0 l\u2019am\u00e9liorer. J’ai ajout\u00e9 de nouveaux motifs, chang\u00e9 l’identit\u00e9 visuelle en cr\u00e9ant un logo, adapt\u00e9 le tout au mobile \u2014 parce que forc\u00e9ment, en 2008, ce n\u2019\u00e9tait pas encore une contrainte \u2014 et ajout\u00e9 de petites features<\/em> absentes du site original ici et l\u00e0. D\u00e9j\u00e0, \u00e0 ce moment-l\u00e0, le projet n\u2019\u00e9tait plus seulement une restauration ; il devenait un peu quelque chose d\u2019autre, une sorte de version parall\u00e8le qui n\u2019aurait jamais exist\u00e9 sans cette d\u00e9rive. Toute la magie de la m\u00e9m\u00e9tique. Au final, j\u2019ai pu utiliser l\u2019outil comme je l\u2019avais fait quinze ans plus t\u00f4t, sauf que cette fois, il appartient \u00e0 Internet et est disponible pour tout le monde.

Je ne peux qu’\u00e9videmment vous encourager \u00e0 le consulter sur https:\/\/patternator.200.work<\/a> :<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

La puissance<\/h2>\n\n\n\n

Avant, construire un projet, c\u2019\u00e9tait souvent choisir ses d\u00e9pendances, accepter leurs contraintes et composer avec des couches qu\u2019on ne ma\u00eetrisait pas vraiment, parce que les recr\u00e9er aurait \u00e9t\u00e9 trop long et trop co\u00fbteux ; on \u00e9voluait donc dans un \u00e9cosyst\u00e8me rigide.<\/p>\n\n\n\n

Maintenant, avec ces outils, un d\u00e9veloppeur seul peut reconstituer ou inventer ces couches interm\u00e9diaires presque \u00e0 la demande. Pour reprendre une image, l’architecte peut maintenant cr\u00e9er ses ouvriers sur mesure. Mieux encore : il peut aussi fabriquer les briques \u00e0 la taille qui lui convient. Et s\u2019il veut aller plus loin, il peut m\u00eame fabriquer et rationaliser l\u2019usine qui produira ses briques sp\u00e9cifiques.<\/p>\n\n\n\n

Aujourd\u2019hui, cet architecte peut, d\u2019une certaine mani\u00e8re, invoquer directement les comp\u00e9tences dont il a besoin, ajuster les outils en temps r\u00e9el et cr\u00e9er des passerelles entre des couches qui n\u2019\u00e9taient pas cens\u00e9es communiquer. Il r\u00e9duit surtout cette distance entre l\u2019intention et l\u2019ex\u00e9cution qui \u00e9tait, jusque-l\u00e0, le vrai point de friction.

\u00c9videmment, cela ne veut pas dire que les d\u00e9veloppeurs d’aujourd’hui vont r\u00e9inventer la roue pour chaque d\u00e9tail. Mais le probl\u00e8me de beaucoup de biblioth\u00e8ques de code n’a-t-il pas \u00e9t\u00e9 de se positionner sur leur r\u00f4le, de d\u00e9finir leur p\u00e9rim\u00e8tre ? Quelles fonctions doivent-elles remplir pr\u00e9cis\u00e9ment ? Pour quels usages ? D\u00e9finir leur scope<\/em> a toujours \u00e9t\u00e9 un \u00e9l\u00e9ment d\u00e9terminant, car une biblioth\u00e8que qui remplit un maximum de cas gagne en poids et perd en performance la plupart du temps. \u00c0 l’inverse, une biblioth\u00e8que trop pr\u00e9cise est tr\u00e8s efficace, mais ne va pas forc\u00e9ment remplir le r\u00f4le qu’on voudrait lui assigner, ou alors il faudra ajouter des surcouches pour qu’elle s’adapte aux besoins sp\u00e9cifiques du projet.<\/p>\n\n\n\n

Avec l\u2019IA, toutes ces probl\u00e9matiques d\u2019arbitrage tendent \u00e0 devenir caduques. Si une biblioth\u00e8que ou un outil ne correspond pas exactement \u00e0 nos besoins, il devient ridiculement facile d’impl\u00e9menter le sien, adapt\u00e9 \u00e0 100 % \u00e0 son projet. C\u2019est exactement ce que j\u2019ai fait avec Patternator<\/strong> : recr\u00e9er un outil sur mesure pour mes besoins tr\u00e8s sp\u00e9cifiques.<\/p>\n\n\n\n

La madeleine<\/h2>\n\n\n\n

Cette recr\u00e9ation veut s\u00fbrement dire autre chose \u00e9galement. En psychologie cognitive, on sait que la r\u00e9cup\u00e9ration d’un souvenir est facilit\u00e9e si l’on se trouve dans le m\u00eame \u00e9tat ou contexte que lors de l’encodage. G\u00e9n\u00e9ralement, on parle de contexte environnemental (un lieu, une odeur). Mais dans mon cas, il s’agit d’un contexte dit \u00ab op\u00e9ratoire \u00bb. En reconstruisant l’interface et en r\u00e9cup\u00e9rant les motifs, j’ai s\u00fbrement recr\u00e9\u00e9 l’\u00e9cosyst\u00e8me technique qui avait permis \u00e0 mon \u00ab moi \u00bb de 2008 de cr\u00e9er. L’outil a donc un r\u00f4le psychologique : c’est un stimulus, un d\u00e9clencheur pour essayer de retrouver mon \u00e9tat d’esprit de l’\u00e9poque. Cet \u00e9l\u00e9ment cl\u00e9 porte un nom en psychologie cognitive : c’est un indice de r\u00e9cup\u00e9ration<\/strong> (retrieval cue<\/em>).<\/p>\n\n\n\n

La premi\u00e8re image est \u00e9videmment g\u00e9n\u00e9r\u00e9e par IA, et je me suis fait aider par celle-ci pour les corrections orthographiques et quelques rares passages r\u00e9dactionnels. La mani\u00e8re dont j’ai proc\u00e9d\u00e9 pourrait faire l’objet d’un post ; j’attends vos commentaires et encouragements !<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Derni\u00e8rement, comme beaucoup d\u2019entre nous, j\u2019ai profit\u00e9 de la puissance de l\u2019IA pour mener \u00e0 bien certaines choses qui \u00e9taient plus ou moins en stand-by par manque de temps, le genre de t\u00e2ches un peu ingrates qu\u2019on repousse toujours au lendemain sans trop y penser, et parmi elles il y avait notamment le fait de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6],"tags":[],"class_list":["post-962","post","type-post","status-publish","format-standard","hentry","category-boulot","category-promo"],"_links":{"self":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/comments?post=962"}],"version-history":[{"count":8,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/962\/revisions"}],"predecessor-version":[{"id":1041,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/962\/revisions\/1041"}],"wp:attachment":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/media?parent=962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/categories?post=962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/tags?post=962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}