Fermer

novembre 23, 2018

Design juste à temps et polices de remplacement variables


À propos de l'auteur

Anselm est un développeur front-end indépendant qui se soucie des expériences durables et des choix éthiques dans la vie. Il écrit le WDRL et est co-fondateur…
Pour en savoir plus sur Anselm

Mises à jour majeures, nouveaux outils, précieuses leçons apprises – dans sa liste de lectures mensuelles, Anselm résumait tout ce qui était nouveau et important à connaître pour les développeurs Web en novembre.

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

Maintenant, pensez aux sites Web que vous visitez et si vous aimez être là-bas, lire ou même contribuer au contenu du service. . À mon avis, c’est quelque chose que Instagram réussit très bien à faire. Un bon design correspond aux objectifs de votre entreprise et s’adapte aux attentes des visiteurs, ce qui les rassure et leur permet de se connecter au produit. Les solutions standard, cependant, peuvent être pratiques et agréables, mais elles auront toujours cette sensation anonyme qui empêche les gens de vraiment de prendre soin de votre produit. C’est entre nos mains de créer une meilleure expérience.

Actualités

  • Oui, Firefox 63 est ici mais qu’apporte-t-il? Les composants Web prennent en charge les éléments personnalisés, notamment les extensions et le Shadow DOM. La prise en charge des requêtes de médias de préférence-en-mouvement est également disponible, les outils de développement ont été dotés d'un éditeur de polices permettant de jouer facilement avec la typographie Web et l'inspecteur de l'accessibilité est activé par défaut. L'élément img prend désormais en charge l'attribut de décodage qui peut obtenir les valeurs sync async ou auto le temps de décodage préféré pour le navigateur. Flexbox a également eu quelques améliorations, supportant maintenant les propriétés gap ( row-gap column-gap ). 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és. Wow, quelle version!
  • React 16.6 est sorti – cela ne semble pas être une grosse nouvelle, n'est-ce pas? Cette mise à jour mineure apporte React.lazy () une méthode que vous pouvez utiliser pour effectuer le fractionnement de code en encapsulant une importation dynamique dans un appel à React.lazy () . Un grand pas en avant pour de meilleures performances.
  • La dernière version de Safari Tech Preview 68 apporte une prise en charge et modifie le comportement par défaut des liens dont target = "_ blank" pour obtenir le rel = “noopener” en tant qu'attribut implicite. Elle inclut également la nouvelle requête de média préférant-color-scheme qui permet aux développeurs d'adapter les sites Web aux paramètres de mode clair ou sombre de macOS.
  • Dorénavant, PageSpeed ​​Insights, probablement le plus utilisé L’outil d’analyse des performances de Google, est désormais alimenté par le projet Lighthouse que beaucoup d’entre vous ont déjà utilisé. Une belle itération de leur outil qui le rend beaucoup plus précis qu'auparavant.

Généralités

  • Explorez les 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 proposée par l'équipe Web de Google aux développeurs.
  • Peu importe ce que vous pensez de Apple Maps – je suppose que la plupart d'entre nous avons vécu des moments de frustration – ] cette comparaison sur les données cartographiques qu’ils utilisaient jusqu’à présent et les données qu’ils collectent actuellement pour leurs cartes réaménagées sont fascinantes. Je suis sûr que le niveau de détail accru aidera beaucoup de gens dans le monde entier. Imaginez comment les architectes paysagistes pourraient utiliser cela ou comment les secouristes pourraient bénéficier de ce niveau de détail après un tremblement de terre, par exemple
 Web.dev
Des temps de chargement rapides à l'accessibilité – web.dev [ vous aide à améliorer votre site.

HTML & SVG

  • Andrea Giammarchi a écrit une bibliothèque polyfill pour Custom Elements qui nous permet d'étendre les éléments intégrés à Safari . C'est très agréable, 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 existe aussi un petit polyfill pour les autres navigateurs.
  • Les éléments personnalisés sont encore très nouveaux et le navigateur le support varie. C'est pourquoi ce projet html-parsed-element est utile, car il fournit une classe d'éléments personnalisés de base avec une méthode parsedCallback fiable.

JavaScript

UI / UX

  • Comment construisez-vous une palette de couleurs? Steve Schoger de RefactoringUI partage une grande approche qui répond aux besoins réels .
  • L'article de Matthew Ström intitulé « Le design juste à temps » mentionne une solution permettant de minimiser la déconnexion entre les produits. conception et ingénierie de produit. Il s’agit d’adopter la méthode du design juste à temps. Mon équipe actuelle était très enthousiaste 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 descriptifs de conception, tout en gardant tout le monde sur la même page durant le processus.
  • Les modèles mentaux expliquent notre vision du monde. Teresa Man a expliqué comment nous pouvions appliquer des modèles mentaux à la conception de produits et en expliquer l'importance.
  • Shelby Rogers explique comment nous pouvons créer des pages d'erreur 404 .
 Building Your Palette de couleurs
Steve Schoger se penche sur les palettes de couleurs qui fonctionnent réellement . ( Crédit image )

Outillage

  • Le générateur de palette de couleurs Palx vous permet de saisir une valeur hexadécimale de base et de générer une palette de couleurs complète qui en découle.

Sécurité

19659007] Cet outil Python est un excellent utilitaire de détection XSS .
  • Svetlin Nakov a écrit un livre sur la Practical Cryptography for Developers 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 affirme qu’ils révéleraient qui paierait les publicités politiques. Maintenant, VICE étudie cette nouvelle fonctionnalité et se présente comme l’un des 100 sénateurs américains actuels pour diffuser des annonces "payées par eux". C'est assez effrayant de voir comment une défaillance de sécurité donnant plus de pouvoir aux utilisateurs, comme prévu, peut changer la politique mondiale.
  • Confidentialité

    • Je n'aime pas les liens vers des articles payants et soumis à des restrictions, mais celle-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 de modèles 3 pour atteindre le 24 7 de nombreuses personnes voulaient le vérifier et une entreprise qui gagne de l'argent en fournissant des données de géolocalisation capturées sur un smartphone données de localisation des travailleurs autour des usines de Tesla pour confirmer si cela pourrait être vrai. Il est également triste de constater à quel point il est facile de suivre une personne sans consentement, même s’il s’agit plus d’un cas de surveillance de masse que de suivi individuel.

    Web Performance

    • Addy Osmani partage une étude de cas sur les performances de Netflix visant à améliorer Time to-Interactive du service de streaming. Cela inclut la commutation de React et d'autres bibliothèques vers du code JavaScript pur, la pré-extraction de HTML, de CSS et de JavaScript (React), ainsi que l'utilisation de React.js du côté du serveur. C'est assez intéressant de voir autant d'approches non conventionnelles et leurs avantages. Mais souvenez-vous que ce qui fonctionne pour les autres ne doit pas nécessairement être l'approche idéale pour votre projet, alors prenez-le davantage pour source d'inspiration que pour le copier aveuglément.
    • Harry Roberts explique tous les détails qu'il est important de connaître sur CSS. et performances du réseau . Une collection complète qui fournit également des astuces très intéressantes lorsque vous avez des scripts async dans votre code.
    • J'aime beaucoup la petite application ImageOptim permettant d’optimiser par lots mes images pour la diffusion Web. Mais maintenant, il y a une impressionnante application Web appelée «Squoosh» qui vous permet d'optimiser les images parfaitement dans votre navigateur Web et, en prime, vous pouvez également redimensionner l'image et choisir la compression à utiliser, y compris mozJPEG et WebP. . Réalisé par l'équipe de Google Chrome.

    CSS

     Refonte de votre produit et de votre site Web en mode sombre
    Comment concevoir le mode sombre tout en maintenant l'accessibilité, la lisibilité et la cohérence de votre marque? Andy Clarke partage de précieux conseils . ( Crédit d'image )

    Work & Life

    Au-delà de…

    • Neil Stevenson sur Steve Jobs, créativité et 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 nous explique sous différents angles comment nous pourrions travailler, que faire de notre vie et pourquoi la raison d’être importe pour beaucoup d’entre nous.
    • Ryan Broderick décrit ce que nous avons fait. en inventant l'internet. Il conclut que tout ce radicalisme dans le monde, ces opinions politiques étranges, sont tous dus à l'invention des médias sociaux, du logiciel de chat et à la culture (pas si subtile) de promotion et d'adhésion à toutes les mauvaises choses qui se passent dans notre société. Rappelez-vous 4chan, Reddit, et des services similaires, mais aussi Facebook et al? Ils contribuent et embrassent non seulement les bonnes idées, mais aussi souvent les idées stupides, voire nuisibles. “ C'est ainsi que nous avons radicalisé le monde ” est une histoire triste à lire, mais bien écrite et avec de nombreuses pensées inspirantes sur la façon dont nous façonnons la société grâce à la technologie.
    • Un autre lien sur la consommation d'énergie de Bitcoin, mais il montre que l'exploitation minière de Bitcoin pourrait à elle seule augmenter 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. Maintenant
    • 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 très peu de pays ont une nature très sauvage, offrant aux animaux et aux espèces rares un lieu de vie, offrant aux humains un moyen d'explorer la nature, de se détendre, de vivre des aventures.
    • Nous vivons vraiment dans des endroits passionnants. fois, mais cela me rend triste de lire que, au cours des quarante dernières années, la population faunique 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 suis vieux, beaucoup d'animaux que je connaissais et voyais dans la nature n'existeraient plus d'ici là, et la prochaine génération d'humains ne pourra plus les voir que dans un musée. Les raisons ne sont pas tout à fait claires, mais le changement climatique pourrait être une chose, et l'expansion sans cesse croissante de l'homme dans les zones de faune sauvage y contribue probablement également beaucoup.