Mise à jour mensuelle du développement Web 2⁄2018 : Le Web adulte, les détails de la marque et le navigateur Fast Forward

Chaque profession est un vaste domaine où de nombreuses personnes trouvent leurs propres niches personnalisées. Il en va de même pour la conception et le développement Web aujourd'hui. J'ai commencé à créer mon premier site Web avec des jeux de cadres et HTML4.0, des images et un ensemble super limité de CSS, et - oh si fantaisiste - des GIF et du JavaScript en ligne (rappelez-vous le attribut ?) il y a environ une décennie et demie. Il m'a fallu quatre jours pour acquérir les compétences initiales nécessaires pour cela.

Mais les temps sont très différents aujourd'hui, et quand je vois à quel point le web est devenu capable, il est raisonnable de dire que cela peut donner du fil à retordre aux gens pour débuter dans ce domaine, et il peut être raisonnable pour les gens de dire qu'ils veulent se concentrer uniquement sur une partie spécifique du développement Web . De nos jours, nous avons des développeurs JavaScript qui ne connaissent pas beaucoup HTML ou CSS, et nous avons des développeurs qui ne sont pas capables de travailler sur une pile JavaScript moderne mais qui sont des héros dans ce qu'ils réalisent avec CSS. Il existe des personnes spécialisées dans le chargement de polices Web, les performances Web, la sécurité, la confidentialité ou la convivialité.

Le développement Web est devenu une profession solide - quelque chose qui nécessite une grande quantité de connaissances pour être un expert, quelque chose qui ne peut plus être appris en quelques jours. Au lieu de cela, nous sommes maintenant en mesure de créer des applications sur le Web et de faire des choses dont je n'aurais jamais imaginé que le Web serait capable lorsque j'ai commencé il y a 16 ans. Si nous regardons les efforts nécessaires pour se lancer dans le travail du bois, par exemple, nous réalisons que le développement Web n'est pas très différent. Bien sûr, on peut arriver à un résultat en quelques heures, mais produire quelque chose qui dure, quelque chose de solide et qui a fière allure demande beaucoup de connaissances, d'expérience, d'échecs et de patience. Il en va de même pour la création d'une excellente expérience Web.

Nouvelles

• Les grandes nouvelles des fournisseurs de navigateurs ne cessent d'arriver : Google Chrome a annoncé qu'à partir de Chrome 68 (qui sortira en juillet 2018), le navigateur marquera les sites non sécurisés (HTTP) comme "non sécurisés". sites Web non HTTPS. J'imagine juste tous les clients avec leurs sites et portefeuilles de petites entreprises désespérés par ce changement. C'est formidable de voir le passage à un Web plus sécurisé, mais j'ai parfois l'impression que ceux qui décident ne réfléchissent pas suffisamment à l'impact de leurs décisions sur les petites entités utilisant Internet également.
• L'aperçu technologique 49 de Safari apporte des fonctionnalités intéressantes : la protection intelligente contre le suivi dispose désormais d'un outil de débogage en mode expérimental, column-gap prend désormais en charge les % -valeurs, active-descendant est également pris en charge et la console émettra un avertissement si AppCache est utilisé. .
• C'est parti avec l'annonce du dernier grand fournisseur de navigateurs à prendre en charge les Progressive Web Apps : cette fois Microsoft sous Windows et le navigateur Edge. Edge 17 viendra avec Service Workers et des notifications push, mais ce qui est encore plus intéressant, c'est que l'entreprise partage sa stratégie sur la manière dont elle prendra en charge ces applications au niveau du système d'exploitation : le Microsoft Store commencera à répertorier les applications Web progressives par soumission manuelle, ce qui est un grand pas en avant pour rendre les applications Web aussi utilisables que les applications natives. Je peux imaginer que de nombreuses applications Electron deviendront obsolètes si ce concept est également adopté par d'autres fournisseurs de systèmes d'exploitation.
• Google Chrome 64 est sorti et apporte ResizeObserver , un mécanisme de blocage des popups bien plus puissant. window.alert ne changera plus le focus et, pour économiser de la bande passante, le nouveau Chrome modifie également le comportement de préchargement des fichiers multimédias en métadonnées uniquement.
• Dans la prochaine version 65 de Chrome, le navigateur bloquera les certificats de la Legacy PKI de Symantec et, pour protéger la sécurité des utilisateurs, l'attribut download si la cible est une référence d'origine croisée.
• Firefox 58 est sorti cette semaine avec de grandes améliorations de performances. Il limite les minuteries dans les onglets d'arrière-plan, apporte font-display en tant que propriété CSS et prend en charge Intl.PluralRules . Une autre nouveauté est que l'API WebVR est maintenant activée par défaut sur macOS, et WebAssembly a obtenu l'incroyable compilateur de streaming.
• Safari 11.1 est livré avec iOS 11.3 et macOS 10.13.4. Il est également disponible dans les anciennes versions de macOS 10.12.6 et 10.11.6. La mise à jour apporte Service Workers, l'API de demande de paiement, y compris Apple Pay, HTMLImageElement.decode() , l'API File and Directory Entries, l'API Beacon, la vidéo en tant qu'actif image dans les éléments <img> , la prise en charge des extensions multimédias cryptées dans Safari sur iOS , la prise en charge de allow="camera" dans WebRTC et Media Capture, la propriété CSS font-display pour contrôler le clignotement du texte sans style avec les polices Web et le manifeste d'application Web. Du point de vue de la sécurité, il ajoute la prise en charge de l'intégrité des sous-ressources, des avertissements "site Web non sécurisé", une chaîne d'agent utilisateur Safari gelée. Je pense que cela marque une étape importante qui montre qu'Apple déploie beaucoup d'efforts pour maintenir Safari à jour. Il est également intéressant de voir que Safari supprime automatiquement les anciens Service Workers qui n'ont pas été utilisés depuis longtemps pour ne pas gaspiller l'espace disque des utilisateurs.

Général

• Frank Chimero a publié un nouvel article dans lequel il explique qu'il est normal de lutter avec des technologies en constante évolution. C'est aussi un voyage amusant à travers le démarrage d'une entreprise et l'exploration des détails approfondis d'un métier.
• Eric Meyer est l'une des personnes qui a travaillé avec CSS depuis le début et qui a une connaissance approfondie de son développement. Il a maintenant écrit quelques réflexions sur la façon dont la complexité du CSS a changé au fil du temps.
• Vitaly Friedman a écrit un article dans lequel il nous demande en tant que développeurs, à nous en tant que fondateurs d'entreprise de respecter les utilisateurs, et pourquoi cela devrait nous importer davantage à tous.
• L'année dernière, Matt Ludwig a publié un article sur le problème de la compatibilité des logiciels dans le temps et pourquoi une réécriture de la Progressive Web App sera la solution pour qu'elle fonctionne encore dans cinquante ans. L'erreur ici est de penser que le Web est le même qu'il y a vingt-cinq ans. Aujourd'hui, nous sommes confrontés à des navigateurs supprimant de nombreuses API après quelques années, plaçant des fonctionnalités existantes derrière un mur HTTPS, et des développeurs construisant du code basé sur d'innombrables dépendances qui sont abandonnées après un certain temps par leurs auteurs. Et une fois que nous construisons sur tout ce qui n'est pas le standard du Web, nous ne sommes plus en mesure de dire que le code durera longtemps.
• Tim Kadlec remet en question les deux visages de Google AMP et affirme qu'il peut s'agir soit d'un outil de marketing de recherche Google, soit d'un outil pour le Web ouvert pour améliorer les performances du site, mais pas les deux, comme il essaie de l'être.
• John Cobb explique pourquoi il a commencé à penser différemment à la qualité du code et pourquoi les revues de code doivent impliquer plus que la simple visualisation du code.

Interface utilisateur/expérience utilisateur

• Cette étude de cas sur la façon dont la marque Lufthansa a fait évoluer son langage de conception et son logo au fil du temps, y compris le dernier changement de marque subtil mais toujours très différent, montre à quel point les petits détails sont importants lorsqu'il s'agit d'améliorer l'apparence visuelle d'une marque.
• Naema Baskanderi partage les meilleures pratiques pour les fenêtres et les boîtes de dialogue modales, analysant les modaux bien connus et les améliorant.

Vie privée

• Firefox est livré avec une protection de suivi de la confidentialité depuis un certain temps. Maintenant, ils partagent leurs enseignements et comment nous pouvons améliorer la confidentialité sans casser le Web.
• Holger Bartel profite de l'article de Vitaly Friedman « Respect Always Comes First » pour souligner l'importance du respect des utilisateurs en posant une question très intéressante : Tout le monde veut créer de meilleures expériences, mais qu'êtes-vous prêt à faire pour cela ? Il n'est pas facile de trouver une réponse et d'ouvrir la voie à cela dans notre travail, mais c'est une partie importante des produits de construction.

Sécurité

• Il semble que Mixpanel ait collecté par inadvertance des mots de passe d'utilisateurs pendant des mois avec sa fonction Autotrack. Si vous utilisez Mixpanel, vous devez mettre à niveau vers la dernière version dès que possible.

Outillage

• Monica Dinculescu partage comment elle a écrit un script avec Puppeteer, la bibliothèque de référence de l'équipe Chrome pour automatiser Chrome sans tête afin d'obtenir une différenciation visuelle automatisée.
• Chrome 65 arrive bientôt et apportera une fonctionnalité très pratique aux outils de développement : un outil de rapport de contraste dans le sélecteur de couleurs qui aidera à identifier le contraste dans les associations de couleurs.
• Webpack 4 est en cours avec quelques améliorations de performances. Il s'agit maintenant d'un bundler à configuration zéro prêt à l'emploi et il a de bien meilleures tailles de bundles grâce à un secouage d'arbres massivement meilleur.

Performances Web

• Ben Robertson explique comment nous pouvons charger des vidéos paresseusement et choisir la qualité en fonction de la vitesse de connexion de l'utilisateur.
• Seva Zaikov demande si la tendance à tout construire en tant qu'applications à page unique peut être dans l'intérêt des utilisateurs, et essaie de savoir si son hypothèse selon laquelle ils ralentissent les sites Web peut être étayée par des données. L'article n'est pas un coup de gueule sur des outils comme React mais pose des questions importantes que nous devrions nous poser avant de commencer à construire l'architecture technique d'un nouveau projet.

HTML et SVG

• Saviez-vous que pour les tableaux accessibles, il est nécessaire d'avoir un élément de caption dans votre code HTML ? Stefan Judis explique comment faire.

Javascript

• Il y a un nouveau framework JavaScript autour : Stimulus, et il est complètement compatible avec le HTML que vous avez déjà et améliore l'expérience de vos modèles statiques.
• Dave Rupert partage une manière très simple et moderne de créer un effet de parallaxe en manipulant les propriétés personnalisées CSS avec JavaScript.
• Pour un flux de données unidirectionnel, nous utilisons généralement WebSockets. Mais avec HTTP/2, nous pouvons également utiliser les événements envoyés par le serveur, comme l'explique Martin Chaov dans son article exemplaire.

CSS

• Nous avons déjà entendu parler à plusieurs reprises de Houdini dans les navigateurs, un moyen d'ajouter notre propre fonctionnalité CSS via JavaScript. Maintenant, Surma partage le fonctionnement de l'API CSS Paint qui sera disponible à partir de Chrome 65. En effet, cela nous apporte beaucoup de possibilités qui ne sont généralement disponibles que pour les graphiques ou SVG vers CSS.
• Sarah Dayan explique comment nous pouvons créer des icônes multicolores avec des symboles SVG et des variables CSS.

Accessibilité

• Le diaporama de Marcy Sutton "Automatiser la tranquillité d'esprit avec les tests d'accessibilité et l'intégration continue" donne une idée et quelques conseils sur la façon dont nous pouvons tester en permanence l'accessibilité des sites Web.

La vie de travail

• Jon Gold a écrit sur la recherche des orifices d'échappement. Une bonne lecture sur la façon dont la technologie nous influence.
• Il y a une sorte de bon sens que les entreprises technologiques qui se portent bien embauchent toujours. David Heinemeier Hansson explique pourquoi à Basecamp, ils ont maintenant décidé que les choses allaient si bien qu'ils gelaient les embauches.
• Comment décidons-nous quand itérer sur les choses et quand reconstruire ? Je me pose beaucoup cette question et j'ai maintenant rédigé quelques conclusions sur la façon d'améliorer les choses.

Aller plus loin…

• Stephen Ilardi explique pourquoi la technologie personnelle est déprimante.
• Mike Gifford partage ses réflexions sur la réduction des déchets de bureau, un sujet dont nous parlons rarement, mais il serait si simple d'améliorer la situation et de façonner un avenir dans lequel nous voulons toujours vivre.

Enfin, j'ai rédigé quelques notes personnelles sur le traitement des notifications Slack et sur les raisons pour lesquelles l'utilisation d'acronymes est une mauvaise idée. Si vous avez des idées à ce sujet, vous pouvez me répondre ici ou sur Twitter.

Nous espérons que vous avez apprécié cette mise à jour du développement Web. Le prochain est prévu le 16 mars. Restez à l'écoute.