The new Handcraft is here!

Backfire – Save CSS changes made in Firebug

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 fires your CSS changes back to the server.

Backfire fires your CSS changes back to the server.

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:

Quplo's Backfire button

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:

  1. Create a new prototype or pick an existing one
  2. Head to the “work on” page
  3. Click on “goodies” on the right
  4. Copy/paste the code for Backfire on this page into the head section of your prototype
  5. Click “view” and you should see the Backfire bar at the bottom of your screen.
  6. Change some stuff with Firebug or Webkit inspector, and hit “Save CSS changes”!

Source code

We’ve hosted the code itself at Google Code:

http://code.google.com/p/backfire

When you grab that code, you’ll be getting a package made up of the basic Javascript engine powering Backfire and an example C# server implementation. This code is fairly generic and doesn’t include the specific implementation (bar + button) you see in Quplo above, but if you want to spy on what we did, you can just create an account and check it out. The server code gives you a general idea of how you should handle the incoming CSS changes from the client.

Webkit support

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!

Contribute

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.

38 Comments

Ping RSS

  • On which page I should be able to see that “Save CSS changes” button? I don’t see it on http://nvi.quplo.com/

    by Nikita Vasilyev • Aug 31st 2010 • 11:08

  • Hey Nikita,

    Thanks for trying Backfire in Quplo. You need to include the backfire script in the head tag of the page. We describe these steps above in this blog posts, but in short it comes down to going to your goodies page and copy/pasting the Backfire script.

    That ought to do it!

    by mrtnkl • Aug 31st 2010 • 11:08

  • Whoops, I should read before post.

    An alert message “Your changes have been saved.” is damn annoying. Some kind of “✔” icon right to the “Save CSS changes” would be much better.

    by Nikita Vasilyev • Aug 31st 2010 • 12:08

  • Very cool!

    This is a feature I have been missing for a long time. But to be honest, I did not really realize that until now ;)

    by Jasper Kaizer • Aug 31st 2010 • 12:08

  • Very nice, A much needed feature. I remember I once worked on a CSS fix for a couple of hours. I did everything in Firebug. Finally I fixed the bug. I tried tracking down all changes I made, but missed one or two rules. So after a reload, the fix was gone and I had to continue bugfixing for another hour :(

    It would be very nice to have it as a Firebug plugin, so you don’t have to paste a JavaScript into your page.

    I also didn’t see a backend API, only some C# code. It would be nice to have some very simple REST interface, so everybody can easily write a backend themselves.

    by Edwin Martin • Aug 31st 2010 • 13:08

  • Hi Edwin,

    Your anecdote could’ve been ours as it happens to us too from time to time!

    The Backfire client is javascript because it allows easy porting to a firebug plugin, as plugins are javascript with extra gui/access api’s wrapped around it. We felt we didn’t want to go to that extent right away and leave the option open to other contributors. In other words; we’d love to see a firebug plugin too!

    And you can however write an interface yourselves. The protocol and server response has been documented on the Backfire’s google code repository page. The changes that are POSTed to the server, and the response given are in such a format that it’s easy to write an implementation in PHP, Java or whathaveyou.

    We wanted to head start development on this subject, and we needed it for Quplo. Any tips, changes, suggestions or other implementations are definitely welcome.

    by mrtnkl • Aug 31st 2010 • 13:08

  • Love the idea. Love the name. Hate the icon.

    “Click here and shoot your eye out!”

    It’s not only quite unsettling, it doesn’t make sense. Ask 100 people what “backfire” means, and 99 will say something about a car.

    So there’s an idea for a happier icon… a cute little cartoon car with a puff of smoke coming out of its tailpipe.

    I wish I had the talent to draw that for you, but alas I’m better at suggesting than drawing… :-)

    by Michael Geary • Sep 2nd 2010 • 18:09

  • I agree on the icon. When I see it, it makes me think I’ll be shooting myself using Backfire.

    by Nick • Sep 3rd 2010 • 16:09

  • Cool idea!
    I will download your Code and find a way to save the changes with PHP.

    And I love the Icon!

    by DeDu • Sep 8th 2010 • 08:09

  • DeDu that would be awesome. Ping me if you need any help, or want to commit to the google code repository.

    by mrtnkl • Sep 8th 2010 • 08:09

  • If anyone could port this to PHP it would help a lot i think, I don’t even know where to start with .NET :p

    by netcrawle • Sep 10th 2010 • 14:09

  • It looks like it’s been over complicated. I’ll have to fire it up and do some testing now. Will save me hours of work if it’s a legit solutions. Thanks!

    by Foxinni • Sep 13th 2010 • 12:09

  • This is way to complicated,

    It is not a plug in as you try to imply, it is not a Firefox plug in, but some convoluted bunch of scripting that frankly looks like a nice way to breach security.

    No Thanks,

    by Varnu Vidlupe • Sep 14th 2010 • 19:09

  • Hi Varnu,

    Saving CSS changes made with firebug is complex by nature. It not only requires a client script or plugin, but also means of transferring it to the server and ways to interpret these changes and act upon them.

    We needed this for Quplo, but we thought more people could find it useful. So instead of making a proprietary feature, we wrote the protocol for gathering and sending changes, the client implementation to do just that, and a modular server implementation to show how to interpet and process these changes in order to actually “save” them.

    Technically speaking, a firefox plugin is pure javascript, only with more access to UI and IO. So now that Backfire is public domain, anyone can take it and turn it into a Firefox plugin. The server example is modular, to be easily portable, with a working example for plain .css files. Quplo uses an implementation based on that exact library.

    Yes, it is complex. We never said it wasn’t. Nor did we say it’s a plugin that works out of the box. All we did was open source our efforts in hopes of the community taking it further, because we know there is demand for it. But what Backfire is right now is a full roundtrip blueprint and 100% working example of how to go about, with Quplo being online proof.

    As for that security breach you’re mumbling about; that’s nonsense. Cross-window dispatching and listening to messages is a well-documented feature by all major browser vendors meant to do exactly what we use it for: secure handling interactivity between trusted domains. I would recommend reading up on the subject and doing your homework before posting something like this.

    Still, thanks for sharing your thoughts, I hope I could’ve cleared up some questions you may have.

    by mrtnkl • Sep 14th 2010 • 20:09

  • It’s not clear to me how the feature works. I’ve tried modifying the css in a couple of ways, yet it does not propagate back to my worksheet in quplo. Does the css have to be a separate file? Can you post a more detailed walkthrough showing where the css is edited (e.g. are you changing an element style? a style tag? or a style definition in a css file)?

    Thanks!

    by Abel • Sep 20th 2010 • 23:09

  • Were you guys aware of the firediff extension when writing this?
    http://www.incaseofstairs.com/firediff/

    by Tomo • Sep 21st 2010 • 16:09

  • @Abel, here’s the required setup:

    1. Make sure your css pages in quplo are served using type=”css” in the page tag.
    2. Put the Backfire script after including all your css files.

    @Tomo Yes, we were, and we also considered using Firediff as a starting point. However, as our goal was to create something that could also be used outside firebug (as it works almost 100% in webkit development toolbar) we set out to write our own as it gave us more control over what we were trying to accomplish.

    by mrtnkl • Sep 22nd 2010 • 10:09

  • There’s also FireFile, another firebug extension.

    But I’m a Chrome user (webkit) so I’m interested in backfire. Casually perusing the code at http://code.google.com/p/backfire/source/browse/trunk/Example/Script/backfire-1.0.js I wonder how hard it’d be to add an option to just console.log the differences so server setup isn’t required?

    by Tomo • Sep 24th 2010 • 11:09

  • Any idea when this might make it as a firefox or chrome extension?

    Sounds like a god idea but don’t really want a quplo account to use this.

    by Dan • Jan 6th 2011 • 13:01

  • Hey Dan, you don’t need a quplo account to use this. Just go ahead and download it, then get it running on a server of your choise (we provided c# code to do this, but you could write your own in php or any other language). The quplo thing is just a way to see how we implemented Backfire in our own app, since we created Backfire because we thought quplo would benefit from it.

    by Rahul • Jan 11th 2011 • 15:01

  • Hi Guys I integrated backfire as app for django framework https://github.com/k1000/django-backfire
    Thank You for your great job and for sharing it :)

    by kamil selwa • Jan 27th 2011 • 16:01

  • [...] able to release quite some side products to the open source community along the way. For instance, Backfire – a tiny open source project that allows users to save changes made on a web-page with [...]

    Pingback

    by Interview with Martin Kool from Sarien.net | Capsule Computers Pty Ltd - Gaming News, Reviews, Interviews & Competitions • Feb 11th 2011 • 16:02

  • [...] Backfire – Save CSS changes made in Firebug « Handcrafted Share and [...]

    Pingback

    by xhtml css templates – Backfire – Save CSS changes made in Firebug « Handcrafted | XHTML CSS - Style sheet and html programming tutorial and guides • Apr 14th 2011 • 15:04

  • [...] [h=2]6. Some extras online tools[/h] Some tools that will save a little bit more of your times Backfire: Save CSS changes made in [...]

    Pingback

    by 6 Most Effective Methods to Code HTML and CSS • Jun 13th 2011 • 09:06

  • [...] Backfire: Save CSS changes made in Firebug. [...]

    Pingback

    by Anonymous • Jun 24th 2011 • 03:06

  • [...] [...]

    Pingback

    by Whats my options im tierd of it ?. - Page 7 - MNS Forums • Jul 9th 2011 • 01:07

  • [...] [...]

    Pingback

    by Anonymous • Jul 18th 2011 • 02:07

  • I don’t understand how to install this…

    by Peper • Aug 9th 2011 • 22:08

  • [...] Backfire: 保存firebug的CSS变化。 [...]

    Pingback

    by 6种编写HTML和CSS的最有效的方法 - 博客 - 伯乐在线 • Oct 30th 2011 • 18:10

  • [...] Backfire: 保存firebug的CSS变化。 [...]

    Pingback

    by 6种编写HTML和CSS的最有效的方法 | Tabris' blog • Feb 18th 2012 • 02:02

  • [...] methods of saving CSS changes in Firebug: Backfire, [...]

    Pingback

    by Save CSS Changes In Firebug Using CSS Updater | acpote.com • Mar 30th 2012 • 06:03

  • [...] Backfire: 保存firebug的CSS变化。 [...]

    Pingback

    by 6种编写HTML和CSS的最有效的方法【推荐】 _ HTML _ 小G的大Q • Jun 16th 2013 • 06:06

  • [...] pomocą Backfire – Save CSS changes made in Firebug « Handcrafted. Share this:TwitterFacebookDodaj do ulubionych:Lubię Wczytywanie… Ten wpis został [...]

    Pingback

    by Backfire – Save CSS changes made in Firebug « Handcrafted | keep calm and read it • Jan 16th 2014 • 14:01

  • [...] aplicación super útil que he descubierto hoy para los fans de firebug: http://blog.handcraft.com/2010/08/ba…de-in-firebug/ No es algo que puedas instalar en tu máquina con unos clicks, sino hay un poco más de trabajo [...]

    Pingback

    by Guardando los cambios a un CSS de firebug: backfire | Da Webmasters • Mar 29th 2014 • 08:03

  • [...] Backfire: 保存firebug的CSS变化。 [...]

    Pingback

    by 6种编写HTML和CSS的最有效的方法 | 乐享weby • Apr 24th 2014 • 18:04

  • Leave a reply

    You must be logged in to post a comment.