Mise à jour mensuelle du développement Web 6⁄2018 : complexité, DNS sur HTTPS et notifications push

Nous voyons la complexité dans chaque recoin d'un projet Web de nos jours. Nous avons lu de nombreux articles sur la complexité d'une technologie spécifique, et nous en discutons encore et encore. Venant d'une époque où nous téléchargions des sites Web via FTP et n'avions pas de git ou quoi que ce soit de comparable, nous vivons maintenant à une époque où nous avons un système de construction, des transpileurs, des frameworks, des tests et un CI même pour les plus petits projets, c'est facile à comprendre . Mais d'un autre côté, le développement web a tellement grandi au cours des 15 dernières années qu'on ne peut plus vraiment comparer aujourd'hui au passé . Et même s'il peut sembler que certaines choses étaient plus faciles dans le passé, nous négligeons les avantages et les innombrables possibilités dont nous disposons aujourd'hui. À l'époque où nous n'écrivions pas de tests, eh bien, nous n'avions tout simplement pas de test, c'est-à-dire aucun moyen fiable de tester le succès. Lorsque nous n'avions pas de processus de déploiement, il était facile de télécharger une nouvelle version mais tout aussi facile de casser quelque chose - et cela arrivait beaucoup plus qu'aujourd'hui lorsqu'un système d'intégration continue est en place.

Jeffrey Zeldman a écrit un article intéressant sur le sujet : « The Cult of Complex » décrit comment nous nous perdons dans des détails inutiles et essayons souvent de trop réfléchir aux problèmes . J'aime le défi de construire des systèmes qui ne sont pas trop complexes mais qui montrent une quantité décente de responsabilité (en ce qui concerne l'éthique, la confidentialité, la sécurité, une excellente expérience utilisateur et les performances) et qui fonctionnent de manière fiable (tests, déploiements, disponibilité et performances à nouveau). Je suppose que le problème de trouver le bon équilibre ne va pas disparaître de si tôt. La complexité est partout - nous avons juste besoin de décider si c'est une complexité utile ou si elle a été ajoutée simplement parce que c'était plus facile ou parce que nous avons trop conçu le problème d'origine.

Nouvelles

• La prochaine version 12 de Safari a été dévoilée lors de la WWDC d'Apple. Voici les nouveautés : des icônes dans les onglets, des mots de passe forts, ainsi qu'un contrôle du générateur de mots de passe via des attributs HTML, y compris un contrôle d'authentification à deux facteurs, une visionneuse de modèles 3D et AR, l'API Fullscreen sur iPad, font-display et, très important, Intelligent Tracking Prevention 2.0 qui est plus restrictif que jamais et pourrait avoir un impact significatif sur la fonctionnalité des sites Web existants.
• La bibliothèque d'automatisation Headless Chrome Puppeteer est maintenant disponible en version 1.5. Il apporte des contextes de navigateur pour isoler les cookies et autres données généralement partagées entre les pages, et les travailleurs peuvent désormais également être utilisés pour interagir avec les travailleurs Web.
• Google a publié Lighthouse 3.0, la troisième version majeure de son outil d'analyse des performances qui comprend une nouvelle interface de rapport, quelques modifications de notation, une exportation CSV et la mesure First Contentful Paint.
• Chrome 67 est là, apportant des applications Web progressives sur le bureau, ainsi que la prise en charge de l'API Generic Sensor et étendant l'API Credential Management pour prendre en charge les authentificateurs U2F via USB.
• Nous avons constaté de nombreux changements dans les interfaces de sécurité des navigateurs au cours des derniers mois. Tout d'abord, ils ont mis l'accent sur les sites proposant une connexion sécurisée (HTTPS). Ensuite, ils ont décidé d'indiquer les sites non sécurisés, et maintenant Chrome a annoncé de nouveaux changements à venir à l'automne qui feront du HTTPS la valeur par défaut en marquant les pages HTTP comme "non sécurisées".

Général

• Dans « Le culte du complexe », Jeffrey Zeldman écrit sur la façon dont nous semblons souvent oublier que la simplicité est la clé et le but de tout ce que nous faisons, le but général des projets et de la vie. Il explique pourquoi il est si difficile à réaliser et pourquoi il est tellement plus facile - et tentant - de cultiver des systèmes complexes. Une très bonne lecture et certainement un morceau que j'ajouterai à ma liste "à feuilles persistantes".
• Heydon Pickering a partagé un nouvel article très intéressant qui nous apprend à bien construire un composant web : Cette fois il nous explique comment construire un module « Card » inclusif et responsive.

Interface utilisateur/expérience utilisateur

• Cool Backgrounds est un projet parallèle cool de Moe Amaya. C'est un générateur en ligne d'arrière-plans polygonaux avec des dégradés qui peuvent générer de nombreuses variantes et formes. Tout simplement magnifique.

Outillage

• Ben Frain partage quelques techniques d'édition de texte utiles qui sont disponibles dans presque tous les éditeurs de code modernes.

Sécurité

• Alors que les attaques de sécurité via DNS gagnent en popularité, DNS sur HTTPS devient de plus en plus important. Lin Clark explique la technologie avec un dessin animé pour la rendre plus facile à comprendre.
• Windows Edge prévisualise désormais la prise en charge des cookies du same-site . L'attribut pour verrouiller encore plus les cookies est déjà disponible dans Firefox et Chrome, donc Safari est le seul navigateur majeur qui doit encore l'implémenter, mais je suppose qu'il atterrira également très bientôt dans leurs versions Tech Preview.

Vie privée

• L'ACLU a découvert qu'Amazon s'était désormais officiellement associé aux forces de l'ordre et fournissait une technologie de reconnaissance faciale de masse déjà utilisée dans des villes du monde entier.

Performances Web

• KeyCDN a demandé à 15 personnes connaissant bien la performance Web de partager leurs meilleurs conseils avec les lecteurs. Maintenant, ils ont partagé cet article contenant de nombreux conseils de performance utiles pour 2018, y compris quelques mots de ma part.
• Stefan Judis a découvert que nous pouvions déjà précharger les modules ECMA Script dans Chrome 66 en ajoutant une balise d'en-tête HTML link rel="modulepreload" .

Accessibilité

• Il est relativement facile de construire un spinner de chargement — pour une Single Page Application pendant le chargement, par exemple —, mais on pense rarement à les rendre accessibles. Stuart Nelson explique maintenant comment procéder.
• Paul Stanton partage les outils d'accessibilité que nous devrions utiliser pour obtenir les meilleurs résultats.

Javascript

• JavaScript a récemment été victime d'intimidation par des personnes qui préfèrent Elm, Rust, TypeScript, Babel ou Dart. Mais JavaScript n'est certainement pas pire, comme l'explique Andrea Giammarchi avec de bons exemples. Cet article est également une excellente lecture pour tous ceux qui utilisent l'une de ces autres langues car il montre quelques pièges dont nous devons être conscients.
• Pour de nombreux projets, nous souhaitons utiliser des analyses ou d'autres scripts qui collectent des informations personnelles. Avec GDPR en vigueur, cela est devenu beaucoup plus difficile. Yett est un bel outil JavaScript qui vous permet de bloquer l'exécution de telles ressources jusqu'à ce qu'un utilisateur l'accepte.
• Ryan Miller a créé une nouvelle publication intitulée "The Frontendian", et elle présente l'une des meilleures explications et guides sur CORS que j'ai rencontrés jusqu'à présent.
• Les gens de Microsoft ont créé une belle page de démonstration interactive pour montrer à quoi peuvent et doivent ressembler les notifications Web Push. Si vous ne vous êtes pas encore familiarisé avec la technologie, c'est une excellente introduction à la façon dont tout cela fonctionne et comment créer une interface qui ne dérange pas les utilisateurs.
• Filepond est une bibliothèque JavaScript pour télécharger des fichiers. Il a fière allure et est livré avec de nombreux adaptateurs pour React, Vue, Angular et jQuery.
• React 16.4 est sorti et apporte toute une fonctionnalité à la bibliothèque : Pointer Events. Ils faciliteront la gestion des interactions avec les utilisateurs et sont demandés depuis longtemps déjà.

CSS

• Oliver Schondorfer explique comment démarrer avec des polices variables sur le Web et comment nous pouvons les styliser avec CSS. Un résumé assez complet des éléments à prendre en compte ainsi que des pièges éventuels.
• Avec le prochain macOS Mojave prenant en charge un "mode sombre", Safari commencera à définir automatiquement la couleur d'arrière-plan des sites Web sur une couleur noire si aucune couleur d' background-color n'est explicitement définie. Ceci est un excellent rappel que les navigateurs peuvent définir et modifier leurs styles par défaut et que nous devons définir soigneusement les paramètres par défaut de notre site. J'espère toujours que le "mode sombre" sera exposé à une requête multimédia CSS afin que nous puissions officiellement ajouter sa prise en charge.
• Rafaela Ferro explique comment utiliser CSS Grid pour créer une galerie de photos non seulement belle mais vraiment géniale. Cet article contient les réponses à de nombreuses questions que je reçois régulièrement lorsque je parle de la disposition de la grille.
• Marcin Wichary explique comment nous pouvons créer un thème sombre en peu de temps avec les propriétés personnalisées CSS modernes.

La vie de travail

• Anton Sten a écrit sur les implications morales de nos applications. Une explication significative de la raison pour laquelle l'époque du "bouger vite et casser les choses" est définitivement révolue alors que nous avons affaire à l'intelligence artificielle, aux réseaux sociaux qui affectent la vie des gens et aux questions de confidentialité imposées par le RGPD.
• Basecamp dispose désormais d'un nouveau type de graphique pour afficher l'état d'un projet : le soi-disant "graphique en colline" ajoute un meilleur contexte qu'une simple barre de progression ne pourrait jamais le faire.
• Ben Werdmuller partage ses réflexions sur les CV et comment ils ne reflètent toujours pas qui vous êtes, ce que vous faites et pourquoi vous devriez être embauché.

J'espère que vous avez apprécié cette mise à jour mensuelle. Le prochain est prévu pour le 13 juillet, alors restez à l'écoute. En attendant, si vous aimez ce que je fais, pensez à m'aider à financer financièrement la liste de lecture pour le développement Web.

Passe une bonne journée!

— Anselme