Code In the dark : Système de notation de BastiUI

Je vous propose aujourd'hui un petit résumé du challenge qui a été organisé par BastiUI et Benjamin Code. Ce challenge est un code in The Dark où l'objectif est de coder sans pouvoir regarder le rendu.

Pour ce challenge c'est BastiUI qui s'est chargé de la maquette en laissant les abonnés choisir les styles visuels. On se retrouve donc avec un système de notation en mode obscure qui utilise le style Neo Memphis avec un système de notation basé sur des smileys animés. La maquette a été réalisée sur figma et un système de prototype permet de voir les animations pensées pour les différents éléments. La principale difficulté de ce challenge repose sur la création de ces smileys animés car il y a des éléments particuliers comme la bouche ou les sourcils qui vont demander un positionnement précis, ce qui n'est pas forcément évident sans avoir droit d'utiliser le rendu.

Je vous invite d'ailleurs à essayer de faire ce challenge avant de regarder la vidéo. C'est un bon moyen de pratiquer l'HTML / CSS.

Ce challenge est intéressant car il permet de mettre en pratique ce que l'on connaît et de questionner nos connaissances vu qu'on ne peut pas se reposer sur le rendu. On est obligé de se baser sur ce que l'on sait sur les propriétés et leurs effets. Dans mon cas voici les petits détails que j'ai pu retenir de ce challenge :

• Une bordure transparente laisse voir la couleur de fond de l'élément plutôt que de créer un espace qui permettrait de voir la couleur de fond des éléments en dessous
• Pour créer un effet de double bordure, se baser sur un double box-shadow est plus simple que d'utiliser 2 pseudos éléments.
• Un pseudo élément avec un z-index à -1 apparaitra sous l'élément courant (y compris sous le fond). Par contre si on utilise un isolation: isolate sur l'élément parent alors le pseudo élément sera au dessus du fond de l'élément parent.

Pour les plus curieux d'entre vous voici le résultat obtenu aux différentes étapes du challenge sur CodeSandbox