REWRITING THE HISTORY BOOKS sydlawrence
sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence skype:sydlawrence you get th...
WHAT IS THE HISTORY API?
HTML5
JAVASCRIPT OBJECT
WHAT IS THE PROBLEM?
DYNAMIC CONTENT
NO GOING BACK
COPY PASTA
THIS IS NOT NEW
LOCATION.HASH
WE HAVE A WINNER
HAXORS FTW
FLASH BACK
GIZMODO WTF #!
WHAT DOES IT DO?
REWRITE THE HISTORY BOOKS
BACK TO THE FUTURE
WHEN TO USE IT?
LIGHTBOXES
POPUP LOGINS
COMMENTS
PAGINATION
BROWSER SUPPORT
FIREFOX
CHROME
SAFARI
OPERA
INTERNET EXPLORER
✔✔ ✖ ✔ ✖
HOW?
CLICK EVENT ON LINK
RENDER DIFFERENTLY ON AJAX REQUEST
history.pushState (stateObj,title,url);
history.replaceState (stateObj,title,url);
LISTEN FOR EVENT
window.onpopstate =  fn(evt)
FALLBACK
window. onhashchange =  fn(evt)
SITES THAT USE IT
FLICKR
GOOGLE 20thingsilearned.com
GITHUB
FACEBOOK
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history  - MDN http://dev.w3.org/html5/spec/Overview.html  -...
ANY QUESTIONS?
THANKS, I’ve BEEN SYDLAWRENCE sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrenc...
Upcoming SlideShare
Loading in...5
×

Rewriting The History Books

1,512

Published on

My talk from London JS 1 at Poke London office. The HTML5 History API.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,512
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • I’m sydlawrence afraid of heights lead developer at Marmalade part time lecturer at Winchester Uni on the Digital Media Development Course love the future Going to talk about the new History API available in all decent browsers will also cover mistakes made by developers with ajax
  • What is it? You, you guessed it, it is part of the ‘html5’ spec
  • HTML5 but of course it is javascript... That discussion is certainly for another time... One of the many new javascript toys available in the HTML5 spec DeviceOrientation GeoLocation LocalStorage
  • Javascript Object basically window.history is a javascript object It has been available for a long time window.history.back a couple of NEW tools
  • What is the problem? Why do we need window.history
  • Ajax loads new content out with the old, in with the new... that content is dynamically generated.. google doesnt see that content... unless you use a link for google to spider.
  • Back button People press the back button all the time... Much more than I ever thought... The amount of times I have seen people get confused by pressing back, and then leaving a site.. One of the horrendous issues with Flash... USER FRIENDLY
  • Copy & Paste Same, same People like to share urls... GOOGLE FRIENDLY They will share the wrong url! think ow.ly Dont make people confused the first time they click on a link to get to your site... First time visitors... Treat them with honour, with diginity, intice them back for more...
  • Surely this isn’t new This isn’t a new problem.. this wasn’t a problem first discovered in the last six months Nope People like to find solutions
  • location.hash There has been an interesting solution, using location.hash javascript can modify the hash location of the url... i.e. adding a # on the end followed by a string..
  • if it ain’t broke don’t fix it BUT there are issues
  • always felt like a hack always was a hack... location.hash was not meant for that kind of thing (with regards to ajax, hidden content maybe, but not modified content)
  • requires javascript on reload If you send a link to someone with the hash location... the new user needs javascript for that to take affect... OK, ignore lack of javascript... What about Google... Your javascript on reload is to populate with the new ajaxed content Same problems flash had
  • Gizmodo, WTF!# run through example www.example.com/old/#/new visit old www.example.com/old/ clic k something www.exam ple.com/old/#/new share link www.exam ple.com/old/#/new old sta tic content, then javascript needs to get the new
  • What does it do? History stack, that behaves in the same way a simple array would
  • Adds to the history books push on to the stack
  • Back to the Future popstate event when they press forwards
  • When Would This be useful When the content changes... When someone might want to share the content back button copy paste
  • Lightboxes Images.. videos
  • Popup logins more and more sites use this what if they fail to login and want to try again
  • Comments pages
  • Pagination pages
  • Browser Support Remember, this is still bleeding edge
  • Firefox introduced in gecko 2 firefox 4
  • Chrome WebKit 528 Live version
  • Safari Also uses webkit Live version
  • Opera Not as yet
  • Internet Explorer Not as yet
  • How do you use this wonderful thing? run through workflow same ajax mistaked
  • How do you use this wonderful thing? run through workflow same ajax mistaked
  • Click event on link Always do this for ajax content... to the same url that you would without javascript ALWAYS
  • render differently on ajax requests Don’t have different urls..
  • history.pushState this is used to add to the history history.pushState(StateObj,title,url) local domain url StateObj is anthing you might want to retreive later There is also replaceState that operates in the same way, but it replaces the current state
  • history.pushState this is used to add to the history history.pushState(StateObj,title,url) local domain url StateObj is anthing you might want to retreive later There is also replaceState that operates in the same way, but it replaces the current state
  • listen for event when someone presses back or forward..
  • window.onpopstate popstate event window.onpopstate = function(event) passes data data.state = StateObj
  • sites that use it
  • window.onhashchange doesn’t work in <= ie7
  • sites that use it
  • flickr for their lightboxes
  • google 20 things i learned about the web ebook
  • github file browsing
  • sydlawrence.com ME!
  • Want to know more Mozilla Developer Network HTML5 Spec My Fancy-box fork on github
  • Any Questions? How to check in browsers check to see if the pushstate function exists window.onpopstate = function (evt) {} history.pushState(StateObj,title,url);
  • I’m sydlawrence afraid of heights lead developer at Marmalade part time lecturer at Winchester Uni on the Digital Media Development Course love the future Going to talk about the new History API available in all decent browsers will also cover mistakes made by developers with ajax
  • Rewriting The History Books

    1. 1. REWRITING THE HISTORY BOOKS sydlawrence
    2. 2. sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence skype:sydlawrence you get the picture HI, I’M SYDLAWRENCE
    3. 3. WHAT IS THE HISTORY API?
    4. 4. HTML5
    5. 5. JAVASCRIPT OBJECT
    6. 6. WHAT IS THE PROBLEM?
    7. 7. DYNAMIC CONTENT
    8. 8. NO GOING BACK
    9. 9. COPY PASTA
    10. 10. THIS IS NOT NEW
    11. 11. LOCATION.HASH
    12. 12. WE HAVE A WINNER
    13. 13. HAXORS FTW
    14. 14. FLASH BACK
    15. 15. GIZMODO WTF #!
    16. 16. WHAT DOES IT DO?
    17. 17. REWRITE THE HISTORY BOOKS
    18. 18. BACK TO THE FUTURE
    19. 19. WHEN TO USE IT?
    20. 20. LIGHTBOXES
    21. 21. POPUP LOGINS
    22. 22. COMMENTS
    23. 23. PAGINATION
    24. 24. BROWSER SUPPORT
    25. 25. FIREFOX
    26. 26. CHROME
    27. 27. SAFARI
    28. 28. OPERA
    29. 29. INTERNET EXPLORER
    30. 30. ✔✔ ✖ ✔ ✖
    31. 31. HOW?
    32. 32. CLICK EVENT ON LINK
    33. 33. RENDER DIFFERENTLY ON AJAX REQUEST
    34. 34. history.pushState (stateObj,title,url);
    35. 35. history.replaceState (stateObj,title,url);
    36. 36. LISTEN FOR EVENT
    37. 37. window.onpopstate = fn(evt)
    38. 38. FALLBACK
    39. 39. window. onhashchange = fn(evt)
    40. 40. SITES THAT USE IT
    41. 41. FLICKR
    42. 42. GOOGLE 20thingsilearned.com
    43. 43. GITHUB
    44. 44. FACEBOOK
    45. 45. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - MDN http://dev.w3.org/html5/spec/Overview.html - HTML5 Spec https://githu b.com/sydlawrence/fancy-box - My Fancy-box Fork WANT TO KNOW MORE
    46. 46. ANY QUESTIONS?
    47. 47. THANKS, I’ve BEEN SYDLAWRENCE sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence skype:sydlawrence you get the picture
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×