Comme l’année dernière, la conférence dotCSS recevait quelques grands noms du monde des CSS. Des intégrateurs, développeurs, designers et autres passionnés du web se sont donc retrouvés au magnifique Théâtre des Variétés le 4 décembre 2015 pour profiter d’une conférence pleine d’enseignements.
Non, Sylvie Vartan et Isabelle Mergault n’étaient pas présentes.
Tim Carry a fait un beau retour sur la conférence en anglais ici.
Première session
Disposition moderne avec CSS
Rachel Andrew
Rachel Andrew nous présente les différentes façons de disposer des éléments via CSS, en insistant sur ses spécialités : Flexbox et Grid. Le tout accompagné d’exemples et d’explications sur les différentes propriétés.
Flexbox est actuellement plutôt bien supporté par les navigateurs (contrairement à grid !) et mérite de s’y pencher. Pour voyager dans le temps et découvrir les mises en pages qui seront disponibles dans un futur proche, les grids sont incontournables !
(Présentation et les exemples)
PostCSS
Andrey Sitnik
Andrey Sitnik, créateur de PostCSS, nous présente le pourquoi et le comment de son outil, utilisé partout. Si si, partout ! Avec 1 383 082 téléchargements le mois dernier, impossible de nier la popularité de sa création !
Plutôt que d’utiliser des préprocesseurs (tels que Less, Sass…), PostCSS construit un arbre syntaxique abstrait qui représente le fichier CSS, permettant à des greffons de modifier celui-ci à loisir.
Un greffon très utilisé est Autoprefixer qui complète le CSS en lui ajoutant des règles avec les préfixes (-moz, -ms, -webkit…) pour les fonctionnalités non terminées dans certaines versions, le tout en suivant les recommandations de Can I Use.
Après l’enchainement des greffons, le fichier CSS est reconstruit et est prêt à être utilisé. Andrey nous a présenté plusieurs greffons très utilisés ainsi qu’une approche des modules en CSS (pour tenter de répondre au fait qu’en CSS, tout est global).
CSS chez Dropbox
Daniel Eden
Daniel Eden, designer / développeur chez Dropbox, nous parle de l’enfer lorsqu’on a une grande quantité de fichiers CSS. En quelques mots : on ne s’en sort pas ! Tout est compliqué, de la gestion des fichiers aux interactions entre les développeurs, et surtout entre les services !
Il a utilisé ce GIF pour bien faire comprendre ce que l’on vit tous les jours :
Et il nous a partagé quelques outils qu’il utilise :
- cloc pour avoir des statistiques sur les fichiers.
- parker pour plus de détails sur les fichiers CSS.
Anecdote amusante quand on connait les problématiques du secteur : il a lui aussi déjà envoyé une modification “mineure” sur une page en production, qui a finalement eu un impact sur une autre page, qu’il ne fallait surtout pas modifier ! Moralité : il est toujours difficile de tout tester et de s’assurer d’aucune régression.
Daniel et les équipes Dropbox ont réussi à relever un incroyable défi : drastiquement réduire le nombre de lignes de codes, rendant ainsi la gestion plus simple et la maintenance plus facile. L’utilisation de PostCSS les a sauvés !
Deuxième session
Optimisation
Ben Briggs
Les conférences dot permettent de soumettre des présentations éclairs. Cette année, seul Ben Briggs a répondu à l’appel pour nous présenter cssnano, un outil pour minifier les fichiers CSS.
À votre avis, sur quoi est basé cssnano ?
- A : W3C
- B : PostCSS
- C : je klaxonne
- D : la réponse D
(Réponse en bas de page !)
Filtres et blend modes
Una Kravets
Una Kravets, développeuse front chez IBM et créatrice de CSSGram nous à parlé des filtres et des blend modes.
Sans se contenter de refaire des filtres “à la instagram”, elle nous a présenté tout le panel offert par ces propriétés CSS avec quelques rapides explications sur ce qu’il y a en arrière plan (si si, quelques rapides formules mathématiques). Le tout accompagné d’exemples rendant la présentation très vivante.
Devenir responsable de CSS
Alan Stearns
Alan Stearns nous a expliqué sa position récente de “cochairman” du groupe de travail sur le CSS au W3C, ainsi que des différentes façons d’avoir un poids dans le monde des CSS.
Sa présentation se résume en quelques termes :
- Écrire : il faut écrire pour évangéliser sur les technologies de CSS, en débattre et les remettre en questions.
- Parler : les conférences, les meetups… sont de très bons moyens de communication pour transmettre les informations. Il regrette n’avoir vu qu’une seule présentation éclair…
- Partager
- Déclarer des bogues : il faut inciter les éditeurs de navigateurs à implémenter les spécifications, et ceci commence en général par un ticket !
Troisième session
Animations et transformation
Tom Giannattasio
Tom Giannattasio, qui est passé partout (Apple, Oracle, MIT, Twitter, nclud), et qui est maintenant aux commandes de macaw, nous montre comment faire de la 3D en CSS.
Évidemment, la 3D en CSS a des limites (l’élément de base est le div et est donc un rectangle !) et il faut passer à autre chose comme WebGL pour être vraiment performant.
Il nous présente des slides impressionnantes graphiquement et de beaux exemples utilisant les animations, les transformations, avec un peu de parallaxes. Super !
Repousser les limites de CSS
Chris Eppstein
Chris Eppstein, cocréateur de Sass, nous a fait une présentation passionnante sur l’historique de CSS, sur le fait que ce soit (ou non) de la programmation, ce qui change et ce qui sera possible à l’avenir.
CSS est de base fait pour être “simple” (suivant les versions, nous passons d’une 50aine de propriétés à plus de 300 !) et donc adapté pour des non-développeurs (DSSSL, par exemple, est inspiré de LISP et est trop difficile à prendre en main). Pour Chris, le but de la programmation est de transformer de la donnée. CSS permet de transformer des données HTML pour en faire un rendu. Doit-on le ranger dans la case programmation ?
Sass a permis de garder CSS simple, en ajoutant (au besoin) des outils qu’on retrouve dans les langages de programmation pour en faire quelque chose de puissant.
Il nous parle ensuite de Houdini dont le but est d’accéder à la magie que fait CSS.
Houdini va débloquer CSS et le rendre extensible pour les développeurs web.
Houdini est un outil en JavaScript (donc pour les développeurs) et Chris insiste sur le fait que Sass est plus accessible et qu’on a encore besoin de ce type d’outil, même si les limites bougent et que le futur de CSS et de ce qui l’entoure va changer.
Repousser les frontières de CSS
Daniel Glazman
Daniel Glazman, déjà présent l’année dernière, reviendra sur des points qu’il pense problématiques en CSS :
- la vélocité pour sortir les specs (18 ans et on commence à pouvoir centrer verticalement… No comment.)
- le fait que CSS n’est pas extensible, alors que toutes les autres facettes de la plateforme web (les API) le sont.
- le fait que CSS soit limité au style (par exemple, CSS peut être une alternative à XPath)
Il aborda aussi Houdini et précisa qu’il n’est plus à la tête du groupe de travail sur le CSS au W3C.
C’est fini !
Pour la deuxième fois, l’équipe de dotCSS a invité des personnes influentes dans le monde du CSS et nous fait vivre une journée riche en informations. Nous pourrons discuter de la nature d’un développeur “front” une autre fois, mais le CSS doit faire partie de ses connaissances et il fait bon avoir ce type d’évènement pour en parler.
Vivement l’année prochaine !
La team dotCSS 2016 au complet
(Note : les images proviennent principalement du compte flickr de dotCSS.)
(La réponse à la question sur cssnano est bien entendu la B : PostCSS.)
The post dotCSS 2015, le débrief appeared first on SFEIR Mag.