A healthy choose your browser page

[nimbupani]

A lot of demos have nasty "download IE9" or "download Chrome" or "download other browser" placeholder text when viewed on browsers that do not support a selection of features.

The idea is to create a site that would render the correct list of browsers that support the features required for the demo. e.g. http://chooseyourbrowser.com/history+transitions+webGL would give you a polite message with a list of all browsers that support these features (not just one).

get.webgl.org does this very well (and a lot of webGL demos use it).

Easier for demo creators to link to rather than face flack for openweb unfriendly unsupported pages.

[addyosmani]

I'm working on a solution for this at the moment.

Rough work done to date:
http://addyosmani.com/gyazo/c6bf2.png (default view)
http://addyosmani.com/gyazo/c5220c9.png (support tables)
http://bit.ly/rciv9x (autocomplete features known)
http://addyosmani.com/gyazo/d5a5.png (if feature unlisted, enter what something custom and read specs will just do a google search)

(needs a lot more love, but it'll get there) :)

Users are able to select features via an autocomplete input based on pulled data from caniuse.com. Support tables will however be designed better (might provide different views of the data) but are being correctly output per feature at the moment.

A sharable URL is generated so that you can easily let people know what features are required for a demo and I might have links to go download particular browsers once the rest has been wrapped up.

Any more ideas to contribute, feel free to let me know.

[nimbupani]

OMG that looks exactly like what I wanted. Thank YOU @addyosmani!

[addyosmani]

No worries! :) I'll ping back once I have a demo up somewhere you can try out.

[gnclmorais]

Cool addyosmani! When you shared the code, please say something, I'm also interested in this issue.

[addyosmani]

This is (finally) almost ready. Will post to a repo once the code cleanup has been done.

[gnclmorais]

Great! Can't wait to see it. ;)

2011/11/3 Addy Osmani <
[email protected]>

This is (finally) almost ready. Will post to a repo once the code cleanup
has been done.

Reply to this email directly or view it on GitHub:

paulirish#39 (comment)

[paulirish]

addy did this go online?

[paulirish]

+cc @tpodmani && http://supported-browsers.com/

[addyosmani]

@paul Not yet! I'll probably post it up when I'm back from travels at the
end of November.

Supported-browsers is pretty rad, but doesn't let you select what browser
features you need/tie them in with current support :)

On Mon, Nov 7, 2011 at 6:46 PM, Paul Irish <
[email protected]>wrote:

+cc @tpodmani && http://supported-browsers.com/

---

Reply to this email directly or view it on GitHub:

paulirish#39 (comment)

Addy Osmani

Developer at Aol | jQuery Core [Bug Triage/Docs/Learning site] teams member
Blogger at: http://addyosmani.com

[tpodmani]

5!
supported-browsers.com is still in "Beta" and this is "lite" list generator.
In near future, there will be more options for advanced users.

I would like to show you when it will be nearly finished...

[nelsonpecora]

What are your thoughts on auto-generating the list by crawling the website, or something similarly automated? I could definitely help with that if it's a feature people would use.

[paulirish]

yoshokatana i'm curious about that but in the end you'd need to parse the entire site (html/css/js) .. if you're up to that task then sureee :)

[nelsonpecora]

Hypothetically this could work with public-facing webapps/sites. I'm trying to figure out the best way to do it, though.

Looks like the best way would be to render it server-side with phantom.js. I'll investigate.

[RonnyO]

@yoshokatana, IMHO crawling and detecting features in use isn't the way to go.
A lot of times, browser support policy is a result of a decision (for dev/qa/business reasons) and not just out of a which-browser-supports-what equation.

[addyosmani]

Just a reminder: I have most of the work for this lazyweb done. Just waiting for a free weekend to cleanup the code and push somewhere. Will update when there's news!

[paulirish]

plz do, addy.

IMHO this is one of the things that helps advance aggressively cool edge feature browser demos while still honoring the open web's commitment to ubiquity.

also. you can post ugly code, too. :)

[nimbupani]

Addy, yes please post the ugly code so others can clean it up and have it up ASAP!

[addyosmani]

@paulirish @nimbupani will try my utmost to get this out this weekend :)

[jonathantneal]

Will something like this work?

http://sandbox.thewikies.com/caniuse/json+contenteditable.html

http://sandbox.thewikies.com/caniuse/apng+json.html
http://sandbox.thewikies.com/caniuse/apng+json.json
http://sandbox.thewikies.com/caniuse/apng+json.js
http://sandbox.thewikies.com/caniuse/apng+json.js?callback=someFunction
http://sandbox.thewikies.com/caniuse/apng+json.xml

[paulirish]

Divya started a thread with Jon and I but I wanted to take things back here where I have less of a chance of blocking progress. Also she spoke with @simurai on the design, so cc'ing him.

Divya listed out the following things as target areas

• How to use home page as JSON & HTML, API w/ feature slugs, API options
• "mobile" or "nomobile" option? Some demos are made for phone use only, some for desktop only, so if we can allow that choice it would be great.
• I think the html that is returned shouldn't be intrusive so I
  suggest something like this:
  • Based on the browser the request is being made from, you send back the latest version of that browser that supports all the feature set that is required. E.g. these are the replies if someone is using.. chrome stable,
    for Firefox, and
    for Opera
  • If no version of the browser supports the feature, return something
    like this

Also we've been talking about how this makes a lot of sense to mostly a Modernizr plugin. I agree that's very wise. in the next comment i'm gonna take a stab at what the API is like..

[addyosmani]

@paulirish Do you have a link to the thread with Jon? So far this actually looks really solid. Great work @jonathantneal :) One comment I would make is that where possible I would avoid forcing people to learn how to use the API (e.g caniuse/feature1+feature2.json etc - even if it does look fairly simple atm (consider confusion about features with multiple words in the name)) - the approach I was going to take with my version was just letting them type in the features they wanted, add them to the current view and generate the link to the feature (imo, more user friendly, but others may disagree) :)

[jonathantneal]

@addyosmani I completely agree. I think it would just be a matter of creating an interface that would use the same data.json object to generate the urls in a friendly way for people.

[paulirish]

Also, we've been talking about this as a webservice. Not as something end users would ever visit.

Use case: My HTML5 App

• I wrote an app. it requires localstorage, canvas, classList, and css's calc()
• If the current user doesn't have a browser that's capable enough, I want to tell them how to do fix that
• Upfront in my code, I detect a bunch of features, if any of them fails, I want to show a dialog on my page about this.
• I am going to handle the dialog myself, so I just need some JSON. I'm gonna use handlebars to mash it against a template and toss into my DOM
• I'm using Modernizr and gonna use this handy modernizr plugin..

Use case: My Web Audio API demo

• I made a demo that uses webrtc. Oh shiiiiit
• I am not using modernizr and the featuer detect is if (navigator.getUserMedia) ...
• I am lazy and want the HTML tossed into my page quickly.

[paulirish]

we're working out some

APIs ideas here

[paulirish]

Using the API with Modernizr plugin (and json payload)

Modernizr.browserPrompt({
    features : 'localstorage canvas classlist csscalc' ,
},  
    // this callback only executes if above features have a falsy value
    function(data){
        var html =  _.template(tmpl,data).render()
        $(thing).html(html);

}) // return value is the result of testing the above features

Using the API w/o Modernizr plugin (and html payload)

if (!navigator.getUserMedia){

    var script = document.createElement('script');
    script.src = '//example.com/api/html/webrtc?callback=showDialog';
    document.body.appendChild(script);
}

function showDialog(data){
    $('<div>').html(data.html).dialog(); // thx jquery UI
}

API

/api/webrtc+calc+localstorage.json?callback=buildTemplate   
/api/webrtc+calc+localstorage.html?callback=showDialog

• Payload is JSONP javascript if callback is given, regardless of format..
• HTML over JSONP (e.g. webrtc.html?callback=showDialog ) payload is...
  • showDialog({ html : '<p>.....</p>'});
  • eg. http://sandbox.thewikies.com/caniuse/canvas.html?callback=showDialog

more at http://sandbox.thewikies.com/caniuse/

[paulirish]

The next challenge is to figure out what's in the data payload.

• image URLs?
• how to represent supporting browsers (stable, beta, etc)
• do we customize it based on the UA of the browser asking?

(and if anyone has other ideas about the earlier stuff, chime)

[jonathantneal]

• image URLs - much like the progress done @ http://paulirish.com/2010/high-res-browser-icons/ i would like to see a repo of those browser icons, correctly sized and positioned, to be used alongside this service and many others.

[nimbupani]

👍

[irae]

This is looking very nice!

This could probably generate a lot of side projects, so why not include something more in the package? =)

The project repo could have an static generator, that outputs all the images and javascript needed as a drop-in. The browser and feature list could be compiled to local json files and have some kind of versioning identifier. The API response could return just that everything is still valid instead of the hole presentation layer for the page. There are some nice advantages about this design:

• high traffic sites would not hit so much the API
• cron scripts could keep the info updated, hitting the API only once a day
• integration with build scripts for static hosted sites (jekyll, octopress, etc)
• mobile version could be compressed and compiled alongside the site scripts for better performance and less requests

Anyone likes the idea?

[jonathantneal]

Good news, everyone! The API has been updated to deliver an extremely relevant payload.

Two major improvements are:

• The JS / HTML / XML payload is very small.
• Agent detection shares good news about browser support, available upgrades, or alternatives.

[simurai]

Would it be possible that the message can be customized as an optional parameter? Or even show some custom HTML? You know.. for example games wanna show a sad character with custom text, like this:

[addyosmani]

@jonathantneal I've been playing around with creating some demos based on https://github.com/jonathantneal/caniuse and I just wanted to check: is combining features in http://sandbox.thewikies.com/caniuse/x+y.html stable at the moment? I ask because when I pass through certain tests (e.g touch - or even a fake test like 'touchs'), it still outputs the congratulations message:

http://sandbox.thewikies.com/caniuse/geolocation+touchs.html?callback=showUpgrade

[jonathantneal]

@addyosmani try looking at the available features @ http://sandbox.thewikies.com/caniuse/features.js

[addyosmani]

@jonathantneal awesome. thanks!

[nimbupani]

@jonathantneal, i think we should probably output something like "we are unable to tell which browsers support the requested features" or something so devs know immediately something is amiss, or maybe it should be a debug option >_> #scopecreep.

[nimbupani]

@simurai you could possibly do that with the javascript object that will be returned. Is that sufficient?

[jonathantneal]

@paulirish has opened this up for further discussion @ https://github.com/h5bp/caniuse/issues/4

[paulirish]

https://github.com/h5bp/caniuse has this project now.

check out the issue tracker and please get involved!

we're alpha testing this out on http://mothereffinganimatedgif.com/ and its great!

[zachleat]

Looks like the above repo link is broken. It's over at https://github.com/h5bp/html5please-api