Show HN: Node.js video tutorials where you can edit and run the code

Scrimba is really cool. When I first got into programming, a few years ago, I tried to build something similar using rrweb but with server side code execution in docker containers so that it could support all the programming languages like replit.

When I first heard about Scrimba, I abandoned my project because I thought you guys would already go down that path. Why didn't you guys go down that route?

mrborgen · 8 months ago

Good question! Expanding from client-side JS to Node.js is our first step in that direction. We considered server-side execution for all languages but chose WebContainers instead, as it’s a better fit for us when teaching fullstack web dev, and easier to maintain.

That said, our new IDE is built to easily support server-side execution down the line.

ForOldHack · 8 months ago

It has the possibility of being really really cool, but after using it for a 5 day tutorial:

1. There is a cross dependence on the mail server: I used live.com to log in, and was stuck running in edge. I then tried my google account, and was stuck running in chrome, If I used my yahoo account, I could run in any browser. A good idea would be to mail a cookie... and then we could choose any browser, and while this was all happening, Nightly/Firefox took a major dump in many of my systems. So... I used chrome.

2. I would like to be able to mirror the code window in my favorite one of the top 3 editors: so... either I could choose a font in your system, or I have to get my other editor to use YOUR font, your spacing, your beautifier, and your color scheme. I opened three bugs in VS Code, one in a plug-in ( yes, prettier is absolute garbage, I may make a cb(1) plugin. ). I opened a bug in Sublime... Also I opened a bug in Notepad ++.

I am now forcing myself to relearn Lisp for emacs. Its really quite brilliant. I would wonder if it would all be possible to implement this all into emacs.

FYI: When I am taking jobs freelance I ask them 3 questions: 1. What is your tool chain? 2. What editor are most of your engineers using? 3. What is the best font for programming?

I have not used Roboto, but now am forced to do it. My favorite font is Arial Narrow, mono-spaced.

As for the highlighting colors, How hard would be a preferences export for VS Code/Zed/Notepad++/emacs to match your color screen so... ( paper balls loaded and ready )...

"What you code is what you get."

And lastly... why is WSL2 so broken? and why is syncing between containers so evilly difficult. The Alpine community has been a great help.

remisharrock · 8 months ago

Actually I have a new version of codecast doing that ! (See my post a minutes back in that thread)

Imba is probably one of the best kept web development secrets! Sindre has done a remarkable job of making an insanely terse while powerfull language for building web applications. Not that it's limited to web applications only, the syntax translates perfectly for any other area as well.

The fact that a platform like Scrimba was built using this language and probably only a handfull developers should make you want to learn from someone like that even more!

It's also the only learning platform I've ever recommended where I see people staying and learning more.

flanbiscuit · 8 months ago

Something seems to be broken in the Imba website for me in both FF and Chrome for MacOS.

When I go to the main website: https://imba.io/

Then click on the "Demo" button

I get taken to the "Playground": https://imba.io/try/examples/apps/playground/app.imba

There is no code on the page but the preview seems to work. Same thing with all of the other examples. They work in the Preview panel, but no code loads at all.

Looking in the dev console I see a few errors:

   GET https://imba.io/monaco/min/vs/loader.js HTTP/1.1 404 Not Found

   Uncaught ReferenceError: require is not defined
  
   current file did set undefined

Some images and a preflight.css is also not found

gizzlon · 8 months ago

There's a free Scribe course on Imba: https://scrimba.com/learn-imba-c01h

Haven't gotten around to it yet, hope it's still relevant :P

trafnar · 8 months ago

It's still relevant, the language hasn't changed much since I made this course.

barrenko · 8 months ago

Not sure of how much help is it to OP, but I'd also like to commend Imba's front page paint demo, it's just so neat.

evnp · 8 months ago

It's beautiful, but note to OP it doesn't work great on Android Chrome for me - can only draw very very short lines.

pier25 · 8 months ago

I'm hoping Imba will get more attention with the upcoming v2 release. It has tons of cool ideas and the "no reactivity" state paradigm is so much easier to reason about.

Also its css notation is what Tailwind should have been.

Btw you're the Postgres.js author, right?

porsager · 8 months ago

It's got all the right decision for the scope it's covering!

Yeah, I'm the author of Postgres.js, although it hasn't gotten the tlc it deserved lately cause I've been too busy with another soon to be public project.

ushakov · 8 months ago

fun fact I learned about Imba is that it's name stands for "imbalance" (like in computer games!)

ilrwbwrkhv · 8 months ago

[flagged]

dang · 8 months ago

Could you please stop posting shallow dismissals and putdowns? We've asked you this many times, and if you keep it up we'll end up having to ban you.

https://news.ycombinator.com/newsguidelines.html

seansh · 8 months ago

This looks fantastic! I’ve been seeing a growing number of tools trying to bring more interactivity to programming tutorials and for good reason. Screencasts are too passive, and it’s easy to get lost halfway through. Books and blogs don’t really show how code evolves over time either.

I’m working on a solution too, called CodeMic [1] where instead of bringing the environment to the web, it brings video and workspace sync into the IDE so viewers can follow along directly inside their own editor.

You’ve done an impressive job integrating everything, including the Console for example, that’s especially tricky to pull off in an extension for VSCode, Emacs, or Vim.

[1] https://CodeMic.io

jasonjmcghee · 8 months ago

Interactivity and liveness in programming deserves to be discussed far more often than it is on front-page of hacker news, but excited there are multiple ongoing threads!

I'm a very strong supporter of interactive blogposts as well. Obviously https://ciechanow.ski/ is leader here - being able to mess with something to build intuition is huge.

Agreed. ciechanow.ski has been a huge inspiration, as well as 3blue1brown, Bret Victor, and Chris Granger (remember Light Table?). But none of them provide a way to walk through thousands of lines of real code and show how it is built and evolves over time. That is the key problem Scrimba and CodeMic are trying to solve.

The two people I have seen who really master this are Robert Nystrom (Crafting Interpreters) and Casey Muratori (Handmade Hero). But even they are limited by the mediums they use: books and videos, which are not ideal for this kind of guided exploration.

oulipo · 8 months ago

you should check what Bret Victor https://worrydream.com/ is doing at Dynamicland https://dynamicland.org/2024/Intro/

CodeMic looks very cool, well done! A lot of people have asked us over the years whether we they can implement Scrimba into their preferred IDE, so it makes total sense to take that approach as well.

kamikazeturtles · 8 months ago

We also created a while back codecast for my courses in c programming. I also have Linux running entirely in the browser. And the c programming language "running" fully in the browser. Everything in sync with your oral explanations.

The courses :

https://www.coursera.org/specializations/c-programming-linux

https://www.edx.org/certificates/professional-certificate/da...

I wrote a few papers to explain:

CODECAST: An Innovative Technology to Facilitate Teaching and Learning Computer Programming in a C Language Online Course

https://scholar.google.com/citations?view_op=view_citation&h...

WebLinux: a scalable in-browser and client-side Linux and IDE

I also have a taskgrader to grade student's codes :

Teaching C Programming Interactively at Scale Using Taskgrader: an Open-source Autograder Tool

https://codecast.wp.imt.fr/

This is very interesting, but ran into some weird problems. Was using FireFox nightly, until it decided that ALL MY RAM ARE BELONG TO US... ( two 8G processes ) so switched to Chrome, and could not log into a hotmail address to confirm. So... on to Edge... which confirmed the email, got me back to the video... and it had saved both a bug, and I cannot edit the bug. The cursor has both delete and placement problems. Its a good idea, but supporting multiple browsers... and being beat up my both Microsoft and Mozilla I will start again tomorrow with just Chrome...

I have installed VS Code, and now am going to get node.js running, so I can try all the examples.

I am an educator, but for Young STEM. This may be like the final step for some kids... I want to use it to learn Javascript so I can teach it.

Sorry, I meant FIRST step for some kids.

hairama · 8 months ago

At the end of 2023 Sony & Steam informed me that I spent hundreds of hours playing games.

“Hundreds of hours?!? With that much time I could learn to play the piano or speak Spanish! Hell, I could learn to code!”

I stumbled across Scrimba on a Reddit thread and signed up for the paid version after a few lessons: it was unlike anything I had tried in the past.

Now I’m able to build basic react apps but I have a much better understanding of what’s going on “under the hood”.

Have you thought about using it to introduce new hires to a codebase?

Very glad to hear that! Yes, we’re working on a desktop app (currently in alpha) that lets you record Scrimba screencasts of local codebases. It’ll be perfect for onboarding, and since it runs on your own machine, it can support any language.

sylens · 8 months ago

Would love to see a blog post about your journey if you wrote one (or are planning to). Other resources used, key lessons along the way, etc. Scrimba looks great but surely there has to be a point where you take off the training wheels, right?

tomw1808 · 8 months ago

That is AWESOME! I am wondering, are you creating all the content yourself?

I am doing plenty of courses across different platforms, from udemy to teachable selfhosting etc. They all lack the interactivity. I am currently hosting the code samples myself and basically redirect students there, where they can interact.

But scrimba is another league!

If you open this up similar to how udemy just hosts videos and does revenue share, count me in. With the webcontainers, the sky is the limit and beyond.

We currently create the courses ourselves, but would love to see if there’s an opportunity for a collab here. Please send me an email at per@scrimba.com :)

nozzlegear · 8 months ago

I'm trying to find more information about creating videos/courses with Scrimba, but most of the info on your website is geared toward consuming content. I see that it's possible to create a new course, but is it possible to create one that's private/limited access? My usecase is recording a course with a tool like this and selling it as the video part of premium course materials for my clients.

Technically, there are ways to do that, though it's not a core use-case for us, which is why we're not pushing it.

An alternative way is to embed the scrims into your own platform, and have the scrims be unlisted on Scrimba. Would that do?