excuse my french.dev

veille front-end & ux (avec un accent)

Retour vers la liste des articles

Excuse My French Dev #6 : Hacktoberfest, du fun avec CSS, des expériences UX mémorables et Games of Code

La bannière officielle de Hacktoberfest 2021 sur laquelle il est écrit en orange Hacktoberfest 2021 dans un style moderne d'une typographie médiévale
source: Hacktoberfest

Excuse My French Dev prend des airs d'automne avec Hacktoberfest qui fête l'open-source ! On s'amuse ensuite avec CSS pour créer des animations, des dégradés avec des textures granuleuses (pas sûre que ça se dise !) et la poursuite de notre réflexion sur l'émerveillement dans l'expérience utilisateur. Avec ce gros programme, il ne reste plus qu'à se détendre en explorant Games of Code en sirotant un café à la cannelle ou en mangeant de la tarte à la citrouille (je prends l'automne vraiment à coeur...).

Voilà les cinq liens "coup de coeur" de la semaine :

  1. Hacktoberfest 2021 Avez-vous entendu parler de Hacktoberfest ? Les artistes ont Inktober, les codeur.se.s ont Hacktoberfest ! Un mois dédié à la promotion de l'open-source avec toute une série de projets auxquels contribuer. L'initiative est une porte d'entrée pour ceux et celles qui ont toujours voulu tenter l'expérience sans jamais avoir osé. Je pense m'amuser un peu avec Style Stage pour pratiquer CSS et me détendre un peu après mon dernier projet React JS.
  2. An Interactive Guide to Keyframe Animations ("Un guide interactif pour les animations @keyframe"). Josh Comeau est une de mes personnalités favorites pour étudier CSS. Les explications sont toujours claires, et ludiques grâce à de chouettes illustrations animées. Ici, il s'atelle aux animations @keyframes en reprenant les bases puis en montrant progressivement tout le potentiel (et la complexité) de cette règle.
  3. Grainy gradients ("Dégradés avec texture de grain"). J'aime beaucoup l'utilisation de textures dans les sites web, l'ajout de bruit par exemple, qui donnent plus de "sensorialité" au design. Dans cet article, on apprend à le faire en mélangeant un peu de SVG et de CSS. Et si on veut ajouter un peu d'animation, il est toujours possible de compléter ce tutoriel avec un autre article du même site.
  4. Beyond delight; the memorable experience framework ("Au-delà de l'émerveillement: la structure pour une expérience mémorable"). Cet article poursuit la réflexion engagée la semaine dernière sur l'émerveillement dans l'expérience utilisateur. Le postulat de l'article incrit l'usabilité, la fiabilité et le plaisir comme admis par l'utilisateur.rice et donc pas suffisants pour créer une expérience mémorable.
    A memorable experience is a step above a delightful one. It enhances the sense of meaning, connection, and wellbeing in people. It’s not about the UI, but the user.
    ("Une expérience mémorable est une étape au-dessus d'une expérience merveilleuse. Elle met en valeur l'impression d'avoir du sens, de la connexion et de participer au bien-être chez les gens. Il ne s'agit pas d'interface utilisateur, mais d'utilisateur.rice.") Pour créer une expérience mémorable, Audree Lapierre propose le modèle PERMA, acronyme pour les cinq points suivants : émotions positives ("Positive emotions"), engagement ("Engagement"), relations ("Relationships"), signification ("Meaning") et accomplissements ("Accomplishments"). Chacun de ses points sont revus en détails pour une lecture qui change définitivement sa manière de percevoir l'expérience utilisateur.
  5. Game of Codes Et si les technologies front-end étaient des pays ? Michał s'est amusé à créer une carte du monde de ces technologies dans lequel la surface de chaque pays est calculée en fonction du nombre de téléchargements. C'est un monde bien évidemment dominé par l'Empire React... Un projet avec un haut niveau de "nerdiness" et c'est pour ça qu'on en redemande encore !

And that's it! A la semaine prochaine !