"Turning Google Sheets into phone-friendly webapps" (TiddlyWiki in the comments)

Café
#1

I read this cool article recently:

I have done something similar with the Airtable-esque Grist (biggest one being a survey output-explorer) but that’s just for browsing output, and it’s not very responsive to mobile.

Above all though, it made me think of TiddlyWiki, which is responsive to mobile devices and can also have buttons and the like. Perhaps unsurprisingly, there are mentions of TiddlyWiki in the comments (1, 2, 3), as well as HyperCard which partly inspired it.

Are there any small “webapps” you have created using TW? They may not all be appropriate for sharing more widely as a showcase or plugin, but it would be interesting to hear how people are using TW.

#2

I will start with my own mini webapp.

It tells me jokes I found funny enough at some point to write down. It is also easy to add new jokes.

I’ve been a subscriber to a daily joke newsletter since at least 2009: it was Al Lowe’s CyberJoke3000, which ended its run in late 2024.

I saved the best ones to a folder all these years, but I rarely went back and read them. They also had a lot of boilerplate around the jokes that gets in the way.

When it ended its run, in honour of the laughs and to preserve them better, I:

  1. Exported all the emails into a folder using Thunderbird
  2. Got AI to write me a script to extract between the two <hr>'s plus some special cases (thankfully Al kept to the same format for decades), into a CSV
  3. I initially tried generating the title with AI but it spoiled the punchline too often. So instead, I gave it a randomly-generated series of characters.
  4. Named some columns things after fields title, text, tags
  5. Changed the CSV to JSON
  6. Imported the JSON of jokes as separate tiddlers into TiddlyWiki

I now have a tell me a joke button that gives me a random tiddler tagged $:/jokes. I also have a separate button to add a joke under the new newsletter that Al recommended, Daily HaHa’s, which carries on the same spirit. The add joke button creates tiddlers that start with $:/Jokes/ in the title, with some randomly generated text afterwards (so they don’t appear in search), plus the tag $:/jokes.

#3

Sounds interesting. Could you share it?

1 Like
#4

Sure. For the whole extraction process - that relied on some custom scripts that AI helped with. I would say it depends on the data.

I will however share the two buttons I made.

Tell me a joke

This relies on @saqimtiaz’s shuffle operator, which should be added separately.

<$button tooltip="Get a random joke tiddler" class=<<tv-config-toolbar-class>> >
😄

<$action-navigate $to={{{[tag[$:/jokes]_shuffle[]last[]]}}} />

<$list filter="[<tv-config-toolbar-text>match[yes]]">
<span class="tc-btn-text">
<$text text="tell me a joke" />
</span>
</$list>
</$button>

Add a joke

First, import my alphaNumericGenerator.js as a separate tiddler:

/*\
title: alphaNumericGenerator
type: application/javascript
module-type: macro

Generate an alphanumeric string of 10 to 12 characters
\*/
(function(){
"use strict";

exports.name = "alphaNumericGenerator";
exports.params = {};
exports.run = function alphaNumericGenerator() {
return Math.random().toString(36).slice(2).toUpperCase() // uppercase so there are no distracting humps in the title
};

})();

Then, the button:

<$button tooltip="Create new joke tiddler" class=<<tv-config-toolbar-class>> >
😄

<$action-sendmessage $message="tm-new-tiddler" title=`$:/Jokes/$(alphaNumericGenerator)$` tags="$:/jokes" source="Daily HaHa’s" />

<$list filter="[<tv-config-toolbar-text>match[yes]]">
<span class="tc-btn-text">
<$text text="add joke" />
</span>
</$list>
</$button>

By the way, the buttons have these two tags $:/tags/Actions and $:/tags/PageControls.

I might change to a proper icon once TW switches to Lucide icons, but the emoji will do for now! It would bother me more if they didn’t happen to be on a new line. These buttons are smaller than normal buttons by the fact they have an emoji instead of a TW-format icon.

1 Like