DEV Community: MandyTrl

React : un useCookie custom sans dépendance externe

MandyTrl — Fri, 22 Aug 2025 14:21:12 +0000

Il est courant de vouloir persister un état entre les sessions. Le localStorage est souvent utilisé, mais parfois les cookies sont plus adaptés : partage entre onglets, configuration serveur, ou SEO côté Next.js. Dans cet article, je propose un useCookie 🍪 maison , sans dépendance externe, capable de gérer les cookies trop longs grâce au chunking.

Pourquoi ne pas utiliser de librairie ? Tout simplement parce que tout se gère très bien de façon manuelle, cela permet également de mieux comprendre la mécanique des cookies et surtout on évite ainsi une dépendance supplémentaire dans le projet.

Les étapes

Créer un hook custom qui va pouvoir gérer les cookies (synchronisation entre l'état en mémoire et les cookies du navigateur)
Créer un helper qui va pouvoir lire et écrire les cookies dans le navigateur
Implémenter le hook dans un composant

Création du hook custom

Le hook useCookies retourne deux éléments :

la valeur actuelle du cookie
et la fonction qui va modifier le cookie setValueAndCookie.

Le hook s’appuie sur notre helper externe (détaillé plus bas) pour lire et écrire les cookies dans le navigateur.

Si le cookie n’existe pas encore, le hook l’initialise avec la valeur fournie (initialValue). Sinon, il tente de lire et parser la valeur existante. On évite de parser inutilement si la valeur est une string.

Pour plus de flexibilité, le hook accepte également un objet options (CookieOptions) permettant de définir entre autres le path, la durée (maxAge) et le mode sécurisé (secure).

L’initialisation se fait grâce à une fonction passée à useState, qui n’est exécutée qu’au premier rendu du composant. Cela permet de ne pas relire et parser le cookie à chaque re-render.

Comme on ne connaît pas le type de la valeur stockée, on utilise ici un type générique <T> pour que le hook reste flexible et typé.

export const useCookies = <T,>(
  key: string,
  initialValue: T,
  options?: CookieOptions
): [T, (value: T) => void] => {
  const [value, setValue] = useState<T>(() => {
    const storedCookie = cookieHelper.getItem(key);
    const initialValueIsString = typeof initialValue === 'string';

    if (storedCookie !== null) {
      try {
        return initialValueIsString ? (storedCookie as T) : (JSON.parse(storedCookie) as T);
      } catch {
        throw new SyntaxError(`Le cookie "${key}" est invalide ou mal formé.`);
      }
    }

    const valueToStore = initialValueIsString ? String(initialValue) : JSON.stringify(initialValue);

    cookieHelper.setItem(key, valueToStore, options);

    return initialValue;
  });

  const setValueAndCookie = (newValue: T) => {
    setValue(newValue);

    const valueToStore = typeof newValue === 'string' ? newValue : JSON.stringify(newValue);
    cookieHelper.setItem(key, valueToStore, options);
  };

  return [value, setValueAndCookie];
};

Création du helper

Pour centraliser et organiser la logique, on va créer un fichier à part dédié à la gestion des cookies.
Ce helper sera découpé en 4 parties :

Préparer la valeur et ses options (durée de vie, sécurité, chemin, etc.)
Lire un cookie existant (qu’il soit simple ou découpé en plusieurs morceaux, appelés chunks)
Écrire un nouveau cookie (en un seul bloc ou en plusieurs chunks si sa taille dépasse la limite autorisée)
Supprimer le cookie et tous ses éventuels morceaux

Ce helper est constitué de 3 méthodes exposées : getItem, setItem, removeItem et de plusieurs fonctions utilitaires internes.

💡 Les chunks sont simplement des morceaux de données : on découpe un cookie trop long en plusieurs cookies plus petits pour respecter la limite de taille des navigateurs (environ 4 Ko par cookie).

Configuration et préparation

Les options des cookies sont des attributs envoyés au navigateur (path, maxAge, SameSite, etc.). Ce sont des réglages supplémentaires et sont définis en fonction du rôle du cookie. Exemple: Un cookie qui doit être lu par un service externe → SameSite=None + Secure.

const chunkSize = 3000;
const isProd = process.env.NODE_ENV === 'production';

export type SameSite = 'Strict' | 'Lax' | 'None';

export type CookieOptions = {
  path?: string; //indiquer la limitation d'accès au cookie sur les pages utiles (par défaut: sur tout le site)
  maxAge?: number; //indiquer la durée de vie en secondes
  secure?: boolean; //indiquer "true" pour tout site sous https (ou la prod)
  sameSite?: SameSite; //choisir la règle de transmission du cookie
  domain?: string; //indiquer le domaine permettant l'accès aux cookies sur les sous-domaines liés
};

const splitIntoChunks = (value: string): string[] => {
  const chunks: string[] = [];

  for (let i = 0; i < value.length; i += chunkSize) {
    chunks.push(value.slice(i, i + chunkSize));
  }

  return chunks;
};

const buildCookieOptions = (options?: CookieOptions): string => {
  let attributesOption = `; path=${options?.path ?? '/'}`;

  if (options?.maxAge !== undefined) {
    attributesOption += `; max-age=${options.maxAge}`;
  }

  //active le cookie sécurisé en prod ou s'il est définit dans les options
  if (isProd || options?.secure) {
    attributesOption += '; Secure';
  }

  if (options?.sameSite) {
    attributesOption += `; SameSite=${options.sameSite}`;
  }

  if (options?.domain) {
    attributesOption += `; Domain=${options.domain}`;
  }

  return attributesOption;
};

const buildCookieString = (key: string, value: string, options?: CookieOptions): string => {
  const keyAndValueCookie = `${key}=${encodeURIComponent(value)}`;
  const cookieOptions = buildCookieOptions(options);

  return keyAndValueCookie + cookieOptions;
};

Ici, on pose les bases :

chunkSize = 3000 → un cookie ne peut pas dépasser environ 4 Ko, donc on découpe en morceaux si besoin (chunking).
isProd → savoir si on est en mode production pour appliquer plus de sécurité.
CookieOptions → un objet pour configurer chaque cookie (durée de vie, domaine, sécurité, etc.).
splitIntoChunks → fonction utilitaire qui selon la taille de la valeur du cookie le découper en chunks.
buildCookieOptions → configure les options du cookie en se basant sur ceux passés en paramètres.
buildCookieString → cette fonction va construire un cookie (clé + valeur + option). On appelle la fonction buildCookieOptions pour nous y aider.

Exemple en sortie :

const cookie = buildCookieString("theme", "dark", {
  path: "/",
  maxAge: 3600, // 1h
  secure: true,
  sameSite: "Lax",
  domain: "exemple.com"
});

console.log(cookie);

theme=dark; path=/; max-age=3600; Secure; SameSite=Lax; Domain=exemple.com

Lire un cookie

const getCookieValue = (key: string): string | null => {
  const cookies = document.cookie.split('; ');
  const cookie = cookies.find((cookie) => cookie.startsWith(`${key}=`));
  return cookie ? decodeURIComponent(cookie.split('=')[1]) : null;
};

  getItem: (key: string): string | null => {
    const cookie = getCookieValue(key);

    if (cookie !== null && cookie !== '') {
      return cookie;
    }

    const firstCookieChunked = getCookieValue(`${key}__0`);

    if (firstCookieChunked !== null) {
      let fullCookieValue = firstCookieChunked;

      for (let i = 1; ; i++) {
        const nextCookieValue = getCookieValue(`${key}__${i}`);
        if (nextCookieValue === null) break;
        fullCookieValue += nextCookieValue;
      }

      return fullCookieValue;
    }

    return null;
  },

Ici, on lit un cookie depuis le navigateur :

getCookieValue → cherche un cookie dans document.cookie grâce à sa clé et renvoie sa valeur décodée (ou null s’il n’existe pas).
getItem → c'est notre méthode, elle appelle getCookieValue qui va la traiter selon la taille du cookie :
- Cas simple : si le cookie existe en un seul bloc, on le renvoie directement.
- Cas chunké : si la donnée est découpée (key__0, key__1, …), on recompose la valeur complète en concaténant tous les morceaux.

Si rien n’est trouvé, on renvoie null.

💡 Bon à savoir : On décode la valeur avec decodeURIComponent pour retrouver le texte original (les cookies sont toujours encodés dans le navigateur).

Supprimer un cookie

const deleteCookie = (key: string, options?: CookieOptions): void => {
  const cookieOptions = {
    ...options,
    maxAge: 0,
  };
  const expiredCookieOptions = buildCookieOptions(cookieOptions);
  const expiredCookieString = `${key}=${encodeURIComponent('')}`;

  document.cookie = expiredCookieString + expiredCookieOptions;

  for (let i = 0; ; i++) {
    const chunkKey = `${key}__${i}`;
    if (!getCookieValue(chunkKey)) break;
    document.cookie = `${chunkKey}=${encodeURIComponent('')}` + expiredCookieOptions;
  }
};

removeItem: (key: string, options?: CookieOptions): void => {
  deleteCookie(key, options);
},

Sur cette partie on supprime le cookie de la façon suivante grace à la méthode removeItem :

on reconstruit le cookie à l'identique (avec les mêmes options) et on vide sa valeur
et si besoin on fait une repasse sur les chunks pour vider leurs valeurs aussi :
- Cas simple : on supprime le cookie unique.
- Cas chunké : on récupère tous les cookies liés à une clé (chunks) et on les supprime tous (key__0, key__1,.. ).

Modifier un cookie

setItem: (key: string, value: string, options?: CookieOptions): void => {
    const chunks = splitIntoChunks(value);
    const simpleCookie = chunks.length === 1;

    deleteCookie(key, options);

    if (simpleCookie) {
      const singleChunk = chunks[0];
      const cookieString = buildCookieString(key, singleChunk, options);

      document.cookie = cookieString;
      return;
    }

    chunks.forEach((chunk: string, i: number) => {
      const chunkKey = `${key}__${i}`;
      const cookieString = buildCookieString(chunkKey, chunk, options);
      document.cookie = cookieString;
    });
  },

Et enfin pour modifier un cookie on crée la méthode setItem qui va étape par étape :

regrouper les chunks
supprimer les anciens cookies associés à cette clé avant d’en créer de nouveaux
modifier le cookie selon sa taille (chunk ou non)

Utilisation du hook dans un composant

'use client';
import React from 'react';
import { useCookies } from '@/hooks/useCookies';

export const ThemeToggle = () => {
  const [theme, setTheme] = useCookies<'light' | 'dark'>('theme', 'light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <div style={{
      backgroundColor: theme === 'dark' ? '#111' : '#f8f8f8',
      color: theme === 'dark' ? '#fff' : '#000',
      padding: '2rem',
      textAlign: 'center',
      minHeight: '100vh',
      transition: 'all 0.3s ease'
    }}>
      <h1>Thème actuel : {theme}</h1>
      <button onClick={toggleTheme}>
        Changer de thème
      </button>
    </div>
  );
};

Et Voilà, avec ce hook et ce helper, vous pouvez gérer les cookies en React sans dépendance externe, tout en restant flexible et typé.

👉 lien du gist

🧹Clean Code de Robert C. Martin - Résumé express + exemples

MandyTrl — Wed, 18 Jun 2025 15:56:20 +0000

Le livre Clean Code écrit par Robert C. Martin est une référence pour écrire un code de qualité : lisible, cohérent et facile à maintenir. Je l'ai découvert suite à une recommandation sur une chaîne YT, voyons ensemble ces grands principes !

🗒️Sommaire

Lisibilité et clarté
Petites fonctions, une seule responsabilité
Limiter la taille des fonctions
Éviter la duplication (DRY)
Commenter, oui, mais coder pour ne pas avoir à le faire
Structure logique du code
Code modulaire et testable
Gestion des erreurs

Lisibilité et clarté

Le nommage des variables et fonctions doivent être explicites ! En entreprise, dans un projet coconstruit : le code doit être facilement compréhensible par un autre développeur. On laisse les abréviations et le freestyle pour les projets personnels (et encore..).

❌

const d = new Date()

✅

const currentDate = new Date()

Petites fonctions, une seule responsabilité

Une fonction doit faire une seule chose et bien la faire (Single Responsibility Principle). C'est plus facile à tester et comprendre.

❌

function registerUser(user) {
  if (!user.email.includes('@')) {
    throw new Error('Email invalide')
  }

  database.save(user)

  sendWelcomeEmail(user.email, 'Bienvenue !')
}

✅

function isValidEmail(email) {
  return email.includes('@')
}

function saveUser(user) {
  database.save(user)
}

function sendWelcomeEmail(email) {
  sendEmail(email, 'Bienvenue !')
}

function registerUser(user) {
  if (!isValidEmail(user.email)) {
    throw new Error('Email invalide')
  }

  saveUser(user);
  sendWelcomeEmail(user.email)
}

Ici chaque fonction est correctement nommée, gère une chose et est réutilisable.

Limiter la taille des fonctions

On limite le nombre de paramètres, on essaie de réduire le nombre de caractères (👋 coucou les ternaires et leurs amis) tant que ça n'entache pas sa lisibilité. Une fonction doit tenir sur quelques lignes et exprimer une seule intention "lisibles de haut en bas, comme une histoire".

❌

function calculateDiscount(price, isMember, code) {
  return price * (1 - Math.min((isMember ? 0.1 : 0) + (code === 'VIP' ? 0.2 : 0), 0.3))
}

Ça tient sur une ligne mais au premier coup d'oeil on ne comprend rien et en plus de ça la fonction gère plusieurs responsabilités.
✅

function getDiscount(isMember, code) {
  const member = isMember ? 0.1 : 0
  const promo = code === 'VIP' ? 0.2 : 0
  return Math.min(member + promo, 0.3)
}

function calculateDiscount(price, isMember, code) {
  return price * (1 - getDiscount(isMember, code))
}

Deux fonctions mais elles sont concises et explicites 👌.

Eviter la duplication (DRY)

Le principe DRY (ou** Don't Repeat Yourself*) est distillé tout du long du bouquin. Le concept est simple : **factoriser le code* pour ne pas avoir plusieurs fois la même logique. Mais parfois (et surtout sur un grand projet) on ne se rend pas compte de ces duplications. Les signes qui doivent vous alerter sont les suivants :

vous copiez/collez plusieurs fois le même bout de code pour l'intégrer dans différents fichiers.
certaines fonctions font la même chose - à une ou deux lignes près.
la logique n'est pas centralisée et vous intégrez un bout de code dans plusieurs fonctions.
l'impression du déjà vu.

❌

function getAdminEmails(users) {
  return users.filter(u => u.role === 'admin').map(u => u.email)
}

function getUserEmails(users) {
  return users.filter(u => u.role === 'user').map(u => u.email)
}

✅

function getEmailsByRole(users, role) {
  return users.filter(u => u.role === role).map(u => u.email)
}

Commenter, oui, mais coder pour ne pas avoir à le faire

Un code bien écrit doit être auto documenté. Les commentaires ne doivent pas compenser un code confus (revoir les points précédents). Un code inutile commenté ? autant le supprimer ! Mea-culpa, je laisse souvent des bouts de code commentés pour diverses raisons :

j'ai mis du temps à le faire ou à comprendre comment le faire et j'ai peur de le perdre.
c'est le code d'un autre développeur et j'ai du mal à supprimer ce qui n'a pas été écrit par moi-même.
comme ma mère j'utilise la carte joker du "au cas où". Mais si besoin, le versionnage de Git est là ! ❌

// const isDebug = true

❌

// Cette fonction vérifie si un utilisateur est admin
function checkUserStatus(user) {
  return user.isActive && user.points > 1000
}

✅

function isAdminUser(user) {
  return user.isActive && user.points > 1000
}

Garder une structure logique du code

Que ce soit au sein du projet et la façon dont sont architecturés les fichiers entre eux et correctement séparer les blocs à l'intérieur d'un fichier. Voici un bon exemple :

✅

// constantes
const TAX_RATE = 0.2

// fonctions utilitaires
function applyTax(price) {
  return price + price * TAX_RATE
}

function formatPrice(price) {
  return `${price.toFixed(2)} €`
}

// fonction principale
function displayTotal(price) {
  const taxedPrice = applyTax(price)
  console.log(formatPrice(taxedPrice))
}

// export éventuel
export { displayTotal }

Ecrire un code modulaire et testable

Ce chapitre rejoint le point DRY et la taille optimale d'une fonction. En ayant plusieurs unités indépendantes on peut plus facilement comprendre, réutiliser et tester le code.

Gérer les erreurs proprement

Une bonne gestion des erreurs rend le code plus fiable et ça passe par plusieurs bonnes pratiques :

utiliser des exceptions (interrompt l'exécution du code) à la place de codes d'erreur cachés.
être explicite : n’attrape pas une erreur pour la faire disparaître.
isoler la validation permet de tester les erreurs facilement.
créer des erreurs personnalisées pour les cas métier spécifiques. ❌

function register(user) {
  if (!user.email.includes('@')) return false
}

Ce bout de code est "silencieux", peu clair.
✅

function validateEmail(email) {
  if (!email.includes('@')) throw new Error('Email invalide')
}

function register(user) {
  validateEmail(user.email);
  // suite du process..
}

Ici on sépare la validation de l'enregistrement et on a une erreur claire.

Et Voilà, tes collègues et ton futur toi te remercient pour ce code de qualitey que tu es prêt à programmer; car le clean code sert tout le monde :)

Introduction à l'éco-conception 🍃 web

MandyTrl — Tue, 27 May 2025 08:35:47 +0000

À l’heure où le numérique représente près de 4% des émissions mondiales de gaz à effet de serre, l’éco-conception web s’impose comme une approche essentielle : elle vise à concevoir des sites plus légers, plus sobres, tout en maintenant une excellente expérience utilisateur. Derrière cette démarche, les enjeux sont multiples : réduire l’empreinte carbone du web, améliorer la performance des sites, renforcer leur accessibilité, et garantir leur pérennité. C’est une manière concrète d’allier responsabilité environnementale, qualité technique et sens de l’usage; parce qu’un site plus “écologique” est souvent aussi plus rapide, plus clair et plus agréable à utiliser.

Impacts concrets du web sur l’environnement

🏋️‍♀️ Le poids des pages web explose

En 2010, une page web moyenne pesait environ 700 Ko. En 2024, elle dépasse souvent 2,5 Mo, voire 4 à 5 Mo pour certaines homepages.

Cela signifie que le web est plus lourd qu’il ne l’a jamais été, malgré des connexions plus rapides. Ce poids provient surtout des images, des vidéos, des frameworks JS/CSS lourds, et des trackers.

Des émissions invisibles mais bien réelles

Selon le Website Carbon Calculator, une page web émet en moyenne 0,5 à 1,7 gramme de CO₂ par visite. Pour un site populaire avec 100 000 visites par mois, cela peut représenter plus d’une tonne de CO₂ par an – soit l’équivalent d’un vol Paris-New York aller-retour ✈️.

Le trafic mondial du web dépasse les 5 milliards d’utilisateurs, ce qui rend cet impact massif.

L'effet rebond : mieux coder pour consommer.. encore plus ?

Quand un site est rapide, bien conçu et attractif, les utilisateurs y restent plus longtemps; ce qui peut paradoxalement augmenter la consommation énergétique globale. C’est ce qu’on appelle l’effet rebond : améliorer l’efficacité sans revoir l’usage peut aggraver le problème.

👉 L’éco-conception ne consiste pas seulement à alléger les fichiers : elle invite aussi à questionner l’utilité des fonctionnalités, la pertinence des contenus, et les habitudes de consommation numérique.

Un enjeu réglementaire et matériel

L’éco-conception n’est pas seulement une démarche volontaire : elle s’inscrit aussi dans un cadre réglementaire de plus en plus structuré. En France, le RGESN (Référentiel Général d’Écoconception des Services Numériques) définit des critères concrets pour concevoir des services numériques plus sobres. Il est appelé à devenir une référence pour les administrations, les marchés publics, mais aussi les entreprises privées.

En parallèle, en allégeant les sites et applications, l’éco-conception permet aussi de prolonger la durée de vie des appareils : un site léger tourne mieux sur un vieux téléphone ou un PC peu puissant, sans forcer à renouveler son matériel pour suivre la cadence.

Outils pour mesurer l’impact carbone de son site

Avant même de modifier votre code, vous pouvez tester l’empreinte carbone de votre site existant avec des outils simples :

🌱 EcoIndex.fr : outil français basé sur des critères comme le poids, le nombre de requêtes et la complexité DOM.
💻 WebsiteCarbon.com : donne une estimation claire en grammes de CO₂ émis par page.
🧪 Lighthouse (via Chrome) : bien qu’orienté performance, l’onglet “Best Practices” et le poids de la page sont de bons indicateurs.

Bonnes pratiques générales

⚡Performance & sobriété

Réduire le poids des images : optez pour des formats modernes comme WebP ou AVIF, compressez sans perte, et servez des tailles adaptées selon le contexte (mobile, desktop…).
Mettre en place le lazy loading : chargez les images, vidéos, iframes ou composants uniquement lorsqu’ils deviennent visibles à l’écran.
Minifier les fichiers CSS, JS, HTML : cela réduit le temps de chargement et la consommation de données.
Limiter les librairies tierces : évitez les frameworks lourds ou inutiles (ex. : Bootstrap si non indispensable, moment.js remplacé par dayjs…).
Réduire les animations lourdes : transitions complexes, effets 3D ou scroll-jacking peuvent fortement pénaliser les performances, surtout sur mobile.
Supprimer les fonctionnalités superflues au chargement initial : évitez les carrousels JavaScript, vidéos autoplay ou pop-ups non essentiels.

🎨 Design & accessibilité

Limiter les polices : 2 polices maximum, et idéalement 2 variants (gras, italic, etc.) pour réduire le nombre de fichiers à charger (soit 4 imports max).
Respecter les contrastes : pour assurer une bonne lisibilité à tous les profils d’utilisateurs.
Penser au responsive : une interface qui s’adapte proprement, sans surcharge. Évitez les effets :hover exclusifs sur mobile.
Utiliser du texte plutôt que des images pour les titres : cela réduit le poids et améliore l’accessibilité (lecteurs d’écran, SEO…).

🛠️ Développement

Favoriser les composants légers et réutilisables : mieux vaut 10 petits composants bien pensés qu’un monolithe difficile à optimiser.
Prioriser le rendu côté serveur (comme avec Next.js ou SSR) quand c’est pertinent, pour envoyer une version optimisée dès le premier chargement.
Éviter les re-renders inutiles : en utilisant les bons hooks, le mémoïsation (React.memo, useMemo, etc.) ou en découpant l’UI intelligemment.
Nettoyer régulièrement son code : supprimer les imports inutiles, les morceaux de code/commentaires oubliés ou les composants non utilisés.
Faire le tri dans les dépendances : désinstallez celles qui ne sont plus utiles, privilégiez les alternatives plus légères.

Quelques exemples de sites sobres et esthétiques

🍔 Yuba – Note A
Annuaire food et responsable au design frais et dynamique.

💻 BBCorp – Note A+
Portfolio sobre et technique d'un expert en éco-conception.

🔡 Fictional TypeFace – Note A+
Site typographique épuré, lisible et très léger.

🏙️ C40 – Note A+
Design clair et structuré pour un réseau mondial de villes durables.

🌿 FairTec – Note A
Collectif tech engagé pour un numérique durable, au site simple et efficace.

Pour plus de références je vous conseille l'annuaire Lowww !

Et Voilà, avec ces pistes vous savez quelle direction donner à vos sites pour une meilleure empreinte carbone !

Les événements dans les formulaires : valider et améliorer l’UX

MandyTrl — Mon, 10 Mar 2025 09:25:12 +0000

Les formulaires sont un élément clé de l'interaction utilisateur sur le web. Bien gérer leurs événements permet non seulement d'assurer une validation efficace mais aussi d'améliorer l'expérience utilisateur (UX). Voici un tour d'horizon des événements les plus utiles et des bonnes pratiques pour les exploiter !

Les principaux événements des formulaires

`input`

L'événement input est déclenché à chaque modification de la valeur d'un champ (champ texte, textarea, etc.). Il est idéal pour fournir un feedback en temps réel.

const inputField = document.querySelector("#username")
inputField.addEventListener("input", (event) => {
    console.log("Nouvelle valeur :", event.target.value)
})

`change`

Cet événement se déclenche lorsque la valeur d'un champ change et que l'utilisateur quitte le champ ou valide la saisie (appui sur la touche "Entrée" ou clic).

const selectField = document.querySelector("#country")
selectField.addEventListener("change", (event) => {
    console.log("Pays sélectionné :", event.target.value)
})

`focus` et `blur`

L'événement focus est activé quand un champ reçoit le focus, et blur quand il le perd. Cela permet de vérifier la saisie, d'afficher des conseils à l'utilisateur ou encore de modifier le style pour rendre le formulaire plus accessible.

   emailField.addEventListener("focus", () => {
    console.log("Champ email sélectionné")
})

emailField.addEventListener("blur", () => {
    if (emailField.value.length > 3 && !emailField.value.includes("@")) {
        errorMsg.textContent = "L’email semble incorrect."
    } else {   
        errorMsg.textContent = ""
}
})

`submit`

L'événement submit quant à lui permet d'intercepter l'envoi du formulaire pour effectuer une validation avant soumission.

form.addEventListener("submit", (event) => {
   event.preventDefault()
   console.log("Formulaire soumis avec succès !")
})

Améliorer l'UX grâce aux événements

La validation en temps réel

Un bon formulaire est réactif et guide l'utilisateur tout du long. Il doit par exemple, pouvoir afficher un message d'erreur si l'email est mal formaté.

Ce processus, peut (et doit) être répliqué sur chaque champ complexe du formulaire afin d'en tirer tous ses avantages (gain de temps, réduction des erreurs et une meilleure compréhension).

Comment rendre la validation plus efficace ?

✅ Messages d'erreur précis : Indiquer clairement ce qui est attendu.
✅ Mise en évidence des champs erronés : Ajouter une bordure rouge ou un icône d'avertissement.
✅ Feedback positif : Afficher une confirmation visuelle quand la saisie est correcte.

emailInput.addEventListener("input", (event) => {
    const value = event.target.value
    if (!value.includes("@")) {
        errorMsg.textContent = "L'email doit contenir un @"
    } else {
        errorMsg.textContent = ""
    }
})

Autofocus et mise en avant des champs

Mettre automatiquement le focus sur le premier champ améliore l'accessibilité et permet également de capter l'utilisateur vers l'essentiel.

document.querySelector("#username").focus()

Désactivation du bouton de soumission

Inutile de rendre disponible (cliquable) le bouton de soumission tant que le formulaire n'est pas correctement rempli. On va préférer le désactiver ce qui modifie le visuel du bouton et rend encore une fois la compréhension meilleure pour l'utilisateur.

submitBtn = document.querySelector("#submit")
submitBtn.disabled = true

document.querySelector("#username").addEventListener("input", (event) => {
    submitBtn.disabled = event.target.value.length < 3
})

Empêcher l'envoi avec `preventDefault()`

Comme vu plus haut, l'événement submit intercepte la soumission d'un formulaire. Grâce à preventDefault(), on empêche son envoi si certains champs ne sont pas remplis correctement (c'est un indispensable pour éviter les erreurs à l'envoi du formulaire).

const form = document.querySelector("#myForm")
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

form.addEventListener("submit", (event) => {
    if (emailInput.value.trim() === "" || !emailRegex.test(value)) {
        errorMsg.textContent = "Veuillez entrer un email valide."
        event.preventDefault() //empêche l'envoi du formulaire
    } else {
        console.log("Formulaire soumis avec succès !")
    }
})

Et Voilà comment améliorer l'UX en exploitant au mieux les événements. Les formulaires respectant ces guidelines sont plus fluides et interactifs ! Cela facilite la saisie et réduit les erreurs.

⭐ Bonus

⭐ CodePen lié à l'article:
CodePen: Apprendre les événements dans les formulaires (JavaScript)

series: "Comprendre les événements en JavaScript"

Github - Comment protéger sa branche (les Branch Protection Rules)

MandyTrl — Wed, 19 Feb 2025 15:20:29 +0000

Après avoir ouvert récemment l'un de mes projets open source à être collaboratif j'ai reçu une demande de push sur mon repo. Et là j'ai un peu paniqué parce que je ne m'étais pas penché sur la question de protection autour de mes projets persos.

Documentation Github sous les yeux et ChatGPT à côté pour m'épauler je me suis empressée de mettre en place ma première Branch Protection Rules (BPR).

À quoi sert une BPR ?

Sur vos branches critiques (en général la principale - main) il est important de cadrer les interactions qu'ont les collaborateurs sur celles-ci. Que ce soit pour supprimer, forcer les envois ou encore contrôler l'historique il est recommandé de définir des exigences (ou un workflow personnalisé) pour gérer au mieux votre projet.

Les options possibles

📝 Contrôler les contributions

Exiger une pull request avant de fusionner.
Exiger un nombre minimal d'approbations (utile pour les grosses équipes).
Supprimer les approbations lorsqu'un nouveau commit est poussé.
Exiger une revue d'un mainteneur ou administrateur du projet.
Exiger que les approbations viennent d'une personne différente que celle qui l'a poussé.
Empêcher la fusion lorsque les discussions sont encore ouvertes.

🔒 Sécuriser les commits

Exiger des commits signés (ou vérifiés avec une clé SSH, très utilisé en entreprise).
Interdire les pushs forcés (git push -f).
Empêcher la suppression de la branche.

✅ La validation automatique

Exiger des tests réussis avant une fusion (c'est toute la partie CI/CD -que je n'ai encore jamais exploré-).
Exiger un historique de commits linéaire pour un historique clair avec des commits isolés et sans merges inutiles.

🚫 Restrictions avancées

Limiter les pushs à certaines personnes/équipes.
Restreindre les modifications sur des fichiers spécifiques (comme le package.json par exemple).

Quand et comment configurer une BPR ?

Activer la protection des branches n'est pas toujours nécessaire. Si votre projet est personnel et ne vise ni l'open source ni la collaboration, ces règles sont optionnelles.

👩‍💻 Projet perso

Comme indiqué plus haut mettre en place des restrictions strictes est optionnel. Il peut être par contre utile pour éviter les erreurs (comme un push forcé sur la branche principale).

🤝 Projet open source (avec une petite communauté)

Exiger des pull requests avant de fusionner.
Activer les revues de code (au moins 1 approbation avant merge).
Empêcher les pushs forcés.
Laisser la possibilité à l'admin de contourner les règles si nécessaire (optionnel). C'est ce que j'ai choisi sur mon projet en plus d'activer l'historique linéaire (optionnel).

🏢 Projet en équipe (pour des projets d'entreprise ou plus structurés)

En plus des exigences classiques pour les projets open source on ajoute une surcouche de protection:

Exiger des commits signés.
Exiger une validation CI/CD avant merge (souvent géré par des DevOps).
Limiter les pushs aux personnes autorisées sur main.
Augmenter le nombre de revues de code.
Exiger la résolution des discussions avant de fusionner.
Restreindre la modification de fichiers sensibles comme .github/workflows/ ou autres.

👀 Où configurer ça sur GitHub ?

📌 Repo > Settings > Branches > Add branch protection rule
👉 Documentation Github sur le sujet

Et Voilà, vous savez maintenant comment protéger vos branches si besoin. C'est une bonne pratique qui s'adapte au projet et qui rendent les workflows plus fluides et plus sûrs.

Et vous, comment protégez-vous vos branches sur vos projets persos ?

Écouter des événements globaux en JavaScript

MandyTrl — Mon, 10 Feb 2025 15:02:25 +0000

Les événements globaux en JavaScript permettent d'interagir avec des actions qui ne sont pas liées à un élément spécifique, mais à l'ensemble du document ou de la fenêtre. On les utilise souvent pour détecter des actions de l'utilisateur comme le défilement de la page, le redimensionnement de la fenêtre, ou encore l'activité du clavier en dehors des champs de saisie.

Les principaux événements globaux

🖱️ scroll : déclenché lorsque l'utilisateur fait défiler la page.
📐 resize : déclenché lors du redimensionnement de la fenêtre.
⌨️ keydown, keyup : déclenchés lorsque l'utilisateur appuie ou relâche une touche du clavier.
🖱️ mousemove, mousedown, mouseup : pour suivre les mouvements et clics de la souris.
😶‍🌫️ visibilitychange : déclenché lorsque l'onglet du navigateur devient visible ou caché.

Ajouter un écouteur d'événement global

En JavaScript, on utilise souvent window ou document pour "attacher" des écouteurs à ces événements globaux.

Voici un exemple simple pour détecter le défilement de la page:

window.addEventListener("scroll", () => {
    console.log("La page est en train d'être défilée")
})

Un autre exemple avec le redimensionnement de la fenêtre:

window.addEventListener("resize", () => {
    console.log(`Nouvelle dimension: ${window.innerWidth}x${window.innerHeight}`)
})

On a dans ces deux exemples attaché à window un écouteur d'événement ("scroll", "resize") avec la méthode addEventListener().

Retirer un écouteur d'événement global

lorsqu'ils ne sont plus nécessaires il est important de retirer les écouteurs d'événements afin d'éviter que le navigateur ne conserve des références inutiles et garantir une meilleure performance.

Voici comment détacher un écouteur d'événement:

function handleScroll() {
    console.log("La page est en train d'être défilée")
}

window.addEventListener("scroll", handleScroll);

// Suppression de l'écouteur
window.removeEventListener("scroll", handleScroll);

⚠️ la fonction passée en argument à removeEventListener() doit être exactement la même que celle utilisée lors de l'ajout de l'écouteur.

Gérer les événements globaux en React ⚛️

En React, il est recommandé d'ajouter et de retirer les écouteurs d'événements globaux dans useEffect pour s'assurer qu'ils sont bien gérés lors du cycle de vie du composant.

Par exemple avec l'événement resize cela donnerait:

import { useEffect } from "react"

function App() {
    useEffect(() => {
        function handleResize() {
            console.log(`Nouvelle taille : ${window.innerWidth}x${window.innerHeight}`)
        }

        window.addEventListener("resize", handleResize)

        return () => {
            window.removeEventListener("resize", handleResize)
        }
    }, [])

    return <div>Réduisez la fenêtre pour voir l'effet</div>
}

L'écouteur est ajouté au montage du composant puis supprimé une fois le composant démonté, évitant ainsi des comportements inattendus et rendant l'application plus fluide.

Et Voilà, vous savez tout sur la gestion des événements ! Ce qu'il faut retenir ? Manipuler avec soin les écouteurs (ajout et retrait quand cela est vraiment nécessaire) garde une application fluide et réactive.

Gérer les événements sur un bouton en JavaScript

MandyTrl — Tue, 04 Feb 2025 13:51:52 +0000

Les boutons sont l'un des éléments les plus interactifs sur une page web. En JavaScript, on peut écouter plusieurs types d'événements pour réagir aux actions de l'utilisateur. Nous allons voir lesquels et comment les implémenter efficacement.

Les événements courants sur un bouton

🖱️ Le clic et le double-clic

Déclenché lorsqu'un utilisateur clique avec sa souris.

const bouton = document.getElementById("btn");

bouton.addEventListener("click", () => {
    alert("Bouton cliqué !")
})

Moins utilisé, le double-clic peut être utile pour des actions avancées, notamment dans les jeux vidéo.

bouton.addEventListener("dblclick", () => {
    alert("Bouton double-cliqué !")
})

Le survol avec `mouseover` et `mouseout`

Ces deux événements permettent de déclencher une action lorsque l'utilisateur passe la souris sur un bouton ou la quitte. Ici il est utilisé pour appliquer un style.

bouton.addEventListener("mouseover", () => {
    bouton.style.backgroundColor = "#d6bba7"
    bouton.style.color = "#663713"
})

bouton.addEventListener("mouseout", () => {
    bouton.style.backgroundColor = "#663713"
    bouton.style.color = "white"
})

Le maintien avec `mousedown` et `mouseup`

Plus précis et moins utilisés que les événements précédents, mousedown et mouseup amorcent des actions lorsque l'utilisateur appuie (souvent utilisé pour différencier un simple clic vs un appui prolongé et déclencher des actions différentes) ou relâche le bouton.

bouton.addEventListener("mousedown", () => {
    console.log("Bouton pressé")
})

bouton.addEventListener("mouseup", () => {
    console.log("Bouton relâché");
})

L'entrée et la sortie du focus avec `focus` et `blur`

Souvent utilisés pour les jeux vidéos ou par des personnes à l'accessibilité réduite, ces événements sont utiles pour détecter quand un bouton reçoit ou perd le focus clavier.

bouton.addEventListener("focus", () => {
    bouton.style.borderRadius = "50px"
})

bouton.addEventListener("blur", () => {
    bouton.style.borderRadius = "15px"
})

Accessibilité et bonnes pratiques

L'accessibilité est essentielle pour assurer une bonne expérience utilisateur, notamment pour ceux qui utilisent des technologies d'assistance. Voici quelques conseils supplémentaires pour rendre vos boutons accessibles

Utiliser keydown et keyup pour permettre l'activation via le clavier :

bouton.addEventListener("keydown", (event) => {
    if (event.key === "Enter" || event.key === " ") {
        bouton.click()
    }
})

Ajouter un attribut aria-label ou aria-labelledby est recommandé si le bouton n'a pas de texte visible afin que les utilisateurs de lecteurs d'écran puissent comprendre l'action du bouton.

<button id="btn" aria-label="Envoyer le formulaire">📩</button>

Vérifier que les événements souris sont aussi accessibles au clavier en couplant par exemple les effets mouseover/mouseout avec focus/blur.
Ne pas supprimer le focus par défaut mais l'améliorer visuellement pour aider les utilisateurs à voir quel bouton est actif.

Aller plus loin

Gérer les événements de manière déléguée pour optimiser les performances, surtout lorsqu'on manipule un grand nombre d'éléments interactifs.

document.getElementById("container").addEventListener("click", (event) => {
    if (event.target.matches(".btn")) {
        alert("Bouton cliqué !")
    }
})

Utiliser les événements tactiles touchstart et touchend pour rendre les boutons compatibles sur mobile.
Explorer l'intégration en React.

Et Voilà !

⭐ Bonus

⭐ Fiche récapitulative des événements des boutons en JavaScript:
Télécharger la cheatsheet PDF

⭐ CodePen lié à l'article:
CodePen: Apprendre les écouteurs d'événement en Javascript

series: "Comprendre les événements en JavaScript"

JavaScript - Comment créer un tableau

MandyTrl — Fri, 31 Jan 2025 11:58:25 +0000

Que ce soit pour gérer une liste d'éléments, traiter des résultats d'API ou structurer des informations dynamiques, savoir créer et manipuler un tableau est une compétence essentielle.

JavaScript offre plusieurs méthodes pour initialiser un tableau, chacune ayant ses spécificités et ses cas d’usage. Certaines sont simples et intuitives, d’autres sont plus puissantes et adaptées à des situations avancées. Regardons ça de plus près.

`[]` ou la syntaxe littérale

C'est la manière la plus simple et la plus utilisée; on assigne directement notre valeur au tableau [].

const pokedex = ["Pikachu", "Psykokwak", "Wattouat"]
console.log(pokedex)

// 👇 return
// [object Array] (3)
["Pikachu","Psykokwak","Wattouat"]

`new Array()` et ses pièges

Je dirais que c'est la méthode à éviter si l'on veut éviter quelques soucis.

avec plusieurs arguments tout va bien.
avec un seul argument on peut se retrouver avec des "slots" vides..

const five = new Array(1, 2, 3, 4, 5)
console.log(five)

// 👇 return
// [object Array] (5)
[1,2,3,4,5]


const lengthFive = new Array(5)
console.log(lengthFive)

// 👇 return
// [object Array] (5)
[,,,,]

Comme on peut le constater, le deuxième tableau possède 5 entrées mais elles sont totalement vides. Et chaque entrée aura pour retour undefined; à utiliser dans de bonnes conditions !

L'alternative: `Array.of()`

C'est la solution si l'on souhaite éviter les pièges de new Array :

const arr = new Array(1, 2, 3, 4, 5)
console.log(arr)

// 👇 return
// [object Array] (5)
[1,2,3,4,5]


const arr2 = new Array(5)
console.log(arr2)

// 👇 return
// [object Array] (1)
[5]

Le plus puisant: `Array.from()`

Cette méthode s'utilise sur tout type d'objets et peut prendre en un argument une fonction map.() afin de créer des tableaux dynamiques. Pas mal si l'on souhaite générer un tableau sans boucle for.

const pokemonChosen= Array.from("Sablaireau")
console.log(pokemonChosen)
// 👇 return
// [object Array] (10)
["S","a","b","l","a","i","r","e","a","u"]

const pokedexSlot = 6
const availableSlot = Array.from({ length: pokedexSlot }, (_, i) => i + 1);
console.log(availableSlot)

// 👇 return
// [object Array] (6)
[1,2,3,4,5,6]

À la différence de certaines méthodes qui créent un tableau, puis qui le remplisse. const arr = Array.from({ length: 5 }, (_, i) => i.faitQuelqueChose); va, lui, créer directement un tableau rempli. Comme il n'y a pas de tableau intermédiaire, ça en fait une méthode plus performante.

`[...]` ou le spread operator

Si l'objet est itérable (comme une string), on peut alors la convertir en tableau mais on peut également copier un tableau existant et l'étendre. Un vrai couteau suisse !

const pokedex = ["Pikachu", "Psykokwak", "Wattouat"]
const newPokedex = [...pokedex, "Leveinard", "Bulbizarre", "Grodoudou"]
console.log(newPokedex)
// 👇 return
// [object Array] (6)
["Pikachu","Psykokwak","Wattouat","Leveinard","Bulbizarre","Grodoudou"]

const pokemonChosen= [..."Sablaireau"]
console.log(pokemonChosen)
// 👇 return
// [object Array] (10)
["S","a","b","l","a","i","r","e","a","u"]

On préférera cette méthode si la chaîne de caractères contient des émojis 🦀. Sinon il reste .split() pour les string !

`.split()` pour les chaînes de caractères

Votre donnée est une string ? Une autre option est d'utiliser la méthode .split() pour la convertir en tableau.

const pokemonChosen= "Sablaireau".split()
console.log(pokemonChosen)
// 👇 return
// [object Array] (1)
["Sablaireau"]

const pokemonChars = "Sablaireau".split('')
console.log(pokemonChars)
// 👇 return
// [object Array] (10)
["S","a","b","l","a","i","r","e","a","u"]

const splitPokemonName = "Sablaireau".split('b')
console.log(splitPokemonName)
// 👇 return
// [object Array] (2)
["Sa","laireau"]

Attention ici à mettre en paramètre le "pattern" avec lequel vous souhaitez diviser la chaîne en sous-chaînes.

Et Voilà, toutes les méthodes pour créer un tableau en Javascript :)

Intégrer une map avec Leaflet sur un projet Next

MandyTrl — Tue, 28 Jan 2025 18:19:39 +0000

Ces dernières semaines j'ai travaillé sur un projet qui nécessitait l'intégration d'une carte interactive pour afficher des données géographiques. J'avais déjà utilisé la librairie Leaflet 🍃 lors de ma formation et je me suis donc naturellement tournée vers cette solution simple et flexible.

Pourquoi ne pas utiliser `react-leaflet` ?

Bien que cette bibliothèque encapsule Leaflet dans des composants React, elle ne répondait pas à mes besoins dans ce projet. Les incompatibilités de versions (React, TS, Next) et la simplicité du setup direct de Leaflet m’ont conduit à cette approche minimaliste.

1. Initialisation de la map 🗺️

Installation de la librairie avec la commande suivante:

yarn add leaflet

Création d'un composant `<Map />`

on importe Leaflet et les hooks nécessaires.
on utilise useRef pour attribuer une référence à notre Map, ce qui permet de gérer correctement les instances de cartes et d'éviter les conflits au montage/démontage.
on configure la carte avec L.map() : spécifiez les options comme le niveau de zoom, les coordonnées du centre, ou l'activation du zoom au scroll. Pour voir les différentes options à configurer vous pouvez les retrouver sur la documentation ici.
on ajoute une tuile personnalisée avec L.tileLayer() sans oublier d'ajouter l'attribution obligatoire pour respecter les droits des auteurs.
on gère enfin la suppression des instances de carte au démontage du composant pour éviter des collisions.

"use client"
import { useEffect, useRef } from "react"
import L from "leaflet"

const mapRef = useRef<L.Map | null>(null)

useEffect(() => {
    if (mapRef.current) {
      mapRef.current.remove()
      mapRef.current = null
    }

    const map = L.map("map", {
      center: [48.8566, 2.3522], // coordonnées de Paris
      zoom: 10, 
      scrollWheelZoom: false,
    })

    L.tileLayer("https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png",
      {attribution: "©Stamen Design, ©OpenStreetMap contributors",}).addTo(map)

    mapRef.current = map

    return () => {
        if (mapRef.current) {
            mapRef.current.remove()
            mapRef.current = null
        }
    }

    }, [])

  return <div id="map" className="w-full h-full"></div>
}

2. Gérer les erreurs liées au DOM dans Next.js 🛠️

Comme Leaflet utilise le DOM (Document Object Model) à plusieurs niveaux pour fonctionner (initialisation de la map, des marqueurs, etc..) il est important de le désactiver côté SSR (serveur) afin d'éviter des erreurs de type : ❌ ReferenceError: window is not defined.

Pourquoi `"use client"` n'est pas suffisant ?

Bien que "use client" force le composant à s'exécuter côté client, cela ne garantit pas que toutes les dépendances suivent cette règle. Par exemple, les imports globaux comme import L from 'leaflet' s'exécutent dès que le fichier est chargé, même avant que le composant soit rendu. De plus, certaines configurations ou dépendances peuvent interférer en chargeant Leaflet côté serveur, ce qui entraîne des erreurs.

✅ La solution pour résoudre ce problème : l'import dynamique

L'import dynamique de Next.js permet de charger un composant uniquement côté client, en désactivant complètement le rendu côté serveur (ssr: false). Cela empêche Leaflet et ses dépendances d'être exécutés là où le DOM n'existe pas.
📄Documentation officielle de Next pour gérer les imports dynamiques.

Dans un nouveau composant client que l'on nomme <MapContainer />, on importe dynamiquement le composant <Map /> comme suit :

"use client"
import dynamic from "next/dynamic"

const Map = dynamic(() => import("./Map").then((mod) => mod.Map), {
    ssr: false,
})

export const MapContainer = () => {
    return (
        <div className="md:flex-1 w-[30rem] h-[30rem] border-2 border-black mb-6">
            <Map />
        </div>
    )
}

Ajout du chargement conditionnel

Même avec { ssr: false }, certains problèmes peuvent surgir si Leaflet est chargé avant que le DOM soit prêt. Pour éviter tout conflit, on peut ajouter une vérification dans le composant Map, au début du useEffect qui initialise la map :

  useEffect(() => {
    if (typeof window === "undefined") {
       return
    }

  if (mapRef.current) {
      mapRef.current.remove()
      mapRef.current = null
    }

Charger les styles côté client

Une dernière étape consiste à déplacer l'import du CSS directement dans le fichier global.css (en début de fichier) pour une gestion centralisée:

@import "leaflet/dist/leaflet.css";

3. Ajouter des marqueurs 📌

Ajouter un marqueur

const marker = L.marker([48.8566, 2.3522]).addTo(map);
marker.bindPopup("Welcome to Paris 🥖!");

Sauf que.. votre console indiquera sûrement une erreur 404 pour atteindre les fichiers de Leaflet de type :

GET /marker-icon-2x.png 404 in 4113ms
GET /marker-shadow.png 404 in 4106ms

Par défaut, Leaflet essaie de charger ses images de marqueurs (marker-icon.png, marker-shadow.png, etc.) depuis un chemin relatif à node_modules, ce qui ne correspond souvent pas à l'organisation d'un projet dans un environnement comme Next.js ou d'autres frameworks modernes.

✅ La solution:

on copie/colle les fichiers qui se trouve dans le chemin node_modules/leaflet/dist/images dans un nouveau dossier leaflet que l'on retrouvera dans le dossier 📂 public:

et on définit clairement les nouveaux chemins d'accès aux images:


    L.Icon.Default.mergeOptions({
           iconRetinaUrl: "./leaflet/marker-icon-2x.png",
       iconUrl: "./fealflet/marker-icon.png",
       shadowUrl: "./leaflet/marker-shadow.png",
    })

Mais ma solution préférée reste la personnalisation..

Ajouter un marqueur personnalisé

on doit d'abord surcharger les icônes par défaut pour éviter de les générer et de se retrouver avec des erreurs 404.
puis on importe notre image, on crée l'icône personnalisé que l'on configure avec L.marker().
on ajoute enfin notre marqueur personnalisée à notre map (avec une pop-up si on le souhaite):

   L.Icon.Default.mergeOptions({
           iconRetinaUrl: null,
       iconUrl: null,
       shadowUrl: null,
   })

    const customIcon = L.icon({
       iconUrl: "/map-pin2.png",
       iconSize: [30, 30],
       iconAnchor: [15, 30],
       popupAnchor: [0, -30],
    })

    const marker = L.marker([48.8566, 2.3522], { icon: customIcon}).addTo(map)
    marker.bindPopup("Welcome to Paris 🥖!")

Vous pouvez ensuite activer la geoloc, ajouter le point de l'utilisateur ou toutes autres données interactives qui vous semblent pertinentes !

4. 🎨 Personnalisation de la map

Personnaliser une carte Leaflet permet de créer une expérience utilisateur cohérente avec votre projet. Nous allons voir: comment changer les tuiles, adapter les boutons de zoom à votre design, et créer des popups uniques.

Jouer avec les tuiles

Les tuiles sont la base visuelle de votre carte. Une tuile bien choisie peut renforcer l'identité visuelle d'un projet.
Vous voulez quelque chose d'original, de plus doux ? Optez pour la tile watercolor de Stadia !
🪄Pour trouver des tuiles gratuites voici deux ressources utiles:

Façonner la map (boutons de zoom, container..)

Dans le fichier 📁 global.css on peut expérimenter pas mal de choses et rendre la carte au plus proche de l'identité visuelle de son projet.
Voici un exemple de ce que l'on peut faire:

/* styles généraux /*
.leaflet-container {
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.leaflet-control-container {
    position: absolute;
    top: 11rem;
    left: 1rem;
}

/* styles des boutons liés au zoom /*
.leaflet-control-zoom {
    position: absolute;
    border: none !important;
    top: 10px;
    left: -10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leaflet-touch .leaflet-bar a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: none !important;
    color: white !important;
    font-size: 22px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.673);
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* styles des boutons au survol de la souris /*
.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
    background: #6f00ffb3 !important;
    color: white !important;
    border-color: #6f00ffb3 !important;
}

Pas mal non ? À noter que j'ai désactivé l'attribution par défaut (ajoutez attributionControl: false, à vos options d'initialisation de map) et que j'en ai rajouté une personnalisée.

Vous avez dit pop-up ?

Pour custom sa popup:

on pense à désactiver le style par défaut via le CSS
et ensuite on ajoute la nouvelle popup au marqueur

    const customPopup = `<div class="popup-content">
                            Le meilleur 🥐 de Paris est ici !
                         </div>`

const marker = L.marker([48.875335693359375, 2.3433215618133545], {
            icon: customIcon,
        }).addTo(map)
        marker.bindPopup(customPopup, { closeButton: false })

Et Voilà, Vous savez comment intégrer et personnaliser une carte interactive avec Leaflet 😊.

Et sinon, quels autres outils utilisez-vous pour créer des cartes dans vos applications ?

Top 5 des balises HTML pour un meilleur SEO (avec des exemples)

MandyTrl — Mon, 20 Jan 2025 13:10:18 +0000

Certaines balises HTML, souvent méconnues ou mal utilisées, peuvent avoir un impact significatif sur le référencement de votre site. Je vous propose de voir ou de redécouvrir 5 balises essentielles pour optimiser efficacement votre SEO.

1. `<title>` vs `<meta name="description">` : Les incontournables des moteurs de recherche

La balise <title> définit le titre de votre page dans l’onglet du navigateur et les résultats de recherche (SERP: Search Engine Results Page), ce qui en fait un élément clé 🗝️ du référencement. En parallèle, la balise <meta name="description"> influence l’extrait affiché sous le titre, impactant le taux de clics (CTR: Click-Through Rate).

✅ Les bonnes pratiques à avoir :

Rédiger un titre unique et accrocheur, contenant des mots-clés principaux entre 50 et 60 caractères.
Créer une description engageante, qui donne envie de cliquer, en restant concise (150-160 caractères max).
Éviter de surcharger ces balises avec des mots-clés, car cela pourrait nuire au référencement.

❌ Erreur courante
Laisser les titres et descriptions vides ou générés automatiquement car ils sont souvent peu pertinents. Une mauvaise personnalisation de ces éléments peut desservir votre visibilité.

Exemple

<title>Produits Écologiques pour la Maison | Green Living Store</title>
<meta name="description" content="Découvrez nos produits écologiques pour une maison plus saine et respectueuse de l'environnement : nettoyants naturels, accessoires durables, et bien plus." />

🎯 Pourquoi c'est pertinent ?
Pour le <title> on inclut un mot-clé principal pertinent ("Produits Écologiques pour la Maison") ainsi que le nom de la marque pour renforcer l’identité. Concernant la <meta name="description"> on résume clairement ce que l'utilisateur trouvera sur le site tout en mettant en avant des mots-clés secondaires comme "nettoyants naturels" et "accessoires durables". Enfin, "Découvrez nos produits" finalise le descriptif en incitant l'utilisateur à cliquer.

2. `<img>` avec `alt` : Parlez aux moteurs (et aux humains 💁‍♀️)

La balise <img>, indispensable pour afficher des images, reste pour les moteurs de recherche moins pertinente sans l'attribut descriptif alt qui ne comprennent pas le contenu visuel. En plus de rendre le contenu moins accessible pour vos utilisateurs..

✅ Les bonnes pratiques à avoir :

Ajouter un texte alternatif alt pour décrire brièvement l’image si celle-ci n'est pas purement décorative (comme une icône intégrée à un bouton).
Inclure des mots-clés pertinents avec parcimonie (les web crawlers n'en sont pas fans).
En bonus : utiliser un format moderne (ex. WebP, Avif) pour optimiser les temps de chargement de votre image.

❌ Erreur courante
Laisser l’attribut alt vide ou utiliser des noms génériques comme "image1.png", c'est une opportunité manquée pour votre SEO !

Exemple avec cette image :

On choisira alors comme descriptif :

<img src="phoque-plage.jpg" alt="Phoque gris sur une plage" />

Ou :

<img src="phoque-plage.jpg" alt="Un phoque gris allongé sur une plage de sable, entouré de rochers et sous un ciel bleu clair." />

🎯 Pourquoi c'est pertinent ?
Ici vous avez deux choix : l'un servira à une image pour illustrer un article mais non essentielle pour la compréhension de celui-ci, tandis que le second texte donne une description précise de l’image (éléments clés de la scène inclus), utile pour les moteurs de recherche et les utilisateurs malvoyants surtout s'il s'agit d'un blog sur la vie marine par exemple.

En résumé : Le contexte est important pour savoir quel descriptif opté car le niveau de détail dépend du rôle de l’image dans la page.

Le truc en plus : alt est également un fallback, si l’image ne charge pas (connexion lente, erreur serveur), l’utilisateur verra le texte alternatif à la place.

⚛️ Vous utilisez React ? Voici un bonus
Plus haut je vous parlais des images purement décoratives. Vous pouvez créer un composant réutilisable qui se chargera de remplir ou non l'attribut alt pour ne pas surcharger votre site ce qui le rendra plus accessible pour vos utilisateurs :

<img 
  src="icon.png" 
  alt={isDecorative ? "" : "Description de l'image"} 
  aria-hidden={isDecorative} 
/>

3. `` vs `` : Le poids des mots

Ces deux balises semblent avoir le même effet et pourtant  sert uniquement à l'aspect visuel tandis que  ajoute une valeur sémantique au texte pour signaler que celui-ci est important, Les moteurs de recherche en tiennent compte pour comprendre les mots-clés.

✅ Les bonnes pratiques à avoir :

Utiliser  pour les mots ou expressions clés essentiels pour le sujet de la page.
Garder  pour des éléments purement stylistiques.

❌ Erreur courante
Mettre tout un paragraphe en  dilue son effet.

Exemple

<p>
  Les <strong>oméga-3</strong> sont des acides gras essentiels qui jouent un rôle crucial dans votre santé. Ils sont <b>visuellement</b> mis en avant dans ce texte pour attirer l'œil, mais leur importance réelle est signalée grâce à l’utilisation de la balise <strong>.
</p>
<p>
  Si vous souhaitez améliorer votre bien-être, privilégiez une alimentation riche en <strong>poissons gras</strong>, comme le saumon ou le maquereau. Les graines de lin, bien que <b>moins connues</b>, sont aussi une excellente alternative.
</p>

🎯 Pourquoi c'est pertinent ?
"oméga-3" et "poissons gras" sont des mots clés ou des expressions importantes qui méritent d'être signalées aux moteurs de recherches.
À l'inverse "moins connues" n'apporte rien,  est donc préférable si l'on souhaite une mise en évidence purement visuelle.
LA question à se poser pour choisir : "Est-ce que je veux mettre ce contenu en valeur pour son importance sémantique ou simplement pour une mise en avant visuelle ?"

4. `<a>` avec `title` : Les portes vers le contenu

La balise <a> crée des liens hypertextes, essentiels pour la navigation et le maillage interne. Ajouter un attribut title aide les utilisateurs et moteurs à mieux comprendre le lien.

✅ Les bonnes pratiques à avoir :

Rédiger un texte d’ancre descriptif et concis.
Utiliser l’attribut rel="nofollow" pour les liens sponsorisés ou non pertinents.
Ajoutez un title uniquement si cela apporte une valeur ajoutée au lien.

❌ Erreur courante
Des textes d’ancre vagues ou génériques comme "En savoir plus", qui ne disent rien sur la destination.

Exemple

<a href="https://example.com" title="Découvrez nos produits éco-responsables">Découvrez nos produits</a>

🎯 Pourquoi c'est pertinent ?
Car ça décrit précisément ce que l’utilisateur trouvera en cliquant sur le lien. De plus, si ce lien pointe vers une page importante (comme une catégorie de produits), le texte d’ancre avec des mots-clés améliore le référencement de cette page. À l'inverse on évitera les ancres vagues comme "Cliquez ici" .

5. `<meta>` : Un boost essentiel du référencement

La balise <meta> regroupe plusieurs variantes utiles pour le SEO, au-delà de la description (que l'on a vu plus haut). Je vous propose d'en voir quelques unes supplémentaires pour approfondir le sujet et construire un SEO solide.

✅ Les bonnes pratiques à avoir :

Rédiger une description unique pour chaque page (150-160 caractères max).
Intégrer des mots-clés naturellement.
Utiliser <meta name="robots"> pour contrôler l’indexation.
Ajouter les balises liées aux réseaux sociaux (Open Graph) pour contrôler l’affichage des aperçus des pages web lorsqu'elles sont partagées sur des réseaux sociaux (Facebook, LinkedIn, Twitter..).

❌ Erreur courante

Ne pas configurer les balises Open Graph ou les laisser vides peut entraîner des aperçus incohérents ou peu engageants sur les réseaux sociaux.
Ne pas donner de directives concernant l'indexation des pages peut avoir pour conséquences de mettre en avant des pages inutiles ou sensibles, ou exclure des pages réellement importante, compromettant leur référencement et leur visibilité.

Exemple avec un blog sur la vie marine

<meta name="description" content="Explorez les secrets des récifs coralliens : leur rôle crucial dans l'écosystème marin, les menaces qu'ils affrontent et comment les protéger." />
<meta name="robots" content="index, follow" />
<meta property="og:title" content="Les mystères des récifs coralliens" />
<meta property="og:description" content="Découvrez pourquoi les récifs coralliens sont vitaux pour la planète et ce que nous pouvons faire pour les préserver." />
<meta property="og:image" content="https://example.com/images/recifs-coralliens.jpg" />
<meta property="og:url" content="https://example.com/recifs-coralliens" />

Et Voilà, vous avez toutes les pièces du puzzle 🧩 pour assembler un site cohérent et SEO-friendly pour les moteurs de recherche et vos utilisateurs :)

Pourquoi la fonction pure rend un code plus robuste

MandyTrl — Wed, 15 Jan 2025 10:06:57 +0000

Une fois que l'on commence à construire nos premiers algorithmes, vient l'envie et la nécessité d'écrire un code plus maintenable. C'est là qu'entre en jeux la fonction pure.

Qu'est-ce qu'une fonction dite "pure" ?

C'est une fonction qui ne va générer aucun effet de bord; c'est-à-dire qu'elle ne va rien modifier en dehors de son scope.
Exemples :

pas de modification de variables globales,
pas de modification des objets passés en argument,
pas de changements dans l'interface utilisateur,
pas d'appels réseau, etc..

Elle est plus lisible, prévisible (réduit les erreurs) et facile à tester et à débuguer. Avec les mêmes paramètres elle renvoie le même résultat.

Exemples de fonctions pures

Prenons l'exemple suivant pour calculer une moyenne :

const calculateAverage = (numbers) => {
  if (numbers.length === 0) return 0

  const totalSum = numbers.reduce((sum, num) => sum + num, 0)
  return totalSum / numbers.length
}


const scores = [80, 90, 75, 85, 95]
const average = calculateAverage(scores)

console.log(average) // 85

Mais sans le savoir vous utilisez sûrement déjà des fonctions pures grâces aux méthodes JavaScript comme .toUppercase() qui ne modifie pas la chaîne d'origine, mais retourne une nouvelle chaîne en majuscule :

const text = "hello"

const upperText = text.toUpperCase()

console.log(upperText) // "HELLO"
console.log(text) // "hello" > la chaîne d'origine n'a pas été modifiée

Et Voilà, vous savez tout sur les fonctions pures :)

DEV Community: MandyTrl

React : un useCookie custom sans dépendance externe

Les étapes

Création du hook custom

Création du helper

Configuration et préparation

Lire un cookie

Supprimer un cookie

Modifier un cookie

Utilisation du hook dans un composant

🧹Clean Code de Robert C. Martin - Résumé express + exemples

🗒️Sommaire

Lisibilité et clarté

Petites fonctions, une seule responsabilité

Limiter la taille des fonctions

Eviter la duplication (DRY)

Commenter, oui, mais coder pour ne pas avoir à le faire

Garder une structure logique du code

Ecrire un code modulaire et testable

Gérer les erreurs proprement

Introduction à l'éco-conception 🍃 web

Impacts concrets du web sur l’environnement

🏋️‍♀️ Le poids des pages web explose

Des émissions invisibles mais bien réelles

L'effet rebond : mieux coder pour consommer.. encore plus ?

Un enjeu réglementaire et matériel

Outils pour mesurer l’impact carbone de son site

Bonnes pratiques générales

⚡Performance & sobriété

🎨 Design & accessibilité

🛠️ Développement

Quelques exemples de sites sobres et esthétiques

Les événements dans les formulaires : valider et améliorer l’UX

Les principaux événements des formulaires

input

change

focus et blur

submit

Améliorer l'UX grâce aux événements

La validation en temps réel

Autofocus et mise en avant des champs

Désactivation du bouton de soumission

Empêcher l'envoi avec preventDefault()

⭐ Bonus

series: "Comprendre les événements en JavaScript"

Github - Comment protéger sa branche (les Branch Protection Rules)

À quoi sert une BPR ?

Les options possibles

📝 Contrôler les contributions

🔒 Sécuriser les commits

✅ La validation automatique

🚫 Restrictions avancées

Quand et comment configurer une BPR ?

👩‍💻 Projet perso

🤝 Projet open source (avec une petite communauté)

🏢 Projet en équipe (pour des projets d'entreprise ou plus structurés)

👀 Où configurer ça sur GitHub ?

Écouter des événements globaux en JavaScript

Les principaux événements globaux

Ajouter un écouteur d'événement global

Retirer un écouteur d'événement global

Gérer les événements globaux en React ⚛️

Gérer les événements sur un bouton en JavaScript

Les événements courants sur un bouton

🖱️ Le clic et le double-clic

Le survol avec mouseover et mouseout

Le maintien avec mousedown et mouseup

L'entrée et la sortie du focus avec focus et blur

Accessibilité et bonnes pratiques

Aller plus loin

⭐ Bonus

series: "Comprendre les événements en JavaScript"

JavaScript - Comment créer un tableau

[] ou la syntaxe littérale

new Array() et ses pièges

L'alternative: Array.of()

Le plus puisant: Array.from()

[...] ou le spread operator

.split() pour les chaînes de caractères

Intégrer une map avec Leaflet sur un projet Next

`input`

`change`

`focus` et `blur`

`submit`

Empêcher l'envoi avec `preventDefault()`

Le survol avec `mouseover` et `mouseout`

Le maintien avec `mousedown` et `mouseup`

L'entrée et la sortie du focus avec `focus` et `blur`

`[]` ou la syntaxe littérale

`new Array()` et ses pièges

L'alternative: `Array.of()`

Le plus puisant: `Array.from()`

`[...]` ou le spread operator

`.split()` pour les chaînes de caractères

Pourquoi ne pas utiliser `react-leaflet` ?

Création d'un composant `<Map />`

Pourquoi `"use client"` n'est pas suffisant ?

1. `<title>` vs `<meta name="description">` : Les incontournables des moteurs de recherche

2. `<img>` avec `alt` : Parlez aux moteurs (et aux humains 💁‍♀️)

3. `<strong>` vs `<b>` : Le poids des mots

4. `<a>` avec `title` : Les portes vers le contenu

5. `<meta>` : Un boost essentiel du référencement