← Wszystkie wpisy

Poradniki

Oznaczenia środowisk DEV/STAGING/PROD — 5 sposobów żeby nie zniszczyć produkcji

15 maja 2026 · autor JustZix Team

Klikasz „Usuń wszystkie konta" myśląc, że jesteś na stagingu. Okazuje się, że na produkcji. Zdarza się każdemu DevOpsowi i programiście. Pięć technik wizualnego oznaczania środowisk, żebyś już nigdy nie wpadł w tę pułapkę.

Sposób 1 — czerwony banner na górze

Najbardziej oczywiste i skuteczne. Pasek u góry każdej strony, którego nie da się zignorować:

body::before {
  content: "ŚRODOWISKO DEV — uwaga, dane mogą być nieprodukcyjne";
  position: fixed;
  top: 0; left: 0; right: 0;
  background: repeating-linear-gradient(
    -45deg, #dc2626, #dc2626 12px, #b91c1c 12px, #b91c1c 24px
  );
  color: #fff;
  text-align: center;
  padding: 6px 12px;
  font: 700 13px/1.4 ui-monospace, monospace;
  letter-spacing: .5px;
  z-index: 999999;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Padding na body żeby kontent nie był pod paskiem */
body { padding-top: 32px !important; }

Repeating gradient z paskami daje „taśmę ostrzegawczą" jak na placach budowy — ewolucyjnie kojarzy się z niebezpieczeństwem. Bez gradient byłby zwykłym banner-info; z gradientem nikt go nie zignoruje.

Sposób 2 — floating badge w rogu

Banner u góry jest agresywny i zajmuje miejsce. Czasem chcesz delikatniej — small badge w rogu:

body::after {
  content: "DEV";
  position: fixed;
  bottom: 16px; left: 16px;
  background: #dc2626;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font: 700 12px ui-monospace, monospace;
  letter-spacing: 1px;
  z-index: 999999;
  box-shadow: 0 4px 12px rgba(220, 38, 38, .4);
  pointer-events: none; /* żeby nie blokować klików */
}

Wbity w róg, widoczny ale niedurny. pointer-events: none ważne — bez tego badge zasłaniałby przyciski.

Sposób 3 — zmiana faviconu

Banner widać tylko gdy patrzysz na stronę. Tab w przeglądarce widoczna nawet po Cmd+Tab. Zmień favicon:

// Wstrzykuj nowy favicon (czerwone kółko z literą D)
const canvas = document.createElement('canvas');
canvas.width = 32; canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#dc2626';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#fff';
ctx.font = 'bold 18px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('D', 16, 17);

// Usuń stare favicons
document.querySelectorAll('link[rel*="icon"]').forEach(el => el.remove());

// Dodaj nowy
const link = document.createElement('link');
link.rel = 'icon';
link.type = 'image/png';
link.href = canvas.toDataURL();
document.head.appendChild(link);

Czerwona D w tabie, zawsze widoczna. Działa też w bookmarkach — bookmark stagingu od bookmarka produkcji odróżnisz na pierwszy rzut oka.

Sposób 4 — subtelne tinting viewportu

Najbardziej elegancki — light overlay barwowy, który nadaje całej stronie ledwie zauważalny tinting:

/* Pomarańczowy tint dla STAGING, czerwony dla DEV */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(245, 158, 11, .04);
  pointer-events: none;
  z-index: 999998;
  mix-blend-mode: multiply;
}

rgba(..., .04) = niemal niewidoczne, ale Twój mózg po kilku sekundach wie, że „coś jest inaczej". Po kilku dniach widzisz różnicę instynktownie. Bez agresji bannera.

Sposób 5 — prefix w tytule taba

Tab przeglądarki pokazuje document.title. Dorzuć prefix:

// Prefix tytułu + lekka animacja gdy długo jesteśmy na tabie
const PREFIX = '[DEV] ';

function ensurePrefix() {
  if (!document.title.startsWith(PREFIX)) {
    document.title = PREFIX + document.title;
  }
}

ensurePrefix();

// Watch out — SPA-y często zmieniają title dynamicznie
new MutationObserver(ensurePrefix)
  .observe(document.querySelector('title'), { childList: true });

MutationObserver łapie SPA-y które zmieniają title na route change. Bez observera prefix znika po pierwszym przejściu.

Pułapki

• Nie używaj na produkcji — wzorzec URL musi być wąski: https://staging.*, https://*-dev.*, http://localhost:*. Nie *.
• z-index conflict — niektóre cookie bannery albo modale używają z-index 9999, Twoje markery muszą być powyżej (999999 powinno wystarczać).
• print stylesheet — banner pojawi się w PDF-ie wydruku. Dodaj @media print { body::before { display: none } } żeby pominąć.
• iframe — strona zagnieżdżona w iframie nie dziedziczy CSS-a parent-a. Wzorzec URL musi pasować też do iframe-content, żeby marker był widoczny i w iframie.

Jak wpiąć w JustZix

1. Zainstaluj JustZix.
2. Katalog „Env markers". Reguła per środowisko:
   • Wzorzec https://*-staging.firma.com/* → Sposób 1 (banner) + Sposób 3 (favicon).
   • Wzorzec http://localhost:*/* → Sposób 2 (badge) + Sposób 5 (prefix tytułu).
3. Share link do całego zespołu — wszyscy dostają to samo oznaczenie środowisk.

Zainstaluj JustZix za darmo i przestań niszczyć produkcję przez „nieuważne klikanie".