CSSDeck Codecasts: Learn HTML5, CSS3, Javascript in a new way | Hacker News Reader

CSSDeck Codecasts: Learn HTML5, CSS3, Javascript in a new way

cssdeck.com

45 pointsluzon1911 comments

I think it's a great way for get a non-programmer interested very quickly, but I personally was quite turned off when I clicked on the "realistic physics" based bouncing ball module and found that the ball doesn't actually stop bouncing, EVER.

The problem occurs in the following code:

if(ball.y + ball.radius > H) { // First, reposition the ball on top of the floor and then bounce it! ball.y = H - ball.radius; ball.vy *= -bounceFactor; // The bounceFactor variable that we created decides the elasticity or how elastic the collision will be. If it's 1, then the collision will be perfectly elastic. If 0, then it will be inelastic. }

Basically, when the ball hits the ground (the collision check), it should no longer be receiving a gravity modifier as it's "on the ground". Additionally, because there's a user set velocity variable, there needs to be a check against the crest of bounce to slowly reduce that variable down to 0 so the ball will stay stationary.

Call me a stickler, but seeing a "physics" demo no matter how loosely it's based get stuck in an infinite bounce just rubs me the wrong way.

Btw, I know these are user created, but if you're going to showcase it, you should check these for bugs.

I would love to see a modularize Javascript app recorded in this manner that uses the DOM. Maybe a mini 4x4 minecraft game. As someone trying to teach himself , watching the order in which the developer writes would be really enlightening. Regardless, this is a great site.

I think this is a great new feature to an already impressive site. I find myself coming back to CSSDeck for bits and pieces of code very routinely.

Looks cool, but is it really any different from CodePlayer? http://thecodeplayer.com/

Yes it's different because there is different content on each website, so it's still useful?

Indeed they are very similar. Thanks for sharing, though CSSDeck seems to have more samples. Have been procrastinating on learning HTML5/CSS3, this would be great place to start.

After watching one of the videos, I mentally started clapping! Really amazing! And both the site and the editor are uncluttered.

A bit OT but what tool did they use to do the deck? Looks gorgeous with the 3D CSS transitions.

I like the site. However I do wish there were more CSS Design/layout techniques.

In case anyone else is missing this, when one of the demos first loads -> ctrl+f -> "play", click it.

Reply on news.ycombinator.com