14 ms·

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

258 points by somebee 1y ago

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 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 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-fundamentals/ 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 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!

steffoz 1y ago
Incredible!
revskill 1y ago
Awesome. But only JS is supported ?
- somebee 1y ago
  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 1y ago
    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 1y ago
      We are finalizing an electron app as we speak. That will allow recording anything that runs on your own system
huksley 1y ago
Supercool! Can you use any other webapp, not a code IDE?
- mrborgen 1y ago
  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 1y ago
This is epic.
kamikazeturtles 1y ago
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 1y 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.
- remisharrock 1y ago
  Actually I have a new version of codecast doing that ! (See my post a minutes back in that thread)
- ForOldHack 1y 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.
ahmadrosid 1y ago
Amazing, this is much more better than learning with AI.
ebbflowgo 1y ago
[dead]
hliyan 1y ago
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 1y ago
  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 1y ago
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 1y ago
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 1y 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 1y 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.
- barrenko 1y 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 1y 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.
- flanbiscuit 1y 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/ https://imba.io/ Then click on the "Demo" button I get taken to the "Playground": https://imba.io/try/examples/apps/playground/app.imba 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
mkrishnan 1y ago
Very cool idea
zersiax 1y ago
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 1y 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 https://CodeMic.io
- mrborgen 1y ago
  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.
- jasonjmcghee 1y 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/ https://ciechanow.ski/ is leader here - being able to mess with something to build intuition is huge.
  - oulipo 1y ago
    you should check what Bret Victor https://worrydream.com/ https://worrydream.com/ is doing at Dynamicland https://dynamicland.org/2024/Intro/ https://dynamicland.org/2024/Intro/
    - jasonjmcghee 1y ago
      I'm a huge fan of Bret Victor and very familiar with his incredible work. The links are great (people should check them out!) Anyone who hasn't watched his famous talk from 2012 should watch it "Inventing on Principle" https://youtube.com/watch?v=PUv66718DII https://youtube.com/watch?v=PUv66718DII
codybontecou 1y ago
Incredible work!
nailer 1y ago
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 1y ago
  Did you try it?
- mrborgen 1y ago
  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.
hairama 1y 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?
- mrborgen 1y ago
  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 1y 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?
seveibar 1y ago
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 1y ago
  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 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.
deleted 1y ago
[deleted]
joeyblueee 1y ago
[dead]
kirykl 1y ago
Scrimba is such a great learning tool, I’ve tried the front end material, excited to check out the new stuff
thegreatpeter 1y ago
Wow. What a fascinating idea. Great work!
barrenko 1y ago
This looks to be the perfect usecase to throw an agent into the loop (sorry for saying so).
- ach9l 1y ago
  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 1y ago
    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 1y ago
      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 1y ago
        That makes a lot of sense, thanks for explaining.
  - deleted 1y ago
    [deleted]
k0ns0l 1y ago
+1 Great works OP!
giancarlostoro 1y ago
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/ https://hello.processing.org/ Sharing these in the hopes they server as inspiration for anyone who works on educational programming content.
rglover 1y ago
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 https://cheatcode.co/joystick
- mrborgen 1y ago
  Yes, we'd be happy to collaborate on creating something on Joystick. It looks like an awesome framework!
  - rglover 1y ago
    Awesome, thank you! What's a good way to get in touch?
    - mrborgen 1y ago
      Just send me an email at per@scrimba.com :)
nozzlegear 1y 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.
- mrborgen 1y ago
  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?
serial_dev 1y ago
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
- mrborgen 1y ago
  Once we have our desktop app ready (very soon), it'll be possible to record any language. However, the viewer then won't get the same ability to run the code, only to edit it. We do have rudimentary Python support with the interactivity though. Planning out a course on it these days.
gavinray 1y ago
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.
lucabs 1y ago
[dead]
tomw1808 1y 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.
- mrborgen 1y ago
  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 :)
setheron 1y ago
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/ https://nixos.org/) content. Is this possible?
- oulipo 1y ago
  that would be really nice!
- mrborgen 1y ago
  Here is a quick Loom on how to create a scrim: https://www.loom.com/share/1f034653a1ef4e99953cf3b9a5c367ff https://www.loom.com/share/1f034653a1ef4e99953cf3b9a5c367ff
  - setheron 1y ago
    Wow cool! Can I use this to generate Nix lessons? How do I start with Nix and not node.
atum47 1y ago
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.
- oulipo 1y ago
  Are you thinking of Processing / P5js ?
  - atum47 1y ago
    Nope, it was a really cool website. It kinda stored every key stroke while you were typing the code then play it back, on the other side of the screen you would see the changes in real time. I've asked ChatGPT but it doesn't remember that either
    - atum47 1y ago
      The Code Player - https://thecodeplayer.com/ https://thecodeplayer.com/ Just remembered.
abaymado 1y ago
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.
lud_lite 1y ago
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.
gitroom 1y ago
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?
whiddershins 1y ago
So can I just sign up and get started using it on my blog, or how does this work?
- mrborgen 1y ago
  Yes, you can! I'll record a video on how to do that with the new IDE, as it's indeed a bit unclear.
  - re-lre-l 1y ago
    Wait a minute. It's going to be possible to create my own curses with some kind of monetization attached? And not only frontend in future? Would be amazing.
- mrborgen 1y ago
  Here is a Loom on how to record a scrim: https://www.loom.com/share/1f034653a1ef4e99953cf3b9a5c367ff https://www.loom.com/share/1f034653a1ef4e99953cf3b9a5c367ff
badmonster 1y ago
Quick question: how are you handling persistent state or database access across sessions in the browser-based Node.js environment?
stevederico 1y ago
Love scrimba. One of my all-time favorite ways to learn programming. Will check out the new course. Keep up the great work!
oulipo 1y ago
Really cool! You might have issues with some encoding somewhere though... https://imgur.com/a/WvFICiD https://imgur.com/a/WvFICiD
fullstackchris 1y ago
Very impressive and cool stuff! This shares similar themes to what I'm building over at https://studio.codevideo.io 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...
- remisharrock 1y ago
  Also you could look at how we did it with codecast, it's open source on GitHub search for codecast France ioi With mouse relative position, highlights selections of code etc
remisharrock 1y 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.coursera.org/specializations/c-programming-linux https://www.edx.org/certificates/professional-certificate/dartmouth-imtx-c-programming-with-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&hl=fr&user=tp6-hD8AAAAJ&citation_for_view=tp6-hD8AAAAJ:3fE2CSJIrl8C 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&hl=fr&user=tp6-hD8AAAAJ&citation_for_view=tp6-hD8AAAAJ:Zph67rFs4hoC 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&hl=fr&user=tp6-hD8AAAAJ&citation_for_view=tp6-hD8AAAAJ:_kc_bZDykSQC https://scholar.google.com/citations?view_op=view_citation&h... https://codecast.wp.imt.fr/ https://codecast.wp.imt.fr/
sam98brown 1y ago
Scrimba is fantastic and has helped me a lot
trundle-drit 1y ago
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.
ForOldHack 1y ago
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.
- ForOldHack 1y ago
  Sorry, I meant FIRST step for some kids.

258 points by somebee 1y ago

steffoz 1y ago

Incredible!

revskill 1y ago

Awesome. But only JS is supported ?

somebee 1y ago
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 1y ago
  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 1y ago
    We are finalizing an electron app as we speak. That will allow recording anything that runs on your own system

huksley 1y ago

Supercool! Can you use any other webapp, not a code IDE?

mrborgen 1y ago
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 1y ago

This is epic.

kamikazeturtles 1y ago

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 1y 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.
remisharrock 1y ago
Actually I have a new version of codecast doing that ! (See my post a minutes back in that thread)
ForOldHack 1y 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.

ahmadrosid 1y ago

Amazing, this is much more better than learning with AI.

ebbflowgo 1y ago

[dead]

hliyan 1y ago

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 1y ago
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 1y ago

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 1y ago

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 1y 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 1y 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.
barrenko 1y 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 1y 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.
flanbiscuit 1y 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/ https://imba.io/ Then click on the "Demo" button I get taken to the "Playground": https://imba.io/try/examples/apps/playground/app.imba 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

mkrishnan 1y ago

Very cool idea

zersiax 1y ago

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 1y 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 https://CodeMic.io

mrborgen 1y ago
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.
jasonjmcghee 1y 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/ https://ciechanow.ski/ is leader here - being able to mess with something to build intuition is huge.
- oulipo 1y ago
  you should check what Bret Victor https://worrydream.com/ https://worrydream.com/ is doing at Dynamicland https://dynamicland.org/2024/Intro/ https://dynamicland.org/2024/Intro/
  - jasonjmcghee 1y ago
    I'm a huge fan of Bret Victor and very familiar with his incredible work. The links are great (people should check them out!) Anyone who hasn't watched his famous talk from 2012 should watch it "Inventing on Principle" https://youtube.com/watch?v=PUv66718DII https://youtube.com/watch?v=PUv66718DII

codybontecou 1y ago

Incredible work!

nailer 1y ago

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 1y ago
Did you try it?
mrborgen 1y ago
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.

hairama 1y 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?

mrborgen 1y ago
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 1y 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?

seveibar 1y ago

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 1y ago
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 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.

deleted 1y ago

[deleted]

joeyblueee 1y ago

[dead]

kirykl 1y ago

Scrimba is such a great learning tool, I’ve tried the front end material, excited to check out the new stuff

thegreatpeter 1y ago

Wow. What a fascinating idea. Great work!

barrenko 1y ago

This looks to be the perfect usecase to throw an agent into the loop (sorry for saying so).

ach9l 1y ago
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 1y ago
  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 1y ago
    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 1y ago
      That makes a lot of sense, thanks for explaining.
- deleted 1y ago
  [deleted]

k0ns0l 1y ago

+1 Great works OP!

giancarlostoro 1y ago

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/ https://hello.processing.org/ Sharing these in the hopes they server as inspiration for anyone who works on educational programming content.

rglover 1y ago

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 https://cheatcode.co/joystick

mrborgen 1y ago
Yes, we'd be happy to collaborate on creating something on Joystick. It looks like an awesome framework!
- rglover 1y ago
  Awesome, thank you! What's a good way to get in touch?
  - mrborgen 1y ago
    Just send me an email at per@scrimba.com :)

nozzlegear 1y 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.

mrborgen 1y ago
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?

serial_dev 1y ago

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

mrborgen 1y ago
Once we have our desktop app ready (very soon), it'll be possible to record any language. However, the viewer then won't get the same ability to run the code, only to edit it. We do have rudimentary Python support with the interactivity though. Planning out a course on it these days.

gavinray 1y ago

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.

lucabs 1y ago

[dead]

tomw1808 1y 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.

mrborgen 1y ago
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 :)

setheron 1y ago

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/ https://nixos.org/) content. Is this possible?

oulipo 1y ago
that would be really nice!
mrborgen 1y ago
Here is a quick Loom on how to create a scrim: https://www.loom.com/share/1f034653a1ef4e99953cf3b9a5c367ff https://www.loom.com/share/1f034653a1ef4e99953cf3b9a5c367ff
- setheron 1y ago
  Wow cool! Can I use this to generate Nix lessons? How do I start with Nix and not node.

atum47 1y ago

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.

oulipo 1y ago
Are you thinking of Processing / P5js ?
- atum47 1y ago
  Nope, it was a really cool website. It kinda stored every key stroke while you were typing the code then play it back, on the other side of the screen you would see the changes in real time. I've asked ChatGPT but it doesn't remember that either
  - atum47 1y ago
    The Code Player - https://thecodeplayer.com/ https://thecodeplayer.com/ Just remembered.

abaymado 1y ago

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.

lud_lite 1y ago

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.

gitroom 1y ago

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?

whiddershins 1y ago

So can I just sign up and get started using it on my blog, or how does this work?

mrborgen 1y ago
Yes, you can! I'll record a video on how to do that with the new IDE, as it's indeed a bit unclear.
- re-lre-l 1y ago
  Wait a minute. It's going to be possible to create my own curses with some kind of monetization attached? And not only frontend in future? Would be amazing.
mrborgen 1y ago
Here is a Loom on how to record a scrim: https://www.loom.com/share/1f034653a1ef4e99953cf3b9a5c367ff https://www.loom.com/share/1f034653a1ef4e99953cf3b9a5c367ff

badmonster 1y ago

Quick question: how are you handling persistent state or database access across sessions in the browser-based Node.js environment?

stevederico 1y ago

Love scrimba. One of my all-time favorite ways to learn programming. Will check out the new course. Keep up the great work!

oulipo 1y ago

Really cool! You might have issues with some encoding somewhere though... https://imgur.com/a/WvFICiD https://imgur.com/a/WvFICiD

fullstackchris 1y ago

Very impressive and cool stuff! This shares similar themes to what I'm building over at https://studio.codevideo.io 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...

remisharrock 1y ago
Also you could look at how we did it with codecast, it's open source on GitHub search for codecast France ioi With mouse relative position, highlights selections of code etc

remisharrock 1y 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.coursera.org/specializations/c-programming-linux https://www.edx.org/certificates/professional-certificate/dartmouth-imtx-c-programming-with-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&hl=fr&user=tp6-hD8AAAAJ&citation_for_view=tp6-hD8AAAAJ:3fE2CSJIrl8C 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&hl=fr&user=tp6-hD8AAAAJ&citation_for_view=tp6-hD8AAAAJ:Zph67rFs4hoC 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&hl=fr&user=tp6-hD8AAAAJ&citation_for_view=tp6-hD8AAAAJ:_kc_bZDykSQC https://scholar.google.com/citations?view_op=view_citation&h... https://codecast.wp.imt.fr/ https://codecast.wp.imt.fr/

sam98brown 1y ago

Scrimba is fantastic and has helped me a lot

trundle-drit 1y ago

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.

ForOldHack 1y ago

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.

ForOldHack 1y ago
Sorry, I meant FIRST step for some kids.