search

h5bp / lazyweb-requests

Get projects and ideas built by the community
https://github.com/h5bp/lazyweb-requests/issues
1.69k stars 85 forks source link

A healthy choose your browser page #39

Closed nimbupani closed 12 years ago

nimbupani commented 13 years ago

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 commented 13 years ago

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 commented 13 years ago

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

addyosmani commented 13 years ago

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

gnclmorais commented 13 years ago

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

addyosmani commented 12 years ago

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

gnclmorais commented 12 years ago

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

2011/11/3 Addy Osmani < reply@reply.github.com>

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:

https://github.com/paulirish/lazyweb-requests/issues/39#issuecomment-2614251

paulirish commented 12 years ago

addy did this go online?

paulirish commented 12 years ago

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

addyosmani commented 12 years ago

@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 < reply@reply.github.com>wrote:

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

Reply to this email directly or view it on GitHub:

https://github.com/paulirish/lazyweb-requests/issues/39#issuecomment-2657567

Addy Osmani

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

tpodmani commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

@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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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

addyosmani commented 12 years ago

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

jonathantneal commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

@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 commented 12 years ago

@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 commented 12 years ago

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

Use case: My HTML5 App

Use case: My Web Audio API demo

paulirish commented 12 years ago

we're working out some

APIs ideas here

paulirish commented 12 years ago

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

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

paulirish commented 12 years ago

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

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

jonathantneal commented 12 years ago
nimbupani commented 12 years ago

:+1:

irae commented 12 years ago

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:

Anyone likes the idea?

jonathantneal commented 12 years ago

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

Two major improvements are:

simurai commented 12 years ago

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:

Sad Om Nom

addyosmani commented 12 years ago

@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 commented 12 years ago

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

addyosmani commented 12 years ago

@jonathantneal awesome. thanks!

nimbupani commented 12 years ago

@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 commented 12 years ago

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

jonathantneal commented 12 years ago

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

paulirish commented 12 years ago

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 commented 12 years ago

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