pageIndex = 0 outOfVisibleViewPort = false
Une paire de mains prête à recevoir

Valider des props avec Vue.js

La déclaration des « props » avec Vue.js peut inclure plus que la simple définition des données transmises du composant parent au composant enfant. Voyons comment une validation plus complexe est déclarée.

pageIndex = 1 outOfVisibleViewPort = false
Un panneau rouge indiquant « Slots » dans l’obscurité.

Composants et « slots scopés » avec Vue.js

Il m’a fallu de nombreux exemples et beaucoup de pratique pour comprendre les « slots ». Qu’il s’agisse de « slots » simples, de « slots » nommés ou de « slots scopés », vous découvrirez qu’il s’agit d’une fonctionnalité puissante dans Vue. C’est parti !

pageIndex = 2 outOfVisibleViewPort = false
Photo de nuit dans une ville

Réduire le temps de génération avec Hugo par 2 sur Netlify

Lorsque vous commencez à avoir beaucoup d’articles sur un site web généré par Hugo, le nombre d’images traitées peut ralentir la génération jusqu’à atteindre le temps limite d’exécution par défaut. Bien que vous puissiez l’augmenter, cela ne suffit pas pour éviter de surconsommer les minutes de génération sur Netlify.

pageIndex = 3 outOfVisibleViewPort = true
Quelques boîtes aux lettres physiques de différents styles

Mise à jour d'un email avec Firebase Auth

Il y a quelques années, le processus de modification d’une adresse e-mail avec Firebase Authentification était simple, mais moins sécurisé. Avec Firebase 9, cela a changé et vous devez vérifier l’adresse e-mail lorsque vous la mettez à jour. Je vais vous montrer comment cela fonctionne.

pageIndex = 4 outOfVisibleViewPort = true
Une horloge dans la main de quelqu'un

Planifier les builds sur Netlify

La planification des tâches est un besoin courant dans le développement de logiciels. Avec mes blogs générés par Hugo, j'avais besoin d'une telle tâche pour automatiser le flux de publication de mes articles.

pageIndex = 5 outOfVisibleViewPort = true
Une boîte renversée de blocs LEGO

Mise en garde avec la déstructuration des props Vue

La déstructuration d’objets en JavaScript est une fonctionnalité très intéressante. L’utiliser avec Vue peut cependant prendre une tournure particulière… Nous allons nous pencher sur une mise en garde à ce sujet.

pageIndex = 6 outOfVisibleViewPort = true
Exemple de code

TypeScript et les bibliothèques tierces

Je souhaite partager cette astuce sur la technique à utiliser lorsque vous voulez typer les paramètres des méthodes qui dépendent de bibliothèques tierces. C’est parti !

pageIndex = 7 outOfVisibleViewPort = true
Exemple de code démontrant le concept

Comment créer un alias pour un composant Vue ?

Parfois, vous utilisez des bibliothèques tierces qui développent des composants utiles. Ce fut le cas pour moi avec VeeValidate. Mais les noms des composants peuvent parfois ne pas vous convenir ou respecter les règles de votre linter. Voyons comment résoudre l’un ou l’autre de ces problèmes.

pageIndex = 8 outOfVisibleViewPort = true
Deux baies d'aubépine mûres

L'aubépine : la plante du coeur

Arbuste très résilient que l’on trouve très facilement en France, c’est aussi une plante utile pour certains maux dont nous souffrons et une quantité incroyable de nourriture pour les oiseaux l’hiver.

pageIndex = 9 outOfVisibleViewPort = true
Un exemple de code avec l’utilisation ':key' hors d’un 'v-for'

Rafraichir les composants Vue sur un changement de route

Une bonne pratique lorsque la route actuelle change sur une application Vue est de rendre le composant de router-view unique en utilisant la propriété key. Comme décrit dans la documentation officielle, L’attribut spécial key est principalement utilisé comme une indication aidant l’algorithme du DOM virtuel de Vue à identifier les VNodes lors de la comparaison de la nouvelle et de l’ancienne liste de nœuds. Voyons comment il peut être utilisé avec vue-router.