WebPutty: scientific progress CSS editing goes “boink”

July 20th, 2011 by Dane Bertram

Update: We open-sourced WebPutty!

Today we’re proud to announce a new Fog Creek project: WebPutty CSS Editor!

We’ve all been there. You’re toiling away, late into the night, on some wickedly-awesome, vowel-loathing new website (prpl-refrigratr.biz.co.uk…or whatever). You’ve just finished plunking down all your angle brackets, and now it’s time to put some lipstick on that pig.

Next you find yourself doing one of two (equally annoying) things:

  1. You’ve got your website’s CSS open in your editor-of-choice and the website open in your browser-of-choice, followed by lots of typing in the former and refreshing of the latter. CTRL-S–ALT-TAB–CTRL-SHIFT-R–JOY!OR
  2. You’ve got the website open in your browser-of-choice with your Firebug-of-choice up and running, followed by lots of inspecting of elements, poking at their CSS, and then trying to extract those tweaks back out of Firebug and into your website’s CSS files. ALTERNATE-TEDIUM-FLAVORED-JOY!

*barf*

Well, not anymore. Today we’re launching a new tool that gives you a third, significantly less crap-tacular option (if we do say so ourselves), and we’re calling it WebPutty.

WebPutty is like a transmogrifier for your website

Transmogrifier labelled WebPutty set to "beautiful website"

 

In a way, WebPutty is sort of like the first scenario outlined above…only it works the way you actually want that scenario to work: in one pane you edit your CSS, and in another pane you see a preview of how that CSS will make your website look. In realtime. No saving (we auto-save for you as you type), no refreshing the preview (we handle that too), and no reverse engineering the changes you’ve been making out of some browser extension.

Screenshot of the WebPutty editor and preview panes

And after you’ve rounded all your corners just so, and gotten that drop-shadow just right, you just click a little “Publish” button and all that cascading awesome-sauce-ery becomes live for all your website’s visitors to see. No files to upload, no deployment scripts to run, no nothing. Edit, preview, publish, and move on.

What (else) makes WebPutty awesome?

  • CSS selector highlighting
    • Know one of the things we love about Firebug? Hovering over a DOM node in the dev tools and seeing its location highlighted on the web page. Awesome. Know one of the things we love about WebPutty? Putting the cursor in a CSS selector in the editor and seeing the matching nodes highlighted in the preview pane. Also awesome.Screenshot showing WebPutty's CSS selector highlighting in the preview pane
  • SCSS
    • Do you like Sass and LESS? So do we! WebPutty uses SCSS (the newer of the Sass syntaxes-es). And because SCSS is a superset of CSS, you can start out with your website’s existing, plain-jane CSS, and then tweak it over time to take advantage of all the great stuff provided by SCSS (variables, nested selectors, and mixins…oh my!).
  • Compass
    • Like using cool new CSS3 properties like border-radius, box-shadow, and gradient backgrounds? Hate having to type/copy-and-paste/look up all the -moz-blah -webkit-blah -ms-filter-crap -kthml-really? -o-mg-you’ve-got-to-be-kidding-me’s? Us too. Thankfully there’s Compass. It provides a metric boat-load of mixins you can use with your CSS that will save you from death by a thousands hyphens, and it’s built into WebPutty too.

Ok, sounds spiffy…but how does it all work?

You just embed one teensy-tiny link tag and an equally tiny script tag at the end of your website’s <head> tag, and you’re all set. Don’t be scared. The process is (almost) instantaneous and completely painless. We promise.

The <link> tag pulls in the current published version of your website’s stylesheet from our servers (actually, Google’s App Engine servers. Potato, potahto). We make sure to serve that up minified and gzipped so it’s nice and snappy for your website’s visitors. We also take care of cache expiration for you so that whenever you publish a new version of your website’s CSS your visitors will get it right away.

Of course, we also let you play with a preview version of your website’s CSS without inflicting any half-baked designs upon your website’s visitors. That’s the version you edit in the WebPutty editor. That’s also what the <script> tag you embedded into your website is for. It handles the communication between your website and the WebPutty editor. So even if Bruce Schneier were to come to your website with JavaScript disabled, he’d still be able to see all your glorious stylesheet wizardry.

Don’t like the idea of hosting your CSS on someone else’s servers?

You can always export a pretty-printed version of your website’s CSS at any time (both the preview and published versions). Down the road, we’re thinking about how to expose your CSS in a versioned way so that you can keep it in Mercurial (with Kiln!), or Git, or whatever other version control software you might be using. We’re also open to other ideas.

What’s this going to cost me?

For you, our early adopters? Nothing. Zip, zilch, nada.

WebPutty was created out of our own frustration with trying to create beautiful websites. And we want to get as much of that frustration out of your way as possible.

We want you to love creating beautiful things.

Down the road we might add some business-y, corporate, Lotus Peoplesoft B2B++ features and charge for that, but we’re never going to screw you, our early adopters. Don’t hassle with setting up a media server. Our servers are fast, stable, and free to use for early adopters.

There’s no reason you should ever have to edit non-WebPutty CSS again.

Convinced at how super-fan-dabulous this thing is?

Great! Just head on over to webputty.net to get started.