Do czego ludzie używają JustZix

Dla kogo: Freelancer, agencja, konsultant.

Problem: Każdy klient ma swój panel admina, dashboard czy staging, gdzie potrzebne są drobne poprawki — inne kolory, ukryte przyciski, banner DEV. Ciągłe przełączanie jest męczące.

Rozwiązanie: Każdy projekt ma swój katalog z własnym wzorcem URL. Przełączasz cały zestaw poprawek dla klienta jednym klikiem na pływającym przycisku — lub auto-toggle po URL.

Dla kogo: Każdy, kto pracuje na środowisku staging wyglądającym jak produkcja.

Problem: Wykonałeś destruktywną akcję myśląc, że jesteś na stagingu — okazało się, że to produkcja. Zdarza się każdemu.

Rozwiązanie: Ustaw katalog z wzorcem URL *staging* albo Twojej domeny dev. Wstrzykuj czerwony banner u góry każdej strony. Dorzuć JS auto-loginu, żebyś nie musiał wpisywać haseł.

/* CSS — banner DEV */
body::before {
  content: "ŚRODOWISKO DEV";
  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; }

Dla kogo: Tester, PM, projektant — osoby spoza działu programistów, które muszą szybko ustawić dane testowe.

Problem: Wypełnienie tego samego formularza rejestracji 30 razy żeby przetestować flow — palce bolą. Proszenie devów o „magiczne linki" — strata ich czasu.

Rozwiązanie: Tworzysz przyciski akcji: FILL (auto-uzupełnia dane testowe), CART (dodaje produkt do koszyka), CLR (czyści formularz), STATE (ustawia widget w konkretny stan). Jeden klik = ta sama akcja powtórzona 100 razy.

// Akcja 'FILL' — uzupełnij dane testowe
const data = {
  email: 'test@example.com',
  phone: '600000000',
  firstName: 'Jan', lastName: 'Testowy'
};
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 }));
  }
});

Dla kogo: Każdy, kto czyta dokumentację, blogi, serwisy informacyjne.

Problem: Strona ma za małą czcionkę, słaby kontrast, nachalne reklamy, paywalle, cookie bannery zasłaniające treść. Autor nie przyjdzie tego naprawić.

Rozwiązanie: Ukryj reklamy/bannery, zwiększ tekst, dodaj tryb czytania. Działa na dowolnej stronie — bez zgody autora. Synchronizuj swoje ustawienia automatycznie między urządzeniami.

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

Dla kogo: Programista, analityk marketingowy, e-commerce.

Problem: Trzeba zweryfikować, że eventy dataLayer.push wysyłają się we właściwym momencie z właściwym payloadem. Dodawanie console.log do produkcyjnego kodu — tabu.

Rozwiązanie: Wstrzyknięty JS opakowujący dataLayer.push i gtag logowaniem — bez dotykania kodu strony. Widoczne w DevTools, usuwane jednym klikiem.

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

Dla kogo: Każdy, kto codziennie używa CMS-a lub backendu — admin Wordpressa, admin Magento, custom panele.

Problem: Panele admina zwykle robione „dla każdego" — kolumny za wąskie, nagłówki tabel nie pinują się przy scrollu, nie widać na pierwszy rzut oka co jest co.

Rozwiązanie: CSS poprawiający tabele, listy, formularze. Sticky nagłówki, większy font, alternujące kolory wierszy. Przyciski akcji do powtarzanych zadań („Filtr testowy", „Reset widoku").

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

Dla kogo: Każdy, kto musi „rozejrzeć się" po produkcji bez ryzyka, że coś zmieni.

Problem: Awaria na produkcji, trzeba zbadać sytuację. Jeden zły klik na „Usuń" czy „Wyślij" i jest jeszcze gorzej.

Rozwiązanie: Przycisk akcji RO („read-only"), który ukrywa wszystkie przyciski „Usuń", „Zapisz", „Wyślij". Jeden klik — możesz przeglądać bez ryzyka przypadkowych szkód. Kolejny klik — przywracasz.

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