Required: browser extensions

[remy]

Using the green/red idea for the pass or fail, make a request to

"http://cssprefix.com/check.json?url=" + window.location

And the JSON returned contains:

{ pass: true }

(or false) - which will drive the icon.

Can this be done for all browsers?

[sambenne]

I am having a go at this using the crossrider site. It is pretty simple to use and creates a extension for Internet Explorer 7+, Firefox 3.5+ and Chrome.

Might have something for you tomorrow.

[nikcorg]

How about a bookmarklet? Could work with a JSONP response.

[sambenne]

@remy Can you add a JSONP response to this. Should be a simple thing to check whether there is a callback in the url.

[remy]

Yep, easy.

Sent from my iPhone

On 11 Feb 2012, at 11:31, Sam Bennett [email protected] wrote:

@remy Can you add a JSONP response to this. Should be a simple thing to check whether there is a callback in the url.

---

Reply to this email directly or view it on GitHub: https://github.com/remy/cssprefix/issues/6#issuecomment-3920159

[sambenne]

Sweet, that should mean my multi browser extension should be ready when you are.

Actually I change the $.getJSON to $.ajax and it works. So I have it changing the icon from red to green. Just need to work out what to do to show the failed content.

[sambenne]

Have you just broke this? Every site seems to be passing.

[remy]

I think so. I was working last night on using message queues and workers to get the work done, but I suspect it's gone a little tits up. In fact now, I'm not getting anything.

I've got some scaling issues I need to look at - and probably need to go a knocking on hosting company doors :) I'll see if I can't sort it shortly.

[sambenne]

Doesn't seem to load the page no more :( If I had a decent host I might run a test version so I can keep working.

[remy]

It's back up for the time being. Given the few hours I've worked on it, there's some exceptions I'm hitting (like invalid urls, etc).

If you're testing - best to test with static responders like:

• Fail JSONP: http://jsbin.com/erigos/js
• Pass JSONP: http://jsbin.com/erigos/2/js
• Fail JSON: http://jsbin.com/erigos/4/js
• Pass JSON: http://jsbin.com/erigos/3/js

[remy]

With JSONP support, I'll add CORS which will be better as you'll be able to handle timeouts, etc much more cleanly.

[remy]

@sambenne sorry, I should have added - you can host this locally for testing - clone the project, install Node.js then in the project directory run npm install (I think it says this on the README) - and you'll be off and running.

[sambenne]

Based on the static I can get the JSON to work and it changes the icon from red to green on page load. I am going to get it to show the errors in a popup on a click event.

[sambenne]

Here is the first test. http://crossrider.com/plugin/chrome/apps/css-prefix-test.crx

On the page load it will check the site http://jsbin.com/erigos/3/js but on click it will check http://jsbin.com/erigos/4/js so you can see how it looks both ways. I am going to try it on FF.

[remy]

@sambenne extension looks nice as a starter (only quickly checked it out). I saw your tweet too - though I fear you've wasted a bit of your time! The "check your site" part of things is handled entirely by csslint.net. The error when you're doing the .json call is only the first error (and though I've not updated docs) it will only be the first error to basic reduce the work of the server when doing a single yes/no test. So in a way it's not that useful (and I'd probably not show in the icon at all).

Is there source available for the extension at all? Might be useful to let others have a peek around to learn from it.

Couple of bits of feedback, no doubt you've already considered yourself:

1. Icon is green before anything is done - might suggest it's all good.
2. Clicking icon runs test - perfect.
3. Clicking icon after test is run - perhaps offers to get fixed CSS if it's bad.
4. Status (red/green) seems to carry cross tabs - it shouldn't do I expect.
5. Hovering over green icon says "this site has 1 error"

I'm also going to update the readme so it's exactly clear what this tool/service does! :)

:: edit ::

Sorry - just re-read - you said it's hitting the static examples so I could see what it looks like - so it's not hooked up to live - that's cool1

[sambenne]

Ah that image on twitter was actually using your API that I used for the extension. So its data was based of what gets returned. Was thinking the extension could take you to a page that had a more detailed explanation for you.

When I get on my Laptop I will put the code on my github and link you to it.