Skip to content
Narration Interactive

Recettes de code

🚧 En construction

Section titled “🚧 En construction”

Cette bibliothèque de recettes sera développée progressivement tout au long du cours.

Principe des recettes

Section titled “Principe des recettes”

Au lieu d’enseigner exhaustivement Svelte, nous vous fournissons une bibliothèque de “recettes” :

  • Morceaux de code prêts à l’emploi
  • Bien documentés et commentés
  • Facilement adaptables
  • Couvrant les besoins les plus courants

Structure d’une recette

Section titled “Structure d’une recette”

Chaque recette suivra ce format :

  • 🎯 Ce que ça fait : Description concise
  • 💡 Quand l’utiliser : Cas d’usage concrets
  • 📱 Compatibilité : Navigateurs/devices supportés
  • 🔧 Le code : Code minimal fonctionnel
  • 🎨 Personnaliser : Comment adapter (paramètres à changer)
  • ⚠️ Pièges courants : Erreurs fréquentes et solutions
  • 🔗 Aller plus loin : Liens vers autres recettes ou ressources

Les 15 recettes prioritaires

Section titled “Les 15 recettes prioritaires”

Fondations (3)

Section titled “Fondations (3)”
  1. Composant interactif de base
  2. Afficher une liste dynamique
  3. Store global (état partagé)

Interactions (4)

Section titled “Interactions (4)”
  1. Drag and drop
  2. Détection de gestes (shake, swipe, long-press)
  3. Clavier et combos
  4. Input utilisateur (texte, slider, choix)

Feedback et polish (3)

Section titled “Feedback et polish (3)”
  1. Animations et transitions
  2. Sons et audio réactif
  3. Particules et effets visuels

Persistance et partage (2)

Section titled “Persistance et partage (2)”
  1. Sauvegarde locale (LocalStorage)
  2. QR Codes (génération et scan)

Avancé (3)

Section titled “Avancé (3)”
  1. Scroll narratif (ScrollTrigger)
  2. Timer et événements temporels
  3. Génération procédurale simple

Recettes bonus (selon besoins)

Section titled “Recettes bonus (selon besoins)”
  • Canvas et dessin 2D
  • Three.js basique
  • Upload et manipulation de fichiers
  • Export de données
  • Webcam et détection de mouvement
  • Reconnaissance vocale
  • Géolocalisation

Comment utiliser les recettes

Section titled “Comment utiliser les recettes”
  1. Identifiez votre besoin : Quelle interaction/fonctionnalité vous manque ?
  2. Trouvez la recette correspondante dans la liste
  3. Copiez le code et adaptez-le à votre contexte
  4. Testez et itérez : Modifiez les paramètres pour qu’ils correspondent à votre vision
  5. Comprenez le code : Posez des questions si quelque chose n’est pas clair

Règle importante

Section titled “Règle importante”

“Si tu ne peux pas expliquer ce que fait le code de la recette, demande d’abord à comprendre avant de l’utiliser.”