Why FireCSS?

Firebug is a fantastic tool (thanks Joe Hewitt and the Firebug team from changing web debugging from a serious time-wasting pain in the you-know-what to a minor chore. In fact, I may be wrong, but I'm sure a lot of the credit for the decent tools we have in other browsers lies with Joe's pioneering work).

Anyway, lately I've been using Firebug more and more to design and test CSS styling. Firebug's is an amazingly good CSS editor for a javascript in web-browser version. It's got a heck of a lot of the features you'd expect in a dedicated editor.

But here's the rub. You end up copying and pasting a lot of CSS from Firebug into your editor (because as soon as you hit that refresh button those changes are gone). And you end up designing for Firefox and then checking it on other browsers, which are usually fine, excep,t of course, Internet Explorer. And debugging CSS on Internet Explorer is still a serious time-wasting pain in the you-know-what.

It struck me that if I could have a tool that would save my Firebug CSS edits and let me see what was happening on Internet Explorer (and other browsers) as I was making changes — that would be seriously cool.

Now if other people thought this was a cool idea too, I thought I would open source it and return something back to the Firebug community for all the time that Firebug has saved me.

Status

Right now FireCSS is very incomplete. It works as a proof of concept and I'm pretty confident I can get it to work as a reasonable product. But there's quite a bit of work to get it there — not much point if I'm the only one whose going to be using it.

So I thought I'd throw up this page and a quick video to solicit some feedback to see if there's enough demand to make doing the extra work worthwhile. So please share this page, contact me (julian at firecss dot com), leave a comment, and/or sign up for the beta list to encourage me to get off my chuff.

How it works

FireCSS has three parts. And add-on for Firebug, a web service, and some javascript.

You install the add-on in Firefox and it just sits doing noting. You add a temporary javascript tag to any page you want to edit using FireCSS. That javascript activates FireCSS on Firefox or connects other browsers to the web service to get CSS updates. Then every time you edit CSS in Firefox is sends a CSS Update event to the web service which farms the updates out to any other connected browsers on that page.

This means FireCSS works across multiple boxes anywhere - the browsers don't have to be running on the same machine or in the same country. I've also allowed Firefox to pick up updates from other instances of Firefox with Firebug running which means two or more people can collaborate editing the CSS on a single page.

The web server keeps a change log of all the updates to each CSS source whether inline or to an external CSS file. When editing is complete the server can download the original CSS files (from whatever source) and apply the changes to that file to create an archive of updated CSS files. So I'm planning to add a save button to Firebug to save and download changes.

Although I've focused on CSS initially at its my main pain in the you-know-what, I can’t see any reason why this technique shouldn't work for the HTML in the page as well. So it should be possible to develop a plugin that lets you do the whole hog and develop complete designs and see them in all browsers as you go. (It does help to have at least two monitors if you're working on a single box).

Where's the demo?

I've tried setting up FireCSS in a couple of ways including using push notifications to browsers. I'm sure I can improve things but, so far, polling gives me the fastest response times and requires the least amount of cross-browser support. Unfortunately to provide a responsive polling solution I need a reasonable number of web connections, which costs money on Heroku (my preferred hosting platform).

With a single dyno on the free version of Heroku, any demo would quickly grind to a halt, so there is no demo available at the moment. As soon as I get this sorted I'll let anyone who's signed up for the beta list know.

And, if anyone can provide me a low/no cost host, please get in touch (julian at firecss dot com). The web service is currently a rails app, but it doesn't need to be. In fact, it would probably make more sense as a node.js app.

So who's done this?

I'm Julian Cox.
I run a small web consulting and development company called Webspeed Ltd, in Dunedin, New Zealand.

Most of our services are only really applicable to New Zealand but if you'd like to see some of what we get up to try checking out:
EFTPlus (a transaction-based loyalty service using EFTPOS and credit cards) and
TiXT (create your own automated txt code that can send email too).

Thanks for reading.

Comments