[HN Gopher] Show HN: Node.js video tutorials where you can edit ...
___________________________________________________________________
Show HN: Node.js video tutorials where you can edit and run the
code
Hey HN, I'm Sindre, CTO of Scrimba (YC S20). We originally
launched Scrimba to make video learning more interactive for
aspiring frontend developers. So instead of passively watching
videos, you can jump in an experiment with the code directly inside
the video player. Since launch, almost two million people have used
Scrimba to grow their skills. However, one limitation is that
we've only supported frontend code, as our interactive videos run
in the browser, whereas most of our learners want to go fullstack--
building APIs, handling auth, working with databases, and so forth.
To fix this, we spent the last 6 months integrating StackBlitz
WebContainers into Scrimba. This enables a full Node.js environment
--including a terminal, shell, npm access, and a virtual file
system--directly inside our video player. Everything runs in the
browser. Here is a 2-minute recorded demo:
https://scrimba.com/s08dpq3nom If you want to see more, feel free
to enroll into any of the seven fullstack courses we've launched so
far, on subject like Node, Next, Express, SQL, Vite, and more.
We've opened them up for Hacker News today so that you don't even
need to create an account to watch the content:
https://scrimba.com/fullstack _Other notable highlights about our
"IDE videos":_ - Based on events (code edits, cursor moves, etc)
instead of pixels - Roughly 100x smaller than traditional videos
- Recording is simple: just talk while you code - Can be embedded
in blogs, docs, or courses, like MDN does here:
https://developer.mozilla.org/en-US/curriculum/core/css-fund... -
Entirely built in Imba, a language I created myself:
https://news.ycombinator.com/item?id=28207662 We think this format
could be useful for open-source maintainers and API-focused teams
looking to create interactive docs or walkthroughs. Our videos are
already embedded by MDN, LangChain, and Coursera. If you maintain
a library or SDK and want an interactive video about it, let us
know--happy to record one for free that you can use however you
like. Would love to answer any questions or hear people's
feedback!
Author : somebee
Score : 163 points
Date : 2025-04-23 12:35 UTC (10 hours ago)
| revskill wrote:
| Awesome. But only JS is supported ?
| somebee wrote:
| Right now, only js is supported out of the box, but I guess any
| language that can run via web assembly or other techniques
| could work. WebContainers has experimental python support, but
| it won't work with a lot of the dependencies you would usually
| utilize in python etc.
| ach9l wrote:
| we should be able to use this as a vscode extension to solve
| this issue. is there an sdk to integrate this into electron
| apps?
| somebee wrote:
| We are finalizing an electron app as we speak. That will
| allow recording anything that runs on your own system
| huksley wrote:
| Supercool! Can you use any other webapp, not a code IDE?
| mrborgen wrote:
| Thanks! Not sure I fully understand -- do you mean using our
| DOM recorder on other web apps instead of our IDE? In theory,
| yes, we've used it on third-party sites in previous iterations
| of Scrimba.
|
| But there are some limitations, as certain HTML elements (like
| native dropdowns, date pickers, canvas etc) are rendered
| outside the DOM and thus can't be recorded.
| MahendraDani wrote:
| This is epic.
| kamikazeturtles wrote:
| 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 wrote:
| 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.
| ahmadrosid wrote:
| Amazing, this is much more better than learning with AI.
| hliyan wrote:
| Minor issue, Chrome on Windows: cursor position seems to have an
| offset error -- can never quite get to the end of a line. As you
| type, text doesn't quite appear where the cursor is.
| somebee wrote:
| Will try to push a fix in the next few hours. We are
| instantiating the monaco editor with a custom font (Source Code
| Pro) before we're sure the font has loaded, which throws of the
| char box measurements in monaco. We did have a fix for this in
| the old (non-backend IDE), so I'll port that over ASAP. Thanks
| for notifying us :)
| benslv wrote:
| I taught myself React using the Scrim a platform, so I feel very
| supportive and thankful to you for building it. Being able to
| directly interact with the code being shown onscreen was
| invaluable to me for understanding it.
| porsager wrote:
| 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.
| pier25 wrote:
| 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 wrote:
| 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.
| barrenko wrote:
| 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 wrote:
| It's beautiful, but note to OP it doesn't work great on
| Android Chrome for me - can only draw very very short lines.
| flanbiscuit wrote:
| 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 wrote:
| 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
| ushakov wrote:
| fun fact I learned about Imba is that it's name stands for
| "imbalance" (like in computer games!)
| ilrwbwrkhv wrote:
| Yeah, Imba is one of the greatest things that has come out of
| the JavaScript ecosystem.
|
| Unfortunately, most JavaScript developers are very sheep-like
| and can only groupthink.
|
| They will only use what they're told by influencers or they see
| others using. So that's why they will go to Next.js and React
| and all of these absolutely horribly designed frameworks.
| zersiax wrote:
| I love this idea, it would actually solve a lot of accessibility
| issues within coding courses for the fully blind. Unfortunately
| right now the scrimba interface appears to need some help where
| that is concerned. WOuld love to discuss more if you're
| interested? @somebee
| seansh wrote:
| 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
| mrborgen wrote:
| 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.
| codybontecou wrote:
| Incredible work!
| steffoz wrote:
| Incredible!
| hairama wrote:
| 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?
| mrborgen wrote:
| 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 wrote:
| 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?
| nailer wrote:
| I don't understand. If the audience member makes a change, and
| then the speakers events are played back on top of the change,
| the code won't make sense.
| TIPSIO wrote:
| Did you try it?
| mrborgen wrote:
| If you make a change, then the screencast pauses and you create
| a branch of the codebase, so that you can experiment on your
| own.
|
| Once you hit "play" again, your changes are reverted and you
| continue watching the teacher's code.
|
| So the teacher's voice is never on top of your code, as that
| wouldn't make sense.
| seveibar wrote:
| Would love to use this for interactive tscircuit tutorials! Is it
| easy to create a course? The output looks great!
|
| Is the web preview saved as a video or rendered dynamically? In
| the case of tscircuit, we run an autorouter in the background so
| it can be like a slow-loading website with a big project- I
| imagine doing courses on building games would have a similar
| problem if there isn't video capture for the preview.
| mrborgen wrote:
| Would love to see tscircuit tutorials on Scrimba! It's easy to
| record -- just talk over the code. I demo it in this scrim from
| around 1:40. https://scrimba.com/s0kmcarts1
|
| The preview is rendered live, not video. So with heavy projects
| (e.g. lots of JS animations), the recording can get large due
| to the detailed DOM stream.
| kirykl wrote:
| Scrimba is such a great learning tool, I've tried the front end
| material, excited to check out the new stuff
| thegreatpeter wrote:
| Wow. What a fascinating idea. Great work!
| barrenko wrote:
| This looks to be the perfect usecase to throw an agent into the
| loop (sorry for saying so).
| ach9l wrote:
| yep, this is not for humans, agents with dia-1.6B or anything
| similar, they will outclass humans at this, really quick. i'd
| like to work on a poc if you are interested, i train and deploy
| models for a living.
| nozzlegear wrote:
| What do you mean it's not for humans, and that agents will
| outclass humans at this? Humans like to learn new things, and
| this seems like a novel format for learning. I don't think an
| AI is ever going to "outclass" our curiosity or desire to
| learn.
| ach9l wrote:
| oh, i meant humans as teachers. if i had to choose between
| a human teaching me quantum physics equations or a
| collection of richard feynman's lessons turned into agentic
| lessons, i'd pick the agent. i mean, we can compile the
| whole collection of lessons in agentic form way faster than
| any human could deliver the same number of lessons.
|
| the product is exclusively for humans. the teacher, i'm not
| so sure.
| nozzlegear wrote:
| That makes a lot of sense, thanks for explaining.
| k0ns0l wrote:
| +1
|
| Great works OP!
| giancarlostoro wrote:
| CodeSchool used to be interactive until PluralSight bought them
| out, then pulled in all the videos, but kept none of the
| interactivity. Shame.
|
| There's also the Processing tutorial series which is insanely
| interactive:
|
| https://hello.processing.org/
|
| Sharing these in the hopes they server as inspiration for anyone
| who works on educational programming content.
| rglover wrote:
| This is wild. I'd love to use this to do a demo app for my JS
| framework, Joystick [1]. Would a collab be possible (happy to
| contribute the end result to the Scrimba library)?
|
| [1] https://cheatcode.co/joystick
| mrborgen wrote:
| Yes, we'd be happy to collaborate on creating something on
| Joystick. It looks like an awesome framework!
| rglover wrote:
| Awesome, thank you! What's a good way to get in touch?
| nozzlegear wrote:
| 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.
| serial_dev wrote:
| Will this support other languages, too? Would love to have Rust,
| Dart, Python, or basically any other language having this, even
| if it doesn't have all the features
| gavinray wrote:
| Sindre, so great to see you posting here and doing well. We met
| in the early Imba days.
|
| Over the years, I've referred many folks asking for what I
| believed to be the best resources for self-teaching web
| development to Scrimba.
|
| All the best to you & the team, I'm sure the future is bright.
| tomw1808 wrote:
| 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.
| mrborgen wrote:
| 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 :)
___________________________________________________________________
(page generated 2025-04-23 23:00 UTC)