Mise à jour mensuelle du développement Web 7⁄2018 : accessibilité pratique, erreurs de conception et contrôle des fonctionnalités

Le web continue de m'étonner. Avec toute sa variété et les différents changements apportés à la plate-forme, il est difficile de voir un modèle droit - s'il n'y en a même qu'un. Mais c'est merveilleux de voir ce qui est changé, quelles fonctionnalités sont ajoutées à la plate-forme, lesquelles sont obsolètes et comment les navigateurs implémentent de plus en plus de technologies pour protéger l'utilisateur contre les attaques de sites Web malveillants. Il est intéressant de voir que ces fonctionnalités de sécurité attirent aujourd'hui autant l'attention qu'une fonctionnalité pour les développeurs ; cela montre l'importance de la confidentialité et de la sécurité et à quel point le Web était instable et peu sûr dans le passé.

Mais la meilleure chose à propos de tout cela est que cela montre à quel point il est important de s'en tenir aux choses que les gens nous donnent. Au lieu de mettre en œuvre nos propres solutions pour tout, il est souvent préférable de réutiliser un système existant. Non seulement il est plus sûr de s'appuyer sur, mais aussi moins de travail tout en étant plus inclusif pour étendre un élément DOM natif avec un élément personnalisé (au lieu d'écrire notre propre élément personnalisé à partir de zéro). Si nous nous demandons si nous devrions créer notre propre version de SSL ou utiliser un logiciel existant pour cela, pourquoi créerions-nous un élément cliquable basé sur rien au lieu de modifier le comportement d'un élément a ou button ? Et pourquoi vérifierions-nous nous-mêmes la validation de l'hôte de ressource, si le navigateur nous fournit déjà une API pour cela ? Les articles de cette semaine sont tous consacrés à ces sujets.

Une autre chose qui m'est restée en tête est l'article d'Andrea Giammarchi, « A Bloatless Web », dans lequel il décrit comment nous utilisons aveuglément Babel en tant que développeurs lorsque nous écrivons du JavaScript pour pouvoir écrire de l'ECMAScript moderne. Mais nous ne réalisons généralement pas que transpiler tout notre code moderne dans les navigateurs modernes n'est pas le moyen le plus efficace. Je suis heureux qu'Andrea offre quelques idées sur la façon dont nous pouvons améliorer cette situation et améliorer les performances de nos applications Web. Ne serait-il pas étonnant de ne servir qu'un tiers de la taille du bundle en ne transpilant plus le code pour chaque navigateur ?

Nouvelles

• L'isolation de site rend plus difficile pour les sites Web non fiables d'accéder ou de voler des informations de vos comptes sur d'autres sites Web. Chrome 67 est maintenant livré avec lui et le blocage de lecture d'origine croisée (CORB) ne se chargera plus, par exemple un fichier JSON en tant qu'image. Mais encore plus, ces changements signifient que la mise en page pleine page n'est plus garantie d'être synchrone. Cette nouvelle fonctionnalité vous affecte si vous lisez les tailles calculées à partir d'un élément en JavaScript ou utilisez des écouteurs d'événement de unload . Assurez-vous de le savoir et vérifiez si vos sites fonctionnent toujours comme prévu.
• À présent, nous en savons un peu plus sur les politiques de sécurité du contenu - une fonctionnalité qui permet aux développeurs de limiter la charge de certaines ressources par noms d'hôte. Mais les fournisseurs de navigateurs ont mis au point quelque chose de nouveau : la politique des fonctionnalités. Cela permet aux développeurs Web d'activer, de désactiver ou de modifier de manière sélective le comportement de certaines API et fonctionnalités Web dans le navigateur. C'est comme CSP mais au lieu de contrôler la sécurité, il contrôle les fonctionnalités et Eric Bidelman a écrit une introduction à la politique des fonctionnalités expliquant tout.
• L'équipe du navigateur Brave présente sa dernière fonctionnalité pour protéger la vie privée de ses utilisateurs : des onglets qui se connectent via le réseau Tor.

Générique

• Anton Sten demande si les valeurs du secteur technologique sont brisées ? Analyser les stratégies marketing d'Apple, Microsoft, Google, Amazon mais aussi de petites autres entreprises et comment nous pouvons faire un travail vraiment utile et nous en tenir à nos valeurs au lieu de les traiter comme du matériel marketing que nous n'avons pas besoin de respecter ou de respecter.
• Maintenant que le secteur technologique du monde transforme rapidement toutes les choses du monde en choses numériques, beaucoup ont appelé à plus d'éthique dans notre domaine. C'est dans de nombreux cas un objectif assez vague, alors appliquons-le à une partie du numérique : le développement frontal. Comment pouvons-nous être plus éthiques en tant que développeurs front-end, que pouvons-nous faire ? Hidde de Vries a écrit un article à ce sujet.

Sécurité

• Les données client de Ticketmaster ont été compromises et, semble-t-il, cela est dû à une seule ligne de code personnalisée qui inclut un script tiers.

Interface utilisateur/expérience utilisateur

• Eugen Esanu montre dix petites erreurs de conception que nous commettons encore et ce que nous pouvons faire à la place pour rendre notre conception plus conviviale.

Vie privée

• Il s'agit d'un rapport intéressant sur la façon dont Google permet aux développeurs d'applications externes de lire les e-mails Google des utilisateurs lorsqu'ils accordent leur autorisation lors de l'autorisation de l'application. Le problème avec cela est qu'il n'y a aucun moyen d'empêcher facilement cela et cela pourrait avoir un certain impact si vous utilisez Gmail pour votre entreprise car cela pourrait affecter les politiques de confidentialité et est soumis au RGPD.

Performances Web

• Max Bock explique comment nous pouvons créer des composants qui réagissent à la vitesse de connexion réelle de l'appareil à l'aide de l'API d'informations réseau. Et bien qu'il ne soit actuellement disponible que dans les navigateurs Internet Chrome et Samsung, cela vaut la peine de l'essayer et peut-être déjà de le servir à ces utilisateurs.
• De temps en temps, on peut encore lire des articles mentionnant l'importance d'optimiser les sélecteurs CSS afin d'améliorer les performances. Cela trouve son origine dans des recherches effectuées il y a plusieurs années, mais Ivan Curic a de nouveau fait des recherches et a découvert que cela n'avait pas d'importance.

Accessibilité

• L'équipe de développeurs de Microsoft partage une liste de lecture vidéo sur l'accessibilité pratique, notamment sur la façon d'optimiser les présentations ou le langage à inclure ou sur la manière de créer une fonctionnalité de "saut de navigation" appropriée sur votre site Web.
• Sara Novak raconte comment elle a réussi à faire preuve d'empathie en expérimentant le daltonisme pour comprendre comment les autres vivent le monde différemment.
• Les outils de développement de Firefox disposent désormais d'un mode Inspecteur d'accessibilité . Voici comment l'activer et comment l'utiliser.

Javascript

• Leon Revill nous montre comment nous pouvons étendre les éléments DOM natifs existants avec des composants Web. Ceci est extrêmement utile et utile car nous pouvons non seulement gagner beaucoup de temps en utilisant des modèles prédéfinis pour les éléments personnalisés, mais également obtenir gratuitement toutes les optimisations et les valeurs par défaut (sémantique, accessibilité, fonctionnalité du navigateur) tout en pouvant créer notre propre comportement. de celui-ci. À tout le moins, si nous pouvions utiliser des éléments personnalisés, mais c'est une autre histoire.
• Gerardo Rodriguez montre comment nous pouvons facilement ne pas optimiser les sites Web pour les performances avec Service Workers et l'API Fetch et comment cela peut entraîner une exception de quota dans les navigateurs. Heureusement, il en a découvert la raison et en définissant les en-têtes CORS appropriés, Gerardo a finalement résolu le mystère des réponses opaques à mise en cache unique et nous explique comment éviter les problèmes.
• Filepond est un joli téléchargeur de fichiers JavaScript open-source. Rik Schennink partage les défis rencontrés lors de sa construction.
• Andrea Giammarchi sur le problème du regroupement de JavaScript avec Babel et pourquoi transpiler le code n'est plus la meilleure solution. Au lieu de cela, nous devrions réfléchir à la manière de servir différents bundles en fonction de la prise en charge du navigateur pour réduire la taille du bundle et améliorer les performances.
• Justin Fuller partage trois nouvelles fonctionnalités intéressantes à venir bientôt sur JavaScript qui nous aideront à écrire du code plus facile à comprendre, comme le chaînage opérationnel, la coalescence nulle ou l'opérateur de pipeline.
• Addy Osmani et Mathias Bynens ont écrit une introduction sur la façon dont nous pouvons utiliser les modules JavaScript sur le Web aujourd'hui.

CSS

• Une série d'articles qui explique comment nous pouvons simuler une grille de placement automatique avec des lacunes dans Internet Explorer.
• CSS Grid est sympa, mais j'entends souvent dire que les gens ne peuvent pas l'utiliser car IE11 ne le supporte pas bien. Mais ce n'est pas tout à fait vrai car IE11 a une version antérieure de CSS Grid disponible que nous pouvons facilement transpiler avec autoprefixer. Daniel Tonon explique les différences CSS Grid et les fonctionnalités que nous pouvons et ne pouvons pas utiliser et continuera avec encore plus de conseils.
• Pour beaucoup de gens, CSS Grid est encore très nouveau, et il est très capable et nous aide à résoudre de nombreux problèmes lors de la création de mises en page basées sur une grille en CSS. Mais dans la version actuelle, il y a quelques choses qui ne sont toujours pas possibles. CSS Grid niveau 2 nous apportera des sous-grilles et Rachel Andrew explique pourquoi vous en avez besoin.
• CSS-in-JS est-il bon ? Est-ce juste mauvais ? Pourquoi nous tombons constamment dans le piège de nous disputer alors qu'il n'y a pas de gagnants clairs et comment nous pouvons faire mieux en reconnaissant l'évolution et en voyant les choses dans leur contexte.

La vie de travail

• Pourquoi le concept de patience et l'effort de construire quelque chose pour durer devraient gagner plus d'attention dans les affaires. Certaines pensées me sont venues à l'esprit lors de la lecture d'un autre article et il semble que beaucoup de gens aiment l'idée derrière cela.
• Ethan Marcotte explique comment il aborde le choix des clients et pourquoi il pense qu'il est important de ne choisir que des clients que vous pouvez soutenir sur le plan éthique. Mais cela montre aussi à quel point cela peut parfois être difficile, comme le montrent les discussions récentes sur les coopérations commerciales de Microsoft avec des entités juridiques.