

OSX Lion in CSS3 - uptown
http://www.alessioatzeni.com/mac-osx-lion-css3/

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

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

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

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

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

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

It's impressive, if laggy, in ffx12.

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

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

------
moe
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?

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

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

------
steve8918
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?

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

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

~~~
silvestrov
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>

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

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

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

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

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

~~~
pault
Sounds like rendering artifacts from an overheating graphics card.

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

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

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

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

------
mef
Very cool demo.

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

------
leviathan
Doesn't do anything on an iPad.

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

------
thedillio
Pretty good start. Nice job.

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

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

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

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

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

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

------
aDemoUzer
Very cool, mate.

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

