5 ms·

Historically asciinema was not easy to embed in React because you can't have multiple copies of React. So my team at the time wrote and open-sourced an embeddab

Historically asciinema was not easy to embed in React because you can't have multiple copies of React. So my team at the time wrote and open-sourced an embeddable alternative to it. Unfortunately that project seems to have disappeared by now. But now that asciinema is no longer in React maybe it will be possible to embed now. See https://github.com/asciinema/asciinema-player/issues/72#issuecomment-955669533 https://github.com/asciinema/asciinema-player/issues/72#issu....

kazinator 5y ago
Historically, you could embed an animated .gif into a web page going back before Y2K, and there are tools to make such a thing from recording terminal sessions. No Javascript, no third party websites.
- codetrotter 5y ago
  You can’t pause and rewind or skip ahead in a gif in any of the major browsers.
  - kevin_thibedeau 5y ago
    Or copy/paste text.
    - hedora 5y ago
      FWIW, iOS 15 automatically OCR’s screenshots, so now copy paste works again (even from non-selectable text in apps). However, most times I have problems with copy paste, it’s not due to gif’s. It’s due to some BS framework thing rendering text in some non-standard way.
    - unrealhoang 5y ago
      Or render it beautifully for every future screen resolution.
    - kazinator 5y ago
      If I had users who needed to be that engaged with the content, they would be the sort of target audience I could easily have run scriptreplay in a terminal. (I see this more as a demo thing to show people what is possible than, say, documentation to crib from, but I can see the value in being able to do that.)
  - stjohnswarts 5y ago
    9 times out 10 if you need something to be shown in video it's better to use an mp4 and screen recorder rather than stick it in a gif. It's usually smaller too.
- eatonphil 5y ago
  I have no aversion to JavaScript. It's easier just to fetch the session as text and render it in the browser with JavaScript. If you're building gifs then you need additional file storage and an async job queue for generating the gif. I try to avoid image processing personally.
- 5e92cb50239222b 5y ago
  Those are pretty heavy unless it's only a second or two (then why would you need a gif at all?) You'll be further cutting your target audience to the extremely privileged. I've had to suffer with dial-up (3-4 KB/s) until 2009, and with shitty ADSL (15-30 KB/s) until 2013. Many parts of the world are still like that.
  - kazinator 5y ago
    I have a here 90 second .gif I made a year ago (demo of a particular Vim syntax highlighting scheme for a commit message format). It contains 930 frames, 10 fps. The resolution is 1200x768. The .gif is 600.0 kilobytes, so the coding density is about 660 bytes per frame. Someone downloading at 3-4KB/s might find the download annoying; on the other hand, it could play back on a 66 MHz 486 DX they found in the dumpster. Good luck bringing up a modern browser with Javascript. 4KB/s second would be enough to get it to average around 6FPS in the first pass through the animation, if it were being rendered as it is being downloaded.
    - JasonFruit 5y ago
      You're clearly more careful with resource consumption than many, then. Many times I've had enough time to start coffee while waiting for a .gif to get through its first pass so I can usefully watch it, using rural satellite from Hughes. We're still using your stuff out here.
      - hedora 5y ago
        Hughes is latency-bound, not bandwidth bound. For it to take that long, they’d have to try really hard. For instance, the map could issue an http[s] request per frame.
      - kazinator 5y ago
        Was it a TTY animation with most frames changing very few pixels (like one character cell), often with quiescent periods when nothing changes due to nobody typing? Gifs can do silly things, like store a sequence of full frames.
- Cthulhu_ 5y ago
  If you want to go that way, prefer html5 videos, they are a lot more compact and have options to pause and navigate.
- akavel 5y ago
  Is there some tool like this that you could recommend? I tried searching for one at one time for my project, assuming someone must have written something like that for the script command, but didn't seem to be able to find a reasonable one (or any? I don't recall). I ended up writing an ad hoc single use tool for gif-izing an asciinema transcript... (https://github.com/akavel/asciinema2gif https://github.com/akavel/asciinema2gif)
- sickill 5y ago
  > no third party websites FYI you're not forced to use asciinema.org for hosting the recordings, it's fully self-hosting friendly: https://github.com/asciinema/asciinema-player/#quick-start https://github.com/asciinema/asciinema-player/#quick-start
  - kazinator 5y ago
    I don't want to engage in anything by the name of "hosting" to convey an animation. Last time I made an animation, like this, over a year ago, I just pasted it into a team Slack channel.
sickill 5y ago
Yup. No more React.js conflict. That was caused by the way how ClojureScript bundle has been built (reagent's copy of React added to the bundle's global/window namespace). Also, the dependency on Solid.js is unlikely to cause any conflicts even if you used Solid.js yourself in your app given the new package doesn't globally export anything else other than the minimal public API for mounting the player in DOM.

kazinator 5y ago

Historically, you could embed an animated .gif into a web page going back before Y2K, and there are tools to make such a thing from recording terminal sessions. No Javascript, no third party websites.

codetrotter 5y ago
You can’t pause and rewind or skip ahead in a gif in any of the major browsers.
- kevin_thibedeau 5y ago
  Or copy/paste text.
  - hedora 5y ago
    FWIW, iOS 15 automatically OCR’s screenshots, so now copy paste works again (even from non-selectable text in apps). However, most times I have problems with copy paste, it’s not due to gif’s. It’s due to some BS framework thing rendering text in some non-standard way.
  - unrealhoang 5y ago
    Or render it beautifully for every future screen resolution.
  - kazinator 5y ago
    If I had users who needed to be that engaged with the content, they would be the sort of target audience I could easily have run scriptreplay in a terminal. (I see this more as a demo thing to show people what is possible than, say, documentation to crib from, but I can see the value in being able to do that.)
- stjohnswarts 5y ago
  9 times out 10 if you need something to be shown in video it's better to use an mp4 and screen recorder rather than stick it in a gif. It's usually smaller too.
eatonphil 5y ago
I have no aversion to JavaScript. It's easier just to fetch the session as text and render it in the browser with JavaScript. If you're building gifs then you need additional file storage and an async job queue for generating the gif. I try to avoid image processing personally.
5e92cb50239222b 5y ago
Those are pretty heavy unless it's only a second or two (then why would you need a gif at all?) You'll be further cutting your target audience to the extremely privileged. I've had to suffer with dial-up (3-4 KB/s) until 2009, and with shitty ADSL (15-30 KB/s) until 2013. Many parts of the world are still like that.
- kazinator 5y ago
  I have a here 90 second .gif I made a year ago (demo of a particular Vim syntax highlighting scheme for a commit message format). It contains 930 frames, 10 fps. The resolution is 1200x768. The .gif is 600.0 kilobytes, so the coding density is about 660 bytes per frame. Someone downloading at 3-4KB/s might find the download annoying; on the other hand, it could play back on a 66 MHz 486 DX they found in the dumpster. Good luck bringing up a modern browser with Javascript. 4KB/s second would be enough to get it to average around 6FPS in the first pass through the animation, if it were being rendered as it is being downloaded.
  - JasonFruit 5y ago
    You're clearly more careful with resource consumption than many, then. Many times I've had enough time to start coffee while waiting for a .gif to get through its first pass so I can usefully watch it, using rural satellite from Hughes. We're still using your stuff out here.
    - hedora 5y ago
      Hughes is latency-bound, not bandwidth bound. For it to take that long, they’d have to try really hard. For instance, the map could issue an http[s] request per frame.
    - kazinator 5y ago
      Was it a TTY animation with most frames changing very few pixels (like one character cell), often with quiescent periods when nothing changes due to nobody typing? Gifs can do silly things, like store a sequence of full frames.
Cthulhu_ 5y ago
If you want to go that way, prefer html5 videos, they are a lot more compact and have options to pause and navigate.
akavel 5y ago
Is there some tool like this that you could recommend? I tried searching for one at one time for my project, assuming someone must have written something like that for the script command, but didn't seem to be able to find a reasonable one (or any? I don't recall). I ended up writing an ad hoc single use tool for gif-izing an asciinema transcript... (https://github.com/akavel/asciinema2gif https://github.com/akavel/asciinema2gif)
sickill 5y ago
> no third party websites FYI you're not forced to use asciinema.org for hosting the recordings, it's fully self-hosting friendly: https://github.com/asciinema/asciinema-player/#quick-start https://github.com/asciinema/asciinema-player/#quick-start
- kazinator 5y ago
  I don't want to engage in anything by the name of "hosting" to convey an animation. Last time I made an animation, like this, over a year ago, I just pasted it into a team Slack channel.

sickill 5y ago

Yup. No more React.js conflict. That was caused by the way how ClojureScript bundle has been built (reagent's copy of React added to the bundle's global/window namespace). Also, the dependency on Solid.js is unlikely to cause any conflicts even if you used Solid.js yourself in your app given the new package doesn't globally export anything else other than the minimal public API for mounting the player in DOM.