Rewriting The History Books
•Download as PPT, PDF•
0 likes•1,015 views
My talk from London JS 1 at Poke London office. The HTML5 History API.
Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
More from Syd Lawrence
More from Syd Lawrence (10)
Recently uploaded
Recently uploaded (20)
Rewriting The History Books
- 1. REWRITING THE HISTORY BOOKS sydlawrence
- 2. sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence skype:sydlawrence you get the picture HI, I’M SYDLAWRENCE
- 3. WHAT IS THE HISTORY API?
- 4. HTML5
- 6. WHAT IS THE PROBLEM?
- 9. COPY PASTA
- 10. THIS IS NOT NEW
- 11. LOCATION.HASH
- 12. WE HAVE A WINNER
- 13. HAXORS FTW
- 14. FLASH BACK
- 15. GIZMODO WTF #!
- 16. WHAT DOES IT DO?
- 17. REWRITE THE HISTORY BOOKS
- 18. BACK TO THE FUTURE
- 19. WHEN TO USE IT?
- 20. LIGHTBOXES
- 21. POPUP LOGINS
- 22. COMMENTS
- 23. PAGINATION
- 24. BROWSER SUPPORT
- 25. FIREFOX
- 26. CHROME
- 27. SAFARI
- 28. OPERA
- 30. ✔✔ ✖ ✔ ✖
- 31. HOW?
- 32. CLICK EVENT ON LINK
- 33. RENDER DIFFERENTLY ON AJAX REQUEST
- 36. LISTEN FOR EVENT
- 37. window.onpopstate = fn(evt)
- 38. FALLBACK
- 39. window. onhashchange = fn(evt)
- 40. SITES THAT USE IT
- 41. FLICKR
- 43. GITHUB
- 44. FACEBOOK
- 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. ANY QUESTIONS?
- 47. THANKS, I’ve BEEN SYDLAWRENCE sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence skype:sydlawrence you get the picture
Editor's Notes
- 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