Playing with PyScript

This is something I’ve been meaning to do in javascript forever but never bothered to figure out. JS can certainly do it, but it took me about 10 seconds to do it in PyScript. The code isn’t the cleanest, but it is very straightforward.

<!doctype html>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script defer src=""></script>
    :not(:defined) {
        visibility: hidden;
    <h1>Hello! My name is <span id="name-goes-here">Kevin Goldsmith</span></h1>
import random

names = ["Kevin Goldsmith", "????? ????????", "???????????", "?? ?????", "????????"]
el = Element("name-goes-here")
while True:
    name = random.choice(names)
    for n in range(0, len(name)+1):
        await asyncio.sleep(0.2)
    await asyncio.sleep(5)
    for n in range(1, len(name)+1):
        await asyncio.sleep(0.2)

A few notes:

  • I originally was going to use time.sleep(x). That didn’t work, I’m sure I can figure out why, but it was just easier to see that this method worked fine.
  • The UTF-8 encoding hints on the page are critical. I should have known this obviously, but it worked fine locally without them (of course).
  • The default PyScript unstyled my <h1>, I just got rid of it. Probably best to look at it and decide if you want those styles.
  • PyScript is fun! There are a lot of other small interactive things I want to do on my pages. As it reaches maturity, I will get them going with PyScript.
  • There is an issue sometimes where your PyScript code is visible before the code loads (I’m guessing that the default CSS fixes this). If you just want to handle that, you use the <style> code listed above.

Cleaning up markdown generated from pandoc with Python

I’ve been playing around with Pelican lately, using it to build my new Nimble Autonomy, LLC site (more on that soon).

So far, I like Pelican as a static site generator. It seems to strike a reasonable balance between generality and power. I previously used Hugo to build the Unit Circle Rekkids site. I found it reasonably decent, but not life-changing. That site’s content doesn’t change that often, so once it was built, I have only had to make an occasional tweak. This new site will be changing a bit more often.

To get some content on the new site, I wanted to republish some posts from this blog. Using the instructions for WordPress Export and Pelican-import, I was able to generate some markdown from my WordPress posts, but it was a bit underwhelming.

There was a lot of this kind of gunk in the markdown:

<!-- wp:paragraph -->`{=html}

While I am an experienced video-conferencer and a reasonably experienced presenter, presenting to a remote audience is still something I am learning how to do. Having just given a talk this morning, I did want to share some things that are working well for me at the moment.

`<!-- /wp:paragraph -->`{=html}

`<!-- wp:heading -->`{=html}

The Tools

`<!-- /wp:heading -->`{=html}

`<!-- wp:paragraph -->`{=html}

Only a few of my images were even referenced. I quickly realized that if I was going to try to move more than a handful of articles over, I was going to be spending a lot of time hand-editing the generated markdown.

This was an obvious problem that automation could fix. As I was using a python-based static-site generator, I decided to use python to do my cleanup. I’m sharing the code below as it may help others who are trying to solve the same problem. At some point, I might try to create a pull-request for it with Pelican, but right now I am just trying to move forward on other things.

It isn’t the best or cleanest python I’ve written, this was done quickly with a lot of iteration to catch all the corner cases. It could also be more pythonic. It is also very opinionated in the Markdown that it creates.

At some point, I may clean it up, but really I’m supplying it here because I have to believe that other people have hit the same problem and I want to save those folks some time.

Feel free to fork and improve!