Přejít k navigační liště

Zdroják » Zprávičky » Kappalizer – nástroj pro označení prostředí webu ve Chromu

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

Zprávičky Různé

Nálepky:

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.

Komentáře

Subscribe
Upozornit na
guest
2 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Mates

V SPA aplikacích se obsah přerenderuje jiným obsahem a tím ztratím i proužek.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.