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

Str4wberry:
„Chová se to tak, že pokud se nějakou krátkou dobu nic nepíše, tak se HTML, CSS a JS kód zkopíruje do výsledného <iframe>.“
Aká je to doba? Mne to vyhadzuje alert aj pri rýchlom písaní takmer bez pauzy.

Str4wberry:
„Motivů může být více. Ale zatím jsem si v ukázkách většinou vystačil se zdejším logem.“
Musí to byť nutne naozaj nejaké logo? Nie je lepšie použiť nejaký dummy image, napr ako http://dummyimage.com/

Chamurappi:
„Zajímalo by mě, jak přesně si tohle představuješ (z pohledu uživatelského i programátorského).“
Z uživatelského žádný problém, prostě input s min/max hodnotou číselnou, nějaký posuvník nebo tak.
Z programátorského hlediska náročnější oříšek, ale při převzetí skriptu z každého cyklu přes dvě proměnné udělat vlastně for (na konci těla přičítat, v podmínce proběhnutí kontrolovat. Řešení by nebylo úplně snadné, ale nepochybuji o tom, že je to realizovatelné.

Reaguji na Str4wberryho:
To je hezké :-)

Začal jsem vyrábět ten bookmarklet na přelití libovolné stránky do tvého vynálezu, ale zkoušel jsem ho na stránkách z diskuse … a dopadlo to tak, že jsem spíš začal upravovat JS diskuse.


Reaguji na joa:
„Ale sám si určitě nepamatuješ adresu na jQuery :-)“
Je v kořenu domény code.jquery.com, soubor se jmenuje jquery-verze.js (a verze může latest). To není zase tak těžké na zapamatování.

1. Mám zažitou představu, že když najedu myší na tlačítko, mělo by se rozsvítit a ne zhasnout. Možná bych tedy udělal ten hover světle zelená => tmavě zelená naopak. Je ale otázka, zda by potom ta tmavě zelená nechtěla trochu zesvětlit, protože výchozí stav by pak byl málo kontrastní vůči zbytku stránky. Kvůli kontrastu samotného hoveru by pak ale chtělo zesvětlit i světle zelenou, a potom je otázka, zda na příliš světle zelené budou ještě čitelná světlá písmenka. Nabízí se možnost udělat písmenka tmavší, ale to by zas bylo proti logice rozžínání.

Může se zdát, že je to prkotina, dle mého názoru není, ale to si musí pochopitelně rozhodnout každý dle vlastního uvážení. Já se o tom zde rozepisuji proto, že přesně s tímhle problémem (jak rožnout tlačítko, aniž by utrpěla čitelnost v obou hoverových stavech a aby zároveň byla zachována logika rozsvěcení, tj. písmenka nesmí ztmavnout) jsem se jednou dost natrápil (nakonec jsem oželel logiku a písmenka při rozsvícení tlačítka udělal tmavší).

2. Červený, modrý a žlutý pruh jsou v místě s textem HTML, CSS a JS širší, stejnou šířku po celé výšce získají až u trojmístného čísla řádku (ale možná je to záměr).

3. Tlačítko "Nová ukázka" nemá vysvětlující title záměrně?

Ale jsou to drobnosti, celkový dojem: hezké, přehledné a užitečné.

Str4wberry:
Ten efekt pro zobrazení nastavení se mi nejdřív moc líbil, ale po chvíli se mi docela zprotivil :-) ale zase to není věc, která se bude pořád otvírat a zavírat...

Když jsem původně psal, že bych něco vymyslel, představoval jsem si něco hodně jednoduchého. Tak jak to máš, mi to přijde barevné jako omalovánky a mně by se v tom psát nic nechtělo. Hlavně bych dal možnost volby barevného tématu - světlý / tmavý (všiml jsem si třídy dark :-), já mam radši světlé (a velký font, dost velký)). Když píšu, nezajímá mě moc to ostatní, soustředím se na aktivní okno, takže bych zvýrazňoval jen to, možná bych se nebál ani těm ostatním neaktivním oknům nastavit opacity, aby nebyly tak výrazné, ale stále se daly dobře přečíst.

Chamurappi:
Tak to nemám důvod si pamatovat :-)

A hlavně bych zvolil jiné barvy pro syntaxi...

margin:
Otázka trochu mimo tému: Prečo na ukážky stále používate kod.djpw.cz , ktorý pod Chrome nefunguje? V kvadrante vpravo dole mám len biele okno... Keď dám refresh, tak sa to na sekundu objaví a zmizne.

kaktuss:
Neviem ako ty, ale mne v každom prehliadači (vrátane chrome) ukážky fungujú. Chceš povedať, že po kliknutí na marginovu ukážku sa ti vpravo dole nezobrazia tri odkazy?

han5vk:
No nezobrazia. Pozri.


Edit: divné je, že ak v tom bielom priestore dám znovu "načítať rámec", tak mi to zobrazí. Ale keď prídem klasicky na stránku, nezobrazí sa, ani po refreshi stránky.

Edit2: spôsobuje to niektoré rozšírenie Chrome, idem dumať, ktoré...

Edit3: už som našiel :-). Dik za info, že chyba je u mňa.

Stránka niekedy znefunkčňuje klávesovú kombináciu CTRL+T na otvorenie novej karty vo Firefoxe, no pritom to nemá to žiaden iný efekt.

Str4wberry:
„Můžete napsat, co to způsobovalo? Třeba by to šlo opravit, aby to fungovalo i s tím problematickým rozšířením.“

Bolo to rozšírenie Chrome Sniffer, ktoré som skúšal kedysi veľmi dávno a ostalo mi zapnuté, aj som naň zabudol. Zdá sa, že momentálne sa už oficiálne nedá stiahnuť z Google Web Store.

kaktuss:
Tiež ho používam, po vypnutí/zapnutí rozšírenia sa však už chyba neprejavuje...

Reaguji na Str4wberryho:
Když mám otevřené desítky stránek najednou, tak se mi zvýrazňovač rozepsaných kódů na kod.djpw.cz trhá, text se objevuje výrazně opožděně. Také reaguje velmi opožděně (případně vůbec) na copy&paste a na telefonu mi nedovoluje přesouvání kurzoru (takže kód musím vyťukat na první pokus správně, nebo k chybám dobackspacovat). Uvítal bych možnost ho úplně vypnout. Nebo kdyby se vypnul sám, když zjistí, že nestíhá. Nebo kdyby se nad napsaným kódem zdlouhavě přemýšlelo jen v okamžicích, kdy ho zrovna nepíšu.

Str4wberry:
„Ještě by se mi líbil nějaký generátor obrázků. Stačilo by napsat <img src="100x50.png"> a vložil by se nějaký PNG obrázek 100 × 50 pixelů.“
Hodně dobrý je http://lorempixel.com/

Případně Placehold.it pro jednoduché placeholdery:

http://placehold.it/100x50

V Opere 12.16, mi to pri alerte robí niečo, čo asi nie je žiadúce to jest, ak zapíšem iba čistý alert('jpw'); zobrazí sa mi výsledok alertu nad daným okienkom, ak ale prejdem do nastavení JS, a začnem meniť hodnoty v tom selecte (umiestnenie scriptu - onload, /head, /body), tak sa mi ten istý alert vypisuje vedľa seba ako keby som ho mal v kóde X-krát.

Str4wberry:
„Konečně jsem něco udělal s tím alertem, co otravoval během psaní.“
Tak ještě confirm a prompt :-) (i když tady asi nebude úplně zřejmé, jak by se to mělo chovat).

Při alertu mi to v FF25.0.1 dělá toto:
Adresa ukázky

Předpokládám, že to vypsání alertu na tom žlutém podkladu je chtěné, nicméně to nejde nijak zavřít, překrývá to spodní okna. Dle mě by bylo lepší, pokud by dole byl jeden řádek po celé šířce, kam by se vypisovaly věci typu alert, promt,... jako do konzole. Po kliknutí by se ten div roztáhl na více řádků, případně errory by to tam mohlo vypisovat :-)

Reaguji na Str4wberryho:
Prosím umazat tu poslední čárku, děkuji.

„Konečně jsem něco udělal s tím alertem“
Možná by se mohl ukazovat spíš uvnitř bloku určeného pro výsledek a mít zavírátko.

Neplánuješ zavést i nějaký způsob, jak uloženou ukázku dodatečně editovat či smazat? Že by ukládající uživatel třeba dostal speciální (neuhodnutelnou) adresu, která by mu dovolovala později přepsat uložené kódy jinou verzí? Když vím, že chyby můžu opravovat (jako třeba v příspěvcích na této diskusi), méně váhám s odesláním.

Odkaz „Vztahuje se k…“ je novinka, nebo jsem si ho dříve nevšiml? Velmi dobrý nápad. Možná by mohl být nějak výraznější. Což takhle v něm zobrazit i název vlákna, když povede na DJPW?

Str4wberry:
„uvažuji o změně výchozího místa připojení JS kódu. Nebylo by výhodnější výchozí umístění před </body>?“
Možná bylo. Víc by to odpovídalo „přirozenému“ napsání JS do stránky.
Pátrání, proč ta obfuskovaná ukázka chodí a můj kód ne, mi chvíli trvalo. Hlavně protože jsem nevěděl, že se umístění JS dá nastavit.