Mise à jour mensuelle du développement Web 11⁄2018 : conception juste-à-temps et recours aux polices variables

Dans quelle mesure le design affecte-t-il la perception de nos produits et des utilisateurs qui interagissent avec eux ? Pour moi, il devient de plus en plus clair que le design fait toute la différence et que l'unification des designs à un modèle standard comme le kit de conception de matériel de Google ne fonctionne pas bien. En l'utilisant, vous obtiendrez un design décent qui fonctionne d'un point de vue technique, bien sûr. Mais vous ne créerez pas une expérience unique avec, une expérience qui dure ou qui touche les gens à un niveau personnel.

Pensez maintenant aux sites Web que vous visitez et si vous aimez y être, lire ou même contribuer au contenu du service. À mon avis, c'est quelque chose qu'Instagram réussit très bien à faire. Un bon design correspond à l'objectif de votre entreprise et s'adapte aux attentes des visiteurs, les mettant à l'aise là où ils se trouvent et leur permettant de se connecter au produit. Les solutions standard, cependant, peuvent être agréables et pratiques, mais elles auront toujours cette sensation d'anonymat qui empêche les gens de vraiment se soucier de votre produit. Il est entre nos mains de façonner une meilleure expérience.

Nouvelles

• Oui, Firefox 63 est là, mais qu'apporte-t-il ? Prise en charge des composants Web, y compris les éléments personnalisés avec extensions intégrées et Shadow DOM. La prise en charge des requêtes multimédias prefers-reduced-motion est désormais également disponible, les outils de développement ont un éditeur de polices pour faciliter la lecture avec la typographie Web, et l'inspecteur d'accessibilité est activé par défaut. L'élément img prend désormais en charge l'attribut de decoding qui peut obtenir des valeurs sync , async ou auto pour indiquer le moment de décodage préféré au navigateur. Flexbox a également reçu quelques améliorations, prenant désormais en charge les propriétés gap ( row-gap , column-gap ). Et enfin, l'API Media Capabilities, l'API Async Clipboard et l'interface SecurityPolicyViolationEvent qui nous permet d'envoyer des violations CSP ont également été ajoutées. Wow, quelle sortie !
• React 16.6 est sorti - cela ne semble pas être une grande nouvelle, n'est-ce pas ? Eh bien, cette mise à jour mineure apporte React.lazy() , une méthode que vous pouvez utiliser pour fractionner le code en enveloppant une importation dynamique dans un appel à React.lazy() . Un grand pas pour de meilleures performances. Il y a aussi quelques autres nouveautés utiles dans la mise à jour.
• Le dernier Safari Tech Preview 68 apporte la prise en charge <input type="color"> et modifie le comportement par défaut des liens qui ont target="_blank" pour obtenir le rel="noopener" comme attribut implicite. Il inclut également la nouvelle requête multimédia prefers-color-scheme qui permet aux développeurs d'adapter les sites Web aux paramètres de mode clair ou sombre de macOS.
• Désormais, PageSpeed ​​Insights, probablement encore l'outil d'analyse de performance le plus utilisé par Google, est désormais propulsé par le projet Lighthouse que beaucoup d'entre vous ont déjà utilisé en plus. Une belle itération de leur outil qui le rend beaucoup plus précis qu'auparavant.
  

Général

• Explorez des parcours d'apprentissage structurés pour découvrir tout ce que vous devez savoir sur la création pour le Web moderne. web.dev est la nouvelle ressource de l'équipe Web de Google pour les développeurs.
• Peu importe ce que vous pensez d'Apple Maps (je suppose que la plupart d'entre nous ont vécu des moments de frustration), mais cette comparaison entre les données cartographiques qu'ils utilisaient jusqu'à présent et les données qu'ils recueillent actuellement pour leurs cartes remaniées est fascinante. Je suis sûr que le niveau de détail accru aidera beaucoup de gens dans le monde. Imaginez comment les architectes paysagistes pourraient en faire usage ou comment les secouristes pourraient profiter de ce niveau de détail après un tremblement de terre, par exemple.

HTML et SVG

• Andrea Giammarchi a écrit une bibliothèque polyfill pour les éléments personnalisés qui nous permet d'étendre les éléments intégrés dans Safari. C'est super sympa car cela nous permet d'étendre les éléments natifs avec nos propres fonctionnalités personnalisées - quelque chose qui fonctionne déjà dans Chrome et Firefox, et maintenant il y a aussi ce petit polyfill pour les autres navigateurs.
• Les éléments personnalisés sont encore très récents et la prise en charge des navigateurs varie. C'est pourquoi ce projet html-parsed-element est utile car il fournit une classe d'élément personnalisée de base avec une méthode parsedCallback fiable.

Javascript

• Leonardo Maldonado a compilé une collection de concepts JavaScript très utiles à connaître pour les développeurs. La liste comprend à la fois des vidéos et des articles afin que vous puissiez choisir votre méthode d'apprentissage préférée.
• Lorsqu'une vidéo ne fonctionne plus sur un site Web et que vous utilisez Service Workers, le problème peut être la requête Range. Phil Nash a débogué ce problème étrange sur sa page et explique comment vous pouvez le faire aussi.

Interface utilisateur/expérience utilisateur

• Comment construire une palette de couleurs ? Steve Schoger de RefactoringUI partage une excellente approche qui répond aux besoins réels.
• L'article de Matthew Strom "Just-in-time Design" mentionne une solution pour minimiser la déconnexion entre la conception du produit et l'ingénierie du produit. Il s'agit d'adopter la méthode Just-in-time pour la conception. Quelque chose dont mon équipe actuelle était très excitée et je suis heureux de l'essayer.
• HolaBrief semble prometteur. C'est un outil qui améliore la façon dont nous créons les briefs de conception, en gardant tout le monde sur la même longueur d'onde pendant le processus.
• Les modèles mentaux sont des explications de la façon dont nous voyons le monde. Teresa Man a écrit sur la façon dont nous pouvons appliquer des modèles mentaux à la conception de produits et pourquoi c'est important.
• Shelby Rogers explique comment nous pouvons créer de meilleures pages d'erreur 404.

Outillage

• Le générateur de palette de couleurs Palx vous permet d'entrer une valeur hexadécimale de base et génère une palette de couleurs complète basée sur celle-ci.

Sécurité

• Cet outil Python soigné est un excellent utilitaire de détection XSS.
• Svetlin Nakov a écrit un livre sur la cryptographie pratique pour les développeurs qui est disponible gratuitement. Si vous avez toujours voulu comprendre ou en savoir plus sur le fonctionnement des clés privées/publiques, du hachage, des chiffrements ou des signatures, c'est un excellent point de départ.
• Facebook a affirmé qu'il révélerait qui paie pour les publicités politiques. Maintenant, VICE a étudié cette nouvelle fonctionnalité et s'est fait passer pour chacun des 100 sénateurs américains actuels pour diffuser des publicités "payées par eux". Assez effrayant de voir comment une défaillance de sécurité qui donne aux utilisateurs plus de pouvoir comme prévu peut changer la politique mondiale.

Vie privée

• Je n'aime pas les liens vers des articles payants et restreints, mais celui-ci m'a fait réfléchir et vous n'avez pas besoin de toute l'histoire pour me suivre. Lorsque Tesla a annoncé qu'elle augmenterait la production du modèle 3 à ²⁴ ⁄ ₇ , beaucoup de gens voulaient vérifier cela, et une entreprise qui gagne de l'argent en fournissant des données de géolocalisation a capturé les données de localisation des smartphones des travailleurs autour des usines Tesla pour confirmer si cela pourrait être vrai. Une autre triste histoire de la facilité avec laquelle il est possible de suivre quelqu'un sans son consentement, même s'il s'agit davantage d'un cas de surveillance de masse que de suivi individuel.

Performances Web

• Addy Osmani partage une étude de cas sur les performances de Netflix pour améliorer le Time-to-Interactive du service de streaming. Cela inclut le passage de React et d'autres bibliothèques à JavaScript brut, la prélecture de HTML, CSS et (React) JavaScript et l'utilisation de React.js côté serveur. Très intéressant de voir autant d'approches non conventionnelles et leurs avantages. Mais rappelez-vous que ce qui fonctionne pour les autres n'a pas besoin d'être l'approche parfaite pour votre projet, alors prenez-le plus comme source d'inspiration que de le copier aveuglément.
• Harry Roberts explique tous les détails importants à connaître sur CSS et les performances réseau. Une collection complète qui fournit également des conseils très intéressants lorsque vous avez des scripts async dans votre code.
• J'adore la petite application ImageOptim pour l'optimisation par lots de mes images pour la distribution sur le Web. Mais maintenant, il existe une application Web impressionnante appelée "Squoosh" qui vous permet d'optimiser parfaitement les images dans votre navigateur Web et, en prime, vous pouvez également redimensionner l'image et choisir la compression à utiliser, y compris mozJPEG et WebP. Fabriqué par l'équipe Google Chrome.

CSS

• Oliver Schondorfer montre comment nous pouvons servir une police variable aux navigateurs modernes tout en fournissant une police Web de secours pour les navigateurs plus anciens. Ceci est particulièrement intéressant car Oliver approfondit l'optimisation de la police de secours et l'ajuste via CSS afin de faire correspondre le plus possible la police variable au cas où un échange de police se produirait pendant le chargement de la page.
• Andy Clarke montre ce qui est nécessaire pour reconcevoir un produit et un site Web afin de prendre en charge les modes lumineux et sombres qui ont été introduits récemment dans plusieurs systèmes d'exploitation et seront bientôt pris en charge via des requêtes multimédias par divers navigateurs.
• Bien que background-clip ne soit pas super nouveau, il n'a pas été très utile en raison du manque de prise en charge du navigateur. Mais comme le montre Sime Vidas, CSS Background Clip est maintenant largement pris en charge, ce qui nous donne de grandes opportunités d'améliorer le style du texte sur nos sites Web.

La vie de travail

• Stig Brautaset a expliqué pourquoi il avait failli échouer dans son travail d'opérateur de sonar sous-marin en raison d'une règle d'embauche stupide et comment il avait tiré le meilleur parti de la situation et avait réussi. Une leçon précieuse qui montre que vous ne devez pas trop vous en tenir aux directives et aux règles lorsqu'il s'agit d'embaucher des gens, mais faites confiance à votre instinct et écoutez plutôt leurs histoires.
• Dans « Des gens, pas des robots : ramener l'humanité au service client », Kristin Aardsma explique pourquoi il est important de repenser le fonctionnement du service client.
• Marcus Wermuth explique pourquoi devenir manager n'est pas une promotion mais un changement de carrière.

Aller plus loin…

• Neil Stevenson sur Steve Jobs, la créativité et la mort et pourquoi c'est une bonne histoire pour la vie. Bien que copier Steve Jobs ne soit probablement pas une bonne idée, Neil propose différents angles de vue sur la façon dont nous pourrions vouloir travailler, ce qu'il faut faire de nos vies et pourquoi le but est important pour beaucoup d'entre nous.
• Ryan Broderick réfléchit à ce que nous avons fait en inventant Internet. Il conclut que tout ce radicalisme dans le monde, ces opinions politiques étranges sont tous dus à l'invention des médias sociaux, des logiciels de chat et de la (pas si sous-) culture de promotion et d'acceptation de toutes les mauvaises choses qui se passent dans notre société. Vous souvenez-vous de 4chan, Reddit et des services similaires, mais aussi de Facebook et autres ? Ils contribuent et adoptent non seulement de bonnes idées, mais souvent des idées stupides ou même nuisibles. "C'est ainsi que nous avons radicalisé le monde" est une histoire triste à lire mais bien écrite et avec beaucoup de réflexions inspirantes sur la façon dont nous façonnons la société grâce à la technologie.
• Je suis désolé, c'est un autre lien sur la consommation d'énergie de Bitcoin, mais il montre que l'extraction de Bitcoin à elle seule pourrait faire monter les températures mondiales au-dessus de la limite critique (2°C) d'ici 2033. Il est temps d'abandonner ce type de crypto-monnaie inefficace. À présent.
• La nature sauvage est quelque chose de spécial. Et notre planète en a de moins en moins, comme le décrit cet article. La carte révèle que seuls très peu de pays ont beaucoup de nature sauvage de nos jours, donnant aux animaux et aux espèces rares un lieu de vie, donnant aux humains un moyen d'explorer la nature, de se détendre, de partir à l'aventure.
• Nous vivons certainement une époque passionnante, mais cela me rend triste quand je lis qu'au cours des quarante dernières années, la population d'animaux sauvages a diminué de 60 %. C'est une échelle assez massive, et si cela continue, le monde sera un autre endroit quand je serai vieux. Oui, quand je serai vieux, beaucoup d'animaux que j'ai connus et vus dans la nature n'existeront plus d'ici là, et la prochaine génération d'humains ne pourra pas les voir autrement que dans un musée. Les raisons ne sont pas tout à fait claires, mais le changement climatique pourrait être une chose, et l'expansion croissante des humains dans les zones fauniques y contribue probablement beaucoup aussi.