da scritch net works

Cinquantenaire

Da Scritch — 2024-08-02T08:00:00+02:00

Ça devait finalement m'arriver...
Ma vie est une sitcom

Voilà, j'ai 50 ans.

Je suis censé être plus mûr, sûrement moins frais, plus sage mais plus aigri. Mais j'essaie de rester passionné même si j'ai délaissé dernièrement (provisoirement) mes engagements associatifs, mon émission de radio et ce blog.

Je remercie tous mes amies et amis qui ont pu venir à notre soirée, et bien évidemment, j'en veux nullement à ceux qui n'ont pu venir ou se sont annulés à la dernière minute.

PS 1 : Cette soirée n'aurait pu être possible sans Enflammée, bien sûr.

PS 2 : Ce billet a été volontairement antidaté.

PS 3 : Crédit photo NoCoGabriel.

Bye bye, GPDis !

Da Scritch — 2022-02-11T06:55:00+01:00

Aujourd'hui est mon dernier jour à Eurocentre. Je quitte mon emploi de développeur chez GPDis, un important acteur dans la vente d'électroménager. Mais pas que.
Ma vie est une sitcom

Depuis 2007 je n'étais pas resté aussi longtemps dans une entreprise. Aujourd'hui, je quitte GPDis à quelques jours des 5 années de mon arrivée.
GPDis qui a intégré entre-temps MDA Group, c'est des centaines de points de vente direct, des enseignes comme Pulsat, Villatech, Dimipro, Phox,et maintenant MDA, plusieurs plateformes d'e-commerce en B2C et B2B, une logistique avec plusieurs entrepôts sur l'hexagone, un service IT dédiée à ses points de vente et aux commerciaux et tous les services supports sur la multitude de canaux retail qui en couvre le spectre commercial.

Avant d'entrer dans cette très grosse PME, j'avais développé plusieurs solutions d'e-commerce, dont une avec le regretté Xylpho, mais je dois dire que chez GPDis j'ai appris de multiples choses sur la logistique, sur les particularismes, sur les veilles de prix et politiques tarifaires. Un groupe protéiforme avec de multiples canaux de ventes, un vaste panorama de clientèle B2B et B2C, j'avais vraiment beaucoup à y découvrir.

Ayant eu en charge un outil métier qui semble simple mais dont l'historique git remonte à 2011, il m'a déjà raconté bien des choses sur la vie d'une entreprise.
Le genre d'outil custom costaud, l'ouvrage séculaire qui en impose, où l'on passe la lourde porte en bois pour entrer dans une immense cathédrale, où chaque pas sur le code de pierre résonnent dans l'immense nef de la Production au point qu'on n'ose marcher que sur la pointe des pieds afin de ne pas trop attirer l'attention (un peu comme dans le stock attenant après la période des soldes). Un progiciel avec lequel je discutais avec d'autres service internes et externes, où je me devais d'être carré. J'étais intimidé… mais le copain qui m'a mis là et l'équipe autour a su me mettre en confiance.

J'ai eu à le stabiliser, le fiabiliser, l'accélérer et enfin l'étendre encore plus. Et autour de moi, un groupe aussi évoluait à toute vitesse.

J'y ai beaucoup appris. J'avais une expérience sur le e-commerce, mais je n'avais pas l'expérience à cette échelle-là et sur autant de prestations. Si je connaissais déjà la différence entre un SKU et un GTIN, j'ai eu aussi la surprise de découvrir qu'un même modèle d'un même fabricant pouvoir ne pas avoir le même GTIN selon les fournisseurs. J'ai aussi (honte à moi) ri quand un prestataire e-commerce qui roulait des mécaniques tenait absolument à utiliser sa version des frais de port en fonction du poids, et qu'il a enfin compris que non, on ne vend pas comme des maillots de foot des frigos américains et des télés, la gestion des transports est nettement plus touchy que ça. J'ai aussi fait au grand plaisir de Loick Daures une démonstration de chanbara, quand un ingénieur commercial d'un grand opérateur réseau a crû m'expliquer le RGPD et s'est retrouver à sauter précipitamment les pages de son PowerPoint par dizaines devant ses collègues commerciaux en sueur alors qu'en devisant des citations latines, je sortais mon katana. Et j'ai appris encore tant d'autres choses, rien que la formation SST d'utilité publique que j'aurais dû avoir fait depuis une dizaine d'années, ou encore cette des applicatifs javascript avec Christophe Porteneuve qui a été un grand moment dans l'équipe.

J'ai mis ma patte aussi : essayer de faire en sorte que le même vocabulaire soit utilisé d'un service à l'autre, qu'il y ai une gestion documentaire normalisée sur le logiciel dont j'avais la charge et enfin découpler du métier ce qui tient de l'OS (notamment les transferts de fichiers) et normaliser les scripts bash, dont j'ai résumé la philosophie de mes scripts sur le verrou non-concurrentiel et les options d'appel.

Je remercie ceux qui m'ont précédé à ce poste : Nicolas Dubois, Antoine Cézar, Camille Alram et David Talagrand, ce dernier m'a co-opté pour prendre la suite (d'ailleurs, en 25 années, je n'ai été que co-opté pour mes postes). Par hasard, il se trouve que ce sont tous des amis. Je remercie infiniment David Lefoye pour sa bienveillance et sa connaissance à 360° du secteur, Rémi Soubranne pour son amitié (un P.O. commercial dans la vente d'électroménager qui vous écrit parfaitement des tickets sur Github, c'est du bonheur !), tous ceux qui ont été mes collègues à l'IT et ceux qui y sont encore. Je salue aussi Daniel Broche qui avant de travailler pour des concurrents, avant manqué de me prendre chez GPDis du temps de Discounteo. Lui aussi est resté un ami et j'occupe son ancien bureau.

Alors évidemment, il y a les regrets des chantiers jamais commencés, des occasions prises pas assez tôt. Il y eu aussi la surprise pour certains que le télétravail fonctionne, alors qu'en étant déjà divisés entre 4 régions, nous appliquions déjà de fait tout ce qu'il fallait. Et puis les lancements qui furent de bonnes surprises malgré mes sombres prédictions.

J'ai eu plaisir à travailler avec des professionnels sérieux, aux parcours et spécialisations variés, de la bonne humeur au café, les raids de choco-blast (que j'ai commué en paniers de fruits), la paella en salle de réunion, les tournois de baby-foot, des BBQ dehors et des soirées afterworks. Ce plaisir, j'espère qu'il fut partagé.

Mes nouvelles aventures s'annoncent tout aussi palpitantes.

Note : photo datant de 2019 d'où l'absence du port de protection faciale.

Radio FMR, mais elle dure depuis 40 ans

Da Scritch — 2021-11-22T07:07:00+01:00

Et elle a encore tant à vous dire
Radio

Pour ses 40 ans, Radio <FMR> organise quelques soirées live, et cela a commencé dès Vendredi dernier, avec une prog qui allait du rockabilly au punk. Je poste les photos au fin fond du billet (exprès), et sinon une très grosse soirée aura lieue ce Samedi au Bikini avec un plateau de qualité

Et là, vous allez me dire

« FMR ? Ça existe encore ? »

Eh ben oui ! Depuis 1981, elle vit encore grâce à la bonne volonté de bénévoles comme moi. Oui, une radio associative, c'est incongru à l'époque où l'on peut théoriquement se faire du pognon sur Youtube et Twitch, mais dans les faits, c'est justement une bonne garantie de ne pas avoir de publicités outrancières pour des pilules soit disant amaigrissantes par des évadés fiscaux au Qatar. Et ça change tout.

(En fait, je l'ai finalement mieux dit au micro, mais vous pouvez continuer à lire ce billet)

Avoir un média qui ne vous traque pas dès que vous tentez d'y accéder, avoir un média qui ne soit pas derrière un logwall ou un paywall (coucou Instagram, coucou Webedia), avoir un média dont l'accès gratuit est garanti et son ancrage local aussi sans publicité, y'en a pas brézef.

Mais un média qui ne cherche pas forcément l'audience et donc a sur son antenne des émissions aux sujets vraiment pointus, comme CPU, c'est encore plus rare ! Ni mon émission, ni d'autres qui sont sur FMR auraient eu la moindre chance sur un autre média à place limité. C'est ce qui en fait la complémentarité du secteur associatif de la radio. On a l'inconfort des moyens mais la liberté de ne pas être tributaire de l'audience et donc de la publicité, et sans être sous la coupe d'un pouvoir politique. Le CSA est seul juge sur notre existence.

Alors le manque de moyens, les conditions des fois acrobatiques pour assurer un sujet, voire le snobisme de certaines boites quand on leur demande une interview, c'est pour moi la preuve que nous avons encore plus que jamais le mérite de continuer d'émettre.

Et de ça, j'en reparlerais ce Jeudi à la radio sur pourquoi FMR est un putain de miracle encore actuellement.

Photos de Vendredi dernier

Mille mercis aux groupes, aux volontaires de la radio et à l'équipe de l'Usine à Musique, qui nous a fait un accueil vraiment super !

…sans Frank

Da Scritch — 2021-10-06T13:22:00+02:00

J'ai pas le courage d'une conf web dans l'immédiat sans lui.
Sortons

Cela fait un mois que Frank Taillandier nous a brusquement quitté. Un individu attachant que j'ai vraiment découvert aux apéro-web. Un gars qui était un excellent teambuilder : enthousiasmant, énergique, cultivé, passionné. Et il m'a poussé à présenter une conf alors que je déprimais, c'était à mon premier Sud Web. Plus tard, tu as dit que c'était des conférences pour réfléchir sur nos métiers.

Je suis très loin d'être le seul que tu as pris par la main, pour nous hisser vers un autre niveau de responsabilités.

Et là, quand il est parti, j'ai découvert combien il était impliqué dans plein de projets. Comme plein d'autres, j'ai découvert qu'il animait le repo Jekyll. Frank, tu es encore plein de surprises. Pour nous, pour tes collègues, pour tes amis, pour ta famille. Tu as même réussi à t'auto-chocoblaster quand tu es parti (et heureusement).

Oui, personne qui ne l'a connu n'a manqué de louanges pour Frank. C'est plus que mérité.
Pourtant, je l'ai aussi connu énervé, d'un agacement communicatif quand quelqu'un fait mal son boulot, ne veut pas apprendre, n'en n'a rien à faire des autres. Il m'a aussi appris (un peu tard) à savoir lâcher prise, quand ça veut pas, ça veut pas. Je l'ai aussi vu faire craquer des gens qui ne méritaient pas tes colères. Mais tu nous a tellement amené d'objectifs positif dans nos vies…

Demain commence un Paris Web.
Ce genre de manifestations nous manque, mais là, j'ai un peu de mal un mois après, je ne me suis pas inscrit, alors que leur programme est formidable. Parce que Frank, entres autres, m'a fait rentrer dans cette communauté des 1% des web-devs riches de leurs passions. Et que j'ai encore besoin de digérer un peu cette perte.

Voilà. Ça fait beaucoup de copains proches morts jeunes ces derniers temps, alors qu'on pouvait pas se voir de visu. J'ai le blues, j'ai mis un mois à publier ce billet, et je garderais cette formidable photo de toi en super-héros.
Ton départ brusque est une lourde perte, et c'est à nous de créer de nouvelles communautés avec ton héritage moral.

cpu-audio.js enfin en 7.0

Da Scritch — 2021-04-28T06:51:00+02:00

Ouais, j'avais d'autres billets techniques sur le même sujet, mais là, j'ai avancé sur le code plutôt que l'explication de texte ;)
Webdev

Commençons par un exemple avec une émission sur le son :

(S'il n'a pas encore démarré, un peu de patience, sinon le lecteur reste utilisable, c'est de la dégradation élégante)

Cela faisait un peu de temps que je n'avais pas donné de nouvelles de mon lecteur audio. Alors que pourtant j'avais écrit toute une série de billets à son sujet :

cpu-audio.js vient de passer en version 7.0. Le player audio de l'émission CPU en WebComponent a été revu en profondeur, avec moult corrections et notamment l'arrivée des thèmes graphiques en plus du système simple de configuration

L'idée d'origine de cette bibliothèque était de pouvoir donner une URL qui puisse pointer à un instant précis d'un audio dans une page web. Car le standard existe mais n'est pas implémenté par les principaux navigateurs. Or il est bien utile pour les émissions de 5h30. Et quitte à le faire, le faire avec un minimum de dépendances et un maximum de souplesse.

Par la suite, les principales API sont arrivées pour enfin stabiliser les Web-components, ce qi m'a permis d'enfin réaliser une bibliothèque javascript isolée, transportable, agnostique, petite (sous les 50ko) et toujours en vanilla.

J'ai donc déjà longuement raconté sur ce blog les démarches de conception qui m'ont permis d'y arriver et de le faire dans la licence GPL.

J'avais besoin de refondre complètement la bibliothèque pour la rendre plus maintenable, plus facile aussi pour que n'importe quel dev ou intégrateur front s'en empare. Il est ainsi possible de créer des thèmes graphiques sans toucher au code JS, ce dernier ayant même une tolérance d'implémentation.

Il reste toujours les idées qu'on avait jeté au début, que je ne réaliserai jamais seul mais que j'espère donner une base saine pour construire :

des thèmes plus aboutis et jolis
une WebExtension pour lire n'importe quel audio tranquillement
créer des playlist décentralisées pour montrer que le web est beau car remixable
créer des commentaires à la SoundCloud/MixCloud mais décentralisés
des outils encore plus poussés que l'éditeur de chapitre
ajouter un spectrogramme via add-on
Étendre pour l'utiliser aussi sur de la vidéo

Et n'hésitez pas à me contacter si vous avez besoin d'aide.

J'ai encore beaucoup de choses à dire, mais surtout beaucoup à remercier ; d'abord toute l'équipe de l'émission et ceux de la radio qui font qu'on reste très impertinents depuis 1981. Avec une pensée spéciale pour le Tetalab et Mixart Myrys où nous avions enregistré de nombreuses émissions et dans une panade noire.

Ensuite ceux qui m'ont aidé spécialement sur ce projet de code :

Thomas Parisot pour le standard Media Fragment, qui permet à ce player de créer des liens hypertextes temporels ;
Loïc Gerbaud pour des corrections ;
Guillaume Lemoine qui m'a bien aidé avec du prêt de matos au début ;
Benoît Salles et Michel Poulain pour les tests, Gabi Boyer pour m'avoir passé un iPhone SE, téléphone qui est certes toujours mis à jour, mais Apple n'arrive vraiment pas à tenir Safari aux standards.
@mariejulien pour m'avoir donné envie de ré-écrire un CONTRIBUTING.md plus accessible
Christophe Porteneuve de Delicious Insights, un ami et un formateur JS qui m'a donné un magistral coup de pied au cul. Ses formations JS sont de sérieux cadeaux pour les devs webs.
scombat qui a écrit une intégration minimale de cpu-audio.js dans React
Éric Daspet pour ses précieuses remarques sur la documentation

N'hésitez pas à le faire connaitre, si vous avez un projet audio dans le web qui nécessite un lecteur.

Adieu Xylpho

Da Scritch — 2020-10-25T10:11:00+01:00

Nicolas Guilhou, vers une vie meilleure.
Ma vie est une sitcom

Ensemble, on en a fait des conneries au lycée, on a défriché les CSS, Ajax et les WebForms avant qu'ils deviennent HTML5, on a fait de la com' d'événementiels, on a voulu monter un service SaaS (dAgence), on a aussi tenté d'écrire des scénarii d'animation,… Et honnêtement, il y a beaucoup de projets dans lesquels je ne me serais pas lancé si tu n'étais pas partant toi aussi.

Tu as toujours voulu être le copain rigolard. Au lycée, quand tu étais graphiste indépendant, quand tu es devenu web-designer, puis indépendant à nouveau.

C'était la façade que tu as toujours voulu montrer, quitte à oublier tes années de galère, tes histoires sombres, ton cafard. À toi, à moi, à tes amis… Même à cette fille dont tu as assuré l'éducation.

J'ai appris que tu n'as plus supporté tes tristesses. Et tu as préféré partir brusquement.

J'en suis malheureux, car on correspondait encore, mais tu ne me l'as jamais écrit. J'aurais tu te voir plus souvent.

CD de nuits

Da Scritch — 2020-06-21T17:12:00+02:00

Ré-écoutez Radio FMR telle qu'elle était les nuits entre 1998 et 2001
Vide-Grenier

Pour cette année, la Fête de la Musique est un peu exceptionnelle puisque plutôt calme, Covid-19 oblige. Mais nous avons une belle surprise pour vous : nous avons ouvert une capsule temporelle, rouvrant le son de la bande FM de Toulouse de la fin des années 1990s.

Nous sommes en train de publier sur podcloud les bandes de nuit de Radio <FMR> d'il y a 20 ans. Vous pouvez retrouver nos mixes classiques ici.

Vous pouvez à nouveau entendre les fameux CD de nuit de Radio <FMR>

Tech, bricolages et programmes nocturnes

Quand je suis devenu salarié de Radio <FMR>, les moments hors programmes en directs étaient remplis par une platine double-k7 auto-reverse. Ce qui faisait 3 heures de mix musical pré-enregistré qui bouclait, qu'on appelait les bandes de nuit. On y retrouvait une sélection musicale qui a été programmée, mixée, enregistrée par des animateurs de la radio, en complément de leur émission. Les cassettes posaient plusieurs soucis : leur usure par temps chaud, et qu'il faille les changer tous les jours pour ne pas lasser les auditeurs.

Avec la démocratisation des graveurs de CD, on a pu tenter de mettre en place un carrousel de CD, un lecteur Sony qui pouvait enchaîner 200 CD aléatoirement. Mais ce carrousel avait un bug : pour éviter toute consommation électrique inutile, il s'éteignait au bout de 24 heures de lecture, donc nous avions mis un minuteur pour le relancer, hélas en mode aléatoire, il arrivait une fois par mois qu'au redémarrage, l'appareil aie encore un CD dans le bras sur le carrousel, qui tentait de faire tourner pour lire les positions occupées. Et ayant souvent à le réparer, on avait une centaine de CD brisés.

Heureusement, Sylvain qui se chargeait de la gravure des CD, avait les copies master qu'il redupliquait.

Puis, quelques années plus tard, nous sommes passés à un robot logiciel sur PC, avec une programmation musicale aléatoire (il y a en fait plusieurs niveaux de rotations, plus des règles pour passer jingles et annonces). Mais ce système nous a fait perdre cette chaleur de programmation, le fait qu'un enchainement aie été calculé et effectué par un humain, même si Dusport nous fait une programmation éclectique fabuleuse.

Archivons

Cela faisait quelques années que je me disais que c'était le moment ou jamais de numériser et publier ces programmes sur internet. La raison est évidente : les disques gravés sont encore moins éternels que les CD. Sylvain m'a donc fait l'honneur de m'amener ces archives inestimables, et la plupart semblent parfaitement numérisables avec un PC, d'autres demanderont de passer par une platine et une carte son. Ce qui tient du miracle, même si nous achetions des CD-R de qualité, ceux-ci n'étaient pas donnés pour durer plus de 5 ans.

Pour ceux qui ont connu Radio <FMR> à cette époque, ils retrouveront avec plaisir les mixes de feu Raskal qui assaisonnait ses sélections d'extraits de films, de Rave Age et leur son club, de Clark Nova très pop, de Brian Brillant très easy-listening, des Sanguinaires et leurs faits divers, et les programmations de Dusport, Bernard Amade, etc…

J'ai vraiment un plaisir à les redécouvrir, et un bonheur à pouvoir leur donner une nouvelle vie, notamment les insérer dans un créneau horaire nocturne sur <FMR> à partir de cet été. Abonnez-vous au flux podcast, je vais essayer d'en mettre 5 en ligne par semaine. Et ces numérisations me permettent de compléter une expérience pour une future émission de CPU.

Accessoirement, Radio <FMR> organise le Virus Fest pour soutenir la scène musicale locale et actuelle.

Le mouton tondu

Da Scritch — 2020-06-15T13:53:00+02:00

(ok, ces images ont pratiquement un mois)
Ma vie est une sitcom

Le déconfinement, c'est la joie d'avoir quelques kilos de cheveux en moins. Une expérience globale de l'importance de son coiffeur de quartier

Une belle tête déconfi-te.
Je sors ça un mois après, pour pas que mon +1 s'aperçoive depuis combien de temps j'ai pu passer à la coupe.

La vie d'après

Da Scritch — 2020-06-02T12:58:00+02:00

commence en sortant
Ma vie est une sitcom

Photo © Enflammée

Ce printemps étrange

Da Scritch — 2020-05-16T10:29:00+02:00

Le télétravail qui te fait réapprendre le chemin du travail qui passe par le salon…
Ma vie est une sitcom

Oui, un étrange printemps. Où la rue devant s'est quasi vidée pendant 3 semaines. Où tout le monde s'évite. Où les magasins on tiré leurs rideaux d'aciers. Où l'angoisse transpirait sur toutes les chaînes d'infos à l'ecœurement. Où Internet menaçait de s'effondrer à cause des méchants GAFAM. Où ces satanés salariés allaient lâchement profiter de l'entreprise pour ne rien faire.

J'ai pas eu le temps d'écrire pendant ce moment-là, cette époque inédite, ni vraiment eu l'envie de documenter ma petite vie.
Pourtant, j'ai ce stress, cette peur de contaminer la personne qui vit avec moi. Et qui dans cette réouverture à petits pas, est toujours là. J'ai pas mal d'amis qui sont malheureusement tombés malades du COVID-19, et qui en ont souffert.

Pourtant, je suis un immonde privilégié : J'ai gardé mon travail, j'en avais d'ailleurs tellement à faire que je n'avais quasiment que ça à songer toute la journée, on a une petite cour ensoleillée, dans laquelle gambade un chat qui nous adore, et il y a donc celle qui vit avec moi, qui peut enfin en profiter pour qu'on mange ensemble à midi.

J'ai télétravaillé pendant des années. En fait j'étais indépendant, et j'ai travaillé 6 ans dans le bureau de mon appartement. Et À l'époque, j'étais stressé pour d'autres raisons, plus financières. Car fallait vraiment pas être doué dans les affaires pour se lancer en indépendant dans un métier au moment où se déclenchait une crise financière.
On a vu des couples d'amis s'entre-déchirer à cette époque, eux aussi en indépendants, travaillant de chez eux, ou tournant en rond dans leur salon quand rien ne sort.

Mais maintenant, je gère mieux ce stress, et ça se passe mieux avec ma copine de l'époque.
J'ai moins de soucis à gérer, on est plus sereins, et nous nous connaissons bien mieux. Et puis surtout, tu m'as encore plus appris la patience, c'est une chance.

À toi, mon amour, je te souhaite un heureux anniversaire.

Merci pour tout, mon cœur, toi qui prend soin de moi.

Battle of da Year 2K

Da Scritch — 2019-12-23T12:21:00+01:00

Un flyer mythique pour une nuit redoutée : celle du passage à l'An 2000.
Vide-Grenier

Été 1999, j'étais salarié de Radio <FMR>.

Si je commençais à 10h en tant que coordinateur d'antenne, je ne décrochais pas à 19h, m'étant impliqué dans l'organisation de nombreuses soirées principalement drum'n'bass et électro expérimentales. J'étais avec une bande de copains, la radio avait sur son antenne un groupe de DJs assez généreux, et des noms qui étaient aussi bien connus par le public festif (Le Lutin, DJ Kush, Youthman) que par le public exigeant (Doctor Livingstone, Circlips). J'avais souvent du Ninja Tune, du Warp, du Vendôme Records et du Moving Shadow dans ma besace pour mes émissions persos.
À 27 ans, on est foufou, et l'énergie créative autour de la radio donnait une sérieuse envie de secouer la scène artistique.

DJ Kush avait monté le Dragon Krew, un noyau dur d'organisation de soirées avec MC Youthman, Brooks, DJ Peyo, il y avait aussi le groupe Kapsaïcine qui faisait les soirées Kitty style, ou encore le collectif Massage auditif (Doc Livingstone, Peyo, Aurel, Sam Lawry), et moi j'oscillais autour en roadie.
Yep, moi, le toubab de bonne famille, je m'encanaillais en allant bricoler chez Le Lutin, qui des fois se lançait dans des sets sans prévenir, avant d'aller redécorer la cave d'un bar rue des Filatiers.

Et pour le passage à l'An 2000, on savait qu'on pouvait proposer une soirée au Bikini, la boite de nuit rock de Toulouse, à l'époque au 54 chemin des Étroits, route de Lacroix-Falgarde juste en face de l'usine AZF. Ce n'était pas la première fois qu'on y faisait des opérations étranges et folles : entre le concert d'Amon Tobin avec du gazon déroulé sur le dancefloor ou la finale de la coupe du monde 1998 animée par Sportaz de Radio Campus, ou les soirées d'Halloween (qui correspondaient avec l'anniversaire de Kush, je ne vous dis pas le frisson de faire chanter joyeux anniversaire à 1000 personnes). Plus le studio antenne de Radio <FMR> logé dessous nous permettait d'y faire des transmissions live. Alors plutôt que faire sa soirée avec loto à filet garnis, suivie de DJ Fabrice (Sansonnetto) aux platines, et la soupe à l'oignon à 10h, on a fait une proposition au maître des lieux : 4 platines en back-to-back (une disposition plutôt rare à ce moment-là), 22 DJ soit du très festif drum'n'bass, soit de techno expérimentale, 2 MCs, et un prix raisonnable car tout le monde voulait faire la fête.

Le line-up a été monté très vite, venant de toute la France et au-delà : beaucoup connaissaient la scène de Toulouse et son public enthousiaste. Avoir Future Cut et Marcus Intalex montrait sa reconnaissance à l'international.

Un flyer hors-normes

Et là, je ne sais plus quand tout a dérapé…

Kush a fait tirer un flyer en papier cartonné, recto-verso, format A4. Je crois que le tirage était de 1000 exemplaires, et forcément, devenu très vite mythique, collector. Il n'y a pas que son support qui détonnait : Son dessin par Alphabet City sous Illustrator (à l'époque, les flyers se faisaient plutôt avec Photoshop ou Quark X Press), son design lean inspiré des The Designers Republic. Et rédigé en Anglais, car l'objet promotionnel était aussi destiné à des partenaires internationaux. Son format faisait qu'on arrivait même pas à le mettre dans les porte-cartes des magasins ou les tablettes trop étroites, et on hésitait à le scotcher au mur pour pas que l'impression soit déchirée en retirant le scotch. On n'a fait que le mettre dans quelques magasins, et on l'a annoncé en radio.
À l'époque, le web balbutiait, pas de Facebook, ni même encore de MySpace, le flyer était le principal moyen de communication, avec les émissions radios et les gratuits culturels locaux comme IntraMuros. Et parfois les mentions sur la télé locale, TLT avait une grosse tranche culture le Vendredi.

Donc je ne sais pas si vous voyez le niveau de bêtise : tirer un flyer très cher, et annoncer à la radio pour dire qu'il existe mais que dans certains magasins. Pour une soirée unique. Où l'on ferait soirée blanche, je crois même que l'orga a perdu des sous.

LA bête

L'événement lui-même fut hors-norme

Gare Matabiau, le 31 à 14h. Il pleut littéralement à verse et j'attendais l'arrivée de Rykkk's. Kush m'avait prévenu, il a du style : costume impeccable, fly-cases élégants… On embarque dans ma Panda sous une pluie battante depuis la gare pour rejoindre la salle de concert. Rykkk's sur le chemin me dit Oh ! Arrête-toi à cette boulangerie, j'ai la dalle, je me prends un sandwich. Il y restera 15 minutes, en sortira hilare avec 4 gros cartons : C'était une pâtisserie, il venait de dévaliser ce qui n'était pas encore vendu, de superbes gâteaux pour le backstage. Rien que la perspective d'un Lutin à la coupe rasta se faire une religieuse au chocolat faisait marrer.

On avait monté un décor avec tout ce qu'on avait trouvé de fou à y mettre, j'avais sorti mon Amiga avec un animation pour le passage à minuit (hélas, le cable vidéo était trop court pour atteindre le vidéo projecteur). Je me souviens encore d'Hervé qui arrive alors que j'étais à 8m de haut : Putain qu'elle coutent chers, ces conneries. Une dizaine de kilos de confettis professionnels. On en a mis partout. Des décorations partout. Il nous a bien fallut 3 heures pour toutes les installer.
J'ai hélas aucune photo.

Sur l'orga non-artistique, on se relayait entre tenir l'entrée, les vestiaires, calmer ceux qui ne savent pas faire la fête et souffler derrière la scène, ou plutôt dessous. Les petits plats, les gâteaux, et le champagne fourni par le patron, mais forcément avec modération car on avait du taf. Je crois me souvenir que le lendemain midi, on était tous crevés, mais heureux.

La gueule de bois

Les soirées ont très vite périclité par les coups de buttoir de la Mairie de Toulouse qui voulait calmer des comités de voisinage souvent noyautés par le Front National et de la Préfecture trop impatiente de passer les heures de fermeture de bars de 2h à 23h. Les fantastiques muraux des Hanky Panky Girls ont été recouverts d'une couleur rose-orange flashy, plus conforme aux incompréhensibles prescriptions des Monuments de France. Et y'a eu en moins de 10 jours les attentats du 9/11 et l'explosion d'AZF. Voilà qui a tué l'esprit de la fête. La modeste movida de Toulouse (d'oùla radio Le Mouv tirera son nom) s'est réduite en peau de chagrin et fêtes industrialisées. J'ai vieilli aussi, et il fallait laisser sa place aux générations d'après. Un jour, Nostalgie aura un créneau horaire pour les mix technos.

Je me suis impliqué dans des événements moins festifs, et des combats politiques.
Car 20 ans après... Le futur riant que promettait l'An 2000 tourne à la dystopie de Talsorian's Cyberpunk 2020.

Reste ce flyer, superbe. Je croyais n'en n'avoir plus qu'un abimé. Je suis retombé sur mes archives de l'époque, miraculeusement préservées.

Fallait que je vous le scanne.

Deux couleurs bizarres en CSS

Da Scritch — 2019-11-13T13:41:00+01:00

Une bête combinaison qui ne me permettent pas de faire un chouette aspect dans un cas très précis. Et vous allez même pouvoir vous amuser avec pour comprendre les limites de certaines propriétés CSS magiques
Webdev

Cet article est dans la série consacrée au développement de la bibliothèque cpu-audio.js et documente les affres de sa version 6.

Mettre de l'audio dans le web n'a pas été simple
Reconstruire son lecteur audio pour le web (sur la version 5)
Retravailler un lecteur web audio dans les petites largeurs
Le blues du Web Share (english version)
Deux couleurs bizarres en CSS
cpu-audio.js enfin en 7.0
Tout-terrain WebVTT pour de l'audio
Dichotomie entre podcast et web sur l'audience

Je vous remets le player, dans la dernière version de dev. Sinon, ⇓ sautez ⇓ directement ⇓ au chapitre suivant ⇓

Pour lire ce billet, il est conseiller d'aller sur mon site dascritch.net. Si vous lisez ce texte, c'est que probablement vous n'y êtes pas.

Comment replacer un sujet tiers rien à voir avec le billet sous prétexte d'illustration d'exemple…

La Couleur tombée du DOM

Je vais parler non pas de couleurs interdites (quel nom de film d'horreur génial !) comme le Rouge Surbrillant, le Jaune Bleuté, ou l'Orange Hyperbolique, mais de deux définitions volontairement manquantes dans les CSS. Or, comme mon player a un aspect totalement paramétrable par les utilisateurs via la CSS, lesdits utilisateurs pourraient tenter de faire un effet qui sera systématiquement en échec.

Allez, cadeau ! trois couleurs interdites (impossibles, ou plutôt chimériques).
Observez le point de gauche, votre regard fixé sur le × sans bouger pendant trente secondes,
puis sautez au carré du milieu et restez sur sa ×.
Auteur : Zowie CC-BY-SA pour Wikipédia.

D'autres parlent bien mieux que moi des couleurs en CSS, donc je ne ferais pas l'affront d'en faire un résumé imparfait, mais je sauterais direct au nœud du problème : J'ai deux manques dans la norme, mais qui sont totalement justifiés. Et des effets de bords qui pourraient surprendre des intégrateurs non prévenus.

transparent

Cette couleur existe principalement en valeur de la propriété background : transparent. On a trouve aussi pour border-color ou encore dans l'attribut fill="transparent" d'une balise SVG.

En fait, transparent n'est pas un alias vers une couleur pleine, mais d'une couleur quelconque rendue avec une opacité de 0%.

Sauf qu'il y a une méprise : il n'est pas possible de s'en servir pour la propriété css color dans l'idée d'avoir le rendu derrière le fond du tag courant. Une couleur transparente fera que le texte est virtuellement non affiché mais présent par ses dimensions.

Et c'est normal, car cela voudrait dire que le navigateur devrait être capable d'utiliser la forme des lettres pour découper le fond de l'élément support. C'est pas impossible, mais totalement tordu en terme de pensée, alors que vous pouvez preeeesque facilement le faire en SVG. Bon, dans les faits, je ne vous le conseille absolument pas ! Et ceci pour des raisons de performances de rendu, votre site va commencer à ramer sévère si vous vous lâchez.

currentColor

Cette magnifique couleur définie en CSS3 n'existe qu'en couleur de pinceau : currentColor

currentColor est immensément pratique, car elle fait référence à la couleur de pinceau héritée. Et si cette couleur héritée renvoie par exemple à une variable css au nom à coucher dehors (hello var(--cpu-playing-color)) , sur de nombreux rappels, on gagne de très nombreux octets... Exemple :

main {
    color : var(--cpu-color);
}
main.act-playing {
    color : var(--cpu-playing-color);
}
a, button (je vous la fait courte) {
     color : currentColor;
}
svg {
     fill : currentColor;
}

Bien plus pratique que color : inherit, car pouvant s'appliquer sur d'autres propriétés.
À chaque coup, je gagne.

currentColor est une Valeur Magique en css. Magique dans le sens Noble du terme, au sens que justement, ce n'est pas une constante arbitraire (par rapport au sens commun en informatique, et qui tient de l'insulte) mais qu'elle fait référence à son contexte et elle permet de gagner un temps fou.

Sauf que, hélas, et je ne suis pas seul à m'en plaindre, on n'a pas de currentBackground…

Et c'est tout à fait normal : background a été discuté jusqu'ici dans ce billet en tant qu'écriture raccourcie de la propriété background-color. La propriété background est en fait composite, très complexe : On peut créer des arc-en-ciels, étirer une image, mettre des motifs svg embarqués. Retenez que background-color est la dernière composante définissant le fond d'un élément à être interprétée, lequel fond est défini par le standard comme ayant de multiples couches de rendus.

Alors quel est le problème ?

Et ben tout simplement, je ne peux pas inverser la couleur et le fond hérités.

Ainsi

button:hover {
    background : currentColor;
    color : currentBackground;
}

ça marche pas, puisque la propriété n'existe pas.

button:hover {
    color : var(--cpu-background);
    background : var(--cpu-color);
}
.act-playing button:hover {
    color : var(--cpu-playing-background);
    background : var(--cpu-playing-color);
}

Si vous aviez voulu mettre une des variables de couleur de fond à transparent... ça marchera pas non plus, vous vous retrouverez avec des boutons avec du texte totalement transparent qui ne se distinguera pas du fond. blanc, noir, rose, bleu schtroumpf, qu'importe la valeur que vous avez choisi ça sera illisible !

Et si la couleur de texte est transparente et que la couleur de fond est fixée sur la couleur courante pour le même bloc, vous aurez une superbe disparition !
(pourtour ajouté pour voir le bloc)

Essayez vous-même !

Pour lire ce billet, il est conseiller d'aller sur mon site dascritch.net. Si vous lisez ce texte, c'est que probablement vous n'y êtes pas et donc vous ne pouvez expérimenter avec l'édition interactive.

Le bloc de code CSS ci-dessous est éditable, et il impacte directement le lecteur au-dessus. Sur le détail des variables CSS du lecteur, je vous renvoie à la doc.

Évidemment, y'en a qui vont me dire ça marche pas sur mon appli de news, donc voici une capture d'écran de ce que vous devriez voir :

Le rendu du player en attente à gauche, lors d'un survol souris ou d'un clic sur le bouton de lecture à droite,
lequel devient malencontreusement invisible.

Où tu rêves d'une licorne rose invisible

Alors il y aurait une bonne astuce : au lieu d'utiliser transparent, spécifier une couleur de fond avec une transparence totale genre #ff777700 (le fameux rose invisible de la légendaire licorne, qui est même enseignée en Zététique), et pouvoir mettre la transparence à opacité totale quand je tente d'utiliser cette couleur en guise de couleur de police/remplissage.

La fameuse licorne dans une représentation improbable de sa couleur impossible.
CC-BY Bingo Pajama Bee via Wikipedia, loués soient-ils

Mais là, il me manque (au choix) :

soit une propriété css background-opacity (et son pendant color-opacity),
soit un transformateur standard de valeur css que s'appelerio plain-color() qui me rabote une couleur avec opacité en couleur sans opacité,
soit des billes car ça existe peut-être déjà (j'ai pas dit que je connaissais à fond les CSS).

Tentative 1 : CSS pure, `rgba()` et deux variables

J'ai bien trouvé une solution amusante avec la fonction css rgba() sous la forme
background : rgba(var(--background-color), var(--background-opacity))
mais comme cette astuce joue sur le fait que var() ne fait que restituer une chaine de caractère sans l'avoir interprété, elle induit :

que toutes les couleurs (encre et fond) paramétrées par l'intégrateur soient totalement opaques,
que je doive introduire une propriété de plus à part pour la gestion d'opacité du fond,
que la syntaxe de couleur suive strictement la syntaxe rrr, ggg, bbb, ce qui multiplie les risques d'erreurs,
que l'intégrateur/utilisateur ne peut donc pas utiliser la syntaxe hsl()/hsla() que nombre de graphistes et intégrateurs trouvent extrêmement pratique,
ni les couleurs nommées prédéfinies comme rebecca purple (version audio du billet),
et seraient aussi bloqués ceux qui auraient voulu mettre un motif plutôt qu'une couleur unie.

Pour toutes ces raisons, ce hack me semble limite pour l'Inspecteur Hacky, donc pour l'instant ⇒ c'est non.

Tentative 2 : Polyfill javascript pour déduire une couleur totalement opaque

Certains m'ont suggéré d'utiliser/créer un polyfill en javascript pour extraite la couleur opaque en surveillant les modifications sur la variable d'environnement, et en définissant une autre variable d'environnement à la volée avec le canal alpha complètement opaque. L'idée semblait être une bonne idée, puisque les variables CSS peuvent changer suivant les contextes (position de l'élément dans le DOM, taille de la fenêtre, :hover , :focus, etc...). Les innocents…

Évidemment, il faut convertir la couleur CSS qui peut être retournée en n'importe quelle notation valide vers un format RGBA ou HLSA (peu importe, tant qu'on peut avoir la valeur alpha à part). J'ai vérifié avec la méthode window.getComputedStyle() en l'appliquant sur un élément de référence, seul moyen de résoudre les contextes comme currentColor. Outre que créer un élément de référence uniquement dans ce but est une méthode qui pue un peu, la fonction que j'appelle retourne à peu près le format qu'elle veut, selon l'envie du navigateur, l'historique de la propriété et le système derrière. Ainsi, on peut tout à fait imaginer qu'un écran passif travaille en HLS, ou qu'une évolution prochaine du standard passe d'un rendu de 8 à 16 bits par canal couleur. De petites fonctions pèteront le webcomponent à la gueule des utilisateurs sans que vous ne voyiez rien venir.

Donc il nous faut une regex convertisseur magique qui n'existe pas en standard en pariant très fort que les navigateurs ne retournent que du rgb() ou du rgba().
Là aussi, j'ai tenté, j'ai abandonné : beaucoup trop de taf pour un résultat incertain et un usage marginal.

Si néanmoins vous vous le sentez, tentez de le faire : j'aurais toute une liste de cas d'usages à vous faire tester, vous allez en suer et vous finirez par écrire un billet technique sur le côté complexe et vain de cet exercice. Une bien maigre compensation, mais qui vous permettra de proposer une conf à un devfest.

J'ai même réfléchi à faire un filter : invert(100%); plutôt qu'inverser les variables de couleurs, mais le rendu n'était pas plaisant dans nombre de cas.

Et là, tu peux plus voir cette exception en peinture

Mais tu sais que c'est normal et tu dois l'accepter. Je dois être un genre de fou à la Van Gogh. LIBÉREZ LA PALETTE CHROMATIQUE !

Alors évidemment, il y aura toujours des personnes qui vous diront « Ahlalalala ! Mais il suffisait simplement de passer par un pré-processeur CSS pour obtenir cet effet ». Sauf que

Ces personnes n'ont pas lu l'ensemble de cet article ;
Ni le chapitre d'un article précédant expliquant les contraintes d'écriture d'un web-component réutilisable ;
Que je veux que ma bibliothèque javascript soit utilisable directement en insérant le script et en ajoutant la balise <cpu-audio>,
Qu'elle soit configurable même par des gens qui n'ont qu'un minimum de bagage HTML avec une bête page statique,
Qu'elle utilise en priorité les standards du web et en évitant les rustines,
Et sans avoir à installer une suite d'intégration complexe, genre NPM.js je-te-télécharge-internet-pour-changer-une-couleur.

Donc nous sommes dans un cas limite qui est actuellement bloqué, et qu'on ne tentera pas de palier dans l'immédiat car elle n'impacte qu'un cas de paramétrage d'aspect très marginal, et qui est compensable.

Désolé Larcenet*, on s'est parfois engueulés ensemble, mais j'ai pas pu m'empêcher de citer dans mon billet technique le dos de la couverture du deuxième tome de tes fabuleuses « Aventure rocambolesque », celui avec Vincent Van Gogh. C'est chez Dargaud. Achetez-le !

Eh mais, du coup, je peux clore ce ticket #29 : Some css vars settings won't be useful, non ?

Non :

La couleur tombée du Ciel

J'ai écrit cet article en Avril 2019.
Entretemps, un nouveau groupe d'API natifs commence à arriver dans les navigateurs : CSS Houdini.

Et ce groupe est tellement stupéfiant qu'on dirait une nouvelle de Lovecraft adaptée part Richard Stanley (Personal message : If you read me, I salute you, by the way. You're welcome for a craft beer.).

L'idée est d'étendre les variables CSS pour leur faire porter une partie d'attributs, via l'API accessible en javscript : CSS.registerProperty.
Ce qui permet d'étendre les possibilités des propriété css background.

L'idée est géniale, audacieuse, mais je ne la mettrais pas dans ma bibliothèque, car elle relève plus de la coquetterie de chaque site que de réellement la responsabilité de mon web-component. De plu, il est probable que les performances de rendu navigateur impactent l'expérience utilisateur si vous êtes trop gourmands.
Néanmoins, l'usage des variables CSS dans mon code en laisse la possibilité à tout intégrateur aventureux.

La prochaine fois, on va s'amuser avec des objets DOM incongrus, des méthodes javascripts et des fichiers de sous-titrage. Et croyez-moi, c'est à la fois instructif et éclairant quand une norme a des limites pour rester dans son intention.

5 ans après Supplément Week-End

Da Scritch — 2019-10-30T11:05:00+01:00

Je tue les flux rss encore existant. Ce billet est uniquement technique, ne plus tenir compte
Vide-Grenier

Ce billet sert juste à invalider les derniers pointeurs sur l'émission Supplément Week-End, qui a été terminée en 2014. Il sera supprimé après une opération technique côté podcloud

Le « Supplément Week-End » est devenu par la suite « Cross/Over » avec une nouvelle équipe menée par Dusport et Ultimatom.

DaScritch a créé l'émission « CPU (Carré Petit Utile) » sur des sujets numériques.

Merci de votre compréhension.

Retrouvez Supplément Week-End (émissions) sur podCloud
Retrouvez da scritch net works sur podCloud

Enregistrement en public de CPU le lundi 21 Octobre

Da Scritch — 2019-10-14T12:52:00+02:00

Développeur ×10 (2^ème prise), Capitole du Libre et contes horrifiques d'Halloween pour effrayer les entreprises.
Sortons

TL;DR : Lundi 21 Octobre de 19h à 23h, au Tetalab à Mixart-Myrys, l'émission CPU (Carré Petit Utile sur Radio <FMR>) enregistre 3 émissions en public (entrée libre contre glouglou/miamiam) :

Lost+found sur le Capitole Du Libre
Peut-être aura-t-on même une idée du programme de l'édition de cette année
Avec une bonne partie de l'équipe de production de CPU et des membres de Toulibre.

Développeur ×10
C'était le Grand Débat des professionnels du code et des Venture Capitalists cet été : faut-il absolument avoir un développeur×10 dans son équipe pour que sa startup aie du succès ?
Avec Hadrien Lanneau. Enregistrement reprogrammé

Crie si tu sais… III
Des histoires d'horreurs qu'on se racontent au fond des datacenters abandonnés
Avec une bonne partie de l'équipe de production de CPU et quelques guests.

L'accès et libre, n'hésitez pas à apporter de quoi boire et grignoter, vous aurez surement des choses à aborder sur nos sujets avec l'équipe et nos invités.
Le Double-Dragon/Tetalab est tout droit passée l'entrée du bâtiment principal de Mixart-Myrys (12 Rue Ferdinand Lassalle, 31200 Toulouse).
Parking possible dans la cour de Myrys. Bus ligne 15, arrêt Tricou (c'est à 500m, pas hyper accessible)

La conférence de rentrée de CPU

Da Scritch — 2019-09-12T11:00:00+02:00

Résumé de la soirée en moins de 3 minutes, en vidéo et sans le son. Ou alors avec le son, mais ça dure une heure, et vous n'avez pas les mêmes images.
Radio

Comme annoncé, on a fait une rentrée dans les normes : Au fin fond d'une zone industrielle, dans un célèbre lieu artistique, dans le double container d'un hackerspace. Et elle signe le début de la nouvelle saison de l'émission.

Philippe Martorell au bout de la table, et un pc du service vidéo posé en plein milieu avec interdiction d'y toucher. Timelapse de la première émission capturée par TTh

TTh, qui gère le lieu le soir où on a enregistré (le Double-Dragon, antre du redoutable Tetalab), m'a enregistré en timelapse. Comme des invités étaient en retard, on a en plus branché au-dessus de la porte d'entrée du ~~container~~ Double-Dragon un gigantesque journal lumineux (enseigne à led qui affichent un texte préprogrammé), piloté par un minitel, pour signaler notre position qui était visible depuis le parking.

Sur la gauche, Nicolas ogadaki Decoster de l'association La Compagnie du Code pour le DevFest Pitchouns. Face à moi, de dos, Élise Rigot, productrice de la nouvelle série Bio is the new Black, qui commence dans 15 jours. Photo : Enflammée

Julien Eliès qui est notre invité pour l'émission sur le Cobol. Diffusion programmée dans un mois. Photo : Enflammée

Les joyeux drilles de l'asso Silicium a ressorti de son bunker une sélection de livres autour du Cobol, sujet de la deuxième émission enregistrée. La BD à droite roxe. Normalement, ils préparent un billet sur leur sélection. Photo : René Spérenza.

Pour cette saison, je passe à un dispositif d'enregistrement totalement différent, bien plus léger, et théoriquement avec un meilleur son. Ben ouais, je reste très papier pour mon conducteur : ça ne plante pas et il ne manque pas d'énergie pour le lire au milieu du troisième enregistrement. Moi, par contre,… Photo : Enflammée

On peut mesurer ma fatigue au fait que les oreilles de chat soient de moins en moins bien dressées. Photos : Enflammée

Timelapse de la deuxième émission capturée par TTh qui est resté veiller bien tard si j'en crois les images

C'est foutraque, dingue, tu penses à littéralement autre chose après une journée bien chargée...

Et quand tu vas pour tout ranger, deux personnes toquent au studio improvisé et nous disent Venez, on va répéter notre concert !. La salle est immense, une petite dizaine de fauteuils, la musique et la performance semblent vraiment bien, mais il est 23 heures et on est trop claqués.

J'appelle ça une chouette rentrée radiophonique !

Enregistrement en public de CPU le lundi 9 Septembre : conférence de rentrée 2019

Da Scritch — 2019-08-21T12:24:00+02:00

Conférence de rentrée, Développeur ×10 et See you, Space Cobol !
Sortons

TL;DR : Lundi 9 Septembre de 19h à 23h, au Tetalab à Mixart-Myrys, l'émission CPU (Carré Petit Utile sur Radio <FMR>) enregistre 3 émissions en public (entrée libre contre glouglou/miamiam) :

Notre Conférence de Rentrée
Nous en aurons des choses à vous faire miroiter : quelques nouveautés dont des nouveaux dans la team, un agenda, au moins 3 nouvelles séries d'émissions et une grande annonce pour Radio <FMR>
Avec une bonne partie de l'équipe de production de CPU.

See you, Space Cobol
À l'occasion des 50 ans de la conquête de la Lune, revenons sur une des technologies qui a permis cette immense opération logistique : le langage Cobol. Et pourquoi est-il encore si utilisé dans nos glorieuses nationales Bancassurances ? Est-ce la raison de leur puissance ?
Avec Julien Eliès.

We need Web Share

Da Scritch — 2019-06-26T05:21:00+02:00

We finally get a way to add share buttons without forgetting a service or use. And respecting the privacy of our public. Go into all the world wide web and preach the method to all creation ! Well… who can use it, because, alas, that function is not everywhere.
Webdev

This article is translated from french, namely « Le blues du Web Share », in a series describing the development of the cpu-audio.js webcomponent.
Excuse my French as we say in… French.

Today, I talk about what lies behind the button.

Here is my player, in its last development version. You can ⇓ jump ⇓ to ⇓ the ⇓ next ⇓ chapter ⇓

You will need to go on my dascritch.net websit to read and experience my post. If you can read this text, you may probably not be on it.

Yes, I know, I’m talking in French and this show is 5 years old, but I’m not sure to be a better radio host today. Yes, the interface is in French here, because my blog usually gets contents in French. It may be started in English.

The switch

The main interface of the player

This button (on the right of the main interface) will switch it to a share one. It is possible to hide this button and so denying access to the share interface via hide="actions" attribute. It may be useful, by example when your website already have a share system.

Once the button clicked, you get some possible actions, on the whole width of the main interface of the web component :

Seen in full width. If you don’t see exactly that, there is no problem : it’s the subject of my post.

This panel has some different actions as direct downloading the media file (according to which codec can be read by the browser, as we still get some old guns as Safari) and also share the sound via e-mail, twitter or facebook to relatives, sending them the canonical URL of the sound’s page. Due to limitations on those social networks, only e-mail gets a working media-fragment starting the play at the exact moment you were listening.
From left to right :

a copy of the cover, going back to the main interface,
share on Twitter (vanilla link),
share on Facebook (vanilla link),
share by e-mail (mailto: link),
download the media (according to which codec can be read),
cancel, going back to the main interface.

As my web component is in liquid design and mobile first, the interface is simplified on small width : cover and text labels are hidden.

Yes I know. For any critics on icon’s design, please commit me better ones. I'm a coder, not Picasso.

Canonical URL means that if you want to share the radio show on cpu.pm front page, as i’m only showing the last broadcasted episode, its audio tag will be removed after next one is broadcasted, so there is a better choice : providing the page of the episode. And please, don’t look like you don’t use this useful tag. Yes, even if, as I do, you don’t code a website optimized for desktops, and a .m one for mobiles, because, you know, it’s a loss of time.

If the canonical URL is not the one where is hosted the player, the canonical="" attribute will do the job.

The wish

We already have browsers with a share on social networks menu on mobile platforms. I’ve explained in a 2014 post in French about why I put again share buttons on my blog. It was 5 years ago, and, even if the general interface of the browsers moved, this over useful interface is still here.

Seen there in Firefox on Android in 2014, and was literally rocking, getting you directly in their respecting function in the native apps.

Cool. Except that your browser will take the title of the page, a title encumbered with unmeaningful elements as separation glyphs, name of the site before title of the page, in extenso description of old-school SEO with a bunch of keywords names verbs persons marks important etc… Up to the user to clean it up and rephrase it.

The witch

Here enter the good fairies of the web standards : The W3C introduced navigator.share() aka WebShare, a function standardizing how to do it and allowing to suggest a bit longer description.

This function has numerous wins :

being standard (in theory, I’ll explain later) ;
not forgetting a service used by your reader (instead of the facebook/twitter classical duo) ;
use a native control of the host OS, really more useful on smartphones ;
deep sending you to the share function in the native app ;
not tracking the users as do social networks with rich buttons (this is a shared win with classical HTML links) ;
not tracking the users by the hosting website, guessing which sharing service they use ;
not encumbering the small screen of a smartphone with gazillions of services.

Calling it is damn simple.
I’m really delighted having a so lean and perfectly thought process, instead to construct an instance builder with parameters set by another class serving a specific object and call it via an event dispatcher.

♫ In a webpage, https:// served , on a user action (as ), cook * :

navigator.share({
            'title': document.title,
            'text': document.querySelector('meta[name="description"]').content,
            'url': window.location.href
        });

* in French, it sings as the Cake d'Amour song in the famous « Peau d'Âne » movie, directed by Jacques Demy. That’s what I call love.

If you have a clean coded html page, your whole job is done. If it’s a piggy mess, you should start to not forget the <meta... description tag.
By the way, you can share files with this standard’s level 2, and an API to test the share (navigator.canShare()).
Pure genius !

The twist

Except :

CanIUse.com support stats as taken when I wrote the original french post.

This API is not available on desktop computers (except Safari Mac) ;
It is also not available on Chrome Desktop, even in responsive mode (by the way, not a real mobile emulation, and may induce you in error) ;
This API is as today only on iOS and Chrome Android ;
On iOS, each native app should carry its own sharing list, so we had a lot of missing ones due to the lack of a system-wide registry. We have it finally with, guess what ? Experimental support of navigator.share !
It is still not possible of a online service accessed via a browser to be registered, as long Web Share Target API is nowhere implemented (and if it will be somewhere, we need to have it accepted by the user via a specific interface, to avoid spam attempts).

We have a very volatile scene of social networks, and the landing of decentralized hives, where inhabitants is supposed to easily migrate from an instance to another one. For 3 years Web Share is so under-esteemed and only usable on one platform is a real shame. I’m deeply convinced we have technical ability to build a WebExtension doing that job on desktop browsers.

I have some request to add, or being able to add, sharing option for a lambda website. Sure, I’d only put Facebook and Twitter, some people shamed me for forgetting Diaspora*, VKontakte, Mastodon, etc.social.random() in the action interface of my player. They are right.
Except the more you get in a limited place, smaller each button will be and all those services will be tight on the bench a wide as a smartphone. And, whatever we can do, there is no way to keep an exhaustive list of any available share services, even for specialized audience, for a real obvious point : New services appear each day.

So I’m re-using this really lame joke, again.

Looking this image again, we note that a lot of those social services that died during the last 5 years. And having so much begging puppies makes the whole page unreadable.

The tweet

Well, I can not declare those missing services in the webcomponent code, and create an API permitting the web-developer to add some ?

Ahem. No. Wrong idea.

Because a such function will induce other problems : charging the work to whom will include my webcomponent in his website, asking to have some javascript knowledge and read my API's documentation. I can hear you, noisy kids : even with a big RTFM, you won’t.
And I can bet that the web operator will forget some sharing services.

It also means giving to the integrator some parameters that may be harmful :

describing a color, injecting it via the style="background-color" attribute ;
describing a monochromatic SVG logo, needed because of the color inversion on :hover and :focus, and betting the image will be exactly matching my template constraints and is not having an embedded javascript ;
describing an URL canvas where to send for that sharing service, if a such URL exists.

Yes, I’m talking about you, social services with sharing systems that don’t support a simple link for that job. With the main motive to force your users using your mobile app full of tracking ads. You, nasty boys.

So what ?

I don't know what to tell.

Today, a feature detection replaces the facebook/twitter/e-mail buttons by a unique button, launching the navigator.share() function. You can see it only on Chrome Android and Safari.

The action interfaces, with the navigator.share() button

Screenshoted on Safari Mac by Hadrien Lanneau. It pops up a contextual menu where the mouse is.

And later, yes, build a polyfill WebExtension may be a great idea (in a more generic and without jQuery way, compared to web-share-api by C. Zuber). As long as sharing services will collaborate without pollute it with analytics and other ad-tracking.

For me, the best looking interface to add a share service in my browser is to re-use what already exists in Firefox to add a search engine. Because it's a lean interface, explicit one, standard-based and most of the work is already done there.

It’s up to you to build it, now. IMHO, this is not a over-difficult job to complete, and will be still a future-proof solution instead of any old AddThis script.

You can also support initiatives to add WebShare into :

Again, it was a long post talking about code, standard, implementations, but, for me, it worth it because this issue is not limited to my cpu-audio.js.
My next post in this series will be in French and talks about CSS, standards and implementations for some… strange colors.
May be it’s a frightening title, may be related to a horror story, so I have to say the killing sentence :

I’ll be back… soon !

J'ai donné ma collection d'Animeland à la Cinémathèque

Da Scritch — 2019-06-24T13:31:00+02:00

Et hop ! Quelque place en plus pour euh.... pour... euh...
Sortons

J'avais commencé à acheter la revue Animeland, parce que comme je causais de plus en plus de manga dans mes émissions radio, il fallait bien que je me renseigne et que je dise moins de conneries. Or ce magazine, qui a commencé comme fanzine, était réellement indépendant de tout éditeur, et proposait des articles, dossiers et interviewes de qualité, avec une réelle approche critique.

Puis, j'ai arrêté mon activité de chroniqueur BD après 25 ans d'activité. Mes revues se sont retrouvées dans un rayonnage quand j'ai arrêté de faire mes chroniques BD, quand nous avons arrêté Supplément Week-End. Puis j'ai fait la place dans la bibliothèque et ces revues sont allées dans des cartons. Et les cartons sont restés, plein de revues, de dossiers, d'albums et des masters d'interviewes, encombrant de son m³. J'ai donné des albums, des revues, mais je me suis dis que certaines d'entre elles pouvaient intéresser au-delà d'une collection privée.

Alors j'ai fait une proposition à la Bibliothèque Municipale de Toulouse et à la Cinémathèque de Toulouse. Et cette dernière s'est trouvée intéressée par ma collection Animeland, qui va approximativement de la 37 à la 110. Environ 60cm linéaires..

Pour les amateurs, il me reste du Fluide Glacial et du BoDoi, faire offre très très vite

Je suis vraiment heureux que la Cinémathèque de Toulouse se soit manifestée. Depuis qu'ils sont à la Rue du Taur, ils n'ont pas hésité à mettre en avant les films dits de genre, d'abord par les faubourgs du cinéma et ensuite le festival extrême cinéma, que Radio <FMR> a accompagné autant que possible. J'ai pu y rencontrer Jean Rollin, et d'autres noms célèbres du bis, on a pu y monter des projections nanardes tout comme des ciné-concerts d'exceptions (et j'ai un souvenir ému du Point ne tueras avec Doctor Livingstone et DJ Peyo en Novembre 1998).
Ils ont un réel respect pour des œuvres qui n'étaient pas forcément bienvenue dans un cadre académique et un fonds d'une richesse exceptionnelle qui date de leurs tous débuts. Et je le dis d'autant plus que Franck Lubet et Professeur Thibault sont des amis et des puits de science.

Et c'est ainsi que nous avons transféré cette collection, direction la rue du Taur, et sa magnifique bibliothèque au premier étage.

Ceci est la salle publique de consultation de la bibliothèque (le fond films et vidéos est à Balma). Outre des scénarii, des ouvrages critiques, des biographies, etc... on trouve les revues parues dans l'année. Pour consulter les années précédentes, il faut demander gentiment au personnel présent. Pour le coup, nous avons été autorisés à voir le back office, le fonds de la bibliothèque, entreposée dans ses impressionnantes armoires automatiques.

Le fonds est divisé entre les collections de revues complètes francophones, et les étrangères et incomplètes. Pour l'anecdote, ils ont même du Hot Video, les légendes des rayonnages racontent qu'une directrice a voulu s'en débarrasser, mais que l'équipe a tenu bon : Si ce n'est la Cinémathèque de Toulouse qui les archive, aucune autre institution ne conserverait d'archives d'un cinéma aussi marginal.

Mes revues ont rejoint le fond de leur bibliothèque, et sont consultables à la rue du Taur, avec d'autres bien plus prestigieuses. Si jamais vous en ouvrez un et que vous tombez sur un bout de post-it, ben vous saurez que j'ai parfois fait des chroniques en catastrophe par manque de temps.

Si vous avez ce genre de revues en collection, dans un état impeccable, n'hésitez pas à contacter les bibliothèques municipales et les musées, vous pourriez leur donner une nouvelle vie et aider des étudiants et des chercheurs.
Et d'ailleurs....

Et il se trouve que la Cinémathèque avait la revue Animeland du n°12 au n°37. Drôle de hasard. Du coup, j'ai demandé à voir le plus vieux. Et dedans, enfin la réponse que je cherchais depuis 3 mois.

La fin de l'histoire de fin

Lors du dernier THSF, j'ai fait une conférence autour de l'œuvre « Akira » de Katsuhiro Otomo. Régulièrement, je lis dans des articles que Otomo était embêté sur le final de sa BD (qu'il réalisera bien après le film) et que Alejandro Jodorowsky lui aurait conseillé une fin. Le problème est que je n'avais aucune confirmation de ce fait dans une interview d'Otomo, et, ayant déjà eu Jodorowsky en interview et plusieurs témoignages, je savais que l'individu avait tendance à broder de nombreuses légendes sur sa personne. J'étais pas sûr, et je voulais une réponse si jamais cette histoire revenait. J'avais seulement des témoignages comme quoi ils se voyaient souvent, ce qui aurait corroboré cette thèse.

Et en ouvrant Animeland n°12, en feuilletant, je tombe pile poil sur une interview du mangaka, qui efface enfin les doutes :

(question) Il me semble avoir lu dans une interview datant de l'année dernière que le scénariste chilien Alexandre Jodorowsky a affirmé vous avoir suggéré la fin d'Akira lors d'une fête. Tout d'abord je voudrais savoir si cela est vrai […]
(réponse) En vérité, la fin d'Akira était déjà décidée depuis le début.

Plus de doutes, Jodo est un mytho.

Le blues du Web Share

Da Scritch — 2019-06-18T06:52:00+02:00

Il y a enfin un moyen pour mettre des boutons de partage sans oublier une plateforme ou un usage et ceci, en assurant le respect de la confidentialité de vos ouailles. Allez et partagez la bonne nouvelle ! Enfin, ceux qui l'ont, car évidemment, la fonction est très peu répandue.
Webdev

An english translation is available.
Cet article est dans la série consacrée au développement de la bibliothèque cpu-audio.js et documente les affres de sa version 6. (enfin, la 6.1, car j'ai dû modifier l'icône dont il est question).

Mettre de l'audio dans le web n'a pas été simple
Reconstruire son lecteur audio pour le web (sur la version 5)
Retravailler un lecteur web audio dans les petites largeurs
Le blues du Web Share (english version)
Deux couleurs bizarres en CSS
cpu-audio.js enfin en 7.0
Tout-terrain WebVTT pour de l'audio
Dichotomie entre podcast et web sur l'audience

Je continue le tour des coulisses du webcomponent cpu-audio.js. Et aujourd'hui, on va parler de ce qu'il y a derrière son bouton

Je vous remets le player, dans la dernière version de dev. Sinon, ⇓ sautez ⇓ directement ⇓ au chapitre suivant ⇓

Pour lire ce billet, il est conseiller d'aller sur mon site dascritch.net. Si vous lisez ce texte, c'est que probablement vous n'y êtes pas.

Ouais, le sonore date un peu, mais c'est pour illustrer et de toutes façons, je ne fais pas mieux en radio depuis.

The switch

L'interface normale du lecteur ci-dessus

Ce bouton (à droite de l'interface normale) bascule l'interface de lecture, vers une interface de partage. À noter qu'il est possible de cacher ce bouton et rendre l'interface d'action inaccessible via l'attribut hide="actions", ce qui peut se comprendre, par exemple si le site a déjà sa propre interface de partage.

Une fois le bouton cliqué, on se retrouve sur le panneau d'actions qui prend toute la largeur du panneau principal du web component :

Vue en pleine largeur. Pas de panique si vous ne voyez pas exactement ça : c'est le sujet de l'article.

Ce panneau propose différentes actions comme la possibilité de charger directement le sonore (en fonction du format qui est supporté par le navigateur, parce qu'il reste des vieux tromblons comme Safari), et aussi celui de partager le sonore par e-mail, sur twitter et sur facebook à des amis en renvoyant vers l'URL canonique de la page du sonore. À cause des limitations imposées pour les partages sur les réseaux sociaux sus-mentionnés, seul le partage par e-mail permet en l'état de profiter du media fragment pour pointer exactement au même moment.
De gauche à droite :

reprise de la cover pour revenir à l'interface de base,
partager sur Twitter (lien simple),
partager sur Facebook (lien simple),
partager par e-mail (lien mailto:),
télécharger le sonore (en fonction du codec accepté par le navigateur),
annuler, revenir à l'interface normale.

Comme le web component est en interface liquide et en mobile first, l'interface est simplifiée sur les petites largeurs : la cover disparaît, et les textes aussi.

Oui, alors, si vous avez des remarques sur le design des icônes, rien ne vous empêche de proposer mieux. Je suis programmeur, pas Picasso.

URL canonique voulant dire que si par exemple vous partagez l'émission qui est en une du site cpu.pm, vu que c'est la dernière émission diffusée, elle y disparaîtra à l'émission suivante, donc il vaut mieux directement renvoyer vers la page de l'émission. Et ne faites pas ceux qui ne connaissent pas, vous devriez utiliser le tag. Oui, même si, comme moi, vous ne doublez pas un site prévu pour desktop avec un m. pour mobile parce que ça fait trop perdre de temps.

Si l'URL canonique de ce sonore n'est pas celle de la page où est intégré le player, l'attribut canonical="" est là pour ça.

The wish

Il existe déjà sur les navigateurs des plateformes mobiles un menu de partage de lien vers les réseaux sociaux. Je l'avais déjà fait remarquer dans le billet où je parlais de la réapparition des boutons de partage sur mon blog. C'était y'a 5 ans, et si le design général des navigateurs a changé, cette interface hyper pratique est toujours là.

Ici, dans Firefox Android en 2014, et ça déchirait déjà pas mal, renvoyant sur les applications natives correspondantes.

C'est cool, sauf que, bien souvent le navigateur va reprendre le titre de la page, lequel est bien souvent encombrée d'éléments inutiles genre glyphes de séparation, titre du site en plus de la page, description in extenso pour du SEO à la papa bourrée de mots-clés mot-clé keyword key word terme important , etc… Ce qui laisse le boulot à l'utilisateur de nettoyer et de remettre en forme.

The witch

Arrivent les bonnes fées des standards du web : Le W3C a introduit navigator.share() aka WebShare, une fonction qui standardise l'action et permet de proposer un texte descriptif un poil plus long.

Cette fonction présente plusieurs avantages :

être standard (théoriquement, on verra plus loin) ;
ne pas oublier un service de l'utilisateur (au lieu de rester sur le diptyque facebook/twitter) ;
utiliser un contrôle natif de l'OS beaucoup plus pratique sur les smartphones ;
envoyer directement le lien à l'application native installée dans son interface idoine ;
ne pas pister les utilisateurs par les réseaux sociaux en proposant les boutons enrichis (avantage partagé si vous utilisez les liens HTML classiques) ;
ne pas pister les utilisateurs par le site web en devinant quels services de partage l'utilisateur emploie ;
ne pas encombrer l'écran du smartphone avec trouzemillions de services.

L'appel est hyper simple.
Ça fait même hyper plaisir d'avoir quelque chose d'aussi simple et correctement pensé, au lieu de devoir faire appel à un constructeur de classe, à des paramètres instanciés par un autre constructeur pour un objet spécifique, et d'envoyer via un diffuseur d'événement.

♫ Dans une page… ♬ dans une page web *, ♫ servie en h… ♬ servie en https://, sur une action utilisateur (genre ), lancer :

navigator.share({
            'title': document.title,
            'text': document.querySelector('meta[name="description"]').content,
            'url': window.location.href
        });

* Honte à moi, oui, j'ai bien chanté ce paragraphe sur l'air du Cake d'Amour dans « Peau d'Âne » de Jacques Demy. Et maintenant, vous l'avez dans votre tête, votre journée sera foutue. Plaintes en commentaires ↓, merci

Si votre site est déjà bien conçu, vous n'avez quasi plus de boulot à faire. Si votre site est conçu comme un cochon, il va déjà falloir apprendre à ne plus oublier les balises <meta... descriptives.
D'ailleurs, on pourra aussi partager des fichiers avec le niveau 2 de ce standard et une API pour tester l'envoi (navigator.canShare()).
C'est génial !

The twist

Sauf que :

Les chiffres de support par CanIUse.com relevés à l'écriture de ce billet.

Cette API n'existe pas sur ordinateurs de bureau (excepté Safari Mac) ;
Elle est aussi indisponible sur Chrome Desktop, même en mode responsive (qui n'est pas un vrai émulateur mobile, et n'est pas toujours fiable pour tester réellement) ;
Cette API n'est pour l'instant supportée que par Chrome sur Android et iOS (eh !) ;
Sur iOS , chaque application devait prévoir sa propre liste de partage, il y a donc souvent des oublis faute de registre commun au système. C'est enfin arrangé depuis la dernière version d'iOS avec, devinez quoi ? Le support expérimental de navigator.share !
Il n'est pas possible pour un service en ligne accédé via le navigateur de s'inscrire, tant que l'API Web Share Target n'est implémentée nulle part (et si elle l'est, il sera impératif de demander l'autorisation à l'utilisateur par une interface de validation, afin d'éviter le spam).

Devant la volatilité des réseaux sociaux, et surtout l'arrivée des ruches décentralisées où un habitant est supposé pouvoir migrer facilement vers un autre service, il est vraiment dommage de Web Share soit si peu considéré depuis 3 ans, et cantonné que sur une plateforme. Il y a pourtant sûrement le moyen de créer une WebExtension qui fasse le taf pour les ordinateurs de bureaux.

Alors, on m'a souvent demandé la possibilité de rajouter dans le lecteur une option de partage vers un site particulier. Ben oui, j'avais mis que Facebook et Twitter, beaucoup me reprochent de ne pas avoir mis Diaspora*, VKontakte, Mastodon, etc.social.random() dans l'interface d'action de mon player.
Sauf que, évidemment, plus on en met dans un espace délimité, plus les boutons de chaque site sont petits et les services sont serrés sur une banquette large comme un écran de smartphone. Et quoique l'on fasse, impossible de couvrir toutes les solutions de partage, même pour les sites spécialisés, ne serait-ce que pour une raison évidente : Chaque jour naissent de nouveaux sites.

Et du coup, je ressors du même billet précédent cette image à l'humour douteux. .

À revoir cette illustration, on remarque immédiatement que nombre de ces services sociaux ont disparu dans les 10 ans. Et qu'un tel foisonnement rend la page totalement illisible.

The tweet

Donc si je met pas les services dans le code du composant, peut-être pourrais-je créer une API pour que l'intégrateur puisse en rajouter ?

— HIN ! HIN ! F.B.I. Fausse Bonne Idée !
— Hein ? Quoi ? Encore ?
— Ben oui, je ne m'en lasse pas.

Car cette possibilité induirait un autre problème : elle laisse le travail à la charge de celui qui intègrera le composant sur son site, ce qui induit le prérequis qu'il s'y connaisse en javascript et qu'il lise la doc de mon API. Je vous connais bande de petits coquinous : même avec un RTFM, vous ne le faites jamais.
Et évidemment, invariablement, l'opérateur du site oubliera d'autres sites de partage.

Cela induisait aussi d'inclure des paramètres par l'intégrateur qui pouvaient poser soucis :

intégrer une couleur en l'injectant via l'attribut style="background-color" ;
intégrer un logo monochrome en SVG, et on est obligé d'être monochrome à cause de l'inversion de couleur au :hover et :focus, sans compter le pari que l'image soit ajustée aux contraintes de mon canvas et que l'intégrateur n'aura pas mis de js embarqué quelconque ;
intégrer un motif d'URL où renvoyer pour le service ciblé, à condition qu'une telle URL existe.

Oui, je pense à vous, les sites de partages sur réseaux sociaux qui n'ont pas de possibilité d'enregistrer par un lien simple. Souvent par volonté d'obliger leurs utilisateurs de passer par une appli mobile native bourrée de traceurs publicitaires.

Ben alors, on fait rien ?

Je ne sais quoi vous dire…

Pour l'instant, je fais une feature detection, qui fait que les boutons vers facebook, twitter et e-mail sont remplacés par un bouton unique lançant la fonction navigator.share(). Une solution qui n'apparait uniquement que sur Chrome Android et Safari.

Le panneau d'actions, avec le bouton unique lançant navigator.share()

Capture d'écran sur Safari Mac par Hadrien Lanneau. La fonction ouvre un menu contextuel à la position de la souris.

Et pour les autres, oui, construire une WebExtension polyfill serait une bonne idée (dans une version plus générique et sans jQuery que web-share-api de C. Zuber). À condition que les sites de partage participent au mouvement sans vouloir y embarquer du script analytics de traçage publicitaire.

Personnellement, je pense que la meilleure interface possible pour inscrire un site de partage en plus dans son navigateur est de reprendre ce qui existe déjà pour ajouter un moteur de recherche. Parce que cette interface est propre, elle est explicite, elle est standardisée, et les évolutions à y faire apporter ne sont pas énormes.

Pour la réalisation, à vous de tenter, je ne crois pas que cela soit hyper-compliqué, et ça sera toujours mieux à long terme qu'un antique script à la AddThis.

Et en attendant, soutenez les initiatives pour ajouter WebShare dans :

Ce billet fut un poil long là aussi, et j'ai causé de code, de standard et d'implémentation, mais je pense que cela le valait, surtout que ce problème ne s'applique pas, loin de là, uniquement à mon cpu-audio.js. Prochain épisode, on va plutôt parler de CSS, et là aussi, on parlera standard et implémentations pour… des couleurs bizaaaaaaaarres !
Si le titre vous fait peur, c'est que je tiens sûrement le titre d'un film d'horreur, et donc je me dois de sortir la réplique qui tue :

Prochaine épisode : Des couleurs impossibles

Retravailler un lecteur web audio dans les petites largeurs

Da Scritch — 2019-06-05T07:32:00+02:00

Parce que les chiffres ne mentent pas : nous sommes de plus en plus nombreux à avoir un smartphone. (Essayez de prononcer cette phrase d'un ton concerné en public sans rire, ça vous fera l'après-midi)
Webdev

Cet article est dans la série consacrée au développement de la bibliothèque cpu-audio.js et documente les affres de sa version 6.

Mettre de l'audio dans le web n'a pas été simple
Reconstruire son lecteur audio pour le web (sur la version 5)
Retravailler un lecteur web audio dans les petites largeurs
Le blues du Web Share (english version)
Deux couleurs bizarres en CSS
cpu-audio.js enfin en 7.0
Tout-terrain WebVTT pour de l'audio
Dichotomie entre podcast et web sur l'audience

Et cet article est long, car comme le premier, je tiens à documenter ma démarche. Et comme j'aborderais plusieurs thématiques, vous aurez plusieurs épisodes. Vous pouvez tester l'application ici ↓ dans sa version de travail en cours.

Pour lire ce billet, il est conseiller d'aller sur mon site dascritch.net. Si vous lisez ce texte, c'est que probablement vous n'y êtes pas.

Avant d'entrer dans le vif du sujet, je rappelle que je ne suis pas web-designer, mais un développeur d'applications web et que je n'ai qu'un minimum de bagages pour construire un web component faisant office de player audio. Que ce composant a été écrit afin de l'intégrer dans un site d'une émission radio, ceci dans le but de lier et de lire des sonores qui durent en moyenne une bonne heure. La plus longue des émissions de CPU dure 5h30, un exemple NSFW qui montre à l'extrême les contraintes.

J'ai qu'un minimum de culture en design, mais j'ai eu la chance d'avoir fréquenté depuis 2000 des designers web (des vrais) qui étaient exigeants et m'ont beaucoup appris à ~~coups de b~~ la dure.

Petits dans la poche, gros dans les contraintes

L'un des gros gros chantiers évolutifs de CPU-Audio.js pour cette version fut la mise au point d'une interface confortable pour les smartphones.

Par rapport à ceux dits de bureau, on a sur ce type d'ordinateurs deux problématiques supplémentaires :

Un écran nettement plus petit,
un dispositif de pointage bien moins précis.

Voici la comparaison avec mon web component sur mon propre blog dans sa version de Janvier 2019, tel que vu sur un ordinateur de bureau (1920 px de large) avec un pointeur de souris.

la souris a une précision au pixel et son curseur ne cache pas tout l'environnement immédiat

… et le même composant, mais vu sur un smartphone d'une largeur de 320 px (virtuels, résolution typique d'un iPhone 5 en mode portrait, en fait l'écran fait dans les 1080 pixels physiques, mais expliquer les dppx dans la foulée serait trop long).
Le disque rouge est une simulation l'espace d'appui d'un gros doigt normal prompt à la bourde.

environ 50 pixels de diamètre, sans compter l'imprécision dû au virage effectué par votre bus à une certaine vitesse

Il existe un certain nombre de règles de bonnes pratiques pour y palier :

mobile first : On présente en priorité les éléments les plus importants de la fonctionnalité voulue ;
On aménage des zones cliquables suffisamment grandes et espacées ;
Le composant doit s'afficher très très vite, et donc avoir un code très léger avec le moins de dépendances possibles, si possible aucune ;
Responsive Web Design (RWD) : On ajoute l'accessoire quand on a plus de largeur disponible.

J'étais déjà parti avec un design liquide (ou fluide ou coulant) pour être le plus confortable, dans l'idée que mon composant puisse être intégré quels que soient les choix sur le design du layout des sites. Pour la légèreté, je tente de maintenir le code compilé sous les 50 kB, même s'il a pris 20% de poids en plus entre la v5 et la v6.

Mais il y avait encore quelques manques dans la version 5 pour que mon player audio soit vraiment confortable à utiliser sur smartphones.

Et déjà un premier souci avec les CSS media queries breakpoints

Car effectivement, il est possible de cibler des définitions CSS par des règles media queries qui s'activent en fonction de la largeur de l'écran ou de la finesse de l'afficheur physique (via l'unité de ratio dppx évoquée plus haut entre parenthèses, oui je sais, ça fait lourd à lire tous ces apartés). Pour les définitions en fonction de la largeur d'écran, cela revient à définir un breakpoint, une dimension critique d'une media query ou le chouïa qui fait changer l'aspect, des propriétés peuvent changer plus ou moins radicalement. J'ai choisi cette stratégie car c'est la plus pratique pour une conception en design liquide.

Mais il y a un gros problème dans l'idée de concevoir un web component installable partout : Il n'est pas possible d'appliquer lesdites règles en fonction de l'espace disponible dans un élément parent en pur CSS. C'est faisable mais avec des polyfill en javascript particulièrement lourdingues.

Je m'explique : Si l'écran est d'une largeur d'écran de bureau (vers 2000 et au-delàààààà), mais qu'un intégrateur installe mon composant sur un site, dans une gouttière qui fait 320 pixels de large, l'aspect de mon composant ne sera pas adapté car les boutons seront trop gros, et par exemple pour les titres, ils ne rentreront pas dedans.
Autre exemple : supposons que la mise en forme du site est entre un bloc principal à largeur variable, et une colonne à taille fixe de 200 pixels. Si le lecteur est dans le bloc principal, il serait logique qu'il change de forme pour une largeur inférieure à 320 pixels quand la fenêtre tombe en dessous de 520 pixels…

@media (max-width: 320px) {
    dommage, hein ?
}

Tommy Hodgins a fait une proposition auprès du W3C qui me serait super utile et totalement indiquée dans mon cas : Les CSS Element Queries qui proposent de définir en breakpoints la dimension d'un élément englobant.

La proposition CSS Element Queries permettrait de définir des règles appliquées si la largeur de l'écran fait 320 pixels ou moins ou que l'élément #conteneur a une largeur de 320 pixels ou moins :

@media (max-width: 320px) , @element #conteneur and (max-width: 320px) {
    J'en rêve, mais j'en rêve ! (c'est déjà dans mon code)
}

Hélas, cette proposition ne semble pas être au programme du CSS working group du W3C et donc pas près d'être implémentée nativement. Et évidemment, tout polyfill est lourd, même avec l'arrivée prochaine de l'API ResizeObserver.
Pourquoi ? Imaginez que vous chargez 4 ou 5 web components dans la même philosophie de conception, qui chacune lance son polyfill… Ouais, évitez le CSS-in-JS dans ce cas-là : vous risquez de ne plus rien contrôler correctement.

Autre frustration : il n'est pas possible d'utiliser des variables CSS pour définir des breakpoints, des changements de résolutions significatifs. Dans mon projet, le style est défini est dans une CSS locale, tandis que les variables reparamétrables par l'utilisateur sont dans une CSS globale, normalement, toutes les variables qui intéressent les graphistes sont dans la CSS globale… sauf ce qui défini les breakpoints !
C'est pour ça qu'ils sont codés en dur à 640 px, 480 px et 320 px.

Pourquoi une telle frustration ? En fait, ce manque est intentionnel : les variables sont justement variables selon les usages et leur définition, pouvant vite devenir un casse-tête pour les navigateurs web à recalculer dans un media query.

Et on pourrait aussi avoir des… maladresses genre :

--largeur : 1000px;
@media (max-width: var(--largeur)) {
    --largeur : 500px;
}

Do not want comme on dit dans le secteur.

Il tourne actuellement au W3C une autre proposition, définir des constantes CSS d'environnement définissant des informations pour l'ensemble du document. Ces constantes peuvent être définies par le système hôte, le navigateur web ou dans la CSS (et on imagine, idéalement sur le sélecteur :root).
À leur appel en lecture, ces constantes peuvent prendre un paramètre optionnel qui sert de fallback. L'invariance de la valeur représentée en quelqu'endroit du DOM le rend alors utilisable pour définir un breakpoint.

Là aussi l'idée est géniale, et le dossier semble un poil plus avancé, l'implémentation native étant satisfaisante pour être jugée comme générale l'année prochaine. On a la lecture, pas encore la déclaration

:root {
    --largeur : 1000px;
}

@media (max-width: env(--largeur, 320px)) {
    ooooh ouuuuiiiii
}

breakpoint sur un élément, comme on peut, comme un porc

Dans l'immédiat, je suis arrivé à le faire sur le mini-site de présentation du projet grâce à une astuce limite du crade à faire dégainer l'Inspecteur Dirty Hacky

Pièce à conviction n°1, faites entrer l'accusé

J'ai utilisé des <iframe>. Et pourquoi est-ce crade ?

Il faut créer une ressource indépendant pour chaque instance appelée, ici 3 documents html de plus ;
Évidemment, il faut recharger le script cpu-audio.js, donc le charger et l'instancier 4 fois pour cette page ;
Idem pour la feuille de style ;
On instancie 3 objets DOM de page en plus, bouffant de la RAM ;
C'est impossible de faire un design liquide propre dedans sans pleurer sur certains cas ;
Et on perd des fonctionnalités comme :
- le lien avec media-fragment (c'est très très con : c'est la fonction qui a motivé l'écriture de mon script),
- l'anti-cacophonie (un seul sonore lu à la fois dans la page),
- les playlists,
- et le contrôleur global (le bouton ▸︎play dans l'encart à fond noir à gauche sur ma capture) ne voit pas ces instances.

Je ne l'ai utilisé que pour faire la démo des largeurs. Ne faites jamais ça chez vous, les enfants !

Le problème de la navigation fine sur une largeur fine

Revenons sur les problèmes fonctionnels de mon web component sur les ordinateurs de poche.

Le manque qui me semblait le plus gênant était de revenir en arrière d'une phrase dans un sonore d'une heure. Le lecteur peut interpréter certaines touches comme ← et →, mais aucun smartphone n'a de clavier avec des touches fléchées depuis la mort du dernier Blackberry à touches physiques. Reste le positionnement au doigt ~~levé~~ posé, et donc la navigation dite fine s'y révèle imprécise.
Améliorer ma time-line était indispensable.

Une time-line c'est ÇA :

N'oublions pas que mon web component est prévu pour être utilisé dans une page web, et qu'il a été conçu en design liquide, donc si on passe son smartphone de l'orientation portrait à paysage et que sa dimension n'est pas fixée, le visiteur gagne autant de largeur, donc de précision pour naviguer dans la time-line. Mais la prise en main me semblait toujours insuffisante.

Dans pratiquement tous les lecteurs audios, la time-line est à la fois un indicateur et un élément de contrôle auquel on s'attend pour tout média audio ou vidéo d'une certaine durée. Elle indique à la fois la position en cours de lecture, la partie préchargée immédiatement lisible sans avoir à attendre, et permet à l'auditeur de sauter à une position. Plus cette time-line est large, plus le positionnement au pointeur par l'utilisateur est précis. Plus le sonore est long, moins ce positionnement est précis.
Je ne saurais dater son apparition, mais il me semble qu'elle est apparue avec le premier Quicktime (1991) en tant qu'adaptation de la time-line des éditeurs de sons qui présentaient la forme d'onde du sonore en cours d'édition, et ceci depuis les années 1970s.

Avant de me remettre ~~au redesign~~ à la refactorisation de mon lecteur, et vu que moi-même je ne suis pas parfait, j'ai regardé ailleurs et essayé des applications natives sur smartphones. En me concentrant sur son comportement lors du passage d'une disposition portrait à paysage. Certains choix y sont surprenants, et pas uniquement sur les durées affichées (passée, restante ou totale).

Quatre exemples de time-line en natif

L'application Youtube l'agrandi aussi en passant en mode paysage. En mode portrait, elle utilise le maximum de largeur d'écran.

Mais pourquoi ai-je pris une vidéo d'Eugène Lawn ?

HenryMP, héritier d'un excellent player audio (Appollo sur Cyanogen OS), se montre encore moins aisé : si on décide de basculer l'écran du mode portrait au paysage.... la time-line n'est pas plus grande pour autant. Frustrant.

J'imagine que la logique y est plus d'écouter des singles d'environ 4 minutes et de mieux voir la pochette de l'album, pas forcément de naviguer dans un DJ-set de 2 heures ou dans une conférence au Collège de France

Note : Cette application n'est plus maintenue depuis 4 ans, elle est présentée ici pour l'exemple.

Podcast Addict, qui est une excellente application orientée podcast (merci Capitaine Évidence), a quelques manques dans sa prise en main pour naviguer. En gros, si l'émission n'est pas chapitrée ou n'a pas de liens explicatifs dans son texte descriptif, on pointe sur la time-line puis on utilise des boutons pour se positionner plus finement.

Dans la vue présentation d'un épisode, basculer en mode paysage étend la time-line.

Sauf que, petite inconsistance : sur la vue propre à un sonore, en mode paysage, la time-line est… plus courte. Oups.

Je termine ce tour avec une application très particulière, celle de Les Croissants, qui propose une matinale par modules, composée en fonction de vos centres d'intérêts.
(Manque de bol : La société Les Croissants a fermé la veille de la publication programmée de cet article. Pas d'bol.)

En haut, vous avez une vue sur l'ensemble de l'émission dans une time-line globale, et au milieu, chaque chapitre a sa propre barre de défilement, mais à la verticale, sur la gauche.

On a certes une redite de la time-line entre la vue totale (horizontale) et celle par chapitre, mais ce qui est nettement plus notable et bizarre est que la progression des time-lines des chapitres n'est pas constante, puisque la hauteur de cet élément est fixe, mais que la durée peut varier (entre 3mn et 7mn). Mais ces bizarreries sont plus une signature et non gênantes à l'usage.

On a vu quelques outils de consultation destinés au public, j'aimerais vous présenter un outil professionnel de lecture de média :

Le jog shuttle du Beta SP

Le magnétoscope Beta SP de Sony est avec sa cassette Betacam un engin de chantier de l'audiovisuel des années 1980s-2000s. Costaud, robuste, très cher et indispensable pour toute production de qualité. La première fois que j'ai pu en utiliser un, j'ai immédiatement adoré l'usage du bouton jog shuttle ! Oui, même en pleine frustrajoie.

Vous ne pouvez pas louper le jog shuttle : c'est ce gros bouton rond noir proéminent idéalement placé sous votre main droite sur le panneau inférieur.
Photo non créditée sur Pinterest

Dans le mode shuttle en pause ou pendant la lecture, vous pivotez le bouton rotatif, la bande défile alors vers l'avant ou l'arrière plus ou moins rapidement, entre le ralenti et l'accélération ×8 en fonction de l'angle de rotation. Relâchez, le bouton rotatif revient en position neutre.
Mais si vous cliquez sur le bouton, le ressort est désactivé, et le mode de fonctionnement passe en jog, où vous faites défiler les images en tournant le bouton. Comme si vous bougiez manuellement la bobine de la bande sur un bon vieux reel-to-reel ReVox, ou que vous caliez un disque vinyle (étant à Radio <FMR>, j'ai voulu être DJ). Ce qui permet un calage à l'image près, indispensable pour le monteur vidéo.

On a donc un outil de calage qui passe d'un clic d'un positionnement grossier au calage à l'image élémentaire. La prise en main est incroyablement intuitive une fois qu'elle vous a été montrée.

À 1m42s, une petite démo avec un lecteur XDCam portable, mais il s'agit d'un bouton combo (voir le paragraphe suivant). Pour 60€, je vous aurais intégré cette vidéo éclairante avec un vrai BetaSP. Et y'a celle-là montrant un autre point de vue.

À noter que certains magnétoscopes très haut de gamme des années 1990s avaient un combo bouton central shuttle rotatif et pourtour jog à ressort. Peut-être fut-il utile pour monter les Sept Premiers Bitomans.

Depuis, la génération Betacam est passée.
Au prix de la bande, les BetaSP sont devenus des pièces de musée, et on monte au clavier et au trackpad. Mais le jog shuttle est resté dans cette micro-culture industrielle pour ceux qui ont connu avant l'informatisation totale du banc de montage. Pas mal de monteurs vidéos, qui ont un jog shuttle wheel sur leur poste de montage. Les control knob prévus pour Windows 10 tels le Surface Dial s'en approchent mais n'ont pas le retour haptique avec ressort, si intuitif.

Et dans les logiciels ?
Il me semble qu'une version (bêta ?) de QuickTime Pro avait tenté à la fin des années 1990s d'ajouter dans un panneau de son interface une molette de défilement… qui ressemblait trop furieusement au jog-dial, une molette crantée cliquable que Sony incrustait absolument partout. Et quand je dis partout, ce jog-dial a été la signature des produits Sony de la fin des années 1990s : sur les baladeurs Mini-Discs (utile pour titrer un MD, mais dont l'usage bourrait de saletés l'intérieur de mon MZ-R35), le téléphone Z5 (celui de l'An 2000) ou encore les PDA Clié. Il me semble que les designers de Sony se soient retenus pour les télés et playstations.
Apple a retiré l'interface avant un procès prévisible, ou peut-être en souvenir de l'échec de la molette de volume du Quicktime 4 ?

Mais je m'égare dans mes rushes.
Alors l'idée d'un jog shuttle dial est super, mais non-intuitive pour le visiteur lambda d'un site à qui il faudrait lui expliquer le manuel, or, rappelons la règle d'or du design réussi :

S'il faut expliquer le fonctionnement d'une interface grand public
⇒ c'est que ton design est loupé
⇒ F.B.I. Fausse Bonne Idée.

Accessoirement, elle est aussi un poil lourd à écrire from scratch. Pas infaisable, juste lourd. Et prendrait de la place sur l'écran.

Maintenant qu'on a fait ce petit tour de l'État de l'Art pour se mettre en appétit, passons à l'action !

Supprimer les bords ronds

Un truc totalement idiot où j'ai pêché par coquetterie : j'ai mis des bords ronds au début et à la fin de la time-line. En fait, cela rend moins facile de viser le début d'un sonore (oui, les recherches avancées ont prouvé que statistiquement, nous cherchons plus souvent à revenir au début qu'à aller dans les 5 dernières secondes d'une émission d'une heure). Donc tant pis pour les bords ronds, on revient au bon vieux rectangle.

Je vais prendre exemple sur mon propre blog, avec une de mes émissions actuelles qui ne dure qu'une heure : Sur 320 pixels de large, le web component fait 291 pixels de large à cause de la mise en page.

La time-line fait 195 pixels de large, les bords ronds en bouffent 2×4 pixels.

Je me suis appliqué la Règle des Cinq Pourquois pour chercher la vraie raison de ma décision graphique. Alors, euuuuuh… les bords ronds sont moins agressifs, parce qu'il y a trop de rectangles, Steve Jobs a inventé les rectangles arrondis… Au final, j'avais mis ces bords ronds sans aucune raison valable.

Bon ben, on vire !

À 18 secondes par pixels pour un sonore d'une heure, cela faisait 2'27" rabotées par pure coquetterie, et non pas par design.

Parce que, oui, il faut se rappeler que le design n'est pas qu'une question de couleurs et de formes mais surtout de praticité pour tous. Faire du décor ne suffit pas et n'est pas du design.

Agrandir la time-line

Passer de la souris à la précision d'un pixel sur un écran de 52 cm de large (1920 px soit 96 dpi) à un écran tactile de 8 cm de large (1080 px soit 400 dpi, plus qu'un album de bd !) avec la précision d'un gros pouce… inutile de dire que sur smartphones, une telle précision peut entrainer autant de dégâts collatéraux qu'une guerre chirurgicale. Et cette imprécision devient de plus en plus problématique quand on a mis en ligne un podcast qui dure une heure (voire 5h30), rendant encore plus problématique un bête besoin comme celui de revenir d'une minute en arrière dans une interview.

Il était évident que garder la time-line contrainte entre les deux boutons ▸︎play/⏸︎pause et action n'était pas une super idée graphique : Je perdais environ 2×48 px en largeur disponible, ce qui n'est pas négligeable quand on a moins de 320 px de large.

Pour reprendre l'exemple de mon blog, la time-line fait 195 pixels de large soit 18 secondes par pixel pour un sonore d'une heure

Il m'a fallu jouer une fugue en CSS mineure pour que cette barre bascule en-dessous de ces boutons pour gagner en largeur. Comme je voulais aussi garder l'indication des longueurs de chapitres (les lignes noires discontinues), je considère qu'elles deviennent transparentes aux actions pointeurs en dessous d'une certaine largeur d'écran, pour éviter un appui malheureux dessus.
Oui, si c'est conditionné avec un breakpoint, c'est que j'ai utilisé une propriété CSS qui influe les interactions du curseur avec des éléments. Cette propriété qui tient de la magie vaudou mérite votre attention : pointer-events : none;

Retravaillée la time-line fait toute la largeur du web component, 291 pixels de large soit 12,4 secondes par pixel pour un sonore d'une heure.
Vous noterez aussi que les deux boutons ont perdu un poil de hauteur et que la place laissée au timecode dans la liste des chapitres est devenue élastique ce qui permet de gagner des lignes dès la première entrée.

Comme l'utilité d'une telle finesse est moins pressante sur de plus grandes largeurs, qui correspondent en général à des ordinateurs avec des dispositifs de pointages plus précis (le doigt occupant une fraction moins importante de l'écran, ou ayant un stylet voire la souris), la disposition entre les deux boutons revient au-delà d'une certaine largeur.

Deviner où l'on vise d'un coup d'œil

On le voit sur la capture au-dessus, j'ai fait apparaitre sous la time-line une indication pointilliste des chapitres. Elle existait depuis un an, mais uniquement dans les grandes largeurs. Celle-ci est désormais aussi visible sur les petites largeurs, mais il n'est pas dit que tous les utilisateurs de mon script vont penser à renseigner un manifeste de chapitrage au format WebVTT. On en reparlera dans un chapitre à part, j'ai beaucoup à dire sur le sujet ; si cela vous intéresse, vous pouvez déjà vous amuser avec mon éditeur en ligne.

Pour aider visuellement à sa navigation, j'ai ajouté une fonctionnalité qui permet d'afficher l'enveloppe du son. Il s'agit d'une option, disponible via l'attribut waveform="".

Pour des raisons évidentes de performances, l'image de l'enveloppe en question est pré-générée au moment de la compression du sonore en PÀD (prêt à diffuser). Afin de tester la fonction et de donner un exemple fonctionnel dans ma doc, j'ai profité d'une fonction méconnue de l'utilitaire en ligne de commande sox, véritable couteau suisse pour travailler du son avec le minimum de dépendances. Un script qu'on trouve souvent dans des chaines de publication audio industrialisées sur des serveurs de rendus.
Anecdote : j'ai utilisé cet outil en 2004 pour faire des messages de répondeurs personnalisé par prénoms et pour biper des ringback tones. Un script de 20 lignes permettait à des ingés son de gagner des journées de travail en supprimant des silences superflus, concaténant des sons et normalisant le rendu.
L'option pour générer ce graphique est spectrogram. Par rapport à la traditionnelle vue de la courbe, elle permet de mieux distinguer les voix et les musiques sur une très petite hauteur, ici 8 pixels de haut. C'est pas toujours vrai et c'est surtout un choix personnel, il est susceptible d'évoluer plus tard.

Comparaison entre une vue d'une forme d'onde (en haut, niveau sonore en ordonnée) et un spectrogramme (en bas, fréquence en ordonnée) de l'émission 🍺 Bière

Naviguer plus finement

Reprenons les problématiques de la navigation sur smartphone : L'écran est tout petit, et notre doigt est démesurément gros pour essayer de se placer précisément. Et donc nous avons toujours le problème de la navigation fine, quand on veut revenir de quelques secondes en arrière.

J'étais parti sur l'idée qu'un appui long sur ma time-line est une tentative pour se placer finement. Ben oui, ça m'arrivait plusieurs fois d'appuyer à un endroit du player, puis de bouger délicatement mon doigt en le faisant pivoter, tout en approchant de près mon smartphone et en tirant la langue afin de contrebalancer le manque de précision… ce qui me rendait totalement idiot dans le bus.

AHEM !
Une requête pour afficher la navigation alternative, nous disions.

L'idée étant évidemment de suivre l'analogie UX de la blague de l'interface : s'il faut l'expliquer à l'utilisateur, c'est que ton interface n'est pas bonne.

j'ai mis des boutons, juste pour voir si la requête en question marchait. Mais j'avais pas forcément idée de le garder. J'avais même réfléchi à zoomer la time-line avec des mouvements genre pinch-in/pinch-out (pincer/étendre), mais je me suis rendu compte que ce n'était ni intuitif, ni pratique, voire complètement frustrant sur iOS : le pinch-out à une certaine ampleur peut vous sortir du navigateur web pour aller vers un sélecteur d'applications (Un parti-pris d'Apple très con et totalement frustrant quand votre appli utilise le pinch, justement).
Et comme mon web component a aussi pour objectif d'être repris, hors de question de risquer une contradiction parce que le site hôte a déjà son usage du pinch-in/pinch-out.

Donc finalement, supposer qu'un appui long sur la time-line est une demande explicite de l'utilisateur vers plus de précision, me semble pas trop erroné.

Mettre des boutons ⏮ ◂◂◂ ◂◂ ▸︎▸︎ ▸︎▸︎▸︎ semblait pas trop pourri.

J'ai dit semblait, une fois de plus, je dis pas avoir raison.

La mauvaise surprise du temps

J'ai tenté de mettre une entrée de temps, utilisant un champ <input type="time">, yep, icelui : . Après tout, les smartphones ont en général un excellent sélecteur de date et d'heure.

Le sélecteur d'heure d'Android, extrait de l'excellent article sur <input type="time"> de Mozilla Developer Network.
Une chouette analogie aux vieilles horloges à aiguilles, compréhensible parce que des équipes de Google (comme Microsoft, Apple et Mozilla) ont investi des milliers d'heures sur ce problème à votre place.

Sauf qu'il y avait un os ! J'ai pris un sélecteur d'heure, faute d'avoir un sélecteur en HTML5 pour exprimer une durée. Ce qui veut dire que… l'heure peut afficher au format 12 heures avec une locale américaine ! Et impossible de le localiser de force avec un attribut comme lang="fr".

Tiens, si je règle un champ time à 0h1mn23s, dans Firefox avec l'interface paramétrée en Français, vous aurez :

bon là, vous m'comprenez si vous me lisez en Français

Et avec l'interface paramétrée en Anglais Américain (en-US), qui est l'interface par défaut pour beaucoup de monde :

Tempora mori, tempora mundis recorda comme dirait le roi de Loth,
ça veut pas du tout dire la même chose, et surtout pas une durée

En fait, il n'y a pas de règle uniforme du comportement basculant entre les affichages en 12 h ou 24 h : certains navigateurs se basent sur la langue de leur interface, d'autres celles du système d'exploitation (heureusement, le DOM expose au javascript une représentation unique au format 24 heures, idem pour l'envoi d'un formulaire à un serveur, sinon je serais devenu fou).

J'avais le même souci dans mon éditeur de chapitrage puisqu'il utilisait le même type de champ. Pour le résoudre, il suffirait d'écrire un polyfill d'affichage agissant sur un champ <input type="time"> caché… ouaip, ça craint.
Ben j'ai écrit une mécanique différente.

En résumé, pour un champ natif de durée, il manque :

soit un type de champ <input> pour gérer la durée, une décision à prendre au niveau du W3C ;
soit le respect de la propriété lang="" dans les contrôles, ce qui peut être implémenté par les navigateurs mais peut poser des soucis d'UX ;
soit la possibilité de styliser un champ <input type="time"> dans sa présentation et son interface pour basculer entre les modes 12 et 24 heures, une décision qui peut être testée par les navigateurs par une propriété CSS préfixée expérimentale avant standardisation.

Néanmoins, je n'étais pas satisfait de cette navigation alternative.

L'enfer des petits détails

La barre de navigation alternative apparaît quand on clique plus de 400 ms : au-delà, Chrome sur Android et surtout l'affreux iOS considèrent que l'utilisateur veut une autre fonction, genre sélectionner du texte. Alors qu'on a déjà désactivé la sélection de texte. Le pire étant iOS qui va lancer un sélecteur d'application qui n'a rien à voir.
À noter que pour les ordinateurs de bureau, il est possible de l'afficher en faisant un clic droit à la souris sur la time-line (la fonction normale est disponible en combinaison avec ⇧Shift).

Voilà où en était mon brouillon, que j'ai finalement gardé. Ici en faisant abstraction du champ input type="time" pour ne pas plus vous distraire avec…

Pour être le plus standard possible, j'ai créé des boutons ◂◂ et ▸︎▸︎, calqués sur les appuis de touches ← et → tels qu'interprétés dans mon web component (faisant des sauts de 5 secondes, durée paramétrable) , ainsi que ⏮ sur la touche ↖. Puis j'ai ajouté ◂◂◂ et ▸︎▸︎▸︎, qui font comme ◂◂ et ▸︎▸︎, mais répétés 4 fois.

J'ai tenté ce sélecteur, mais design liquide oblige, j'étais obligé de cacher certains boutons qui me semblaient moins utiles, d'un usage moins fréquent. notamment ◂◂, un choix décidé grâce à une technique scientifique de pifométrie, ce qui une fois de plus, vaut ce qu'il vaut et que je n'ai pas forcément eu raison.

Dans la plus petite largeur recommandée (320 px de large, soit un iPhone 5 en portrait), on a l'essentiel utilisable

Mais ces boutons étaient câblés sur l'événement click (clic de souris). Vous cliquez, l'avance se fera. Une fois. Ça serait cool de rajouter la répétition, non ? Tant que vous ne relâchez pas, l'action continue au même rythme.

Donc au final, j'ai dû écrire un gestionnaire d'appui-long/répétition pour 4 boutons, avec un mode de fonctionnement proche d'un clavier de bureau : Une première attente (400 ms) avant de commencer à répéter, puis répéter l'action sur des intervalles nettement plus courts (100 ms). Des durées paramétrables par le site, car je déteste les constantes magiques au milieu du code, et pour qu'un webmaster qui n'aime pas les réglages puisse faire mumuse avec, comme ça, il se sentira plus fort.
Ouarf.

Peut-être pouvait-on faire une accélération de l'avancée en fonction du temps qu'on appuie sur le bouton, mais je ne suis pas sûr qu'un tel système à accélération progressive soit pratique.

Bref…

In fine, j'ai travaillé les fonctionnalités sur mon lecteur audio pour qu'il soit aussi pratique à utiliser sur un ordinateur de bureau que sur smartphone.

Je ne garantis rien. Maintenant reste le plus difficile : en faire autant sur la navigation fine pour l'accessibilité.

En plus de la navigation fine, il faudrait aussi parler du chapitrage audio, mais le sujet est très vaste, il interviendra après qu'on ait parlé de Web Share...

da scritch net works

Cinquantenaire

Bye bye, GPDis !

Radio FMR, mais elle dure depuis 40 ans

« FMR ? Ça existe encore ? »

Photos de Vendredi dernier

…sans Frank

cpu-audio.js enfin en 7.0

Adieu Xylpho

CD de nuits

Tech, bricolages et programmes nocturnes

Archivons

Le mouton tondu

La vie d'après

Ce printemps étrange

Battle of da Year 2K

Un flyer hors-normes

L'événement lui-même fut hors-norme

La gueule de bois

Deux couleurs bizarres en CSS

La Couleur tombée du DOM

transparent

currentColor

Alors quel est le problème ?

Essayez vous-même !

Où tu rêves d'une licorne rose invisible

Tentative 1 : CSS pure, rgba() et deux variables

Tentative 2 : Polyfill javascript pour déduire une couleur totalement opaque

Et là, tu peux plus voir cette exception en peinture

La couleur tombée du Ciel

5 ans après Supplément Week-End

Enregistrement en public de CPU le lundi 21 Octobre

La conférence de rentrée de CPU

Enregistrement en public de CPU le lundi 9 Septembre : conférence de rentrée 2019

We need Web Share

The switch

The wish

The witch

The twist

The tweet

So what ?

J'ai donné ma collection d'Animeland à la Cinémathèque

La fin de l'histoire de fin

Le blues du Web Share

The switch

The wish

The witch

The twist

The tweet

Ben alors, on fait rien ?

Retravailler un lecteur web audio dans les petites largeurs

Petits dans la poche, gros dans les contraintes

Et déjà un premier souci avec les CSS media queries breakpoints

breakpoint sur un élément, comme on peut, comme un porc

Le problème de la navigation fine sur une largeur fine

Quatre exemples de time-line en natif

Le jog shuttle du Beta SP

Supprimer les bords ronds

Agrandir la time-line

Deviner où l'on vise d'un coup d'œil

Naviguer plus finement

La mauvaise surprise du temps

L'enfer des petits détails

Bref…

Tentative 1 : CSS pure, `rgba()` et deux variables