Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Backfire : Save css changes made in firebug

blog.handcraft.com

Post reply on HN
Print view View original

1–10 of 11 posts

Re: Backfire : Save css changes made in firebug

#2

Post by _ankit_ »

If you want to save the changes on the client side for when you're debugging, try the Stylebot Chrome extension: https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjei...

The up side: You can immediately use it with any of your sites. No setting up required. The down side: It works on top of your existing CSS and you'll still need to copy/paste the CSS into your live version.

Re: Backfire : Save css changes made in firebug

#3

Post by BasDirks »

Why I don't like this kind of solution (yet):

I like to mess around in my CSS loads, trying different combinations, trying whether a property has an actual effect on the appearance/flow of the page, etc.

I like to then make changes that have been throughly tested inside vim, :w, CMD-TAB, CMD-SHIFT-R.

By separating experimentation and editing, I know exactly what is added to my CSS, without having to think about whether or not all in-browser changes are truly necessary for my purpose. I bet use of these kinds of extensions by inexperienced web-designers (togglers we might call them) will lead to extremely ugly and bloated stylesheets.

Re: Backfire : Save css changes made in firebug

#4

Post by rlander »

BasDirks wrote: post #3

Why I don't like this kind of solution (yet): I like to mess around in my CSS loads, trying different combinations, trying whether a property has an actual effect on the appearance/flow of the page , etc. I like to then make changes that have been throughly tested inside vim, :w, CMD-TAB, CMD-SHIFT-R. By separating experimentation and editing, I know exactly what is added to my CSS, without having to think about whet…

Unless you accidentally close or reload the browser window (or there's a power failure). This has happened to me more times than I care to remember.

Re: Backfire : Save css changes made in firebug

#8

Post by BasDirks »

rlander wrote: post #4
BasDirks wrote: post #3

Why I don't like this kind of solution (yet): I like to mess around in my CSS loads, trying different combinations, trying whether a property has an actual effect on the appearance/flow of the page , etc. I like to then make changes that have been throughly tested inside vim, :w, CMD-TAB, CMD-SHIFT-R. By separating experimentation and editing, I know exactly what is added to my CSS, without having to think about whet…

Unless you accidentally close or reload the browser window (or there's a power failure). This has happened to me more times than I care to remember.

I create a "task" (you can do this with any todo app, but I use taskwarrior) for every change I make to my css, ie: "more appropriate top margin @ index". Then I solve exactly that problem, change the selectors/properties I need in my stylesheet, and review the solution (to see if other rules are affected or overwritten).

define problem -> solve problem -> refine solution -> commit/save changes.

might sounds slow, but really isn't, and keeps things clean.

Re: Backfire : Save css changes made in firebug

#9

Post by evilduck »

mikemaccana wrote: post #7

You can already do this in Chrome without doing anything (in Google fashion, though, the UI isn't very intuitive). Check Paul Irish's Chrome Dev Tools talk from JSConf 2011 for that and other tips.

For the lazy: http://paulirish.com/2011/a-re-introduction-to-the-chrome-de...

(edit: around the 8:30 mark)

Post reply on HN