Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The State of the Web

E14f55d3f939977cecbf51b64ff6f861?s=47 Keith Pitt
January 20, 2011

The State of the Web

In this presentation, I talk about the HTML5 History API


Keith Pitt

January 20, 2011


  1. The State of the Web @keithpitt

  2. Who Am I? Keith Keith Pitt Magic Keith Steve (long

  3. First Technical Talk. Be Gentle... (Ok, if you want, rough

    me up a little)
  4. State

  5. Web State

  6. Web State Web Pages/Applications are Stateful The back & forward

    buttons in the browser traverse state The URL is a link to the state Search engine crawlers take a snapshot of each possible state, and indexes them
  7. AJAX Breaks This Somebody please think of the children!

  8. How AJAX breaks state The back & forward buttons no

    longer behave as expected Links no longer work correctly Search engines can no longer crawl
  9. Solution?

  10. Hack the # Anchor Lots of ugly hacks, especially in

    IE where we need to use an iFrame.
  11. Better Solution?

  12. HTML5 History API Only works in Webkit. Firefox 4 is

    supposed to have it.
  13. HTML5 History API 2 new methods: pushState replaceState 1 new

    event on the window object: onpopstate
  14. pushState // This object is passed to the onpopstate event

    when it is fired. You // can fill this object with what ever you like. var stateObject = { title: 'This Awesome Post', createdAt: '2010-10-10', author: 'keithpitt' }; // At the moment, most browsers are ignoring this property, so just fill it with // the title of the new page. According to Firefox, they _may_ use it in the // future. var title = 'This Awesome Post'; // The full URL of the new page. var url = '/posts/this-awesome-post'; history.pushState(stateObject, title, url);
  15. replaceState Same API as pushState, but doesn’t add anything to

    the history stack.
  16. onpopstate $(window).bind('popstate', function(event) { alert('ZOMG, State Changed!'); })

  17. JIZZ IN MY PANTS Solution?

  18. HTML5 History API AND The # Anchor Hack

  19. jQuery Address HTML5 History API where supported. Reverts back to

    the # Anchor hack. Works in IE6 http://www.asual.com/jquery/address/
  20. Example $.address.state('/'); $.address.change(function(event) { alert('ZOMG, State Changed!'); }); $.address.value('/some/random/url');

  21. Demo

  22. @keithpitty

  23. @keithpitt

  24. Thats It! See more at my blog at keithpitt.com