Brainstorming minimal, single-purpose web tools

At the "Build a Website in an Hour" event yesterday, two participants worked on minimal, single-purpose web tools. One tool provides an easy way to view and modify data in PNG files. Another tool supports caching audio clips (i.e. songs) with service workers so you can listen to audio via the web while offline. Tools like this are immensely useful; web tools to help you get a job done.

Principles

I have been thinking about how I would design a single-purpose web tool. A few principles come to mind:

1. Do one thing really well.
2. Keep it minimal. The UI should have only the controls and features a user needs to achieve their goal (i.e. convert data between formats, calculate the distance between two strings, read an image header, play audio offline).
3. Run in the browser, if possible. I would prefer my data to stay on my device when using single-purpose web tools.
4. Work offline, if possible. Not everyone has robust internet connectivity all the time. As web developers, it is our reponsibility to build experiences for people that are widely usable across environments, including varying internet connectivities.
5. Offer a Progressive Web Application (PWA) experience. For some tools, I would love to be able to bookmark them on my phone screen home page and run as a PWA.
6. No ads.

Implementing support for all of the above principles is time consuming. Offline support is tricky. Some things are really difficult to do in the browser compared to a back-end language that offers more robust APIs for solving different problems. I thus don't see this list as a checklist, rather guidance for building single-purpose web tools.

I am presently working on a tool that lets you take a URL with a list of h-review microformats and makes a page with a map of all of the locations of places being reviewed (as long as the pages contain latitude and longitude information). The tool has a single purpose, but you could use it to make maps for coffee shops, restaurants, parks, museums, and more. I hope to publish this in the next few days. It doesn't work offline and requires some back-end work, but the application is minimal, gets the job done, and has no ads. The source code is open source, too.

I recently came across a web app that provided various stylometry tools. I cannot remember where I found it so I cannot link to it here, but if I find the page I will add a link here. The web app allows you to do word counts and calculate various stylometry metrics. It was a useful playground. A showcase of different metrics with which I could work on a project. The style is simple, there were no ads, and it helped me get the job done.

The role of progressive enhancement

There is an open question about the place of progressive enhancement in single-purpose web tools. Progressive enhancement refers to web experiences that are designed with content at the heart of a web page. Logic may work with JavaScript, but there should be a fall-back in place in case the JavaScript does not load. If the application JavaScript fails to load, an application could fall back to a back-end that addresses a query. I'm still not convinced about whether this is a useful feature: in most cases, I use a single-purpose web tool to do one thing and don't want my data going to a server.

With clear consent about data processing, perhaps a progressively enhanced experience could work. A disclaimer could look like:

The JavaScript for this app could not load. You can still use the app, but your data will be sent to our server for processing instead of your data being processed on your device. Your data will not be saved.

But I still think working in the browser by default is preferred for most things.