Indie webbing

@adactio and I see you’ve started on your own text adventure as well! (or was that already there? I seem to remember you saying you’d started something similar)

Scraped my handrolled grid and colors for Utopia and Adam Argyle’s color scheme builder.

I’m still not sure how I want this site to look, but I’ve been more focused on a foundation and less on content and “design.” I like simple. I’m not sure if what I’ve done is simple, more like raw. But I have fallen in love wtih Utopia and this color scheme builder from Adam Argyle. What I like about both are they aren’t “frameworks” or “libraries”. It’s all just CSS custom properties that you can use in however you mark up your templates platform agnostic.

Utopia has a PostCSS plugin however it didn’t work for me. I put off debugging that for a future project and copied and pasted the generated properties. I also need to do some more reading about subgrid as I’m not sure it behaves how I expect.

I found Adam’s post after reading about color-mix palettes. But I like how Adam’s system has worked out text vs background and handles light and dark themes. All based on the HSL values for a primary—brand—color. I’m a prefers-color-scheme: dark user, so extra apologies to anyone viewing this in light mode. But now I can start to think about content and how I want to post. I’m thinking Indiekit. Paul just published an Eleventy preset plugin. Really just need to get it up and running.

Which I’ll end with a reminder from Jeremy Keith from his IndieWebCamp wrap-up (organized by the aforementioned Paul Robert Lloyd)—“What you do with your own website is entirely up to you.”

@todo: fix webmention display @todo: resolve permalink for notes (unix timestamp from gitCommitDate is fragile in CI/CD)

Last weekend we held IndieWebCamp Brighton 2024, the first in Brighton since 2019. I thought I’d collect my thoughts both as a host, and as an attendee.

The first signs something like this might happen (only from my perspective) were back in November, when I tried to gather people for an impromptu Homebrew Website Club while people were in town for ffconf 2023. I had [commented to Ana] on Mastodon that I was missing the Homebrew Website Club that used to run here in Brighton, and she suggested something close to such an event. That met with limited success because of the short notice, but Paul came, and I think we both realized that there may be enough interest. I didn’t know it at the time, but Paul had attended IndieWebCamp Nuremberg 2023 just a few weeks before (which is where the seeds for Brighton 2024 were actually planted).

So we (mostly Paul) got on with organizing things. I’m a member of The Skiff, which we chose for the venue, so I took charge of that bit. On the weekend it meant being first there to open up and last out to lock up. I also took on the pastries for the first day[1], and good local coffee, teas, and milk and milk alternatives. On the weekend I also did my best to make folk feel at home and to tell people about the place and a little local history[2].

Saturday: Introductions, planning, and discussions

After refreshments and some introductions, we started the planning session. IndieWebCamps follow the BarCamp model of collectively planning session. Jeremy officiated the process, and once we’d found a good schedule of discussions, spaces, and times.

There was a session I wanted to participate in for each time slot.

Energy Efficiency

I wanted to be a part of this one because I’ve put so much effort into getting the footprint of my own site as low as possible. We discussed efficiency server-side, client-side, in transmission, and the costs and benefits of single servers vs large data centres.

We explored static sites versus dynamically served sites. Static sites are a good way to serve efficiently, but harder to integrate IndieWeb standards like Webmentions into.

We also discussed how our efforts were a drop in the ocean compared with the vast energy overheads of the elephants like Facebook. I argued that my time with the IndieWeb helped me to advocate for more efficient means of creating and deploying sites in the companies I work for.

Pictures

This site uses a static site build, and the content is committed to a git repository. At the moment, so are the images. This bothers me because git works best with text files, and images will slow down clones over time. I’ve been wondering about storing images separately. Fortunately for me, others share this pain point, and that’s what we talked about in this session.

Various bucket-like solutions were discussed, and Paul Watson shared that a combination of S3 and CloudFront cost him on the order of cents per month for a site which is image heavy (making it, and similar combinations through other vendors a good solution).

Hosting

This was a discussion about the different kinds of hosting. For example, static sites hosted on GitHub, Netlify, Vercel, etc. on one end of the spectrum, virtual private servers (or even real personal servers) on the other end, and middle ground solutions like DreamHost which help to administer server applications in the middle.

We discussed the pros and cons of them all, including avoiding hosting traps which make it hard to move your site. There’s a clear need for a decision tree to help folk starting out to make a good choice without overwhelming them with lots of information. There’s lots more in the linked discussion.

NFC

This was a fun session. Terence bought some NFC tags for us to encode and play with. I configured mine to trigger my study-session shortcut (which sends an h-event to my site with the category and duration of a session) when I wave my phone over it. I successfully did not accidentally try to hijack the session by talking about an ingenious spying device called The Thing, which is an ancestor technology.

Personal website pain points

The final session of the day was a sort of support group, where we could talk about the various problems with our sites as they are now that prevent us from posting to them more, or which just bother us.

A theme which emerged over Saturday was URL regret. Earlier decisions about the structure of a site determine URLs of pages in a way which no longer seems correct. For example, this URL for this page is under /blog/, but I don’t really think of many posts I’ve written on this site as blog entries. In fact, internally they’ve always been managed as posts. URLs link the web together, so we don’t want to break them! The options are:

• Keep pages where they are.
• Move pages and add permanent redirects to them so old links continue to work.
• Move the pages, and accept that links will break. Perhaps give just the most important pages redirects.

Digital gardening was another theme of the day. A traditional blog lends itself to the idea of a feed. A linear collection of entries, usually in chronological order of publication. Chronology is much less important in a digital garden, since the intent is to update posts over time[3]. The move from linear feeds to gardening was the root of some URL regret in this session.

After a day of discussion it feels fantastic to build something! The day was split into about three hours in the morning and three hours after lunch for hacking and writing, and demos after.

In the morning, Scout and I paired to buy a domain name, and wire DNS up to GitHub Pages. Scout is an organizer at the CodeBar Brighton chapter, so she’s no stranger to GitHub (making pages an ideal starting place)! Of course, being DNS, it took us a while to figure out its interaction with GitHub’s funky way of doing things, but we got there. This was the highlight of the weekend for me. Another independent, personal site on the web!

I used the afternoon to scratch some itches. I recently wrote a colophon, but it needed some editing and nothing linked to it, so I gave it a bit of polish and added a link to it from my about page.

Next I worked on CSS. The main CSS file (the one used by every page here) was at risk of becoming a bit of a dumping ground. Most pages don’t use syntax highlighting or MathML styles, so I put those in their own files. Both are third party anyway, so it makes sense to keep them separate and versioned with their associated dependencies. This was mostly plumbing work to configure my static site generator.

Finally, I tweaked a little of the code I use for ruby annotations. Each page with Japanese text on it has a little select dropdown which can be used to position the annotation above or below the main text, or hide it entirely. Thanks to the :has() CSS pseudo-class no JavaScript is needed to do this. Remembering the preference, however, does need JS. So these pages have a tiny JS script which stores the setting in localStorage. I tweaked the script so that when the user sets it to “above” (the default), the script deletes the setting, rather than storing “above”.

To wrap up the day we demoed what we’d written and made. Click through to explore those (there’s too much good stuff to do it justice here).

Wrapping up

The other attendees kindly helped me to restore The Skiff to its original layout and clean up. Once we were done, I locked up, and a few of us went for a well deserved drink.

1. The pastries almost didn’t happen. I had originally ordered them for the afternoon before because the earliest the form would allow was 11am (what kind of monster eats a croissant after 11am?). I didn’t want to give people stale pastries though, so I contacted them and they said the option wasn’t there because they were short staffed, but since I wanted to pick them up from a shop they could deliver them there with the shop pastry order for 8am, no problem. Of course, this didn’t happen. When the (very patient and helpful) person in the store contacted the bakery, the bakery said that they couldn’t do 8am after all. They wanted to tell me, but they were too short staffed to do that. The lady in the shop negotiated with them, and she gave me pastries from their own stock and there were enough left that when my order arrived at 11 it would be used to replenish it.ꜛ
2. More than one poor soul now knows more than they needed to about the Woodingdean Wellꜛ
3. This is not an excuse not to show publication and update time stamps!ꜛ