SlideShare a Scribd company logo
REWRITING THE HISTORY BOOKS sydlawrence
sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence skype:sydlawrence you get the picture HI, I’M SYDLAWRENCE
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  - HTML5 Spec https://githu b.com/sydlawrence/fancy-box  - My Fancy-box  Fork WANT TO KNOW MORE
ANY QUESTIONS?
THANKS, I’ve BEEN SYDLAWRENCE sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence skype:sydlawrence you get the picture

More Related Content

Viewers also liked

Reference tools slideshow compatible 2
Reference tools slideshow compatible 2Reference tools slideshow compatible 2
Reference tools slideshow compatible 2
Emily Pokorny
 
A Visual History Of The Book
A Visual  History Of The BookA Visual  History Of The Book
A Visual History Of The Book
Sharon Pullen
 
Parts of a book
Parts of a bookParts of a book
Parts of a book
jdpayne1971
 
Reference Sources
Reference SourcesReference Sources
Reference Sources
Claudio Laferla
 
3rd Parts Of A Book Part 2
3rd Parts Of A Book Part 23rd Parts Of A Book Part 2
3rd Parts Of A Book Part 2
Ringgold Primary School
 
Reference resources
Reference resourcesReference resources
Reference resources
pamelaaban
 
Parts Of A Book
Parts Of A BookParts Of A Book
Parts Of A Book
NWEMS
 
Library Skills
Library SkillsLibrary Skills
Library Skills
Fumiyo Araki Guzman
 
ED TECH I - Teaching with Dramatized Experiences
ED TECH I - Teaching with Dramatized ExperiencesED TECH I - Teaching with Dramatized Experiences
ED TECH I - Teaching with Dramatized Experiences
Angela Panganiban
 
Parts Of A Book
Parts Of A BookParts Of A Book
Parts Of A Book
NWEMS
 
Parts of a book power point for students
Parts of a book power point for studentsParts of a book power point for students
Parts of a book power point for students
millieburch
 
Reference Materials Powerpoint
Reference Materials PowerpointReference Materials Powerpoint
Reference Materials Powerpoint
Bedford High School
 

Viewers also liked (12)

Reference tools slideshow compatible 2
Reference tools slideshow compatible 2Reference tools slideshow compatible 2
Reference tools slideshow compatible 2
 
A Visual History Of The Book
A Visual  History Of The BookA Visual  History Of The Book
A Visual History Of The Book
 
Parts of a book
Parts of a bookParts of a book
Parts of a book
 
Reference Sources
Reference SourcesReference Sources
Reference Sources
 
3rd Parts Of A Book Part 2
3rd Parts Of A Book Part 23rd Parts Of A Book Part 2
3rd Parts Of A Book Part 2
 
Reference resources
Reference resourcesReference resources
Reference resources
 
Parts Of A Book
Parts Of A BookParts Of A Book
Parts Of A Book
 
Library Skills
Library SkillsLibrary Skills
Library Skills
 
ED TECH I - Teaching with Dramatized Experiences
ED TECH I - Teaching with Dramatized ExperiencesED TECH I - Teaching with Dramatized Experiences
ED TECH I - Teaching with Dramatized Experiences
 
Parts Of A Book
Parts Of A BookParts Of A Book
Parts Of A Book
 
Parts of a book power point for students
Parts of a book power point for studentsParts of a book power point for students
Parts of a book power point for students
 
Reference Materials Powerpoint
Reference Materials PowerpointReference Materials Powerpoint
Reference Materials Powerpoint
 

More from Syd Lawrence

High Performance PhoneGap Apps
High Performance PhoneGap AppsHigh Performance PhoneGap Apps
High Performance PhoneGap Apps
Syd Lawrence
 
Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014
Syd Lawrence
 
Mobile Apps with Web Tech
Mobile Apps with Web TechMobile Apps with Web Tech
Mobile Apps with Web Tech
Syd Lawrence
 
It's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you thinkIt's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you think
Syd Lawrence
 
Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)
Syd Lawrence
 
Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)
Syd Lawrence
 
Mobile web app development
Mobile web app developmentMobile web app development
Mobile web app development
Syd Lawrence
 
Javascript Development
Javascript DevelopmentJavascript Development
Javascript Development
Syd Lawrence
 
Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
Syd Lawrence
 
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Syd Lawrence
 

More from Syd Lawrence (10)

High Performance PhoneGap Apps
High Performance PhoneGap AppsHigh Performance PhoneGap Apps
High Performance PhoneGap Apps
 
Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014Music is the Soul - The Web is the Platform FOWA London 2014
Music is the Soul - The Web is the Platform FOWA London 2014
 
Mobile Apps with Web Tech
Mobile Apps with Web TechMobile Apps with Web Tech
Mobile Apps with Web Tech
 
It's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you thinkIt's the start of the web revolution, but it's not what you think
It's the start of the web revolution, but it's not what you think
 
Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)Mobile Web App Development (Becoming native)
Mobile Web App Development (Becoming native)
 
Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)Mobile Web App Development (Building your API)
Mobile Web App Development (Building your API)
 
Mobile web app development
Mobile web app developmentMobile web app development
Mobile web app development
 
Javascript Development
Javascript DevelopmentJavascript Development
Javascript Development
 
Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
 
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the Histo...
 

Recently uploaded

Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
TIPNGVN2
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website
Pixlogix Infotech
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 

Recently uploaded (20)

Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website20 Comprehensive Checklist of Designing and Developing a Website
20 Comprehensive Checklist of Designing and Developing a Website
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 

Rewriting The History Books

Editor's Notes

  1. 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
  2. What is it? You, you guessed it, it is part of the ‘html5’ spec
  3. 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
  4. 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
  5. What is the problem? Why do we need window.history
  6. 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.
  7. 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
  8. 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...
  9. 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
  10. 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..
  11. if it ain’t broke don’t fix it BUT there are issues
  12. 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)
  13. 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
  14. 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
  15. What does it do? History stack, that behaves in the same way a simple array would
  16. Adds to the history books push on to the stack
  17. Back to the Future popstate event when they press forwards
  18. When Would This be useful When the content changes... When someone might want to share the content back button copy paste
  19. Lightboxes Images.. videos
  20. Popup logins more and more sites use this what if they fail to login and want to try again
  21. Comments pages
  22. Pagination pages
  23. Browser Support Remember, this is still bleeding edge
  24. Firefox introduced in gecko 2 firefox 4
  25. Chrome WebKit 528 Live version
  26. Safari Also uses webkit Live version
  27. Opera Not as yet
  28. Internet Explorer Not as yet
  29. How do you use this wonderful thing? run through workflow same ajax mistaked
  30. How do you use this wonderful thing? run through workflow same ajax mistaked
  31. Click event on link Always do this for ajax content... to the same url that you would without javascript ALWAYS
  32. render differently on ajax requests Don’t have different urls..
  33. 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
  34. 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
  35. listen for event when someone presses back or forward..
  36. window.onpopstate popstate event window.onpopstate = function(event) passes data data.state = StateObj
  37. sites that use it
  38. window.onhashchange doesn’t work in <= ie7
  39. sites that use it
  40. flickr for their lightboxes
  41. google 20 things i learned about the web ebook
  42. github file browsing
  43. sydlawrence.com ME!
  44. Want to know more Mozilla Developer Network HTML5 Spec My Fancy-box fork on github
  45. Any Questions? How to check in browsers check to see if the pushstate function exists window.onpopstate = function (evt) {} history.pushState(StateObj,title,url);
  46. 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