// BLOG

screenshot

Svelte - 20 micro-projets

Après ma formation Fullstack JS effectuée en juin 2021 chez O'Clock, je souhaitais apprendre un framework JavaScript en autodidacte autre que React ou Angular, trop verbeux à mon goût. J'étais d'abord attiré par VueJS mais j'ai entre temps découvert le compilateur JavaScript Svelte et j'ai tout de suite accroché. Après avoir suivi quelques tutoriels en ligne, je me suis dis que ce serait bien de mettre mes nouvelles connaissances en application en réalisant une série de micro-projets Svelte.

Rédigé le 20.02.2022
Par Gilles Vauvarin

Svelte JavaScript Micro-projets

L'idée

L'idée m'ait venue en découvrant sur le web des défis JavaScript similaires consistant à réaliser 20, 50 ou 100 projets JavaScript. Je trouve cet exercice intéressant car il permet de mettre les mains dans le cambouis sans s'embarquer dans des projets trop longs ou trop complexes qui peuvent démotiver.

Le site officiel de Svelte dispose d'un REPL (read–eval–print loop) qui est une sorte de bac à sable prêt à l'emploi, dans lequel vous pouvez tester vos morceaux de code et voir le rendu instantanément. Cerise sur le gâteau, vous pouvez créer un compte pour enregistrer vos tests de code. J'utiliserai ce REPL pour développer et stocker les projets et je piocherai dans les listes de projets JavaScript trouvées sur le web pour les adapter en Svelte.

Les micro-projets

1- Changer la couleur d'arrière-plan

Défis : Changer la couleur d'arrière-plan de la page à chaque fois que l'on clique sur un bouton.

Solution :

  • Créer un tableau contenant plusieurs couleurs prédéfinies ou mieux, générer un code hexadécimal aléatoirement.

  • Mettre un évènement sur un bouton HTML qui appelle une fonction qui change la couleur d'arrière-plan appliquée à la balise <container>.

Notions Svelte utilisées :

Ce que j'ai appris :

  • Lorsque l'on travaille avec Svelte, intéragir directement avec le DOM via des méthodes de séléction comme getElementByID ou autre est une mauvaise pratique. Pour obtenir une référence vers un élément du DOM il est préférable d'utiliser l'instruction Svelte bind:this

2- Afficher des citations toutes les 5 secondes

Défis : Afficher des citations aléatoirement toutes les 5 secondes.

Solution :

  • Faire un appel sur une API de citations dans une fonction asynchrone et auto executable (IIFE).

  • Générer un indice aléatoire entre 1 et 10 et utiliser cet indice pour appeler les valeurs d'un élément de l'objet reçu de l'API.

Notions Svelte utilisées :

Ce que j'ai appris :

  • Lorsque l'on utilise une fonction asynchrone, on peut appeler dans le code HTML un block Await pour afficher un contenu alternatif tant que la promesse n'est pas résolue.

3- Compteur de caractères

Défis : Afficher instantanément le nombre de caractères d'un texte saisie dans un champ de formulaire.

Solution :

  • Binder la valeur saisie dans un textarea et déterminer sa taille.

  • Utiliser une déclaration réactive pour lier la taille du texte saisie avec la variable qui affiche le nombre de caractères.

Notions Svelte utilisées :

Ce que j'ai appris :

  • On peut lier très facilement la valeur d'une variable à la valeur d'une autre variable à l'aide des déclarations réactives $: var_a = var_b

4- Ouvrir une modale en cliquant sur un bouton

Défis : Créer une modale composée d'un titre et d'un texte. Cette modale s'ouvre lorsque l'on clique sur un bouton. Elle se ferme soit en cliquant sur une croix positionnée en haut à droite de la modale soit en cliquant à l'exterieur de la modale.

Solution :

  • Créer une modale et rendre sa propriété css display dynamique.

  • Utiliser l'élément spécial Svelte Window pour détecter le click en dehors de la modale.

Notions Svelte utilisées :

Ce que j'ai appris :

  • Utiliser l'instruction <svelte:window/> pour atteindre un événement de n'importe quel élément du DOM.

  • Utiliser une variable css pour rendre une propriété CSS dynamique.

5- Menu hamburger

Défis : Créer un menu hamburger qui apparait, disparait avec un effet de transition.

Solution :

  • Utiliser une variable css pour dynamiser les valeurs CSS des propriétés display et translate qui serviront à switcher sur l'icone et apparaître/disparaitre le menu.

  • Importer les icônes material de Google dans la balise head.

Notions Svelte utilisées :

Ce que j'ai appris :

  • Utiliser l'élément spécial <svelte:head> pour y importer une bibliothèque externe.

6- Solidarité avec l'Ukraine

Défis : Créer une petite animation en soutient symbolique pour le peuple Ukrainien et Russe.

Ce que j'ai appris :

  • Poutine est un mégalo dangeureux et criminel !

7- Notification flottante

Défis : Créer une notification flottante qui apparait puis disparait après un certain temps et qui peut se fermer manuellement.

Solution :

  • Faire apparaître la notification avec une transition en fonction de la valeur d'une variable booleène.

Notions Svelte utilisées :

Ce que j'ai appris :

  • Svelte permet d'intègrer une librairie pour effectuer des animations très simplement.

8- Parallax

Défis : Créer un effet de parallax au scroll entre deux éléments.

Solution :

  • Déterminer la position verticale de la fenêtre du navigateur et la "binder" à une valeur que l'on fera évoluer.

  • Appliquer un style css "transform" aux éléments du parallax

Notions Svelte utilisées :

  • Utiliser l'instruction <svelte:window/>

Ce que j'ai appris :

  • Svelte permet d'effectuer des animations très simplement.