Bon, faut qu'on parle un peu du moteur de recherche de mon site. Ceux qui l'ont déjà utilisé savent de quoi je parle : c'était pas terrible. Enfin, « pas terrible » j'suis gentil. C'est un espèce d'overlay avec des résultats certes fiables mais c'était vraiment pas pratique.

Et en plus de ça, comme j'ai un site statique généré avec Hugo, je passais par Algolia pour la recherche. Si vous ne connaissez pas, Algolia c'est un service cloud qui indexe votre contenu et vous fournit une API de recherche ultra-rapide. Sur le papier c'est génial et dans la pratique aussi d'ailleurs sauf que voilà, ça coûte des sous. Et mon site rencontre un franc succès ces derniers temps (merci à vous !), donc j'ai de plus en plus de visiteurs, donc de plus en plus de recherches, donc une facture Algolia qui grimpe gentiment chaque mois.

Du coup je me suis dit : « Et si je trouvais une solution de recherche pour sites statiques ? » Parce que oui, ça existe et c'est comme ça que j'ai découvert Pagefind.

Pagefind c'est donc un moteur de recherche statique open source développé par CloudCannon qui fonctionne comme ceci : Au moment du build de votre site, Pagefind parcourt tout votre HTML généré et crée un index de recherche qu'on peut interroger avec un peu de JS. Y'a donc plus d'API, et tout se fait localement sur le navigateur des internautes.

Bref, ça avait l'air très cool alors évidemment, je me suis lancé dans l'aventure et comme j'aime bien me compliquer la vie, j'ai décidé de pas juste intégrer Pagefind tel quel. Non non. J'ai voulu recréer l'interface du Google de 1998 parce que à quoi bon avoir son propre site web si on peut pas s'amuser un peu ^^.

Laissez-moi donc vous raconter cette aventure.

Le problème avec Algolia

Leur service est excellent, je dis pas le contraire, la recherche est rapide, les résultats sont pertinents, l'API est bien foutue mais voilà, y'a le modèle de pricing puisque Algolia facture au nombre de requêtes de recherche.

Plus les gens cherchent sur votre site, plus vous payez et quand vous avez un site qui fait plusieurs millions de pages vues par mois, bah... ça chiffre vite. En gros je dépasse très vite les 10 000 recherches offertes chaque semaine et ensuite ça chiffre. C'est pas la mort, mais c'est un coût récurrent débile pour un truc qui pourrait être gratuit.

En plus de ça, y'a la dépendance à un service externe. Si Algolia tombe, ma recherche tombe. Et si Algolia change ses prix, je vais devoir subir. Même chose si Algolia décide de modifier son API... il faudra que j'adapte mon code. Bref, c'est le cloud dans toute sa splendeur... C'est pratique mais on n'est jamais vraiment chez nous.

Pagefind à la rescousse

Pagefind résout donc tous ces problèmes d'un coup. C'est un outil en ligne de commande qui s'exécute après votre générateur de site statique (Hugo dans mon cas, mais ça marche avec Jekyll, Eleventy, Astro, ou n'importe quoi d'autre).

Concrètement, vous lancez :

npx pagefind --site public

Et Pagefind va :

• 1. Scanner tous vos fichiers HTML dans le dossier public/
• 2. Extraire le contenu textuel (en ignorant la nav, le footer, les pubs si vous lui dites)
• 3. Créer un index de recherche optimisé
• 4. Générer des fichiers JavaScript pour interroger cet index côté client

Et le résultat c'est un dossier pagefind/ qui contient tout ce qu'il faut. Ensuite; à vous de servir ces fichiers statiquement avec le reste de votre site, et la magie pourra opérer !

L'index pour mes 18 000 articles fait environ 1,5 Go. Ça peut paraître beaucoup, mais Pagefind est malin car il découpe l'index en fragments et ne charge que ce qui est nécessaire pour la recherche en cours. Du coup en pratique, une recherche typique télécharge quelques centaines de Ko, et pas plus.

L'intégration technique

Pour intégrer Pagefind dans mon workflow Hugo, j'ai donc été cherché le binaire, je l'ai mis sur mon serveur et je l'ai appelé dans un cron comme ça, je rafraichi l'index de recherche 1 fois par jour (et pas à chaque génération du site).

0 4 * * * /home/manu/pagefind/pagefind --site /home/manu/public_html --output-path /home/manu/public_html/pagefind >> /var/log/pagefind.log 2>&1

J'ai aussi créé un fichier de configuration pagefind.yml pour affiner le comportement :

root_selector: "[data-pagefind-body]"
exclude_selectors:
 - "header"
 - ".site-header"
 - "footer"
 - ".sidebar"

L'astuce ici c'est d'indexer uniquement les div ayant la class data-pagefind-body='true' et d'exclure les éléments qui ne font pas partie du contenu éditorial afin de ne pas indexer ce qui se trouve dans le header, les natives, le footer...etc.

Côté JavaScript, Pagefind utilise les imports ES6 dynamiques. Ça veut dire que le moteur de recherche n'est chargé que quand l'utilisateur lance effectivement une recherche :

async function initPagefind() {
pagefind = await import('/pagefind/pagefind.js');
await pagefind.init();
}

Et pour faire une recherche :

const search = await pagefind.search("linux");
// search.results contient les IDs des résultats
// On charge le contenu de chaque résultat à la demande
for (const result of search.results) {
 const data = await result.data();
 console.log(data.url, data.meta.title, data.excerpt);
}

C'est bien fichu parce que search.results retourne immédiatement les références des résultats, mais le contenu réel (titre, extrait, URL) n'est chargé que quand vous appelez result.data(). Du coup vous pouvez implémenter une pagination propre sans télécharger les données de milliers de résultats d'un coup.

Le délire rétro - Recréer Google 1998

Maintenant que j'avais un moteur de recherche fonctionnel, fallait l'habiller. Et c'est là que j'ai eu cette idée un peu débile : Pourquoi pas recréer l'interface du Google de 1998 ?

Pour les plus jeunes qui lisent ça, Google en 1998 c'était une page blanche avec un logo, un champ de recherche, et deux boutons : « Google Search » et « I'm Feeling Lucky« . Pas de suggestions, pas de carrousels, pas de pubs... Juste un champs de recherche. C'était la belle époque !

J'ai donc créé une page de recherche avec deux vues distinctes. La page d'accueil avec le logo centré et le champ de recherche au milieu, exactement comme le Google originel.

Et la page de résultats avec le logo en petit en haut à gauche et les résultats en dessous.

Pour le code CSS, j'ai voulu être fidèle à l'époque. Times New Roman comme police par défaut, les liens en bleu souligné qui deviennent violet une fois visités. Et surtout, les boutons avec l'effet 3D des interfaces Windows 95 :

.search-button:active { border-style: inset; }

Ce border: outset et border-style: inset au clic, c'est exactement ce qui donnait cet effet de bouton en relief qu'on avait partout dans les années 90. Pour moi, ça fait toute la différence pour l'authenticité. Même le logo, je l'ai volontairement « dégradé » pour qu'il soit de la même qualité que le logo Google d'origine.

La pagination « Koooooorben »

Vous vous souvenez de la pagination de Google avec « Goooooogle » en bas de page ? Le nombre de « o » correspondait au nombre de pages de résultats. J'ai fait pareil, mais avec « Koooooorben ».

let logo = 'K'; for (let i = 0; i < oCount; i++)
{
logo += o;
} logo += 'rben'; }

Plus il y a de résultats, plus il y a de « o ». C'est complètement inutile mais ça me fait marrer à chaque fois que je le vois.

Le bouton « J'ai de la chance »

Ah, le fameux « I'm Feeling Lucky » de Google, j'ai voulu l'implémenter comme à l'époque ! Si vous tapez une recherche et cliquez sur « J'ai de la chance », vous êtes envoyé sur le premier résultat. Classique. Mais si vous cliquez sur le bouton avec le champ vide sur la home de la recherche, vous êtes envoyé sur un article aléatoire parmi les +18 000 du site.

Pour ça, j'ai utilisé une astuce : le sitemap. Mon Hugo génère un fichier sitemap.xml qui contient toutes les URLs du site et je peux aller piocher dedans en JS :

const articles = [...xml.querySelectorAll('loc')] .map(loc => loc.textContent) .filter(url => {
// Exclure les pages qui ne sont pas des articles
const path = new URL(url).pathname;
return !path.startsWith('/categories/') && !path.startsWith('/page/') && path !== '/';
});
const randomUrl = articles[Math.floor(Math.random() * articles.length)];
window.location.href = randomUrl;
} }

Un seul fetch, un peu de parsing XML natif, et hop c'est le grand retour de la fonctionnalité « article aléatoire » qui vous manquait, je le sais !

Tri et nombre de résultats

Je vous ai aussi mis une listbox qui vous permet d'afficher 10, 25 ou 50 résultats ainsi qu'un tri par pertinence ou data. Et ça aussi Pagefind sait parfaitement le navigateur.

Mode sombre et accessibilité

Même si l'interface est rétro, j'ai quand même ajouté quelques fonctionnalités modernes. Le mode sombre respecte les préférences système, et j'ai intégré la police OpenDyslexic pour les personnes dyslexiques.

Le truc important c'est de charger ces préférences avant le rendu de la page pour éviter le fameux flash. J'ai donc un petit script qui lit les préférences dans le localStorage et applique les classes CSS immédiatement :

function() {
 if (localStorage.getItem('theme') === 'dark') {
 document.documentElement.classList.add('dark-mode');
 }
 if (localStorage.getItem('dyslexic-font') === 'true') {
 document.documentElement.classList.add('dyslexic-mode');
 }
});

Gestion de l'historique navigateur

Un détail qui peut sembler anodin mais qui est super important pour l'expérience utilisateur c'est la gestion du bouton retour du navigateur.

Quand vous faites une recherche, l'URL change selon votre requête du genre /recherche/?q=linux&p=2. Du coup si vous partagez cette URL à un collègue, la personne arrivera directement sur les résultats de recherche. Et si vous utilisez le bouton retour, vous reviendrez alors à la recherche précédente.

window.addEventListener('popstate', () => {
const query = new URLSearchParams(location.search).get('q');
if (query) doSearch(query);
else showHomePage();
});

Liens vers d'autres moteurs

Et si vous ne trouvez pas votre bonheur dans mes +18 000 articles (ce qui serait quand même étonnant ^^), j'ai ajouté des liens pour relancer la même recherche sur Google, DuckDuckGo, Qwant, Brave et Ecosia. Bref, un petit service bonus pour mes visiteurs, exactement comme le proposait Google à l'époque.

Le bilan - Algolia vs Pagefind

Après 1 semaine d'utilisation, voici donc mon verdict ! Côté portefeuille d'abord, Algolia me coûtait entre 60 et +100 euros par mois et maintenant pour Pagefind, c'est zéro euros ! Et les performances sont également au rendez-vous. Algolia c'était rapide et bien là, ça l'est encore plus. Seul compromis à noter, l'index Algolia se mettait à jour en temps réel, alors que Pagefind nécessite une reconstruction au moment du build.

La conclusion

Voilà, j'ai maintenant une recherche qui marche vraiment bien, qui me coûte 0€ par mois, et qui a un look rétro qui va en surprendre plus d'un...

Alors est-ce que c'était nécessaire de passer autant de temps sur le design rétro ? Hé bien absolument pas. Mais est-ce que ça valait le coup ?

Franchement, oui !! C'est mon site, je fais ce que je veux, et si ça peut faire sourire quelques visiteurs nostalgiques des débuts du web, c'est du bonus. D'ailleurs un grand merci aux Patreons qui me soutiennent car sans eux, je n'aurais pas pu passer mon dimanche là dessus ^^

Et puis surtout, ça m'a permis de découvrir Pagefind qui est vraiment un excellent outil. Donc si vous avez un site statique (ou n'importe quel type de contenu textuel) et que vous cherchez une solution de recherche gratuite et performante, je vous le recommande chaudement. La documentation est claire, l'intégration est simple, et le résultat est top !

Allez, maintenant vous pouvez aller tester la nouvelle recherche sur le site . Et si vous cliquez sur « J'ai de la chance » sans rien taper... bonne découverte !

Vous vous rappelez de votre PlayStation 2, cette bonne vieille console qui a bercé les années 2000 avec ses GTA, ses Final Fantasy et ses Pro Evolution Soccer ? Et bien figurez-vous que Sony avait sorti à l'époque un kit officiel pour transformer la machine en PC sous Linux. D'abord au Japon en 2001, puis aux États-Unis en 2002. Oui, officiellement, fait par Sony.

C'était complètement dingue quand on y pense !

Le kit PS2 Linux (compatible uniquement avec les modèles "fat" avec baie d'extension) comprenait tout un attirail de ouf : un disque dur IDE de 40 Go, un adaptateur réseau (qui faisait aussi office d'interface IDE), un adaptateur VGA pour brancher la console sur un moniteur compatible (sync-on-green requis), une carte mémoire de 8 Mo (requise mais non incluse), et même un clavier et une souris USB aux couleurs de la PlayStation. Sony avait vraiment mis le paquet sur la qualité de ces périphériques, avec un clavier qui avait un toucher plutôt agréable pour l'époque.

Côté électronique, la PS2 embarquait un processeur MIPS R5900 (le fameux Emotion Engine) et le système tournait sur un kernel Linux 2.2.1 basé sur Kondara MNU/Linux (une distro japonaise dérivée de Red Hat). Par contre, avec seulement 32 Mo de RAM, fallait pas s'attendre à des miracles. Le système incluait quand même l'environnement de bureau Window Maker, un gestionnaire de fenêtres old school mais terriblement classe avec son petit pingouin.

Depuis plus de 20 ans, Exult fait tourner Ultima VII sur Windows, macOS et Linux. C'est un moteur open source génial, mis à jour en mai dernier, qui nécessite les fichiers originaux du jeu et permet de finir The Black Gate et Serpent Isle sans souci. Alors pourquoi diable Anthony Salter a-t-il créé U7 Revisited , un autre moteur pour le même jeu ?

Hé bien parce qu'Exult et U7 Revisited n'ont pas du tout le même objectif.

Le truc que beaucoup ignorent, c'est qu'Ultima VII était techniquement un monde 3D coincé dans un moteur 2D. En 1992, chaque objet du jeu avait déjà une largeur, une profondeur et une hauteur, ce qui fait que ce monde était donc composé de blocs 3072x3072x16. Mais la technologie de l'époque ne permettait pas d'afficher tout ça en vraie 3D, du coup Origin a dû se contenter d'une vue fixe pseudo-isométrique.

Exult vise donc à reproduire cette expérience originale au plus près, tout en ajoutant quelques améliorations. C'est son but et c'est très bien comme ça.

U7 Revisited, lui, part d'un autre postulat qui est : Et si on montrait enfin ce monde 3D dans un vrai moteur 3D ?

Anthony Salter a donc développé son propre moteur pour présenter Britannia avec une caméra rotative, un peu comme Dungeon Keeper ou Grandia. Vous pouvez ainsi tourner autour des bâtiments, zoomer, regarder les choses sous différents angles.

Et ça, ça règle une vraie frustration du jeu original car pour ceux qui y ont joué, vous vous souvenez peut-être de ces moments bien relous où vous cherchiez désespérément un levier ou une clé cachée derrière un mur ? Origin utilisait souvent cette technique de planquer des objets en ne laissant dépasser qu'un ou deux pixels.

Hé bien avec une caméra rotative, fini ce genre de galère.

Côté contrôles, c'est du moderne : WASD pour bouger, Q et E pour la rotation, molette pour le zoom. Le projet est codé en C++ et Lua, et il y a même des touches de fonction (F1 à F11) pour interagir avec différents aspects du monde.

Le développement avance bien d'ailleurs et dans ses dernières updates d'août, Anthony a présenté le support widescreen, un meilleur éclairage et le drag-and-drop pour les objets.

Il existe également plein d'autres projets fans autour d'Ultima comme Nuvie qui recréé Ultima 6, Pentagram qui s'occupe d'Ultima VIII. La communauté Ultima adore refaire ses jeux préférés avec des outils modernes, c'est comme ça. Mais U7 Revisited a quand même cette approche unique avec cette vision 3D du monde.

Si vous voulez tester, il faut copier les fichiers du jeu original DOS dans le dossier /Data/u7 puis builder le projet via CMake ou Meson.

Merci à Joseph de m'avoir signalé ce projet.

Vous vous souvenez du MSX, cette machine 8 bits des années 80 qui a fait rêver toute une génération avant que le PC ne vienne tout écraser ? Hé bien y'a un site qui a décidé de préserver absolument TOUT ce qui existe pour cette plateforme, et quand je dis tout, c'est vraiment tout.

File-Hunter , c'est le projet d'un gars passionné, Arnaud de Klerk , qui depuis 1999 (oui, ça a 25 ans ce truc) archive méticuleusement chaque fichier, chaque jeu, chaque démo, chaque magazine lié à l'écosystème MSX. Le site existe même depuis l'époque où FONY créait encore du contenu pour les systèmes 8-bit . Donc autant dire que c'est une vraie institution de la préservation rétro.

Le site propose au téléchargement pas moins de 24 catégories de contenu. Des jeux évidemment (MSX1, MSX2, MSX2+, Turbo-R), mais aussi des démos, des disk-magazines, des émulateurs, des polices, des systèmes d'exploitation, des ROMs système, du contenu technique, des manuels, des livres, des magazines numérisés, de la musique, des programmes, du code source... Bref, si ça concerne le MSX et que ça existe quelque part sur Terre, y'a de fortes chances que ce soit archivé ici.

Côté formats, c'est la fête du slip vintage ^^ puisqu'on y trouve des fichiers DMK pour les disquettes, des TSX et CAS pour les cassettes, des conversions ROM, des fichiers VHD pour les disques virtuels, et même des trucs en LaserDisc. Y'a aussi des versions modifiées de jeux, des traductions anglaises, des cheats, des maps, des sauvegardes... C'est vraiment le genre de collection qui fait baver n'importe quel collectionneur.

Et le truc cool c'est que vous pouvez jouer directement dans votre navigateur sans rien installer . En effet, le site propose une plateforme de jeux MSX et même Amiga jouables online, optimisée pour téléphones et tablettes. Et pour ceux qui préfèrent tout récupérer d'un coup, pas la peine de tout scraper (vous finiriez pas vous faire bannir votre IP), car y'a un torrent complet disponible et même une appli Android. Le fichier allfiles.txt pèse plus de 3 Mo, ce qui vous donne une idée de l'ampleur du bazar.

Bref, si vous avez un petit coup de nostalgie MSX ou si vous voulez découvrir ce que c'était que le gaming avant que tout devienne du photorealistic next-gen, File-Hunter est votre destination du jour. Et comme d'hab, un grand merci à Lorenper pour le partage !

Vous vous souvenez des vieux iPod touch ? Je dois encore en avoir un qui traine au fond d’un tiroir et malheureusement, l’iPod touch de 3ème génération, sorti en 2009, n’a jamais officiellement reçu iOS 6 puisqu’Apple a décidé de le laisser sur le bord de la route avec iOS 5.1.1. Snif c’est pas gentil ! Mais c’était sans compter sur NyanSatan , un dev qui vient de prouver que c’était parfaitement possible faire tourner iOS 6 dessus.

Le projet s’appelle SundanceInH2A et l’idée bien que tordue est géniale, vous allez voir. En effet, l’iPod touch 3 partage quasiment le même hardware que l’iPhone 3GS qui, lui, a eu droit à iOS 6 officiellement. C’est la même famille de puces (S5L89xx), une architecture proche et donc on peut se demander pourquoi Apple n’a pas voulu le support si c’était aussi similaire. Probablement une histoire de segmentation marketing, mais bon, bref, passons…

La manip c’est donc de prendre le firmware iOS 6 de l’iPhone 3GS et de le transplanter sur l’iPod touch 3. Mais ça implique de modifier pas mal de trucs : le DeviceTree (la carte d’identité matérielle du device), le kernelcache (le noyau + toutes ses extensions), le bootloader iBoot, et même des morceaux du système comme le dyld shared cache.

Le plus technique dans l’histoire, c’est la reconstruction du kernelcache car l’iPod touch 3 avait des builds internes d’iOS 6 avec un noyau compatible, mais les kexts (extensions kernel) n’étaient pas tous présents. Du coup, NyanSatan a dû utiliser un outil Apple non public appelé kcgen pour reconstruire tout ça proprement. Et pour installer ce firmware modifié sans que l’appareil refuse de démarrer, il a exploité une faille HFS+ dans le bootloader d’iOS 5, permettant un jailbreak untethered.

Cette restauration prend alors environ 5 minutes et vous vous retrouvez sur l’écran de configuration d’iOS 6. Bon après, faut pas s’attendre à des miracles niveau utilisation quotidienne car iOS 6 date quand même de 2012 ce qui fait que la plupart des services en ligne (y compris ceux d’Apple) ne fonctionnent plus. Mais pour les collectionneurs et les curieux de l’archéologie iOS, c’est un exploit technique sympa !

Le concept ici c’est de prendre la série animée trash de Trey Parker et Matt Stone et de la transformer en film d’époque grâce à l’IA. Ça commence donc de manière assez réaliste avec les personnages principaux en version live-action rétro avec une petite voix off à l’ancienne… puis ça part complètement en vrille quand on arrive à Mr. Garrison, Satan et Mr. Hankey (mon préféré).

Et pour ceux qui se demandent, le Super Panavision 70 c’était le format cinéma panoramique haute résolution utilisé pour les grandes productions hollywoodiennes dans les années 50-70 pour Ben-Hur, 2001 l’Odyssée de l’espace, ce genre de trucs épiques.

Si vous aimez tout ce qui est rétro, vous avez peut-être déjà essayé de donner un look MS Dos , Windows 95 , Windows 98 , Windows XP ou encore Windows 7 à votre site web.

Ce que vous n’avez jamais osé faire, c’est de lui donner un look Apple System 6 !

Et ça c’est quand même un OS qui est sorti en 1988 soit 7 ans avant Windows 95 et ce qui est incroyable c’est qu’il avait déjà une interface parfaitement mature avec des fenêtres, des icônes, des menus déroulants et tout ça était en noir et blanc, mais c’était pas moche, bien au contraire !

Et ce qu’on oublie c’est que Windows 3.0 a débarqué deux ans plus tard en 1990 avec une interface… étrangement familière. Alors on ne va pas se mentir, Microsoft s’est LARGEMENT inspiré de ce qu’Apple faisait depuis 1984 avec le premier Macintosh qui se sont eux-mêmes inspiré des interfaces vues lors de la visite de Steve Jobs au Xerox PARC.

Apple qui ne doute de rien, a même attaqué Microsoft en justice pour ça en 1988. Le procès a été perdu, mais bon, l’histoire retient qui a copié qui !

Du coup, plutôt que de continuer à cloner les clones, system.css ferme la boucle en revenant à la source. Ce projet est développé par Saket Choudhary et prend son inspiration directe des guidelines de design d’Apple pour System 6, la dernière version monochrome de macOS avant l’arrivée de System 7 en couleur en 1991.

Le truc cool avec system.css, c’est que ça fonctionne exactement comme 98.css. Y’a aucun JavaScript… Vous incluez juste le fichier CSS via CDN ou npm, et hop, tous vos composants HTML prennent instantanément l’apparence d’une interface Macintosh de 1988. Des boutons arrondis, des fenêtres avec une bordure de 19 pixels, des barres de titre, des menus déroulants incroyables, des checkboxes carrées, des boites de dialogues avec double bordure. Tout est là !

L’installation se fait en deux lignes. Via CDN, vous balancez ce code dans votre HTML:

<link rel="stylesheet" href="https://unpkg.com/@sakun/system.css">

`npm i @sakun/system.css`