tmcw

An interactive, runnable TypeScript val by tmcw

Short URLs A URL shortener in Val Town! This turns URLs into strings like https://tmcw-short.express.val.run/JK Which, well - it's not that short 🤣 but it's a start! It's pretty simple! In this case the storage is a private val because it contains some URLs. Part of the magic here is the venerable hashids module, which produces non-sequential string identifiers from an underlying serial numeric ID. So instead of huge UUIDs or fixed-length IDs like nanoid would generate, this generates short IDs, at least initially - like the example above, which is just "JK".

An interactive, runnable TypeScript val by tmcw

Unfancy blocks In the old days, there was a website called bl.ocks.org which re-hosted content on GitHub Gists and displayed visualizations made in those gists. It wasn't shiny but it was well-crafted and for the little community that used it, it was very nice. This is a much worse, but very small, version of the same kind of program. This also shows you stuff from blocks. It displays readmes, with Titus's lovely micromark . It uses Ian's collected search index of bl.ocks.org to show you examples and thumbnails. It uses Alpine to pull together a little interface. And, of course, Val Town to make it all work.

An interactive, runnable TypeScript val by tmcw

TODO List Every web project needs a todo list, right? This is val.town's first (maybe?) With a healthy dose of htmx and web fundamentals, we're packing the essentials of a TODO list with server persistence and animations into about 60 lines. The data is stored in the @tmcw.todos val, for now. Try it out.

// set by tmcw.todo_list at 2023-10-08T18:17:35.831Z

The Big Story This val, along with @tmcw.big_story , which requests from the New York Times API , and @tmcw.big_stories_ranks , which contains the data, generates a visualization of top stories on the NYTimes homepage. This is here just to ask the question – what happens to cover stories over time? Do they slowly drop down the page, or just get replaced by a fully new lede? So far it doesn't have quite enough data to answer that question. But also, it might be neat because it'll show which kinds of stories make the front page - is it climate, war, politics, or something else? 👉 The Big Story (visualization)

// set by tmcw.big_story at 2023-07-21T13:27:35.553Z

An interactive, runnable TypeScript val by tmcw

Quick poll https://tmcw-poll.express.val.run This val, along with a val called poll_results and a val called poll_options , lets you conduct a little poll using just Val Town! With the express API , this exposes a web interface in which people can click an option and vote. We make sure everyone only votes once by setting a cookie in their browser. This uses htmx to make the voting experience slick, Tailwind to style the UI, and htm to generate HTML for the pages. If you want to use this yourself, fork this val, the poll_results val, and the poll_options val, and customize the options list. You can delete the existing results as well to clear the data.

// set by tmcw.poll at 2023-07-21T07:07:55.166Z

An interactive, runnable TypeScript val by tmcw

This val is simple, and just a way to test the express API.

Zod Zod works great out-of-the-box with Val Town: just import it as npm:zod and parse something! Here's an example below. Tips Right now it's not possible to create a script val that immediately returns a Zod parser because its parsers can't be serialized. It's best to either expose a method that returns a parser, or to create and use the parser in the same val.

An interactive, runnable TypeScript val by tmcw