C’est ici

C’est quoi ?

Une mosaïque des livres, jeux, films… que je « pratique », filtrables par année et caté­gorie. Un varia­teur permet de changer la taille des vignettes, pour avoir une vue pano­ra­mique ou au contraire très détaillée.

Mais pourquoi ?

Dématérialisation oblige, ma biblio­thèque ou ce qui traine sur ma table basse (d’où le nom du bidule) ne sont plus guère repré­sen­ta­tifs de mes pratiques cultu­relles. Je cher­chais un joli palliatif.

Les données viennent de mon profil Sens Critique et sont mises à jour nuitam­ment. Malgré tous ses défauts, je ne connais pas d’autre site permet­tant de consi­gner des œuvres de médias variés et poten­tiel­le­ment fran­çaises.

Et soyons francs, c’était l’oc­ca­sion de bidouiller. Quelques remarques :

Fluidité

J’ai essayé d’avoir une grille avec le minimum de valeurs prédé­fi­nies. Les gout­tières, la taille des images et le nombre de colonnes dépendent de la taille de la fenêtre et de la valeur du zoom. C’est sans doute over­kill et donne un CSS plein de valeurs magiques, m’enfin.

Détails :

• L’intensité de l’effet au survol est inver­se­ment propor­tion­nelle à la taille de l’image.
• Les diffé­rences de ratio des affiches sont réglées à coup de object:cover-fit, sauf pour celles en paysage où on ajoute un effet de « letterbox » floutée. (J’ai d’ailleurs décou­vert que pas mal de jeux vidéo indés récents reviennent récem­ment au format paysage)
• Pour qu’au survol les images ne sortent pas du cadre, on change la transform-origin de celles posi­tion­nées en bordure de fenêtre.

Typescript

En tant qu’au­to­di­dacte habitué aux langages dyna­miques et interprétés,iu j’ai trouvé ça génial. On résume Typescript à un surcroit de lour­deur très accep­table vu le gain de sûreté, pour­tant j’ai trouvé son usage souvent plus fluide que Javascript, pas moins.

Un langage de program­ma­tion permet un dialogue avec la machine, c’est… un langage. La boucle d’in­te­rac­tion peut être très courte (comme avec une ligne de commande) ou très longue (insérer des cartes perfo­rées et attendre la nuit pour voir le résultat). Avec Typescript, l’or­di­na­teur est plus bavard, me parle en direct et m’a beau­coup faci­lité la prise en main de grosses biblio­thèques.

Puppeteer

Les joies du scra­ping : il y a une info impor­tante que, dans un contexte, on ne peut pas récu­pérer sur Sens Critique sans authen­ti­fi­ca­tion. Du coup j’uti­lise Puppeteer, qui lance et contrôle auto­ma­ti­que­ment un navi­ga­teur entier. Bonjour, artillerie lourde et sur-ingénierie. En prod cette dépen­dance prend à elle les ²⁄₃ du stockage.

C’est fasci­nant de lancer Puppeteer en mode graphique et de l’ob­server ouvrir une fenêtre, scroller et cliquer tout seul.

CDN

Un content deli­very newtork, ai-je appris, n’est pas juste un serveur dédié et opti­misé pour les images et vidéos. Les CDN modernes four­nissent plein de services liés, parfois acces­sible simple­ment en ajou­tant un para­mètre à l’URL : géné­ra­tion à la demande de variantes d’une image (dimen­sions, format de fichier…), analyse intel­li­gente (OCR, crop en se concen­trant sur le contenu « inté­res­sant », détec­tion des visages…), et cetera.

Bref

Je vous passe plein de péri­pé­ties et de nouveautés (Heroku, Postgres…). J’ai fait des mauvais choix tech­niques, pas anti­cipé plein de trucs, dû changé d’orien­ta­tion… Bref un vrai projet. (ノ°Д°）ノ︵ ┻━┻

Pour para­phraser Musset :

J’ai souf­fert souvent, je me suis trompé quel­que­fois, mais j’ai codé.

Les sources sont ici.