9 ms·

The New MobileMe Login Page Has Some Badass JS

52 points by devongovett 16y ago

fictorial 16y ago
That is some pretty iCandy indeed.
brianwillis 16y ago
Doesn't work in Google Chrome for some reason. You just get a simplified version (no sparkly goodness). Anyone care to speculate why Apple made this decision, given that Safari and Chrome are both webkit based?
- jonursenbach 16y ago
  I see it just fine in 7.0.517.44.
  - pyre 16y ago
    I'm in Chromium 9.0.576.0 and it doesn't seem to work for me.
  - confuzatron 16y ago
    I'm getting no animations in 7.0.517.44.
  - elliottcarlson 16y ago
    Same here - displays fine in 7.0.517.44 - not sure if I think this is all that "badass" though...
  - jjcm 16y ago
    (All browsers are tested in Ubuntu 10.10 unless otherwise mentioned) Chrome 8.0.552.11 dev - works Chromium 7.0.517.44 (64615) - works Firefox 3.6.12 - Shows a "browser not supported" page, clicking through makes it work just fine. Did notice though that the animation only happens when the window has focus - probably a nice addition so it doesn't chomp CPU time in the background. Firefox 4.0b8pre - Fails. Blank screen. Opera 10.60 (6344) - "Browser not supported" page. Animations do not work, logo doesn't render. Seems to fail gracefully (login fields still accessible). IE6 (windows xp) - Fails. Does not degrade gracefully. IE 7.0.5730.13 (windows xp) - Different warning page than FF/Opera. Degrades gracefully, no animation. So far seems to be pretty focused on webkit browsers. No huge surprise there. What was interesting was that IE6 wasn't supported at all. There isn't even any "continue anyway" button after the "browser not supported" page.
    - archangel_one 16y ago
      Works okay for me at first in Firefox 4.0b7 - but after a few seconds of playing with the sparkles following my mouse (nearly as childish as it sounds) it abruptly stops and they vanish. No JS error reported.
  - brianwillis 16y ago
    Interesting. I deleted my cookies and saved passwords and it displays correctly.
- dtwwtd 16y ago
  I'd assume it's because Safari's JS interpreter (Nitro) is a different interpreter than Chrome's V8
FluidDjango 16y ago
Interestingly different (but still very attractive) in Opera or FF.
gnufs 16y ago
It makes CPU usage go through the roof though. However nice it's looking, I'm not sure if it's such a good idea to have such a battery life eating page as your login site.
- xtacy 16y ago
  With the push for hardware accelerated rendering, I think this CPU hog should slowly go away.
  - pmjordan 16y ago
    I don't see how they're going to hardware accelerate canvas much, unless you stick to very specific operations, i.e. never touch individual pixels. GPUs are great at splatting polygons all over the place; running arbitrary JavaScript to generate pixel values, not so much. Reading back pixel values from the rendering surface is pretty much out of the question altogether. Unless you meant the fact that WebGL seems to be taking shape, or the hardware accelerated CSS3 effects. (I doubt HTML/CSS rendering is hogging the CPU here)
kreek 16y ago
That is indeed some badass JS, but why does it send my CPU to 100% and turn both the fans on my MacBook Pro, I thought only Flash did that?
- frou_dh 16y ago
  Time for Mr Daring Fireball to release the hounds on Javascript being enabled. No, wait..
  - sudont 16y ago
    It didn't freeze my computer or stutter my mouse like Flash or a runaway ietester.exe process, despite being at the same CPU usage. (50%) Also, I'd say that this allows the browser vendor opportunity to deal with runaway scripts in a better way than the nil of control Flash gives. Good reason for a multi-process architecture as well.
    - frou_dh 16y ago
      Even without Flash installed, my Safari often locks (beachballs) for a few seconds when I'm working with a bunch of tabs, particularly when closing one. Flash is weird. I don't particularly like it for usability/security reasons, yet I haven't experienced this dire OS X performance that others always talk of.
      - tvon 16y ago
        I think you may have larger problems than Safari.
        frou_dh 16y ago
        Go on. Assuming you don't mean my mental state, it's not a gunked-up system; I'm always careful with that.
        sudont 16y ago
kristiandupont 16y ago
Sigh, soon the days where FlashBlock makes the web nice and calm (and easy on the cpu) will be gone.
- jjcm 16y ago
  I suppose you could always create a no-canvas plugin, as well as one that stops <video> and <audio> tags from playing. Sure, it wont be as simple as striping out any embeded .swf's in the page, but that's not to say it isn't possible. Where there's a demand, there will be a plugin. And hey, there's always links.
  - jeroen 16y ago
    Given the context, you probably mean Lynx. http://en.wikipedia.org/wiki/Lynx_%28web_browser%29 http://en.wikipedia.org/wiki/Lynx_%28web_browser%29
    - anon-e-moose 16y ago
      http://en.wikipedia.org/wiki/Links_%28web_browser%29 http://en.wikipedia.org/wiki/Links_%28web_browser%29 (and http://en.wikipedia.org/wiki/ELinks http://en.wikipedia.org/wiki/ELinks ) =)
mikeryan 16y ago
Looks like Apple is starting to eat its own dog food. Want flash style without Flash? Do it in JS.
ahrjay 16y ago
If by badass you mean horrible, then yes. It browser sniffs and then adds classes to the html element depending on which rendering engine, version and platform you're using. e.g. in FF 3.6 the html element has "mozilla windows v3 v3-6".
deleted 16y ago
[deleted]
city41 16y ago
In Safari (OSX), as the little balls touch an iDevice, it lights up a bit, and eventually the device is fully lit up. On Chrome (also OSX), this effect is missing.

52 points by devongovett 16y ago

That is some pretty iCandy indeed.

Doesn't work in Google Chrome for some reason. You just get a simplified version (no sparkly goodness). Anyone care to speculate why Apple made this decision, given that Safari and Chrome are both webkit based?

jonursenbach 16y ago
I see it just fine in 7.0.517.44.
- pyre 16y ago
  I'm in Chromium 9.0.576.0 and it doesn't seem to work for me.
- confuzatron 16y ago
  I'm getting no animations in 7.0.517.44.
- elliottcarlson 16y ago
  Same here - displays fine in 7.0.517.44 - not sure if I think this is all that "badass" though...
- jjcm 16y ago
  (All browsers are tested in Ubuntu 10.10 unless otherwise mentioned) Chrome 8.0.552.11 dev - works Chromium 7.0.517.44 (64615) - works Firefox 3.6.12 - Shows a "browser not supported" page, clicking through makes it work just fine. Did notice though that the animation only happens when the window has focus - probably a nice addition so it doesn't chomp CPU time in the background. Firefox 4.0b8pre - Fails. Blank screen. Opera 10.60 (6344) - "Browser not supported" page. Animations do not work, logo doesn't render. Seems to fail gracefully (login fields still accessible). IE6 (windows xp) - Fails. Does not degrade gracefully. IE 7.0.5730.13 (windows xp) - Different warning page than FF/Opera. Degrades gracefully, no animation. So far seems to be pretty focused on webkit browsers. No huge surprise there. What was interesting was that IE6 wasn't supported at all. There isn't even any "continue anyway" button after the "browser not supported" page.
  - archangel_one 16y ago
    Works okay for me at first in Firefox 4.0b7 - but after a few seconds of playing with the sparkles following my mouse (nearly as childish as it sounds) it abruptly stops and they vanish. No JS error reported.
- brianwillis 16y ago
  Interesting. I deleted my cookies and saved passwords and it displays correctly.
dtwwtd 16y ago
I'd assume it's because Safari's JS interpreter (Nitro) is a different interpreter than Chrome's V8

FluidDjango 16y ago

Interestingly different (but still very attractive) in Opera or FF.

gnufs 16y ago

It makes CPU usage go through the roof though. However nice it's looking, I'm not sure if it's such a good idea to have such a battery life eating page as your login site.

xtacy 16y ago
With the push for hardware accelerated rendering, I think this CPU hog should slowly go away.
- pmjordan 16y ago
  I don't see how they're going to hardware accelerate canvas much, unless you stick to very specific operations, i.e. never touch individual pixels. GPUs are great at splatting polygons all over the place; running arbitrary JavaScript to generate pixel values, not so much. Reading back pixel values from the rendering surface is pretty much out of the question altogether. Unless you meant the fact that WebGL seems to be taking shape, or the hardware accelerated CSS3 effects. (I doubt HTML/CSS rendering is hogging the CPU here)

kreek 16y ago

That is indeed some badass JS, but why does it send my CPU to 100% and turn both the fans on my MacBook Pro, I thought only Flash did that?

frou_dh 16y ago
Time for Mr Daring Fireball to release the hounds on Javascript being enabled. No, wait..
- sudont 16y ago
  It didn't freeze my computer or stutter my mouse like Flash or a runaway ietester.exe process, despite being at the same CPU usage. (50%) Also, I'd say that this allows the browser vendor opportunity to deal with runaway scripts in a better way than the nil of control Flash gives. Good reason for a multi-process architecture as well.
  - frou_dh 16y ago
    Even without Flash installed, my Safari often locks (beachballs) for a few seconds when I'm working with a bunch of tabs, particularly when closing one. Flash is weird. I don't particularly like it for usability/security reasons, yet I haven't experienced this dire OS X performance that others always talk of.
    - tvon 16y ago
      I think you may have larger problems than Safari.
      - frou_dh 16y ago
        Go on. Assuming you don't mean my mental state, it's not a gunked-up system; I'm always careful with that.
        sudont 16y ago

kristiandupont 16y ago

Sigh, soon the days where FlashBlock makes the web nice and calm (and easy on the cpu) will be gone.

jjcm 16y ago
I suppose you could always create a no-canvas plugin, as well as one that stops <video> and <audio> tags from playing. Sure, it wont be as simple as striping out any embeded .swf's in the page, but that's not to say it isn't possible. Where there's a demand, there will be a plugin. And hey, there's always links.
- jeroen 16y ago
  Given the context, you probably mean Lynx. http://en.wikipedia.org/wiki/Lynx_%28web_browser%29 http://en.wikipedia.org/wiki/Lynx_%28web_browser%29
  - anon-e-moose 16y ago
    http://en.wikipedia.org/wiki/Links_%28web_browser%29 http://en.wikipedia.org/wiki/Links_%28web_browser%29 (and http://en.wikipedia.org/wiki/ELinks http://en.wikipedia.org/wiki/ELinks ) =)

mikeryan 16y ago

Looks like Apple is starting to eat its own dog food. Want flash style without Flash? Do it in JS.

ahrjay 16y ago

If by badass you mean horrible, then yes. It browser sniffs and then adds classes to the html element depending on which rendering engine, version and platform you're using. e.g. in FF 3.6 the html element has "mozilla windows v3 v3-6".

deleted 16y ago

[deleted]

city41 16y ago

In Safari (OSX), as the little balls touch an iDevice, it lights up a bit, and eventually the device is fully lit up. On Chrome (also OSX), this effect is missing.