5 ms·

I enjoyed the _meat_ of the article, but really disliked the stream-of-thought narrative of the post. But I know it's this author's style. So that's fine. A

I enjoyed the _meat_ of the article, but really disliked the stream-of-thought narrative of the post. But I know it's this author's style. So that's fine. Anyway. Is there something better than just screen-shotting your terminal window and making PNGs or GIFs for stuff like this?

JdeBP 3y ago
That's an interesting thought. Obviously one can present this stuff as just in-line text instead of using images, with appropriate styles for monospacing and colours (although that does then highlight that these fancy prompts often make unwarranted assumptions about what's in the Unicode Private Use Area). There are many WWW pages out there doing exactly that. But I for one have not heard of a tool that can screenshot a text terminal emulator's buffer straight into HTML.
- rascul 3y ago
  'script' to record the session then 'aha' to convert to html.
  - JdeBP 3y ago
    That's not screenshotting the actual terminal display buffer, and it relies on whatever one uses to do the conversion to process all of the escapes and control sequences in exactly the same way as the terminal emulator did. There are some long standing bugs against the aha tool pointing out that it does not even come close; including not coping with switching to and from the alternate display buffer. No-one seems to have yet noticed that it doesn't recognize ED or EL or any relative cursor motions, so will have serious problems with things like ZLE in the Z shell, or just plain clearing the screen; or that it doesn't handle 24-bit colour in the same ways as some popular terminal emulators do.
- hiccuphippo 3y ago
  The closest I've seen is termsvg which records your terminal and saves to an animated svg. https://github.com/mrmarble/termsvg https://github.com/mrmarble/termsvg
  - JdeBP 3y ago
    That's not recording the terminal. That's recording the characters, escapes, and control sequences sent to your terminal. It isn't actually recording what the terminal does in response to them. It isn't screenshotting, and terminal emulators differ in what they do; the same output potentially appearing very differently. Screenshotting would involve reading a Linux KVT /dev/vcsa file, or a display file with my terminal emulator, or using a Kitty plug-in to get at its display buffer contents, or attaching to a screen/tmux server and reading out its display, or similar (if even possible) for other terminal emulators. Ironically, BRLTTY can do some of the aforementioned. But it most certainly doesn't spit out HTML.
endigma 3y ago
Moving pictures: https://asciinema.org/ https://asciinema.org/ https://github.com/charmbracelet/vhs https://github.com/charmbracelet/vhs Still image: https://github.com/nbedos/termtosvg https://github.com/nbedos/termtosvg (dead, unknown if usable?)
- fbdab103 3y ago
  Any notable differences between asciicnema and vhs?
  - vedk 3y ago
    The authors of VHS gave an explanation when they announced the tool on reddit: https://old.reddit.com/r/unixporn/comments/yerd82/oc_vhs_a_tool_for_generating_terminal_gifs_with/itzt2vw/ https://old.reddit.com/r/unixporn/comments/yerd82/oc_vhs_a_t...
  - endigma 3y ago
    As I understand it VHS is less of a recorder and more like an "editor"? You provide it a sort of script to follow, not recording your own actions.
- joshka 3y ago
  Try https://github.com/marionebl/svg-term-cli https://github.com/marionebl/svg-term-cli for asciinema -> moving svg
the-printer 3y ago
These sort of articles are popular for a reason, maybe it reflects a pedagogical trend both ways (preferences in teaching and how one likes to be taught). Personally I gravitate in the opposite direction. I’ve come to appreciate “dry”, technical guides void of overt personality. I’m not a fan of “Why_’s Poignant Guide to Ruby” in the least, but there is a visceral element in its whimsicalness (and other why_ materially) that similar efforts don’t compare to (I count the listed guide here among this). For me, why_’s work is an outlier in this “literary tech writing” genre. If I ever intended to learn the language, I would contemplate scrubbing out the comic strips if I couldn’t find a better alternative guide.
ilyt 3y ago
Yeah I pretty much skipped over it looking for some tidbit I don't know as terminal workings are pretty well known to me already but ugh it's painful to read for that type of article. I think that style could work well when you're doing say a post-mortem of some failure, where you want to show the whole train of thought that lead to it or to finding a fix, but for this kind it just doesn't work very well
Agingcoder 3y ago
I couldn’t finish it, it felt like noise to me. It was also frustrating because there was little content and a lot of words/pictures (even the prompt was distracting). I guess I’m getting too old for this - I’m leaving this to the younger crowd !
- Agingcoder 3y ago
  Not sure why I’m getting downvoted - I really didn’t like it.
quesera 3y ago
> I enjoyed the _meat_ of the article, but really disliked the stream-of-thought narrative of the post. But I know it's this author's style. So that's fine. This is why it was such a struggle for me to get through Godel, Escher, Bach as well. If I'm engaged on the topic, I want the author to get straight to the point, not to try to anticipate my questions or lead me with someone else's potted questions. > Anyway. Is there something better than just screen-shotting your terminal window and making PNGs or GIFs for stuff like this? I've done it manually in HTML/CSS for documentation, to preserve copy-pasteability. It's straightforward: body bgcolor, and font-family (something fixed width), then a bunch of spans with colors for syntax highlighting. Would love to find something automatic though! E.g.: command | ttyansi2htmlcss | pbcopy
- JdeBP 3y ago
  Well there's http://www.andre-simon.de/doku/ansifilter/en/ansifilter.php http://www.andre-simon.de/doku/ansifilter/en/ansifilter.php for the latter. But it doesn't do direct screenshots. So one would have to find something else that would take the terminal emulator's display grid and, ironically, turn it back into a sequence of characters, escapes, and control sequences.
  - quesera 3y ago
    Screenshotting would be cool, but this pipeable tool looks like it would be a great help. Dependency on Qt is a awkward though. Thanks for the link!
fasterthanlime 3y ago
> Is there something better than just screen-shotting your terminal window and making PNGs or GIFs for stuff like this? There is and it's been on my TODO list forever. In fact, the article you just read (congrats on getting through my narrative devices) was written /while tackling that/. https://asciinema.org https://asciinema.org does it for "moving pictures", it shouldn't be too hard to do it for stills.

JdeBP 3y ago

That's an interesting thought. Obviously one can present this stuff as just in-line text instead of using images, with appropriate styles for monospacing and colours (although that does then highlight that these fancy prompts often make unwarranted assumptions about what's in the Unicode Private Use Area). There are many WWW pages out there doing exactly that. But I for one have not heard of a tool that can screenshot a text terminal emulator's buffer straight into HTML.

rascul 3y ago
'script' to record the session then 'aha' to convert to html.
- JdeBP 3y ago
  That's not screenshotting the actual terminal display buffer, and it relies on whatever one uses to do the conversion to process all of the escapes and control sequences in exactly the same way as the terminal emulator did. There are some long standing bugs against the aha tool pointing out that it does not even come close; including not coping with switching to and from the alternate display buffer. No-one seems to have yet noticed that it doesn't recognize ED or EL or any relative cursor motions, so will have serious problems with things like ZLE in the Z shell, or just plain clearing the screen; or that it doesn't handle 24-bit colour in the same ways as some popular terminal emulators do.
hiccuphippo 3y ago
The closest I've seen is termsvg which records your terminal and saves to an animated svg. https://github.com/mrmarble/termsvg https://github.com/mrmarble/termsvg
- JdeBP 3y ago
  That's not recording the terminal. That's recording the characters, escapes, and control sequences sent to your terminal. It isn't actually recording what the terminal does in response to them. It isn't screenshotting, and terminal emulators differ in what they do; the same output potentially appearing very differently. Screenshotting would involve reading a Linux KVT /dev/vcsa file, or a display file with my terminal emulator, or using a Kitty plug-in to get at its display buffer contents, or attaching to a screen/tmux server and reading out its display, or similar (if even possible) for other terminal emulators. Ironically, BRLTTY can do some of the aforementioned. But it most certainly doesn't spit out HTML.

endigma 3y ago

Moving pictures: https://asciinema.org/ https://asciinema.org/ https://github.com/charmbracelet/vhs https://github.com/charmbracelet/vhs Still image: https://github.com/nbedos/termtosvg https://github.com/nbedos/termtosvg (dead, unknown if usable?)

fbdab103 3y ago
Any notable differences between asciicnema and vhs?
- vedk 3y ago
  The authors of VHS gave an explanation when they announced the tool on reddit: https://old.reddit.com/r/unixporn/comments/yerd82/oc_vhs_a_tool_for_generating_terminal_gifs_with/itzt2vw/ https://old.reddit.com/r/unixporn/comments/yerd82/oc_vhs_a_t...
- endigma 3y ago
  As I understand it VHS is less of a recorder and more like an "editor"? You provide it a sort of script to follow, not recording your own actions.
joshka 3y ago
Try https://github.com/marionebl/svg-term-cli https://github.com/marionebl/svg-term-cli for asciinema -> moving svg

the-printer 3y ago

These sort of articles are popular for a reason, maybe it reflects a pedagogical trend both ways (preferences in teaching and how one likes to be taught). Personally I gravitate in the opposite direction. I’ve come to appreciate “dry”, technical guides void of overt personality. I’m not a fan of “Why_’s Poignant Guide to Ruby” in the least, but there is a visceral element in its whimsicalness (and other why_ materially) that similar efforts don’t compare to (I count the listed guide here among this). For me, why_’s work is an outlier in this “literary tech writing” genre. If I ever intended to learn the language, I would contemplate scrubbing out the comic strips if I couldn’t find a better alternative guide.

ilyt 3y ago

Yeah I pretty much skipped over it looking for some tidbit I don't know as terminal workings are pretty well known to me already but ugh it's painful to read for that type of article. I think that style could work well when you're doing say a post-mortem of some failure, where you want to show the whole train of thought that lead to it or to finding a fix, but for this kind it just doesn't work very well

Agingcoder 3y ago

I couldn’t finish it, it felt like noise to me. It was also frustrating because there was little content and a lot of words/pictures (even the prompt was distracting). I guess I’m getting too old for this - I’m leaving this to the younger crowd !

Agingcoder 3y ago
Not sure why I’m getting downvoted - I really didn’t like it.

quesera 3y ago

> I enjoyed the _meat_ of the article, but really disliked the stream-of-thought narrative of the post. But I know it's this author's style. So that's fine. This is why it was such a struggle for me to get through Godel, Escher, Bach as well. If I'm engaged on the topic, I want the author to get straight to the point, not to try to anticipate my questions or lead me with someone else's potted questions. > Anyway. Is there something better than just screen-shotting your terminal window and making PNGs or GIFs for stuff like this? I've done it manually in HTML/CSS for documentation, to preserve copy-pasteability. It's straightforward: body bgcolor, and font-family (something fixed width), then a bunch of spans with colors for syntax highlighting. Would love to find something automatic though! E.g.: command | ttyansi2htmlcss | pbcopy

JdeBP 3y ago
Well there's http://www.andre-simon.de/doku/ansifilter/en/ansifilter.php http://www.andre-simon.de/doku/ansifilter/en/ansifilter.php for the latter. But it doesn't do direct screenshots. So one would have to find something else that would take the terminal emulator's display grid and, ironically, turn it back into a sequence of characters, escapes, and control sequences.
- quesera 3y ago
  Screenshotting would be cool, but this pipeable tool looks like it would be a great help. Dependency on Qt is a awkward though. Thanks for the link!

fasterthanlime 3y ago

> Is there something better than just screen-shotting your terminal window and making PNGs or GIFs for stuff like this? There is and it's been on my TODO list forever. In fact, the article you just read (congrats on getting through my narrative devices) was written /while tackling that/. https://asciinema.org https://asciinema.org does it for "moving pictures", it shouldn't be too hard to do it for stills.