Online CSS editing with WebPutty

If you’ve written CSS you’ve been likely to follow either one of these methods: editing in your editor of choice and then refreshing a webbrowser, or editing in a firebug-like browser add-on and copying to the editor. Fog Creek introduced a new way: editing in the browser. Online, with an actual editor.

The idea

WebPutty is a new tool that lets you create and modify your CSS online. Instead of hosting the CSS yourself, you have WebPutty host it in the Google Apps cloud and you can edit your CSS by logging in to the site. The changes you make to the CSS are saved automatically and visible in a preview version instantaneously. Once you’re satisfied you click ‘publish’ and your website’s CSS is updated. If you don’t fancy your CSS hosted online, you can save an export and upload it to your own environment.

The execution

WebPutty employs SASS, LESS and Compass to ease the regular CSS development. I had never worked with these before, but now that I have modified this blogs CSS to run off of WebPutty I decided to change some stuff around and see how it fares. I particularly liked the easy CSS3 techniques that Compass offers. I also used variables, which we had previously solved by using PHP as PCP (PHP: Css Preprocessor!) and nested selectors. The nested selectors were certainly nice to use as well.

The first time you log in to WebPutty you notice that everything just looks really neat. It even makes little screenshots of your projects! Navigating to a project is animated and even produces a little sound. The editing screen is particularly beautiful and intuitive, allowing you to resize your editing/viewing area and flipping them from horizontal to vertical and back.



Using the WebPutty editor was a little bit annoying. The editor may be configurable, but I haven’t found out how yet and so I was stuck using two spaces as a tab indent and 1TBS(I made Allman out of it, myself). This was particularly troublesome with the many nested selectors. The codestyle we use at Crowd Surfing relies on nearly full path selectors, so I was nesting quite a lot. The editor was not too helpful for this.

There are a lot of other useful features as well, such as the facts that its hosted in a superfast environment and delivered minified and gzipped.

Would I use it on a production site?

Oh that’s difficult. I don’t think the useful features WebPutty provides currently make up for the lack of features such as code hinting and even though the editing is ‘live’, it’s not as quick and fluid as IDE editing is. Wouldn’t it just be amazingly awesome if you could have this as a plugin for your editor?

If I were to use it I would definitely keep it hosted. Going through the hassle of exporting and deploying seems like way too much labor for me. The Fog Creek blog entry speaks of tying WebPutty into a SCM system – if that were to happen I would be much more likely to use it.

Conclusion

Once WebPutty goes out of beta I would certainly consider using it. But I would have to get version control; I use git and mercurial at home and SVN at the office and I couldn’t stand doing without them. I don’t go back in my history often, but the odd occasion that I did has been invaluable.

On a side not, isn’t it a bit of a fundamental problem with CSS that we need tools like this? That we need feedback so directly to understand what’s happening when we’re coding CSS? I can code PHP for hours without compiling once, then fix bugs for a couple of minutes and have a working system, but for some reason styling a page without checking every odd second is un-doable. What do you think? Am I just such a lousy CSS coder?