building badges for distribution
DESCRIPTION
My talk at highland fling about the pending modularization of web interfaces and tips on how to build badges now.TRANSCRIPT
![Page 1: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/1.jpg)
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
![Page 2: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/2.jpg)
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
![Page 3: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/3.jpg)
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
![Page 4: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/4.jpg)
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
![Page 5: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/5.jpg)
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
![Page 6: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/6.jpg)
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
![Page 7: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/7.jpg)
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
![Page 8: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/8.jpg)
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
![Page 9: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/9.jpg)
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
![Page 10: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/10.jpg)
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
![Page 11: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/11.jpg)
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
![Page 12: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/12.jpg)
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
![Page 13: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/13.jpg)
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
![Page 14: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/14.jpg)
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
![Page 15: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/15.jpg)
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
![Page 16: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/16.jpg)
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
![Page 17: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/17.jpg)
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
![Page 18: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/18.jpg)
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
![Page 19: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/19.jpg)
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
![Page 20: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/20.jpg)
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
![Page 21: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/21.jpg)
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
![Page 22: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/22.jpg)
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
![Page 23: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/23.jpg)
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
![Page 24: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/24.jpg)
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
![Page 25: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/25.jpg)
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
![Page 26: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/26.jpg)
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
![Page 27: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/27.jpg)
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
![Page 28: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/28.jpg)
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
![Page 29: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/29.jpg)
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
![Page 30: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/30.jpg)
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
![Page 31: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/31.jpg)
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
![Page 32: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/32.jpg)
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
![Page 33: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/33.jpg)
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
![Page 34: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/34.jpg)
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
![Page 35: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/35.jpg)
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
![Page 36: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/36.jpg)
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
![Page 37: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/37.jpg)
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
![Page 38: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/38.jpg)
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
![Page 39: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/39.jpg)
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
![Page 40: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/40.jpg)
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
![Page 41: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/41.jpg)
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
![Page 42: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/42.jpg)
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
![Page 43: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/43.jpg)
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
![Page 44: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/44.jpg)
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
![Page 45: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/45.jpg)
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
![Page 46: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/46.jpg)
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
![Page 47: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/47.jpg)
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
![Page 48: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/48.jpg)
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
![Page 49: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/49.jpg)
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
![Page 50: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/50.jpg)
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
![Page 51: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/51.jpg)
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
![Page 52: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/52.jpg)
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
![Page 53: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/53.jpg)
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
![Page 54: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/54.jpg)
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
![Page 55: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/55.jpg)
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
![Page 56: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/56.jpg)
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
![Page 57: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/57.jpg)
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
![Page 58: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/58.jpg)
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
![Page 59: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/59.jpg)
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
![Page 60: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/60.jpg)
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
![Page 61: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/61.jpg)
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
![Page 62: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/62.jpg)
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
![Page 63: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/63.jpg)
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
![Page 64: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/64.jpg)
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
![Page 65: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/65.jpg)
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
![Page 66: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/66.jpg)
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
![Page 67: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/67.jpg)
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
![Page 68: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/68.jpg)
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
![Page 69: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/69.jpg)
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
![Page 70: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/70.jpg)
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
![Page 71: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/71.jpg)
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
![Page 72: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/72.jpg)
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
![Page 73: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/73.jpg)
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
![Page 74: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/74.jpg)
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
![Page 75: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/75.jpg)
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
![Page 76: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/76.jpg)
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
![Page 77: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/77.jpg)
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
![Page 78: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/78.jpg)
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
![Page 79: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/79.jpg)
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
![Page 80: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/80.jpg)
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
![Page 81: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/81.jpg)
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
![Page 82: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/82.jpg)
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
![Page 83: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/83.jpg)
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
![Page 84: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/84.jpg)
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
![Page 85: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/85.jpg)
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
![Page 86: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/86.jpg)
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
![Page 87: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/87.jpg)
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
![Page 88: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/88.jpg)
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
![Page 89: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/89.jpg)
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
![Page 90: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/90.jpg)
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
![Page 91: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/91.jpg)
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
![Page 92: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/92.jpg)
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
![Page 93: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/93.jpg)
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
![Page 94: Building Badges for distribution](https://reader034.vdocuments.us/reader034/viewer/2022042714/557c20ced8b42a65268b4dab/html5/thumbnails/94.jpg)
Badgers for distribution
Thanks Photo by The Weirfield Wildlife Hospital httpweirfeildcouk