9 ms·

WebPutty: CSS editing goes "boink"

296 points by acangiano 15y ago

acangiano 15y ago
Direct link: http://www.webputty.net/ http://www.webputty.net/
nlh 15y ago
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 15y ago
  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.
- Flam 15y ago
  I don't have a mac.
sp332 15y ago
Here's the transmogrifier storyline: http://members.shaw.ca/newsong/calvin.html 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!
- srl 15y ago
  Neither can I find the duplicator story - the particular strip in question, however, is here: http://www.progressiveboink.com/jon/images/calvinhobbes/jon3.GIF http://www.progressiveboink.com/jon/images/calvinhobbes/jon3...
- bgruber 15y ago
  starts here: http://www.gocomics.com/calvinandhobbes/1990/01/08 http://www.gocomics.com/calvinandhobbes/1990/01/08 "boink": http://www.gocomics.com/calvinandhobbes/1990/01/10 http://www.gocomics.com/calvinandhobbes/1990/01/10
- InnocentB 15y ago
  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 15y ago
    Didn't Calvin once go to Mars in his red trolley?
    - sp332 15y ago
      He went to several planets and other (imaginary) solar systems as Spaceman Spiff.
      - zipdog 15y ago
        True, but did he ever use props as Spiff? Most of the time he was in the classroom with Mrs Wormwood
  - sp332 15y ago
    Oh yeah, you're right. It was Pearls Before Swine that (recently) turned a box into a spaceship. http://www.gocomics.com/pearlsbeforeswine/2011/07/11 http://www.gocomics.com/pearlsbeforeswine/2011/07/11
astrofinch 15y ago
Here's a bookmarklet that reloads CSS only: http://david.dojotoolkit.org/recss.html http://david.dojotoolkit.org/recss.html
deleted 15y ago
[deleted]
krashidov 15y ago
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
kaichanvong 15y ago
To avoid a new browser to worry about... how about LiveReload? http://livereload.com/ http://livereload.com/
- southpolesteve 15y ago
  Yes. This and using Gaurd for a number of other things. For my rails work flow, I don't really see the need for this product.
- andreyvit 15y ago
  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.
apalmblad 15y ago
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 15y ago
  "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 15y ago
    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.
- tghw 15y ago
  Officially speaking, we don't support the dev channel. It just isn't feasible. That said, if you could send us a bug report at webputty@fogcreek.com or via https://webputty.fogbugz.com/?pg=pgPublicEdit https://webputty.fogbugz.com/?pg=pgPublicEdit we'll take a look and see what we can do. If you want to host it yourself, you can use WebPutty to edit it, and then use the export link (page with a green arrow coming out of it) to get out the compiled CSS.
  - apalmblad 15y ago
    Seems fixed now. If you did something, thanks. If not, please accept my apologies for a waste of time.
calloc 15y ago
This looks cool, but what does this have over CSSEdit? Will this work with internal only pages? Stuff like that?
- aneth 15y ago
  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.
dolinsky 15y ago
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.
- palish 15y ago
  You should edit your post to include reasons why WebPutty is "a bad thing". (I have no idea; I'm a gamedev guy, but I find webdev very interesting. It's hard to know what to avoid and what to embrace when you're new.)
  - dolinsky 15y ago
    I'd be happy to include an edw519-style bulleted list of why webputty is 'a bad thing', but I guess it depends upon who their target audience is for this product. If they're targeting someone who is used to ssh'ing into their account on their shared hosting company and editing their css 'live', then yes, I think this product provides a benefit to that user. Any site I've ever worked on I've always had atleast 2 environments, a local environment and a live environment. Any company I've ever been a part of has had at least 3 environments (sandbox/qa/live) and it's very common to have a dev and staging environment on top of those as well. The reason you have a minimum of 2 environments is so that you can do all of your testing without breaking the live environment, which is what this tool seems to ignore.
    - dsmithn 15y ago
patio11 15y ago
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...
- deleted 15y ago
  [deleted]
- shii 15y ago
  We do, please.
- euroclydon 15y ago
  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 15y ago
    Instead of specifying http://example.com/foo.png http://example.com/foo.png or https://example.com/foo.png 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 15y ago
      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-urls-to-switch-between-http-and-https/ http://blog.httpwatch.com/2010/02/10/using-protocol-relative... ...and the unfortunately double-loading bug for CSS files in IE7/8 here: http://www.stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/ http://www.stevesouders.com/blog/2010/02/10/5a-missing-schem...
justhw 15y ago
what if I need to add a div?
- adolph 15y ago
  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 15y ago
    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.
deleted 15y ago
[deleted]
jwdunne 15y ago
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 15y ago
  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 15y ago
    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 :)
ChrisArchitect 15y ago
am I the only one to clicked this thinking it was some sort of SSH client...;-)
- tghw 15y ago
  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 :)
Fzznik 15y ago
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 15y ago
  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 15y ago
    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 15y ago
      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).
marcf 15y ago
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 http://en.wikipedia.org/wiki/Source_Code_Control_System
- tghw 15y ago
  Haha. No, I think if we do anything like that, it'll probably be via Mercurial.
figital 15y ago
I'd like to have something like this in a relational database. Probably just to try sharing styles across many different elements, sites, etc.
Flam 15y ago
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_firebuglike_wysiwyg_htmlcss_editoride/ http://www.reddit.com/r/webdev/comments/itqy1/is_there_a_fir...
swah 15y ago
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.
plasma 15y ago
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.
cfinke 15y ago
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 15y ago
  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.
SeoxyS 15y ago
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/ 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 15y ago
  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 15y ago
    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.
DTrejo 15y ago
http://aboutcode.net/vogue/ 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/ 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.
josscrowcroft 15y ago
AMAZING!
richardofyork 15y ago
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.
ehc 15y ago
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 15y ago
  To be fair, nor is this. We use CodeMirror (http://codemirror.net 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".
lovskogen 15y ago
Sad to see alot of people thinking SCSS is the latest version of SASS, and not supporting the latter syntax.
kang 15y ago
Please increase the font or bold or linespace with icons at the last line of the article; should increase clickthrough.
ctek 15y ago
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 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.
vog 15y ago
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 15y ago
  Link to WMII, to get an impression: http://wmii.suckless.org/ http://wmii.suckless.org/
pbhjpbhj 15y ago
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.
philc 15y ago
I wrote LiveCSS for this purpose. https://github.com/ooyala/livecss 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.

296 points by acangiano 15y ago

Direct link: http://www.webputty.net/ http://www.webputty.net/

nlh 15y ago

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 15y ago
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.
Flam 15y ago
I don't have a mac.

sp332 15y ago

Here's the transmogrifier storyline: http://members.shaw.ca/newsong/calvin.html 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!

srl 15y ago
Neither can I find the duplicator story - the particular strip in question, however, is here: http://www.progressiveboink.com/jon/images/calvinhobbes/jon3.GIF http://www.progressiveboink.com/jon/images/calvinhobbes/jon3...
bgruber 15y ago
starts here: http://www.gocomics.com/calvinandhobbes/1990/01/08 http://www.gocomics.com/calvinandhobbes/1990/01/08 "boink": http://www.gocomics.com/calvinandhobbes/1990/01/10 http://www.gocomics.com/calvinandhobbes/1990/01/10
InnocentB 15y ago
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 15y ago
  Didn't Calvin once go to Mars in his red trolley?
  - sp332 15y ago
    He went to several planets and other (imaginary) solar systems as Spaceman Spiff.
    - zipdog 15y ago
      True, but did he ever use props as Spiff? Most of the time he was in the classroom with Mrs Wormwood
- sp332 15y ago
  Oh yeah, you're right. It was Pearls Before Swine that (recently) turned a box into a spaceship. http://www.gocomics.com/pearlsbeforeswine/2011/07/11 http://www.gocomics.com/pearlsbeforeswine/2011/07/11

astrofinch 15y ago

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

deleted 15y ago

[deleted]

krashidov 15y ago

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

kaichanvong 15y ago

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

southpolesteve 15y ago
Yes. This and using Gaurd for a number of other things. For my rails work flow, I don't really see the need for this product.
andreyvit 15y ago
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.

apalmblad 15y ago

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 15y ago
"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 15y ago
  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.
tghw 15y ago
Officially speaking, we don't support the dev channel. It just isn't feasible. That said, if you could send us a bug report at webputty@fogcreek.com or via https://webputty.fogbugz.com/?pg=pgPublicEdit https://webputty.fogbugz.com/?pg=pgPublicEdit we'll take a look and see what we can do. If you want to host it yourself, you can use WebPutty to edit it, and then use the export link (page with a green arrow coming out of it) to get out the compiled CSS.
- apalmblad 15y ago
  Seems fixed now. If you did something, thanks. If not, please accept my apologies for a waste of time.

calloc 15y ago

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

aneth 15y ago
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.

dolinsky 15y ago

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.

palish 15y ago
You should edit your post to include reasons why WebPutty is "a bad thing". (I have no idea; I'm a gamedev guy, but I find webdev very interesting. It's hard to know what to avoid and what to embrace when you're new.)
- dolinsky 15y ago
  I'd be happy to include an edw519-style bulleted list of why webputty is 'a bad thing', but I guess it depends upon who their target audience is for this product. If they're targeting someone who is used to ssh'ing into their account on their shared hosting company and editing their css 'live', then yes, I think this product provides a benefit to that user. Any site I've ever worked on I've always had atleast 2 environments, a local environment and a live environment. Any company I've ever been a part of has had at least 3 environments (sandbox/qa/live) and it's very common to have a dev and staging environment on top of those as well. The reason you have a minimum of 2 environments is so that you can do all of your testing without breaking the live environment, which is what this tool seems to ignore.
  - dsmithn 15y ago

patio11 15y ago

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...

deleted 15y ago
[deleted]
shii 15y ago
We do, please.
euroclydon 15y ago
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 15y ago
  Instead of specifying http://example.com/foo.png http://example.com/foo.png or https://example.com/foo.png 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 15y ago
    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-urls-to-switch-between-http-and-https/ http://blog.httpwatch.com/2010/02/10/using-protocol-relative... ...and the unfortunately double-loading bug for CSS files in IE7/8 here: http://www.stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/ http://www.stevesouders.com/blog/2010/02/10/5a-missing-schem...

justhw 15y ago

what if I need to add a div?

adolph 15y ago
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 15y ago
  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.

deleted 15y ago

[deleted]

jwdunne 15y ago

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 15y ago
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 15y ago
  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 :)

ChrisArchitect 15y ago

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

tghw 15y ago
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 :)

Fzznik 15y ago

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 15y ago
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 15y ago
  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 15y ago
    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).

marcf 15y ago

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 http://en.wikipedia.org/wiki/Source_Code_Control_System

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

figital 15y ago

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

Flam 15y ago

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_firebuglike_wysiwyg_htmlcss_editoride/ http://www.reddit.com/r/webdev/comments/itqy1/is_there_a_fir...

swah 15y ago

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.

plasma 15y ago

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.

cfinke 15y ago

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 15y ago
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.

SeoxyS 15y ago

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/ 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 15y ago
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 15y ago
  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.

DTrejo 15y ago

http://aboutcode.net/vogue/ 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/ 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.

josscrowcroft 15y ago

AMAZING!

richardofyork 15y ago

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.

ehc 15y ago

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 15y ago
To be fair, nor is this. We use CodeMirror (http://codemirror.net 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".

lovskogen 15y ago

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

kang 15y ago

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

ctek 15y ago

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 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.

vog 15y ago

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 15y ago
Link to WMII, to get an impression: http://wmii.suckless.org/ http://wmii.suckless.org/

pbhjpbhj 15y ago

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.

philc 15y ago

I wrote LiveCSS for this purpose. https://github.com/ooyala/livecss 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.