(酷毙了)TheCodePlayer — Watch and Learn Code

转载自：http://theindustry.cc/2012/06/27/thecodeplayer-watch-and-learn-code/

中文版：http://sd.csdn.net/a/20120628/2806972.html

For me, and for a percentage of you reading this, the best way for us to learn is by watching people do, and that is, from visual experience comes practical application. An example of that is this: say, I’m in the need to fix some code on my website, or that I need a fast, easy way to learn how to implement HTML5 localstorage. What I generally do is that I search the web for tutorials and solutions, skipping articles, long text-heavy pages glancing at pictures and instead choosing decent, professional videos to learn from. From there however, the videos I watch require commentary, as the video’s quality isn’t as high-def as a real working demo. The guys behind TheCodePlayer solved that problem right, making you learn from video-style tutorials, with live, working demos— and code!

So what’s TheCodePlayer like? To start off, take a look at the website, and playback one of the tutorials. (It’s okay, I’ll wait right here). As you can see from the tutorial, or the image below, TheCodePlayer, shows a live, HTML/CSS/Javascript sandbox with a ‘playback’ option. What the playback button actually does is that it plays back keystrokes, à la typewriter text-commentary. Aside from actually writing down text commentary however, whatTheCodePlayer actually does is that it plays back code-editing, hence, “The Code Player”. It’s pretty nifty too.

In my time of using TheCodePlayer, I found some nice, good features, and a couple of the nitty-gritty details they need to work on more. Here’s a couple:

Things I Love:

• The general idea of TheCodeplayer is brilliant. The fact that you can just learn code at your own pace— at an even better learning and visual experience— is astounding. As a matter of fact, I learned a couple cool new things thanks to them.
• The live sandbox is great. It’s just as usable as Dabblet’s, JSFiddle’s and CSS Desks‘. You can quickly switch between HTML, CSS and Javascript too, and edit code with its multiple editors on the side.
• The live sandbox also supports standard HTML5 and CSS3, or even code that your browser will be able to support. It’s also a great place to tweak things around while you’re learning.
• You can literally learn at your own pace. TheCodeEditor comes with a playback slider so that you can rewind bits you want to get better at, or fast-forwards and skip across bits you’re a master with.
• Aside from that, there’s a speed option, which is great if you’re trying to learn how to do things slowly, or if you’re a quick learner, you can breeze right through it. My personal favorite is at 10x the speed.
• The tutorials themselves are great. Lots of interesting topics too, like that CSS3 Stopwatch.

Things I don’t like

• There’s not much detail placed into the site’s visual design. The design feels rushed, however the rest looks great in terms of layout and content hierarchy.
• The site is cluttered. It’s littered with social buttons, which take my eyes away from the content.

In conclusion, you should take TheCodePlayer for a spin. I learned a thing or two from that site, and currently, I’m learning how to make an HTML5 version of Snake!

Go check out TheCodePlayer, or follow the site on Twitter (@thecodeplayer).

---

Author: CJ Melegrito

Light-hearted, curious and intellectual, he is a student of all sorts. He solves problems and communicates ideas through design, writing and music. In short, he's one part student, one part writer, and one part designer.