Impressive html5/css3 clock; no Flash. • Hacker News Board

Re: Impressive html5/css3 clock; no Flash.

#31

Post by bmelton » Wed, Oct 05, 2011, 5:18 PM UTC

k33n wrote: post #21

edd wrote: post #5

2.3MB of data for a one page site! While its pretty that is crazy big!

I wouldn't say it's crazy big. Bigger than 99% of one page sites? Sure. I've got a 50mbps connection and even with a far slower one, this would only take a few seconds to load.

It took me a couple of minutes on a 3G cellular connection.

It was worth the wait, for sure, but due to the way it rendered, I felt like I had to watch the whole thing because I didn't want to miss something neat.

It could (and should) definitely be optimized a lot, but as a proof of concept, I'm not going to quibble over file size, even if I'm negatively impacted.

Re: Impressive html5/css3 clock; no Flash.

#32

Post by dougaitken » Wed, Oct 05, 2011, 5:20 PM UTC

kinofcain wrote: post #13

Apple actually has an embarrassingly straightforward implementation of a CSS3 clock on their ipod nano page: http://www.apple.com/ipodnano/

umm where?

Re: Impressive html5/css3 clock; no Flash.

#33

Post by davidcollantes » Wed, Oct 05, 2011, 5:21 PM UTC

dougaitken wrote: post #32

kinofcain wrote: post #13

Apple actually has an embarrassingly straightforward implementation of a CSS3 clock on their ipod nano page: http://www.apple.com/ipodnano/

umm where?

Mickey Clock.

Re: Impressive html5/css3 clock; no Flash.

#34

Post by JoelSutherland » Wed, Oct 05, 2011, 5:24 PM UTC

Use your browser's zoom tool to see it up close. Most of the textures are higher-res than needed. It looks pretty good even zoomed way in.

Re: Impressive html5/css3 clock; no Flash.

#35

Post by flixic » Wed, Oct 05, 2011, 5:25 PM UTC

dougaitken wrote: post #32

kinofcain wrote: post #13

Apple actually has an embarrassingly straightforward implementation of a CSS3 clock on their ipod nano page: http://www.apple.com/ipodnano/

umm where?

The Mickey Mouse clock.

Re: Impressive html5/css3 clock; no Flash.

#36

Post by alexholehouse » Wed, Oct 05, 2011, 5:43 PM UTC

alexholehouse wrote: post #7

Could be wrong, but doesn't seem to work in Chrome under Ubuntu.

Yeah sorry - it's all good, I'm not sure what the problem was. My bad, false alarm etc. :-s

Re: Impressive html5/css3 clock; no Flash.

#37

Post by elisee » Wed, Oct 05, 2011, 5:44 PM UTC

JoelSutherland wrote: post #34

Use your browser's zoom tool to see it up close. Most of the textures are higher-res than needed. It looks pretty good even zoomed way in.

One of the stamps at the bottom means "Retina Display support". That's probably why the texture are so high-res.

Re: Impressive html5/css3 clock; no Flash.

#38

Post by malkia » Wed, Oct 05, 2011, 5:50 PM UTC

asuth wrote: post #27

edd wrote: post #5

2.3MB of data for a one page site! While its pretty that is crazy big!

this can be greatly improved (losslessly) using http://punypng.com / http://www.smushit.com/ysmush.it/ / downloadable PNG recompressing software. I tried it on several files on this site and some decreased in size by more than half.

is that better than pngcrush? http://pmt.sourceforge.net/pngcrush/

Re: Impressive html5/css3 clock; no Flash.

#39

Post by prat » Wed, Oct 05, 2011, 5:56 PM UTC

looks great! only if you could make the gears move:)

Re: Impressive html5/css3 clock; no Flash.

#40

Post by sequoia » Wed, Oct 05, 2011, 6:04 PM UTC

It seems like if you wait long enough the gears start moving. On Chrome I just saw the closed aperture for several minutes and gave up, on FF I saw the arm and pendulum moving but that's all, 'til I came back several minutes later and the gears were moving. Haven't been able to get that "gear moving" effect again tho. I think file-size/load-time is actually a problem in this case, even as an art piece, as it's taking so long to load I'm not even seeing the art.

A couple other things: the apple clock is using javascript as well, not just css3 (tho they could if they tried). This one... I didn't dig far enough to see if it's used anywhere in the clock but the hands and pendulum are just css. Remember kids, html + css + javascript != "CSS3" :)

Further, HTML5 is nice but it's being used pointlessly here: This is an "article?" HTML5 to add semantic meaning is good, using it for no reason... I don't see the point. Overall, KUDOS to the designer/developer! Extremely impressive regardless of any of this.