Tag Archives: pingplotter

Hosting better screencasts in WordPress

When I was writing up a note about pingplotter I figured I should show how it works because that’s much better for understanding it.

This gobbled up an incredible amount of time, so I’m writing it down so I never have to figure it out again.

There’s a few terminal screencast recorders out there, but I picked asciinema since it seemed simple, it recorder everything as text, not an image and it seemed a very light format to playback. These things are true, and the pain I felt is mostly unrelated to any failings of asciinema.

Asciinema is great. I can record a session locally, play it back to check locally and then upload it to their hosting to share. All pretty cool!

# record a session, but skip pauses over 1 second
asciinema rec -i 1 pingplotter.cast
asciinema: recording asciicast to pingplotter.cast
asciinema: press <ctrl-d> or type "exit" when you're done
# type a bunch of things to demo
# then ctrl-d to stop recording
asciinema: recording finished
asciinema: asciicast saved to pingplotter.cast

# time to check to see if it was any good
asciinema play pingplotter.cast
# the saved session plays back

# good enough!
asciinema upload pingplotter.cast 
# asciinema gives you the URL of the upload
# you can give it a description and make it public

Since this website is still powered by WordPress, I wanted to share it here. The Asciinema url didn’t embed automatically, so I figured I could either embed a script from Asciinema or add a plugin to do the embed code.

Both of these failed – somehow the javascript from Asciinema wasn’t working in my Firefox. It worked in Chrome, but that’s not good enough. I figured I should just host the cast myself! Why do I need to embed this tiny file or load javascript or install plugins to do this?

I found a neat utility to convert an asciicinema screencast to an animated SVG.

Listen, SVG and animated SVG is incredibly powerful, and if you don’t know, you should learn about it. Animated gifs are heavy, don’t resize, and are full of rendering artifacts. SVG are vector graphics, which mean they are infinitely scalable up or down crisply in a much smaller size than most gifs. Every modern mobile and desktop browser supports them.

The cool utility is svg-term. It lets you take an asciinema file and turn it into an animated svg.

It’s very nicely made, but is unfortunately distributed with npm, a package manager designed to ruin you. The instructions svg-term gives you to install it are incredibly dangerous unless you know to set up your npm install to not install packages with root privileges, WHICH FOR SOME REASON ISN’T THE DEFAULT OR EVEN POSSIBLE. I looked at the npm documentation for something like pip install --user, but it doesn’t exist. Instead, the solution is to redefine global installs to mean user local installs. I’m not kidding.

I don’t want to ever have to figure this out again either, so I added it to my jumpstart script so it will be ready for the next computer I use.

cat pingplotter.cast| svg-term --out ~/pingplotter.svg

This worked great! I went to upload it to my WordPress site to share with you. It did not work great!

WordPress very reasonably recognizes that while I enthusastically love SVG, it can be a security hole. SVG files can embed all sorts of foolishness like JavaScript and other loopholes to escalate privileges. So WordPress prevents them from being uploaded. I opted to allow them with a plugin that sanitizes SVG files to remove the dangerous stuff but allow the rich graphical goodness. This worked great!

I then decided to demo using tmux and glances, which meant I had to do a lot more typing in the demo, which expanded the size of the screencast. Poor svg-term began to crap out because I was exceeding the size of the javascript heap by feeding it a file larger than 1 mb. Fair enough, I don’t want to have a big file anyway!

The solution here is to script as much as possible ahead of time. The asciinema commandline takes a -c command argument which makes it execute a command as soon as it startes recording. Since tmux also lets you script up what you want it to do, I ended up with this.

asciinema rec -i 1 -c 'tmux new "pingplotter ; read" \; split-window "glances ; read" \; select-layout even-horizontal' pingplottertmux.cast

I’m telling asciinema to open up tmux and start recording. I’m telling tmux to start with pingplotter in a window, then open a new pane with glances and make the layout side-by-side. Each of those panes will close when the command they are running is done. Now I can just use ctrl-a <space> a few times to rotate the layout, ctrl-c to kill the panes, tmux exits and asciinema stops recording.

The file size ended up being small enough for svg-term and now you get this!

Anyhoo, black people are human beings with real lives and I don’t want my tax dollars to be used to murder them. Please, call your city representatives to urge them to shrink the police budget and use that money for social services that prevent crime and pain. If you can’t figure out your local representation, please learn how. If you won’t, please at least call your federal reps to ask them to stop giving the city police things like machine guns and tanks.

Week 2201

I zoomed with a crew of mostly ex PWP folks to catch up and drink a beer and remember our sweet trip to Stowe this winter, my last snow trip of the season. Also got lunch with Ian Sudderth, always a pleasure.

Fixed this website!

Back when letsencrypt was launching I was trying to get it to work here and broke my .well-known directory, which is also where you prove you own your website to keybase.io. Keybase told me it didn’t think I owned my website anymore. Trying to fix that ended up making the front page of this work, but no hyperlinks anywhere worked, because I suck at .htaccess, the magic format for manipulating apache webserver redirection rules. Eventually I just removed many “fixes” and hey it works and I won’t touch it again for a few years.

Released Pingplotter

I published it here, made a screencast, and posted it on reddit. I also wrote down my recipe for making the screencast in case I ever need to do that again or it could help some other nerd. (That will publish next week).

Got on Mastodon

I had a mastodon account back when it bloomed, but I lost it. I’m trying to get back into putting my energy into things I own or where I’m not the product and the Fediverse is the party to be at. It’s decentralized, hard to shut down and open source. I’m trying to blog more (maybe you noticed), toot more, tweet less. I’m randomly chose a mastodon server to join and now you can connect with me at https://hostux.social/@mattk

Come Join Mastodon! Right now I think the biggest problem is that I don’t know who I want to hear from or talk to, but I’m gonna take it easy and spend more time just getting to know people. This guy Jonathon posts really interesting stuff about Africa all the time!

Started selling our apartment

We probably need more room now. So we’re looking to sell our place in Brooklyn. I love that place but it’s hard to imagine moving back with 4 people to that two bedroom. I wanted to stay there a bit longer, but you gotta roll with the punches.

Sweaty stuff

I entered into the hyrox virtual championship and I am super outclassed there! Also got some wooden gymnast rings for pullups and put them up on the big tree out back.

No zombie runs in a while, want to get one of those tomorrow in the rain.

Buying a car

Sam is doing most of the work on this, but we’ve been renting a car for months now and there’s no clear end in sight. Our goal is to own a car of some sort before the next time we’d renew the rental car. If we move somewhere we don’t need a car, we can sell it. But it’s time to stop renting – this is gonna last a while.

Pingplotter

I need to see if my remote connection to work is healthy and if my remote connection to video conferencing is suffering.

I wrote a little utility to handle that in the commandline. It’s dumb but it works. Let’s call it pingplotter. It’s in the public domain, go nuts.

It’s fine to just pop in a terminal you have open, but it plays really nice with tmux and glances (I use both).

I think I spent nearly as much time making these screencasts as I did writing the shell script. I should blog that too, if only so I don’t have to research that again.