Dernière mise à jour le .

Les 30 Novembre et 1er Décembre, je me suis rendu, respectivement à la dotCSS et à la dotJS. Deux conférences sur la programmation web, respectivement, sur le CSS et sur le JS (obviously).

dotCSS & dotJS Paris 2017

Les 30 Novembre et 1er Décembre, je me suis rendu, respectivement à la dotCSS et à la dotJS. Deux conférences sur la programmation web, respectivement, sur le CSS et sur le JS (obviously).

Je vais faire ici un petit compte rendu de mes impressions sur chaque sessions.

Commençons chronologiquement par la DotCSS.

1ère session - Un petit Proof Of Concept de hacking du CSS

Le speaker nous présente un moteur de recherche exclusivement codé en CSS. Cela paraît impossible et pourtant, ça marche. Alors, quand on dit “ça marche”, c’est à prendre avec des pincettes, ce projet est un hack et n’est pas du tout réaliste en production ! Pour son exemple - qui cherche parmi 150 entrées, le fichier CSS pèse pas moins de 8Mo.

Mais c’est très intéressant de voir un outil faire quelque chose pour lequel il n’a pas du tout été pensé. Et ça illustre la puissance (et indirectement la complexité) du CSS.

2eme session - Présentation de Styletron

Styletron est un outil permettant de générer du CSS à partir d’un code mieux pensé pour gérer les différents états d’un élément. Bien entendu, son but n’est pas de prendre la place du CSS mais d’être compilé en CSS.

Cet outil m’a paru très prometteur étant donné toutes les complications qu’impose le CSS actuel. Styletron est toujours en travaux, mais c’est un outil à suivre de près.

3eme session - CSS Grid.

Un nouvel outil natif de CSS qui s’apparente aux flexbox mais encore plus puissant. Cette feature est encore peu supportée par les navigateurs, l’auteur du talk nous précise bien qu’ils l’ont utilisé dans sa boîte car leur audience est un public technique dont le navigateur est à jour. Néanmoins, cela semble bien être la prochaine étape après les flexbox.

4eme session - L'outil Portfolio d'Adobe

Portfolio est un outil qui permet de créer des sites statiques de présentation de contenu. Comme son nom l’indique, il est pensé pour la création de portfolio et son vrai intérêt vient de sa capacité à générer sa version responsive automatiquement. L’auteur ne s’occupe que de la version desktop et une série d’algorithmes se chargent de réduire les fonts, les margin, adapter le positionnement … un peu à la manière d’une librairie d’architecture grid (Bootstrap, Foundation …). Ce talk, bien qu’étant un peu promotionnel, était intéressant sur les problématiques de redimensionnement d’éléments pour le responsive.

5eme session - Utilisation du CSS en entreprise

Une étude assez généraliste de l’utilisation du CSS en entreprise.

On est, en général, tous d’accord que le CSS pose des problèmes de compréhension car il est très permissif et se retrouve vite complexe. Le fond du talk était que certes le CSS présente des problèmes qui mènent à ce genre de soucis (exemple : le fameux "!important"), mais que c’est aussi un problème de process et de communication au sein de l'entreprise, notamment entre les designers et les développeurs.

Pour palier à cela, sa solution est de la doc auto-générée (faite par les designers) d’éléments atomique tel que les fonts, les boutons, etc contenant également les variations d’états (:hover, :clicked, …).

Ce talk était très intéressant car il propose, pour corriger certains des plus gros problèmes du CSS, non pas une approche complexe d’abstraction (tel que vue dans la 2eme session avec styletron) mais une approche d’amélioration des process existant au sein des entreprises.

6eme session - Media queries niveau 4

Les media query sont aujourd’hui principalement utilisés pour générer des design responsives. Leur création a été pensée pour faire beaucoup plus de choses, mais l’anticipation des créateurs sur l'évolution des devices s'est avérée mauvaise, ce qui nous a amené aujourd’hui à un état où une très grande partie des media query est inutile voir inutilisable.

Les media query niveau 4 sont une spécification de nouvelles media query qui reviennent à des concepts beaucoup plus adaptés à l’état actuel du web et à son avenir.

Leur intérêt reste bien entendu de permettre de faire des interfaces adaptées à chaque type d’écran.

7eme session - Les font variables

Il s’agit d'une nouvelle spécification de font leur permettant de s’adapter toutes seules. C’est à dire que, pour une font donnée, au lieu d’avoir un fichier pour la font, un autre pour sa version italique, un autre pour sa version bold, un autre pour sa version bold/italique …, les fonts peuvent être appelées avec des paramètres permettant de gérer ça, et bien plus.

Ceci me semble être une avancée majeure. La gestion des différentes fonts est très fastidieuse et génère beaucoup de fichiers qui sont autant de ressources HTTP à charger pour une page web. Pouvoir n'avoir qu’un seul fichier donnant accès à l'ensemble des variations est un gros plus. De plus, ces fonts peuvent s’adapter à la volée en javascript !

Et si on applique ce concept sur des glyphes (picto svp générés en CSS, exemple font-awesome), on peut même créer des animations ressemblant à des gifs qui ne pèsent quasiment rien.

Les champs des possibilités offertes par cette innovation est carrément énorme !

Passons maintenant à la dotJS...

1er session - La suppression du callback hell

Une entrée en matière avec un sujet relativement classique: la suppression du "callback hell", dans un premier temps à travers l'utilisation des Promises, puis, dans un deuxième temps, avec les fonctions asynchrones. Et une dernière partie sur l’utilisation des Higher Order Functions pour gérer les erreurs dans les fonctions asynchrones.

Personnellement, utilisant déjà les fonctions asynchrones, seul la dernière partie m’a vraiment intéressé. En effet, les HOF sont une manière élégante de gérer les erreurs sans polluer le code.

2eme session - Quality Assurance

Un talk sur QA (Quality Assurance) pour présenter des outils récent allant de pair avec les dernières version de Chrome. Chrome a en effet beaucoup enrichi ses devtools avec des outils de monitoring. De plus, Chrome peut maintenant être lancé en mode “headless” c’est à dire sans interface graphique, ce qui permet de créer des tests fonctionnels sans passer par le WebDriver de Selenium ou par des bibliothèques telles que phantom.js.

3eme session - Accessiblité sur le web

Parlons d'un sujet souvent occulté dans le web : l’accessibilité.

L'accessibilité, c’est la capacité d’un site web à être utilisé par des personnes souffrants de handicaps plus ou moins importants tels que la vue ou l’impossibilité d’utiliser une souris.

Après nous avoir montré l’importance de l’accessibilité du web, la speakerin nous a présenté une solution pour utiliser le machine learning afin de créer un plugin de navigateur capable d’ajouter automatiquement les attributs “alt” sur tous les tags <img> d’une page web.

Le plugin scanne la page, relève toutes les images et utilise du machine learning pour savoir ce que présente l’image, et ainsi lui associer une propriété “alt” appropriée.

L’auteur travaille également sur un outil de génération de sous-titre en live.

L’accessibilité est un point souvent oublié lors du développement d’un site car c'est très chronophage et ça ne cible qu’une faible proportion des utilisateurs. Néanmoins, pour un web meilleur - de la même manière que l’ont dit “pour un monde meilleur”, l’accessibilité est un point fondamental qu'il ne faut pas négliger.

4eme session - Rendre un site pénible gràce à Javascript

Cette session était une présentation des possibilités offertes par javascript pour rendre un site “pénible”. Le talk a commencé par rappeler l’époque où Internet Explorer était le navigateur le plus utilisé et où il utilisait ActiveX. A cette époque, les possibilités de hacking étaient énormes.

Aujourd’hui, la sécurité des navigateurs a énormément augmenté mais il est toujours possible de faire des choses amusantes. Le speaker nous montre son projet où, suite à un simple clic dans une page web, la fenêtre se démultiplie et lance des vidéos dans tous les sens tout en bloquant les possibilités de l’utilisateur de fermer ces fenêtres.

Cette session était passionnante et impressionnante.

Avec un peu d’imagination, il est encore tout à fait possible aujourd’hui de faire des pages web empêchant un utilisateur d’utiliser son navigateur, un peu comme à l’époque de ActiveX.

Ce talk était plus une ouverture d’esprit sur le javascript qu’un cours mais la mise en scène du speaker l’a rendu un des plus intéressant de la journée.

Vous pouvez tester ce site, à vos risques et périls, à cette adresse : theannoyingsite.com/

5eme session - N'utilisez pas de framework !

Un créateur de framework nous a fait un talk sur les bonnes raisons de ne pas utiliser de framework. Ce talk assez particulier, et probablement un des plus passionnant de la journée (avec le précédent), nous a surtout rappelé qu’avant d’être des développeurs, nous sommes des humains et qu’il nous est impossible de suivre absolument tout ce qui se passe dans l’écosystème du javascript. Le Javascript est un des langages de programmation qui évolue le plus et le plus vite actuellement et, sans sous entendre qu’il faut arrêter toute veille scientifique, il était plutôt question de savoir juger par soi-même plutôt que de passer son temps à lire des reviews et des comparatifs de tel ou tel technologie.

6eme session - WebUSB

Un début de session très technique où l’auteur nous parle d’ondes radio, de techniques de communication entre les avions et les tours de contrôle, de Javascript et de voiture télécommandées.

Tout ça pour en venir à l’utilisation de WebUSB qui est un standard permettant à Javascript de communiquer avec des interfaces USB connecté à la machine. Et c’est par ce biais que le speaker nous a présenté une carte google, maps mise à jour en temps réel, des avions de ligne qui survolent Paris.

Tout cela sans hacker quoi que ce soit, ni les tours de contrôle ni les avions. Simplement avec une antenne radio et un peu de connaissances.

Cette session nous a présenté un exemple bien concret des possibilité offertes par WebUSB.

7eme session - Webpack, le futur incontournable

Ce talk a commencé par expliquer le fonctionnement de Webpack, un bundler de modules Javascript. Suite à ces explications, nous en sommes arrivés au vrai intérêt de la session : le futur de Webpack. Et là, ça devient très intéressant. Avec Webpack, il sera possible, grâce notamment à WebAssembly, d’intégrer dans un projet Javascript des snippet codés dans n’importe quel autre langage ainsi que des possibilités d’allègement du code (tree shaking) très puissantes. Il semble que Webpack soit voué à devenir incontournable pour tous projets Javascript.

8eme session - Accessibilité

Une autre session sur l’accessibilité. Cette fois-ci plus orientée "bonnes pratiques", simples, qui ne prennent que peu de temps à développer en comparaison avec le niveau d'amélioration de l’accessibilité des sites. Des choses tel que les aria label, les contrastes de couleurs ou l’attribut CSS outline qui sont simples et extrêmement importants pour une partie de la population trop souvent oubliée.

9eme session - Du bytecode JS avec Glimmer

Encore un nouveau framework JS. Et cette fois, quelque chose de vraiment nouveau. La précédente véritable innovation des framework JS était le virtualDOM, cette fois, avec Glimmer, pour accélérer toujours plus la vitesse de chargement des pages et de rechargement du HTML, on compile en bytecode ! Ce code qui en résulte est donc beaucoup plus rapide à s'exécuter et les gains de performance sont très prometteurs.

Projet encore jeune, mais très prometteur.

10eme session - La véritable histoire du Javascript

Dernière session, Brendan Eich en personne (le créateur de Javascript, il y a 22 ans) nous présente l'histoire de Javascript, les étapes clé de son évolution, son futur.

Il est difficile de résumer cette session mais retenons tout de même cette citation de Ian Hickson, rédacteur de la spec HTML5 : "Things that are impossible just take longer".