Embed Size (px)
DESCRIPTION
My talk at highland fling about the pending modularization of web interfaces and tips on how to build badges now.
Citation preview
Sharing the JoyBuilding badges for
distribution
Christian Heilmann Highland Fling Edinburgh 2008
Web Development as we know it is changing
Old Model
Destination = Site
Data Container = Page
This is how our web standards work
We already ran into problems with this
Ajax apps need a lot of hacking to behave more
responsive yet stay true to old usage patterns
Interaction issues are one thing
Now we face the data revolution
Sites and page thinking limits the reach and success of the
web as a media
Facebook YouTube Flickr Google Maps Upcoming and
others work on a different model
Data wants to be free of restrictions
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Web Development as we know it is changing
Old Model
Destination = Site
Data Container = Page
This is how our web standards work
We already ran into problems with this
Ajax apps need a lot of hacking to behave more
responsive yet stay true to old usage patterns
Interaction issues are one thing
Now we face the data revolution
Sites and page thinking limits the reach and success of the
web as a media
Facebook YouTube Flickr Google Maps Upcoming and
others work on a different model
Data wants to be free of restrictions
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Old Model
Destination = Site
Data Container = Page
This is how our web standards work
We already ran into problems with this
Ajax apps need a lot of hacking to behave more
responsive yet stay true to old usage patterns
Interaction issues are one thing
Now we face the data revolution
Sites and page thinking limits the reach and success of the
web as a media
Facebook YouTube Flickr Google Maps Upcoming and
others work on a different model
Data wants to be free of restrictions
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
This is how our web standards work
We already ran into problems with this
Ajax apps need a lot of hacking to behave more
responsive yet stay true to old usage patterns
Interaction issues are one thing
Now we face the data revolution
Sites and page thinking limits the reach and success of the
web as a media
Facebook YouTube Flickr Google Maps Upcoming and
others work on a different model
Data wants to be free of restrictions
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
We already ran into problems with this
Ajax apps need a lot of hacking to behave more
responsive yet stay true to old usage patterns
Interaction issues are one thing
Now we face the data revolution
Sites and page thinking limits the reach and success of the
web as a media
Facebook YouTube Flickr Google Maps Upcoming and
others work on a different model
Data wants to be free of restrictions
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Ajax apps need a lot of hacking to behave more
responsive yet stay true to old usage patterns
Interaction issues are one thing
Now we face the data revolution
Sites and page thinking limits the reach and success of the
web as a media
Facebook YouTube Flickr Google Maps Upcoming and
others work on a different model
Data wants to be free of restrictions
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Interaction issues are one thing
Now we face the data revolution
Sites and page thinking limits the reach and success of the
web as a media
Facebook YouTube Flickr Google Maps Upcoming and
others work on a different model
Data wants to be free of restrictions
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Now we face the data revolution
Sites and page thinking limits the reach and success of the
web as a media
Facebook YouTube Flickr Google Maps Upcoming and
others work on a different model
Data wants to be free of restrictions
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Sites and page thinking limits the reach and success of the
web as a media
Facebook YouTube Flickr Google Maps Upcoming and
others work on a different model
Data wants to be free of restrictions
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Facebook YouTube Flickr Google Maps Upcoming and
others work on a different model
Data wants to be free of restrictions
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Data wants to be free of restrictions
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
People want data not going to one site after the other
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Personal homepages feed aggregators microblogging
and social profile sites are booming
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Right now we build for each of them individually
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
This is changing too
(fe OpenSocial)
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
In the not too distant future modules will replace the
page and frameworks across platforms will consume them
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
This calls for new standards ndash after all it is about
collaboration
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
However today we can already play with ideas and
learn from similar implementations
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Specifically badges
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
A lot of companies offer badges with their data to add
to your site
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Why badges
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
You want your content to be out on the web
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Distributing data has several benefits
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Good search engine lovinrsquo
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Lack of single point of failure
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Better content
(more on that later)
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Content distribution works in several ways
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Anakin Yoda
Badge APIWidget
Obi Wan
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
All of these mean including content into a product
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
The first snag we hit presentation
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Consider several use cases
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Anakin wants nicely styled badges to copy and paste
Badges
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Obi Wan probably wants a style sheet or parameters to
change
Widgets
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Yoda needs clean semantic markup or other easy to
digest data formats
APIs
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Badges are most of the time considered to show the
company branding
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
This means either iframes or a lot of dirty extra code
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
We need to change our approach
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
You cannot fully control the look and feel of web sites
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
It is next to impossible to control the look and feel of a
badge
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Web standards were build to cascade to enable you to
write small code
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
If you chunk the document the cascade becomes useless
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Next issue performance
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Ideally yoursquod like the site to be available immediately
not load bit by bit
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Talking to a lot of different servers to build the interface
is slow
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
The reasons
HTTP requests name lookups and the speed and load of the
third party server
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
There are several solutions to that
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
The most stable is local caching
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Local caching makes sense for API lookups but doesnrsquot
work with badges
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
The next best thing is progressive enhancement
and lazy loading
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Progressive enhancement
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
ltscript type=rdquotextjavascriptrdquo
src=rdquohttpwwwexamplecombadgebadgejsrdquogt
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
No search engine love
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Possibly slow to render (unless you use dirty tricks)
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Hard to identify the element to replace
(script nodes canrsquot have an ID)
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Good search engine lovinrsquo
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Works for everybody
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Lazy loading
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Lazy loading is a special kind of progressive enhancement
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
You load a very small script up front that pulls in the larger dependencies on
demand
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
You can control the dependencies by classes on
the source element
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
ltdiv class=rdquobadgerdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
ltdiv class=rdquobadge animated silverrdquogt
lta href=rdquohttpwwwexamplecombadgedatardquogt
My data on third party
ltagt
ltdivgt
[]
ltscript src=rdquohttpwwwexamplecombadgejsrdquogt
ltscriptgt
badgejs create link to pull in
silvercss create script node for
animationjs get all elements with
class ldquobadgerdquo load the content via API and replace with badge
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Use libraries to help you with that
OK YUI get() -)
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Really clever lazy load of content
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Browsers tell you several things
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
The dimensions of the viewport
(which is not the same as the resolution)
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
The dimension of the document and the scroll
position
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
The dimension and location of the badge
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Remember a lot of HTTP requests make browsers sad
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Use placeholders for images and replace them when you are sure users can see them
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
ltimg src=rdquousergifhttpavatarexamplecomuser1212121largejpgrdquo alt=rdquoJohn Doerdquogt
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
BrowserViewport
DocumentBadge with placeholders
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
BrowserViewport
Document
Badge with real images
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Again use libraries to help you with that
OK YUI DomgetRegion() or Image Loader
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Want to create an amazing experience
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Create a readwrite API
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Imagine the web as your entry point ndash not your site
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
People can get data from your system and display it
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
They then can ask their visitors to comment or add more data without leaving
their site
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
More implementers are likely to add your badges if you leave their site in peace
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
You get more focused and higher quality content as you
can piggy-back on their authority
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Canrsquot or donrsquot want to do that
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Offer revenue sharing
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Whatever you do Badge Widget or API
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Expect changes and listen to your customers
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Your customers are
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Badge implementersMake it easy and as unobtrusive as possible to add your badge Allow for override
Third party site visitorsDonrsquot make them wait
YouMake sure you get data or at least links back
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
The most important points are availability and
backwards compatibility
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
People trust you to offer data and never break their site
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Offering data for distribution is for life not just for the next
press release
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk
