This is very cool! I’ve wanted something like CodeMic for a long time.
Back when I was at Twitter, we used Review Board for code reviews (this was in 2009, before GH was a thing for most companies). It was tough to thoughtfully review large branches, especially for parts of the codebase that I wasn’t familiar with. I remember thinking, if I could somehow record the development process for a PR I was reviewing, it would be easier to understand what the submitter was trying to accomplish and how they went about doing so. I found myself more so reviewing code style instead of functionality, architecture, or design.
I watched most of the intro video, but didn’t go deeper on the site. Does CM integrate easily into the code review/PR process? I suppose I could just attach a link in any PR description?
Great work!
Thanks a lot! I have thought about it being useful for learning, for fun, as a new kind of documentation, or even for onboarding new hires but the use case for code review didn't occur to me. That's great. I can think of 3 ways to share sessions:
- 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
As the reviewer, I would like to annotate the replay session along the way and have those annotations available to other reviewers and the PR author.
Yeah, that would be really handy too.
Would love this for us to help us build interactive tutorials for Lowdefy, very cool. also think it is important that it exports well to youtube etc. and link back for when users want the interactivity.
Would be super if the player can be embed in docs.
I'm personally not a fan of being talked at -- I don't listen to podcasts, and I reluctantly watch talks on YouTube at 2X speed -- but I would love to see a textual version of this. Basically a pane in VS Code where you could read a nicely-formatted version of Crafting Interpreters and click to make the code changes happen. Like Lion's Commentary on Unix but "live" in the editor.
Oh dear and I thought I was the only one. Falling asleep at the lame attempts of jokes and meaningless banter watering down the interesting points, the struggle to pay attention and keep the hopes high is real. And those YouTube videos, where every presenter seems to be at least halfway dyslexic, punching a line of code in 0.005 seconds then backbackbackspace-correcting every second word in 10 seconds, I'm just dying inside... Yes I'm being nasty but those bits are completely killing the experience. I think I'll have to resort to AI to watch, cleanse and transcribe or summarize those pieces of media for me.
Even with audio/video, it's still useful to have a side pane to show some text, slides, and visual aids all synced to the timeline. I was thinking something like the markdown preview in a split screen. Also, I'm sure some prefer to write than talk so once that feature is in place, we can have any mix of audio, video, or markdown guides.
The idea and arguments behind it impressive, but I'm stuggle to understand couple of things:
- why is Doom gameplay is shown alongside recording of someone coding a player logic? Was it the developer recording the screen and narrating, explaining what he means with that line of code?
- I see appeal to "relive" your own code (so you have a mental model of problem domain and the code base in your head). But how is it supposed to work for onboarding new developers? Even in the code examples in video, how does one understands the thinking - like, what are those magic constants (dist == 200), for example? Is there audio narration or what?
Also, I believe that next year will be the true explosion of agentic code editors, so how is it gonna work here? Is it going to capture prompts in Cursor/Windsurf? Will it even be easy to follow what changes AI assistant made in bulk in multiple files. Since I switched to Windsurf, the speed and workflow is so dramatically different from that old-school person typing coding workflow.
Yes the Doom gameplay was narrated. It was showing how the changes to the code affected the gameplay.
The main idea is to create narrated guides through the code. It can be audio only or mixed with video and images.
CodeMic basically records changes made to the code (as well as scroll, selections etc). It doesn't really care if the changes are made by the developer or the AI assistant. I think it would be the job of the narrator to explain why the files suddenly changed.
I'm excited to see what kind of content developers will create on CodeMic but personally, my inspiration is 3Blue1Brown. That is to say, not so much live recording of a 3 hour long programming session but instead shorter, more polished and well planned content. I suppose time will tell which will be more popular.
Thank you, that makes more sense now. Wasn't super clear from the intro video. I hope there will be enough people who need this kind of tool for their team/community!
> In future versions, I plan to bring CodeMic to more IDEs: Emacs, (Neo)Vim, IntelliJ, Sublime Text, Helix, and others.
With proper architecture (e.g. using LSP), all-editor support would have been (semi-)automatic.
More on the solution to the "M by N problem": https://matklad.github.io/2022/04/25/why-lsp.html#Standard-E...
Do LSPs allow you to control which file is being displayed and where the cursor is located? These kinds of controls would need to be standardized across editors for “all-editor” support.
If it meets the guidelines, this might make a good 'Show HN'. Show HN guidelines: https://news.ycombinator.com/showhn.html
Looks like it checks the authored by submitter box, but maybe not the “other people can play with” part yet?
Not sure if early access with email gives everyone access now, or if it will be only given to some people or only when it’s a bit more ready.
OP should for sure make a follow up post, with Show HN prefix, when it’s available for all users. For now, if it’s not yet available for everyone to try, I think OP made the right choice to not mark this post as “Show HN”.
I can't wait to post it as a Show HN but the early access isn't ready yet. I'm aiming for end of Jan.
Neat. I can see this being a very large step beyond "coding on Twitch"-like streaming, and pretty much all programming-related educational videos too.
Thank you. Yeah as much as I like to watch coding on Twitch/YouTube I always get lost 30 minutes in and can't tell what I'm looking at. I really hope CodeMic will change that.
Yep. And educational videos almost always skip over useful information, or don't explore something I'm interested in, or...
Self-directed learning is the best learning. Consider me sold, it's a pretty simple mashup in principle but it's immediately clear why it would work well (both implementation and as a user).
> In future versions, I plan to bring CodeMic to more IDEs: Emacs, (Neo)Vim, IntelliJ, Sublime Text, Helix, and others. It’d also be great to have a web player or mobile app for smaller screens (unlike screencasts, the font size can adapt to the screen).
I like the idea of CodeMic a lot. Will the mobile app or web player also allow you to explore the code like you would in the IDE? Perhaps something built on VS Code in the browser that integrates CodeMic? Similar to how GitHub has VS Code in the browser that you can use to explore and edit code from repos.
Thanks. Yes. That is one of the central ideas of CodeMic. The way I imagine the web player is that we'd be able to pause the session and browse the codebase and even download the entire codebase as it is at that exact moment.
With something like VSCode for browser, as opposed to a simple code viewer, we'd also be able to use the intellisense features to better understand the code.
Being able to host a web player for these on a static site for documentation would be killer.
Absolutely. It should be as easy as embedding a youtube video.
Looks amazing, and very relevant to me as I'm going to be producing video guides in the new year. Signed up for updates, excited to see where you take this – great work!
I absolutely love that this idea stemmed from the HMH episode guide. Great resource, and a seemingly great idea. Looking forward to seeing where this goes!
This is an amazing idea ! I am going to find it useful.
One of the reasons I loved Scrimba for learning html/css/js was the fact that the lessons were integrated with an IDE and I could pause the teacher and tinker with the code right then and there.
CodeMic is going to be similarly useful for me.
Awesome! I don't use VSCode anymore, nor do I really watch tutorials, but when I was starting out as a programmer I would have loved to have something like this. Best of luck with the launch!
Thanks a lot I really appreciate it.
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.
> code is not literature
One thing I’ve thought about is how AI assistants are actually turning code into literature, and literature into code.
In old-fashioned programming, you can roughly observe a correlation between programmer skill and linear composition of their programs, as in, writing it all out at once from top to bottom without breaks. There was then this pre-modern era where that practice was criticized in favor of things like TDD and doc-first and interfaces, but it still probably holds on the subtasks of those methods. Now there are LLM agents that basically operate the same way. A stronger model will write all at once, while a weaker model will have to be guided through many stages of refinement. Also, it turns the programmer into a literary agent, giving prose descriptions piece by piece to match the capabilities of the model, but still in linear fashion.
And I can’t help but think that this points to an inadequacy of the language. There should be a programming language that enables arbitrary complexity through deterministic linear code, as humans seem to have an innate comfort with. One question I have about this is why postfix notation is so unpopular versus infix or prefix, where complex expressions in postfix read more like literature where details build up to greater concepts. Is it just because of school? Could postfix fix the stem/humanities gap?
I see LLMs as translators, which is not new because that’s what they were built for, but in this case between two very different structures of language, which is why they must grow in parameters with the size of the task rather than process linearly along a task with limited memory, as in the original spoken language to spoken language task. If mathematics and programming were more like spoken language, it seems the task would be massively simpler. So maybe the problem for us too is the language and not the intelligence.
> If mathematics and programming were more like spoken language, it seems the task would be massively simpler
Mathematics and programming derives from spoken languages. The thing is that spoken languages lack precision: What you said is not what I understand. So they chose a subset, assign the items precise meanings and how to use them in sentences. Then convert the whole in a terser form for ease of notation. Starting with the terse notation is the wrong way to go about it, just like someone does not start learning music by reading sheet music. Learning programming is easier by learning what the components are and not how to write syntax.
> So maybe the problem for us too is the language and not the intelligence.
The issue is understanding. Behind every bad code, there's someone with either lack of understanding or making hasty decisions (time pressure, tiredness,...).
> The thing is that spoken languages lack precision
This is true, but extreme precision is most useful if there's only communication one way, i.e. the programmer communicates to the computer how to operate and the computer does not respond (other than to execute the code). But if there's a dialog, then both parties can ask for clarification and basically perform a binary search to quickly hone in on the exact meaning.
The computer does respond. With the result of the query or the operation that I've tasked it to do. If I say `<command>`, the only replies that I expect are: confirmation if the action is dangerous; error messages if the action did not succeed; and success message if it did. I don't want to do philosophy with a tool. I only want to get a task done or create something. All the meanings for the commands are already listed in the manuals for the software that are running on the computer. And you can get training if you want targeted guidance.
> writing it all out at once from top to bottom without breaks
This only happens for toy examples; all real development is iterative, across years and teams. There are a few people who can do Feynman "think very hard and write down the answer", but it's a unique skill of limited availability.
> One question I have about this is why postfix notation is so unpopular versus infix or prefix, where complex expressions in postfix read more like literature where details build up to greater concepts. Is it just because of school?
Developers (you, and the rest of the audience) really need to be able to distinguish between a personal aesthetic preference and some sort of timeless truth.
> Could postfix fix the stem/humanities gap?
I feel fairly confident when anyone posts One Weird Trick nonsense like this that the answer is "no". Especially as postfix is in no way new, it's decades old.
Heck, this is also Anglocentric: there are plenty of human languages which are "postfix", in that they're subject-object-verb rather than subject-verb-object. Such as German and Japanese. Doesn't seem to convey an automatic advantage in either science or literature against the juggernaut of ubiquitous English.
(Mathematical notation tends to use infix operators for some things and prefix operators for others; postfix seems to be rarer? Mostly for units?)
> There should be a programming language that enables arbitrary complexity through deterministic linear code, as humans seem to have an innate comfort with.
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?
Exactly what I was thinking of when reading the article. Maybe codeMic comes a year or so too late.
Soon AI will read this big blob of code and I can ask away and the AI can explain while jumping to places in the code, which I can hoover for inspection. Then I ask it to refactor it or add this or that functionality, add tests for it and show the results of the tests.
Code becomes literature, becomes code.
Does this work with VScode? I’m wanting a way to drive VScode in the same way as selenium can drive a website. For the purpose of adding support for it to https://github.com/zombocom/rundoc.
I would appreciate any tip or hints on how to approach it.
Yes it works with VSCode although it's not really selenium for VSCode. It is only concerned with recording and replaying changes to open text editors, selection, and scrolls: things that are useful for creating a guided programming session or a tour of a codebase.
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.
Thanks for the fast reply! For some background:
Rundoc is a tool for writing tutorials such that the author is guaranteed the outcome is valid (if a command fails, the tutorial fails) and for helping users see the exact output they would expect (instead of a static output). The tool has website integration that allows you to take screenshots and navigate a webpage.
Recently I wrote this tutorial https://schneems.com/2023/06/14/its-dangerous-to-go-alone-pu... which makes heavy use of vscode extension shortcuts and hover over tips. I would love to be able to keep that tutorial up to date by scripting the tooltips to make sure the options don’t change and the suggested commands like CMD+. Continue to work.
Rundoc is very interesting. Great work!
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].
One small thing, the text box for inputting email address to sign up for early access and updates might be better if it had
<input type="email">
At the moment when I click to add my email, Safari on iPhone suggest putting my name into it. Usually Safari will suggest putting my email into email inputs. So maybe it’s missing the type attribute?
of course, I'll fix it, thanks.
At the end the article tries to tie this to the importance of looking at code:
> He wrote about a peculiar observation: everyone says reading code is important, yet few of us actually do it.
This is an approximation of watching screencasts, just like watching games on Lichess is an approximation of watching chess on Twitch or YouTube.
While it’s a nice supplement to reading code, it is a tiny fraction of my code consumption. That “code is not literature” is just the non linear nature of reading code*, but still perusing the source code, documentation, commits, tests, data, etc is far more important way of consuming code than watching it being typed out. Talks are important but most of the utility is the author deliberately communicating something.
As for reading code in a way that reflects it being different from literature, it’s helpful to be able to quickly search the code and find references whether through searching or links. Running the tests or using the code in a repl or by making a program that uses it is also important and reflects the naturalist aspect mentioned in the article.
This seems like it could be quite cool but I think to help programmers to understand more codebases it would be better to try to streamline reading code in a non-linear way. Take reading the repo of LLVM for example. I think an LLM could be handy here. I could ask it to categorize the files.
* Reading literature is also not fully linear, especially after the first read.
post about it on https://chat-to.dev as there are people who pass through there and thus also get to know this content
Didn't know about chat-to.dev. I'll be sure to post it there too. Thanks.
It's rare to stumble across a completely original take on something that is well established - I think this is a clever idea that really has legs, good luck to codemic, I look forward to engaging content, as a step up from the current live-stream et al quagmire.
Really appreciate it, thank you!
Mandatory shoutout to Scrimba here that does this for online tutorials that are purely JavaScript based (IIRC)
is this pronounced mic like 'mike' or 'emic' like 'epidemic'
I was going for Code + Microphone. So like 'mike', definitely not epidemic :D
Might want to register (and redirect) the 'mike' version of the domain as well.
codemike.com has been taken for a while already.
How about collaboration, this is great for pair programming/anything else here ?
That would be very interesting. But for now it's a little out of scope. I think the key feature here is a tool and a platform for developers to record and replay coding sessions in a much more interactive way than what we currently have on Twitch or YouTube.
In the future, we could add live record & replay which would pave the ground for pair programming as well.
i can imagine this being equally as useful for OSS products and newhire onboarding.
I couldn't agree more. For example, the more senior developers could record walkthroughs of the codebase for new hires. It gives them a quick, high-level overview of the system and can make onboarding easier and let the new team members study the material at their own pace with a guide.
In what way would this be better than a written overview?
Great question. It's not really about whether it's written or spoken (a later version of CodeMic will have written guides as well as audio/video/image).
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.