Be Pure. Be Vigilant. Behave

Embed Size (px)

Citation preview

  • 8/14/2019 Be Pure. Be Vigilant. Behave.

    1/7

    be pure

    be vigilantbehave

    be pure

    separation

    progressiveenhancement

    structurepresentationbehaviour

    content

    HTMLCSS

    JavaScript CSS

    DOM

    p { }

    document.getElementsByTagName("p")

    english

    lolcat

    get all the p elements

    i can has p elementz?

    CSS

    DOM

    #foo { }

    document.getElementById("foo")

  • 8/14/2019 Be Pure. Be Vigilant. Behave.

    2/7

    CSS

    DOM

    #foo p { }

    document.getElementById("foo").getElementsByTagName("p")

    example

    adactio.com

    About this site

    ...

    Customise...

    This is the plain vanilla look.

  • 8/14/2019 Be Pure. Be Vigilant. Behave.

    3/7

    functiontoggleExtras() {

    varsidebar = document.getElementById('extra');

    varheaders = sidebar.getElementsByTagName('h3');

    for (vari=0;i

  • 8/14/2019 Be Pure. Be Vigilant. Behave.

    4/7

    Your rating

    **********

    *****

    function selectReplacement(obj) {

    obj.className += ' replaced';

    var ul = document.createElement('ul');

    ul.className = 'selectReplacement';

    varopts = obj.getElementsByTagName('option');

    for (vari=0; i

  • 8/14/2019 Be Pure. Be Vigilant. Behave.

    5/7

    behaveajax ajaxcommunicating with theserver without refreshingthe whole page.

    ajaxxmlhttprequest

    hijax

    xmlhttprequest

    progressiveenhancement

    examplerapha.cc

  • 8/14/2019 Be Pure. Be Vigilant. Behave.

    6/7

    document.getElementById('product-form').onsubmit =

    function() {

    vardata = '';

    for (vari=0; i

  • 8/14/2019 Be Pure. Be Vigilant. Behave.

    7/7

    whats happening?

    what happened?the back button

    bookmarking

    beyond the browser