A Weird Imagination

Loading multiple files without ZIP

The problem#

Last time, I showed how you can let a user have control over their data stored in a web app's OPFS by transferring directories in or out of the browser as ZIP files. But it would be more convenient if the user could just transfer folders instead without needing the extra step of going through an archive manager. There's no shortcut for getting data out of the browser: we can only save one file at a time (unless we use the Chrome-only File System Access API). But there is a cross-browser way to load multiple files, or even nested directories, into the browser.

The solution#

The HTML Drag and Drop API supports transferring multiple files and directories, although the details are a bit messy:

const target = document.getElementById("dropTarget");
// Required to make drop work.
target.addEventListener("dragover", (e) => e.preventDefault());
target.addEventListener("drop", async (e) => {
  await Promise.allSettled([...e.dataTransfer.items]
    .map(async (item) => {
      if (item.getAsFileSystemHandle) {
        await processFileSystemHandle(dir,
          await item.getAsFileSystemHandle());
      } else {
        await processFileSystemEntry(dir,

As you can see, for cross-browser support, we need to handle both getAsFileSystemHandle() and webkitGetAsEntry(). And, unfortunately, they return different types, so those two process*() functions really are pretty different:

async function processFileSystemHandle(dir, handle) {
  if (handle.kind === "directory") {
    const subdir = await dir.getDirectoryHandle(handle.name,
                             {create: true});
    for await (const entry of handle.values()) {
      await processFileSystemHandle(subdir, entry);
  } else /* handle.kind === "file" */ {
    await writeFile(await dir.getFileHandle(handle.name,
                              {create: true}),
                    await handle.getFile());
async function processFileSystemEntry(dir, entry) {
  async function readDirectory(directory) {
    let dirReader = directory.createReader();
    let getEntries = async () => {
      const results = await (new Promise((resolve, reject) =>
        dirReader.readEntries(resolve, reject)));
      if (results.length) {
        return [...results, ...await getEntries()];
      return [];

    return await getEntries();

  if (entry.isDirectory) {
    const subdir = await dir.getDirectoryHandle(entry.name,
                             {create: true});
    for (const el of await readDirectory(entry)) {
      await processFileSystemEntry(subdir, el);
  } else /* entry.isFile */ {
    const file = new Promise((resolve, reject) =>
      entry.file(resolve, reject));
    await writeFile(await dir.getFileHandle(entry.name,
                              {create: true}),
                    await file);

(These assume the writeFile() helper from last week's post to handle writing inside a Web Worker as necessary.)

The details#

Read more…

ZIP web app local data

The problem#

In my previous post, I gave some tips for making a web app save and load its data as a file to give the user control over their data. But for many applications, it's useful to think of the user's data as multiple files, possibly organized into directories. OPFS lets a web app store local data with a filesystem-like API, but, due to security concerns, there's no direct access to the user's real filesystem, so there's no straightforward way for the user to view or manipulate that data.

The solution#

The common way to deal with this kind of issue is to stuff all of the files into one file, reducing it to a solved problem. We'll use the ZIP archive file format as it's pretty universally supported, so the user can likely use such files. In these examples, I use the zip.js library, so you'll have to import zip-fs.min.js (or equivalent) to use them.

In these functions, dir is an OPFS directory: either the root directory from navigator.storage.getDirectory() or a subdirectory's FileSystemDirectoryHandle. They input/output the ZIP files as Blobs; use the helpers from my previous post to actually connect to the user's filesystem.

Downloading a directory as a ZIP is simple:

async function zipDirectory(dir) {
  const zipFs = new zip.fs.FS();
  await zipFs.root.addFileSystemHandle(dir);
  return await zipFs.exportBlob();

Reading a ZIP file into OPFS is more complicated and must be done inside a Web Worker (due to using createSyncAccessHandle()):

async function unzipToDirectory(zipfile, dir) {
  const z = new zip.fs.FS();
  await z.importBlob(zipfile);

  async function extract(z, dir) {
    if (z.directory) {
      const childDir = z.name
        ? await dir.getDirectoryHandle(z.name,
                    { create: true })
        : dir;
      for (const child of z.children) {
        await extract(child, childDir);
    } else {
      await writeFile(
        await dir.getFileHandle(z.name, { create: true }),
        await (await z.getBlob()).arrayBuffer());

  await extract(z.root, dir);
async function writeFile(file, contents) {
  const handle = await file.createSyncAccessHandle();
  if (contents.arrayBuffer) contents = await contents.arrayBuffer();

The details#

Read more…

Keeping web app data local

The problem#

Users don't tend to have a lot of control over their data in web apps. Most often, the data is stored on a server the user does not control—or, if they do control it, we're talking about self-hosting which is much more involved then just navigating to a web app in a browser. Alternatively, the data may be stored locally, but using various browser-specific mechanisms which make it difficult for the user to share, backup, or otherwise reason about the data the web app manipulates.

While desktop apps can replicate these problems, usually they store data in files either explicitly chosen by the user or in well-known locations.

The solution#

Files are a flexible interface to let users do whatever they want with their data, so let's use them for web apps, too.

To save a file to the user's computer, modified from this example:

function saveFile(filename, data, mimeType) {
  const element = document.createElement("a");
  const url = URL.createObjectURL(new Blob([data],
                                  { type: mimeType }));
  element.setAttribute("href", url);
  element.setAttribute("download", filename);
// Save a JSON file:
  JSON.stringify({"Hello": "World!"}, null, 2),

(Consider using beforeunload if the user has unsaved changes to make sure they really do have their data in the file, and not just in the browser.)

To load a file from the user's computer:

function loadFile() {
  const element = document.createElement("input");
  element.type = "file";
  return new Promise((resolve, reject) => {
      () => resolve(element.files[0]));
      () => reject("User canceled."));
// loadFile() must be called from a real user click.
  async (e) => myLoadFunc(await loadFile()));

The details#

Read more…

Serverless WebRTC

The problem#

While in my last post, I said serverless WebRTC was too cumbersome, I wanted to try to see how streamlined I could make the process. While researching, I did find a variant of serverless-webrtc called serverless-webrtc-qrcode as well as a similar demo, webrtc-qr that both use QR codes as an easy way to transmit the offer strings. But both require that both sides have a camera to scan QR codes, while my use case is a WebRTC connection between my desktop without a camera and my smartphone.

The solution#

minimal-webrtc now has a checkbox to enable serverless mode. In that mode, the QR code shown by the host is a much longer URL that includes the initial WebRTC offer. Opening that URL on another device (or in another browser window) will show another QR code along with a "Copy" button. With the first device, either press the "Scan QR code" button and point it at the QR code or use some other mechanism to copy the text and paste it into the text area labeled "Paste offer here:".

To run it locally, download the source code and run a web server to serve the wwwroot/ directory. If both devices can run a web server, then you can just access it via localhost on each, but, as before, because WebRTC requires HTTPS, to run it on your local network, you may need to set up a self-signed certificate.

The details#

Read more…

Minimal WebRTC

The problem#

I wanted to stream video of myself and my screen at the same time. My plan was to put the video of myself on my screen and stream the entire screen, but I do not have a camera on my desktop. On the other hand, I do have a smartphone with a camera, so I needed a way to show the video from my phone's camera on my desktop's screen.

There are a few Android apps that promise to do so, but none of the ones I tried worked very well. But I know that video chat works just fine on my phone, including in a web browser using WebRTC which supports peer-to-peer video chat between two web browsers, so it should be easy to show the video from my phone's camera in a browser window on my desktop. Unfortunately, I couldn't find any straightforward solution for setting up just a peer-to-peer video link.

The solution#

Open minimal-webrtc on the computer you want the video streamed to. A QR code will appear; use your smartphone to read it and after approving access to the camera, the video should appear in the first browser window. This is intended to be used for local connections, so it may not work if the two devices are not on the same network. Only the signaling to set up the connection goes to the minimal-webrtc server, the actual video will be sent peer-to-peer over the local network.

To get just the video as a bare window with no decorations, use chromium --app=uri to get rid of the address bar, etc., and this script to remove the rest.

To host it yourself, download the source code1 and use the included run_daphne.sh script (which assumes daphne is installed) and nginx configuration. As WebRTC requires HTTPS, to run it on your local network, you may need to set up a self-signed certificate.

The details#

Read more…

Change title based on visible section

The problem#

In the computer game Keep Talking and Nobody Explodes, the "bomb expert" players are looking at a fictional "bomb manual", often frantically searching for the right page. While the intention is for this document to be printed out—and physical paper makes it relatively easy to keep the headings at the top of each page visible—there is also a web version if you prefer to view it on a screen (or don't have access to a printer). Scrolling through the web version feels a lot more awkward than flipping through the paper version; one workaround I found was to open different pages in different browser tabs or windows, but then identifying which page is in which window is still awkward.

The solution#

I created a userscript, "BombManual.com Tab Title and TOC" that automatically updates the tab title to match the title of the currently visible page. It additionally adds a table of contents to make it easy to quickly open all of the pages in separate tabs or windows.

If you do not already have one, you will need to install a userscript manager extension for your browser to use it. Alternatively, you could bookmark this bookmarklet, but as you would have to click that bookmark on every instance of the page you opened, that's less convenient.

The details#

Read more…

User scripts on iPad

The problem#

Google Forms is a tool that allows for easily setting up simple structured data entry. But it's designed to make it easy to analyze a lot of data that has been entered, not to view a single entry. There is a view to show individual entries, but it's very cluttered due to including all of the options that were not selected as well as those that were selected. A display that showed only the entries that were selected could be used as a quick and dirty way to make a form letter-like website.

To make this problem harder, the solution has to run on iPad, a platform not exactly known for its user programmability.

The solution#

Bookmark this link: hide unselected items in Google Form. Then select that bookmark when on the appropriate Google Forms page. Note that in addition to hiding unselected entries, if the entry that is not select has a value of "Yes", then its entire section will be hidden. If you don't want that behavior, bookmark this variant of the script instead.

The details#

Read more…

Devlog: Anagram Bagels: Part 2

There were two non-trivial aspects of the design of Anagram Bagels: puzzle generation, which I discussed in my last post, and how to handle saving and sharing puzzles, which I will discuss in this post. I wanted an intuitive design that satisfied the following constraints:

  1. It should be possible to easily share a puzzle with another person in the form of a link.

  2. The difference between a link to the game and a link to a specific puzzle should be clear. (So the user doesn't accidentally bookmark a link to a specific puzzle when meaning to bookmark the game.)

  3. The game should gracefully handle the common mobile browser behavior of reloading the page if it hasn't been viewed in a while.

  4. Opening multiple instances of the game in separate tabs shouldn't break anything. (This is the default for web sites, so it's true unless doing something to actively break this assumption.)

Read more…

Devlog: Anagram Bagels: Part 1


I have a friend who plays a lot of simple puzzle games on their phone. One of them is this word puzzle, which is variant of Bagels (also known as Bulls and Cows or by the trademarked name Mastermind) where the secret is an English word and the guesses must be valid words. Additionally, the alphabet of the guesses is limited to a set selected for the puzzle, and the feedback is given for specific letters as opposed to giving just a count of the correct letters.

While playing the game, my friend would often find that it would be useful to type letters out of order. For example, once determing that the word ends in "ing", it would be easier to simply write that in at the end and then fill out the beginning. As the feedback means the player often knows exactly what they want to write in the middle of the word, typing each word in order from the start to end can be awkward.

As the game seems quite simple, I decided to reimplement it and improve upon the UI. My implementation is in HTML5/JavaScript and should work in any modern browser. Play Anagram Bagels or view the source.

Read more…

Some things not allowed are compulsory


The totalitarian principle is a concept in physics that states

Everything not forbidden is compulsory.

In order words, any observable outcome not forbidden by a physical law will occur. The many-worlds interpretation of quantum mechanics suggests an even stronger statement that for every such outcome, there is some alternate world in which it does occur.

Programming language design#


Everything not forbidden is compulsory.

may sound absurd, its contrapositive

Anything not mandatory is forbidden.

sounds more like a rule you would expect in a computer system, although it may not always be desirable. While it does not fully apply, programming languages and command lines are infamously picky about their inputs:

If you forget a comma in your English essay, your teacher doesn’t hand it back and say, I can’t understand any of this.

In contrast, HTML parsers have historically been quite flexible in what they accept. There's reason to believe this lack of strictness was a strength: less technical users could create their web pages using incorrect HTML that would still work. Somewhat related, browser vendors were also able to add their own extensions and explore what could be added to HTML. On the other hand, the result was large amounts of invalid HTML to the point that HTML5 had to add explicit rules for parsing invalid HTML.

Law and security#

Alternatively, the weaker statement,

Everything which is not forbidden is allowed.

enshrines the principle of law that citizens are free to do whatever they will except when explicitly forbidden by a law.

On the other hand, the same principle applied to computer security is called enumerating badness and is widely held to be a bad idea: put simply, while you as the user of your computer want the freedom to do whatever you want on it, you probably don't want arbitrary code which may have been written by malicious actors to have those same freedoms and it's unfeasible to list all the bad programs as much as you may try.

Instead, many modern systems support the reverse,

Everything which is not allowed is forbidden.

or enumerating goodness, in the form of software repositories and app stores. Although some of these implementations unfortunately go against user freedom.


While it seems like we have exhausted the variants of this phrasing, as the title of this post suggests, some software systems follow yet another one:

Some things not allowed are compulsory.

Yes, you read that right.

Using the Windows Azure .NET SDK v2.3, in a web role, the web.config file contained the following automatically generated XML:

        <add type="Microsoft.WindowsAzure.Diagnostics.DiagnosticMonitorTraceListener, Microsoft.WindowsAzure.Diagnostics, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" name="AzureDiagnostics">
          <filter type="" />

I was cleaning up warnings in this project hoping narrow down an unrelated issue and saw this warning on the <filter type="" /> tag:

The 'type' attribute is not allowed.

Naturally, I removed the type="" attribute which didn't seem to be doing anything since the warning said it wasn't even allowed. To my surprise, when I ran the code, it failed to run due to the initialization code throwing an exception with the following message:

Required attribute 'type' not found.

Hence, the type attribute is apparently both not allowed and compulsory.

As the message telling me it is not allowed was merely a warning and not an exception, I put it back and decided not to worry too much about it. Removing the <filter /> tag entirely also seemed to work and eliminate the warning as well.