Show HN: Making of the Breaking Bad logo (CSS/SVG/JavaScript) as a Codecast

http://cssdeck.com/labs/breaking-bad-codecast

by TimPietrusky • 14 years ago

46 14 14 years ago

This is just incredible. Well done.

BMarkmann• 14 years ago

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?

luzon193• 14 years ago

This was submitted to HN some days ago. http://cssdeck.com/labs/creating-single-element-iphone-using...

undershirt• 14 years ago

Details here: http://cssdeck.com/docs/labs/codecasts

propercoil• 14 years ago

wow i'm loving it

samikc• 14 years ago

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

TimPietrusky2• 14 years ago

Thanks!

tworats2• 14 years ago

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.

luzon193• 14 years ago

https://aboutmybrowser.com please

tworats2• 14 years ago

https://aboutmybrowser.com/450321640

shabble• 14 years ago

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"?

TimPietrusky2• 14 years ago

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.

Show HN: Making of the Breaking Bad logo (CSS/SVG/JavaScript) as a Codecast

Related Stories