search

remy / cssprefix

A tool to help developers include the right vendor prefixes in their sites
http://cssprefix.com
53 stars 7 forks source link

Required: browser extensions #6

Open remy opened 12 years ago

remy commented 12 years ago

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

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

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

sambenne commented 12 years ago

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

Yep, easy.

Sent from my iPhone

On 11 Feb 2012, at 11:31, Sam Bennett reply@reply.github.com 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 commented 12 years ago

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

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

remy commented 12 years ago

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

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

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:

remy commented 12 years ago

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

remy commented 12 years ago

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

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

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

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

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.