Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rewriting The History Books

1,878 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×