blog.centi.sk

City Expedition: Kórea

Ivan Čentéš — Thu, 27 Nov 2008 23:18:51 GMT

A zase sme sa výborne napapkali. Pre dnešný kulinársky experiment sme zašli do vzdialenejšej exotiky. Po skvelom zážitku z kuchyne našich východných bratov z Ruska na poslednej City Expedition sme sa dnes vydali trocha ďalej, konkrétne do kórejskej reštaurácie Korea House.

Priznám sa, že som mal pôvodne trocha obavy, či môj žalúdok nebude protestovať proti takejto exotike (hlavne po dnešnom obede v čínskej reštaurácii), ale bol som veľmi milo prekvapený. Po tom, čo sme sa všetci v celkom príjemnom prostredí reštaurácie zišli, sme sa zahľadeli do rozsiahlej ponuky zaujímavo (a kórejsky :) znejúcich názvov jedál. Ja som si nakoniec ako predjedlo objednal na Honzovo doporučenie Kimchi placku. Napriek zdeseniu, že budem musieť jesť paličkami sa žiadne faux pas nekonalo a moje úsilie prinútiť prsty k synchronizovaným pohybom bolo odmenené výbornou chuťou Kimchi. Bola to placka plnená zvláštnym spôsobom pripravenou a jemne pikantnou kapustou.

Pri výbere hlavného jedla som sa ako zvyčajne rozhodol riskovať a vybral som si Pikantnú sépiu so zeleninou a ryžou. Sépiu som chcel ochutnať už dávno a teraz sa mi tento "risk" oplatil. Mäso sépie bolo síce trocha tuhšie (ale na to som pri morských potvorách - hlavne hlavonožcoch - zvyknutý), ale so zeleninkou a všetkou prílohou naokolo bolo fakt luxusné. Samozrejme ako to už býva na City Expedition zvykom, jedlo na stole sa väčšinou zdieľa, a tak som postupne ochutnal z ďalších jedál ako: Teriyaki kurča, Pikantné kurča a na rôzne spôsoby pripravené hovädzie maso. Všetky boli veľmi chutné.

Po výbornej večeri nám ešte zostalo v žalúdku trocha miesta a tak sme siahli znova po jedálnom lístku a vybrali si dezerty. Na stole nám pristáli dva druhy, ryžové koláčiky a Patbingsu - ľadový šejk s ovocím a sladkými červenými fazuľkami. Hádajte, čo som si dal ja :)

Po dobrom jedle, hódi se vino

Nebola by to správna City Expedition, keby som neochutnal i nejaký exotickejší nápoj. Dnes som skúsil Slivkové víno a bol som veľmi prekvapený. Čakal som nejakú jemnú vínovú chuť, ale čakala ma sladká a veľmi osviežujúca odmena. Víno malo príjemnú ovocnú chuť a po jedle padlo fakt výborne.

Dnešný večer sa fakt vydaril a nepamätám si, kedy som naposledy mal v tak krátkej dobe tak veľa rôznych chutí jedla. Ešte teraz sa cítim najedený až po vrch, ale neľutujem. Rozhodne sa Korea house v mojom rebríčku vyskúšaných CE reštaurácií zaradila na popredné pozície.

Odrezané prsty

Ivan Čentéš — Wed, 02 Jul 2008 22:33:10 GMT

Keď som išiel do lesa na drevo, drevo sa mi do prsta zadrelo, triesočka mi pod prstom bude hniť …

… musím si ja dva prsty odfakliť.

Rodičia mi vždy vravievali – "nožík nie je na hranie". Odrezané prsty sú ale dôkazom, že to nevie každý, asi ani kokot z plastelíny.

Internet Explorer - ako na "style", "class" a "for" atribúty v javascripte

Ivan Čentéš — Thu, 15 May 2008 22:01:06 GMT

Čo sa javascriptu týka má IE vždy nejaké eso schované v rukáve. Eso, ktoré triumfálne vytasí vo chvíli, keď mám pocit, že vyhrávam. Tentokrát šlo o nastavovanie style, class a for atribútov.

V jednom menšom projektíku som potreboval napísať javascript, ktorý by riešil dve jednoduché úlohy:

Zoserializoval predaný HTML element a jeho deti a vytvoril tak jeho presnú kópiu reprezentovanú javascriptovým objektom
Z objektu vytvoreného bodom 1. spätne vygeneroval správnu DOM štruktúru

Prvá úloha bola celkom triviálna: rekurzívne preiterovať štruktúrou HTML elementu a vytvoriť k nim ich objektovú reprezentáciu. Pri každom elemente taktiež spracovať všetky jeho nastavené HTML atribúty a pripojiť do objektu. Tu sa žiadne prekvapenie nekonalo.

Mršky style, class a for atribúty

Úloha dva sa zdala tiež simple as fart. Jednoducho v cykle spracujem predaný objekt a vytvorím príslušné HTML elementy a ich atribúty. Problém nastal práve pri vytváraní atribútov:

elm.setAttribute( attr_name, attr_value );

Týmto spôsobom v pohode nastavím akýkoľvek atribút. Nie však v IE.

V javascripte sú totiž class a for rezervované slová a IEčku to vadí, i keď ich vo funkcii setAttribute používam ako stringový parameter. Pri týchto dvoch atribútoch je riešenie jednoduché. Oba majú totiž synonymá, ktoré možno bez problémov (a crossbrowser) použit pri vytváraní atribútu:

elm.setAttribute( "className", "class_value" ); // známejšia alternatíva: elm.className = "class_value";
elm.setAttribute( "htmlFor", "for_value" );

Nastavenie style atribútu bol trochu väčší oriešok. IE totiž akýkoľvek pokus o nastavenie tohto atribútu chápe ako nastavovanie style vlastnosti (napr.: elm.style.display = "none";), ktorá samotná je read only. Záchranou bol zase ujo Google, ktorý po pár hodinách hľadania ponúkol riešenie:

elm.style.cssText = "CSS inline values";

Toto riešenie funguje ako v IE, tak i v ostatných prehliadačoch.

Murphyho zákony v praxi

Ivan Čentéš — Tue, 01 Apr 2008 22:39:34 GMT

Včera bol prvý apríl. Deň bláznov. Deň, keď čakáme, kto, kedy, a ako sa nás pokúsi "dostať". Deň, kedy i všetky zákony schválnosti dostávajú generálny pardon. Ja mám však pocit, že "Prvý apríl" mám už vyše mesiaca, ba priam, že sa ku mne nasťahoval sám majster zákonov schválnosti, povestný Murphy.

Celé to vlastne začalo už koncom minulého roka, keď nám (mne a mojej spolubývajúcej Martine) domáci oznámil, že nás hodlá presťahovať do svojho druhého bytu. No čo, lepšie ako drôtom do oka, byt v rovnakej lokalite, rovnako veľký, za rovnaké nájomné, prežijeme. Čo nám však domáci neoznámil bolo, že budeme mať tretieho nájomníka, práve spomínaného Murphyho, ktorý si so sebou nasťahuje všetky svoje zákony. A najvačšiu zásobu mal práve svojho najznámejšieho zákona: Keď sa niečo môže posrať, tak sa to i poserie.

Tak sme sa teda po dvojmesačnej výpovednej lehote presťahovali do nového bytu, ktorý však najprv vypadal viac ako stavenisko, než ako byt. Ale budiž, sťahoval sa komplet celý nábytok zo starého bytu, do prázdneho nového, tak to chvíľu trvá, kým sa to všetko utrasie. Ako prvý si však veci vybalil Murphy.

Keď sa niečo môže posrať, tak sa to i poserie

Ako prvé, sme si všimli nefungujúce svetlo na záchode a v kúpeľni. No, úprimne, na záchode to až taká katastrofa nie je, že? :) Ale absenciu svetla v kúpeľni už vadila viac, tak sme týždeň okupovali kamošovu (ešte raz dík hugee) sprchu. Po tom, ako sa opravilo svetlo, som chcel pokrstiť sprchu prvým použitím. Sprcha sa nekonala, pretože bola deravá hadica. Kým som to pri umývaní vane zistil, tak som si aspoň pekne osprchoval pravú nohu i s teplákmi :-).

Murphyho vtípkov v byte rozhodne nebolo málo, od netesniacich sifónov až po trampoty s kľúčmi. To mu však nestačilo, tak si našiel ďalšie možnosti ako pokúšať moju trpezlivosť.

Nedorozumenie? Blbosť? Totálna neschopnosť? Jednoducho UPC

V bývalom byte som si užíval krásne internetové pripojenie od UPC. V novom byte som samozrejme chcel pokračovať. Po zistení, že na novej adrese UPC dostupné je a po nahliadnutí na ich web sa zdalo, že presťahovanie zmluvy bude jednoduché, ba priam "simple as fart". Ako veľmi som sa mýlil.

Človek by čakal, že ak spoločnosti, ktorá patrí k najväčším poskytovateľom internetu v Prahe dám kompletnú adresu i číslo bytu, že budú schopní si o tom byte zistiť všetky informácie, ktoré potrebujú. Napríklad, či v danom byte vôbec už niekedy boli a nainštalovali prípojku. Ja som však jednoduchý chlapec takže nemôžem vedieť, ako sa robí veľký buzines.

V dohodnutom termíne (no dobre, tak polhodinu meškal) sa dostavil technik, nadšený pracant, a hneď hľadal UPC zásuvku, do ktorej zapojí káblik modemu. Na moju poznámku, že tento byt nebol štyri roky používaný a teda, že žiadna zásuvka tu nie je, neskrýval prekvapenie a so slovami, že na nainštalovanie zásuvky nie je vybavený sa pozdravil a odišiel.

Na druhý dohodnutý termín prišiel iný technik s obrovskou vŕtačkou (takou pre veľkých chlapcov) a behom pár minút zásuvku nainštaloval. "Výborne", poviete si. To by v tom ale musel byť čert, aby v tom nebol Murphy. Niekto rozumný v bytovom družstve totiž rozhodol, že miestnosť, kde má UPC svoju hlavnú rozvodnú skriňu bude uzamknutá a nikto do nej nebude mať prístup. Takže od zapojenia internetu ma delil už len jeden nezapojený káblik, ku ktorému sa ale nikto nemohol dostať.

Ďalšie vybavovačky, ďalšie telefonáty. Skončilo to nakoniec tým, že UPC technik, ktorý mi mal prísť len zalištovať káble sa čírou náhodou dostal k rozvodnej skrini a zapojil ma. Nejak ale pritom zase zabudol na lišty, takže káble mi doteraz ležia voľne na zemi. Ale tak blbý, aby som pokúšal štastie nie som, takže už nikoho volať nebudem :-)

Cestovanie za relaxom

Unavený a zdeptaný som sa aspoň tešil na týždňovú dovolenku doma v Nitre. No, ale hádajte, kto si so mnou kúpil lístky do autobusu? Áno, ctihodný pán Murphy.

Príjemné podrimkávanie na sedadle autobusu prerušilo hlásenie slečny stewardky, že bohužial kvôli technickej poruche autobusu musíme zastaviť na čerpacej stanici. Tak sme zastavili, všetkých nás vysadili a autobus zmizol. Vrátil sa až po vyše polhodine, keď sme už všetci boli kvalitne premrznutí. Cesta späť do Prahy nebola o nič lepšia. To sme zasa pre istotu stáli na čerpacej stanici približne trištvrtehodinu, kvôli problémom s mýtnym.

Show must go on

Ujo Murphy ma zo začiatku fakt riadne sral, už som chcel zisťovať, či tento panelák nebol postavený na nejakom starom indiánskom pohrebisku, alebo aspoň či v tomto byte niekoho za záhadných okolností nezavraždili. To by záhadné udalosti aspoň trochu vysvetlilo.

Ale teraz sa vlastne už celkom teším, čo nové si Murphy vymyslí a čo nové sa poserie. Veď čo, aspoň je sranda, nie?

City Expedition: Grécko

Ivan Čentéš — Fri, 18 Jan 2008 00:31:55 GMT

Nedávno sme začali s partiou skvelých ľudí testovať v Prahe tzv. City Experiment. Pre nezasvätených: ide o dlhodobú akciu, kedy každé 2-3 týždne skúšame reštauráciu inej národnosti. Za sebou už máme tri takéto akcie. Najprv sme nastavili latku dosť vysoko Sushi experimentom, následne sme otočili zemeguľu naopak a skúsili kuchyňu mexickú. Sushi bola skvelá skúsenosť (i keď to nebude moje obľúbené jedlo) a mexické papáničko bolo proste skvelé. Dnes boli na rade grécke špeciality v reštaurácii Taverna Olympos.

Tavern olympos

Po trochu rozpačitom príchode do reštaurácie, kde jej prvá časť bola prázdna a nikde nikto, sme našli náš rezervovaný stôl, pohodlne sa usadili a začali skúmať jednak prostredie reštaurácie a taktiež jedálny lístok.

Samotná reštaurácia bola veľmi príjemná (možno i typicky grécka, to však neviem posúdiť, nakoľko som v grécku už veľmi dlho nebol) čo vidno i na webe reštaurácie, rovnako i obsluha. Po obligátnom pivku od smädu a aperitíve vo forme Metaxy sme začali objednávať papanie.

Môj výber začínal predkrmom vo forme Pečených pikantných papričiek s Fetou a Pita chlebom, čo bol riskantný, ale zároveň výborný pokus. Papričky splnili očakávania a ústa ma po nich pálili ešte hodnú chvíľu. Ale aspoň bolo čo zapíjať vynikajúcou Stellou :-)

Ako hlavné jedlo som si vybral Kalamari na grilu so smaženými zemiakmi a syrom. Jedlo som vyberal hlavne s úmyslom skúsiť niečo, čo som ešte nejedol, o čom je vlastne i celý City Experiment. Napriek tomu, že mäso kalamára bolo trochu tuhšie (na krájanie i jedenie) musím uznať, že bolo výborné a skvele som si pochutil.

Napriek tomu, že som bol najedený celkom dosť, nechal som sa nakoniec zlákať i na dezert. Po rozpačitých pohľadoch mojich spolujediacich na ich dezerty (hlavne Lukášov zúfalý pohľad na jeho Kantaifi stál za to :-D) som sa rozhodol vsadiť na istotu a objednal som si Mandlový dort a bez štipky skromnosti môžem povedať, že som si vybral skvele.

Když jsme pójedli, dóbře pójedli, hódi se Ouzo

Nebol by to správny City Experiment, keby sme neskúsili i nejaký lokálny alkoholický nápoj. Po metaxovom aperitíve a kalamárovej večeri sme si teda objednali Ouzo s ľadom (ľad v Ouzu vytvára fakt zaujímavé efekty) a po ňom som skúsil i (možno grécke) pivo Mythos.

Neviem čím to bolo, možno tými dvoma Stellami, alebo tým, ako som sa riadne najedol, ale Ouzo s pivom mi už teda moc nesadlo :-) Samotné Ouzo malo zaujímavú "pelendrekovú" chuť, piť som ho ale mohol len po malých dúškoch. Čo sa Mythosu týka, no neviem ako by som to povedal... proste tá Stella bola lepšia :-)

Show must go on!

Dnešný večer bol každopádne super a veľmi rád sa do Taverny Olympos vrátim niekedy v teplejšom období, kedy to tam môže vyzerať fakt nádherne (súdiac podľa fotiek na webe).

Náš City Experiment ale pokračuje ďalej a uvidím, čím prekvapí môj žalúdok nabudúce. Rysuje sa buď Kuba alebo Severná Amerika, tak držte palce :-)

setTimeout a setInterval - predávanie argumentov do volaných metód

Ivan Čentéš — Mon, 03 Sep 2007 22:51:15 GMT

Javascriptové funkcie setTimeout a setInterval predstavovať nebudem. Kto ich pozná nepotrebuje vysvetlenie, kto nepozná doštuduje. Funkcie sú to často užitočné v prípade, že nejaký kód potrebujeme spustiť oneskorene, alebo v určitých pravidelných intervaloch. Problém však nastáva, ak chceme do volaných metód predať nejaké vlastné parametre. Alebo nie?

Nebudem sa zbytočne vykecávať, prejdem rovno k veci ilustráciou na príklade.

Ukáž, čo máš

Povedzme, že programujeme aplikáciu, ktorá pracuje s informáciami o zamestnancoch našej firmy a z nejakého špeciálneho dôvodu potrebujeme po 5 sekundách vypísať meno a plat niektorého zamestnanca. Máme teda údaje o zamestnancovi a metódu na ich výpis:

var employe = {
    firstName : "Peter",
    lastName : "Novák",
    salary : 35000
};

function employeDetail( employe ) {
    alert(employe.firstName + " " + employe.lastName + " zarába " + employe.salary);
}

Problém je, že so zápisom window.setTimeout( employeDetail(employe) , 5000 ); nepochodíme, pretože ako prvý parameter funkcie setTimeout nemôže byť volanie metódy, ale jej referencia. Rovnako nám nepomôže trik, s ktorým sa dajú predať textové alebo numerické argumenty.

setTimeout( "employeDetail(\""+employe+"\")", 5000 );

Tak bude to?!

Dnes som však narazil na zaujímavé (i keď na prvý pohľad krkolomné) riešenie, ktoré umožní do volanej metódy predať akékoľvek a koľkokoľvek parametrov. Spočíva v použití anonymných funkcií v dvojitom zanorení. Znie to hnusne, ja viem, tak radšej ukážem upravený pôvodný príklad:

var employe = {
    firstName : "Peter",
    lastName : "Novák",
    salary : 35000
};

function employeDetail( employe ) {
    alert(employe.firstName + " " + employe.lastName + " zarába " + employe.salary);
}

window.setTimeout(function( zamestnanec ) {
    return function() {
        employeDetail( zamestnanec );
    }
}( employe ), 5000);

Trik je v tom, že vonkajšia anonymná funkcia sa hneď vykoná a premenná employe sa stane lokálnou premennou zamestnanec vnútornej funkcie.

Priznám sa, že tú vnútornú vnorenú funkciu som zatiaľ úplne nepochopil, ale je tam potrebná. Kto by mal chuť sa dozvedieť viac (a nemá problém s angličtinou), tak sa môže mrknúť na podrobné vysvetlenie.

Samozrejme všetko čo som v článku popisoval platí rovnako i pre funkciu setInterval. Uvedený spôsob so testoval a funguje v IE6, IE7, Firefoxe 2.0.0.6, Opere 9.21 i v Safari pre windows.

Intype - druhý verejný alpha release

Ivan Čentéš — Thu, 09 Aug 2007 22:02:21 GMT

Po dlhej, namáhavej a vyčerpávajúcej dobe vývoja uzrela svetlo sveta druhá verejná alpha verzia textového editora Intype. Čo nové teda oproti prvej verzii prináša?

Veľkú časť času stráveného na vývoji druhej alpha verzie zabral kompletný refactoring kódu, ktorý zabezpečí rýchlejšie a jednoduchšie implementovanie nových funkcií editora v budúcnosti. Hlavným lákadlom pre zdravo netrpezlivú komunitu boli však samozrejme sľubované nové funkcie, ktoré Intype posúvajú vo vývoji na ďalšiu úroveň.

Multi-Document Interface

Známe záložky, ktoré umožnia editovať viac dokumentov v jednej inštancii editora naraz. Takého rozhranie je štandardom súčasných editorov, iste ho všetci poznáte a viete ako veľmi uľahčuje a sprehľadňuje prácu s viacerými súbormi naraz.

Multi selekcie a blokové selekcie

Jeden z hlavných ťahúňov tejto verzie. Multi selekcie umožňujú označenie viacerých, navzájom nezávislých blokov kódu, s ktorými je možné následne pracovať, mazať ich, kopírovať, prípadne všetky naraz editovať.

Blokové selekcie zase možno využiť na označenie obdĺžnikového bloku kódu, s ktorým následne možno pracovať. Využiť sa dá napríklad na označenie obsahu všetkých <LI> tagov pod sebou a následné úpravy.

Multi a blokové selekcie v akcii

Snippety & Multi-Snippety

V prípade, že je aktívna multi alebo bloková selekcia a aktivujete nejaký snippet bude tento snippet aplikovaný na všetky označené bloky textu.

Ukážka multi snippetov: Multi-Snippet: Combining Snippets and Multi Selection.

Find & Replace

Vyhľadávanie v dokumente a nahradzovanie textu asi netreba predstavovať. Je to jedna zo základných vlastností každého dobrého textového editora a je super, že je už súčasťou Intype editora.

Find & Replace ukážka

Clipboard História

Rozšírená funkčnosť systémovej schránky. Intype si pamätá históriu vašej systémovej schránky, a pomocou klávesovej skratky CTRL+SHIFT+V je možné vyvolať popup menu so zoznamom naposledy vložených položiek do schránky.

Word Wrap

Ďalšia zo základných funkcií textového editora, ktorá odteraz veľmi uľahčuje písanie rozsiahlejších dokumentov v Intype editore.

Like it? Try it!

Ak vás Intype editor zaujal, nie je nič jednoduchšie, ako si jeho poslednú verziu stiahnuť a vyskúšať ho.

Ďalšie užitočné odkazy

Internet Explorer a position: fixed;

Ivan Čentéš — Wed, 25 Jul 2007 13:53:58 GMT

Je všeobecne známe, že Internet Explorer vo verzii 6 a nižších nepodporuje v CSS definíciu position:fixed. Existuje rovnako známe riešenie pomocou expressions, ktoré v IE umožnia použitie jednoduchých kúskov javascriptu v CSS pravidlách. Nie je však dokonalé.

Riešenie position:fixed problému

Simulácia fixnej pozície elementov v Internet Exploreri spočíva v už spomínaných expressions, v ktorých možno zapísať takmer akýkoľvek javascriptový kód (tu si samozrejme väčšinou vystačíme s pár slovnými zápismi). Často sa fixná pozícia používa napríklad pri pätičke webu, ktorú chceme „priklincovať“ vždy na spodok viewportu prehliadača i pri scrollovaní. Vtedy zapíšeme niečo v tomto zmysle:

#footer {
    ...
    position: fixed;
    bottom: 0px;
    _position: absolute;
    _top: expression(documentElement.offsetHeight + documentElement.scrollTop - this.offsetHeight);
}

Problém však je, že takto upevnený element často v IE pri scrollovaní nepríjemne bliká, prípadne poskakuje. Čo s tým sakra?

Stoj, lebo strelím!

To poskakovanie pri scrollovaní ma vždy štvalo, ale bral som to len ako menej nepríjemný side-effect použitého hacku. Veľmi jednoduché riešenie (resp. ďalší hack) mi však ponúkol kolega Dušan Maliarik.

V CSS stačí pre BODY tag pridať nejaký obrázok na pozadí a nastaviť mu fixnú pozíciu. Napr:

BODY {
    ...
    background: #fff url(foo.gif) fixed;
}

Divné, ale funguje to :-). Linkovaný obrázok nemusí vôbec existovať, ale ak sa chceme vyhnúť zbytočným 404 chybám v logu web servera, je dobré si vytvoriť napr. 1x1px transparentný GIF.

Čo na to Internet Explorer 7?

Vzhľadom na to, že Internet Explorer 7 už position:fixed podporuje, je potrebné tento hack aplikovať len na staršie verzie. Na to môžme použiť podmienené komentáre (conditional comments), napr. takto:

<!--[if gte IE 5.5]>
<![if lt IE 7]>
    BODY {
        background: #fff url(foo.gif) fixed;
    }

    #footer {
        position: absolute;
        top: expression(documentElement.offsetHeight + documentElement.scrollTop - this.offsetHeight);
    }
<![endif]>
<![endif]-->

Výsledok si môžete obzrieť v ukážke riešenia.

Nové farbičky

Ivan Čentéš — Thu, 28 Jun 2007 19:29:28 GMT

Po chvíli fungovania blogu som sa rozhodol ho trochu prefarbiť. Pôvodný tmavý design sa mi síce dosť páčil, ale bohužiaľ sa neveľmi hodil k blogovému typu webu.

Uvedomil som si, že na tmavom podklade sa dlhšie články fakt blbo čítajú, tak som vzal z opačného konca. Myslím, že teraz sa to omnoho lepšie číta. Každopádne budem detaily postupne dolaďovať, a bohvie, možno to tu čoskoro zase prefarbím :-).

Debug webových aplikácií, alebo Kde je ten pes zakopaný

Ivan Čentéš — Wed, 20 Jun 2007 15:27:06 GMT

Poznáte to. Strávite množstvo hodín úpornej práce na webe alebo webovej aplikácii, pofixujete množstvo chýb a tešíte sa na výsledok. A práve v okamihu, keď by to všetko malo začať správne fungovať a vy chcete zakričať Heuréka, nastane problém. Prečo to nefunguje? Kde som zabudol to „kurvítko“?!

Tomuto stavu sa častokrát pri vývoji zložitejších webov proste nevyhneme. Vždy sa nájde niečo, s čím by si neporadil ani McGyver s jeho balíkom žuvačiek a nieto obyčajný chudák webdeveloper. Naštastie však existuje množstvo (a pár naozaj dobrých) nástrojov, ktoré vedia podobné skryté chyby objaviť a upozorniť na ne. Spísal som krátky zoznam rôznych pluginov do prehliadačov, ktoré stoja za zmienku.

Keďže ako hlavný vývojový prehliadač používam Firefox a objektívnymi okolnosťami som nútený testovať aj Internet Explorer, zoznam debugovacích nástrojov bude zameraný práve na tieto dva prehliadače. Užívatelia ostatných prehliadačov mi určite ochotne odpustia, prípadne sa v komentároch podelia o svoje skúsenosti s debugovaním v nich.

Firefox

Štandardná inštalácia Firefoxu prichádza s dvoma základnými nástrojmi pre analýzu a debugovanie webu.

DOM inspector

Slúži na analýzu webu v stromovom zobrazení jednotlivých elementov a poskytuje o nich užitočné informácie:

BOX model informácie o vybranom uzle (pozícia, rozmery, margin, padding, border)
aplikované CSS pravidlá (i tie prepočítané)
vlastnosti vybraného uzlu v reprezentácii Javascriptového objektu

Error console

Transparentne debuguje Javascriptový a CSS kód a upozorňuje na prípadné nedostatky alebo chyby.

Výhodou týchto nástrojov je hlavne to, že sú súčasťou Firefoxu a netreba teda inštalovať dodatočné rozšírenia. Ich možnosti sú však obmedzené a pre náročnejšie debugovanie môžme siahnuť po sofistikovanejších nástrojoch.

Console²

Je rozšírením klasickej Error console, ktoré naviac umožňuje výpis chýb filtrovať podľa typu (chyby, varovania, oznamy) či jazyka (Javascript, CSS, XML). Ďalej ponúka jednoduché vyhľadávanie v oznamoch či skrývanie duplicitných oznamov.

Webdeveloper toolbar

Je jedným z mojich najobľúbenejších debugovacích pluginov. Obsahuje celý balík menších nástrojov na analýzu webu a jeho testovanie z rôznych pohľadov:

informácie o webe - zobrazenie CSS, Javascriptu, zobrazenie ID a CLASS atribútov, informácií o štruktúre, …
debug - vypnutie zobrazovania obrázkov, deaktivácia Javascriptov či CSS štýlov, live editácia CSS, analýza formulárov, cookies …
mnoho ďalších ako napr. resize, zoom, odkazy na validáciu aktuálneho HTML alebo CSS, kontrolu platnosti odkazov, …

HTML validator

Automatický validátor zobrazenej stránky, ktorý výsledky kontroly zobrazuje hneď po načítaní stránky a hodí sa teda na rýchlu kontrolu validity dokumentu a na lokalizáciu prípadných problémov (napr. neuzatvorené či prekrížené tagy).

FireBug

Skvelý nástroj, bez ktorého už nie som schopný efektívne pracovať. Je to možnosťami nabitý nástroj, za ktorý si jeho autor Joe Hewitt zaslúži doživotné chválospevy. Z bohatej ponuky vyberám:

nadštandardné debugovanie Javascriptu s detailným výpisom prípadných chýb a presným odkazom na chybný kúsok kódu
možnosť použiť breakpoints v Javascripte, rýchla konzola na testovanie menších kúskov kódu, kde je samozrejmosťou kompletný prístup k už načítanej stránke a vykonaným Javascriptom
jednoduchý javascriptový profiler
sledovanie requestov, ktoré stránka vykonala (načítanie CSS, obrázkov, …) vrátane tých AJAXových
console.log() - logovací nástroj a ideálna náhrada testovacích alert() vo vyvíjanom kóde
live editácia CSS, ktorá si narozdiel od podobnej funkcie Webdeveloper toolbaru vykonané zmeny pamätá i po zatvorení Firebugu
live editácia HTML, prezeranie a editácia DOM stromu dokumentu

Internet Explorer

Bohužiaľ Internet Explorer (verzia 6 či 7) neponúka toľko možností ako Firefox, pár viac či menej kvalitných predsa len existuje:

Interný debugger Javascriptu - nie veľmi užitočný nástroj, iste jeho "kvality" všetci dobre poznáme
Microsoft Script debugger - free aplikácia, ktorá sa prepojí s Internet Explorerom a kontroluje vykonávaný Javascript. I tento nástroj má však veľmi ďaleko k reálnemu použitiu.
Microsoft Script editor - konečne použitelný debugger pod IE, ktorý je schopný prípadné chyby nielen odchytiť a ale i nasmerovať k problematickému miestu v kóde. Obrovskou nevýhodou tejto aplikácie (napriek tomu, že je free) je však to, že nie je voľne stiahnuteľná, ale je súčasťou balíka Microsoft Office.
Firebug Lite - simulácia obľúbeného Firefox rozšírenia. Po nalinkovaní stiahnutého firebug.js do vyvíjaných stránok umožňuje používať niektoré z výhod klasického Firebugu (ako napr. logovanie do konzoly pomocou console.log()).
IE7Pro (free) - plugin pre Internet Explorer 7, ktorý ponúka o.i.:
- blokovanie reklamy a flashu
- mouse gestures
- rýchle nastavenie proxy
- User-Agent nastavenia
- uloženie webu do obrázku
IE developer toolbar a IE6 Web accessibility toolbar (free) - tieto pluginy ponúkajú podobné možnosti ako Webdeveloper toolbar pre Firefox
DebugBar (60 dní trial, 59$, free pre nekomerčné účely) - toolbar s nástrojmi ako: zoom, color picker, zobrazenie HTML kódu, cookies, Javascriptu a HTTP hlavičiek.
IEWatch (30 dní trial, 169$) - slúži na analýzu HTTP hlavičiek, Cookies, GET a POST parametrov a umožňuje zobrazovanie nezašifrovaných dát posielaných cez HTTPS/SSL pripojenia.

CSS vista

Na záver ešte jedna zaujímavá aplikácia, ktorá uľahčuje vývoj a odľaďovanie pomocou live editácie CSS a preview vo Firefoxe a Internet Exploreri naraz pomocou SplitView.

Metropola vs. mesto

Ivan Čentéš — Tue, 12 Jun 2007 14:36:24 GMT

Je zaujímavé, ako sa človeku môže zmeniť pohľad na jeho rodné mesto po tom, čo dlhší čas prežije mimo jeho hraníc. Celý svoj život i celé vysokoškolské štúdium som prežil v Nitre, ktorá sa mi po celú tú dobu zdala ako veľké mesto, plné uponáhľaných ľudí, bez chvíľky pokoja. Ako veľmi som sa mýlil.

Mimo Nitru, resp. mimo Slovenska žijem už takmer dva roky. Pred dvoma rokmi ma totiž presťahoval za prácou do Prahy, kde žijem doteraz. Za ten čas som si na veľkomesto - akým Praha určite je - zvykol natoľko, že každý návrat domov, do môjho rodného "veľkého" mesta je pre mňa príjemným šokom.

Malé veľké mesto

Dlho som si neuvedomoval aké malá vlastne Nitra je. Skôr naopak, počas štúdií som pravidelne nadával, keď som sa mal vracať z chlastačky domov (a nechcelo sa mi platiť taxík) hrozných 35 minút pešo! Óóó môj bože! Teraz cestujem 40 minút metrom do práce a som spokojný :-)

Alebo včera. Potreboval som si vybaviť nový občiansky preukaz, k tomu samozrejme znovu odfotiť môj ksicht a poriešiť ďalšiu hromadu vecí v meste (vrátane výbornej dvojitej jahodovo-jogurtovej zrmzliny), a to všetko za asi dve hodinky. Všade som stretal síce hromadu ľudí, ale z väčšiny som mal ten pocit, ako keby si teplo, voľno a klídek užívali spolu so mnou.

Takže keď sa vraciam raz za čas domov na víkend, alebo kvôli nejakým povinnostiam ako teraz na dobu dlhšiu, tak si pobyt vychutnávam plným dúškom. Vychutnávam si 20 minútovú pešibusovú cestu do centra mesta, kým ostatní sa paria v autobusoch, netrápi ma, že zmeškám nejaký autobus, keď sa budem vracať z pivka s kamošmi, netrápi ma, že cestou domov nepočujem hluk aút, ale švitorenie vtákov.

Jednoducho povedané, vždy sa teším, keď sa nachvíľu vrátim na vidiek domov. Teraz ma však ospravedlňte, idem pešo do parku na pivo :-) .

English is easy, Csaba is dead

Ivan Čentéš — Mon, 28 May 2007 00:17:02 GMT

“Toto predstavenie obsahuje vulgárne slová, preto by ste sa mali nad ním pohoršovať.” Týmito slovami začalo divadelné predstavenie, na ktoré ma upozornil kolega a na ktoré som po dlhej dobe znova zašiel do divadla.

Ak mám byť úprimný, na predstavenie som šiel takmer presvedčený, že to bude nejaká kravina, ale chvalabohu to nebola pravda. Herci z GUnaGU predviedli celkom zaujímavý príbeh z prostredia slovenských mafiánov a svojou hlbokou znalosťou nadávok bavili celé publikum :)

Dostanem kanceláriu a tam drevený telefón. Zvoní, zvoní, ale jebem naňho. Já sem gdosi! Nechodím už do terénu, konzultujem z kancelárie! A on furt zvoní! Dvihnem a zarevem - komu tykáš, ty kokot?!

Spontinijos spíč

Príbeh o mafiánoch, ktorí sa kvôli expanzii do sveta chcú pomocou uneseného učitela chémie naučit anglický jazyk bol rozprávaný veľmi hovorým štýlom, tzv. Spontinijos spíčom (spontánnym rečom), čo bolo ostatne na hercoch aj vidno. V pár výstupoch viditeľne odbočili od písaného scenáru a šli si svojou cestou a niekedy ani sami nemohli zadržať smiech, čo je ostatne jedna z vecí, ktorú mám na divadle rád.

Ja som sa však bavil aj na niečom inom. Spôsob reči, ktorý mal pripomínať reč mafiánov a tvrdých boyz mi totiž dokonale pripomínala pár mojich spolužiakov zo strednej, resp. vysokej školy a ich tvrdé kecy.

Každopádne skvelý večer, neskôr zakončený príjemne vychladeným pšeničným pivkom.

Ako som varil blog - čo bolo pod pokrievkou?

Ivan Čentéš — Thu, 17 May 2007 11:58:18 GMT

V tomto článku sa vám pokúsim priblížiť prostriedky a postupy, ktoré som používal pri vývoji môjho súčasného webu a jeho administrácie. Nebude to však návod na inštaláciu jednotlivých nástrojov, tých je na internete mnoho a nepochybne kvalitnejších.

Platforma - Linux

Ako som už spomínal v prvom článku, pre vývoj som si vybral framework Ruby on Rails. Interpreter pre Ruby, ako aj ďalšie podporné aplikácie a samotný Rails majú Windows i Linux varianty. Ja som spočiatku zvolil Windows verziu. Inštalácia bola jednoduchá, všetky potrebné informácie som našiel na stránkach Ruby on Rails. Po istej dobe som si to však premyslel a rozhodol som sa, že Windows ako platformu pre RoR opustím a začal som sa obzerať po vhodnej Linux distribúcii.

Nemal som ale v úmysle si inštalovať komplet nový systém, prípadne si komplikovať život s dual-boot systémom. Riešenie sa ponúkalo samo. Stiahol a nainštaloval som si virtualizačný nástroj VMWare Player a openSUSE 10.2 VMWare image. Takto pripravený systém stačilo spustiť, doinštalovať doň Ruby, Rails a MySQL a vývojové prostredie bolo hotové.

Možno sa pýtate, načo toto všetko, keď rovnako jednoducho možno fungovať s Ruby a MySQL i na Windows. To je pravda, mna však presvedčili dva dôvody:

Mobilita - takéto vývojové prostredie si so sebou môžem vziať takmer všade so sebou, bez ohľadu na to, či na danom počítači mám rozdchodené potrebné veci. Takto mi postačí nainštalovaný free VMWare Player a môžem zase pohodlne pracovať.
Linux shell - nemusím snáď ani hovoriť, že “príkazový riadok” v Linuxe je so svojimi možnosťami ďaleko za krátkozrakým a nemohúcim Windows CMD.

Pracovná stanica - Windows

Backend pre vývoj som mal teda vyriešený, zostalo už len rozhodnutie kde a akými prostriedkami efektívne pracovať. V tomto som mal ale už od začiatku jasno. Denno-denne pracujem s Windows a som s jeho prostredím, nástrojmi a aplikáciami už natoľko zžitý, že nebolo nad čím uvažovať.

Nástroje a aplikácie

Pre samotný vývoj aplikácie bežiacej na Linuxe, pre testovanie a publikovanie webu som použil viacero nástrojov. Z nich vyberiem tie najdôležitejšie, bez ktorých by to jednoducho nešlo:

Intype editor - Celý kód (Rails, HTML, CSS, Javascript) je písaný práve v tomto editore, na vývoji ktorého sa svojou troškou podieľam aj ja. Napriek tomu, že je stále vo veľmi rannom štádiu vývoja veľmi dobre sa mi v ňom pracuje.
Heidi SQL - Tento nástroj na prácu s databázou mi bol odporučený len nedávno. Svojim rozhraním, ovládaním a funkčnosťou pripomína MySQL Front*. Pokiaľ často pracujete s databázami HeidiSQL možem len doporučiť.
Tortoise SVN - SVN mi poslúžilo na jednoduché a efektívne zálohovanie svojej práce a hlavne na pohodlné publikovanie lokálne vyvíjaného kódu na ostrý verejný server. Ako online SVN hosting som využil DevjaVu, ktorý je zatiaľ stále v beta štádiu a preto plánujem skúsiť i Assembla SVN hosting, ktorý doporučuje i Martin Cohen vo svojom článku “Subversion hosting?”.
Samba - keďže som potreboval editovať vo Windows súbory, ktoré sa nachádzali na Linuxovom serveri, musel som nájsť spôsob, ako ich nazdieľať. Odpoveďou bola samozrejme Samba. Jej rozchodenie pod Linuxom mi síce chvíľu trvalo, výsledok však stál za to. Vo Windows mám teraz vytvorené “Miesto v sieti”, na ktorom sa nachádzajú projektové zdrojové súbory a môžem tak s nimi pracovať rovnako, ako keby boli priamo vo Windows.

* MySQL Front bol ešte donedávna platený software, zdá sa však, že autori boli prinútení stiahnuť ho z trhu a podľa všetkého sú to práve oni, ktorí vyvíjajú HeidiSQL

Vzdialené databázové pripojenie

Zostala už len jedna vec, ktorá mi znepríjemňovala život - práca s databázami.

Ako som už spomínal, na projekte som pracoval lokálne, zároveň som ho však priebežne publikoval aj na ostrý server. To znamenalo spravovať dve rôzne databázy. Iste si viete predstaviť, že počas vývoja databázového projektu sa štruktúra databáz veľmi často zásadne mení a sledovať všetky zmeny lokálnej databázy a aplikovať ich rovnako aj na databáze ostrej bol teda boj s mojou trpezlivosťou.

Našťastie však prišla spásonosná myšlienka. Čo tak použiť len databázu na ostrom serveri a využívať ju aj z lokálneho prostredia? Vďakabohu mám na svojom hostingu aj SSH prístup a nič mi teda nebránilo vytvoriť si SSH tunel a získať tak možnosť pripojenia k vzdialenému databázovému stroju.

Zhrnutie

Ako to teda vlastne pracujem? Rails aplikácia (a server) mi beží vo virtuálnom Linuxe, programujem a testujem vo Windows, zálohujem a publikujem pomocou online SVN a to všetko s dátami na jednom mieste. Momentálne je to pre mňa ideálne pracovné prostredie.

Centi znovu bloguje

Ivan Čentéš — Mon, 14 May 2007 23:53:53 GMT

Po veľmi dlhej odmlke som znovu oprášil blogérske chúťky a vrátil som sa. Starý oBlog do sveta Internetu som zanechal svojmu osudu a obrátil som svoj zrak a úsilie k novým, svetlejším zajtrajškom.

Nový blog, nová doména, nový hosting

Nápad znovu začať s blogovaním prišiel už dávnejšie s plánom naučiť sa niečo nové – Ruby on Rails. Nová technológia priniesla aj nové požiadavky na hosting. A keďže som už dlho plánoval vlastnú doménu, tak som to všetko spojil dohromady a zakotvil som na centi.sk hostovanom u Websupportu.

Nebolo to jednoduché. Veľa krát som začal, a ešte viac krát som skončil a začal znova. S výsledkom som však dostatočne spokojný, napriek tomu, že som zvládol zatiaľ len úplné základy RoR-u.

O čom to tu bude?

Mojim cieľom bola maximálna jednoduchosť, preto budú príspevky rozdelené len do dvoch častí. V časti prvej “Odborné články” sa budem venovať odborným témam hlavne z oblasti webdesignu a javascriptu. V časti druhej “Osobné zápisy” zasa pristanú všetky ostatné bláboly hodné publikovania.

Takže vitajte na mojom novom blogu, ktorý v mnohom (vlastne vo všetkom) prekonáva blog starý. Zostáva mi už len dúfať, že chuť písať zostane a že si blog nájde svoju skupinku čitateľov.