Illustration 2025 des 24 jours de web : le père Noël semble perdu, assis sur son traîneau, penché sur une feuille de papier sur laquelle est écrit "error 404 road not found" (traduction : erreur 404, route non trouvée).
Au sol, des paquets cadeaux sont dispersés avec des inscriptions : "HTML", "CSS" ou encore "JS".
À la gauche du père Noël, un bonhomme de neige avec les inscriptions "<head>" sur sa tête, "<body>" sur la partie haute de son corps et "<footer>" sur la partie basse (référence aux balises de structuration d'une page HTML).
Derrière le bonhomme de neige, un lutin ouvre un cadeau et y découvre une feuille avec le texte "500 internal server error" (traduction : 500, erreur interne du serveur).
Sur la droite de l'illustration, deux rennes, dont un avec un lutin sur le dos, attendent patiemment ; les sangles qui les relient au traîneau sont décorées avec des 0 et des 1 (référence au langage binaire).
Sur la gauche de l'illustration, deux lutins se battent : le premier, avec l'inscription "main" (mot anglais, référence la branche principale sur git) utilise une bûche en guise de boucler ; le second lui saute dessus en disant "git push force" (commande git pour forcer l'envoi de changements sur la branche principale).
Le décor est enneigné dans des couleurs blanc et bleu pâle, avec une rangée de sapin en arrière-plan. On distingue aussi des panneaux de signalisation avec les inscriptions "RSS", "humans.txt" et "Susy Rose".
C’est parti pour 24 jours de web !
Notre calendrier de l’avent revient pour sa 13e édition : www.24joursdeweb.fr
Un grand merci à Susy Rose, qui a réalisé une belle illustration pleine de références.
01.12.2025 07:23
👍 13
🔁 16
💬 1
📌 0
Démystifions la norme européenne sur l’accessibilité numérique - Alain Vagner, Dominique Nauroy
YouTube video by Voxxed Days Luxembourg
Vous avez déjà entendu parler de la norme européenne sur l'accessibilité numérique et vous voulez en savoir plus sur le sujet ? @dnauroy.bsky.social et Alain Vagner vous expliquent tout, dans cette présentation réalisée à l'occasion des Voxxed Days Luxembourg en 2025.
gd.lu/81PgJ0
#a11y #luxembourg
31.07.2025 10:11
👍 4
🔁 1
💬 1
📌 0
RAWeb : création du référentiel d’accessibilité web luxembourgeois
Alain Vagner et Dominique Nauroy du SIP du Grand-Duché de Luxembourg reviennent sur la création du RAWeb, le nouveau référentiel d’accessibilité luxembourgeois.
#RGAA : suffisant pour auditer l'accessibilité ? 🤔
Le RGAA n'intègre pas encore les critères de la norme européenne EN 301 549, mais le RAWeb, oui.
Conçu par @accessibilite.public.lu avec Access42, découvrez l'intérêt de ce référentiel pour les audits.
a42.fr/itw-raweb
#a11y #RAWeb #EN301549 #EAA
04.11.2025 08:42
👍 3
🔁 2
💬 1
📌 0
🎯 Conclusion :
Avec effectScope et getCurrentScope, vous avez un contrôle précis sur la réactivité. Ces outils sont essentiels pour des projets Vue.js complexes afin d’assurer des performances optimales et d'éviter les fuites mémoire.
#VueJS #Réactivité #Performance
17.12.2024 17:19
👍 0
🔁 0
💬 0
📌 0
6️⃣ Résumé des avantages
✅ effectScope :
Regroupe plusieurs effets réactifs dans une même portée.
Facilite le nettoyage avec scope.stop().
✅ getCurrentScope :
Vérifie la portée active pour des effets conditionnels.
Combinez-le avec onScopeDispose pour un nettoyage automatique.
17.12.2024 17:19
👍 0
🔁 0
💬 1
📌 0
5️⃣ Quand utiliser effectScope ?
Dans des composables pour éviter les fuites de mémoire.
Pour regrouper plusieurs effets réactifs complexes dans une même portée.
Lorsque vous travaillez avec des API externes (ex. : setInterval, fetch) pour centraliser le nettoyage.
17.12.2024 17:18
👍 0
🔁 0
💬 1
📌 0
import { getCurrentScope, onScopeDispose } from 'vue';
if (getCurrentScope()) {
onScopeDispose(() => console.log("Scope nettoyé !"));
}
Pourquoi ? Cela permet d’écrire des composables qui ne dépendent pas d’un composant parent pour le nettoyage.
17.12.2024 17:18
👍 0
🔁 0
💬 1
📌 0
4️⃣ getCurrentScope : Un outil complémentaire
getCurrentScope vous permet de vérifier si vous êtes dans une portée active (scope). Utile pour conditionner l’ajout d’effets.
17.12.2024 17:17
👍 0
🔁 0
💬 1
📌 0
👉 Ici, scope.stop() est appelé lorsque le composant est démonté, nettoyant automatiquement les effets comme les setInterval.
17.12.2024 17:17
👍 0
🔁 0
💬 1
📌 0
👉 Ici, scope.stop() est appelé lorsque le composant est démonté, nettoyant automatiquement les effets comme les setInterval.
17.12.2024 17:17
👍 0
🔁 0
💬 0
📌 0
import { effectScope, ref, onScopeDispose } from 'vue';
export function useScopedCounter() {
const scope = effectScope();
const count = ref(0);
scope.run(() => {
setInterval(() => count.value++, 1000);
});
// Nettoyage auto
onScopeDispose(() => scope.stop());
return { count };
}
17.12.2024 17:16
👍 0
🔁 0
💬 1
📌 0
3️⃣ Utilisation dans les composables
effectScope est particulièrement utile dans les composables pour éviter des effets qui continuent de vivre après le démontage d'un composant.
17.12.2024 17:14
👍 0
🔁 0
💬 1
📌 0
Lorsque scope.stop() est appelé, tous les watchers et effets sont nettoyés. ✅
17.12.2024 17:07
👍 0
🔁 0
💬 1
📌 0
2️⃣ Création d’un effectScope
import { effectScope, ref, watch } from 'vue';
const scope = effectScope();
scope.run(() => {
const count = ref(0);
watch(count, (newVal) => console.log("Count:", newVal));
count.value++;
});
Résultat : Les effets sont contenus dans scope.
17.12.2024 17:07
👍 0
🔁 0
💬 1
📌 0
1️⃣ C’est quoi un effectScope ?
effectScope permet de regrouper des effets réactifs (comme des watch, computed, ou ref) dans un espace isolé. Cela facilite :
Le nettoyage des réactivités.
L’évitement des fuites de mémoire.
👉 Parfait pour des composables complexes ou des effets globaux temporaires.
17.12.2024 17:05
👍 0
🔁 0
💬 1
📌 0
💡 Vue.js : Optimisation de la réactivité avec effectScope et getCurrentScope ⚙️
Saviez-vous que Vue.js vous permet de contrôler précisément le cycle de vie des effets réactifs ? Avec effectScope, dites adieu aux fuites de mémoire ! 🔍
🧵 Thread avancé sur un sujet puissant :
17.12.2024 17:05
👍 0
🔁 0
💬 2
📌 0
Nuxt Nation 2024: Daniel Roe - Magically Optimising your fonts
Daniel Roe, a leader in the Nuxt community, presents innovative ways to optimize fonts in web applications:• Font Optimization Techniques: Discover strategie...
Learn about web font optimization using new open-source tools like fontaine and unifont, and how @nuxt.com Fonts works with these for better performance.
By the one and only @danielroe.dev. 💫
https://youtu.be/D3F683UViBY
15.12.2024 22:59
👍 8
🔁 3
💬 0
📌 0
🎯 Résumé :
Suspense facilite le rendu différé pour des composants ou données asynchrones.
Associez-le à defineAsyncComponent pour charger des composants dynamiques.
Divisez votre appli en plusieurs Suspense pour garder une UI réactive et rapide.
Prêt à essayer ? 🚀
#VueJS #DéveloppementWeb #Suspense
15.12.2024 11:39
👍 0
🔁 0
💬 0
📌 0
Fournissez des fallbacks clairs et utiles : Une bonne UI de chargement améliore l'expérience utilisateur.
Gérez les erreurs : Utilisez une combinaison de try-catch et de slots conditionnels pour afficher des messages en cas d'échec.
15.12.2024 11:38
👍 0
🔁 0
💬 1
📌 0
5️⃣ Bonnes pratiques avec Suspense
Chargez uniquement ce qui est nécessaire : Ne mettez pas tout dans un seul Suspense. Divisez les sections de votre UI.
15.12.2024 11:37
👍 0
🔁 0
💬 1
📌 0
<template>
<Suspense>
<template #default>
<div>
<ComponentA />
<ComponentB />
</div>
</template>
<template #fallback>
<p>Chargement de tout...</p>
</template>
</Suspense>
</template>
👉 Pour charger plusieurs sections de votre page en mm tps.
15.12.2024 11:36
👍 0
🔁 0
💬 1
📌 0
4️⃣ Gestion avancée avec plusieurs composants asynchrones
Suspense peut gérer plusieurs enfants asynchrones. Il attend que toutes les promesses soient résolues avant d’afficher le contenu.
15.12.2024 11:35
👍 0
🔁 0
💬 1
📌 0
👉 Combinez ce composant avec Suspense pour gérer le chargement de manière fluide.
15.12.2024 11:34
👍 0
🔁 0
💬 1
📌 0
3️⃣ Rendre des composants asynchrones avec defineAsyncComponent
Pour utiliser Suspense, créez un composant asynchrone avec defineAsyncComponent :
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./MyAsyncComponent.vue')
);
15.12.2024 11:34
👍 0
🔁 0
💬 1
📌 0
👉 Comment ça marche ?
Le slot #default contient le contenu principal (asynchrone).
Le slot #fallback affiche une UI de chargement jusqu'à ce que la promesse soit résolue.
15.12.2024 11:34
👍 0
🔁 0
💬 1
📌 0
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<p>Chargement...</p>
</template>
</Suspense>
</template>
15.12.2024 11:33
👍 0
🔁 0
💬 1
📌 0
Parfait pour les composants asynchrones comme les requêtes API. 🚀
15.12.2024 11:33
👍 0
🔁 0
💬 1
📌 0
