Živé ukázky

Pro rychlé testování kousků HTML/CSS/JS existuje řada populárních on-line nástrojů. Nejznámější jsou asi:

Přesto jsem v červenci 2013 spustil svůj vlastní nástroj.

Momentálně běží na adrese kod.djpw.cz

Proč? Protože ostatní řešení trpěla a stále trpí věcmi značně komplikujícími používání.

Funkčnost ve starých prohlížečích

Testovat kusy kódu potřebuji v různých zařízeních a i dost starých.

  • Codepen funguje od IE 10
  • JSFiddle funguje od IE 9

Pro starší prohlížeče je potřeba připravit ukázku v novějším prohlížeči, vypreparovat surový výsledek a ten zkopírovat do staršího.

A totéž pro každou změnu. Můj nástroj funguje (omezeně) od IE 7, včetně okamžitého zobrazování výsledku.

Kromě toho v mé oblíbené Opeře 12 v JSFiddle není možné kopírovat text. A v Codepenu nefunguje průběžné automatické ukládání obsahu do localStorage.

Průběžné automatické ukládání

Kromě problémů v Opeře 12 v Codepenu, neumí JSFiddle průběžné ukládání vůbec.

Průběžné spouštění kódu

Příjmená věc je rovnou vidět výsledek zadaného HTML/CSS/JS kódu.

V JSFiddle taková věc není, byť jde kód spouštět klávesovou zkratkou Ctrl + Enter.

S tím souvisí i drobná vychytávka na kod.djpw.cz, kdy je alert překryt vlastní funkcí, která neblokuje prohlížeč, takže je možné pohodlně provádět testovací výpisy z JavaScriptu.

Zobrazení alertu

Přepínání editace a výsledku

Na JSFiddle ani Codepenu nejde pohodlně změnit URL, aby se místo čistého výsledku zobrazil editační režim a obráceně. Vzhledem k nefunkčnosti rozhraní ve starších prohlížečích je zvlášť mrzuté, že není ani možné někde zkopírovat odkaz na čistý výsledek.

Jediná možnost je funkce Zobrazit pouze obsah rámu, kterou ale nedisponují všechny prohlížeče.

Mému řešení stačí na konci URL přidat/odebrat spojovník.

Přepínání mezi ukázkou a úpravaou

Psaní kódu

V tom jsou všechny 3 nástroje dost podobné. Všude je možné používat Emmet. Jinak kod.djpw.cz nabízí nejvíc.

  • Snippety podobně funkční jako v Sublime Text (nemají obě známé služby).

  • Vícenásobný kursor (má jenom Codepen).

  • Napovídání po stisku Ctrl + Mezerník (nemají oba).Zobrazení alertu

  • Okamžité upozorňování na chyby/nedostatky v JS/CSS (oba mají až na vyžádání).Upozornění na CSS nedostatek

Rychlost

Načítání kod.djpw.cz je oproti ostatním službám bleskurychlé.

Pro srovnání rychlosti načtení a možnosti s ukázkou něco dělat je zde ukázka téhož jednoduchého kódu ve všech nástrojích.

Obrázky

Ve svém nástroji vložím obrázek 200 × 200 px zadáním url „/i/200“. Ukázka

Kontrola nad obsahem

Pokud jsou živé ukázky významnou součástí webu, což třeba v případě tohoto webu jsou – bez jejich funkčnosti je plno článků skoro bezcenných – je značné risiko nemít takto strategický obsah pod vlastní kontrolou.

Je kod.djpw.cz nejlepší?

Je tedy kod.djpw.cz lepší než Codepen nebo JSFiddle? Jak v čem. Codepen i JSFiddle například nabízí možnost spolupracovat na jedné ukázce ve více lidech. Taktéž existence uživatelského profilu, pohodlná možnost přehledu nad svými ukázkami nebo možnost editace v mém řešení zcela chybí.

Codepen

Codepen potom nabízí různé sociální prvky – komentáře ukázek nebo žebříčky zajímavých a populárních ukázek a podobně. Kód navíc umožňuje kromě HTML, CSS a JS zapisovat i alternativně. HTML třeba v Markdownu, pro CSS používat preprocesory a v JS využít CoffeScript/LiveScript.

Nakonec výhoda z kontroly nad obsahem platí pochopitelně pouze pro provozovatele dané služby.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Analysování a kontrola stránky

Nástroje pro kontrolu a analysování stránky

Užitečné nástroje pro analysování, kontrolování a prověřování webových stránek.

Jak přidat komentáře na web

Komentáře na webu

Jak jednoduše provozovat komentáře pod články na svých stránkách.

Úprava CSS/JS na ostrém serveru

Připojení lokálního CSS/JS na ostrý server

Jak na ostrý server připojit pro vývoj a testování lokální styly nebo skripty.

V jakém jazyce programovat?

Jazyk zdrojového kódu

Jakým jazykem programovat. Česky, nebo anglicky?

Komentáře