Para qué usa la gente JustZix

Para quién: Freelance, agencia, consultor.

Problema: Cada cliente tiene su propio panel de administración, dashboard o staging que necesita pequeños ajustes — colores distintos, botones ocultos, banners dev. Cambiar constantemente cansa.

Solución: Cada proyecto tiene su propia carpeta con su propio patrón de URL. Cambia todos los ajustes de un cliente con un clic en el botón flotante — o de forma automática según la URL.

Para quién: Cualquiera que trabaje en entornos de staging cuya interfaz es idéntica a la de producción.

Problema: Hiciste una acción destructiva creyendo estar en staging cuando en realidad era producción. Le pasa a todos.

Solución: Configura una carpeta con el patrón de URL *staging* o tu dominio dev. Inyecta un banner rojo en la parte superior de cada página. Añade un JS de inicio de sesión automático para no escribir credenciales.

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

Para quién: Tester, PM, diseñador — personas no técnicas que necesitan configurar datos de prueba rápidamente.

Problema: Rellenar el mismo formulario de registro 30 veces para probar un flujo — duelen los dedos. Pedir «enlaces mágicos» a los devs — les hace perder el tiempo.

Solución: Crea botones de acción: FILL (autocompleta datos de prueba), CART (añade un producto al carrito), CLR (vacía el formulario), STATE (pone un widget en un estado concreto). Un clic = la misma acción repetida 100 veces.

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

Para quién: Cualquiera que lea documentación, blogs, sitios de noticias.

Problema: El sitio tiene texto diminuto, poco contraste, anuncios intrusivos, paywalls, banners de cookies que tapan el contenido. El autor no va a venir a arreglarlo.

Solución: Oculta anuncios/banners, aumenta el tamaño del texto, añade un modo de lectura. Funciona en cualquier sitio — sin permiso del autor. Sincroniza tus ajustes entre dispositivos automáticamente.

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

Para quién: Desarrollador, analista de marketing, e-commerce.

Problema: Necesitas verificar que los eventos dataLayer.push se disparan en el momento correcto con el payload correcto. Añadir console.log al código de producción es tabú.

Solución: Inyecta JS que envuelve dataLayer.push y gtag con registro — sin tocar el código del sitio. Visible en DevTools, eliminable 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);
  };
}

Para quién: Cualquiera que use a diario un CMS o un back-office — admin de WordPress, admin de Magento, paneles personalizados.

Problema: Los paneles de administración suelen estar hechos «para todos» — columnas demasiado estrechas, encabezados de tabla que no se fijan al desplazar, no se ve de un vistazo qué es qué.

Solución: CSS que arregla tablas, listas, formularios. Encabezados fijos, fuentes más grandes, colores de fila alternados. Botones de acción para tareas repetidas («Filtro de prueba», «Restablecer 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;
}

Para quién: Cualquiera que necesite «echar un vistazo» a producción sin riesgo de cambiar algo.

Problema: Una emergencia en producción, tienes que investigar. Un clic equivocado en «Eliminar» o «Enviar» y la situación empeora.

Solución: Botón de acción RO («read-only») que oculta todos los botones «Eliminar», «Guardar», «Enviar». Un clic — puedes navegar sin riesgo de daños accidentales. Otro clic — restauras.

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