Le Kit de Survie de l'Indie Hacker : 5 Snippets que je copie-colle partout

On connaît tous ce moment. Ce moment précis où l'excitation d'une nouvelle idée de SaaS ou de side-project nous envahit. On ouvre VS Code, on crée un nouveau dossier... et on se retrouve face à une page blanche.

Puis, la réalité nous rattrape : il faut configurer le CSS, mettre en place les meta tags pour le SEO, créer cette foutue fonction de "Copier-coller" que l'on a déjà codée dix fois mais qu'on ne retrouve jamais.

Je m'appelle Sahaza Marline, je suis Indie Hacker, et j'en ai eu assez de réinventer la roue à chaque MVP. Snippetothèque est née de cette frustration. Ce n'est pas juste un blog, c'est mon "deuxième cerveau" de développeur.

Pour ce premier article, je vous ouvre mon VS Code User Snippets. Voici les 5 blocs de code que je colle systématiquement dans chaque projet avant même d'écrire la première ligne de logique métier.

1. Le "Modern Reset" CSS (Sans lourdeur)

Oubliez les fichiers normalize.css de 10km de long. En 2025, les navigateurs sont bien plus standardisés. Voici le reset minimaliste que j'utilise pour avoir une base saine, une typographie fluide et des images qui ne cassent pas le layout.

Il règle 90% des maux de tête liés au responsive design.

/* Le Reset Minimaliste de l'Indie Hacker */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Rendu font pro sur Mac */
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%; /* Empêche les débordements */
}

input, button, textarea, select {
  font: inherit; /* Hérite de la font du body */
}

L'astuce de Sahaza : Notez le scroll-behavior: smooth. C'est ce qui donne cet effet de défilement fluide quand on clique sur une ancre, sans avoir besoin d'une seule ligne de JavaScript.

2. La fonction "Copier dans le presse-papier" (Bulletproof)

Si vous construisez un outil pour développeurs, un dashboard ou une documentation, vos utilisateurs voudront copier des API keys ou des snippets. L'ancienne méthode document.execCommand est dépréciée. Voici la méthode moderne, asynchrone et robuste.

/**
 * Copie un texte dans le presse-papier de manière sécurisée
 * @param {string} text - Le texte à copier
 * @returns {Promise} - True si succès
 */
async function copyToClipboard(text) {
  if (!navigator.clipboard) {
    // Fallback pour les très vieux navigateurs (si nécessaire)
    console.warn("Clipboard API non supportée");
    return false;
  }
  
  try {
    await navigator.clipboard.writeText(text);
    console.log('Copié avec succès !');
    return true;
  } catch (err) {
    console.error('Échec de la copie :', err);
    return false;
  }
}

// Utilisation :
// copyToClipboard("Votre Clé API : sk_12345");

3. Le composant "Glassmorphism" (Tailwind CSS)

Le design, c'est souvent ce qui différencie un projet amateur d'un produit crédible. L'effet "verre dépoli" (Glassmorphism) est très populaire dans l'écosystème Tech/Web3. Au lieu de retaper les propriétés CSS à chaque fois, j'utilise cette classe utilitaire dans Tailwind.

Ajoutez ceci dans votre fichier de configuration ou votre CSS principal :

/* Dans votre fichier CSS input Tailwind */
@layer components {
  .glass-panel {
    @apply bg-white/70 backdrop-blur-lg border border-white/20 shadow-xl;
    /* Pour le Dark Mode automatique */
    @apply dark:bg-slate-900/70 dark:border-slate-700/50;
  }
}

Cela crée instantanément une carte moderne, lisible, qui s'adapte à n'importe quel arrière-plan coloré.

4. Le Debounce (Optimisation des performances)

Vous avez une barre de recherche qui interroge votre base de données ? Si vous lancez une requête API à chaque frappe de clavier (onKeyUp), vous allez faire exploser votre serveur (ou votre facture Firebase). La solution est le "Debounce".

Ce snippet reporte l'exécution de la fonction tant que l'utilisateur n'a pas arrêté d'écrire depuis X millisecondes.

/**
 * Empêche une fonction d'être appelée trop souvent
 * @param {Function} func - La fonction à exécuter
 * @param {number} wait - Le délai en ms (ex: 300)
 */
function debounce(func, wait) {
  let timeout;
  
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Exemple : Recherche utilisateur
const handleSearch = debounce((query) => {
  console.log("Recherche API pour :", query);
}, 500);

5. La balise Meta "Social Share" (Le kit SEO Vira)

On oublie souvent qu'un projet ne décolle pas s'il ne ressemble à rien quand on le partage sur Twitter (X) ou LinkedIn. Ne laissez pas les réseaux sociaux choisir une image au hasard sur votre page.

Voici le boilerplate HTML <head> que j'ai dans tous mes templates :

Conclusion : Coder moins, livrer plus

Ces 5 snippets ne sont pas révolutionnaires pris séparément. Mais ensemble, ils forment une base solide qui me fait gagner environ 2 heures au démarrage de chaque projet. En tant qu'Indie Hacker, ces 2 heures sont précieuses : c'est le temps que je peux consacrer au marketing ou à parler à mes utilisateurs.

Snippetothèque va servir à ça : archiver ces petites victoires techniques pour que nous puissions tous coder plus vite.

Et vous, quel est LE bout de code dont vous ne pouvez pas vous passer ? Dites-le-moi sur Twitter ou dans les commentaires (si je décide d'en mettre un jour 😉).

À très vite pour le prochain snippet.

— Sahaza.