Show HN: Glorious Demo – Create animations for your code samples
glorious.codesOr you can just literally record it with https://asciinema.org/ and embed like a video. The text will be selectable even!
And for added hotness around asciinema, try svg-term-cli. https://github.com/marionebl/svg-term-cli
Asciinema looks fantastic.
Maybe I'm missing something here, but it doesn't seem like it actually runs anything, it just has you provide "commands" and "responses", so you have to fake out your entire interaction. Which means that when you change something in your program's input or output, you'll need to manually edit the script, instead of being able to regenerate it.
I think the point it's not to run anything. It's just a pure HTML/CSS/JS way of providing an example of how a CLI might work on a landing page. You don't need to record or make the user load a gif/mp4.
Like this one for example https://wedeploy.com/
This was my thought exactly. Also thought seeing 6 lines being typed was too much, got the feeling I wanted to close the page. Animation went too slow and didnt really add anything anymore at that point. The power of gif-based samples is for the range 1-3 sec gifs I'd say.
What this can provide over gifs, is accessibility, although I haven't checked it with a screen reader.
Most of the time that a demo is done where the presenter is typing, it feels like I'm better served by the result of the code itself than watching someone stand quietly, type, and frantically hit backspace to fix the errors. If the actual code is relevant, why not have the block above or below the demo to review it line by line?
BTW, I didn't make this - I thought it was a really cool tool and wanted to share it.
Credit for this tool goes to Rafael Camargo:
https://rafaelcamargo.com/?utm_source=glorious-codes&utm_med...
Looks smooth!
Similar tool would be https://asciinema.org/
This is super nice to look at. I think it’s acceptable for 1 line of code but watching 5 lines being typed out felt a bit extreme.
This will be perfect for an SDK developer onboarding electron app I'm building
What is the license? You should add it to the project.
Well noticed TekMol. Just added MIT license to the project. Thanks for your feedback!
Very good job!