
WebPutty: CSS editing goes "boink" - acangiano
http://blog.fogcreek.com/webputty-css-editing-goes-boink/
======
dolinsky
OK, I guess I'll be the wet blanket that goes thud here, but I really don't
see this being very useful. In fact, I see it encouraging bad practices. Maybe
it's because I'm approaching this from the standpoint of a company that has
more than a few users coming to the site, probably (hopefully?) has an
existing release process in place and has multiple stages of their environment
to go through (sandbox/dev/qa/staging/live). If this is how you slap lipstick
on your pigsite, then you're probably building a site that very few people go
to and you don't even have a local version of your site to test against first
(because if you had a sandbox environment this tool is pretty much moot), in
which case I can see the usefulness of this tool.

Not sure how I feel about the inclusion of the link/script tags in order to
make this work but it all seems geared to someone who maybe has their own blog
or very low-trafficked site and this would be their alternative to editing the
files on the live server.

~~~
patio11
So, these days this style of thing is not uncommon. For example, much of the
Rails community uses Sass, a language which compiles to CSS. In development
mode, it gets compiled anew on every page load. This doesn't happen in
production: there are a few ways to make it happen, but basically, in
production it looks like auto generated CSS sitting on the hard drive waiting
to be served up quickly.

Doing the same thing with WebPutty would take maybe a dozen lines of code. I'm
assuming anyone with multiple environments can make it happen in their
language/framework of choice.

~~~
AndrewHampton
I'm curious if you used this already since you've been working w/ Fog Creek or
if this is the first you're seeing it too.

~~~
patio11
I haven't used it. I will never answer questions about what knowledge I
have/had regarding clients' upcoming product releases. You don't have to be
Steve Jobs to get touchy about that one, and it's specifically enumerated in
most NDAs I sign.

~~~
AndrewHampton
OK, thanks

------
nlh
This looks nifty and all, and I agree that their two "options" (edit ->
browser -> reload vs. Firebug cut-n-paste) are indeed two options that many
people consider, but they seem to have left out two other options that solve
this problem quite elegantly, at least for Mac users:

1) Coda has real-time CSS editing built-in, and you can relatively easily fire
up multiple windows to edit in a "real" editor (if you consider Coda a real
editor) and view changes in real-time as you type

2) CSSEdit does one better -- you can edit using their editor and see changes
in key-by-key realtime in their preview window. OR, and this is how I've
settled on working, you can edit files using the editor of your choice
(MacVIM, for example) and still see changes instantly upon save in their
preview. So it reduced the need to reload the browser (saving half the steps).
Now it's just a matter of make changes, Cmd-S (or however you save in your
editor of choice) and it's all updated in real-time.

~~~
tghw
Yeah, we know there are tools out there that do similar things (Backfire,
live.js, etc.) but we do think the hosting will appeal to some people (with
gzip and etags set up properly) and SCSS/Compass, which make working on CSS
_much_ nicer, is a huge selling point, personally.

------
patio11
Fun stuff. I'd be tempted to either a) run a deployment step to freeze CSS
locally or b) do some nginx reverse proxy magic to grab the latest CSS and
cache it for a long time (I.e. only grabbing it from GAE once per revision).

That's a fairly consequential thingee to have on a server with availability
independent of one's own.

If folks want I'll OSS code for this, although at a dozen lines in Rails it is
barely worth typing git clone...

~~~
euroclydon
How would I make sure my off-domain images, that are referenced in css, are
linked with http when the connection is non-ssl, and https, when the
connection is ssl? Currently I make the server link to two separately cached
css files (depending on secure or not), which are themselves dynamically
generated with an ssl flag.

Does SASS offer a solution for this?

~~~
tghw
Instead of specifying <http://example.com/foo.png> or
<https://example.com/foo.png>, you can just use //example.com/foo.png. AFAIK
the only downside to that is older versions of IE (6 & 7 I think) will
download the image twice for some reason.

~~~
spjwebster
It's actually IE7 and IE8, and only for CSS file URLs (as opposed to URLs _in_
CSS files). Details of protocol-relative URLs here:

[http://blog.httpwatch.com/2010/02/10/using-protocol-
relative...](http://blog.httpwatch.com/2010/02/10/using-protocol-relative-
urls-to-switch-between-http-and-https/)

...and the unfortunately double-loading bug for CSS files in IE7/8 here:

[http://www.stevesouders.com/blog/2010/02/10/5a-missing-
schem...](http://www.stevesouders.com/blog/2010/02/10/5a-missing-schema-
double-download/)

------
sp332
Here's the transmogrifier storyline:
<http://members.shaw.ca/newsong/calvin.html>

The "scientific progress goes boink?" line is from the duplicator story (which
I can't find). The duplicator is the cardboard box on its side, which is
obviously completely different from the transmogrifier. And if you turn the
opening to the top, it's a spaceship!

~~~
InnocentB
Minor quibble: the box with the opening on top is a time machine. I don't
remember any space-shipping happening with the use of props, it seemed to be
all internally imagined.

~~~
zipdog
Didn't Calvin once go to Mars in his red trolley?

~~~
sp332
He went to several planets and other (imaginary) solar systems as Spaceman
Spiff.

~~~
zipdog
True, but did he ever use props as Spiff? Most of the time he was in the
classroom with Mrs Wormwood

------
jwdunne
I don't know. The SASS stuff seems awesome. Though, Firebug can handle a lot
of stuff that it's making out it can't.

For example, the article says that you have to do a lot of tweakage with the
element inspector. This isn't 100% the case and I think that paints Firebug in
a less than positive light. The element inspector is a really useful tool but
you're just not restricted to that.

There's a CSS tab next to the HTML tab. This presents the full stylesheets to
you pretty printed, editable like you would an inspected element. I can often
author a lot of CSS in this window in:

a) A much shorter space of time. b) Less amounts than I usually would.

Why point a? When you can see the CSS changing in real-time, you don't have to
constantly refresh. Yes, there are ways to reload CSS and I use them often but
it's not quite live like Firebug is. The second point is pretty much for the
same reason: since you're making the changes in real time you can see exactly
what changes what. This makes it less likely to over-step, in which you could
be writing redundant CSS.

Firebug has it's downsides, such as it's clunky way of editing with pretty
printing. There's also how it assumes the formatting of your CSS. You can use
it in a similar way to an editor too but this removes pretty printing. Another
big thing is the ability to lose work on refresh if you're not careful.

I can indeed live with the above. I don't think there are many instances where
I would like to add in extra assets. I am quite a forgetful person.

Either way, the issues with Firebug can be patched over and I'm certain can be
fixed. I don't think linking additional JS and CSS can easily be rectified
with this.

What could be missed is the publish feature but not exactly ideal in a fair
few number of situations.

This is from somebody who has to work on a lot of static websites and
restrictions insist on pure CSS and HTML.

~~~
tghw
Don't get us wrong, we _love_ Firebug, but it is kind of a pain to then take
the changes you made, copy them out, paste them somewhere else, and then
deploy it. Backfire makes that easier, which is good, but you still don't have
SASS and Compass, which I find makes working with CSS _much_ nicer.

In a static environment, you can just compile the SASS to CSS before you
deploy, or you can use WebPutty and have us host it for you.

~~~
jwdunne
WebPutty is really cool, by the way. I'm currently having a play with it and
it's funny but I have some suggestions:

A firebug inspired element inspector may be a good thing. I think jumping
straight to the line of CSS rather than the separate, filtered window would be
a great idea. I'd really love that.

Another thing, but less important, would be auto-complete. Either that or ways
to expand ZenCSS abbreviations. This would push my productivity to the moon.

Another thing I was thinking of hacking on to Firebug (when I find out how) is
selector hinting. The way this would work is, when you type a selector, the
available ones are given to you, much like method hints in IDEs. This would be
very useful to me at least. There have been many times when I've needed to
know a particular hierarchy/id name/class name and found myself having to
reference elsewhere.

To host CSS would be a social/pointy-haired-boss issue but I could make
necessary recommendations. In any sense, I love the work that has been done.

This is my more constructive feedback :)

~~~
tghw
Thanks for the suggestions!

We've considered embedding Firebug Lite, since it gets you most of the inspect
stuff you'd want for CSS editing. We may still add it.

Autocomplete is also high on the list of features, we just ran into some
problems with CodeMirror 2.

------
vog
I personally prefer a different approach. I open both the browser and my
favourite editor on the same desktop. I edit my HTML/CSS stuff and as soon as
I hit "save", it is shown immediately in the browser. All you need to do is:

1\. Add a <meta> refresh tag to refresh the page once per second.
Alternatively, with one line of JavaScript you can refresh even more
frequently, e.g. immediately after "on load".

2\. Bonus: Use a tiling window manager such as WMII, which automatically
adjust the size of your editor window if you resize your browser window, and
vice versa. That way, you get some kind of "split mode" and don't have to
struggle with resizing multiple overlapping windows.

In summary, using auto-refresh + tiling window manager resulted a big increase
in comfort for me. Not only during CSS development.

 _A bit off-topic, but related:_ If your target runs in the command line, the
Unix command "watch" is a perfect auto-reloader:

    
    
        watch --interval=0 your-app
    

For instance, debugging some PHP code by auto-rerunning the test suite might
look like this:

    
    
        watch --interval=0 php run-tests.php
    

This gives you immediate feedback after hitting "Save" in your editor, without
even having to struggle with your browser.

~~~
vog
Link to WMII, to get an impression: <http://wmii.suckless.org/>

------
SeoxyS
Not to rain on WebPutty's parade (I think it's a great app, and it looks
sweet), but I think the problem has been solved much more elegantly a long
time ago by CSSEdit: [1]

<http://macrabbit.com/cssedit/>

It's a really great app. Forget about the GUI css editing view and switch to
the code only view, and enjoy live updating, and x-ray inspection.

[1]: If you use a Mac.

~~~
custominstall
From what I can tell looking at cssedit there is couple of differences here

1\. They also provide a hosted CSS service with minimizing 2\. They support
scss

~~~
SeoxyS
Both of these points are fair. To me, personally, neither matter, but if
you're into SCSS then CSSEdit probably isn't the right choice for you.

------
Flam
This is EXACTLY what I needed and wanted. I was literally about to code my own
version of this today but decided to procrastinate and check hacker news, and
I'm sure glad I did!

I even made a thread on reddit webdev about it yesterday:
[http://www.reddit.com/r/webdev/comments/itqy1/is_there_a_fir...](http://www.reddit.com/r/webdev/comments/itqy1/is_there_a_firebuglike_wysiwyg_htmlcss_editoride/)

------
astrofinch
Here's a bookmarklet that reloads CSS only:
<http://david.dojotoolkit.org/recss.html>

------
kaichanvong
To avoid a new browser to worry about... how about LiveReload?
<http://livereload.com/>

~~~
andreyvit
Thanks for the shootout. I'm actually the author of LiveReload, and I was just
frightened to death upon seeing this news. But gosh, I guess I shouldn't worry
too much upon closer inspection.

Besides, competing with Joel sounds like fun.

------
Fzznik
I'm surprised at how many people don't know about a feature they probably
already have, found in the Web Developer plugin for Firefox. The Edit CSS lets
you see your changes live as you type. I use it all the time.

~~~
scottkrager
Yes, but it doesn't save them.

You hit refresh and those changes are gone.

I see the value of this for alot of one-person development shops or front-end
devs that do a lot of client design work.

Your client calls you, "Hey, this thingy here isn't lining up right"

"click. click. publish"

"refresh the page"

"ohhh....how did you do that?" (Client amazed)

~~~
Fzznik
If you push in the "Stick" button, changes are not lost if you refresh. It
does also have a save button, but yes, you still need to upload the change.
(Even though I tend to copy/paste instead of using this.)

But, this is---for me---a one time thing, after I've made all the changes I
want and things look great. It makes the CTRL-S, Alt-Tab, Reload procedure
that was originally described only need to happen once, instead of lots of
times in rapid succession.

~~~
pbhjpbhj
This is actually the only thing I keep the webdev tools addon around for now,
everything else I used to use it for is either in firebug or I've found other
implementations for (eg W3C checks I use unicorn first which I have a saved
search "key" for).

------
ctek
It seems like the market for html/css tools is so vast, it doesn't seem hard
to build yet another tool that can end up being profitable. I've been working
on a grid-based rapid html prototyping tool <http://pageblox.com> and I was
looking to incorporate live css editing similar to this into it. Of course Fog
Creek put a twist on it I never would have considered (editing/modifying css
of an already live site). I'm very curious to see how (and learn from) how
this will evolve as I assume this is their feedback/iteration phase.

------
krashidov
Wow I honestly thought I was the only one stuck in the save -> alt tab ->
upload -> refresh loop. I didn't know this was how some people were doing it.
Great tool, trying it out right now

------
ChrisArchitect
am I the only one to clicked this thinking it was some sort of SSH
client...;-)

~~~
tghw
Yeah, we didn't really make the connection at first (pun sorta intended...)

We were thinking more like modeling putty or spackle for the web. Oh well :)

------
pbhjpbhj
I've a framebreaker on my blog which means I can't use this without disabling
that first. Not saying this is a huge problem just something that might not
have been thought of. I guess the user would spot it pretty quickly.

Slightly off-topic, why is there a 350k image file that's dynamically resized
(smaller) and only there for decoration. Slowed page load considerably for me
(I'm having problems with my connection mind you). Pretty but way off optimal
IMO.

------
richardofyork
I tested it and it works fairly well. Although, it is not exactly real time
for me, there is a 5-second delay (could be my DSL connection) before the page
updates.

It would be even more useful to use it with localhost, however, since I
develop on my local computer and then upload the finished code to the server.

------
philc
I wrote LiveCSS for this purpose.

<https://github.com/ooyala/livecss>

It's far simpler in that it just reloads your CSS continually. We use it all
the time at Ooyala to put our favorite text editor and a web browser side-by-
side and hack away.

------
plasma
Damn, was interested until I found out you need to include some external code
at the top of the page.

Was looking forward to it just editing my css file I have stored locally on
disk, so I could review the changes and commit to source control.

------
marcf
For a second I thought it said it supported sccs... I figured that come on, at
least go with csv...

<http://en.wikipedia.org/wiki/Source_Code_Control_System>

~~~
tghw
Haha. No, I think if we do anything like that, it'll probably be via
Mercurial.

------
cfinke
Couldn't the same effect be achieved through a bookmarklet that reloads the
CSS for the page every 1/5/30 seconds? That would let you continue to use your
preferred editor and browser, and the cost of reloading local CSS is slim to
none.

~~~
tghw
Yes and no. Live.js will do that sort of reloading for you, but it won't host
it for you. You'd also have to set up on the fly SCSS=>CSS compilation.
Neither of those are hard, but the idea is that you don't have to do any of
that sort of annoying work.

------
swah
I suppose the alternative to solve this I really would to see is much harder
to code: a text editor based on Chromium. But would it be snappy.

------
figital
I'd like to have something like this in a relational database. Probably just
to try sharing styles across many different elements, sites, etc.

------
ehc
Interesting, but I simply would never develop without a real editor. (Whatever
a real editor is to you, it's not a text field on a web page.)

~~~
tghw
To be fair, nor is this. We use CodeMirror (<http://codemirror.net>), which at
least gives you line numbers, syntax highlighting, braces matching, and
(coming soon) autocomplete. Sure, it's no [vim|emacs|Visual
Studio|Eclipse|nano], but it is better than just "a text field on a web page".

------
kang
Please increase the font or bold or linespace with icons at the last line of
the article; should increase clickthrough.

------
DTrejo
<http://aboutcode.net/vogue/>

Vogue auto-reloads your css and you can still use your editor of choice (vim,
emacs, textmate, notepad).

<http://incident57.com/less/>

less.app auto-compiles your less whenever it changes. Similar tools exist for
sass, stylus, and whatever other superset of css you prefer.

------
calloc
This looks cool, but what does this have over CSSEdit? Will this work with
internal only pages? Stuff like that?

~~~
aneth
SCSS and Compass support is important to me. I avoid plain CSS whenever
possible, and CSSEdit is pretty useless (certainly not worth paying for)
without SCSS support.

------
apalmblad
Meh.

Doesn't seem to work as advertised in Chrome (dev channel).

Not bad, but I was never able to really get into CSSEdit, which is sort of
what I imagine it to be similar to. A lot of missing editor features - or
maybe it just not being vim.

My biggest gripe here is that I have to trust someone else to host my CSS. I
just can't do that.

I guess I was hoping for a better CssEdit and it wasn't.

~~~
jhawk28
"You can always export a pretty-printed version of your website’s CSS at any
time (both the preview and published versions)."

Its extra work, but you can publish the exported CSS with your site.

~~~
apalmblad
I may just be slow, but I didn't see a way to actually start editing without
embedding their link tag on my site. I imagine that'd be hard to do what they
want without a bit of hackery to get around cross domain issues, but for
casual poking around, it was more than I wanted to do.

I did read that quote, though.

------
lovskogen
Sad to see alot of people thinking SCSS is the latest version of SASS, and not
supporting the latter syntax.

------
acangiano
Direct link: <http://www.webputty.net/>

------
josscrowcroft
AMAZING!

------
justhw
what if I need to add a div?

~~~
adolph
Yeah, I didn't see a way to change the HTML broilerplate without pointing to
an actual webpage that has to have the webputty css and js links in it.

~~~
tghw
Yeah, at this point we're not doing HTML because that would mean we would be
hosting your whole site. Fortunately, with CSS3, there are fewer extra
elements you have to add for stylistic reasons, so it's getting to be less of
a problem.

