Blogf

Ce blog est encore en construction

Notes de la conférence 10 fonctionnalités utiles du web que vous ne connaissez pas

Quelques mots sur la conférence et le talk

Le DevFest Strasbourg se décrit comme “La plus grande conférence technique du Grand Est destinée aux développeurs”.

Olivier Leplus a commencé le web avant que JQuery n’existe, et heureusement ça a un peu évolué dans le bon sens depuis. Actuellement il est Developer Advocate chez AWS.

La plateforme web évolue de manière un peu désordonnée mais elle évolue beaucoup. Ce talk rappelle le fonctionnement de la standardisation des standards du web, et présente quelques fonctionnalités, récentes ou pas, que l’on aurait pu louper.

TC39

Petit rappel sur les Technical Committees, des comité constitués de gens travaillant (pour beaucoup d’entre eux) dans des grands groupes du web (Google, Apple, Paypal…) et se rassemblant pour travailler à faire evoluer les standards du web. Tout ce beau monde est chapeauté par ECMA, une association (européenne) chargée de la standardisation de plusieurs domaines informatiques dont les langages de script et programmation. Le process consiste à valider des spécifications, chacune provenant d’un standard et disposant d’un comité. Pour le Javascript il s’agit du standard ECMA 262, des spécifications ECMAscript et du comité TC39.

Le repo public sur lequel les spécifications sont proposées, discutées et validées est celui-ci, Ecma TC39 sur Github.

Chaque proposition passe par plusieurs stages:

Néanmoins ce n’est pas parce qu’une proposition est en stage 4 qu’elle est disponible. Les navigateurs n’implémentent pas tout au même rythme et dans le même ordre.

Des initiatives ont été menées, par exemple Baseline pour se mettre d’accord et unifier le calendrier d’implémentation des fonctionnalité. Une feature est considérée baseline quand elle est implémentée par tous les navigateurs.

NDLR: Rachel Andrews avait fait une conférences aux CSS Days 2022 sur l’initiative similaire Interop 2022, video sur youtube.

Quelques propositions et fonctionnalités intéressantes

Temporal API

Cette API est une proposition concernant la gestion des dates.

Elle permettra de manipuler des dates, d’ajouter des durées, gérer des heures. Elle permettra aussi de manipuler des timezones, de faire de la comparaison de dates… La fin des librairies spécialisées présentes dans tous les projets web ?

Lien de la spécification.

quelques méthodes sur les Arrays

La méthode fill (MDN) qui permet de remplir un tableau de valeurs entre 2 index.

La méthode flat (MDN) qui permet de réduire la profondeur de tableaux, comme en java.

La méthode fromAsync (MDN) qui renvoie un tableau contenant le résultat d’une itération sur des éléments async.

La méthode groupBy (MDN) qui permet de regrouper les éléments d’un tableau par un critère spécifique.

quelques méthodes sur les Promises

La méthode Promise.withResolvers (MDN) permet de récupérer la promesse avec deux méthodes pour resolve ou reject cette promesse.

let { promise, resolve, reject } = Promise.withResolvers();

La méthode Promise.AllSettled (MDN) permet, lorsque l’on a un tableau de promesses dont l’une d’elles peut échouer sans soucis, de ne pas bloquer le flux mais de les executer et de récupérer ensuite l’état de chacune des promesses.

Compression Stream API

Un sujet peu plus niche mais on peut désormais compresser (et décompresser) des streams dans le navigateur.

Blob.stream().pipeThrough(new CompressionStream("gzip"))

Lien sur le MDN, Compressions streams API

CSS @property

La règle @property (MDN) fonctionne sur le principe des customs properties et permet de rajouter une couche de sécurité sur leur utilisation. Cela revient à de la création de types.

@property --box-color {
    syntax: '<color>';
    inherit: false; // indique si un enfant peut redéfinir la valeur de son parent
    initial-value: lightblue;
}

.box {
    background-color: var(--box-color); // OK
}

.box-invalid {
    --box-color: 10px; // not OK
}

CSS relative-color

Cette méthode permet à partir d’une couleur de départ d’effectuer ensuite des opérations dessus. cf. MDN

Par exemple, avec la méthode rgb():

  --une-couleur: #556FFF;

  /* le code suivant va transposer la valeur #556FFF en rgb */
  /* puis y appliquer une transformation du type : */
  /* - la partie "r" prendra la valeur 200 */
  /* - les valeurs g et b seront conservées */
  background-color: rgb(from var(--une-couleur) 200 g b);

CSS vertical-align

Les centrages via bidouille comme ça c’est fini depuis longtemps

.v-center {
    position: absolute;
    top: 50%;
    transform: translateY(50%);
}

ça fait quelque temps qu’on peut le faire en grid ou en flex via un align-items: center;.

Désormais c’est possible depuis n’importe quelle div (bloc) via un align-content: center;

CSS columns

Les colonnes sont disponible depuis 2017, MDN. Elles permettent d’afficher sous forme de colonnes le contenu d’un texte. Si celui-ci prends 100% de son parent et que la propriété indique columns: 2, le contenu va être scindé en 2 colonnes de 50% de largeur.

.texte {
    columns: 3; /* 250px*/
    gap: 4px;
}

CSS attr()

Cet attribut MDN permet de prendre un attribut d’un élément pour l’utiliser en css.

NDLR: pour l’instant ça a l’air d’être surtout supporté pour les valeurs content des selecteurs :before & :after parce que le typage n’est pas au final (ça marche pour du texte principalement).

blockquote {
  margin: 1em 0;
}

blockquote::after {
  display: block;
  content: ' (source: ' attr(cite) ') ';
  color: hotpink;
}

JS private properties

L’utilisation de typescript est majoritaire désormais mais c’est intéressant de savoir qu’on peut avoir des propriétés privées dans les classes javascript en natif. MDN

class maClasse {
    #propriétéPrivée;
}

JS nullish coalescing assignment

La notion de nullish coalescing est rentrée dans nos habitudes mais pas forcément le fait de l’utiliser pour faire directement une affectation (assignment) depuis une condition de ce type. Sous la forme valeurPeutEtreNull ?= valeurParDefaut MDN

const maison = { nbPortes: 3; }

maison.nbPortes ??= 7; // 3
maison.nbFenetres ??= 7; // 7

// maison = { nbPortes: 3, nbFenetres: 7  }

JS Error.cause

Désormais on peut ajouter aux erreurs, en plus des messages, l’erreur parente dont elle provient quand on cascade des erreurs. MDN

try {
  connectToDatabase();
} catch (err) {
  throw new Error("Connecting to database failed.", { cause: err });
}

Push API

La Push API est désormais en baseline. Il s’agit d’une fonctionnalité destinée aux web workers pour envoyer des notifications depuis un serveur.

Node

On utilise souvent des librairies de test tierces (jest, mocha...) dans nos applications sans forcément savoir ce que proposent nos langages ou framework. Node comporte depuis 2022 un module de test avec un environnement intégré, node:test.