The Narrative

The process, theoretically, is self-contained, in that you can page through it and following my thinking from item to item, section to section. But here's an attempt at supplying an overall narrative that might help guide you through the entire project from an overall vantage point, and, which, conveniently, might help me figure out where to go next when I drift away from and back toward this project over time.

The First Whole Part

I kicked this whole project off in mid-2023, and got through a bunch of stuff. Then I forgot the whole thing existed as I moved on to other things.

Basics

The project starts with some basics: getting stuff from the page, console logging, adding stuff to the page, and then removing stuff from the page.

Note that as I'm working through these examples, I'm developing the "library code," in the most mundane way possible—by just adding functions directly to my demo script files, and then copying those functions from demo to demo, file to file.

A Skitch of Interactivity

From there we add in a little interactivity by responding to a click event. Throughout the project I try to give myself freedom to loop back around to sections or concepts to update them based on later thinking; here's a case where I did that, which is noted in the post explanation.

With a little interactivity in hand I look at moving stuff around on the page and hiding and showing stuff.

Moving the Library Code into a Module

In this section I worked through how I moved the library code into a centralized module file and out of the individual script files. This makes for a somewhat important turning point in the process, and is maybe where things start to get a bit more interesting.

Templates and Dialogs

Getting a little more interesting, while at the same time getting a little sloppier with when I actually include explanatory content, we find me moving through the use of <template> elements to produce reproducable items, and <dialog> elements as basic interactivity items.

Fetching Data (and Using User Input)

Grabbing data from out there comes in via the use of fetch. That lets me do some basic stuff with iteration and user input.

Local Storage

In my last burst of effort before I fell off this project for a long time, I ran through some examples of using browser local storage to save items to storage, retrieve items from storage, and remove items from storage.

The "What am I doing here" Moment

Around the time I dropped off this project I wrote up some thoughts about how this directionless project could probably use some direction:

It would probably help if I had an idea what I was trying to make with this library, of some practical application this is all intended to go toward. I’ve got a couple ideas in mind.

One is for a personal project I’m thinking of—a sort of animated list where individual items are inserted into the list one after the other, with the surrounding list animated and updated to accommodate the new items. There might be a scrubber, or something, which allows the list to be reviewed over time.

Another is a customizable workout list app, of sorts. Sort of a glorified take on a todo list, where you can set up lists of workouts complete with reps and sets and possibly cycles, rearrange the list as needed, and then save or export lists. There can also be a “check it off” view that lets you follow the workout and check each cycle or set off as you complete it (which, if you’re like me, and you blank out easily on your counts, would be helpful, when you’re trying to remember if you’re on set two or three of something).

Finally, I have this idea for a list—lists, lists, why do all my ideas involve lists?—that's essentially a to-do list that checks for uniqueness as items are entered. Each item can have a couple fields associated with it and all fields need to be unique when entered. When one field is filled out, if there's existing entries with that same field value, they should display in a filtered view, to confirm the new entry isn't already available, or as a convenience for just filtering the list looking for something specific that needs to be checked off. I don't think this idea is that crazy, I think it's just a shade specific to an interest of mine, and a bit more advanced than what I can pull off with a regular checklist in the Apple Notes app.

There’s more- or less-fancy versions of all of these ideas, and different ways they could be made to demonstrate various techniques. Ideally I would build all of these in a progressive enhancement manner, where the core functionality would work without JS at all, but that might be a bit beyond the scope of this project. (I'm not particularly interested in setting up server side functionality for this stuff right now.) As it's all essentially for demo purposes I'm not going to sweat this too much.

I'm dropping that post draft in above here pretty much as-is for my own future reference.