J’ai fait un truc


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 23 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.

Un minuteur en PWA pour vos ateliers

J’ai fait un minu­teur, il est joli, il est cool, il est dispo­nible ici.

Quoi qu’est-ce que c’est ?

C’est un minu­teur. il décompte le temps. Enfin, pas tout le temps. Il compte le temps pendant un certain temps, que juste­ment vous défi­nissez, c’est le but. Il ne décompte pas le temps jusqu’à la fin des temps. Enfin, vous pouvez essayer de le régler à une valeur très très haute et attendre très très long­temps jusqu’à la mort ther­mique de l’uni­vers, mais vous risquez d’at­tendre pour rien, ou de vous tromper dans votre esti­ma­tion et de rater la fin à deux minutes près. Ce serait ballot.

Mais il est parfait pour minuter du collage de post-it.

  • Il est pensé pour être bien visible, par exemple projeté en réunion ou en forma­tion, pas sur télé­phone ou dans un coin de votre écran.
  • Les touches espace et entrée permettent de lancer et d’arrêter le minu­teur.
  • Si vous les acceptez, des noti­fi­ca­tions natives appa­rai­tront à 50, 25, 10 et 0% du temps.
  • D’après mes tests, il fonc­tionne même sans réseau.
  • Via Chrome, il peut être installé en cliquant sur l’icône « plus » dans la barre d’adresse et appa­raitra comme n’im­porte quelle appli­ca­tion locale.

Pourquoi ?

  • Ce n’est pas sans utilité.
  • C’était l’oc­ca­sion de s’ini­tier à Vue.js.
  • Comme il y a plusieurs manières de modi­fier le temps, c’est un bon exer­cice de concep­tion tech­nique pour la gestion des états.
  • Il y aussi des choix de concep­tion à faire sur des actions d’ap­pa­rence anodines. Par exemple : faut-il auto­riser l’ajout de minutes en cours de route, sans même faire pause ? Pour moi oui, c’est un cas d’usage en pleine forma­tion. OK, mais alors l’ac­tion de remise à zéro doit-elle réini­tia­liser à la durée d’ori­gine, ou à cette durée assortie des minutes ajou­tées ? Plein de petites ques­tions comme ça.

Détails tech­niques

App en Vue.js, avec vue-cli et le module cli-plugin-pwa qui se charge d’une bonne partie de la trans­for­ma­tion en PWA.

Si vous voulez rire, le code est ici.

PWA : progres­sive web appli­ca­tion. Un ensemble de tech­no­lo­gies permet­tant d’en­ri­chir une page web de fonc­tions réser­vées tradi­tion­nel­le­ment à des appli­ca­tions natives et locales. Notifications, fonc­tions hors-ligne, accès aux péri­phé­riques, etc,

Un plugin Sketch pour importer du contenu depuis le presse-papier

Beaucoup de plugins Sketch pour l’im­port de contenu (Craft, Data Populator…) sont pensés pour des sources de données non modi­fiables (banque d’images, noms de pays…), ou pour des données complexes à synchro­niser avec des maquettes graphiques abou­ties. Suivant les plugins, ça implique de renommer des calques, d’avoir un fichier de données en TXT voire en JSON… bref des procé­dures un peu lourdes.

Mon cas d’usage est beau­coup plus simple : le plus souvent, je veux rapi­de­ment copier-coller une liste de textes depuis un tableau ou un mail, les coller dans une suite de calques. Et c’est tout.

Qu’à cela ne tienne, j’ai créé un plugin pour Sketch.


Lien vers le fichier


Comment l’uti­liser ?

Copiez une liste de texte, sélec­tionnez des calques ou des symboles, utilisez le menu « data » de Sketch et paf, chaque ligne de texte est collée dans un élément. Si le symbole comporte plusieurs surcharges (over­rides), le plugin utili­sera la première.

Même pour des cas plus complexes (par exemple peupler un tableau), je trouve plus simple de répéter cette méthode autant de fois qu’il y a de colonnes que, mettons, de s’embêter avec du JSON.

Comme d’ha­bi­tude, rapports de bug et retours sont les bien­venus.

Un plugin de typographie française pour Sketch

Résumé : j’ai créé un plugin Sketch pour respecter auto­ma­ti­que­ment les règles typo, espaces insé­cables et bien plus.

icone du plugin
Typographie frenchy

Tout a commencé par une inter­face comme celle-ci :

screenshot de boite de dialogue

… Dans le titre, un magni­fique point d’ex­cla­ma­tion seul sur sa ligne, problème récur­rent dans une appli­ca­tion mobile sur laquelle je travaillais. Je me suis demandé comment résoudre ce problème, sans demander aux déve­lop­peurs de mémo­riser chaque règle et d’in­sérer systé­ma­ti­que­ment des carac­tères spéciaux à la main. Ces carac­tères, ce sont les espaces insé­cables, qui collent la ponc­tua­tion au signe précé­dent. Sur le web ça implique de taper des choses sympa­thiques comme   ou d’uti­liser d’obs­curs raccourcis clavier.

Une meilleure alter­na­tive est d’au­to­ma­tiser le problème, soit en début de chaine (comme le fait Word), soit en fin de chaine (comme ce plugin pour WordPress ou comme le fait nati­ve­ment SPIP). Vu qu’il faudrait attendre long­temps que chaque système ait son plugin de typo, j’ai choisi d’ex­plorer la première piste en créant un plugin pour Sketch. Ca ne règle pas le problème du contenu saisi direc­te­ment dans l’in­ter­face de contri­bu­tion des diffé­rents CMS, mais, de même qu’un déve­lop­peur peut copier-coller un code RGB depuis Zeplin ou Invision, l’idée est que des gens pour­raient copier et coller du texte d’in­ter­face, par exemple celui d’une barre de menu. On est d’ac­cord que c’est opti­miste : si demain ce texte change, il y a peu de chance qu’il soit ressaisi d’abord dans Sketch.

Mais c’est une voie inté­res­sante. Après tout, Invision, Figma ou Framer génèrent des maquettes de plus en plus compa­tibles avec du HTML/CSS. Cette proxi­mité entre concep­tion et réali­sa­tion pour­rait aussi s’ap­pli­quer au texte.

Dans un tout autre angle, voir aussi Kopie, outil de rédac­tion colla­bo­ra­tive synchro­nisée avec Sketch.

Ajoutons que le plugin apporte aussi quelques embel­lis­se­ments direc­te­ment dans les maquettes, indé­pen­dam­ment de ces ques­tions de work­flow :

  • De " à «
  • De double tiret (--) à tiret demi-quadratin ( – )
  • Certaines frac­tions (½, ⅓, ¼ )
  • Suffixes ordi­naux : de 2e à 2ᵉ
  • Points de suspen­sion…
  • De N° à №

Bref. Plugin de typo­gra­phie auto­ma­tique. C’était fun à faire. Retours bien­venus.

Expérimenter avec une tétière inversée

Résumé : sur mobile j’ai changé la barre de menu du blog.

Pendant long­temps, quand on ouvrait mon blog sur télé­phone on voyait ça :Navigation blogmobile v1

Ça fait un gros pâté de texte non ? Nom du blog, puis liens, puis titre de l’ar­ticle. Les liens du menu, notam­ment, sont plus directs et effi­caces qu’un menu-burger, mais ils font très lourds sans vrai­ment être parlants ou inciter à cliquer. Comment rendre ce menu plus discret sans perdre en utili­sa­bi­lité ? Une solu­tion : un menu-tiroir masqué par défaut, mais pas un menu-burger pour autant. Pour l’ou­vrir, il suffit de scroller vers le haut ou d’ap­puyer sur la mani­cule. Essayez de vous-même sur un télé­phone, une fenêtre étroite ou regardez cette vidéo :

Pourquoi ce choix ? J’avais envie d’expérimenter autour de l’idée de la page web comme canevas infini (pour reprendre une expres­sion de Scott McCloud). Une page web n’est pas un rectangle avec des fron­tières claires ni un sens de lecture prédé­fini.

Image prise à Frank Chimero

Ça ne veut pas dire qu’on peut faire n’im­porte quoi : les limites sont celles de la compré­hen­sion du lecteur. Ici on reste sage et ce menu inversé est même plus ergo­no­mique qu’un menu-burger. D’abord il est tout à fait décou­vrable : la mani­cule est bien mise en évidence, on peut appuyer dessus ou sur toute la largeur de l’écran et le menu est suggéré par une saillie. Ensuite, parce qu’au lieu de devoir repérer et viser un bouton, il suffit d’un simple geste de scroll. Comme le dit Joshua Porter, « le défi­le­ment est une conti­nua­tion, le clic une déci­sion ». Enfin, ce geste n’est pas arbi­traire mais cohé­rent avec la manière dont le menu appa­rait : scroller vers le haut fait appa­raitre progres­si­ve­ment plus de page, c’est le prin­cipe même du scroll. Alors que dans l’ab­solu un bouton-burger pour­rait être placé n’im­porte et le menu pour­rait appa­raitre n’im­porte comment.

Bref, je trouve ça pas mal. Me bercé-je d’illu­sions ? Un avis ? Avez-vous croisé des idées simi­laires ?