Simon Willison's Weblog: web-components

— a still that plays

2026-06-17T03:56:10+00:00

Tool: <click-to-play> — a still that plays

A progressive enchantment Web Component that turns this markup:

<click-to-play>
  <a href="URL to GIF">
    <img src="URL to first frame" alt="...">
  </a>
</click-to-play>

Into a still frame with a click to play button which loads the GIF on demand. For when you don't want big GIFs to be loaded unless people want to play them.

Here's an example that demonstrates the new row editing tools in Datasette - in fact I built this Web Component for that post.

Tags: gif, javascript, progressive-enhancement, web-components

Gemini 3 Flash

2025-12-17T22:44:52+00:00

It continues to be a busy December, if not quite as busy as last year. Today's big news is Gemini 3 Flash, the latest in Google's "Flash" line of faster and less expensive models.

Google are emphasizing the comparison between the new Flash and their previous generation's top model Gemini 2.5 Pro:

Building on 3 Pro’s strong multimodal, coding and agentic features, 3 Flash offers powerful performance at less than a quarter the cost of 3 Pro, along with higher rate limits. The new 3 Flash model surpasses 2.5 Pro across many benchmarks while delivering faster speeds.

Gemini 3 Flash's characteristics are almost identical to Gemini 3 Pro: it accepts text, image, video, audio, and PDF, outputs only text, handles 1,048,576 maximum input tokens and up to 65,536 output tokens, and has the same knowledge cut-off date of January 2025 (also shared with the Gemini 2.5 series).

The benchmarks look good. The cost is appealing: 1/4 the price of Gemini 3 Pro ≤200k and 1/8 the price of Gemini 3 Pro >200k, and it's nice not to have a price increase for the new Flash at larger token lengths.

It's a little more expensive than previous Flash models - Gemini 2.5 Flash was $0.30/million input tokens and $2.50/million on output, Gemini 3 Flash is $0.50/million and $3/million respectively.

Google claim it may still end up cheaper though, due to more efficient output token usage:

> Gemini 3 Flash is able to modulate how much it thinks. It may think longer for more complex use cases, but it also uses 30% fewer tokens on average than 2.5 Pro.

Here's a more extensive price comparison on my llm-prices.com site.

Generating some SVGs of pelicans

I released llm-gemini 0.28 this morning with support for the new model. You can try it out like this:

llm install -U llm-gemini
llm keys set gemini # paste in key
llm -m gemini-3-flash-preview "Generate an SVG of a pelican riding a bicycle"

According to the developer docs the new model supports four different thinking level options: minimal, low, medium, and high. This is different from Gemini 3 Pro, which only supported low and high.

You can run those like this:

llm -m gemini-3-flash-preview --thinking-level minimal "Generate an SVG of a pelican riding a bicycle"

Here are four pelicans, for thinking levels minimal, low, medium, and high:

I built the gallery component with Gemini 3 Flash

The gallery above uses a new Web Component which I built using Gemini 3 Flash to try out its coding abilities. The code on the page looks like this:

<image-gallery width="4">
    <img src="https://static.simonwillison.net/static/2025/gemini-3-flash-preview-thinking-level-minimal-pelican-svg.jpg" alt="A minimalist vector illustration of a stylized white bird with a long orange beak and a red cap riding a dark blue bicycle on a single grey ground line against a plain white background." />
    <img src="https://static.simonwillison.net/static/2025/gemini-3-flash-preview-thinking-level-low-pelican-svg.jpg" alt="Minimalist illustration: A stylized white bird with a large, wedge-shaped orange beak and a single black dot for an eye rides a red bicycle with black wheels and a yellow pedal against a solid light blue background." />
    <img src="https://static.simonwillison.net/static/2025/gemini-3-flash-preview-thinking-level-medium-pelican-svg.jpg" alt="A minimalist illustration of a stylized white bird with a large yellow beak riding a red road bicycle in a racing position on a light blue background." />
    <img src="https://static.simonwillison.net/static/2025/gemini-3-flash-preview-thinking-level-high-pelican-svg.jpg" alt="Minimalist line-art illustration of a stylized white bird with a large orange beak riding a simple black bicycle with one orange pedal, centered against a light blue circular background." />
</image-gallery>

Those alt attributes are all generated by Gemini 3 Flash as well, using this recipe:

llm -m gemini-3-flash-preview --system '
You write alt text for any image pasted in by the user. Alt text is always presented in a
fenced code block to make it easy to copy and paste out. It is always presented on a single
line so it can be used easily in Markdown images. All text on the image (for screenshots etc)
must be exactly included. A short note describing the nature of the image itself should go first.' \
-a https://static.simonwillison.net/static/2025/gemini-3-flash-preview-thinking-level-high-pelican-svg.jpg

You can see the code that powers the image gallery Web Component here on GitHub. I built it by prompting Gemini 3 Flash via LLM like this:

llm -m gemini-3-flash-preview '
Build a Web Component that implements a simple image gallery. Usage is like this:

<image-gallery width="5">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2" data-thumb="image2-thumb.jpg">
  <img src="image3.jpg" alt="Image 3">
</image-gallery>

If an image has a data-thumb= attribute that one is used instead, other images are scaled down. 

The image gallery always takes up 100% of available width. The width="5" attribute means that five images will be shown next to each other in each row. The default is 3. There are gaps between the images. When an image is clicked it opens a modal dialog with the full size image.

Return a complete HTML file with both the implementation of the Web Component several example uses of it. Use https://picsum.photos/300/200 URLs for those example images.'

It took a few follow-up prompts using llm -c:

llm -c 'Use a real modal such that keyboard shortcuts and accessibility features work without extra JS'

llm -c 'Use X for the close icon and make it a bit more subtle'

llm -c 'remove the hover effect entirely'

llm -c 'I want no border on the close icon even when it is focused'

Here's the full transcript, exported using llm logs -cue.

Those five prompts took:

225 input, 3,269 output
2,243 input, 2,908 output
4,319 input, 2,516 output
6,376 input, 2,094 output
8,151 input, 1,806 output

Added together that's 21,314 input and 12,593 output for a grand total of 4.8436 cents.

The guide to migrating from Gemini 2.5 reveals one disappointment:

Image segmentation: Image segmentation capabilities (returning pixel-level masks for objects) are not supported in Gemini 3 Pro or Gemini 3 Flash. For workloads requiring native image segmentation, we recommend continuing to utilize Gemini 2.5 Flash with thinking turned off or Gemini Robotics-ER 1.5.

I wrote about this capability in Gemini 2.5 back in April. I hope they come back in future models - they're a really neat capability that is unique to Gemini.

Tags: google, ai, web-components, generative-ai, llms, llm, gemini, llm-pricing, pelican-riding-a-bicycle, llm-release

Web Component by Google

2024-12-13T18:46:13+00:00

<model-viewer> Web Component by Google

I learned about this Web Component from Claude when looking for options to render a .glb file on a web page. It's very pleasant to use:

<model-viewer style="width: 100%; height: 200px"
  src="https://static.simonwillison.net/static/cors-allow/2024/a-pelican-riding-a-bicycle.glb"
  camera-controls="1" auto-rotate="1"
></model-viewer>

Here it is showing a 3D pelican on a bicycle I created while trying out BlenderGPT, a new prompt-driven 3D asset creating tool (my prompt was "a pelican riding a bicycle"). There's a comment from BlenderGPT's creator on Hacker News explaining that it's currently using Microsoft's TRELLIS model.

Via Claude: options for displaying a glb file on a web page

Tags: 3d, google, microsoft, ai, web-components, generative-ai, claude, blender, pelican-riding-a-bicycle

HTML for People

2024-10-11T01:51:43+00:00

HTML for People

Blake Watson's brand new HTML tutorial, presented as a free online book (CC BY-NC-SA 4.0, on GitHub). This seems very modern and well thought-out to me. It focuses exclusively on HTML, skipping JavaScript entirely and teaching with Simple.css to avoid needing to dig into CSS while still producing sites that are pleasing to look at. It even touches on Web Components (described as Custom HTML tags) towards the end.

Via Hacker News

Tags: css, html, web-components

Quoting Jim Simon

2024-10-01T00:09:29+00:00

[Reddit is] mostly ported over entirely to Lit now. There are a few straggling pages that we're still working on, but most of what everyday typical users see and use is now entirely Lit based. This includes both logged out and logged in experiences.

— Jim Simon, Reddit

Tags: javascript, reddit, web-components, lit-html

My approach to HTML web components

2024-04-30T11:02:48+00:00

My approach to HTML web components

Some neat patterns here from Jeremy Keith, who is using Web Components extensively for progressive enhancement of existing markup.

The reactivity you get with full-on frameworks [like React and Vue] isn’t something that web components offer. But I do think web components can replace jQuery and other approaches to scripting the DOM.

Jeremy likes naming components with their element as a prefix (since all element names must contain at least one hyphen), and suggests building components under the single responsibility principle - so you can do things like <button-confirm><button-clipboard><button>....

He configures these buttons with data- attributes and has them communicate with each other using custom events.

Something I hadn't realized is that since the connectedCallback function on a custom element is fired any time that element is attached to a page you can fetch() and then insertHTML content that includes elements and know that they will initialize themselves without needing any extra logic - great for the kind of pattern encourages by systems such as HTMX.

Tags: javascript, jeremy-keith, progressive-enhancement, web-components

Introducing Enhance WASM

2024-04-08T19:44:20+00:00

Introducing Enhance WASM

“Backend agnostic server-side rendering (SSR) for Web Components”—fascinating new project from Brian LeRoux and Begin.

The idea here is to provide server-side rendering of Web Components using WebAssembly that can run on any platform that is supported within the Extism WASM ecosystem.

The key is the enhance-ssr.wasm bundle, a 4.1MB WebAssembly version of the enhance-ssr JavaScript library, compiled using the Extism JavaScript PDK (Plugin Development Kit) which itself bundles a WebAssembly version of QuickJS.

Via @enhance_dev@fosstodon.org

Tags: javascript, web-components, webassembly, quickjs

Cally: Accessibility statement

2024-04-02T19:38:19+00:00

Cally: Accessibility statement

Cally is a neat new open source date (and date range) picker Web Component by Nick Williams.

It’s framework agnostic and weighs less than 9KB grilled, but the best feature is this detailed page of documentation covering its accessibility story, including how it was tested—in JAWS, NVDA and VoiceOver.

I’d love to see other open source JavaScript libraries follow this example.

Via @wickynilliams

Tags: accessibility, javascript, open-source, web-components

Coroutines and web components

2024-03-09T03:38:53+00:00

Coroutines and web components

I like using generators in Python but I rarely knowingly use them in JavaScript—I’m probably most exposed to them by Observable, which uses then extensively under the hood as a mostly hidden implementation detail.

Laurent Renard here shows some absolutely ingenious tricks with them as a way of building stateful Web Components.

Via Hacker News

Tags: javascript, observable, web-components

Streaming HTML out of order without JavaScript

2024-03-01T16:59:54+00:00

Streaming HTML out of order without JavaScript

A really interesting new browser capability. If you serve the following HTML:

<template shadowrootmode="open">
  <slot name="item-1">Loading...</slot>
</template>

Then later in the same page stream an element specifying that slot:

<span slot="item-1">Item number 1</span>

The previous slot will be replaced while the page continues to load.

I tried the demo in the most recent Chrome, Safari and Firefox (and Mobile Safari) and it worked in all of them.

The key feature is shadowrootmode=open, which looks like it was added to Firefox 123 on February 19th 2024 - the other two browsers are listed on caniuse.com as gaining it around March last year.

Via Hacker News

Tags: browsers, html, web-components

Portable EPUBs

2024-01-25T20:32:38+00:00

Portable EPUBs

Will Crichton digs into the reasons people still prefer PDF over HTML as a format for sharing digital documents, concluding that the key issues are that HTML documents are not fully self-contained and may not be rendered consistently.

He proposes “Portable EPUBs” as the solution, defining a subset of the existing EPUB standard with some additional restrictions around avoiding loading extra assets over a network, sticking to a smaller (as-yet undefined) subset of HTML and encouraging interactive components to be built using self-contained Web Components.

Will also built his own lightweight EPUB reading system, called Bene—which is used to render this Portable EPUBs article. It provides a “download” link in the top right which produces the .epub file itself.

There’s a lot to like here. I’m constantly infuriated at the number of documents out there that are PDFs but really should be web pages (academic papers are a particularly bad example here), so I’m very excited by any initiatives that might help push things in the other direction.

Tags: html, pdf, web-components

HTML Web Components: An Example

2023-11-17T16:33:24+00:00

HTML Web Components: An Example

Jim Nielsen provides a clear example illustrating the idea of the recently coined "HTML Web Components" pattern. It's Web Components as progressive enhancement: in this example a <user-avatar> custom element wraps a regular image, then JavaScript defines a Web Component that enhances that image. If the JavaScript fails to load the image still displays.

Via Hacker News

Tags: javascript, progressive-enhancement, web-components

Web Components Will Outlive Your JavaScript Framework

2023-10-25T17:19:40+00:00

Web Components Will Outlive Your JavaScript Framework

A really clear explanation of the benefit of Web Components built using dependency-free vanilla JavaScript, specifically for interactive components that you might want to embed in something like a blog post. Includes a very neat minimal example component.

Via Hacker News

Tags: javascript, web-components

Quoting Alex Russell

2023-08-15T21:15:16+00:00

Someone asked me today if there was a case for using React in a new app that doesn't need to support IE.

I could not come up with a single reason to prefer it over Preact or (better yet) any of the modern reactive Web Components systems (FAST, Lit, Stencil, etc.).

One of the constraints is that the team wanted to use an existing library of Web Components, but React made it hard. This is probably going to cause them to favour Preact for the bits of the team that want React-flavoured modern webdev.

It's astonishing how antiquated React is.

— Alex Russell

Tags: alex-russell, javascript, react, web-components

Shoelace

2022-08-20T20:57:16+00:00

Shoelace

Saw this for the first time today: it’s a relatively new library of framework-agnostic Web Components, built on lit-html and covering a huge array of common functionality: buttons and sliders and dialogs and drawer interfaces and dropdown menus and so on. The design is very clean, the documentation is superb—and it looks like you can cherry pick just the components you are using for a pretty lean addition to your page weight. So refreshing to see libraries like this that really take advantage of modern web standards.

Via Adam Rackis

Tags: css, javascript, web-standards, web-components, lit-html

PyScript demos

2022-04-30T21:50:53+00:00

PyScript demos

PyScript was announced at PyCon this morning. It’s a new open source project that provides Web Components built on top of Pyodide, allowing you to use Python directly within your HTML pages in a way that is executed using a WebAssembly copy of Python running in your browser. These demos really help illustrate what it can do—it’s a fascinating new piece of the Python web ecosystem.

Via @simonw

Tags: python, web-components, webassembly, pyodide

Web Components as Progressive Enhancement

2022-04-21T21:33:15+00:00

Web Components as Progressive Enhancement

I think this is a key aspect of Web Components I had been missing: since they default to rendering their contents, you can use them as a wrapper around regular HTML elements that can then be progressively enhanced once the JavaScript has loaded.

Via Alex Russell

Tags: web-components

lite-youtube-embed

2022-03-08T21:13:39+00:00

lite-youtube-embed

Handy Web Component wrapper around the standard YouTube iframe embed which knocks over 500KB of JavaScript off the initial page load—I just added this to the datasette.io homepage and increased the Lighthouse performance score from 51 to 93!

Via datasette.io/issues/93

Tags: iframes, paul-irish, youtube, web-performance, web-components

SQLime: SQLite Playground

2022-01-17T19:08:12+00:00

SQLime: SQLite Playground

Anton Zhiyanov built this useful mobile-friendly online playground for trying things out it SQLite. It uses the sql.js library which compiles SQLite to WebAssembly, so it runs everything in the browser—but it also supports saving your work to Gists via the GitHub API. The JavaScript source code is fun to read: the site doesn’t use npm or Webpack or similar, opting instead to implement everything library-free using modern JavaScript modules and Web Components.

Via Anton Zhiyanov

Tags: javascript, sqlite, web-components, webassembly, anton-zhiyanov

Weeknotes: Shaving some beautiful yaks

2021-12-01T03:43:18+00:00

I've been mostly shaving yaks this week - two in particular: the Datasette table refactor and the next release of git-history. I also built and released my first Web Component!

A Web Component for embedding Datasette tables

A longer term goal that I have for Datasette is to figure out a good way of using it to build dashboards, tying together summaries and visualizations of the latest data from a bunch of different sources.

I'm excited about the potential of Web Components to help solve this problem.

My datasette-notebook project is a very early experiment in this direction: it's a Datasette notebook that provides a Markdown wiki (persisted to SQLite) to which I plan to add the ability to embed tables and visualizations in wiki pages - forming a hybrid of a wiki, dashboarding system and Notion/Airtable-style database.

It does almost none of those things right now, which is why I've not really talked about it here.

Web Components offer a standards-based mechanism for creating custom HTML tags. Imagine being able to embed a Datasette table on a page by adding the following to your HTML:

<datasette-table
    url="https://global-power-plants.datasettes.com/global-power-plants/global-power-plants.json"
></datasette-table>

That's exactly what datasette-table lets you do! Here's a demo of it in action.

This is version 0.1.0 - it works, but I've not even started to flesh it out.

I did learn a bunch of things building it though: it's my first Web Component, my first time using Lit, my first time using Vite and the first JavaScript library I've ever packaged and published to npm.

Here's a detailed TIL on Publishing a Web Component to npm encapsulating everything I've learned from this project so far.

This is also my first piece of yak shaving this week: I built this partly to make progress on datasette-notebook, but also because my big Datasette refactor involves finalizing the design of the JSON API for version 1.0. I realized that I don't actually have a project that makes full use of that API, which has been hindering my attempts to redesign it. Having one or more Web Components that consume the API will be a fantastic way for me to eat my own dog food.

Link: rel="alternate" for Datasette tables

Here's an interesting problem that came up while I was working on the datasette-table component.

As designed right now, you need to figure out the JSON URL for a table and pass that to the component.

This is usually a case of adding .json to the path, while preserving any query string parameters - but there's a nasty edge-case: if your SQLite table itself ends with the string .json (which could happen! Especially since Datasette promises to work with any existing SQLite database) the URL becomes this instead:

/mydb/table.json?_format=json

Telling users of my component that they need to first construct the JSON URL for their page isn't the best experience: I'd much rather let people paste in the URL to the HTML version and derive the JSON from that.

This is made more complex by the fact that, thanks to --cors, the Web Component can be embedded on any page. And for datasette-notebook I'd like to provide a feature where any URLs to Datasette instances - no matter where they are hosted - are turned into embedded tables automatically.

To do this, I need an efficient way to tell that an arbitrary URL corresponds to a Datasette table.

My latest idea here is to use a combination of HTTP HEAD requests and a Link: rel="alternate" header - something like this:

~ % curl -I 'https://latest.datasette.io/fixtures/compound_three_primary_keys'
HTTP/1.1 200 OK
date: Sat, 27 Nov 2021 20:09:36 GMT
server: uvicorn
Link: https://latest.datasette.io/fixtures/compound_three_primary_keys.json; rel="alternate"; type="application/datasette+json"

This would allow a (hopefully fast) fetch() call from JavaScript to confirm that a URL is a Datasette table, and get back the JSON that should be fetched by the component in order to render it on the page.

I have a prototype of this in Datasette issue #1533. I think it's a promising approach!

It's also now part of the ever-growing table refactor. Adding custom headers to page responses is currently far harder than it should be.

sqlite-utils STRICT tables

SQLite 3.37.0 came out at the weekend with a long-awaited feature: STRICT tables, which enforce column types such that you get an error if you try to insert a string into an integer column.

(This has been a long-standing complaint about SQLite by people who love strong typing, and D. Richard Hipp finally shipped the change for them with some salty release notes saying it's "for developers who prefer that kind of thing.")

I started researching how to add support for this to my sqlite-utils Python library. You can follow my thinking in sqlite-utils issue #344 - I'm planning to add a strict=True option to methods that create tables, but for the moment I've shipped new introspection properties for seeing if a table uses strict mode or not.

git-history update

My other big yak this week has been work on git-history. I'm determined to get it into a stable state such that I can write it up, produce a tutorial and maybe produce a video demonstration as well - but I keep on finding things I want to change about how it works.

The big challenge is how to most effectively represent the history of a bunch of different items over time in a relational database schema.

I started with a item table that presents just the most recent version of each item, and an item_version table with a row for every subsequent version.

That table got pretty big, with vast amounts of duplicated data in it.

So I've been working on an optimization where columns are only included in an item_version row if they have changed since the previous version.

The problem there is what to do about null - does null mean "this column didn't change" or does it mean "this column was set from some other value back to null"?

After a few different attempts I've decided to solve this with a many-to-many table, so for any row in the item_version table you can see which columns were explicitly changed by that version.

This is all working pretty nicely now, but still needs documentation, and tests, and then a solid write-up and tutorial and demos and a video... hopefully tomorrow!

One of my design decisions for this tool has been to use an underscore prefix for "reserved columns", such that non-reserved columns can be safely used by the arbitrary data that is being tracked by the tool.

Having columns with names like _id and _item has highlighted several bugs with Datasette's handling of these column names, since Datasette itself tries to use things like ?_search= for special query string parameters. I released Datasette 0.59.4 with some relevant fixes.

A beautiful yak

As a consumate yak shaver this beautiful yak that showed up on Reddit a few weeks ago has me absolutely delighted. I've not been able to determine the photography credit.

Releases this week

s3-credentials: 0.7 - (7 releases total) - 2021-11-30
A tool for creating credentials for accessing S3 buckets
datasette: 0.59.4 - (102 releases total) - 2021-11-30
An open source multi-tool for exploring and publishing data
datasette-table: 0.1.0 - 2021-11-28
A Web Component for embedding a Datasette table on a page

TIL this week

Tags: projects, npm, datasette, web-components, weeknotes, git-scraping

Weeknotes: Learning Kubernetes, learning Web Components

2021-10-28T02:44:33+00:00

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.

Datasette 0.59.1

A few weeks ago I wrote about finding and reporting an asyncio bug in Python 3.10 that I discovered while trying to get Datasette to work on the latest release of Python.

Łukasz Langa offered a workaround which I submitted as a PR to the Janus library that Datasette depends on.

Andrew Svetlov landed and shipped that fix, which unblocked me from releasing Datasette 0.59.1 that works with Python 3.10.

The last step of the Datasette release process, after the package has been released to PyPI, is to build a new Docker image and publish it to Docker Hub. Here's the GitHub Actions workflow that does that.

It turns out this stopped working when I released Datasette 0.59! I was getting this cryptic error message half way through the image build process:

/usr/bin/perl: error while loading shared libraries: libcrypt.so.1: cannot open shared object file: No such file or directory

I opened an issue for myself and started investigating.

The culprit was this section of the Datasette Dockerfile:

# software-properties-common provides add-apt-repository 
# which we need in order to install a more recent release 
# of libsqlite3-mod-spatialite from the sid distribution 
RUN apt-get update && \ 
    apt-get -y --no-install-recommends install software-properties-common && \ 
    add-apt-repository "deb http://httpredir.debian.org/debian sid main" && \ 
    apt-get update && \ 
    apt-get -t sid install -y --no-install-recommends libsqlite3-mod-spatialite && \ 
    apt-get remove -y software-properties-common && \

This was a hack I introduced seven months ago in order to upgrade the bundled SpatiaLite to version 5.0.

SpatiaLite 5.0 wasn't yet available in Debian stable back then, so I used the above convoluted hack to install it from Debian unstable ("Sid") instead.

When the latest stable version of Debian, Debian Bullseye, came out on October 9th my hack stopped working! I guess that's what I get for messing around with unstable software.

Thankfully, Bullseye now bundles SpatiaLite 5, so the hack I was using is no longer necessary. I upgraded the Datasette base image from python:3.9.2-slim-buster to 3.9.7-slim-bullseye, installed SpatialLite the non-hacky way and fixed the issue.

Doing so also dropped the size of the compressed Datasette image from 94.37MB to 78.94MB, which is nice.

Learning Kubernetes

Datasette has been designed to run in containers from the very start. I have dozens of instances running on Google Cloud Run, and I've done a bunch of work with Docker as well, including trying out mechanisms to programatically launch new Datasette containers via the Docker API.

I've dragged my heels on really getting into Kubernetes due to the infamously tough learning curve, but I think it's time to dig in, figure out how to use it and work out what new abilities it can provide me.

I've spun up small a Kubernetes cluster on Digital Ocean, mainly because I trust their UI to help me not spend hundreds of dollars by mistake. Getting the initial cluster running was very pleasant.

Now I'm figuring out how to do things with it.

DigitalOcean's Operations-ready DigitalOcean Kubernetes (DOKS) for Developers course (which started as a webinar) starts OK and then gets quite complicated quite fast.

I got Paul Bouwer's hello-kubernetes demo app working - it introduced me to Helm, but that operates at a higher level than I'm comfortable with - learning my way around kubectl and Kubernetes YAML is enough of a mental load already without adding an extra abstraction on top.

I'm reading Kubernetes: Up and Running which is promising so far.

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 once I get it working.

Learning Web Components

Datasette's visualization plugins - in particular 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, which Datasette has supported since Datasette 0.54.

As such, I'm deeply intrigued by Web Components - which had a big moment this week when it was revealed that Adobe had used them extensively for Photoshop 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) and Snowpack which help bridge the gap between build-tooling-dependent npm packages and the modern world of native browser ES 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.

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

Releases this week

datasette: 0.59.1 - (99 releases total) - 2021-10-24
An open source multi-tool for exploring and publishing data
datasette-hello-world: 0.1 - 2021-10-21
The hello world of Datasette plugins

TIL this week

Tags: docker, datasette, kubernetes, web-components, weeknotes

Tonic

2021-10-23T05:21:54+00:00

Tonic

Really interesting library for building Web Components: it’s tiny (just 350 lines of code), works directly in browsers without any compile or build step and makes very creative use of modern JavaScript features such as async generators.

Via Alex Russell

Tags: javascript, web-components

matthewp/haunted: React's Hooks API implemented for web components

2018-10-31T01:04:33+00:00

matthewp/haunted: React's Hooks API implemented for web components

It’s been fascinating over the past few days watching various frontend web stacks start playing with the new ideas introduced by the proposed React hooks API. lit-html is one of my favourite React alternatives—it’s built on web components and makes really clever use of ES6 template literals (in place of React’s JSX, which requires an additional compilation step). With Haunted Matthew Phillips explores the combination of lit-html, web components and hooks-style state management.

Via @matthewcp

Tags: javascript, react, web-components, lit-html