Live data from Hacker News

iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas

docs.google.com

31–40 of 121 posts

Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas

#31
> You can see this in action on the Retina Macbook Pro "Features" page -- which loads about 5MB of JPEG images (using lots of separate HTTP requests) just for that 2 second effect.

I immediately thought of web1.0 sites of 1990-s, with lots of animated gifs floating around. Weird times.

Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas

#32
post #26
post #6

I'm not sure if I should be impressed by this. From a technical standpoint, it seems quite clever and unique, but it also seems like a lot of work just to avoid using a tag.

Yeah it's weird. My web developer side is impressed by the technical detail that go behind it. But my other web developer side asks why the f*ck should achieving a simple video effect on a web page should be this hard in 2012? There is a whole pattern of similar things like this in web that is killing me a little bit every day. Want to center a div on the page? No worries just wrap it in these 5 divs and apply these…

What's difficult about centering a box? Was that just sarcasm? A couple of approaches:

Margin Auto w/ a fixed width

Absolute 50% w/ negative margins

Text-align center parent w/ inline-block display on children

If it was sarcasm, disregard my stupidity.

Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas

#33
Sublime Text was already doing the same with the big animation of its home page: http://www.sublimetext.com/ (you can actually see three animations there, depending if you use Windows, Linux or Mac).

What I'm really curious about is how those images are being generated. Is there a tool already available for that?

Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas

#34

Speaking of Apple website updates, I am surprised that they have never offered a responsive design for their apple.com site where you buy iPhones and iPads. Every app they make is designed differently for the phone or the iPad, but not the website.

Yeah it's surprising they don't have a mobile version of the site. (Side note, I don't see what responsive design has to do with it -- why does the technical implementation matter?) But then it occurred to me that maybe they leave it as the desktop version to emphasize how well iOS is able to view the "real" web.

Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas

#35
post #33

Sublime Text was already doing the same with the big animation of its home page: http://www.sublimetext.com/ (you can actually see three animations there, depending if you use Windows, Linux or Mac). What I'm really curious about is how those images are being generated. Is there a tool already available for that?

It doesn't look like Sublime is using the same technique as Apple, but it does look really interesting. It looks like their system allows for better reuse of images, and it is a lot simpler too. It might be less optimal though for frames with a large number of small differences, since they just use plaintext encoding for that stuff.

Sublime's example does highlight a solid usecase for this technique that Apple's example doesn't really emphasize: + JS video compression is still the only way to do this stuff losslessly, which is pretty important for what Sublime is doing.

Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas

#37
post #36

Keep in mind that Apple outsources a lot of this front-end work to their agency, TBWA/Chiat/Day Media Arts Lab. As a services firm they have less incentive to use standards created by Apple, though I think they do really great work.

I was just about to comment asking whether Apple engineers actually did this. For sure this is some cool stuff, but I think it'd be a bummer to say "I work at Apple" and then in response to "oh cool, what do you work on?" say "I work on the iPhone -webpage-"

Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas

#38
post #36

Keep in mind that Apple outsources a lot of this front-end work to their agency, TBWA/Chiat/Day Media Arts Lab. As a services firm they have less incentive to use standards created by Apple, though I think they do really great work.

I knew they did the TV commercials but this is the first I've heard that the Apple website is designed and built by anyone other than Apple's own marketing team. I find it really surprising and, to be honest, hard to believe. For one thing, there are often jobs listed in Apple marketing whose descriptions reference working on Apple.com.

Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas

#39
post #37
post #36

Keep in mind that Apple outsources a lot of this front-end work to their agency, TBWA/Chiat/Day Media Arts Lab. As a services firm they have less incentive to use standards created by Apple, though I think they do really great work.

I was just about to comment asking whether Apple engineers actually did this. For sure this is some cool stuff, but I think it'd be a bummer to say "I work at Apple" and then in response to "oh cool, what do you work on?" say "I work on the iPhone -webpage-"

Why?

I worked at Blizzard. On the Blizzard web pages.

Re: iPhone 5 web teardown: How Apple compresses video using JPEG, JSON, and canvas

#40

Speaking of Apple website updates, I am surprised that they have never offered a responsive design for their apple.com site where you buy iPhones and iPads. Every app they make is designed differently for the phone or the iPad, but not the website.

They may not have a responsive site because they want to "show off" that the iPad and iPhone browsers are powerful enough to display fancy full-size sites, along with encouraging first-time users to pinch or double tap to zoom.
Post reply on HN