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 ?

You do the meth : tous les jeux de mots des génériques de Bob’s Burgers

Vous voyez dans le géné­rique des Simpsons le texte que Bart écrit depuis 25 saisons ? Dans Bob’s Burgers c’est pareil, il y a deux jeux de mot dans le décor, presque toujours nouveaux. Je me suis amusé à les extraire avec un petit script basé sur ffmpeg (et peu d’huile de coude pour capturer les photo­grammes ayant des time­code diffé­rents).

Il y a 126 photo­grammes pour 134 épisodes (de la S1 au milieu de la S8), ce qui fait 8 épisodes sans géné­rique.

VOIR LES IMAGES EN PLEIN ÉCRAN Lire la suite