Are videos really the best tool for the job of educating coders? | Hacker News Reader

Are videos really the best tool for the job of educating coders?

40 pointssamerbuna44 comments

Hello,

I've been hacking on a new tool for teaching JavaScript. The main idea is, instead of using videos or articles to explain concepts, I used just audio that's matched with an in-browser editor. I used time cues from the audio to programmatically change the content of the editor and execute code. After each session, a challenge with code assertions can be used to validate what was learned.

Here's a demo (using a basic React example): http://jscomplete.com/interactive-learning-demo/

I'd love to hear what you think of this idea and educational delivery format.

Thanks!

https://edgecoders.com/are-videos-really-the-best-tool-for-the-job-of-educating-coders-e550a3be54a1

View on HN

Can't speak for everyone, but personally I absolutely hate having to trawl through audiovisual format for learning anything, and coding is particularly bad.

It's just so damn slow. I can read and absorb information about 5x faster than I can watch a video. That leads me to feel a lot like the video's just wasting my time.

On occasion I've even considered sending tutorial videos to a transcription service.

So - personally, I much prefer a textual alternative. But I know some people like video.

Given you are doing video-like things, please make sure they're as tightly edited as possible. Really tightly-edited audiovisual content is a lot more tolerable. There's very little more annoying than a two-hour-long, rambling tutorial that could have gotten to the point in 12 minutes.

I am more of a visual learner but I completely agree about tightly-edited content. When I record video courses, I spend most of my time editing and rephrasing to make it shorter.

You also cannot search a video or audio. That's a huge disadvantage in my eyes: often enough, I know exactly what I am looking for, and if you don't explain the exact concept I want to learn, I don't want to sit through because I can't search or skim the text.

I'm working to combine the technologies of spectrograms and photo-reading to be able to quickly skim any audio or video. Though, by the time I'm done it will probably be trivial to just use speech recognition

I'm a co-founder at https://www.dailydrip.com and we produce 2 screencasts per week in each topic (5 minutes a day, 5 days a week, 3 times it's just text), but we always provide a full text script for the video screencasts for those that prefer just learning via text. Also: search, as mentioned.

That's marvelous, and more or less the perfect solution.

Totally agree with you, I can't stand video for knowledge acquisition, most of the time it's too slow, sometime too fast, you can't search, you can't easily refer to something later. It's quite similar to classrooms in a way, without being able to ask questions...

Try this for your next video lecture: https://chrome.google.com/webstore/detail/video-speed-contro...

You can make even the most boring/slow presenter sound peppy.

I fall in the same category. And as another commenter has replied, search is a plus for textual alternatives.

But I am sure there is a majority of learners who prefer video/audio medium ( given the vast amount of video tutorials out there ) . If anyone reading this falls in that category, why do you prefer it? Genuinely interested.

I prefer it because it moves through my linguistic centers which, for me, is good for learning. The best learning strategies activate visual, auditory, and kinesthetic.

I prefer video tutorials, but only when the instructor is aware of and takes advantage of the visual medium. It's just that the visual component of over 90% of coding videos is little more than watching someone type text into an IDE, editor, etc. Casters just often completely neglect the visual component by relegating it into static, monochromatic diagrams and flowcharts or at best a digital whiteboard. I don't need to see an instructor actually type out the code or make some barely legible scribbles. I already have the code!

Videos that effectively engage you visually are very powerful learning tools. For example, back when I was learning sorting algorithms, I was having trouble understanding merge-sort. I read about it in numerous texts, and I could implement it, but only because I had memorized the coding pattern. Then, I came across this video:

https://www.youtube.com/watch?v=INHF_5RIxTE

and in an instant it all made sense. Doing it well takes time, preparation, creativity, and often times a bit of resources. The youtube series Kurzgesagt – In a Nutshell does an excellent job of engaging you visually and I wish more online coding tutorials would adapt some of their techniques.

But, it's rare to find that so I when learning a new topic, I'll generally inhale a book or two on the topic.

Yes, agreed.

If I'm watching a video tutorial from someone who understands the medium and is using it to its full advantage (including understanding editing and visualisation) that's a different story.

But - speaking as a former filmmaker - I know that doing something like that is neither quick nor cheap. It's "I wrote you a long letter because I didn't have time to write a short one" x1000.

Generally I completely agree with you, but sometimes being forced to go slowly makes you absorb it more. It's a bit like making notes on a text as you go through it.

Hopeless for reference, though, obviously.

I feel the same. For the same reason given a new topic I start with the video tutorials and then dive into the text.

"How long is a rope?"

Some people learn better from video. I've never heard a programmer claim that they were one of those people, but it's surely possible. But consider all the text you deal with on a daily basis and why you use it.

Can you imagine a man-page-as-video: "You can type dash capital A to list all entries except for the current and parent directories. This is always true for root anyway."? That'd be hellish. Did they already get to the part about how to display inodes or do I have to wait for it? Wait, what was that bit about the recursion? In short, you can't search through video or instantly go back a sentence with a flick of your eyeballs.

Well, that's exactly how I feel about videos trying to teach me how to install something. I can't trivially skip past the part where they discuss the differences between RedHat and Debian. I can't go back. If my ears are tired, I can't adjust the "contrast" to make it easier to listen to (although I suppose some video players have audio compressors/expanders). I can't copy and paste it into an editor to see how it works locally.

Your idea goes a long way toward addressing those problems. I could see it being great for people who prefer listening, but still want to, you know, interact with the thing they're learning. I'd vastly prefer this approach to Yet Another Youtube Video.

I know some of my friends at school like videos for learning programming, concepts at least.

I built this approach at a hackathon with a friend, it's something that enables people to teach about code by inspecting different parts of a pre-existing project: https://www.codetours.xyz/

Never took the extra time to polish it up after the hackathon, but if someone is interested I'd be happy to work together on improvements.

Wow. I think this could be incredibly useful.

I already posted to the original but thought I would chime in. I like the idea of guiding someone through some code with a narrative. Your tool is very helpful for this.

I have a similar tool but it allows the comments to be added to the code as it evolves:

https://github.com/markm208/storyteller#storyteller

The main difference being that the context of the comment is always in line with code at the point the comment is made. One other difference is that a person can add drawings and audio to their comments.

Very nice! In particular I really like how simple the file format is, e.g., https://raw.githubusercontent.com/partyparrot/GitHunt-API-co... and the "playlist" file: https://github.com/partyparrot/GitHunt-API-code-tour/blob/ma...

Back in the mid 90s when I was taking electrical engineering courses that dealt with modeling the transistor, I found videos very valuable to review what was said in the class.

Fast forward to today, I think a great blog post with links to code and break outs of sample pieces of the code explained in the blog post do a much better job.

Hi - I only checked out the introduction, but I think you are right that this is a far superior form compared to traditional video.

I make things like this for product trainings with my company using a graphical tool (Articulate Storyline), and I think your idea and execution are both quite good.

Check out the book "ELearning and the Science of Instruction" for research-based tips on fine-tuning things you're doing.

At first glance, the visual indicators (code or box highlights) are really important and a little understated. I would make them more prominent visually.

Secondly, I would think about feedback on incorrect answers as well as hints. E.g., on section 1.1, the user may feel stuck without a clear memory of how to write Hello class. Allowing for something like "show me the next line" to get started would help learners who need more support.

Great points. Thank you!

I've been thinking about feedback on incorrect answers and providing hints when the learner is stuck. I want to try and make this dynamic based on what the learner tries. Of course there are endless possibilities there, but at least if they do something that's known to be bad, it's a good opportunity to teach them why not to do so.

I am actually learning JS, but much basic stuff. I'm using freecodecamp.

I personally prefer "type on the browser following written instructions" than videos. Pace on video is very hard to set right.

I only checked the first and second lessons, but I did like your tool! As I can type while the voice is still talking, I can move faster if i want. And listen to instructions while highlighting the part of the code on the screen felt natural.

So I think you are on to something and you can have the best of both worlds, clear instructions that stick on your brain and flexibility to follow anyone's pace.

The features I would ask:

i) allow me to click at the bar of the bottom and go back (or forward) to the part of the audio that I want to read.

ii) mark at the bar the exact moment where you objectively explain the key concepts of the class (and make sure at each lesson you have one sentence that explains each concept very directly, like "render function is..").

good luck!! Sounds very promising! :)

Example

Video can be great for describing certain concepts. Like illustrating the relationship between pi and a co/sine wave. Or anything related to animation, physics, etc. in code.

Video can also be useful for learning how to setup a development environment, to show how to use developer tools in FF/Webkit, setup an Xcode project, etc. Instances where a student needs to navigate a complex UI to begin the work of actually coding.

For coding there's many problems with video. One issue is bandwidth: text can be scanned and consumed very quickly. Text can be given a hierarchical structure that a student can jump between, which makes it easier to understand complex relationships between concepts. Video is linear. Code is not. Code has a relational and web-like structure that is more accurately represented by hypertext.

What people who prefer videos wont admit is they just find it more comforting to have someone instructing them. Especially if they left an impression on them previously. It's lonelier and harder to establish a connection through blog posts so they will sit through videos instead.

Not entirely true. How would you teach a course like "Ship your 1st iOS App from Scratch". It involves lots of different things that you can't do just with Audio. Like I said, Audio-only instructions works only for simple scripting stuff like batch files, or client side scripting / coding like Javascript (which is what OP's example is in) and HTML, CSS etc.

ETL tools like Informatica, SSIS etc also need a visual, otherwise you get quickly lost. And how will the instructor do it in just audio "Oh, on left you will see a toolbox, look and locate the one that looks like a grid, but not the one that has an X on top right, also not the one that has a red cylinder icon at the bottom."

The 1 caveat I see in video instructions is that you have to constantly pause the video and code and then un-pause again, if you are following along with the coding. I get around that with the dual monitors.

I do find it more comforting to have someone instructing me, but in the context of being in a class or group of people who also are learning with me.

Hi samerbuna, jsComplete is very nice. The multi-panel interface is pretty intuitive and the COMMAND+ENTER to re-run the code works well too.

One thing about the speed control. You should consider making it a [-|spped|+] button rather than offer 1 1.25 and 1.5 as predefined options. I can usually handle audio at 2x normal speed or sometimes even more. This Chrome extension[1] is my best friend.

[1] https://chrome.google.com/webstore/detail/video-speed-contro...

Your world is very different from mine, because it would never occur to me to ask that question, much less to answer it with anything but an emphatic "no". I am fairly sure I have never learned anything about programming from a video and have trouble imagining how that would work. I am curious - who produces these videos? Where do you find them? What sorts of things do you learn from them? How do they overcome the slow pace and low information density which appear to me to be intrinsic to the medium?

> Are videos really the best tool for the job of educating coders?

In most cases, I believe they are. Let me explain why.

I checked out your React example and noticed 2 things.

1) You jumped straight into coding, whereas your audience might be at different levels / experience in their coding history.

2) Your audio-only format works well ONLY for client-side stuff like Javascript, HTML, CSS programming. It quickly falls apart if you are teaching ASP.Net, or iOS Programming, Webservices, SQL Server, Oracle, pretty much anything that involves more than just saving a file and clicking refresh in the browser.

#2 is where videos shine. If you take a look at PluralSight videos, or even Udemy coding videos, the Instructor is able to SHOW the IDE, the things you've build by going to various browser, folder locations, as well as menu options, settings etc in the IDE. How will you do such things in Audio only format? It will take a lot of words, and if the student doesn't find it then they panic. Whereas in Video they can see EXACTLY what you are doing.

What you're describing sounds very similar to how [1]Khan Academy teaches programming. Which is probably one of the best ways I've seen programming taught through a browser.

1. https://www.khanacademy.org/computing/computer-programming

This is great! I think all coding education providers should adopt a similar format.

I think your title question detracts from the real question :)

Your idea sounds like it might be quite good, just try and keep interactivity fairly often, perhaps.

I am working on a tool that allows developers to walk others through their code. It can certainly be used purely for teaching others but I think there is also value in having developers reflect on what they have done in their workflow:

https://github.com/markm208/storyteller#storyteller

Love it! glad to see other efforts in the same domain.

I love videos for learning visual things - like how to replace the fuel pump on my car.

I hate videos for non-visual things - like code.

Very cool. Polish, Package, Sell to education establishments or as training material to corporations.

Since I started learning most of the people that helped me told me RTFM sometimes it was kind of rude but I got used to it. Most of the time I read official docs, but if a project is very complex or not well documented I go with books, tutorials, videos, etc.

I'm not sure why this fad popped up with people recording themselves and overlaying this over 1/4 of the video. Why do I want to see you with a gigantic mic over your face and your cat in the background?

This is essentially the same format as Gary Bernhardt's 'Destroy All Software' screencasts, which are absolutely delightful.

I don't think video is very efficient way to educate, specially for coders, do-by-learning is very efficient I think.

I like that you included subtitles in this.

Teach me how to do interesting things in wasm.

Reply on news.ycombinator.com