Kappalizer – nástroj pro označení prostředí webu ve Chromu

Celý článek

Jedná se o jednoduché rozšíření do Chromu, které vloží barevný pruh do záhlaví webové stránky. Pruh mění barvu podle toho, jak si ji nastavíte v rozšíření. Můžete si tedy rozlišit různá prostředí, ve kterých momentálně pracujete (devel, staging, production).

Proč nástroj vznikl

V devel prostředí vznikají různá testovací data, která nikdy nebudou vystavena veřejně. V mém případě se občas z testovacích důvodů objeví v systému různorodé entity se jmény Test, testtA, Babiš, ttt, testtest. Občas se mi stává, že moje kreativně pojmenované entity málem (důraz na slovo málem) vznikají na jiném prostředí než devel, protože prostředí máme jako máku (devel, staging, production…).

Hledal jsem nějaká stávající řešení v podobě rozšíření do prohlížeče Chrome a našel jsem akorát jedno, které mi označilo stránku průhledným proužkem v pravém horním rohu stránky, který nebyl téměř vidět a nebyla skoro žádná možnost modifikace. Proto jsem se rozhodl vytvořit si vlastní řešení. Napadlo mě, si webovou stránku (aplikaci) označit nějakým barevným pruhem, abych snadno rozeznal prostředí, na kterém se momentálně nacházím.

Instalace a použití

Stačí si aplikaci nainstalovat jako rozšíření do Chrome. V pravém horním rohu prohlížeče pak najdete ikonu aplikace.

Jak na to

K tomu, aby nám nástroj vložil barevný pruh do webové stránky, stačí vyplnit 3 základní informace:

1. Host – host na kterém běží naše webová stránka (aplikace), př: localhost:8000, staging.zdrojak.cz.
2. Title – titulek pro označení prostředí, př: devel.
3. Color – barva pruhu.

Customizace pomocí CSS

Pokud se nám na pruhu cokoliv nelíbí (velikost, šířka, …), nebo se nezobrazuje korektně, můžeme jakékoliv vlastnosti rámečku kustomizovat pomocí CSS – kliknutím na tlačítko Customize. Zde jsou nachystané dva selektory:

• .color-mark – selektuje celý pruh
• .color-mark-title – selektuje titulek v pruhu, který zadáme ve formuláři.