Mise à jour mensuelle du développement Web 5⁄2018 : performances du navigateur, itération zéro et authentification Web
Publié: 2022-03-10En tant que développeurs, nous parlons souvent de performances et demandons aux navigateurs de rendre les choses plus rapidement. Mais quand ils le font enfin, nous exigeons encore plus de performances.
Alex Russel de l'équipe Chrome a maintenant partagé quelques réflexions sur les développeurs qui abusent des performances des navigateurs et explique pourquoi les sites Web sont toujours lents même si les navigateurs se sont réinventés avec des moteurs de rendu incroyablement rapides. Ceci est conforme à un article d'Oliver Williams dans lequel il déclare que nous nous concentrons sur les mauvaises choses, et au lieu de fournir les solutions les plus rapides pour les machines et les navigateurs plus lents, nous servons des bundles encore plus gros avec des polyfills et du code transpilé pour chaque navigateur.
Il n'est certainement pas facile de sortir de ce schéma et de réduire au minimum la taille des bundles dans l'intérêt de l'utilisateur, mais nous avons les technologies pour y parvenir. Explorons donc des méthodes non traditionnelles et réfléchissons plus souvent à l'expérience utilisateur réelle - avant de définir un flux de travail de projet plutôt qu'après.
Liste de contrôle des performances frontales 2021
Pour vous aider à offrir des expériences rapides et fluides, Vitaly Friedman a résumé tout ce que vous devez savoir pour optimiser les performances de votre site dans une liste de contrôle pratique.
Aller à un article connexe ↬
Nouvelles
- Firefox 60 est sorti et apporte les modules ECMAScript, ainsi que l'API d'authentification Web.
- Chrome 66 est maintenant stable, introduisant quelques mises à jour importantes concernant l'audio. Après qu'un bogue causé par la nouvelle protection des utilisateurs contre la lecture automatique en arrière-plan a été révélé et a causé de graves problèmes avec les clients WebRTC, Chrome a annoncé qu'il annulerait le blocage automatique et le retarderait jusqu'à Chrome 70 (à l'automne), afin que les développeurs ont plus de temps pour adapter leur base de code.
- Avec Chrome 66 déjà sorti et la dernière version de Firefox à venir, deux grands navigateurs se méfient désormais de tous les certificats Symantec émis avant juin 2016 - et croyez-moi quand je dis qu'il y a beaucoup de sites qui n'ont toujours pas changé leurs certificats concernés et, par conséquent, seront hors de portée des utilisateurs maintenant (Chrome) ou très bientôt (Firefox).
- Github Pages offre désormais une prise en charge HTTPS pour les domaines personnalisés. Auparavant, HTTPS n'était disponible que pour les sous-domaines
*.github.io
ou via des fournisseurs tiers tels que Cloudflare. - Chrome 67 arrive bientôt et rendra obsolète certaines choses avant de supprimer entièrement la prise en charge deux versions plus tard, parmi lesquelles HTTP-Based Public Key Pinning (HPKP) et AppCache sur des contextes non sécurisés.
- La mise à jour d'avril de Windows 10 a apporté EdgeHTML 17 avec des onglets muets, des formulaires de remplissage automatique, un nouveau mode "impression de site Web" pour économiser des ressources, des Service Workers et des notifications push. Les polices variables, la capture d'écran dans RTC via l'API Media Capture, l'intégrité des sous-ressources (SRI) et la prise en charge de l'en-tête
Upgrade-Insecure-Requests
ont également été ajoutées. Un sacré pas en avant ! - npm version 6 est là avec quelques améliorations de sécurité importantes. À partir de maintenant, vous disposez non seulement d'une nouvelle commande
npm audit
pour auditer vos dépendances à la recherche de vulnérabilités, mais npm le fera automatiquement et en fera rapport lors de l'installation des dépendances. La nouvelle version est également livrée avecnpm ci
pour accélérer les tâches CI et quelques autres améliorations. - Le nœud 10 est sorti avec des générateurs et une prise en charge de la fonction asynchrone, une prise en charge complète de N-API et une prise en charge du protocole Inspector. Il deviendra la prochaine version de support à long terme en octobre.
- Sonarwhal, l'outil de bonnes pratiques de codage de Microsoft, est désormais disponible dans la première version stable.
Général
- Oliver Williams a écrit à quel point il est important de repenser la façon dont nous construisons des sites Web et de mettre en œuvre une "amélioration progressive" pour que le Web fonctionne bien pour tout le monde. Après tout, c'est nous qui aggravons l'expérience de nos utilisateurs en transpilant aveuglément tout notre code ECMAScript ou en servant des tonnes de polyfills JavaScript à ceux qui utilisent déjà des machines lentes et d'anciens logiciels.
- Ian Feather révèle qu'environ 1 % de toutes les demandes de JavaScript sur BuzzFeed expirent. Cela représente environ 13 millions de requêtes par mois. Un bon rappel de l'importance de fournir une solution de repli solide, une amélioration progressive et des solutions de contournement.
- La nouvelle directive GDPR (Règlement général sur la protection des données) arrive très bientôt, et bien que nos boîtes de réception regorgent de mises à jour de la politique de confidentialité, une chose qui n'est toujours pas claire est quels services peuvent déjà fournir ce que l'on appelle des DPA (Accords de traitement des données). Joschi Kuphal collecte les services qui proposent un DPA, afin que nous puissions facilement les rechercher et voir comment nous pouvons obtenir une copie afin de continuer à utiliser leurs services. Vous pouvez aider en contribuant à cette ressource via les demandes d'extraction.
- Jared M. Spool a résumé pourquoi les utilisateurs détestent parfois les choix de conception que nous faisons, mais pas les changements ou les refontes en général.
- Une grande nouvelle vient d'Adobe concernant son produit de prototypage Xd : à partir de maintenant, le logiciel sera gratuit pour tous ceux qui bénéficient du nouveau plan de démarrage. Les seules différences avec les plans payants sont le stockage limité, un seul prototype partagé (mais autant de prototypes non partagés que vous le souhaitez) et uniquement la bibliothèque Typekit gratuite. L'équipe Xd a également amélioré les intégrations Sketch et Photoshop, et vous pouvez désormais échanger des symboles, coller sur plusieurs plans de travail et protéger les spécifications de conception avec un mot de passe également.
- Mei Zhang nous enseigne de meilleurs principes de conception de produits avec une seule fiche produit.

- Ce mois-ci, un détournement de certaines parties du service DNS Route 53 d'Amazon a permis aux attaquants de contrôler et potentiellement d'intercepter le trafic des clients qui utilisent le service. Cela montre une fois de plus à quel point la partie vitale d'Internet, le DNS, est vulnérable.
- La dernière version de Firefox est livrée avec la prise en charge de l'API d'authentification Web - un grand pas vers l'élimination des mots de passe. L'API vous permet de vous connecter via une clé matérielle comme YubiKey si le navigateur et le service Web prennent tous deux en charge la nouvelle technologie. Notamment, la version bêta de Chrome 67 fournit également l'API. Leur équipe a rédigé un guide de mise en œuvre technique.
- À partir de Firefox 60, nous pourrons spécifier l'attribut de
same-site
pour les cookies. Cela permettra à une application Web d'informer le navigateur que les cookies ne doivent être envoyés que si la demande provient du site Web d'où provient le cookie. Lisez plus de détails dans le billet de blog d'annonce.
- La liste de contrôle GDPR est une autre ressource utile pour vérifier si un site Web est conforme à la prochaine directive européenne.
- Bloomberg a publié un article sur le pi-hole du projet open source de protection de la vie privée, pourquoi il existe et ce qu'il veut réaliser. J'utilise le logiciel quotidiennement pour éviter le suivi de tout mon réseau domestique et professionnel.

- Postgres 10 est déjà là depuis un certain temps, mais j'ai personnellement eu du mal à trouver de bonnes informations sur la façon d'utiliser toutes ces fonctionnalités étonnantes qu'il apporte. Gabriel Enslein partage désormais les mises à jour des performances de Postgres 10 dans un diaporama, expliquant comment utiliser la prise en charge JSON intégrée, le partitionnement natif pour les grands ensembles de données, la résilience de l'index de hachage, etc.
- Andrew Betts a découvert que de nombreux sites Web utilisent des en-têtes obsolètes. Il explique maintenant pourquoi nous devrions supprimer les anciens en-têtes et lesquels servir à la place.
- Marcy Sutton explique comment Wikipedia a construit sa nouvelle fonctionnalité de prévisualisation des liens de manière accessible afin que les utilisateurs puissent facilement utiliser le clavier ainsi qu'une souris pour déclencher la superposition. Vous pouvez également en savoir plus sur la façon dont cette fonctionnalité a été créée dans cet article du concepteur de Wikipédia Nirzar Pangarkar.
- Scott O'Hara explique les différences entre les mots-clés
hidden
etnone
dans ARIA et quand nous devons utiliser lesquels.

- Rarement évoqués depuis des années, les tableaux CSS sont encore utilisés sur la plupart des sites Web pour afficher (et c'est tout à fait la bonne façon de le faire) des données dans des tableaux. Mais comme ils ne sont pas réactifs par défaut, nous avons toujours eu du mal à les rendre réactifs et la plupart d'entre nous ont utilisé JavaScript pour les faire fonctionner sur les écrans mobiles. Lea Verou a maintenant trouvé deux nouvelles façons d'obtenir des tableaux réactifs en utilisant CSS : l'une consiste à utiliser
text-shadow
pour copier du texte sur d'autres lignes, l'autre utiliseelement()
pour copier l'intégralité<thead>
sur d'autres lignes - j'essaie toujours pour comprendre comment Léa a trouvé ces solutions, mais c'est incroyable ! - Rachel Andrew a écrit un article sur la création et la fourniture de feuilles de style d'impression en 2018 et sur la raison pour laquelle elles sont très importantes pour les utilisateurs, même s'ils ne possèdent plus d'imprimante.
- Osvaldas Valutis explique comment implémenter le modèle de navigation dit "Priority Plus" principalement avec CSS, du moins dans les navigateurs modernes. Si vous devez prendre en charge des navigateurs plus anciens, vous devrez étendre cette solution, mais c'est un bon début pour implémenter un tel modèle sans trop de JavaScript.
- Rachel Andrew partage ce qui se passe dans les spécifications CSS Grid Level 2 et Subgrid et explique ce que c'est, ce qu'il peut résoudre et comment l'utiliser une fois qu'il est disponible dans les navigateurs.
- Chris Ashton "a utilisé le Web pendant une journée avec JavaScript désactivé". Cet article souligne l'importance de réfléchir aux éventuelles défaillances JavaScript sur les sites Web et pourquoi il est important que vous fournissiez ou non des solutions de secours.
- Sam Thorogood explique comment nous pouvons créer un "undo & redo natif pour le Web", tel qu'utilisé dans de nombreux éditeurs de texte, jeux, logiciels de planification ou graphiques et d'autres occasions telles qu'une réorganisation par glisser-déposer. Et même si ce n'est pas facile à construire, l'article explique les concepts et les aspects techniques pour nous aider à comprendre ce sujet compliqué.
- Il existe une nouvelle façon d'implémenter des requêtes élément/conteneur dans votre application : eqio est une petite bibliothèque utilisant IntersectionObserver.
- Johannes Seitz partage ses réflexions sur la gestion de projet au démarrage des projets. Il appelle la méthode "Itération Zéro". Un concept intéressant pour mieux comprendre la portée et les risques d'un projet à un moment où vous n'avez pas encore assez d'expérience avec le projet lui-même mais avez besoin de construire une feuille de route pour démarrer les choses.
- Arestia Rosenberg explique pourquoi son conseil numéro un pour les indépendants est de "se pencher sur l'instant". Il s'agit de travailler quand vous le pouvez et d'utiliser votre chance pour faire autre chose quand vous ne sentez pas que vous pouvez travailler de manière productive. En fin de compte, le résumé se traduit par une vie heureuse et plus de productivité. Personnellement, j'étendrais cela à toutes les personnes qui peuvent le faire, mais, bien sûr, cela s'applique mieux aux indépendants.
- Sam Altman partage quelques conseils de productivité pratiques qui ne sont pas simplement une liste de «dix choses à faire», mais en fait des réflexions très utiles sur la façon de penser à être productif.
- Ethan Marcotte développe les problèmes éthiques avec Google Duplex qui est conçu pour imiter si bien la voix humaine que les gens ne remarquent pas s'il s'agit d'une machine ou d'un être humain. Bien que cela semble assez intéressant d'un point de vue technique, cela poussera beaucoup plus loin le débat sur les fausses nouvelles et entraînera plus de difficultés à faire la différence entre quelque chose qu'un humain a dit ou une machine imitée.
- Notre monde est en fait construit sur des promesses, et voici pourquoi il est si important de tenir ses promesses même si c'est parfois difficile.
- Je parie que la plupart d'entre vous n'ont pas encore entendu parler de Palantir. La société est financée par Peter Thiel et est une société d'exploration de données qui a l'intention de collecter autant de données que possible sur tout le monde dans le monde. Il est connu pour collaborer avec diverses autorités chargées de l'application de la loi et a même des liens avec les services militaires. Ce qu'ils font des données et quelles données ils ont de nous ne sont pas connus. Mon seul espoir en ce moment est que cette entreprise souffrira beaucoup de la directive RGPD de l'UE et que l'Union européenne essaiera d'arrêter leur collecte incontrôlée de données. Les pratiques de Facebook en matière de données ne sont rien comparées à Palantir, semble-t-il.
- Les chercheurs tirent la sonnette d'alarme après qu'une analyse a montré que l'achat d'un nouveau smartphone consomme autant d'énergie que l'utilisation d'un téléphone existant pendant une décennie entière. Je suppose que je ne remplacerai pas mon iPhone 7 de si tôt - c'est toujours un appareil absolument génial et juste assez pour ce que j'en fais.
- Anton Sten partage ses réflexions sur Vanity Metrics, un moyen courant de partager des chiffres et des statistiques hors contexte. Et depuis qu'il a réalisé leur pertinence, il pense différemment la plupart des données couramment lisibles telles que les investissements ou les données d'utilisation des services. Lire un nombre sans avoir de contexte pour le comparer n'a aucune importance. Nous devrions garder cela à l'esprit.
Nous espérons que vous avez apprécié cette mise à jour du développement Web. La prochaine est prévue le vendredi 15 juin. Restez à l'écoute.
