À quoi les gens utilisent JustZix

Pour qui: Freelance, agence, consultant.

Problème: Chaque client a son propre panneau d'administration, tableau de bord ou staging qui nécessite de légers ajustements — couleurs différentes, boutons masqués, bannières dev. Basculer en permanence est pénible.

Solution: Chaque projet a son propre dossier avec son propre motif d'URL. Basculez tous les ajustements d'un client en un clic sur le bouton flottant — ou automatiquement selon l'URL.

Pour qui: Quiconque travaille sur des environnements de staging dont l'interface ressemble à la production.

Problème: Vous avez fait une action destructive en pensant être sur le staging alors que c'était la production. Ça arrive à tout le monde.

Solution: Créez un dossier avec le motif d'URL *staging* ou votre domaine dev. Injectez une bannière rouge en haut de chaque page. Ajoutez un JS d'auto-connexion pour ne plus saisir d'identifiants.

/* CSS — DEV banner */
body::before {
  content: "DEV ENVIRONMENT";
  position: fixed; top: 0; left: 0; right: 0;
  background: #dc2626; color: white;
  text-align: center; padding: 4px;
  font-weight: bold; z-index: 999999;
  font-family: monospace;
}
body { padding-top: 28px !important; }

Pour qui: Testeur, PM, designer — des non-développeurs qui doivent configurer rapidement des données de test.

Problème: Remplir le même formulaire d'inscription 30 fois pour tester un parcours — les doigts font mal. Demander des « liens magiques » aux devs — une perte de leur temps.

Solution: Créez des boutons d'action : FILL (remplir des données de test), CART (ajouter un produit au panier), CLR (vider le formulaire), STATE (mettre un widget dans un état précis). Un clic = la même action répétée 100 fois.

// Action 'FILL' — fill test data
const data = {
  email: 'test@example.com',
  phone: '600000000',
  firstName: 'John', lastName: 'Tester'
};
Object.keys(data).forEach(name => {
  const el = document.querySelector(`[name="${name}"]`);
  if (el) {
    el.value = data[name];
    el.dispatchEvent(new Event('input', { bubbles: true }));
    el.dispatchEvent(new Event('change', { bubbles: true }));
  }
});

Pour qui: Quiconque lit de la documentation, des blogs, des sites d'actualité.

Problème: Le site a un texte minuscule, un faible contraste, des pubs intrusives, des paywalls, des bannières de cookies qui recouvrent le contenu. L'auteur ne viendra pas le corriger.

Solution: Masquez les pubs/bannières, agrandissez le texte, ajoutez un mode lecture. Fonctionne sur n'importe quel site — sans l'autorisation de l'auteur. Synchronisez vos ajustements entre appareils automatiquement.

/* Hide common ad and tracker elements */
.ad, .ads, .advertisement,
.banner-ad, [class*="ad-banner"],
[id*="google_ads"],
.cookie-banner, #cookie-notice {
  display: none !important;
}

Pour qui: Développeur, analyste marketing, e-commerce.

Problème: Vous devez vérifier que les événements dataLayer.push se déclenchent au bon moment avec la bonne charge utile. Ajouter console.log au code de production est tabou.

Solution: Injectez du JS qui enrobe dataLayer.push et gtag avec de la journalisation — sans toucher au code du site. Visible dans les DevTools, retirable en un clic.

// Log all GTM dataLayer pushes
const origPush = window.dataLayer?.push;
if (origPush) {
  window.dataLayer.push = function(...args) {
    console.log('%c[GTM]',
      'color:#16a34a;font-weight:bold', args);
    return origPush.apply(window.dataLayer, args);
  };
}

Pour qui: Quiconque utilise quotidiennement un CMS ou un back-office — admin WordPress, admin Magento, panneaux sur mesure.

Problème: Les panneaux d'administration sont généralement conçus « pour tout le monde » — colonnes trop étroites, en-têtes de tableau qui ne restent pas fixes au défilement, on ne voit pas d'un coup d'œil ce qui est quoi.

Solution: Du CSS qui corrige tableaux, listes, formulaires. En-têtes fixes, polices plus grandes, couleurs de lignes alternées. Boutons d'action pour les tâches répétées (« Filtre de test », « Réinitialiser la vue »).

/* Make admin tables more readable */
table.admin-list td, table.admin-list th {
  padding: 8px 12px !important;
  font-size: 14px !important;
}
table.admin-list thead {
  position: sticky; top: 0;
  background: white; z-index: 10;
}
table.admin-list tbody tr:nth-child(odd) {
  background: #f9fafb;
}

Pour qui: Quiconque doit « jeter un œil » à la production sans risquer de modifier quelque chose.

Problème: Une urgence en production, vous devez enquêter. Un mauvais clic sur « Supprimer » ou « Envoyer » et la situation empire.

Solution: Bouton d'action RO (« read-only ») qui masque tous les boutons « Supprimer », « Enregistrer », « Envoyer ». Un clic — vous naviguez sans risque de dégât accidentel. Un autre clic — restauration.

// Action 'RO' — hide all destructive buttons
document.querySelectorAll(
  'button[type="submit"], .delete-btn, .danger-btn, [class*="delete"]'
).forEach(b => b.style.display = 'none');
console.warn('READ-ONLY MODE enabled');