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.
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.
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.
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.
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.
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?
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.
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.
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
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.
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.
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.
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.
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 :)
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.
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.
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?
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)?
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.
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.
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.
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
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.
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.
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.
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?
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.
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
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.
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.
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 :)
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.
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...
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
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.
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.
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.
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...
https://codecast.wp.imt.fr/
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
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.
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.
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
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?
That said, our new IDE is built to easily support server-side execution down the line.
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.
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:
Some images and a preflight.css is also not foundHaven't gotten around to it yet, hope it's still relevant :P
Also its css notation is what Tailwind should have been.
Btw you're the Postgres.js author, right?
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.
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.
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.
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.
An alternative way is to embed the scrims into your own platform, and have the scrims be unlisted on Scrimba. Would that do?
“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?
[1] https://cheatcode.co/joystick
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.
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.
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.
Will check out the new course. Keep up the great work!
the product is exclusively for humans. the teacher, i'm not so sure.
We do have rudimentary Python support with the interactivity though. Planning out a course on it these days.
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.
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.
Great works OP!
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.