Živé ukázky – kod.djpw.cz

Dobrý nápad.

Skúsil som do časti pre JS ručne zapísať v prehliadači Opera 12.16 alert("weroro"); a nejak mi liezlo na nervy toľko vyskakovacích okienok a to som ešte ani nedopísal daný príkaz. :)

Chybí charset, to je vlastnost, nebo chyba?
http://kod.djpw.cz/qab-

Nápad dobrý, možná ale zbytečný, když tolik podobných služeb existuje, pár mých připomínek:

1. Jaký je rozdíl mezi "Nová ukázka" a "Resetovat"?
2. Když nezaškrtnu standardní režim, tak bude doplněn jaký doctype?
3. Pro nezatěžování serveru můžeš načítat knihovny z CDN serverů, chybí další verze a další knihovny. Zaškrtnutím jQuery přidám verzi 1.9 nebo 2, která se už nemazlí s IE?
4. Chybí mi verzování - udělám jednu ukázku a od ní vytvářím další (rozšiřuju ji - pak by bylo dobré implementovat i diff - rozdíly jednotlivých verzí)
5. To skrývání popisků, co v jakém okně mě pěkně štve, najedu na to kurzorem a už nevím, v jakém jsem okně, proč to nemůže být pořád vidět?
6. Tlačítko pro uložení mi splývá s tím modrým podbarvením číslování v CSS editoru.
7. Pokud napíšu getEl do JS editoru a stisknu Ctrl+Mezerník, nic se mi neobjeví, takže stejně musím napsat getElementsByTagName nebo getElementById. Zkouším to v Opeře s webkitem.

weroro:
„Skúsil som do časti pre JS ručne zapísať v prehliadači Opera 12.16 alert("weroro");“
To isté FF
A inak koľko to zabralo približne času?(vytvorenie)

8. Graficky by to mohlo vypadat více profesionálně.
9. Můžu klikat pořád na tlačítko pro uložení, i když nic nezměním, asi bych to zablokoval, dokud v jednom z oken nedojde ke změně.

Reaguji na Str4wberryho:
Nejsem si jistý, zda to tak má být (asi ale ano), každopádně ul, li { font-size:250% } zvětší položku seznamu víc než na 250 % (ukázka).

Když si stránku na průměrně malé obrazovce hodně přiblížím, nemám se jak dozvědět, že to žluté je JavaScript (nezobrazí se posuvníky a spodek se žlutě podloženým textem JavaScript není vidět). (IE10)

V IE10 u některých přiblížení malinko zlobí grafika: svislý modrý pruh a modře podložený text CSS (podobně červeně podložené HTML a žlutý JS) nejsou na spodním okraji v jedné rovině (ale lítá to snad jen o pixel).

Chválím jednoduchost a intuitivnost ovládání.

Reaguji na joa:
„když tolik podobných služeb existuje“
V češtině? Kromě toho si myslím, že dává smysl mít takové udělátko pod stejnou doménou jako diskuzi.

Petr ZZZ:
Je třeba šest p
oložek překládat? :-)

Velikost písma v seznamu je správná, nastavuješ 250 % seznamu, pak ještĕ velikost poližky - dĕdí od seznamu 250 % a dalších 250 %.

joe:
Ano. Nehledě na to, že takové stránky nesestávají jen ze šesti položek, ale bývají nepřehledně oplácané reklamou, můžou tam být podmínky používání atd. Osobně jsem ochoten chovat se interaktivně pouze na stránkách psaných v jazyce, kterému rozumím.

Reaguji na Str4wberryho:
Hurá, konečně mám naději, že uvidím uskladněné živé ukázky i ve své poslední žijící instanci Exploreru 7 :-)

1) Také se mi moc nelíbí to skrývání popisků, jak zmiňoval joe. Vím, že to takhle má i jsFiddle, tam se mi to také nelíbí. Vždycky když jsem na jsFiddle koukal, tak jsem si říkal, jestli to rozdělení na čtyři okénka má smysl, protože to podstatné se většinou ukrývalo jen v jednom z bloků a ty ostatní jen zabíraly místo. Respektive každá ukázka jde obvykle rozdělit na nezajímavou a zajímavou část a tohle dělení se někdy kryje s dělením podle typu kódu, ale někdy také ne. Může být kus HTML zajímavý a kus jen zbytečný obal, v CSS může být něco důležité a nad tím nějaký super-reset, v JS zase můžou klíčovou funkci předcházet nějaké prototypy a všelijaké zkratkové funkce apod.

2) Když klávesa Tab dělá mezery, existují nějaké klávesové zkratky pro přepínání mezi okénky? Nějaké by se hodily, ale žádné intuitivní mě nenapadají. Leda by šlo detekovat, že je uživatel na začátku/konci kódu a snaží se dostat ještě dál pomocí Page Up/Down — v takovém případě ho přehodit do předchozího/dalšího bloku.

3) Bombardování alerty (nebo jinými dialogy), které zmiňuje weroro, bys mohl vyřešit buď tím, že kód obsahující volání funkcí alert, confirm atd. nebudeš hned spouštět, nebo tím, že před uživatelem zadaný skript předřadíš vlastní skript, který nativní funkce na dialogy přepíše něčím šetrnějším. Neměl by je asi úplně vyřadit, protože schopnost zastavit skript nejde napodobit. Můžeš si původní alert někam uschovat a dát do window.alert svoji funkci, která zohlední, zda je vhodné vyvolat alert a případně i spočítá, kolik alertů už vyvolala od poslední inicializace výsledkového bloku.

4) Když koukám na zaškrtávátko pro standardní režim, napadlo mě, že by v Exploreru šlo udělat i přepínání do režimů starších Explorerů, nebo že by šlo rovnou ukázat i víc výsledků najednou pro porovnání. (Případně dát přepínač k bloku s výsledkem.)

5) Nebylo by lepší všechna ta horní nastavení dát blíž k blokům, s nimiž logicky souvisí? CSS reset a režim mají vliv primárně na blok CSS, jQuery a umístění skriptu na JS. Nebo je třeba zabarvit podle barvy bloků…

6) Myslím, že by se velmi hodila funkce, která by dokázala vycucnout jakoukoliv stránku a nasypat ji do chlívečků tvé živoukázkové služby. Zní to ale spíš jako úloha pro bookmarklet. Kdybys upravil serverovou část svého webu tak, aby POSTem přijaté parametry html, css, js, doctype, jquery, script a reset dokázala dostat na správná místa, zkusil bych takový bookmarklet vyrobit.

7) Mimochodem, nebylo by dobré vymyslet pro tuto službu nějaký unikátnější název? Živá ukázka je obecně druh ukázky. Když někoho poprosím o živou ukázku, nemusí k tomu nutně využít Živou ukázku :-)

8) Má-li být služba určena primárně pro diskusi, hodila by se k ní schopnost zpětně odkázat z ukázky na související vlákno. Naopak by i diskuse později mohla umět ukázku nějak lépe vlepit do vlákna (ale nespouštět ji okamžitě).


Reaguji na joa:
„možná ale zbytečný, když tolik podobných služeb existuje“
Je načase, aby to udělal někdo pořádně :-)
Buďme rádi, že nemusíme čekat dvacet let, než se k tomu dokopu já.

„2. Když nezaškrtnu standardní režim, tak bude doplněn jaký doctype?“
Koukám do zdrojáku, že žádný. Na tom přeci stejně nezáleží…

„Zaškrtnutím jQuery přidám verzi 1.9 nebo 2, která se už nemazlí s IE?“
Přidává se verze 1.10.2. Nevím, proč by někdo příčetný chtěl používat verzi 2.

Chamurappi:
2) Napadá mě využít Ctrl + šipky

Jinak dobrá práce :)

nemeja:
Kombinace CTRL + šipky se běžně používá pro posun v textovém poli o celé slovo.

Chamurappi:
2) Volil bych Ctrl + 0 / 1 / 2 / 3 s tím, že při stisku Ctrl by se mohlo nad každým oknem zobrazit velké číslo pro jednoduchou orientaci.

Pokud se plánuje propojení s diskusí, pak jsem jedině pro a zase půjde o další krok ke zlepšení, jako samotná služba by mi to přišlo ale zbytečné - z důvodů, které jsem už psal.

„Přidává se verze 1.10.2. Nevím, proč by někdo příčetný chtěl používat verzi 2.“
To nevím a kdo by používal 1.10.2, když i tato verze je osekaná, např. o $.browser? Někdy se přece zjištění prohlížeče může hodit.

Souhlasím s bodem 5, přišlo by mi to pak víc logické.

Výsledek (když se vše spojí dohromady) by se mohl zobrazovat v modálním okně - myšleno překrýt čtyři okénka šedou barvou a nahoru umístit výsledek, tam by mohly být ty přepínátka - na režim zobrazení, natčení jiných verzí knihoven, odkaz na validátor (?) a podobné věci. Dalo by se toho vymyslet spousta, například už od zmíněného jsFiddle.

mne osobne by vyhovoval len jeden stlpec rozdeleny na tri casti s posuvnikmi medzi oknami, ktory by bol cleneny ako klasicky html dokument - styly, html, skript - co prave pises by si si roztiahol podla potreby - nieco ako fiddle ale bez toho laveho panelu a s css nad html.

pako:
Taková živá ukázka by pak ale vůbec nebyla živá.

Str4wberry:
1) Ctrl + S vítám. Ale jsem ho zvyklý (ze starých nestabilních dob) mačkat hodně často. Rád bych, aby mi kurzor zůstal na místě.
2) Pokud se horní řádek zalomí, zmiznou mi dolní popisky polí.
3) Určitě by bylo dobré, kdybych si mohl najít své dříve uložené kódy; abych si je mohl třeba i nějak pojmenovat. Nebo k nim přidat štítky. Kdybych mohl nějak snadno procházet i cizí ukázky a odkazovat na ně, aniž bych musel hledat konkrétní příspěvky tady v diskusi, bylo by to skvělé.

Tahle iniciativa se mi líbí.

jenikkozak:
sorry, zle som sa vyjadril, myslel som dva stlpce - jeden na editovanie a jeden na pozeranie vysledku. s premenlivou vyskou casti v editovacom stlpci a premenlivou sirkou medzi celym edit stlpcom a vysledkom.

Str4wberry:
Tak jsem to dneska zkusil a mohu potvrdit, že to automatické spouštění je děsná blbost. Stačí napsat javascript while (true) {} a člověk skončil.

Dnes som to vyskúšal a to window.onload ti nefunguje zrovna najlepšie:

Str4wberry: vysvetlím: keď som klikol na odkaz hide, tak sa mi do iframu skopírovala celá stránka kod.djpw.cz. Keď som klikol znovu, tak znovu. Ak som zmenil spôsob umiestnenia JS, tak sa to nedialo. Kód.

Str4wberry: aha, už som si pozrel ako pripájaš ten onload, takže beriem späť. Môžeš to tu od [#19] mazať.

Reaguji na Str4wberryho:
„přejde na adresu hrefu, což je kod.djpw.cz. Ale nevím, co bych s tím měl dělat.“
Kdyby se to nějak mělo řešit, tak jednak by stránka kod.djpw.cz mohla zjišťovat, jestli je v rámu uvnitř sebe, jednak by <iframe> mohl při onload posoudit, jestli se neděje něco divného.

„Ad 1) […] Myslíš to udělat třeba tak, že by se vyznačil podstatný kód – a jen ten by se po navštívení odkazu spolu s výsledkem objevil?“
Dal by se tam možná vymyslet nějaký druh zabalování kusů kódu. Něco jako jsou #regiony ve Visual Studiu.
S tím by si šlo docela vyhrát — nemuselo by to vypadat přímo jako kus zabaleného textu, ale spíš jako takový… modul. Představoval bych si to vzhledově podobně, jako vypadají tvá tlačítka, mohlo by to mít eliminující křížek a podporovat drag&drop. Uživatel by si mohl někde rozbalit předpřipravené moduly, tam by našel žluté jQuery, modrý CSS reset… a tyhle věci by mohl přetáhnout přímo do bloku s kódem (nebo do nějakého speciálního panýlku na moduly) a odtamtud je zase kdykoliv vyhodit. Krom těchto předpřipravených modulů by mohl vložit i nějaké vlastní, což by šlo nejjednodušeji implementovat tak, že by jako modul fungovala jiná uložená živá ukázka (pak by bylo fajn ukládat živé ukázky i s nějakým názvem/popisem). Mohla by to z toho být velmi robustní stavebnice…

„Ad 3) Ano, napadlo mě místo alertů vyhazovat jako alerty vypadající <div>y.“
Občas se najde někdo, kdo zkouší s AJAXem pracovat synchronně a diví se, proč to s alertem jde a bez něj ne — taková situace nejde napodobit bez skutečného alertu. Ovšem na hrátky s AJAXem se takováto služba stejně nehodí. Leda bys přepsal XMLHttpRequest něčím, co neposílá opravdový požadavek a co umožní uživateli zadat, jak má vypadat odpověď od serveru, což by také mohlo být pěkné :-)

„Ad 4) Hm, různé režimy Explorerů by byly docela užitečné.“
Možná by se také někdy hodilo zoomování výsledku. Nevím, jak dobře by to bylo realizovatelné (<iframe> by nejspíš musel být větší a zmenšený zoomem/transformem) a jak by uvnitř fungovaly @media queries.

„Ad 6) […] Co třeba s desítkami kB CSS pravidel?“
Myslím, že jsem schopen dát uživateli na výběr, který blok chce zukázkovat, a zaměřit styly použité jen pro něj. Se skripty je to trošku horší, tam mě žádný mechanismus filtrace nenapadá.

„Ad 6) […] Co s externími obrázky?“
Bookmarklet se snadno dozví absolutní adresy všeho, co je v DOMu. Ale ten <base> by asi byl lepší.

„Ale tak zase napsat $("ul").fadeOut() a hned vidět výsledek je dobré.“
Možná by bylo dobré dát uživateli na výběr, kdy chce vidět reakce na úpravu JavaScriptu: automaticky po 300 ms / po ztrátě fokusu / po stisku Ctrl+F9. (Dle mých zkušeností je klávesa F9 univerzálně volná ve všech prohlížečích a Ctrl+F9 se používalo v Pascalu :-).)

Doporučuji minimálně udělat, aby se výsledek vůbec nezkoušel aktualizovat, pokud je v JS syntaktická chyba (protože pak se stejně celý <script> ignoruje). K tomu by snad mělo stačit ověřit, že eval("if(0){\n" + kód + "}") nevyhazuje výjimku. Pokud výjimku vyhodí, mohlo by se někde ukázat její znění, případně zvýraznit řádek (jestli to CodeMirror podporuje).

„Snad jedině nějak kontrolovat zacyklenost.“
Obecné řešení tohoto problému neexistuje. Maximálně by šlo zasáhnout do zadaného zdrojáku a doplnit do každého z cyklů jakousi záchrannou brzdu, ale to by zřejmě mělo výrazné vedlejší efekty a nebylo by to stoprocentní (zakousnout se může i rekurze).

Str4wberry:
„Příklad, co dal Jan Tvrdík mi přijde dost ojedinělý.“
Ojedinělý? Mně přijde while jako běžně používaný cyklus. Pokud to nebylo z toho mého příkladu jasné, tak ten problém se projeví u (téměř) všech použití while, nemusí se nutně jednat o konstrukci while (true) {...}

To autospouštění bych možná klidně omezil při použití některých operací, tzn. alert, confirm, for, while, ... a u každého cyklu by se dalo nastavit maximální počet opakování (šlo by i nechat uživatele do nějakého limitu nastavit)

Nešlo by to autospouštění změnit tak, že se spustí, až když pohneš myší nad výsledkem? Kurzor by ti tak zůstal v poli, kde píšeš a pohyb myši je rychlá akce, navíc na skoro čtvrtinovou plochu. Zamezilo by se tak nechtěnému spouštění během psaní.

Str4wberry:
> Ad 1) „Resetovat“ maže zálohu z localStorage (je to tam v title popsané)...
Tak toho titulku jsem si nevšiml a nebo se mi neobjevil.

> Ad 3) Mě právě další verse a další knihovny na jiných službách spíš překážely. Nechce se mi tam asi přidávat hromadu všelijakých knihoven.
A mně to přijde celkem dobré, pokud chceš třeba něco rychle otestovat, jestli funguje i se starší verzí jQuery.

> Ad 5) Pokud by byly popisky pořád vidět, budou překrývat delší kód. Orientace podle barev, umístění okna nestačí?
Nestačí, proč bych si měl pamatovat, která barva je pro co určená? Stejné barvy používá i Microsoft, Google, ... nenuťme nikoho přemýšlet. Nechal bych to zobrazené pořád i přes to, že to ubere nějaké to místo navíc.

> Ad 8) Nějaké nápady k profesionálně vypadajícímu vzhledu? :–)
Klidně něco vymyslím.

> Ad 9) Vadí to?
Mně to nevadí :-)

Reaguji na Str4wberryho:
„Stačilo by napsat <img src="100x50.png"> a vložil by se nějaký PNG obrázek 100 × 50 pixelů.“
Sice si nedovedu moc dobře představit, jak by takový obrázek měl vypadat, aby pokrýval významnou množinu možných případů použití, ale zní to jako dobrý nápad.

„alerty, confirmy apod.“
Když nad tím tak přemýšlím, dialogy confirm a prompt budou trošku oříšek. Nijak rozumně je vyřešit nepůjde, žádná náhražka nedokáže zastavit běh skriptu, počkat na odpověď od uživatele a tu dosadit jako svoji návratovou hodnotu.

„Příklad, co dal Jan Tvrdík mi přijde dost ojedinělý.“
Nekonečné smyčky vznikají i omylem. Než si člověk ten omyl uvědomí, může být pozdě.
Nebo můžou vzniknout při postupných úpravách. Stačí napsat for(var x = 0; x < 5; x++), pak si řeknu, že místo x použiju raději proměnnou i, kterou už mám někde dřív deklarovanou… přepíšu tedy písmenko ve třetí části foru… a konec, k přepsání druhé a první části už se nedostanu.

„Zkusil jsem tvůj eval kód, ale přijde mi to dost benevolentní.“
Jak jsem psal, kontroluje pouze syntaktické chyby. Skript se syntaktickou chybou nemá nikdy cenu spouštět, protože nedělá vůbec nic. Skripty s jinými chybami stále mohou něco rozumného udělat.

„Možná by bylo lepší použít něco jako JSHint.“
To sice vypadá hezky, ale třeba moje výtvory by tím neprocházely a spíš by mě to obtěžovalo. Třeba nevím, proč bych nemohl varem deklarovat i dvakrát v rámci jedné funkce, nebo dát var za return…


Reaguji na RockFire:
„a u každého cyklu by se dalo nastavit maximální počet opakování“
Zajímalo by mě, jak přesně si tohle představuješ (z pohledu uživatelského i programátorského).


Reaguji na joa:
„pokud chceš třeba něco rychle otestovat, jestli funguje i se starší verzí jQuery“
Můžeš si přilinkovat cokoliv v HTML bloku. Sice to není tak pohodlné, ale prohazování číslíček verzí tam půjde podobně snadno, jako kdybys je vybíral z nějaké rolety.

Chamurappi:
„Můžeš si přilinkovat cokoliv v HTML bloku. Sice to není tak pohodlné, ale prohazování číslíček verzí tam půjde podobně snadno, jako kdybys je vybíral z nějaké rolety.“
Ale sám si určitě nepamatuješ adresu na jQuery :-)