CSS editor built with Cappuccino | Hacker News Reader

CSS editor built with Cappuccino

xeo-css.com

31 pointsrafaelc27 comments

I could never use such an online editor for a couple of reasons:

- CSS editing requires a lot of shifting back and forth between preview/css and code completion. A native (mac) app like CSSEdit allows you to open up a 'live preview' that instantly refreshes while you're typing your css.

- Access to your local filesystem

- Although Cappuccino makes for an 'almost-desktop-like' experience. It's still not the real deal in terms of responsiveness and gui-rendering and you can immediately feel that while using an app like this one. It's a great framework for CRM, TweetDeck-like tools, Inventory systems and the like, but not for a task that requires space, previews and immediate 1:1 response on actions.

Could anyone imagine himself using a tool like this?

You're looking at the limitations of the application itself, not the potential of it, and not the full potential of what Cappuccino is capable of.

Not to hate on Cappuccino (I'm actually a fan of the framework), but this is the most common defense of web apps that are trying to perform the same functions as native apps. There are some definite strengths here, as well as weaknesses, and it doesn't pay to ignore one while praising the other.

a) It's free! b) Their homepage clearly says it's in beta. They probably still have some features they'd like to launch.

So far in the 30 minutes I tooled around with it, I picked up a few interesting ideas for a project I'm working on to teach myself more css. In so far as I've already improved my skills, I'd say I can see myself using this tool. Dropping $40 or more for a native app like CSSEdit is probably a good idea if your work will pay for it (or if you can write it off as a tax expense), but I can't easily afford to do that every time a good app comes around.

In short, this is a decent app at the current price.

If you're an aspiring painter, you buy brushes, paper, inks, etc. If you're an aspiring CSS guru, you buy the CSS editor that makes you more productive. For me it's Vim (whoa wait... free!), for some it's Textmate, and for most it's CSS Edit. Also in CSS Edit's defense there is no better visual CSS editor, and there hasn't been one for years and years. If you're into CSS I'd reckon buying CSS Edit is the best way to go. If you're going to be into programming also, I'd say take a look into Vim, Emacs, or Textmate and never look back.

Why look back when you can look forward?

Because regardless of when the tools where created, the important thing is the quality of such tools. I'd rather go with tools that make me productive, while keeping out an eye for the new players, than to be on the cutting edge and lose some of the edge I might get from using 'older tools'

agree, this looks like the app to advertise their company. i can create the mac GUI flavor without cappucino suction

This app supports live preview. You can see it in the live application. It also supports most of the css3 features. And one this is just a beta app for collecting the response of the users. It will be improved according to the response of the users.

Needs more:

- Rounded corners

- Shadows

- Animations on hover

A poorly-designed site doesn't instill much confidence in your product when your target audience is designers.

most of the common css3 features are available in xeo css, rounded corners are attained using css rounded corners. It is available in borders tab, shadows are also there for both text and boxex. transitions and transforms are also included. I think you have not looked in to it yet. There is support for gradients with photoshop like gradient generator . There is a large collection of gradients as presets.

I find it kind of strange to restrain the rather unlimited possibilities of web pages and web apps to the small subset of interaction patterns that the OS GUI field allows - i have been way more impressed by all the slick, simple interfaces i found in web apps than by recent desktop developments. I wish the ease and beauty and possibilities of web dev would influence the desktop, rather than the other way around.

I agree trying to make desktop style apps in-browser doesn't work, but I don't think the answer is make desktop apps more like browser apps. I can't think of a browser app that I would tolerate if it was presented as a desktop one... I except a -lot- more on the desktop.

Hmm.. web apps are usually half app, half information system, which really supports help systems and stuff like that. I like the way they support me, as connected information and easily provided context is ubiquitous, while desktop apps always give me this feeling that they follow too strict rules to match stuff that probably doesnt need the framework at all..

here are a few that I use all the time…

http://githubissues.heroku.com (a desktop version of this exact app exists)

http://280slides.com/

http://picsengine.com/

It's funny because you're willing to tolerate a lot more crap on the desktop all the time. If a web app has a "loading" screen you say "IT TAKES TOO LONG" even though the desktop counterpart takes twice as long. If the web app UI becomes a bit sluggish people complain, yet desktop UIs become sluggish ALL THE TIME, and no one cares because you're used to it…

The reality is, to build a web app you can't just be at par with the desktop counter part, you have to be BETTER. It's an uphill battle, but tools like Cappuccino and even SproutCore will help, but in the end it's still up to you to make the effort to bring your app up to 120%.

"CSS Editor" toolbar icon seems to be ripped off CSSEdit.

sorry it they are the same. I just searched for an icon in the icon finder and used it. I know my designs are poor, I am not a designer, I am a developer.

dude. are you telling us you just stole artwork from somebody else's app that they charge real money for?

very, VERY not cool. if it was my app you'd stolen from, you'd be hearing from my lawyer right about now.

I did not mean to steal it dude. I just searched icon finder for css and picked a free icon from it. I am going to change it. I just made this app for developers and css beginners. Css experts wont need an app like this.

I have already changed that icon.

I am not sure if it's on purpose but the div with the text "class4" in it actually has the class set to "class3" and the div with "class3" is actually set to "class4". Also I found it unintuitive to click a selector on the left and then have to click "css editor" from the menu bar v.s. clicking/dbl clicking on the selector and seeing that dialog.

sorry that was an unnoticed mistake from my part. Thanks for pointing out about it. I will update it as soon as possible. The double clicking the selector is assigned to rename the selector.

Ignoring UI and UX issues, I think the CSS editor could be a lot more useful as a training tool if it displayed CSS statements along side live preview.

Looks like a pretty straight up ripoff of Coda, except coda is awesome and this is pretty clunky.

I am not a mac user so I dont know much about coda. I saw some screenshots of coda and made some ui controls like color picker and stepper with menu from coda.

i got a dirty big security warning from chrome. "You attempted to reach www.xeo-css.com, but instead you actually reached a server identifying itself as www.xeoscript.com."

SASS (Compass), Less support (via .js variants ?)

Reply on news.ycombinator.com