Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Making of the Breaking Bad logo (CSS/SVG/JavaScript) as a Codecast (cssdeck.com)
46 points by TimPietrusky on Sept 11, 2012 | hide | past | favorite | 14 comments



While the Breaking Bad logo is awesome, I have to say their Codecast-ing feature is what makes it pretty cool. Is there anything else out there like this / has this feature?




I've watched a couple of these 'casts now and they're really quite informative, although I do wonder if the author constantly adding/editing comments as the main narrative/exposition method is the most instructive.

Obviously there will be things that should be commented for explanation, but it feels like it should be for more 'stable' (I'm struggling for the right term here) notes.

In contrast to a traditional presentation where you have slides + narration (which later becomes a transcript), the 2 forms of information are merged here, which muddies things a bit.

Keeping it all-text is essential; the 15x multiplier is great, and utterly impractical if you're also trying to follow a voice-over, but maybe it should be in another window, perhaps with some sort of temporal glow-highlight or visual-diff style emphasis on what's being changed, to draw those things apart.

That's all a bit cssdeck-meta though.

On this demo specifically, I'm curious why part of the behaviour was tied to the role="" attribute, and part was done with classes. Can anyone with more frontend experience than me (so, essentially everyone) suggest where you might choose one approach "foo[attr=val]" over ".foo .bar"?


I used the role-attribute as sub-styling for a parent class!

Example:

.desc // Parent class

.desc[role="top-left"] // Sub styling for parent

.desc[role="top-right"] // Sub styling for parent

But there is no specific rule to do it like this! I just don't want so many classes.


Love the codecasts (the iPhone one was very informative), but each time I go to cssdeck I struggle to find the play button. This time it was hidden under one of the code panels and I only found it after accidentally dismissing the code panel.

Making the play button more prominent and placing it in the outer chrome would make life for the new viewer easier.




These are fine but for me, it looks like this https://dl.dropbox.com/u/26141789/CloudShot/shot_9112012_110...

Is it different for you? And btw, not all experiments on cssdeck have play feature.


On my computer it also blocks the play button by default. It looks like this: https://dl.dropbox.com/u/30313301/Photos/Screen%20Shot%20201...

And this is with a completely different browser: https://aboutmybrowser.com/1498962490


Just one word... wow. This worked more than any tutorial on HTML 5 I have ever read. Very good job.


Thanks!


This is just incredible. Well done.


wow i'm loving it




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: