Revealing CSSDeck Codecasts

by Rishabh

URL: http://cssdeck.com/codecasts
Documentation: http://cssdeck.com/docs/labs/codecasts

We're launching a new feature called "codecasts" through which I think the way we learn frontend coding can be improved massively.

What exactly is "Codecasts" and How is it different ?

Well, basically you have definitely seen a lot of demos and experiments on the internet (including CSSDeck itself). But the problem is, its hard to learn from the final piece of code, since we have to spend time digging through the code ourselves. Also lack of proper commenting (especially in Javascript code) can make it really hard to learn how exactly the experiment was made successfully. Moreover, the difficulties that the creator of the amazing experiment (creation) faced were never made known, which means that we do not actually learn how to solve those problems faced, hence when we come across the same set of issues, we won't be empowered with the knowledge to find solutions quickly and easily.

Codecasts are an excellent attempt in this direction. I have made a lot of codecasts already that shows how you create something like a simple digital clock or a menu from scratch. Not only that there are also a lot of them on conceptual topics like Javascript and CSS3 basics.

The most exciting part is that, it's public, which means anyone else can also make codecasts that can help him teach his students or maybe use in workshops or help his team mates with some problems. If the codecast is really interesting, then I would love to feature it in the gallery. The process of creating is very simple:

  • Go to Labs.
  • Click the Record button.
  • Write your code in the HTML/CSS/JS codeboxes. Make sure you write a lot of comments to make sure the "watcher" follows the entire process.
  • When completed, click the Stop button. The same button can also be used to pause. You can think, wonder, go away, take a break for as much time as you want - it is not a problem and then come back, continue working on the codecast.

Anyone can then just visit that recording from the auto-generated URL and click on a play button inside a player that will playback the entire typing process in a "video" style.

I think it is best if you check out a LOT of codecasts here, then you'll exactly know what I am talking about.

Audio support is not there yet, i.e., you cannot really record your voice along with the codecast but it is something we'll will be considering in the future.

Have feedback? Let @cssdeck know on Twitter