1,022 karma · joined September 20, 2014
Building Custom CRM & ERP.
Building CodeMic.io: Record & share your coding sessions in your editor synced to audio/video.
Building Unforget Note Taking PWA.
https://Computing-Den.com
https://CodeMic.io
https://unforget.computing-den.com/demo
https://www.linkedin.com/in/sean-shirazi/
https://x.com/SeanShirazi
https://github.com/computing-den
sean@computing-den.com
Shahab (Sean) Shirazi
I do like YouTube video tutorials, but only as long as they're short. Watching Handmade Hero (by Casey Muratori) for example was a little frustrating: the videos are long, the codebase is large, things are moving fast, and I'd get lost.
I often wished I could pause the video to look up the definition of a function, or get an overview of when each file/line was edited and jump straight to that point.
Books/blogs are ok for explaining large codebases that already exist, but not for following a project as the code constantly changes. The book Crafting Interpreters did a really good job there, but that's really rare and hard to do.
I think CodeMic could be useful for this kind of long-form tutorials.
You may very well be right about the future. I won't argue. I just love the art of programming :)
The difference is that CodeMic records and replays inside your editor, not on the web. Currently, only VSCode is supported, but the output is independent of VSCode, making it easy to bring it to other editors and even the web.
Another difference is that CodeMic is not focused on web development or any particular stack. It's more general.
Think Asciinema, but for full coding sessions with audio, video, and images.
It makes following tutorials and understanding real codebases much more practical than watching a video.
Local first, and open source.
That's a good idea, I'll work on the overlapping video tracks.
I've been working on this for a little over 2 years and I'm very excited to share it with you and hear your thoughts.
printf("And a segfault-free year ahead! \n");I've been experimenting with this at work too. I created a separate internal git repo for the team with 4 never ending files:
- in-progress.md
- up-next.md
- for-future.md
- done.md
So far it's been easier to use than trello or any other project management platform.
Personally I use a single emacs org-mode file for my private work which is 30K lines as of today, but I'm not sure how other people's editors (vscode) handle big files like that.
While on laptop/desktop nothing beats txt (or md or org), it's just so uncomfortable using a text file like that on the phone and relying on dropbox or something.
And I get it, all the note taking apps on the phone have issues: not local first, proprietary, subscriptions, or no encryption, or a thousand features before making sure the full text search works even offline.
Last year I finally sat down and wrote my own PWA out of frustration [1]. There was a SHOW HN too [2]. Yes, shameless plug. There are only a handful of other people using it (and probably never more than that) but I really wrote it for myself and it's been such a relief the past year knowing I always have my notes whenever wherever and works exactly the way I want.
I probably spent <5h fixing a few issues in the past year. As far as I'm concerned, my problem is solved once and for all.
Frameworks and runtimes though very similar technically, are different conceptually. Frameworks dictate a structure (a framwork) for how code is written (think React components) whereas runtimes are more concerned with letting you run the code and interface with the underlying platform (think libc).
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.
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.
I'd love to hear your feedback.
I do think that our approaches are a little different and time will prove which is more effective, or perhaps both in their own ways.
For example, CodeMic aims to replace books and blogs for discussions of large codebases and showing changes to code over time, but CodeVideo seems to enhance the experience of writing books and blogs (among other things) by ensuring correctness of the code for example. There's a lot you can do there with that which I never really thought about and is out of scope for CodeMic.
If the format is open, perhaps CodeMic and CodeVideo can even import from each other.
p.s. can't disagree about the insane part, but still a lot of fun ;)
I’ve been building something similar with CodeMic [1] and found that replaying courses *inside* the IDE makes a big difference letting users immediately play with the code instead of just watching a video makes learning way more interactive. Excited to see where you take this!
It's about the guide happening inside your IDE next to your code. When the guide talks about a specific part of the code, it should be shown right there next to it. Not a small snippet of the code but the code in its proper context where you can use your IDE to dig deeper into it, see the relevant docs, change it, run it, experiment with it.
With CodeMic, the guide is synced to the code inside the IDE. It's really a different experience.
I'm hoping CodeMic will be more than tutorials and in more places than VSCode.
For example, I have a passing interest in compilers and would love to see a tour of say LuaJIT by an expert, to see its general architecture or a deep dive into some specific corner of it. Not really a tutorial, but a guided exploration.
I agree that linear code is easier to read and understand. I've noticed that often when my own code gets confusing it is because it's too nested, or too many things are happening at once, or the order of actions is not clear. After gaining a deeper understanding of the problem, rewriting it in a more linear fashion usually helps but not always possible.
I'm curious how a programming language could enable writing complex code in a linear fashion if the complexity of the code is due to the interconnected nature of all its parts. In other words, there may be no way to connect all the parts in a linear way without oversimplifying.
Of course, sometimes the complexity is incidental, that is, if I were a little smarter or spent more effort, I could reduce the complexity. But some complexity is intrinsic to the problem being solved.
The question that really fascinates me is not why code is non-linear, but why literature isn't?
I believe there are two ways to do what you want.
1. Use the VSCode extension APIs and the built-in commands[1] to write an extension that unit tests your tutorials
For example, you could use vscode.executeCodeActionProvider which will return the actions that VSCode suggests at a specific point in the file.
For the shortcuts, I think the only option would be to read user's keybindings.json file directly.
This is the easiest way I think and may be enough but generally speaking, VSCode's APIs are very restrictive and may not give you everything you need.
2. VSCode being an Electron app can be run from Playwright (similar to Selenium) which should give you full control to drive and inspect it. I haven't done this myself but apparently Playwright is used internally to test VSCode as well. So it should be possible. See [2].
The VSCode APIs [1] is the place to look for driving VSCode. Perhaps I could help more if you explain what exactly you're trying to do.
- attach a link as you said
- once the web player is ready, it could perhaps be integrated into the code review tool. It'll be like embedding a youtube video
- the entire recorded session can be exported as a zip file and attached to the PR or shared privately