A cosa serve JustZix alle persone

Per chi: Freelance, agenzia, consulente.

Problema: Ogni cliente ha il proprio pannello di amministrazione, dashboard o staging che richiede piccole modifiche — colori diversi, pulsanti nascosti, banner dev. Cambiare di continuo è fastidioso.

Soluzione: Ogni progetto ha la propria cartella con il proprio pattern URL. Cambia tutte le modifiche di un cliente con un clic sul pulsante flottante — o in automatico in base all'URL.

Per chi: Chiunque lavori su ambienti di staging la cui interfaccia è identica alla produzione.

Problema: Hai eseguito un'azione distruttiva pensando di essere sullo staging quando in realtà era la produzione. Capita a tutti.

Soluzione: Imposta una cartella con il pattern URL *staging* o il tuo dominio dev. Inietta un banner rosso in cima a ogni pagina. Aggiungi un JS di login automatico per non digitare le credenziali.

/* 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; }

Per chi: Tester, PM, designer — non sviluppatori che devono impostare rapidamente dati di test.

Problema: Compilare lo stesso modulo di registrazione 30 volte per testare un flusso — le dita fanno male. Chiedere ai dev « link magici » — uno spreco del loro tempo.

Soluzione: Crea pulsanti azione: FILL (compila dati di test), CART (aggiungi prodotto al carrello), CLR (svuota il modulo), STATE (imposta un widget in uno stato preciso). Un clic = la stessa azione ripetuta 100 volte.

// 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 }));
  }
});

Per chi: Chiunque legga documentazione, blog, siti di notizie.

Problema: Il sito ha testo minuscolo, scarso contrasto, pubblicità invadenti, paywall, banner dei cookie che coprono il contenuto. L'autore non verrà a sistemarlo.

Soluzione: Nascondi pubblicità/banner, ingrandisci il testo, aggiungi una modalità lettura. Funziona su qualsiasi sito — senza il permesso dell'autore. Sincronizza le tue modifiche tra dispositivi automaticamente.

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

Per chi: Sviluppatore, analista di marketing, e-commerce.

Problema: Devi verificare che gli eventi dataLayer.push partano al momento giusto con il payload giusto. Aggiungere console.log al codice di produzione è tabù.

Soluzione: Inietta JS che avvolge dataLayer.push e gtag con il logging — senza toccare il codice del sito. Visibile nei DevTools, rimovibile con 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);
  };
}

Per chi: Chiunque usi quotidianamente un CMS o un back-office — admin WordPress, admin Magento, pannelli personalizzati.

Problema: I pannelli di amministrazione sono di solito fatti « per tutti » — colonne troppo strette, intestazioni di tabella che non restano fisse allo scroll, non si capisce a colpo d'occhio cosa è cosa.

Soluzione: CSS che sistema tabelle, elenchi, moduli. Intestazioni fisse, font più grande, colori di riga alternati. Pulsanti azione per attività ripetute (« Filtro di test », « Reimposta vista »).

/* 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;
}

Per chi: Chiunque debba « dare un'occhiata » alla produzione senza il rischio di cambiare qualcosa.

Problema: Un'emergenza in produzione, devi indagare. Un clic sbagliato su « Elimina » o « Invia » e la situazione peggiora.

Soluzione: Pulsante azione RO (« read-only ») che nasconde tutti i pulsanti « Elimina », « Salva », « Invia ». Un clic — puoi navigare senza rischio di danni accidentali. Un altro clic — ripristini.

// 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');