▲ | Show HN: Node.js video tutorials where you can edit and run the code | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
252 points by somebee 2 days ago | 84 comments | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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: 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! | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | remisharrock a day ago | parent | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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 https://scholar.google.com/citations?view_op=view_citation&h... I also have a taskgrader to grade student's codes : Teaching C Programming Interactively at Scale Using Taskgrader: an Open-source Autograder Tool https://scholar.google.com/citations?view_op=view_citation&h... | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | seansh 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | kamikazeturtles 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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? | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | porsager 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | trundle-drit 18 hours ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Awesome, always wanted something like this! Do you have any plans for open source (beyond Imba)? I think it would be worth it, for the sake of education, and growing a community. And personally I really only want to get invested in using tech that has some open source "peace of mind", even if I do pay for it (e.g. supabase, posthog). Although I understand open source is challenging for a business when you're trying to make a living. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | tomw1808 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | hairama 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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? | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | lud_lite a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Scrimba taught me React back in 2021. I recently checked if there was a Go course there, but sadly not. However with this announcement hopefully soon. Why I like Scrimba? The lesson style that forces you to use a blank Page on each exercise means you develop memory for the language. Even more of a plus post LLMs IMO. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | nozzlegear 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | rglover 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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)? | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | gavinray 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | seveibar 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | ahmadrosid 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Amazing, this is much more better than learning with AI. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | setheron a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
I logged in but I am not sure how to add video to a "Scrim". I'd love to create some Nix (https://nixos.org/) content. Is this possible? | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | zersiax 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | barrenko 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
This looks to be the perfect usecase to throw an agent into the loop (sorry for saying so). | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | badmonster a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Quick question: how are you handling persistent state or database access across sessions in the browser-based Node.js environment? | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | atum47 a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
There was this beautiful website that did something similar: it would type in the code and showing the result on the side. It was mostly creative JS code. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | benslv 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | stevederico a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Love scrimba. One of my all-time favorite ways to learn programming. Will check out the new course. Keep up the great work! | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | serial_dev 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | abaymado a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
This is phenomenon! I am an iOS Engineer, not sure if you ever want to bring this to mobile but I would be happy to contribute. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | hliyan 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | gitroom a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
the whole thing makes me jealous honestly - coding used to feel so much more closed off when i first started out. you think having super interactive stuff like this early on actually keeps folks coming back to learn more? | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | kirykl 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Scrimba is such a great learning tool, I’ve tried the front end material, excited to check out the new stuff | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | sam98brown a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Scrimba is fantastic and has helped me a lot | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | giancarlostoro 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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: Sharing these in the hopes they server as inspiration for anyone who works on educational programming content. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | huksley 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Supercool! Can you use any other webapp, not a code IDE? | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | MahendraDani 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
This is epic. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | thegreatpeter 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Wow. What a fascinating idea. Great work! | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | fullstackchris a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Very impressive and cool stuff! This shares similar themes to what I'm building over at https://studio.codevideo.io - I also chose to go with an event sourcing solution. I experimented with real time mouse recording but though it was overall too complex for more advanced examples, so for now I've setted with a virtual mouse that you can move from place to place to simulate how it might actually move - I'm curious, how did you solve realtime edits and highlighting directly in the editor? Are you using Monaco editor with realtime highlighting updates somehow? It's something I still haven't implemented in CodeVideo... | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | oulipo a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Really cool! You might have issues with some encoding somewhere though... https://imgur.com/a/WvFICiD | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | whiddershins a day ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
So can I just sign up and get started using it on my blog, or how does this work? | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | codybontecou 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Incredible work! | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | k0ns0l 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
+1 Great works OP! | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | nailer 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | revskill 2 days ago | parent | prev | next [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Awesome. But only JS is supported ? | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
▲ | steffoz 2 days ago | parent | prev [-] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Incredible! |