Firebug offers a great way of doing on-the-fly CSS modifications right there where it matters: in the browser. It allows you to actually “design in the browser” which is part of the Quplo philosophy. The only problem is that CSS changes done in Firebug aren’t persistent, so you have to redo them in your editing environment in order to save your work.
Well, not anymore. Here’s Backfire: the save button for Firebug.
Backfire is a full client-server roundtrip solution that gathers your CSS changes, sends them to the server and saves them. We’ve made it available in all Quplo prototypes from the Goodies page, but we’ve also made the Backfire engine open source with full documentation and including a server-side example.
Backfire in Quplo
To check out our implementation of the Backfire engine, sign up for an account with Quplo, the prototyping web app we’re developing. What we’ve done is create a small fixed bar containing a button at the bottom of your prototype’s view. It looks like this:
When you click that button, we’ll save everything you changed so far to the right css files in your prototype. Note that if you’re using a redesign prototype, or somehow referencing CSS hosted on a different server, we won’t be able to affect that. Only CSS hosted in your prototype will be changed.
To try out Backfire in Quplo, here’s what you do:
- Create a new prototype or pick an existing one
- Head to the “work on” page
- Click on “goodies” on the right
- Copy/paste the code for Backfire on this page into the head section of your prototype
- Click “view” and you should see the Backfire bar at the bottom of your screen.
- Change some stuff with Firebug or Webkit inspector, and hit “Save CSS changes”!
We’ve hosted the code itself at Google Code:
Backfire also works with Webkit’s Developer Toolbar, but currently has an issue with so-called “shorthand” CSS declarations (“background” vs “background-color”). It’s been filed as a known issue and we hope to look into that soon. But since it’s open source, feel free to contribute!
More stuff we made
In our mission to improve the website production process we’ve sprouted more open source projects before such as the browser-based code completion solution Common Sense Code Completion. We just wanted to say we’re thrilled to see it being picked up by open source CMS WebEdition. Great work guys!
Backfire isn’t complete yet and we could use your help to finish it. If you have any ideas about the abovementioned shorthand issue in Webkit, or any other feedback, tips or fixes, let us know. The best way to do that is by leaving a comment below, although we’d of course love to see code contributions as well.
Leave a reply