SlideShare a Scribd company logo
MAKING AJAX USER
FRIENDLY, GOOGLE
FRIENDLY, FRIENDLY
FRIENDLY USING THE
HISTORY API
Winchester Studio. 60­61 High Street. Winchester. Hampshire. SO23 9BX.   SIT BACK /
                                                                          SIT BACK
London Studio. 1 The StableYard. 16a Balham Hill. London. SW12 9EB.
                                                                         LISTENUP
                                                                          LISTEN UP
T. +44 (0) 20 3137 1469 
F. +44 (0) 845 862 0706

info@marmaladeontoast.co.uk
www.marmaladeontoast.co.uk
HI, I’M
SYDLAWRENCE
I’M AFRAID OF HEIGHTS
sydlawrence.com
@sydlawrence
github.com/sydlawrence
fb.com/sydlawrence
tumblr.com/sydlawrence
                         SIT BACK /
                          SIT BACK
skype:sydlawrence        LISTENUP
                          LISTEN UP


you get the picture
WHAT
IS IT?


                                                      SIT BACK /
                                                       SIT BACK
                                                      LISTENUP
                                                       LISTEN UP



http://www.flickr.com/photos/pixelthing/2555047998/
HTML5



        SIT BACK /
         SIT BACK
        LISTENUP
         LISTEN UP
JAVASCRIPT
OBJECT


                                                  SIT BACK /
                                                   SIT BACK
                                                  LISTENUP
                                                   LISTEN UP



http://www.flickr.com/photos/hamsters/37012321/
WHAT IS
THE PROBLEM?


                                                    SIT BACK /
                                                     SIT BACK
                                                    LISTENUP
                                                     LISTEN UP



http://www.flickr.com/photos/benjibot/4803751040/
AJAX LOADS
NEW CONTENT


                                                      SIT BACK /
                                                       SIT BACK
                                                      LISTENUP
                                                       LISTEN UP



http://www.flickr.com/photos/elstruthio/2761267024/
BACK
BUTTON


                                                          SIT BACK /
                                                           SIT BACK
                                                          LISTENUP
                                                           LISTEN UP



http://www.flickr.com/photos/executionsinfo/4573848874/
COPY
PASTA


                                                      SIT BACK /
                                                       SIT BACK
                                                      LISTENUP
                                                       LISTEN UP



http://www.flickr.com/photos/anwoodward/3341609205/
SURELY, THIS
ISN’T NEW


                                                       SIT BACK /
                                                        SIT BACK
                                                       LISTENUP
                                                        LISTEN UP



http://www.flickr.com/photos/9422878@N08/4898524174/
LOCATION.HASH



                                                    SIT BACK /
                                                     SIT BACK
                                                    LISTENUP
                                                     LISTEN UP



http://www.flickr.com/photos/spodzone/1172282130/
IF IT
AIN’T BROKE


                                                     SIT BACK /
                                                      SIT BACK
                                                     LISTENUP
                                                      LISTEN UP



http://www.flickr.com/photos/trojanguy/3251306440/
ALWAYS FELT
LIKE A HACK


                                                    SIT BACK /
                                                     SIT BACK
                                                    LISTENUP
                                                     LISTEN UP



http://www.flickr.com/photos/stevedinn/180630463/
REQUIRES
JAVASCRIPT
ON RELOAD

                                                        SIT BACK /
                                                         SIT BACK
                                                        LISTENUP
                                                         LISTEN UP



http://www.flickr.com/photos/23516192@N08/3418663794/
EXAMPLE

www.example.com/old/#/new


                                                    SIT BACK /
                                                     SIT BACK
                                                    LISTENUP
                                                     LISTEN UP



http://www.flickr.com/photos/grimages/3854628417/
WHAT DOES
IT DO?


                                                 SIT BACK /
                                                  SIT BACK
                                                 LISTENUP
                                                  LISTEN UP



http://www.flickr.com/photos/doggo/2618699311/
ADDS TO THE
HISTORY BOOKS


                                                    SIT BACK /
                                                     SIT BACK
                                                    LISTENUP
                                                     LISTEN UP



http://www.flickr.com/photos/namealus/3676208219/
BACK TO
THE FUTURE


                                                   SIT BACK /
                                                    SIT BACK
                                                   LISTENUP
                                                    LISTEN UP



http://www.flickr.com/photos/boltron/2670777828/
WHEN WOULD
THIS BE USEFUL?


                                                     SIT BACK /
                                                      SIT BACK
                                                     LISTENUP
                                                      LISTEN UP



http://www.flickr.com/photos/jeffwerner/386367076/
LIGHTBOXES



                                                      SIT BACK /
                                                       SIT BACK
                                                      LISTENUP
                                                       LISTEN UP



http://www.flickr.com/photos/nielsprovos/252176710/
POPUP
LOGINS


                                                               SIT BACK /
                                                                SIT BACK
                                                               LISTENUP
                                                                LISTEN UP



http://www.flickr.com/photos/seasidebear/3409308888/sizes/l/
COMMENTS



                                                       SIT BACK /
                                                        SIT BACK
                                                       LISTENUP
                                                        LISTEN UP



http://www.flickr.com/photos/geishaboy500/541493823/
PAGINATION



                                                          SIT BACK /
                                                           SIT BACK
                                                          LISTENUP
                                                           LISTEN UP



http://www.flickr.com/photos/davidecassenti/4335607637/
BROWSER
SUPPORT


                                                       SIT BACK /
                                                        SIT BACK
                                                       LISTENUP
                                                        LISTEN UP



http://www.flickr.com/photos/annagaycoan/3750144703/
FIREFOX



                                                    SIT BACK /
                                                     SIT BACK
                                                    LISTENUP
                                                     LISTEN UP



http://www.flickr.com/photos/kevenlaw/2784262431/
CHROME



                                                        SIT BACK /
                                                         SIT BACK
                                                        LISTENUP
                                                         LISTEN UP



http://www.flickr.com/photos/professorbop/3872715381/
SAFARI



                                                    SIT BACK /
                                                     SIT BACK
                                                    LISTENUP
                                                     LISTEN UP



http://www.flickr.com/photos/vickispix/296076348/
OPERA



                                                      SIT BACK /
                                                       SIT BACK
                                                      LISTENUP
                                                       LISTEN UP



http://www.flickr.com/photos/sacharules/1441899883/
INTERNET
EXPLORER
as of ie9b2




                                                 SIT BACK /
                                                  SIT BACK
                                                 LISTENUP
                                                  LISTEN UP



http://www.flickr.com/photos/celebdu/10200825/
HOW?



                                                  SIT BACK /
                                                   SIT BACK
                                                  LISTENUP
                                                   LISTEN UP



http://www.flickr.com/photos/cayusa/2194119780/
CLICK EVENT
ON LINK


                                                       SIT BACK /
                                                        SIT BACK
                                                       LISTENUP
                                                        LISTEN UP


http://www.flickr.com/photos/8829172@N02/2880158998/
RENDER DIFFERENTLY
ON AJAX REQUEST


                                                      SIT BACK /
                                                       SIT BACK
                                                      LISTENUP
                                                       LISTEN UP



http://www.flickr.com/photos/shannonmary/187131727/
history.pushState
           (stateObj,title,url);




                                                SIT BACK /
                                                 SIT BACK
                                                LISTENUP
                                                 LISTEN UP



http://www.flickr.com/photos/fras/3800547100/
LISTEN
FOR EVENT


                                                         SIT BACK /
                                                          SIT BACK
                                                         LISTENUP
                                                          LISTEN UP



http://www.flickr.com/photos/bernhardbenke/2370811833/
window.onpopstate
    = fn(evt)



                                                       SIT BACK /
                                                        SIT BACK
                                                       LISTENUP
                                                        LISTEN UP



http://www.flickr.com/photos/pascalbovet/4657125857/
SITES THAT
USE IT


                                                    SIT BACK /
                                                     SIT BACK
                                                    LISTENUP
                                                     LISTEN UP



http://www.flickr.com/photos/mattknoth/520009619/
FLICKR



                                                          SIT BACK /
                                                           SIT BACK
                                                          LISTENUP
                                                           LISTEN UP



http://www.flickr.com/photos/brandoncwarren/4209735621/
GOOGLE
http://www.20thingsilearned.com/




                                                     SIT BACK /
                                                      SIT BACK
                                                     LISTENUP
                                                      LISTEN UP



http://www.flickr.com/photos/katphotos/1030473901/
GITHUB



                                                      SIT BACK /
                                                       SIT BACK
                                                      LISTENUP
                                                       LISTEN UP



http://www.flickr.com/photos/entropy1138/173848032/
SYDLAWRENCE.COM



                  SIT BACK /
                   SIT BACK
                  LISTENUP
                   LISTEN UP



Victorian Times
USER
FRIENDLY


                                               SIT BACK /
                                                SIT BACK
                                               LISTENUP
                                                LISTEN UP



http://www.flickr.com/photos/emdot/22081098/
GOOGLE
FRIENDLY


                                                   SIT BACK /
                                                    SIT BACK
                                                   LISTENUP
                                                    LISTEN UP



http://www.flickr.com/photos/donsolo/2189108384/
FRIENDLY
FRIENDLY


                                                         SIT BACK /
                                                          SIT BACK
                                                         LISTENUP
                                                          LISTEN UP



http://www.flickr.com/photos/scottkinmartin/478136767/
WANT TO
KNOW MORE


https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - MDN
http://dev.w3.org/html5/spec/Overview.html - HTML5 Spec                       IS IT /
                                                                               SIT BACK
                                                                               LISTEN UP
                                                                              PINT TIME?
https://github.com/sydlawrence/fancy-box - My Fancy-box Fork
ANY
QUESTIONS?


                                                  IS IT /
                                                   SIT BACK
                                                   LISTEN UP
                                                  PINT TIME?

http://www.flickr.com/photos/dexxus/4158928239/
THANKS
I’VE BEEN
SYDLAWRENCE
sydlawrence.com
@sydlawrence
github.com/sydlawrence
fb.com/sydlawrence
tumblr.com/sydlawrence
                         IS IT /
                          SIT BACK
skype:sydlawrence         LISTEN UP
                         PINT TIME?

you get the picture

More Related Content

What's hot

Infinite Possibilities - Devoxx Belgium, 2014
Infinite Possibilities - Devoxx Belgium, 2014Infinite Possibilities - Devoxx Belgium, 2014
Infinite Possibilities - Devoxx Belgium, 2014
Denise Jacobs
 
Immediate Inspiration
Immediate Inspiration Immediate Inspiration
Immediate Inspiration
Denise Jacobs
 
BPL: Libraries, Learning & Play
BPL: Libraries, Learning & PlayBPL: Libraries, Learning & Play
BPL: Libraries, Learning & Play
hblowers
 
Feynman
FeynmanFeynman
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Denise Jacobs
 
Credits
CreditsCredits
Credits
r0xee
 
Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016
Denise Jacobs
 
Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015
Denise Jacobs
 
Senior Seminar Presentation
Senior Seminar PresentationSenior Seminar Presentation
Senior Seminar Presentation
Victoria J
 
Advancing the Future of America's Heritage through Organic Social Networks
Advancing the Future of America's Heritage through Organic Social NetworksAdvancing the Future of America's Heritage through Organic Social Networks
Advancing the Future of America's Heritage through Organic Social Networks
Jeff Guin
 
Infinite Possibilities - Digital PM Summit 2015
Infinite Possibilities - Digital PM Summit 2015Infinite Possibilities - Digital PM Summit 2015
Infinite Possibilities - Digital PM Summit 2015
Denise Jacobs
 
Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015
Denise Jacobs
 
Hyperlocal or Hype (and Local)?
Hyperlocal or Hype (and Local)?Hyperlocal or Hype (and Local)?
Hyperlocal or Hype (and Local)?
Gary Gale
 
Find Your Shameless Spark - Inspiring Women Live 2014
Find Your Shameless Spark - Inspiring Women Live 2014Find Your Shameless Spark - Inspiring Women Live 2014
Find Your Shameless Spark - Inspiring Women Live 2014
Denise Jacobs
 
Get Unblocked
Get UnblockedGet Unblocked
Get Unblocked
Denise Jacobs
 
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Denise Jacobs
 
Content first-design
Content first-designContent first-design
Content first-design
axoplasm
 
The Creativity Imperative - Prototypes, Process, and Play 2015
The Creativity Imperative - Prototypes, Process, and Play 2015The Creativity Imperative - Prototypes, Process, and Play 2015
The Creativity Imperative - Prototypes, Process, and Play 2015
Denise Jacobs
 

What's hot (18)

Infinite Possibilities - Devoxx Belgium, 2014
Infinite Possibilities - Devoxx Belgium, 2014Infinite Possibilities - Devoxx Belgium, 2014
Infinite Possibilities - Devoxx Belgium, 2014
 
Immediate Inspiration
Immediate Inspiration Immediate Inspiration
Immediate Inspiration
 
BPL: Libraries, Learning & Play
BPL: Libraries, Learning & PlayBPL: Libraries, Learning & Play
BPL: Libraries, Learning & Play
 
Feynman
FeynmanFeynman
Feynman
 
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015
 
Credits
CreditsCredits
Credits
 
Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016Infinite Possibilities - FrontEnd Conf CH 2016
Infinite Possibilities - FrontEnd Conf CH 2016
 
Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015Banish Your Inner Critic - Design & Content 2015
Banish Your Inner Critic - Design & Content 2015
 
Senior Seminar Presentation
Senior Seminar PresentationSenior Seminar Presentation
Senior Seminar Presentation
 
Advancing the Future of America's Heritage through Organic Social Networks
Advancing the Future of America's Heritage through Organic Social NetworksAdvancing the Future of America's Heritage through Organic Social Networks
Advancing the Future of America's Heritage through Organic Social Networks
 
Infinite Possibilities - Digital PM Summit 2015
Infinite Possibilities - Digital PM Summit 2015Infinite Possibilities - Digital PM Summit 2015
Infinite Possibilities - Digital PM Summit 2015
 
Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015Get Unblocked - NDC Oslo 2015
Get Unblocked - NDC Oslo 2015
 
Hyperlocal or Hype (and Local)?
Hyperlocal or Hype (and Local)?Hyperlocal or Hype (and Local)?
Hyperlocal or Hype (and Local)?
 
Find Your Shameless Spark - Inspiring Women Live 2014
Find Your Shameless Spark - Inspiring Women Live 2014Find Your Shameless Spark - Inspiring Women Live 2014
Find Your Shameless Spark - Inspiring Women Live 2014
 
Get Unblocked
Get UnblockedGet Unblocked
Get Unblocked
 
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
Banish Your Inner Critic: Amplify Your Impact - Mind The Product SF 2019
 
Content first-design
Content first-designContent first-design
Content first-design
 
The Creativity Imperative - Prototypes, Process, and Play 2015
The Creativity Imperative - Prototypes, Process, and Play 2015The Creativity Imperative - Prototypes, Process, and Play 2015
The Creativity Imperative - Prototypes, Process, and Play 2015
 

Similar to Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API

Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
Syd Lawrence
 
Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
Andreas Beining
 
Javascript Development
Javascript DevelopmentJavascript Development
Javascript Development
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
 
Varrati Zack slideshare_presentation
Varrati Zack slideshare_presentationVarrati Zack slideshare_presentation
Varrati Zack slideshare_presentation
Zack James
 
Wilkins, akeem visual resume
Wilkins, akeem visual resume Wilkins, akeem visual resume
Wilkins, akeem visual resume
Awilkins1920
 
Hairston walter a1_pcp
Hairston walter a1_pcpHairston walter a1_pcp
Hairston walter a1_pcp
hairston34
 
Jasmine Perry Visual Resume
Jasmine Perry Visual ResumeJasmine Perry Visual Resume
Jasmine Perry Visual Resume
Jasmine Perry
 
Final PPP
Final PPPFinal PPP
Watson joshua 3.4
Watson joshua 3.4Watson joshua 3.4
Watson joshua 3.4
jwatson22
 
Desert Animals 15
Desert Animals 15Desert Animals 15
Desert Animals 15
SkyblueRm31
 
Sinkholes pics
Sinkholes picsSinkholes pics
Sinkholes pics
31sk9
 
The 3 Little Pigs Presintaion #11
The 3 Little Pigs Presintaion #11The 3 Little Pigs Presintaion #11
The 3 Little Pigs Presintaion #11
SkyblueRm31
 
Alston Bryan Ignite_Presentation_Slideshow
Alston Bryan Ignite_Presentation_SlideshowAlston Bryan Ignite_Presentation_Slideshow
Alston Bryan Ignite_Presentation_Slideshow
mrflava70
 
Douville_Tiffany_visualresume
Douville_Tiffany_visualresumeDouville_Tiffany_visualresume
Douville_Tiffany_visualresume
tiffanydouville
 
Visual Resume
Visual ResumeVisual Resume
Visual Resume
shiney41
 
Libraries and Transliteracy KLA
Libraries and Transliteracy KLALibraries and Transliteracy KLA
Libraries and Transliteracy KLA
Bobbi Newman
 
Becoming a connected leader
Becoming a connected leaderBecoming a connected leader
Becoming a connected leader
Chris Wejr
 
Sector changes and career development in libraries: Every flavour career bean...
Sector changes and career development in libraries: Every flavour career bean...Sector changes and career development in libraries: Every flavour career bean...
Sector changes and career development in libraries: Every flavour career bean...
Career Development Group
 
A College Transcript in High School
A College Transcript in High SchoolA College Transcript in High School
A College Transcript in High School
Jeremy Zweiacker
 

Similar to Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API (20)

Introduction to javascript
Introduction to javascriptIntroduction to javascript
Introduction to javascript
 
Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)
 
Javascript Development
Javascript DevelopmentJavascript Development
Javascript Development
 
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)
 
Varrati Zack slideshare_presentation
Varrati Zack slideshare_presentationVarrati Zack slideshare_presentation
Varrati Zack slideshare_presentation
 
Wilkins, akeem visual resume
Wilkins, akeem visual resume Wilkins, akeem visual resume
Wilkins, akeem visual resume
 
Hairston walter a1_pcp
Hairston walter a1_pcpHairston walter a1_pcp
Hairston walter a1_pcp
 
Jasmine Perry Visual Resume
Jasmine Perry Visual ResumeJasmine Perry Visual Resume
Jasmine Perry Visual Resume
 
Final PPP
Final PPPFinal PPP
Final PPP
 
Watson joshua 3.4
Watson joshua 3.4Watson joshua 3.4
Watson joshua 3.4
 
Desert Animals 15
Desert Animals 15Desert Animals 15
Desert Animals 15
 
Sinkholes pics
Sinkholes picsSinkholes pics
Sinkholes pics
 
The 3 Little Pigs Presintaion #11
The 3 Little Pigs Presintaion #11The 3 Little Pigs Presintaion #11
The 3 Little Pigs Presintaion #11
 
Alston Bryan Ignite_Presentation_Slideshow
Alston Bryan Ignite_Presentation_SlideshowAlston Bryan Ignite_Presentation_Slideshow
Alston Bryan Ignite_Presentation_Slideshow
 
Douville_Tiffany_visualresume
Douville_Tiffany_visualresumeDouville_Tiffany_visualresume
Douville_Tiffany_visualresume
 
Visual Resume
Visual ResumeVisual Resume
Visual Resume
 
Libraries and Transliteracy KLA
Libraries and Transliteracy KLALibraries and Transliteracy KLA
Libraries and Transliteracy KLA
 
Becoming a connected leader
Becoming a connected leaderBecoming a connected leader
Becoming a connected leader
 
Sector changes and career development in libraries: Every flavour career bean...
Sector changes and career development in libraries: Every flavour career bean...Sector changes and career development in libraries: Every flavour career bean...
Sector changes and career development in libraries: Every flavour career bean...
 
A College Transcript in High School
A College Transcript in High SchoolA College Transcript in High School
A College Transcript in High School
 

Recently uploaded

High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
ChristopherTHyatt
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
HackersList
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 

Recently uploaded (20)

High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
How to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdfHow to build a generative AI solution A step-by-step guide (2).pdf
How to build a generative AI solution A step-by-step guide (2).pdf
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 

Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API

  • 1. MAKING AJAX USER FRIENDLY, GOOGLE FRIENDLY, FRIENDLY FRIENDLY USING THE HISTORY API Winchester Studio. 60­61 High Street. Winchester. Hampshire. SO23 9BX. SIT BACK / SIT BACK London Studio. 1 The StableYard. 16a Balham Hill. London. SW12 9EB. LISTENUP LISTEN UP T. +44 (0) 20 3137 1469  F. +44 (0) 845 862 0706 info@marmaladeontoast.co.uk www.marmaladeontoast.co.uk
  • 2. HI, I’M SYDLAWRENCE I’M AFRAID OF HEIGHTS sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence SIT BACK / SIT BACK skype:sydlawrence LISTENUP LISTEN UP you get the picture
  • 3. WHAT IS IT? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/pixelthing/2555047998/
  • 4. HTML5 SIT BACK / SIT BACK LISTENUP LISTEN UP
  • 5. JAVASCRIPT OBJECT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/hamsters/37012321/
  • 6. WHAT IS THE PROBLEM? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/benjibot/4803751040/
  • 7. AJAX LOADS NEW CONTENT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/elstruthio/2761267024/
  • 8. BACK BUTTON SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/executionsinfo/4573848874/
  • 9. COPY PASTA SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/anwoodward/3341609205/
  • 10. SURELY, THIS ISN’T NEW SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/9422878@N08/4898524174/
  • 11. LOCATION.HASH SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/spodzone/1172282130/
  • 12. IF IT AIN’T BROKE SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/trojanguy/3251306440/
  • 13. ALWAYS FELT LIKE A HACK SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/stevedinn/180630463/
  • 14. REQUIRES JAVASCRIPT ON RELOAD SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/23516192@N08/3418663794/
  • 15. EXAMPLE www.example.com/old/#/new SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/grimages/3854628417/
  • 16. WHAT DOES IT DO? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/doggo/2618699311/
  • 17. ADDS TO THE HISTORY BOOKS SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/namealus/3676208219/
  • 18. BACK TO THE FUTURE SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/boltron/2670777828/
  • 19. WHEN WOULD THIS BE USEFUL? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/jeffwerner/386367076/
  • 20. LIGHTBOXES SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/nielsprovos/252176710/
  • 21. POPUP LOGINS SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/seasidebear/3409308888/sizes/l/
  • 22. COMMENTS SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/geishaboy500/541493823/
  • 23. PAGINATION SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/davidecassenti/4335607637/
  • 24. BROWSER SUPPORT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/annagaycoan/3750144703/
  • 25. FIREFOX SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/kevenlaw/2784262431/
  • 26. CHROME SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/professorbop/3872715381/
  • 27. SAFARI SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/vickispix/296076348/
  • 28. OPERA SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/sacharules/1441899883/
  • 29. INTERNET EXPLORER as of ie9b2 SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/celebdu/10200825/
  • 30. HOW? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/cayusa/2194119780/
  • 31. CLICK EVENT ON LINK SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/8829172@N02/2880158998/
  • 32. RENDER DIFFERENTLY ON AJAX REQUEST SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/shannonmary/187131727/
  • 33. history.pushState (stateObj,title,url); SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/fras/3800547100/
  • 34. LISTEN FOR EVENT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/bernhardbenke/2370811833/
  • 35. window.onpopstate = fn(evt) SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/pascalbovet/4657125857/
  • 36. SITES THAT USE IT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/mattknoth/520009619/
  • 37. FLICKR SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/brandoncwarren/4209735621/
  • 38. GOOGLE http://www.20thingsilearned.com/ SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/katphotos/1030473901/
  • 39. GITHUB SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/entropy1138/173848032/
  • 40. SYDLAWRENCE.COM SIT BACK / SIT BACK LISTENUP LISTEN UP Victorian Times
  • 41. USER FRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/emdot/22081098/
  • 42. GOOGLE FRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/donsolo/2189108384/
  • 43. FRIENDLY FRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/scottkinmartin/478136767/
  • 44. WANT TO KNOW MORE https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - MDN http://dev.w3.org/html5/spec/Overview.html - HTML5 Spec IS IT / SIT BACK LISTEN UP PINT TIME? https://github.com/sydlawrence/fancy-box - My Fancy-box Fork
  • 45. ANY QUESTIONS? IS IT / SIT BACK LISTEN UP PINT TIME? http://www.flickr.com/photos/dexxus/4158928239/

Editor's Notes

  1. \n
  2. I’m sydlawrence\n afraid of heights\n lead developer at Marmalade\n part time lecturer at Winchester Uni on the Digital Media Development Course\n love the future\n Going to talk about the new History API available in all decent browsers\n will also cover mistakes made by developers with ajax\n\n
  3. What is it?\n You, you guessed it, it is part of the ‘html5’ spec\n\n
  4. HTML5\n but of course it is javascript... That discussion is certainly for another time...\n One of the many new javascript toys available in the HTML5 spec\n DeviceOrientation\n GeoLocation\n LocalStorage\n\n
  5. Javascript Object\n basically window.history is a javascript object\n It has been available for a long time\n window.history.back\n a couple of NEW tools\n\n
  6. What is the problem?\n Why do we need window.history\n\n
  7. Ajax loads new content\n out with the old, in with the new... \n that content is dynamically generated.. \n google doesnt see that content... \n unless you use a link for google to spider.\n\n
  8. Back button\n People press the back button all the time... \n Much more than I ever thought... \n The amount of times I have seen people get confused by pressing back, and then leaving a site..\n One of the horrendous issues with Flash...\n USER FRIENDLY\n\n
  9. Copy & Paste\n Same, same\n People like to share urls...\n GOOGLE FRIENDLY\n They will share the wrong url!\n think ow.ly\n Dont make people confused the first time they click on a link to get to your site...\n First time visitors...\n Treat them with honour, with diginity, intice them back for more...\n\n
  10. Surely this isn’t new\n This isn’t a new problem.. this wasn’t a problem first discovered in the last six months\n Nope\n People like to find solutions\n\n
  11. location.hash\n There has been an interesting solution, using location.hash\n javascript can modify the hash location of the url...\n i.e. adding a # on the end followed by a string..\n\n
  12. if it ain’t broke\n don’t fix it\n BUT there are issues\n\n
  13. always felt like a hack\n 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)\n\n
  14. requires javascript on reload\n If you send a link to someone with the hash location... the new user needs javascript for that to take affect...\n OK, ignore lack of javascript...\n What about Google... Your javascript on reload is to populate with the new ajaxed content\n\n
  15. run through example\n www.example.com/old/#/new\n visit old\n www.example.com/old/\n click something\n www.example.com/old/#/new\n share link\n www.example.com/old/#/new\n old static content, then javascript needs to get the new\n\n
  16. What does it do?\n History stack, that behaves in the same way a simple array would\n\n
  17. Adds to the history books\n push on to the stack\n\n
  18. Back to the Future\n popstate event when they press forwards\n\n
  19. When Would This be useful\n When the content changes...\n When someone might want to share the content\n back button\n copy paste\n\n
  20. Lightboxes\n Images..\n videos\n\n
  21. Popup logins\n more and more sites use this\n what if they fail to login and want to try again\n\n
  22. Comments\n pages\n\n
  23. Pagination\n pages\n\n
  24. Browser Support\n Remember, this is still bleeding edge\n\n
  25. Firefox\n introduced in gecko 2\n firefox 4 \n\n
  26. Chrome\n WebKit 528\n Live version \n\n
  27. Safari\n Also uses webkit\n Live version \n\n
  28. Opera\n Not as yet\n\n
  29. Internet Explorer\n Not as yet\n\n
  30. How do you use this wonderful thing?\n run through workflow\n same ajax mistaked\n\n
  31. Click event on link\n Always do this for ajax content... to the same url that you would without javascript\n ALWAYS\n\n
  32. render differently on ajax requests\n Don’t have different urls..\n\n
  33. history.pushState\n this is used to add to the history\n history.pushState(StateObj,title,url)\n local domain url\n StateObj is anthing you might want to retreive later\n \n There is also replaceState that operates in the same way, but it replaces the current state\n
  34. listen for event\n when someone presses back or forward..\n\n
  35. window.onpopstate\npopstate event\nwindow.onpopstate = function(event)\npasses data\ndata.state = StateObj\n\n
  36. sites that use it\n\n
  37. flickr\nfor their lightboxes\n
  38. google\n20 things i learned about the web ebook\n
  39. github\nfile browsing\n
  40. sydlawrence.com\n\nME!\n
  41. USER Friendly\n\nBack / forward button\nSharing Links\n
  42. Google Friendly\n\n\nindexable content\n
  43. Friendly friendly\n\nIts not even hard to do!\n
  44. Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n
  45. Any Questions?\n\n\n\nHow to check in browsers\ncheck to see if the pushstate function exists\n\nwindow.onpopstate = function (evt) {}\nhistory.pushState(StateObj,title,url);\n
  46. Thanks, I’v been sydlawrence\n