In An App A Day I take a look at the 18 apps I created this week. First, though, we’re going to explore the App of the Week, jump into the Code Corner for a look at asynchronous web development, and launch an app in Future Focus.
App of the Week :: Interactive Story Engine
My biggest project this week focused on creating a bespoke story engine for writers who don’t normally work with interactive fiction. It stemmed from an interesting experience where WebSim generated a short adventure for me based on an author’s stories. After a few clicks into the story (which the AI was making up on the spot) I decided to pick up the first book in the series.
I had a thought. “Imagine if the author had this short interactive adventure on their website next to the usual stack-o-books.” Author websites tend to default to the Amazon shopping-cart experience where they plonk the author’s wares down on a table and let the covers sell the series.
An author website should do more than an Amazon page, not less.
So I generated a simple story engine that puts most of the text in HTML, instead of JavaScript, in order to make it more legible and easier to edit. Rather than gameplay, the focus is on moving the story forward through time.
The passages have action buttons. Those buttons add minutes to the elapsed story time. They can also enable and disable other actions. Time-based effects can also enable or disable action buttons. And finally, conditional text can be tied to the state of the action buttons. If the player “Eats Flower” then the sentence describing that flower disappears.
With each button press a log entry is added to a panel that is tracking the story time. In my vision of how this works, there are no dead ends or bad outcomes. Just like a story, if the hero fails a quest, they usually pick up a clue or boon that will help them in the next scene.
After making the basic game engine, I then used that HTML page to generate a few helper tools.
A form that generates the HTML for a single passage including conditional text and buttons.
A form that generates a basic stylesheet for the engine.
And finally, a form that takes the HTML passages as input and creates a graph that can help locate missing and orphaned passages.
These can all be found in the list below. Unfortunately, I spent so much time creating the story engine, I didn’t have time to finish an example. I am working on a short interactive adventure, though, and I have all the tools I need to bring it together.
Code Corner :: Asynchronous Web Development
Will the real Web 3.0 stand up? As an old man, I lived through the advent of Web 2.0 when asynchronous communication swept away our loading bars. You no longer had to reload a page to update data. But these developments also made web development more complicated. From that point on, you couldn’t even think about making a website unless you could claim proficiency in a web framework and a handful of libraries.
What if you didn’t have what it takes to become a real web developer? That’s okay, there’s a bloated content management system that will do everything imaginable (except for the exact thing you’re imagining.)
For a long time I fell out of love with the internet. But now with the advent of tools like WebSim and Cursor we have Asynchronous Web Development, an AI-driven approach to creating web apps where the development process is decoupled from clickety-clackety human coding.
Developers interact with AI systems through natural language prompts to describe desired features and functions.
AI generates, modifies, and refines code and content based on these prompts.
Developers can iteratively refine the application by providing additional prompts or feedback, without needing to manually code each change.
The AI can simulate full-stack environments, including mock APIs, allowing for end-to-end application prototyping without requiring actual server infrastructure.
This allows for rapid iteration, lowers technical barriers for everyday users, and enables a more conversational and iterative development process, democratizing web application creation (until it gets ruined again.) Using this process I built 18 apps this week, including a boilerplate author website tailored to my status as “a rising star in the constellation of fantasy.” 😏 Well, I suppose that’s accurate.
With this kind of development cycle, action and perception are coupled again. In a few seconds after prompting for changes, those changes appear and the developer can test the new features immediately. What will this mean for the future of web development when—not just developers—but the users themselves have the power to implement new features on a website?
The HTML, CSS, and client-side JavaScript of a webpage have always been hackable by those who had the skills. Now AI has swept aside the skill requirement. That website you love still hasn’t implemented a dark mode?
“Add a toggle switch in the navbar that adds dark mode to this website.”
I can already do this manually by feeding a website into an LLM, asking for the code, and pasting it into a browser extension that adds user-defined CSS and JavaScript to a website. Let the coders work on more ambitious projects. Meanwhile, I’ll fix the internet so it works just how I want it.
Future Focus :: One More Line
This week I launched a note-taking app, A Line A Day. Visitors can record one line and only one line each day. The posts are saved to the user’s browser and not shown to anyone else. There’s the danger the data will get purged from the user’s browser, so the first new feature should be saving data online. But that’s a task for another day, and only if people start to use the site.
If no one ever uses the site besides me, I’ve only lost about $12 for the domain registration. What I gain, however, is the experience of building and setting up the site.
I anticipate setting up a few more websites like this. Many if not most will fade into obscurity. I’m making small bets, knowing that most will never pay out. After all, the apps I’m creating can be easily recreated, often with less time and effort than I needed to make them.
But small bets like these have little to no downside, so it only takes one payout to cover the losses. This leads to what Nassim Nicholas Taleb calls “convexity” where asymmetrical payouts lead to nonlinear responses. Social media operates under this principle. Users post messages throughout the day hoping one of them, just one, will catch the world’s attention.
With this project I guess I’ll see if unsocial media has any appeal to a wider audience.
Code Calendar :: 18 Apps in 7 Days! 🔥
📅 Monday, July 22, 2024
Dialogue Table (on WebSim) :: A table for creating a dialogue reference table that uses dance notation to signify character speech patterns.
📅 Tuesday, July 23, 2024
Time Slicer (on WebSim) :: Create multiple customizable clocks.
📅 Wednesday, July 24, 2024
Oblique Writer (on WebSim) :: A 100-card deck that applies Oblique Strategies to writing fiction. Most of the work was creating the text.
📅 Thursday, July 25, 2024
Author Website (on WebSim) :: A basic placeholder website for an aspiring author named Elysia Stormweaver. After generating this I made some minor edits and uploaded it as my placeholder website.
📅 Friday, July 26, 2024
A Line A Day (on WebSim) :: A daily journal that allows the user to type one sentence, and one sentence only.
Favicon Maker (on WebSim) :: A simple app that generates favicons in different sizes.
📅 Saturday, July 27, 2024
Share Button (on WebSim) :: A social media share button that can be dropped into a website.
Pixel Art Creator (on WebSim) :: Upload images to create pixel art. Sliders for pixel size and amount of "pop".
1990s Web Sim (on WebSim) :: Experience the world wide web circa 1996 in all its glory! I used AI to generate all the images and even the music using ABC notation. I ran images through the Pixel Art Creator above.
Brick by Brick (on WebSim) :: A visualization that explores creativity. Don’t ask me to explain it, though.
You Should Smile More (on WebSim) :: A game that solves sexism.
📅 Sunday, July 28, 2024
Interactive Story Engine (on WebSim) :: A tailored story engine that keeps a log with elapsed story time, and can enable or disable buttons based on choices and elapsed time.
Interactive Passage Creator (on WebSim) :: A form that will create the HTML for the individual passages in the Interactive Story Engine.
Interactive CSS Styles (on WebSim) :: A form that generates the base styles for the story engine.
Interactive Passage Visualizer (on WebSim) :: Paste in the HTML from the Interactive Story Engine and it will create a graph of the story.
Monastic Hours Timer (on WebSim) :: A timer for the monastic practice of praying throughout the day using a Book of Hours.
HydroTracker (on WebSim) :: A simple app to help me track what I've planted in my countertop hydroponic systems (it's mostly artisan lettuces.)
Twine CSS Generator (on WebSim) :: This generates a random stylesheet for use with Twine, a system for" interactive, nonlinear stories." Keep generating until you see a style you like.
Whew! I really kicked into high gear over the weekend!