8 ms·

Copywriting and product-debate aside, that's some pretty impressive frontend presentation. From what I can tell from the minified JS, they're using Require.JS f

by btown 13y ago

Copywriting and product-debate aside, that's some pretty impressive frontend presentation. From what I can tell from the minified JS, they're using Require.JS for code organization, their own jQuery-like utility toolkit they call Apple Core, fully pre-rendered text everywhere, and javascript that plays and pauses two copies of the HTML5 video, one backwards and one forwards, shuffling their opacities for seamless transitions. Interestingly, they don't need separate videos for each transition, because the video is streamed rather than pre-buffered in its entirety. Not that Apple really cares about its bandwidth costs here, but it's an interesting strategy. The minified JS: http://images.apple.com/v/mac-pro/home/a/scripts/macpro.release.min.js http://images.apple.com/v/mac-pro/home/a/scripts/macpro.rele... And the raw video (download and play in QuickTime): http://movies.apple.com/media/us/mac-pro/2013/96614028-695e-478a-8db8-0ad1c7b42925/video/macpro_main_desktop.mp4 http://movies.apple.com/media/us/mac-pro/2013/96614028-695e-...

spydum 13y ago
I was surprised how bad it works in landscape orientation on their own ipad devices.. Alignment is wrong, scrolling is not smooth.. Overall, just bad. I could understand if I was browsing from an android platform..
- OSWJimlo 13y ago
  What the hell is wrong with you? The 'if it were android' bit just shows how completely Apple has made us expect the web to not be open. The whole fucking point of web standards is that it doesn't matter what you browse from - if they were conformed to. But no, apple violates them every which way (and gets praised for not being the shittastic company it is to boot) and fucktards like you just accept that 'sure, apple doesn't have to write standards-complient code which will work on competing devices'. People like you are directly responsible for the horrible state of the web. Every time you make a comment like this you undermine the openness of the web and further catapult us towards the dictator-state where Apple creates concentration camps for open-source software developers and, eventually, users. Do you use any open source software? SInce you have an ipad, probably not. You probably shouldn't even be on this website considering it's "hacker news", not "hipster fuckhead who has a shiny but useless tablet that leads to the fall of all hackers news". People like you are the reason I'm considering leaving this site.
  - btown 13y ago
    If not for the specific nature of the second sentence, I would be intrigued that someone had gone through the trouble of writing a cursing troll-bot for HN. But since no Turing-test-passing bot would use such language, I just feel bad for the IRL friends of this miserable human troll.
    - krichman 13y ago
      It's disappointing because I agree with the factual content, what little there is, but disagree with calling everyone a "fucktard".
  - elboru 13y ago
    Dude, I really think you're in the wrong site, for a moment I thought I was reading a YouTube comment.
  - acoyfellow 13y ago
    Your account was made 47 minutes ago. I wish I had enough karma to downvote this.
    - kgermino 13y ago
      No worries. 53 people already have. Somewhat impressive (if a bit excessive)
  - nicholassmith 13y ago
    I think this is mostly a troll, Apple 'concentration camps'? Seriously?
  - geon 13y ago
    > The 'if it were android' bit just shows how completely Apple has made us expect the web to not be open. I think it reflects more how bad Apple are at browser compatible websites, and how we expect them to suck. I have run into many issues in the iOS devcenter where it would only work in Safari. Lame.
- mmariani 13y ago
  I'm on ios 6.1.2 and everything works as smoothly as anyone would expect. What version are you running?
fourstar 13y ago
Posting minified JS is pretty useless. Open up Chrome inspector tools and use pretty print to actually read it: http://i.imgur.com/PHUaDSU.png http://i.imgur.com/PHUaDSU.png
- kanzure 13y ago
  Why would you post a screenshot of source code? I don't understand.
  - seanp2k2 13y ago
    [he was demonstrating how it looks when you "Open up Chrome inspector tools and use pretty print to actually read it" ]
- kawsper 13y ago
  The point of minified JS is for saving bandwidth, with some added (minor) obfuscation, so I don't know why you would call it useless.
  - davidwparker 13y ago
    He didn't say minified JS was useless, but "posting" minified JS is useless, since we're all going to be looking at the posted code.
- btown 13y ago
  Wow, I've done entire reverse-engineering projects (namely re-skinning Angry Birds Chrome, for one) squinting at minified JS and never knew that that was what that { } button did! Thanks!
  - csmatt 13y ago
    There are so many tools for unminifying JS, why would you squint at it in the browser?
rmnoon 13y ago
I thought it was nice too until I tried using it on Chrome on Windows. Scrolling is completely broken (have had to reload the page a few times...)
raganesh 13y ago
Some unintended consequences of playing the video backwards - when I go in reverse from slide 9 (Fan) to slide 8 (Thermal Core), the arrows indicating air flow and thermal flow are animated in reverse :-)
deleted 13y ago
[deleted]
Ygg2 13y ago
I haven't seen any video or animation on either FF or Chrome (on Win machine). Any idea what browser does it work in?
- geon 13y ago
  Probably works in Safari.
- Felix21 13y ago
  It works pretty well on chrome(linux mint 14) What do you see?
forrestthewoods 13y ago
Ugh. I think it's beyond awful. Incredibly slow and in many environments (chrome-windows) effectively non-functional. I still haven't made it to the end because of how slow and unresponsive it is.
- mimiflynn 13y ago
  I'm using Chrome on Windows and it was fast for me. Worked as expected. Might be a connection issue?
- jqueryin 13y ago
  If your machine isn't already rendering that page flawlessly, I would argue that you weren't the website's target audience. IMO, the site caters those looking for a high end performance machine; those who likely already own and are using a MBP or even an Air and want that extra performance boost. I personally went through slide by slide just to read the specs. The transitions aren't the fastest given they overrode scroll events in favor of framing and animation, but it was done so intentionally as a form of presentation.
  - alimoeeny 13y ago
    What? I am a dev, I have very good MBP, 8GB ram, running latest chrome dev version, and it is sluggish, a bit less sluggish on Safari same machine,
  - gems 13y ago
    "If your machine isn't already rendering that page flawlessly, I would argue that you weren't the website's target audience. IMO, the site caters those looking for a high end performance machine; those who likely already own and are using a MBP or even an Air and want that extra performance boost." If you don't already have a fast computer, you probably will never want a fast computer. Makes complete sense.
tech-no-logical 13y ago
pity it does nothing in opera but show the can, and I wore out my mousewheel by scrolling to slide 2 in firefox. probably just tested in safari. preaching to their own choir I guess.
- mcintyre1994 13y ago
  Android AOSP browser doesn't scroll either, and chrome on Android shows nothing. Weird since they're both WebKit.
- mistercow 13y ago
  >probably just tested in safari. preaching to their own choir I guess. I doubt they sell many Mac Pros to new customers, so it's not surprising that they wouldn't focus on making that part of the site work well for other browsers and platforms (although it did work fine under Chrome on Ubuntu for me).
gren 13y ago
If you are interested by the Bezier Curve easing, it uses a micro JS lib I wrote: http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/ http://greweb.me/2012/02/bezier-curve-based-easing-functions...
Livven 13y ago
The site is really cool but to me feels too much like a fancy Flash page of old, just made with HTML. It's simply not as effective at presenting information as a traditional, scrollable webpage, for instance you can't use your browser's in-page search to look for keywords. Also it doesn't really work in the mobile browsers I've tried (works very poorly on iOS, falls back to a normal page on Android, doesn't show anything at all on Windows Phone). A normal webpage plus a cool demo video, while certainly not as creative/innovative as this, would probably be more useful.
- coldtea 13y ago
  >The site is really cool but to me feels too much like a fancy Flash page of old, just made with HTML. It's simply not as effective at presenting information as a traditional, scrollable webpage, for instance you can't use your browser's in-page search to look for keywords. This makes the assumption that the raw details is the only information they want to convey. Communication works in many levels. The presentation (form) level is just as important. The designed this way to communicate inside the very the design of the page ideas about the exclusiveness, high-techness (sic), etc of the product. I'd say this implicit stuff is even more important to them than the actual raw information.
  - Livven 13y ago
    I don't disagree that there's this additional angle but I think that it would be better served with a separate video.
Centigonal 13y ago
No doubt the tech behind it is very cool, but, presentation-wise, it just looks like a well-made slideshow with a weird gimmick for switching slides to me. Did the right arrow button go out of style or something?

by btown 13y ago

spydum 13y ago

I was surprised how bad it works in landscape orientation on their own ipad devices.. Alignment is wrong, scrolling is not smooth.. Overall, just bad. I could understand if I was browsing from an android platform..

OSWJimlo 13y ago
What the hell is wrong with you? The 'if it were android' bit just shows how completely Apple has made us expect the web to not be open. The whole fucking point of web standards is that it doesn't matter what you browse from - if they were conformed to. But no, apple violates them every which way (and gets praised for not being the shittastic company it is to boot) and fucktards like you just accept that 'sure, apple doesn't have to write standards-complient code which will work on competing devices'. People like you are directly responsible for the horrible state of the web. Every time you make a comment like this you undermine the openness of the web and further catapult us towards the dictator-state where Apple creates concentration camps for open-source software developers and, eventually, users. Do you use any open source software? SInce you have an ipad, probably not. You probably shouldn't even be on this website considering it's "hacker news", not "hipster fuckhead who has a shiny but useless tablet that leads to the fall of all hackers news". People like you are the reason I'm considering leaving this site.
- btown 13y ago
  If not for the specific nature of the second sentence, I would be intrigued that someone had gone through the trouble of writing a cursing troll-bot for HN. But since no Turing-test-passing bot would use such language, I just feel bad for the IRL friends of this miserable human troll.
  - krichman 13y ago
    It's disappointing because I agree with the factual content, what little there is, but disagree with calling everyone a "fucktard".
- elboru 13y ago
  Dude, I really think you're in the wrong site, for a moment I thought I was reading a YouTube comment.
- acoyfellow 13y ago
  Your account was made 47 minutes ago. I wish I had enough karma to downvote this.
  - kgermino 13y ago
    No worries. 53 people already have. Somewhat impressive (if a bit excessive)
- nicholassmith 13y ago
  I think this is mostly a troll, Apple 'concentration camps'? Seriously?
- geon 13y ago
  > The 'if it were android' bit just shows how completely Apple has made us expect the web to not be open. I think it reflects more how bad Apple are at browser compatible websites, and how we expect them to suck. I have run into many issues in the iOS devcenter where it would only work in Safari. Lame.
mmariani 13y ago
I'm on ios 6.1.2 and everything works as smoothly as anyone would expect. What version are you running?

fourstar 13y ago

Posting minified JS is pretty useless. Open up Chrome inspector tools and use pretty print to actually read it: http://i.imgur.com/PHUaDSU.png http://i.imgur.com/PHUaDSU.png

kanzure 13y ago
Why would you post a screenshot of source code? I don't understand.
- seanp2k2 13y ago
  [he was demonstrating how it looks when you "Open up Chrome inspector tools and use pretty print to actually read it" ]
kawsper 13y ago
The point of minified JS is for saving bandwidth, with some added (minor) obfuscation, so I don't know why you would call it useless.
- davidwparker 13y ago
  He didn't say minified JS was useless, but "posting" minified JS is useless, since we're all going to be looking at the posted code.
btown 13y ago
Wow, I've done entire reverse-engineering projects (namely re-skinning Angry Birds Chrome, for one) squinting at minified JS and never knew that that was what that { } button did! Thanks!
- csmatt 13y ago
  There are so many tools for unminifying JS, why would you squint at it in the browser?

rmnoon 13y ago

I thought it was nice too until I tried using it on Chrome on Windows. Scrolling is completely broken (have had to reload the page a few times...)

raganesh 13y ago

Some unintended consequences of playing the video backwards - when I go in reverse from slide 9 (Fan) to slide 8 (Thermal Core), the arrows indicating air flow and thermal flow are animated in reverse :-)

deleted 13y ago

[deleted]

Ygg2 13y ago

I haven't seen any video or animation on either FF or Chrome (on Win machine). Any idea what browser does it work in?

geon 13y ago
Probably works in Safari.
Felix21 13y ago
It works pretty well on chrome(linux mint 14) What do you see?

forrestthewoods 13y ago

Ugh. I think it's beyond awful. Incredibly slow and in many environments (chrome-windows) effectively non-functional. I still haven't made it to the end because of how slow and unresponsive it is.

mimiflynn 13y ago
I'm using Chrome on Windows and it was fast for me. Worked as expected. Might be a connection issue?
jqueryin 13y ago
If your machine isn't already rendering that page flawlessly, I would argue that you weren't the website's target audience. IMO, the site caters those looking for a high end performance machine; those who likely already own and are using a MBP or even an Air and want that extra performance boost. I personally went through slide by slide just to read the specs. The transitions aren't the fastest given they overrode scroll events in favor of framing and animation, but it was done so intentionally as a form of presentation.
- alimoeeny 13y ago
  What? I am a dev, I have very good MBP, 8GB ram, running latest chrome dev version, and it is sluggish, a bit less sluggish on Safari same machine,
- gems 13y ago
  "If your machine isn't already rendering that page flawlessly, I would argue that you weren't the website's target audience. IMO, the site caters those looking for a high end performance machine; those who likely already own and are using a MBP or even an Air and want that extra performance boost." If you don't already have a fast computer, you probably will never want a fast computer. Makes complete sense.

tech-no-logical 13y ago

pity it does nothing in opera but show the can, and I wore out my mousewheel by scrolling to slide 2 in firefox. probably just tested in safari. preaching to their own choir I guess.

mcintyre1994 13y ago
Android AOSP browser doesn't scroll either, and chrome on Android shows nothing. Weird since they're both WebKit.
mistercow 13y ago
>probably just tested in safari. preaching to their own choir I guess. I doubt they sell many Mac Pros to new customers, so it's not surprising that they wouldn't focus on making that part of the site work well for other browsers and platforms (although it did work fine under Chrome on Ubuntu for me).

gren 13y ago

If you are interested by the Bezier Curve easing, it uses a micro JS lib I wrote: http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/ http://greweb.me/2012/02/bezier-curve-based-easing-functions...

Livven 13y ago

The site is really cool but to me feels too much like a fancy Flash page of old, just made with HTML. It's simply not as effective at presenting information as a traditional, scrollable webpage, for instance you can't use your browser's in-page search to look for keywords. Also it doesn't really work in the mobile browsers I've tried (works very poorly on iOS, falls back to a normal page on Android, doesn't show anything at all on Windows Phone). A normal webpage plus a cool demo video, while certainly not as creative/innovative as this, would probably be more useful.

coldtea 13y ago
>The site is really cool but to me feels too much like a fancy Flash page of old, just made with HTML. It's simply not as effective at presenting information as a traditional, scrollable webpage, for instance you can't use your browser's in-page search to look for keywords. This makes the assumption that the raw details is the only information they want to convey. Communication works in many levels. The presentation (form) level is just as important. The designed this way to communicate inside the very the design of the page ideas about the exclusiveness, high-techness (sic), etc of the product. I'd say this implicit stuff is even more important to them than the actual raw information.
- Livven 13y ago
  I don't disagree that there's this additional angle but I think that it would be better served with a separate video.

Centigonal 13y ago

No doubt the tech behind it is very cool, but, presentation-wise, it just looks like a well-made slideshow with a weird gimmick for switching slides to me. Did the right arrow button go out of style or something?