47. THANKS, I’ve BEEN SYDLAWRENCE sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence skype:sydlawrence you get the picture
Notas do Editor
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..
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