Для чего используют JustZix

Для кого: Фрилансер, агентство, консультант.

Проблема: У каждого клиента свой админ-панель, дашборд или staging, требующий мелких правок — другие цвета, скрытые кнопки, dev-баннеры. Постоянное переключение утомляет.

Решение: У каждого проекта своя папка со своим шаблоном URL. Переключайте весь набор правок клиента одним кликом на плавающей кнопке — или автоматически по URL.

Для кого: Все, кто работает на staging-окружениях, чей интерфейс выглядит так же, как продакшен.

Проблема: Вы выполнили разрушительное действие, думая, что находитесь на staging, а это оказался продакшен. С каждым бывает.

Решение: Задайте папку с шаблоном URL *staging* или вашим dev-доменом. Внедряйте красный баннер вверху каждой страницы. Добавьте JS автологина, чтобы не вводить учётные данные.

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

Для кого: Тестировщик, PM, дизайнер — не разработчики, которым нужно быстро настроить тестовые данные.

Проблема: Заполнять одну и ту же форму регистрации 30 раз, чтобы протестировать флоу — пальцы болят. Просить у разработчиков «волшебные ссылки» — тратить их время.

Решение: Создайте кнопки действий: FILL (автозаполнение тестовых данных), CART (добавить товар в корзину), CLR (очистить форму), STATE (задать виджету конкретное состояние). Один клик = то же действие, повторённое 100 раз.

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

Для кого: Все, кто читает документацию, блоги, новостные сайты.

Проблема: У сайта крошечный шрифт, слабый контраст, навязчивая реклама, пейволлы, баннеры cookie, перекрывающие содержимое. Автор это не исправит.

Решение: Скрывайте рекламу/баннеры, увеличивайте текст, добавляйте режим чтения. Работает на любом сайте — без разрешения автора. Синхронизируйте свои правки между устройствами автоматически.

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

Для кого: Разработчик, маркетинговый аналитик, e-commerce.

Проблема: Нужно убедиться, что события dataLayer.push срабатывают в нужный момент с нужным payload. Добавлять console.log в продакшен-код — табу.

Решение: Внедрите JS, оборачивающий dataLayer.push и gtag логированием — не трогая код сайта. Видно в DevTools, удаляется одним кликом.

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

Для кого: Все, кто ежедневно пользуется CMS или бэк-офисом — админка WordPress, админка Magento, кастомные панели.

Проблема: Админ-панели обычно делают «для всех» — колонки слишком узкие, заголовки таблиц не закрепляются при прокрутке, с первого взгляда не понять, что есть что.

Решение: CSS, исправляющий таблицы, списки, формы. Закреплённые заголовки, более крупный шрифт, чередующиеся цвета строк. Кнопки действий для повторяющихся задач («Тестовый фильтр», «Сброс вида»).

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

Для кого: Все, кому нужно «осмотреться» в продакшене без риска что-то изменить.

Проблема: ЧП на продакшене, нужно разобраться. Один неверный клик на «Удалить» или «Отправить» — и ситуация хуже.

Решение: Кнопка действия RO («read-only»), скрывающая все кнопки «Удалить», «Сохранить», «Отправить». Один клик — можно просматривать без риска случайного ущерба. Ещё клик — восстанавливаешь.

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