2021-10-20 Weeknotes: Learning Kubernetes, learning Web Components

Introduction

I’ve been mainly climbing the learning curve for Kubernetes and Web Components this week.

I also released Datasette 0.59.1 with Python 3.10 compatibility and an updated Docker image.

Learning Kubernetes

My current goal is to figure out how to run a Datasette instance in a Kubernetes container with an attached persistent volume, so it can handle SQLite writes as well as reads.

It looks like StatefulSets will be key to getting that to work. (Update: apparently not! Graham Dumpleton and Frank Wiles assure me that I can do this with just a regular Deployment.)

I’ll be sure to write this up as a TIL 0 once I get it working.

Learning Web Components ( https://developer.mozilla.org/en-US/docs/Web/Web_Components )

../../../_images/web_components.png

https://twitter.com/simonw/status/1453518210083409923?s=20 , https://gist.github.com/simonw/2df444ce0bd75c8bf91beb7a6516ba5b

Datasette’s visualization plugins—in particular datasette-vega ( https://datasette.io/plugins/datasette-vega ) are long overdue for some upgrades.

I’ve been trying to find a good pattern for writing plugins that avoids too much (ideally any) build tool complexity, and that takes advantage of modern JavaScript , in particular JavaScript modules ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules ), which Datasette has supported since Datasette 0.54.

As such, I’m deeply intrigued by Web Components ( https://developer.mozilla.org/en-US/docs/Web/Web_Components ) which had a big moment this week when it was revealed that Adobe had used them extensively for Photoshop on the web ( https://web.dev/ps-on-the-web/ ).

One of my goals for Datasette visualization plugins is for them to be usable on other external pages—since datasette can expose JSON data over CORS, being able to drop a visualization into an HTML page would be really neat (especially for newsroom purposes).

Imagine being able to import a JavaScript module and add something like this to get a map of all of the power plants in Portugal: 

<datasette-cluster-map
  data="https://global-power-plants.datasettes.com/global-power-plants/global-power-plants.json?country_long=Portugal">
</datasette-cluster-map>

I’m hoping to be able to build components using regular, unadorned modern JavaScript, without the complexity of a build step .

As such, I’ve been exploring Skypack ( TIL 1 ) and Snowpack which help bridge the gap between build-tooling-dependent npm packages and the modern world of native browser ES modules ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules ).

I was also impressed this week by Tonic , a framework for building components without a build step that weighs in at just 350 lines of code and makes extremely clever use of tagged template literals and async generators.

This morning I saw this clever example of a Single File Web Component by Kristofer Joseph—I ended up creating my own annotated version of his code which I shared in this TIL 2 ( https://til.simonwillison.net/web-components/understanding-single-file-web-component ).

Next step: I need to write some web components of my own!

Seealso