

Show HN: Making of the Breaking Bad logo (CSS/SVG/JavaScript) as a Codecast - TimPietrusky
http://cssdeck.com/labs/breaking-bad-codecast

======
BMarkmann
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?

~~~
luzon19
This was submitted to HN some days ago. [http://cssdeck.com/labs/creating-
single-element-iphone-using...](http://cssdeck.com/labs/creating-single-
element-iphone-using-css3)

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

~~~
TimPietrusky
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.

------
tworats
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.

~~~
luzon19
<https://aboutmybrowser.com> please

~~~
tworats
<https://aboutmybrowser.com/450321640>

~~~
luzon19
These are fine but for me, it looks like this
[https://dl.dropbox.com/u/26141789/CloudShot/shot_9112012_110...](https://dl.dropbox.com/u/26141789/CloudShot/shot_9112012_110346_pm.png)

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

~~~
xanados
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...](https://dl.dropbox.com/u/30313301/Photos/Screen%20Shot%202012-09-11%20at%209.23.55%20PM.png)

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

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

~~~
TimPietrusky
Thanks!

------
quadrahelix
This is just incredible. Well done.

------
propercoil
wow i'm loving it

