Archive for the ‘WebPutty’ Category

WebPutty: The Open Source Transmogrifier

April 5th, 2012 by Dane Bertram

WebPutty + Open Source = AWESOME!

We announced that we were open-sourcing WebPutty back at the end of February, and now its source is open; out there wild and free for all to see!

Just check out WebPutty on GitHub, follow the instructions there, and you should have your own sparkly new copy of WebPutty up and running in a matter of minutes. Sweetness!

Important reminders about

  • (and any stylesheets hosted there) will be available until December 31, 2012. Past that point, you will need to migrate to your own WebPutty installation, or find another provider.
  • You can export any of your stylesheets hosted on by opening those stylesheets in WebPutty’s editor and clicking the “Export” button in the upper-right-hand corner of the editor.
Thanks for all of your support with WebPutty. We’re excited to see where you all can take it!

What’s up with WebPutty

February 27th, 2012 by Dane Bertram

Update: We’ve finished open-sourcing WebPutty!

First, the short version:

  • WebPutty’s going to go open-source! If you want to host your own installation, you’re going to be able to.
  • While the official site has had a wonderful reaction from the community, we can’t justify keeping it around as a Fog Creek product. (and any stylesheets hosted there) will continue to be available until at least December 31, 2012. Past that point, you will need to migrate to your own WebPutty installation, or find another provider.
  • If you’re concerned about any of the above, you can export any of your stylesheets hosted with WebPutty by opening those stylesheets in WebPutty’s editor and clicking the “Export” button in the upper-right-hand corner of the editor.

Questions? Concerns? Interested in taking over the hosting? Please contact us at

And now the more detailed version…

WebPutty has been unique for Fog Creek from day one. The initial idea for WebPutty came up during a one-off brainstorming session Tyler and I held with Jason, a former Creeker (and good friend). Tyler and I had already spent a few weeks brainstorming ideas for new products with Joel and Michael, but when the idea for WebPutty (code-named “CSSFiddle” at the time) popped into our heads, we couldn’t resist getting a simple proof-of-concept version of it up and running.

So that’s what we did. We sat down in Tyler’s office one June day in 2011 and in just one single afternoon got the basic premise behind WebPutty, a live preview of as-you-type-it CSS, working on Google AppEngine. When we showed it to Joel and Michael, we all agreed to give WebPutty a shot. We had no idea whether it would be successful; we just knew it was awesome, and we wanted to try. On July 20th, a mere six weeks later, we launched WebPutty to the world in an announcement that was one of our most popular blog posts ever!

Needless to say, we were very happy to have received such a warm response, and after coming down from the high of shipping, Tyler wrote up a more detailed summary of how WebPutty came into being in just six weeks.

Fast-forward seven months. Where is WebPutty now? Well, despite us doing effectively zero marketing for WebPutty, we’ve gotten some pretty respectable numbers:

  • Over 25,000 people have logged in and taken a look around
  • Over 9,000 sites (collections of stylesheets) have been created
  • Millions of CSS requests have been served by our WebPutty CDN
  • Thousands of happy tweets from customers using WebPutty have graced our feeds

Not bad!

…but also not good enough. Despite these promising numbers, WebPutty has not seen the broad user adoption we would have liked. Given Fog Creek’s current size, we do not plan to continue developing WebPutty. Instead, we’re going to open source the code and see where the community takes it.

But don’t worry! We will continue to host until at least December 31, 2012. We’ll be blogging again with more details after we’ve had a chance to clean up the code base for public release, including providing documentation for getting your own copy of WebPutty up and running.

WebPutty has been a giant experiment from day one. It’s the first product we’ve come up with in this manner, the first product we’ve launched so quickly, the first free-right-off-the-bat product we’ve launched, and now will be the first complete product we’ve ever open-sourced. WebPutty’s taught us a lot, and we’re proud of how it’s been received and the things it’s helped others question when it comes to making website design and development easier. Did it change the world? Not quite. But did we have a blast working on it and make the lives of others at least a little easier in the process? You bet we did.

We appreciate everyone who’s taken a look at WebPutty and hope that at least some of those same people will consider contributing to WebPutty’s code base once it’s been open sourced. We’re excited to see where the ideas behind WebPutty can be taken once a broader audience of people are able to contribute to it.

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 (…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!


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 to get started.

Looking for more?

Visit the Archives or subscribe via RSS.