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

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.

Full-stack developer in IBB

Javascript enthusiast, focusing on server side scripting and clean code

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 2

Přehled komentářů

Mates SPA aplikace a root kontejner
Tomáš Dusík Tomas
Zdroj: https://www.zdrojak.cz/?p=20827