Blog winzana

La veille hebdo front-end/design #04

Rédigé par Jaufrey | Jul 13, 2023 6:15:00 AM

Vous le saurez, je suis un grand enfant, avec son lot de trucs préférés, et le 4 est mon chiffre (et ma couleur, le jaune-orangé. Voilà, c’est inutile, ça me fait plaisir).

Et cette quatrième édition contient beaucoup de ce que je préfère : du CSS, cadeau pour les 4 gros nerds de la feuille de style au fond (je vous vois et je vous aime 🫶). 

Les autres, ne partez pas, il y a aussi du matos pour vous ! 😉
Enjoy ! 😎

Design

  • UX / UI
    4 design principles I use every day to avoid bad UX and create products that work for everyone
    Quelques grands principes fondamentaux à opposer à toute décision de design avant de garder une idée. Je trouve ce genre de guidelines très enrichissantes, d’autant plus qu’elles restent très permissives et simples à garder en tête et assurent à elles-seules un certain niveau de qualité dans l’UX des produits qu’on conçoit.
  • UX / UI
    Tears of the Kingdom: how Nintendo improved (and ignored) UI issues
    Sans parler du fait que J’ADORE ce jeu, j’aime beaucoup voir ce genre d’analyse de game UI. On apprend beaucoup des problématiques propres à d’autres domaines, ça étend les horizons, et c’est enrichissant. Et ça révèle aussi, encore une fois, à quel point l’accessibilité est importante et souvent mal prise en compte dans le domaine numérique. On apprend de ses erreurs et de celles des autres …
  • Resources
    Typography
    Freefaces gallery
    Une explication très claire des pour et contre le dark mode avec un brin de vulgarisation scientifique.
  • Typography
    What’s your type ?
    Un article permettant de sélectionner entre plusieurs typographies de types bien différents celle qui compose l’article pour se rendre compte de comment celle-ci influence la lisibilité d’un texte. 
  • Branding
    The Guinness harp
    L’évolution du logo Guinness. C’est excellent de voir comment il a petit à petit changé vers un design minimaliste avant de revenir à son aspect plus détaillé actuel. Ça montre bien comment les tendances d’une époque influencent la création d’image de marque.

Front-end

  • CSS
    CSS only floating labels
    Un petit trick plutôt bien supporté à l’heure actuelle pour des labels flottants au-dessus des champs en pur CSS grâce au pseudo-sélecteur :placeholder-shown.
  • CSS 
    Offset parent and stacking context: positioning elements in all three dimensions
    Un article qui décompose bien les notions d’offset parent et de stacking context et qui aidera à coup sûr ceux qui luttent lors de l’utilisation d’un position: absolute ou d’un z-index à comprendre ce qui se passe (et à éviter ce bon vieux z-index: 1000000000000000000000 🤣) 
  • CSS
    Shines, Perspective, And Rotations: Fancy CSS 3D Effects For Images
    Des effets qui claquent pour vos images en CSS.
  • CSS
    New Viewport Units
    Enfin des unités de viewport qui permettent de prendre en compte les tiroirs de l’UI des navigateurs mobiles ! Vivement que tout ça soit bien supporté, ça aidera à régler un paquet de soucis avec beaucoup plus de simplicité qu’à l’heure actuelle.

Autre