
Are videos really the best tool for the job of educating coders? - samerbuna
Hello,<p>I&#x27;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&#x27;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.<p>Here&#x27;s a demo (using a basic React example): http:&#x2F;&#x2F;jscomplete.com&#x2F;interactive-learning-demo&#x2F;<p>I&#x27;d love to hear what you think of this idea and educational delivery format.<p>Thanks!<p>https:&#x2F;&#x2F;edgecoders.com&#x2F;are-videos-really-the-best-tool-for-the-job-of-educating-coders-e550a3be54a1
======
thenomad
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.

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

~~~
FullMtlAlcoholc
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](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.

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

------
kstrauser
"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.

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

------
djmashko2
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/](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.

~~~
markm208
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](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.

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

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

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

------
soneca
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

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

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

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

------
ivan_ah
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...](https://chrome.google.com/webstore/detail/video-speed-
controller/nffaoalbilbmmfgbnbgppjihopabppdk)

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

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

------
hugja
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](https://www.khanacademy.org/computing/computer-programming)

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

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

------
markm208
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](https://github.com/markm208/storyteller#storyteller)

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

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

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

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

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

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

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

------
garysieling
I like that you included subtitles in this.

------
MK999
Teach me how to do interesting things in wasm.

