centi.sk

HTML5 tagy v IE

Tue, 20 Apr 2010 20:53:35 GMT

HTML5 ešte stále nie je finálne, avšak už dnes sa vo webdeveloperskom svete skloňuje na každom kroku a moderné prehliadače postupne implementujú mnohé z jeho častí. HTML5 okrem iného prináša hromadu nových sémantických tagov. Takže zbohom <div class="article">, <div class="footer">, <div class="sidebar"> a vitajte <article>, <footer>, <aside>. Ale nie je všetko zlato, čo sa blyští. Vieme, v ktorom browsri narazíme, však?

HTML5 tagy môžu byť v mnohých prehliadačoch stále vedené ako neznáme. To nám ale nijak nebráni v tom, aby sme ich používali. Môžeme ich „rozhýbať“ Javascriptom a „vyfarbiť“ CSSkom (v niektorých browsroch im treba nastaviť aspoň základné vlastnosti ako display: block). Bohužial Internet Explorer (vo verzii 8 a menej) sa k týmto tagom chová veľmi kruto a tvári sa, ako keby ich nepoznal a nedovolí nám ich naštýlovať pomocou CSS. Takže konečná? Nie nutne.

HTML5, Internet Explorer – zoznámte sa

Pomocou malého triku dokážeme IEčko prinútiť, aby sa s HTML5 tagmi (resp. akýmykoľvek neznámymi tagmi) zoznámilo. Stačí veľmi jednoduchý Javascript:

document.createElement( 'header' );

Zdá sa, že vytvorením neznámeho elementu v Javascripte si IEčko upraví svoj „zoznam podporovaných elementov“ a umožní nám s novými tagmi plnohodnotne pracovať. Výhodou je, že takto javascriptom vytvorený element nie je ani nutné pripájať do dokumentu pomocou appendChild(), čím si ušetríme zbytočné ošahávanie DOMu.

A kedže vždy existuje aspoň jedna múdrejšia hlava ako tá naša, nemusíme písať vlastný javascript na pridanie podpory do IEčka, ale môžeme využiť html5shiv.

Internet Explorer 9 Test Drive

Tue, 16 Mar 2010 20:44:35 GMT

Zdá sa, že Microsoft si vzal „úspech“ IE6 medzi webdevelopermi k srdcu a snaží sa rýchlo dohnať (alebo sa aspoň priblížiť na dohľad) ostatné moderné prehliadače. Dnes dal vývojárom k dispozícii Test Drive pripravovaného Internet Exploreru 9.

Vo vydaných informáciách o IE9 sú zaujímavé hlavne časti hovoriace o zlepšení podpory moderných štandardov:

CSS3
- Pokročilé CSS3 selektory
- Zlepšená podpora CSS3 Color modulu – rgba(), opacity
- border-radius
Výkon a rýchlosť Javascriptu
HTML5
- Podpora generických elementov (neznámych elementov) – teda možnosť pracovať s nimi v CSS a Javascripte
SVG

Všetky tieto hlavné ťaháky sa dajú v Test Drive otestovať na stránke s downloadom, ktorá zároveň slúži ako rozcestník na ukážky (animácie, akcelerovaná grafika, testy, …).

Zmien sa dočkajú i nástroje pre vývojárov, ktoré máme dostupné už i v IE8. K HTML/CSS/JS inšpektorom pribudol i Sieťový:

"Ajaxové" formuláre pomocou Iframe

Fri, 19 Feb 2010 20:45:33 GMT

AJAX sem, AJAX tam. Dnes už každá pidi-webová aplikácia asynchrónnu javascriptovú komunikáciu na niečo používa. Pomocou AJAXu je možné odoslať takmer všetko, dokonca i formuláre. Tie však majú pár obmedzení.

Ajaxový formulár

serializácia formulárových prvkov
upload

Jedným z problémov je fakt, že v prípade AJAXu si musíme parametre requestu poskladať sami v textovej podobe. To znamená, že si musíme prvky formulára zoserializovat, čo pri množstve rôznych typov prvkov (textový input a textarea, checkbox, radio button, select box, …) nie je jednoduché.

Druhý a väčší problém sú formuláre s uploadom. Javascript nemá prístup k dátam vybraného súboru (HTML5 už prácu so súbormi definuje a napríklad Firefox3.6 dokáže so súbormi už celkom pekne pracovať) a preto si jeho obsah do requestu nemôžeme pridať sami. Tento problém sa často rieši pomocou rôznych Flashových nadstavieb (napr. posielanie príloh v Gmaili).

Iframe to the rescue

Formulár však najspolahlivejšie odošle sám prehliadač, tak prečo ho z tohto procesu vytláčať? Formuláre (podobne ako odkazy) majú k dispozícii atribút target, ktorý môže obsahovať meno okna, do ktorého sa formulár má odoslať. Nemusí to však byť nové okno, či tab. Môže to byť i iframe, čo s výhodou využijeme.

Na formulár zavesíme vlastný submit handler, v ktorom:

vytvoríme nový iframe
previažeme ho s formulárom pomocou atribútov name a target
a na takto vytvorený iframe zavesíme load handler, v ktorom si počkáme na „ajaxovú“ odpoveď servra

function formSubmit( e ) {
    var e = evt.fix( e );
    var form = e.target;

    form.target = form.id + '-iframe';
    var iframe = document.createElement( 'iframe' );
        iframe.name = form.target;

    document.body.appendChild( iframe );
    evt.add( iframe, 'load', getXmlResponse );
}

evt.add( document.getElementById( 'form' ), 'submit', formSubmit );

Odpoveď môže prísť v rôznych formách (textová, JSON, XML). Ja som nedávno začal v AJAXovej komunikácii používať práve XML a tu som narazil na pár drobností, ktoré IE rieši trochu inak. Ide o získanie XML dokumentu z načítaného iframu a o získanie obsahu konkrétneho XML tagu.

Iframe, XML a Internet Explorer

XML odpoveď z iframu získame pomerne jednoducho načítaním dokumentu okna iframu: iframe.contentWindow.document. Internet Explorer bohužial v tomto kuse kódu vráti HTML dokument, ktorý obsahuje farebne zvýraznené XML (zobrazte si nejaké XML priamo v IE a uvidíte o čom hovorím). Našťastie však po XML dokument nemusíme chodiť ďaleko:

var xmlDocument = iframe.contentWindow.document;
var xmlDocumentIE = iframe.contentWindow.document.XMLDocument;

Na podobný drobný rozdiel narazíme i pri pokuse o získanie textového obsahu XML tagu:

var xmlTag = xmlDocument.getElementsByTagName("person")[0];

var value = xmlTag.textContent;
var valueIE = xmlTag.text;

Po vyriešení oboch drobností môže naše spracovanie XML z iframu vyzerať napríklad takto:

function getXmlResponse( e ) {
    var e = evt.fix( e ),
        iframe = e.target,
        xmlDocument = iframe.contentWindow.document.XMLDocument || iframe.contentWindow.document;

        setTimeout( function() {
            iframe.parentNode.removeChild( iframe );
        }, 0 );

    // example
    var person = xmlDocument.getElementsByTagName( 'person' )[0];
    document.getElementById('example-output').innerHTML = person.textContent || person.text;
}

Celý kód si môžete prezrieť v akcii v malej ukážke. V príklade na prácu s eventami používam narýchlo zbastlený objektík evt. V praxi však s najväčšou pravdepodobnosťou šiahneme po obľúbenom JS frameworku.

Niektoré JS frameworky obsahujú i podporu pre odosielanie formulárov pomocou Iframe, napríklad io-upload-iframe modul z YUI3. Práve u tohto som však narazil na problém zo získaním XML dokumentu v IE, pretože aktuálna verzia obsahuje chybu.

Logovanie javascriptových chýb

Thu, 11 Feb 2010 23:39:16 GMT

Moderné webové aplikácie sú plné javascriptov, a tie sú plné chýb. Väčšinu z chýb sa podarí v priebehu vývoja a testovania odhaliť, ale v praxi je takmer nemožné odhaliť ich všetky.

Najlepšími a zároveň najhoršími testermi sú samotní užívatelia aplikácie. Najlepší sú preto, lebo je ich omnoho viac ako našich interných testerov a hlavne používajú aplikáciu v reálných podmienkach. Najhorší sú preto, lebo nikto z nich nám prípadnú chybu neohlási, akurát sa naserie :). Našťastie však existuje jednoduchý spôsob, ako sa na prípadné chyby upozorniť vlastnými silami.

Na riešenie som narazil v článku How to log JavaScript errors. Každý moderný prehliadač* umožňuje zaregistrovať si onerror event handler, ktorý sa zavolá pri každej javascriptovej chybe a v podobe parametrov dostane údaje o danej chybe:

Chybová hláška
Cesta k súboru, v ktorom nastala chyba
Číslo riadku, na ktorom nastala chyba

Jednoduchý monitoring chýb môže potom vyzerať napríklad takto (prevzaté z uvedeného článku):

window.onerror = function(errorMessage, url, line) {
    var loggerUrl = "https://www.xing.com/js/logger";
    var parameters = "?description=" + escape(errorMessage)
        + "&amp;url=" + escape(url)
        + "&amp;line=" + escape(line)
        + "&amp;parent_url=" + escape(document.location.href)
        + "&amp;user_agent=" + escape(navigator.userAgent);

    /** Send error to server */
    new Image().src = loggerUrl + parameters;
};

Uvedený príklad používa na logovanie vytvorenie obrázka smerujúceho na monitorovaciu URL obohatenú o informácie o chybe, či prostredí. Samozrejme je možné namiesto toho použiť AJAX, uvedené obrázkové riešenie však netrpí obmedzením na rovnakú doménu ako AJAX.

* Prehliadače s WebKit jadrom obsahujú chybu, ktorá bohužial znemožňuje takýto monitoring, pretože event handler nedostane informácie o chybe.