lundi, 21 août 2017

IntersectionObserver arrive dans Firefox

Cet article est la traduction de Intersection Observer comes to Firefox, écrit par Dan Callahan et publié sur le blog Hacks. La version anglaise est disponible ici. Merci à Marie Destandau pour cette traduction !


Qu’ont en commun le défilement infini, le lazy loading (ou chargement à la demande) et la publicité en ligne ?

Ils ont tous besoin de connaître - et de réagir à - l’état de visibilité des éléments d’une page.

Malheureusement, savoir si un élément est visible a toujours été une chose compliquée sur le Web. La plupart des solutions écoutent les évènements scroll et resize (défilement et redimensionnement), puis utilisent des API du DOM telles que getBoundingClientRect() afin de calculer manuellement où les éléments se situent par rapport à la fenêtre visible. En général, cette méthode fonctionne mais elle n’est pas très efficace et ne prend pas en compte les autres facteurs qui peuvent modifier la visibilité, par exemple une image qui finit de se charger plus haut dans la page, décalant tout le reste vers le bas.

Les choses sont particulièrement compliquées avec la publicité, car il y a de l’argent en jeu. Comme l’explique Malte Ubl dans sa présentation à JSConf Iceland, les annonceurs ne veulent pas payer pour des publicités qui ne sont jamais vues. Pour s’assurer qu’elles soient vues, ils les recouvrent de dizaines d’animation Flash de 1 pixel, dont la visibilité peut être déduite à partir du framerate. Pour les systèmes qui ne disposent pas de Flash, comme les téléphones, des timers sont ajoutés pour forcer les navigateurs à recalculer la position de chaque publicité toutes les quelques millisecondes.

Ces techniques nuisent beaucoup à la performance, vident les batteries et seraient complètement inutiles si le navigateur pouvait simplement nous informer lorsque la visibilité d’un élément change.

C’est ce que fait l’API IntersectionObserver.

Et voici new IntersectionObserver()

Dans le cas le plus simple, utiliser l’API IntersectionObserver ressemble à :

let observer = new IntersectionObserver(handler);
observer.observe(target); // <— Elément à écouter

La démonstration ci-dessous illustre le fonctionnement un gestionnaire d’évènement simple. Un seul observateur peut surveiller de nombreux éléments simultanément ; il suffit de répéter la commande observer.observe() pour chaque cible.

See the Pen Voici IntersectionObserver by SphinxKnight (@SphinxKnight) on CodePen.

« Intersection » ? et la visibilité ?

Par défaut, un objet IntersectionObserver calcule dans quelle proportion une cible chevauche la portion visible de la page.

Illustration d'un élément cible avec une intersection partielle sur le viewport du navigateur

Mais un objet IntersectionObserver peut aussi surveiller dans quelle mesure une cible chevauche un élément parent défini de façon arbitraire, quelle que ce soit la réelle visibilité de cet élément. Ceci peut être utile pour des widgets qui chargent le contenu à la demande comme une liste défilant à l’infini à l’intérieur d’un <div> et qui pourrait utiliser un objet IntersectionObserver pour charger juste assez de contenu afin de remplir son conteneur.

Par souci de simplicité, la suite de cet article parlera de visibilité, mais gardez en tête qu’il ne s’agit pas forcément de visibilité au sens littéral du terme.

Gestionnaires simples

Les gestionnaires associés à un observateur sont des callbacks qui acceptent deux arguments :

  • Une liste d’objets IntersectionObserverEntry contenant chacun les métadonnées indiquant les changements de la zone de chevauchement d’une cible depuis le dernier appel du gestionnaire
  • Une référence à l’observateur.

Par défaut, les observateurs surveillent la fenêtre du navigateur. Cela signifie que la démo ci-dessus doit uniquement consulter la propriété isIntersecting pour déterminer si une partie d’une cible est visible.

Par défaut, les gestionnaires sont appelés uniquement lorsque les éléments cibles passent d’un état non visible à un état partiellement visible ou vice versa mais comment faire si l’on souhaite distinguer les éléments partiellement visibles des éléments visibles dans leur totalité ?

Les seuils sont là pour ça !

Travailler avec les seuils

En plus du callback, le constructeur d’un IntersectionObserver peut recevoir un objet avec différentes options de configuration. L’une de ces options est threshold, qui définit les valeurs limites pour l’invocation du gestionnaire.

let observer = new IntersectionObserver(handler, {
    threshold: 0 // <-- This is the default 
});

La valeur par défaut de threshold est 0; ce qui revient à invoquer le gestionnaire lorsqu’une cible devient partiellement visible ou complètement invisible. Régler cette valeur à 1 provoque le déclenchement du gestionnaire lorsque l’élément cible passe d’un état complètement visible à un état partiellement visible, tandis qu’une valeur de 0.5 déclenche le gestionnaire lorsque la cible passe le seuil de 50% de visibilité, dans l’une ou l’autre direction.

Il est possible de spécifier un tableau de seuils, comme on le voit avec le paramètre threshold: [0, 1] dans l’exemple ci-après :

See the Pen IntersectionObserver Thresholds by SphinxKnight (@SphinxKnight) on CodePen.

Faites défiler doucement la cible et observez son comportement.

Dans un premier temps la cible est entièrement visible —intersectionRatio vaut alors 1. La valeur change deux fois pendant qu’elle défile vers l’extérieur de l’écran : d’abord avec une valeur comme 0.87 puis pour avec une valeur égale à 0. Lorsque la cible revient dans la zone visible, intersectionRatio devient 0.05, puis 1. Les valeurs 0 et 1 sont plutôt simples à comprendre, mais d’où viennent les deux autres et qu’en est-il de toutes les valeurs comprises entre 0 et 1 ?

Les seuils sont définis en terme de transitions : le gestionnaire est appelé dès que le navigateur se rend compte que la valeur intersectionRatio d’une cible a passé le seuil. Définir les seuils à [0, 1] indique au navigateur « préviens-moi quand une cible passe les lignes d’invisibilité (0) et de visibilité complète (1) ». Cela définit donc trois états : complètement visible, partiellement visible et invisible.

La valeur qu’on observe pour intersectionRatio varie d’un test à l’autre car le navigateur doit attendre une période d’inactivité afin de vérifier et notifier les intersections. Ce type de calcul est traité en tâche de fond, avec une priorité inférieure au défilement et à l’interaction utilisateur.

Essayez d’éditer le codepen pour ajouter ou enlever les seuils et observez les changements dans la façon dont le gestionnaire est appelé.

Autres options

Le constructeur d’un IntersectionObserver accepte deux autres options :

  • root : la surface à observer (par défaut: la fenêtre du navigateur)
  • rootMargin : une chaîne de caractères qui indique quelle zone considérer en plus ou en moins par rapport à la taille logique de l’élément root lorsqu’on calcule les intersections (par défaut, c’est "0px 0px 0px 0px" qui sera utilisée).

Modifier root permet à un observateur de surveiller l’intersection avec un élément parent donné plutôt qu’avec la fenêtre du navigateur.

Utiliser la propriété rootMargin permet de détecter lorsqu’une cible s’approche de la zone surveillée. Par exemple, un observateur pourrait déclencher le chargement des images juste avant qu’elles ne deviennent visibles.

Prise en charge des navigateurs

L’API IntersectionObserver est disponible par défaut dans Edge 15, Chrome 51, et Firefox 55.

Un polyfill qui fonctionne avec tous les navigateurs est disponible, mais la performance obtenue est bien moins bonne qu’avec les implémentations natives.

Autres ressources

mercredi, 21 juin 2017

Bienvenue au MozFest de Londres

MozFest : photo de groupe

MozFest : photo de groupeLe MozFest, pour Mozilla Festival, tiendra sa 8ᵉ édition à Londres cet automne. Le mouvement du Web ouvert s’y retrouvera du vendredi 27 au dimanche 29 octobre. Des passionné·e·s des technologies, des éducateur·rice·s et des makers se réuniront pour explorer le futur du Web ouvert.

Le MozFest, c’est plus de 1 600 visiteur·se·s, des participant·e·s de plus de 50 pays et 325 ateliers et conférences.

Vous avez jusqu’au 1er août pour répondre à l’appel à propositions avec des activités interactives et inclusives.

Il s’agit d’une formidable opportunité. Et, pour vous en convaincre, qui de mieux placé que le directeur général de la Mozilla Foundation, Mark Surman ?

Lire la suite

mercredi, 8 mars 2017

Une introduction cartoonesque à WebAssembly

Courbe décrivant la progression des performances pour JavaScript

Cet article est le premier d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à Adam, dattaz, Jeremie et à goofy et Benjamin pour la relecture :)


Lire la suite

Un petit cours accéléré de compilation à la volée (JIT)

Communiquer avec un alien ?

Cet article est le deuxième d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à dattaz, Jeremie et à goofy et Benjamin pour la relecture :) Si vous n’avez pas lu les autres articles, nous vous conseillons de démarrer depuis le début.


Lire la suite

Un petit cours accéléré d'assembleur

Discuter avec un alien

Cet article est le troisième d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à Jeremie et à goofy et Benjamin pour la relecture :) Si vous n’avez pas lu les autres articles, nous vous conseillons de démarrer depuis le début.


Lire la suite

Créer et manipuler des modules WebAssembly

L'utilisation de la représentation intermédiaire avec les différents composants

Cet article est le quatrième d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à dattaz, Jeremie et à goofy et Benjamin pour la relecture :) Si vous n’avez pas lu les autres articles, nous vous conseillons de démarrer depuis le début.


Lire la suite

D'où vient la rapidité de WebAssembly ?

Les différentes tâches à réaliser pour lancer une application JavaScript

Cet article est le cinquième d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à goofy et Benjamin pour la relecture :) Si vous n’avez pas lu les autres articles, nous vous conseillons de démarrer depuis le début.


Lire la suite

WebAssembly aujourd'hui et demain

Les différents navigateurs sont d'accord pour WASM

Cet article est le sixième d’une série de traductions d’articles écrits par Lin Clark et publiés sur le blog Hacks. La version anglaise est disponible ici. Merci à dattaz et à goofy et Benjamin pour la relecture :) Si vous n’avez pas encore lu les autres articles, nous vous recommandons de commencer depuis le début.


Lire la suite

mardi, 31 janvier 2017

Les sections HTML, CSS et JavaScript de MDN sont disponibles en français

Logo de MDN

TL;DR : Les 1 749 pages de MDN pour les sections HTML/JS/CSS sont désormais disponibles, à jour, en français.

Lire la suite

samedi, 14 janvier 2017

Dans les entrailles de Git

L'arbre pour le commit a1

Le billet qui suit a d’abord été publié sur son blog par Nicolas Leuillet, à qui nous devons l’excellent Wallabag. Cette traduction collaborative à laquelle a participé le groupe Framalang nous a semblé intéressante pour notre blog « technique » et c’est l’occasion pour nous de lancer une invitation à tous ceux qui voudraient publier ici sur les technologies web. N’hésitez pas à nous contacter.

 

Lire la suite

samedi, 29 octobre 2016

Le projet Quantum de Mozilla, des ambitions et des précisions

Capture_du_2016-10-28_23-43-53.png

Après un premier billet qui traçait les grandes lignes du projet et sa philosophie (Un saut quantique pour le Web) nous disposons maintenant d’un peu plus de précisions techniques grâce à cet article de Bill Mc Closkey que nous vous traduisons ci-dessous : après avoir mentionné les quatre projets distincts mais associés sous la bannière de Quantum, Bill nous expose l’avancement du projet Quantum Code et invite déjà à contribuer. Bill travaille notamment sur les processus séparés chez Mozilla, il n’est donc guère surprenant de le retrouver ici impliqué sur le projet Quantum.

Traduction MozFr : Julien / Sphinx, Jérémie et Goofy

Lire la suite

jeudi, 27 octobre 2016

Un saut quantique pour le Web

davidBryant.jpeg

Cet article est la traduction du billet A Quantum Leap for the Web écrit par David Bryant. David est à la tête de l’équipe Platform Engineering de Mozilla et il annonce ici le lancement et le futur proche du projet Quantum, qui vise à renouveler entièrement plusieurs composants majeurs sur lesquels reposent les technologies web actuelles.

Traduction MozFr : Sphinx, TheGennok et Goofy.

Lire la suite

dimanche, 18 septembre 2016

Les onglets contextuels dans Firefox Nightly

icône menu hamburger

Attention : cette fonctionnalité est encore expérimentale et peut être amenée à évoluer :) Pourquoi faire ? « Mais dis-moi plutôt qui tu es ? », Rafiki, Le Roi Lion Lorsque nous naviguons sur le Web, nous utilisons différents sites pour différents besoins. Notre identité numérique se compose parfois  […]

Lire la suite

mercredi, 8 juin 2016

Aider les développeurs web à propos des erreurs JavaScript

Ce billet est une traduction de Helping web developers with JavaScript errors, écrit par Florian Scholz et Morgan Phillips.

Lire la suite

vendredi, 20 mai 2016

Techniques de développement CSS

La cascade CSS via l'inspecteur

Cet article est une traduction de CSS coding techniques écrit par Belén Albeza. Belén travaille au sein de l’équipe DevRel de Mozilla et explique ici sa méthode de travail pour le code CSS afin d’obtenir des feuilles de style claires et qui puissent être maintenues facilement. Comme les autres articles de ce blog, celui-ci est placé en licence CC-BY-SA.

Merci beaucoup à Marine, Ilphrin, Banban, Sandlayth, au traducteur anonyme ainsi qu’à goofy pour sa relecture utile :)


Lire la suite

dimanche, 17 avril 2016

Ma méthode de travail avec Git et GitHub

Schéma du workflow

Cet article est une traduction de Documenting my git/GitHub worklow écrit par Karl Dubost. Karl participe au projet WebCompat pour veiller à ce que les sites web fonctionnent de façon égale sur les différents navigateurs et ce billet est l’occasion de présenter la méthode de travail qu’il utilise avec Git et GitHub. Les méthodes vues ici pourront être utile pour contribuer à d’autres projets, n’hésitez pas à guetter les fichiers CONTRIBUTING.md des différents dépôts. ;)


Lire la suite

mardi, 29 mars 2016

Aide aux développeurs pour les changements à venir dans le développement de modules

Cet article est une traduction de la communauté Mozfr de Developer support for changes in add-on development. Comme vous en avez peut-être entendu parler, de nombreux changements surviennent dans le développement des modules complémentaires. Fin 2017, les WebExtensions seront utilisées par Firefox  […]

Lire la suite

samedi, 5 mars 2016

Proposition de spécification pour l'API WebVR 1.0

WebVR Showcase

Cet article est une traduction de Introducing the WebVR 1.0 API Proposal écrit par Casey Yee et publié sur Hacks.

Merci beaucoup à Ilphrin et Thegennok pour la traduction ! Merci goofy pour la relecture :)


Lire la suite

samedi, 27 février 2016

La propriété background-clip et ses cas d'utilisation

Le modèle de boites

Cet article est une traduction de The background-clip Property and its Use Cases, écrit par Ana Tudor et publié sur CSS Tricks. Ana Tudor réalise de nombreuses démos sur CSS sur CodePen et via Twitter et cet article est l’occasion d’en dire un peu plus sur la propriété background-clip. Merci beaucoup à marine, Banban, Thegennok et Ilphrin pour la traduction et à Théo et goofy pour la relecture.

Lire la suite

samedi, 23 janvier 2016

Firefox et l'API Web Speech

Page about:Webspeech dans la vie conjugale

Ce billet est une traduction de l’article de Chris David Mills : Firefox and the WebSpeech API. Bien que la reconnaissance vocale ne soit pas encore tout à fait opérationnelle dans Firefox, n’hésitez pas à décortiquer les démos ! Merci à goofy pour la relecture :)

Lire la suite

- page 1 de 4