OSX Lion in CSS3 | Hacker News Reader

OSX Lion in CSS3

alessioatzeni.com

200 pointsuptown45 comments

Color me jaded, but the "excitement" about HTML5 is hardly ever about doing new things, it's about doing the same old things, but with different tools.

Almost every HTML5 demo I've seen just reproduces something we could already to with technologies that ran on the desktop years ago. We're supposed to be excited that we can now implement - barely, and extremely laboriously, and with a clunky, buggy, incompatibility-ridden toolkit - the same kinds of things desktop apps programmers have been doing for a long time.

As a web developer pushing 40, I dread seeing our profession head towards making desktop-style apps in the browser, and along way spending the next 10 years repeating the mistakes and relearning the lessons of current desktop app developers. I'm not sure I've got enough time left to stomach that.

I agree. This is just a parlor trick.

However, I disagree that we should ignore the desktop UI in the browser. It's generally better than web UIs and there is no reason that we have to repeat the mistakes desktop UIs have made the in past.

That's pretty much all we do in the computer industry, re-invent the same things over and over again.

See also: Co-operative/Pre-emptive multitasking , thin-client/thick-client , single user / multiuser and native / virtualised.

It bugs me that this is labeled "in CSS3". The only CSS3 here is some gradients and transitions. It uses plenty of images and Javascript.

Agreed. Stick with HTML5, people. It's almost always never just "HTML5" so we know what to expect. Labeling this as CSS3 is much more misleading.

A bit of CSS3 and three JS libraries: http://i.imgur.com/aQDg1.png

"I'm sorry to inform you that your browser sucks!"

If the message had been, uhm, polite, i would maybe have considered opening another browser to look at it in.

I mean. Is it too much to expect just a little more class than that?

EDIT: Now i tried it in Chrome since it was open. No error message, but logon doesn't work. Honestly, i'm not impressed.

You have to click the mouse - hitting 'enter' doesn't work.

It's impressive, if laggy, in ffx12.

For that matter, adding Chrome Frame support wouldn't be too hard (assuming the "sucking" browser was IE).

Am I missing something here? All I see are five boxes you can drag around with javascript which have some buttons and menus that don't do anything.

The only thing you're missing is the time you spent trying to see if it did more.

In Chrome after the "login" I get a bunch of open windows that I can't close and no dock. Is that how it's supposed to be?

I think this is all that it's it, but this is a very good job.

It's quite nice and responsive. Not as fast as the native UI obviously, but that was expectable (btw. my MacBook Air boots faster ;)).

Small improvement: Log me in on hitting Return.

Very cool.

But one question from a JS/CSS noob: there seems to be a rash of people doing a lot of things in pure CSS. Is this more for fun and as an experiment, or is there an actual technological reason to do it strictly through CSS? Is pure CSS the way things are heading, or is using javascript the real way to do things?

A few people who are (overly, in my opinion) concerned about their privacy and security don't have Javascript enabled in their browser, so stuff that requires it wont work.

Thats the only real reason I can see for trying to do as much in CSS3 as possible other than just for the challenge.

Turning Javascript off (or at least manually whitelisting via NoScript) also can give a quite big performance boost, by simply turning off many useless effects.

Making CPU-hungry CSS3 kind of defeats that purpose, of course.

Some CSS3 effects are implemented using the GPU, so animating using CSS can be much faster than animating using Javascript.

See the Netflix talk which has a lot of info about using GPU accelerated animations for e.g. scrolling: http://www.youtube.com/watch?v=xuMWhto62Eo

Also, as I understand it, pure CSS transitions and effects are often much faster than using javascript.

CSS animations and graphic jobs can be hardware accelerated, so it's way faster and doesn't affect the performance of the browser. There was an article posted here on HN about this exact topic, comparing animations in JavaScript vs CSS. I'm sorry I can't find it :(

It is certainly valuable to do stuff in CSS instead of Javascript to a certain degree. Especially the small gimmicks that add a little visual touch but isn't part of your core functionality. E.g. some CSS3 transition animations. Doing stuff in JavaScript is slower and more error prone.

The recent trend of trying to do everything in only CSS3 without Javascript is mostly a challenge for the developer and some of that stuff serves no actual value. For example, many people have been doing some icons with CSS3, by creating a bazillion elements in the DOM tree and adding CSS3 styles. That serves no practical purpose whatsoever, since the HTML+CSS required probably takes more space than the image it's replacing and is very slow to process and render for the browser.

CSS can be used to do practical icons and buttons, though. Instead of trying to create a pixel perfect replica of a bitmap, you can do pretty nice icons by using a nice unicode symbol (or text), and put some rounded corners, a neat gradient and a drop shadow.

If only people would stop using absolute pixel sizes in their CSS stylesheets, we could get pretty nice scalable (as in screen size) Web UI's.

A few very slick transitions - it's a little irritating that the font sizes, window borders, drop shadows, hover states on close/minimize buttons, etc are all slightly wrong though.

It seems to eat the cursor for me on a development chrome (18.0.1010.0 dev / Mac)

Same problem here. It showed up again after Command + Tabbing out of Chrome and switching back in. It's humorous that the custom cursor fails in the one case where it's identical to my default cursor.

I don't see why it didn't work in Chrome. I'm using Chromium 18 (Developer Build) and it worked just fine.

Pressing [ENTER] on password textbox didn't go so well, but you can use the mouse and hit the arrow.

And then it works great.

Can anyone explain to me why I see a yellow or red checkered pattern when my computer or browser is struggling to render a page? I tried to take a screenshot, but this usually happens super fast and I can't react in time.

I'm on a MacBook Pro and running Chrome (although I get the checkered yellow pattern in other applications like iTunes as well).

Sounds like rendering artifacts from an overheating graphics card.

Well this is pretty neat. Reminds me of the old PSP portals that people used to make for homebrew back in the day. They'd emulate Windows and Ubuntu and everything in between.

I would just open this up full-screen on someone's laptop and watch the magic unfurl. A little more JS and you could have an awesome copy of Lion in the browser.

Impressive, especially the menu bar after login.

Is there any JS code involved in dragging windows? From the code, I could see JQuery UI is being used. So, its like OSX Lion in CSS3+JavaScript.

Nevertheless, a commendable effort.

From the blogg entry he says: "I use javascript only for the clock and the jQuery UI Draggable library to have a draggable windows."

Details from his blog: http://www.alessioatzeni.com/blog/mac-os-x-lion-with-css3/

Very cool demo.

Add this to full screen mode and you've got the makings of a crazy OSX fake-out scam.

Doesn't do anything on an iPad.

Looks fine on iPhone. Windows don't drag (obviously). http://twitter.com/mike_critz/statuses/161238575835394048

Pretty good start. Nice job.

doesnt work for me, type password 'admin' but desktop doesn't load

same here

you may have to press the arrow button

it doesn't work with chrome I had to use firefox

have to click the login button - works for me in chrome

You need to click on the arrow icon or the logo. It's buggy as hell. Click Help then all the windowing system is gone south. I found major bugs after playing with it for 2 minutes. Why hasnn't the author spent at least that amount of time to test it before putting it in the wild? It's mostly javascript btw. So the title of the article is wrong.

"Click Help then all the windowing system is gone south."

That's a fairly faithful emulation, actually...

Really cool, though it makes WebKit very slow and unresponsive, despite the fact it's built with CSS3 & Javascript.

No surprises: it works in Safari, the irony being that its Safari on a hackintosh zooming along just fine on a scuzzy little netbook -- which is even cooler. Or not, depending on how you view these things.

Very cool, mate.

I have done something similar but based on Vista : vidshome.com

Reply on news.ycombinator.com