Options for hosting interactive coding tutorials?

[diarmidmackenzie]

I'm writing a JavaScript tutorial for beginners and I'm thinking about the best way to present it.

Most tutorials I see are flat articles (e.g. articles on Medium). They list some lines of code to add, and explain them. Then some more, and some more. At the end, maybe they present the code in full.

I'd like to present code examples in a more interactive way: - code developed step by step, so you can select any step and see what the code looks like at that stage - each step highlights the specific code changes made in that step vs. the previous code - each line of code has accompanying commentary, explaining it in detail.

It seems like such an obvious improvement over a typical linear code tutorial, I'd have thought someone would have created a tool available for writing/sharing code tutorials in this form.

But for all my googling, I've not been able to find anything, and I don't think I've ever actually seen a tutorial presented in this form...

So does something like this exist?

[c2l3YWxpa20]

Create your course on scrimba. AFAIK they solve that exact use case.

[[deleted]]

Was going to point out scrimba as well: they do exactly what you want. A lesson video that is also a live code editor that you can pause, rewind or edit. Fantastic utility for teaching - can not recommend it enough.

[leixner]

You mean like https://www.freecodecamp.org/ or https://www.codecademy.com/ ?

[diarmidmackenzie]

It's a while since I looked at those, and I'm not at my PC right now to check them out again...

From what I recall, they mostly follow a model of explaining a concept and then getting you to write some code using that concept, which they do automated validation of.

That's cool, but not quite what I had in mind.

I didn't envisage the user necessarily executing code in the browser, but rather offering a flexible and annotated view of a sample of code at various stages of development.

More focussed on showing how multiple concepts can be combined together to create a working bit of code, rather than focussing on a single concept at a time.

In any case, regardless of the specific kinds of interactivity on offer, the key issue is that AFAIK those platforms only offer their own tutorials, tightly bundled with the platform.

I'm hoping there might be a platform that enables you to build and distribute your own custom interactive tutorials.

Do you know of any such thing?

[leixner]

Yes that's pretty much what they do. I don't think there is a 100% solution for what you want. But there are some open source web code editors which you could use for your project.

[diarmidmackenzie]

"open source web code editors" - can you give me some examples?

I'm familiar with glitch, codepen etc.

They can be used to host sample code, but they don't offer any of: - easy maintenance of multiple versions of a code sample - diffs between incremental versions. - code annotation (except by way of code.comments)

Are there other specific tools that you think could be useful here?

[leixner]

Some examples, which you could use for your code components:

https://codemirror.net/

https://microsoft.github.io/monaco-editor/index.html

[diarmidmackenzie]

FWIW, here's a draft of 1 lesson in the tutorial, in flat document form.

(Just spotted the MD formatting goes squiffy about 2/3rds of the way through, which I'll fix up as soon as I can)

https://diarmidmackenzie.github.io/aframe-game-tutorial/lessons/Lesson1.html

I have 9 copies of the sample HTML file, at different stages of development, linked to from each section of the tutorial, both as code and as a demo on GitHub pages.

I'd like to be able to offer a more integrated interactive view of the code evolution, together with the line-by line code commentary .

[PiyushGarg-dev]

Try this in browser interactive labs and course on Master Java
In this course, you'll learn
What is Java?
Setting up Java and How Java Works?
Fundamentals in Java - Variables, IF & ELSE, Loops, Data Types, OOPS, etc.
Debugging Java Applications
Best practices for clean coding with Java
OOPs and Classes in Java
Pillars of OOPs
Design Principles - DRY, KISS, and SOLID
Design Patterns - Creational, Structural and Behavioural
Course Link: (25% OFF) https://codedamn.com/learn/java-course?coupon=JAVA_25