Talks

01

La compression Web : comment (re)prendre le contrôle ?

avec Antoine Caron

Toute la journée, les serveurs compressent et les navigateurs décompressent, et presque personne ne va voir ce qui se passe sous le capot. Avec un plateau de Scrabble comme fil rouge, ce talk démonte les deux algorithmes sous gzip et brotli : le code de Huffman et LZ77. Il montre comment serveurs et navigateurs se mettent d’accord via HTTP, remet les ordres de grandeur à leur place, et finit sur des conseils de réglages à appliquer sur ton propre site.

Donné 7 fois entre 2023 et 2024

02

#RetourAuxSources : Le cache HTTP

Toute la journée, quelque chose entre un onglet et un serveur garde une copie de tes réponses, et la plupart d’entre nous ne le découvre qu’au moment de s’entendre dire à quelqu’un d’essayer en vidant son cache. Ce talk lit les règles du cache HTTP à voix haute : ce que chaque directive raconte vraiment, comment un cache décide si la copie qu’il détient est encore fraîche, et ce qui change dès que cette copie est posée sur un CDN plutôt que dans un navigateur. Il parcourt toute la ligne de caches entre l’onglet et le serveur d’origine, privés et partagés, vivants et morts, et se termine sur la poignée de recettes que tu peux coller dans tes propres réponses. La ligne est dessinée comme un plan de métro, et rien dessus n’est raconté sans être lancé en direct, dans trois navigateurs et quatre proxys-cache.

Donné 5 fois entre 2022 et 2023

03

Dans cette jungle de l’outillage JavaScript, un retour à la simplicité est-il encore possible ?

Ajouter une dépendance à une page Web réclame aujourd’hui Node.js, npm et un bundler. Ce talk repasse sur les concepts que ces outils ont amenés avec eux, de la minification au code splitting, et demande à chacun s’il sert la personne qui charge la page ou celle qui l’écrit. Puis il raconte le smart CDN qu’on a monté chez Clever Cloud pour ramener nos Web Components à une seule balise script, remonté optimisation après optimisation jusqu’à rattraper un build bundlé. Quatre panneaux du code de la route dessinés à la main rangent les techniques, et chaque gain est une pellicule plutôt qu’un avis.

Donné 4 fois en 2021

04

Le Web, ses frameworks et ses standards : déconstruire pour mieux (re?)construire

Les outils du frontend vont et viennent, et ce qu’on jette avec eux, c’est le code écrit autour. Ce talk démonte un framework Web moderne étagère par étagère, système de composants, templating, CSS, DOM, rendu serveur, routeur, état, et demande à chacune quel problème elle résout et ce que ça coûte d’arrêter de s’en servir. Il pose les standards des Web Components à côté de ces étagères, avec leurs manques, et arrive à une meilleure question que celle du framework qui a gagné : combien ça coûte de changer d’avis ? Le tout mis en scène comme une séance de thérapie de groupe, parce qu’au départ, c’était un coup de gueule.

Donné 7 fois en 2019

05

#RetourAuxSources : Les cookies HTTP

Tous les sites du Web te demandent de les accepter et presque personne ne sait dire ce que c’est. Ce talk remonte en 1994 et démonte le cookie HTTP : d’où il sort, ce qu’un navigateur vérifie vraiment avant d’en envoyer un, et ce que Secure, HttpOnly, SameSite et les préfixes de cookies viennent chacun clôturer. Il finit de l’autre côté du même mécanisme, le traçage et la vie privée, jusqu’à l’identifiant qu’un serveur arrive à te coller sans cookie et sans une ligne de JavaScript. C’est raconté comme une enquête, et rien n’y est décrit sans être lancé en direct, sur quatre hôtes montés pour l’occasion.

Donné 11 fois en 2018

06

Une aventure ultrasonique !

Est-ce que deux pages Web, sur deux ordinateurs différents, peuvent se parler sans le moindre serveur entre elles ? Ce talk répond à la question avec du son. Il démonte WebRTC jusqu’à la seule chose que sa spécification refuse délibérément de normaliser, pose WebAudio de chaque côté de ce trou pour émettre des tonalités et relire un spectre, et réécrit une offre de connexion dans la base d’un alphabet de 24 tonalités pour qu’elle tienne dans un canal fait d’air. Le tout raconté comme l’histoire d’un projet perso, avec slides d’avertissement, manette de Super NES et ultrasons en direct.

Donné 5 fois en 2017

07

Documentation as Code (expliqué à mon père)

avec Ludovic Fernandez

En tant que codeurs, on profite tous les jours de nos IDE, de notre versionnement, de nos builds et de nos déploiements, et quand il s’agit de la documentation, on ressort le traitement de texte et le client email. Ce talk démonte tout ça en trois actes, écriture, collaboration et publication, avec AsciiDoc pour la source et Asciidoctor pour tout ce qui vient derrière : ce qu’un langage de balisage léger fait gagner face à HTML, DocBook et LaTeX, ce que git change à un texte qu’on suivrait sinon à la main, et comment un seul fichier devient du HTML, du PDF, de l’EPUB ou des slides. Le tout raconté à travers le seul auteur que je pouvais interviewer aussi longtemps que je voulais, mon père, qui a publié six livres de vulgarisation et fait chaque aller-retour avec sa directrice éditoriale dans Word, par email.

Donné 8 fois entre 2016 et 2018

08

Flexbox, et le CSS redevient fun !

Centrer un bloc verticalement ne devrait pas être un exploit. Ce talk repasse par tout ce que CSS donnait pour poser des boîtes avant flexbox, vertical-align, les float et les librairies bâties dessus, puis démonte le conteneur flex propriété par propriété : ce que flex: 1 règle vraiment, comment l’axe bascule, où part l’espace qui reste. Il finit sur la mise en page qui emportait la décision en 2016, une application de gestion qui remplit la fenêtre. Une demi-heure, pas une seule slide, chaque déclaration tapée en direct dans un éditeur.

Donné 5 fois entre 2016 et 2017

09

100% Stateless avec JWT

Un identifiant de session est un token que quelqu’un d’autre doit aller regarder pour toi. Un JSON Web Token porte ce qu’il affirme, plus une signature qui le prouve, et n’importe quel service qui a la clé tranche tout seul. Ce talk démonte le format claim par claim, met ce que le stateless fait gagner en face de ce qu’il coûte, du load balancing qui cesse d’être un problème au token que plus personne ne peut reprendre avant qu’il expire, et cherche où le ranger dans un navigateur sans le tendre au premier script injecté. Le tout raconté avec un code de niveau de Lemmings, noté sur un papier et retapé le lendemain matin.

Donné 7 fois en 2016

10

Progressive Web Apps : le futur du Web arrive

Une Progressive Web App commence sa vie dans un onglet, derrière une simple URL, et finit sur l’écran d’accueil comme une vraie appli. Ce talk démonte le terme : les dix attributs qu’on lui a donnés en le forgeant, le Service Worker qui est dessous, un proxy programmable dans le navigateur avec son cache à lui, et le manifest et la bannière d’installation qui posent une icône sur un téléphone. Il pèse le natif face au Web sur les critères qui font vraiment pencher les gens, et finit sur ce qu’une poignée de développeurs avaient déjà tiré d’un proxy que personne n’avait demandé. Le tout raconté à travers une semaine de vacances au ski, service par service.

Donné 12 fois entre 2016 et 2017

11

The Star Wars Machete Order

Il y a un bon ordre pour regarder Star Wars, et ce n’est pas celui qui est imprimé sur les boîtiers. Ce talk démonte les deux réponses évidentes, le release order et l’episode order, montre le seul plan qui casse la première et les deux révélations que la seconde vend d’avance, et défend à la place le machete order de Rod Hilton : IV, V, II, III, VI, avec l’épisode I retiré plutôt que déplacé. Le tout en ignite, vingt slides à quinze secondes, ce qui ne laisse pas la place de nuancer.

Donné 2 fois en 2015

12

La révolution hors-ligne du Web arrive avec les Service Workers

Une application Web qui ne marche que tant que le réseau marche, c’est une application qui tombe en panne plusieurs fois par jour. Ce talk démonte ce que le navigateur proposait à la place : l’AppCache, et pourquoi il était irréparable ; le Service Worker qui prend sa suite, un proxy programmable dans le navigateur, entre tes pages et ton serveur, et qui a son propre cache ; puis l’API Cache, fetch et le cycle de vie install et activate avec lesquels tu le pilotes. Il pèse ce que ça referme entre les applications natives et le Web, trois mois après l’arrivée de l’API dans un navigateur stable. Raconté depuis un aller-retour chez le marchand de journaux en 1993, parce que l’aller-retour qu’on n’a pas besoin de faire, c’est toute l’idée.

Donné 9 fois en 2015

13

CSS pour les nuls

Si tu essaies toutes les valeurs qu’une propriété CSS accepte et que tu livres dès que la page a l’air correcte, celui-là est pour toi. CSS n’est pas un langage de designer, c’est un moteur de règles, et quatre choses décident de l’endroit où une boîte atterrit : display et le flux normal, le box model et ce qui fixe vraiment la taille d’une boîte, position et le prix à payer quand on sort du flux, float et clear et le conteneur qui perd sa hauteur. Vingt minutes, pas de slides, chaque déclaration tapée en direct dans un navigateur.

Donné 3 fois en 2015

14

Les recettes du Web multi-écrans

Un deuxième écran a cessé d’être un privilège de graphiste il y a longtemps, et nos applications Web se comportent toujours comme s’il n’existait qu’une fenêtre au monde. Ce talk part de ce que les études d’ergonomie ont vraiment mesuré et de ce que coûte l’attention, passe en revue les usages qu’un deuxième écran a déjà, puis démonte les cinq techniques du navigateur qui laissent deux fenêtres d’une même application se parler sans serveur entre elles, et ce que chacune demande en échange. Les deux dernières éditions étaient presque entièrement tapées en direct.

Donné 5 fois entre 2014 et 2017

15

Git++ : Passez au niveau supérieur de la gestion de version

avec Cyril Lakech

Tout le monde utilise git, et beaucoup trop d’entre nous s’en servent comme d’un SVN. Une conviction, une méthode, des outils : ce talk défend l’idée qu’un historique de commits est un document qu’on écrit pour les autres, démonte champ par champ la convention de message empruntée aux projets AngularJS, met merge et rebase sur la balance sans faire semblant que le débat est tranché, et montre les six choses que git rebase -i permet de faire à des commits déjà écrits. Il finit sur l’outil qui transforme ces messages en changelog, et il finissait sur scène par une vraie réécriture d’historique, à deux, en direct.

Donné 9 fois entre 2014 et 2015

16

HTML5 : Les cookies ne sont plus seuls au monde

Tant que le navigateur n’a pas eu de mémoire digne de ce nom, tout ce qu’on voulait lui faire retenir partait dans un cookie. Ce talk ouvre plutôt toute l’étagère de 2013, une case après l’autre : le cookie, le hash d’une URL, le hack window.name, le Web Storage, IndexedDB et l’AppCache, ce que chacun tient, ce qu’il coûte, et lesquels le serveur a le droit de lire. Il finit sur la seule chose qu’aucun des autres ne savait faire, marcher sans la moindre connexion. Raconté depuis la une d’un quotidien gratuit, parce que mon boss m’a fait mettre HTML5 dans le titre.

Donné une fois en 2013