Ma soumission pour le Frontend Challenge (décembre)

Ceci est une soumission pour Frontend Challenge - Édition de décembre, Glam Up My Markup: Winter Solstice

Ce que j'ai construit

Le site est en ligne ici : https://plutonium-239.github.io/dev.to-frontend-challenge/
Mon objectif était de rendre le HTML brut donné plus interactif ?, beau ? et utile ?. J'ai fait cela en ajoutant un style cohérent à toutes les sections, mettant en évidence les termes importants pour saisir le contenu plus rapidement tout en ajoutant plus de contraste. J'ai également optimisé le site pour une mise en page mobile et bien qu'il présente moins d'interactions, le site est tout aussi bien thématique et utile.

Démo

Le code source est accessible au public sur https://github.com/plutonium-239/dev.to-frontend-challenge

Voyage

Thématisation/CSS

Je voulais choisir un thème de ciel nocturne, car le solstice d'hiver fait connaître à l'hémisphère nord le jour le plus court de l'année. Alors, je me suis souvenu de notre vieil ami particules.js. Sauf que maintenant, il s'est transformé en tsParticles avec un tas de correctifs de fuites de mémoire, d'optimisations et une réécriture en dactylographié. Cela constitue l'arrière-plan de la page. Je l'ai configuré pour ne pas être distrayant tout en ayant l'air vivant et esthétique. Obtenir cette configuration a été une douleur à laquelle je ne m'attendais pas. La dernière version contient un tsparticles.bundle.js qui est censé contenir tout ce dont vous avez besoin et exporte les valeurs globales afin que vous puissiez commencer sur une seule ligne, mais ce n'était pas le cas. J'ai essayé d'appeler manuellement sa configuration en utilisant tsparticles.engine.js en vain. Cela souffre d’un manque de documentation utile. J'ai également essayé la version slim qui avait un exemple d'utilisation mais cela n'a pas fonctionné. J'ai simplement essayé de remplacer la version par une ancienne (car ce dont j'avais besoin était principalement un comportement de base et non leurs nouvelles fonctionnalités) et j'ai décroché l'or avec la 1.43.1. Vous vous attendriez à ce que suivre les instructions du fichier Lisez-moi vous permette de vivre, mais ce n'était pas le cas ici.

Le choix de la palette de couleurs était une sorte de drôle de coïncidence. J'avais vu une capture d'écran d'un post/meme tumblr et j'avais vraiment aimé les couleurs qu'il contient. J'ai littéralement recherché une image de plus haute résolution via Google Lens et extrait ses couleurs. Cela m'a fourni 3 couleurs de base (surface, primaire, active). Pour les autres couleurs, je voulais qu'une soit dans une teinte rouge-rose et une autre verdâtre/turquoise. J'ai choisi quelques couleurs dans cette gamme et j'ai fait correspondre la teinte afin qu'elle soit cohérente avec la palette de couleurs actuelle. J'ai découvert d'excellents outils comme Colormind pour essayer des palettes de couleurs alternatives.

En ce qui concerne la typographie, je connais la police Readex Pro depuis un certain temps maintenant et je l'aime beaucoup. Elle sert à la fois de police d’affichage pour les titres et également de police de base pour le texte normal. J'en ai essayé quelques autres (Noto, Raleway) mais j'ai fini par opter pour Readex Pro. J'avais également pensé à utiliser une police à espacement fixe pour tout le texte, mais le contenu de cette page n'était tout simplement pas compatible avec ce style.

Ensuite, pour les animations pilotées par défilement ! Je voulais les utiliser sur de vrais sites Web depuis un certain temps maintenant, et je les ai inclus dans la table des matières et dans le titre. Il y avait quelques problèmes avec Firefox (toujours) ne prenant pas en charge la plage d'animation (et les animations pilotées par défilement elles-mêmes étant désactivées par défaut derrière un drapeau¹), j'ai donc dû implémenter un hack -ish fix (mais vous devez toujours activer le drapeau).

Contenu/HTML (via JS)/CSS

En ce qui concerne le contenu, je l'ai fait de deux manières :

1. Ajout de surbrillances au texte via JS - essentiellement nécessaire pour remplacer innerHTML, ce qui ne semble pas bien, mais ne pas pouvoir modifier le HTML est assez restrictif. J'ai également ajouté une image à l'introduction en utilisant JS en insérant un élément. J'ai fait cela parce que je voulais y ajouter un petit effet de fondu. Au départ, j'avais fait cela via un arrière-plan CSS sur le ::after de la section, mais en faisant en sorte que le fondu soit cohérent (c'est-à-dire que le bord supérieur de l'image ne soit pas visiblement net) sur différentes tailles de bureau et de mobile s'est avéré impossible. J'ai donc dû ajouter un nouvel élément dans la section, puis styliser le pseudo-élément ::after contraint à l'image elle-même - ce qui fonctionne très bien.
2. Ajout d'images aux célébrations via CSS - Pour chacune des quatre célébrations, j'ai trouvé des images appropriées à partir de diverses sources (créditées) et je les ai ajoutées via des pseudo-éléments. Je leur ai donné un joli style de parallaxe et j'ai également ajouté une image complète lors de l'interaction en survol. En raison de la diversité des images, j'ai fait de mon mieux pour en trouver des haute résolution, puis je les ai redimensionnées pour avoir une largeur uniforme de 800 px à l'aide d'ImageMagick. J'ai implémenté cela de manière intelligente en utilisant la classe .celebration pour définir le cadre et en utilisant des variables CSS pour chaque célébration particulière pour définir l'URL de l'image (et le texte des crédits).

Pour la page des traditions, j'ai remplacé les marqueurs de liste par un style @counter personnalisé (et j'ai appris à les utiliser) - c'est une fonctionnalité plutôt astucieuse !

Interaction : J'ai ajouté un indicateur de défilement dans la table des matières à l'aide de l'API IntersectionObserver. C'était assez simple : vérifiez l'intersection, définissez une classe et c'est tout !

Il y a également un effet de survol sur les éléments de la liste de célébration, qui révèlent toute l'image respective. Je l'ai fait via CSS en définissant une image comme contenu de ::after et en la rendant visible au survol.

?J'aurais peut-être aussi ajouté un petit secret sympa à la fin de la page?

Cela utilise l'API Canvas et un écouteur de défilement. Ça a l'air plutôt cool, mais je n'étais pas sûr à 100% si cela s'intégrait au reste du style.

Conclusion

Je ne suis pas un UI designer/webdev de profession. En fait, je suis un chercheur en ML. Mais j'ai conçu des applications/sites Web et j'aime être créatif !

Donc, quand j'ai vu le post du challenge, j'ai trouvé que c'était intéressant mais je ne pensais pas que j'allais le prendre trop au sérieux. Cependant, j'ai vu par hasard la capture d'écran mentionnée ci-dessus et un site Web utilisant un ancien effet particules.js, et ces deux-là ont dû cliquer à un moment donné. Appelez ça un miracle de Noël ! ?

Je n'ai pas vraiment d'étapes futures en tête, j'ai l'impression d'avoir fait ce que j'avais prévu de faire et plus encore.

En examinant les soumissions de certains autres, je pense qu'il n'était pas si clair que le HTML ne pouvait pas être modifié directement. J'ai suivi cette règle définie et j'ai uniquement ajouté une balise de script et des balises de lien pour CSS - sans modifier le contenu du balisage réel.

Le code est disponible sous licence MIT.

---

1. Pour toute personne utilisant un navigateur basé sur Firefox (par exemple Zen), activez layout.css.scroll-driven-animations.enabled dans about:config ↩

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!