🚧 What did you do to your website today?

I’ve been at it for most of the year, but I finally got my workout log up to the standard that it is a feasible replacement for all other services I’ve been scattering my data to over the years.

To wit, I just deleted my Strava account this morning :raising_hands:

6 Likes

AAAAAHHHH! I love this! This is exactly the sort of thing I’ve been wanting. May I ask how you get data into it? Do you transcribe by hand, or are you pulling from some device or service?

This is really fantastic. Great job.

Thanks! I’ve not seen many ā€œactivity trackersā€ around the small/personal/indie web, but I love exploring other people playing with this concept. I hope you’ll go for it!

I use a nearly ten year old Garmin (Fenix 5s) to record my workouts. Afterwards I plug it into my laptop, and a bunch of Python scripts pull new activities off the device and write all the details you can see for each activity to a CSV file. That CSV file then serves as the ā€œdatabaseā€ from which the log is generated.

Wrote a (way too detailed) post about it if you want to dive into the details. Relevant part begins under the heading ā€œData flowā€ (can’t remember the syntax for text fragment linking!).

4 Likes

Thanks! I very much want to dive in to the details.

1 Like

i uploaded an okay version of it, i definitely need to style the two sidebars in a cooler way but itll work for now. also its only the homepage nothing else until i figure out how i want things arranged on other pages

3 Likes

This looks really good!! I a d o r e that frankie stein poster!!

I spent the whole weekend redoing large parts of my website. I added a gamified ā€œskillsā€ section (that I have to do manually but it looks nice), visual cards that lead into each of the website sections, and a ā€œcompendiumā€ (that still lacks content). I also created a few new sections like ā€œrecipesā€ (still needs work on the visuals and structure) and ā€œwordsā€ (my own personally dictionary). Lastly, I re-did the navigation. I also used my real name for the domain name.

I polished it off today by attempting to make the CSS responsive to mobile.

4 Likes

That skills section is so cool! Connecting it with things you do to gain XP is such an obvious thing, too, now that I see it. But I never would’ve thought about framing it like this.

I also like the skills you’ve chosen and the way you’ve grouped. A lot of overlap there with what I’d like to focus on myself. Perhaps setting it up in a clear and obvious way like this, and grading myself, would offer some clarity about where I should be spending my time. Hmm…

1 Like

Nothing especially fancy here, but I implemented the template for the album card as a m4 macro:

m4_changequote(`[', `]')
m4_divert(-1)

m4_define([__ALBUM_CARD], [
<article>
<header>
__PIC_JPG($8, 200, 200, [cover art for $5 by $4])
<h2 class="no-top-margin">$4: <cite>$5</cite> &mdash; $3</h2>
<p>released on <time datetime="$1">$2</time> by <b>$6</b></p>
</header>
<footer>
<p>Further details are available at <a href="__RELATIVE/$7"><code>$7</code></a>.
</footer>
</article>
])

m4_define([__PIC_JPG], [
<picture>
<source srcset="__RELATIVE/assets/images/$1.jpg" />
<img src="__RELATIVE/assets/images/$1.avif" width="$2" height="$3" alt="$4" loading="lazy">
</picture>
])

m4_divert

In my raw HTML, the macro call looks like this:

<nav aria-label="collected albums by Paramore">
    __ALBUM_CARD([2007-06-12], [12 June 2007], [2007], [Paramore], [Riot!], [Fueled By Ramen], [listening/paramore/riot.html], [albums/paramore-riot])
</nav>

The macro gets expanded when I run oedipus.mk.

4 Likes

I added a relatively simple way of linking back to my social media updates in my blog posts. The purpose of this addition is to hopefully generate more discussion about my blog posts without embedding any third-party comments sections on the site (which is built with Jekyll). See it in action here: stephvee.ca - We Need to Talk About Botsplaining

How it works: I deploy my latest blog post. I then share the link to that blog post on Bluesky and Mastodon. After that, I return to the markdown file for said blog post and throw the corresponding Bluesky / Mastodon links into my YAML front matter, like so:

mastodon: https://mastodon.social/@st3phvee/115339198986521199
bsky: https://bsky.app/profile/stephanievee.bsky.social/post/3m2jkbnoi3226

Those details then get pulled into the post via my master blog post _layout file (HTML/Liquid) when I rebuild the site, like so:

<div class="socials">
  <a href="{{ page.mastodon }}" title="Discuss on Mastodon" target="_blank">
    <svg xmlns="snipped_for_brevity">
    </svg>
  </a>
  <a href="{{ page.bsky }}" title="Discuss on Bluesky" target="_blank">
    <svg xmlns="snipped_for_brevity">
    </svg>
  </a>
</div>

For posts that don’t yet have a corresponding Bluesky / Mastodon update, I simply link to my profile in the front matter.

It’s a liiiiiitle cumbersome, as I essentially have to deploy blog posts twice if I want to link to the social updates associated with said posts, but it’s much less cumbersome than manually adding the links in to each markdown file! The beauty of handling this with YAML/Liquid as well is that if I ever decide to ditch this feature, I can just delete the socials div from my _layout file without having to edit every single blog post afterwards. It doesn’t matter if the links stick around in the front matter.

It would be awesome if it was possible to preview a social media update and grab the link before it’s even posted. Alas, those platforms just don’t work that way!

Edit: fixed the link to the example, oof.

4 Likes
  • I added a blog post preview shortcode that will snip out some text between two HTML comments with specific text in them. EDIT: if any 11ty users are interested in how to do this lmk and I can make a post about it.

  • Shuffled around some of my 11ty layout stuff to be a slightly hierarchical so I can provide a totally different layout in every page but still share the same HTML preamble and etc by just including that ā€œbaseā€ fragment.

  • Redid the blog’s index.html to be a little more interesting than just a flat list of hyperlink’d h2 tags using a new layout template that shares the aforementioned base fragment

  • Updated my Makefile to only run a shadow-cljs build if the required index.html and clojuresript source files that generate my splash page change. That compiled clojurescript code is now put into a tag in index.html using sed.

  • Hid my /links page; I want to figure out a more fun way to show all of these and that likely will be a hugely custom layout that is not connected to the ā€œblogā€

I am still not super happy with the blog’s index.html but it is serviceable. I am not a big fan of ā€œcardsā€ but I don’t have anything more fun to add there right now. Maybe some kind of ā€œmagazineā€ style layout would be cool. I’ll have to think more about it. I want to do the same thing to the post archive page.

3 Likes

I really like your post on emergence in generative art. I’m always curious about habit tracking systems (I have bounced between a few myself) and good luck with the dog obedience - it is hard always being on. I have two hard-mode dogs and I had to lean into dog training as a hobby instead of a chore (still a chore sometimes though).

1 Like

I’ve been procrastinating doing bigger things, and instead made a little word-cloud-type generator to use as the link/opengraph image for posts that don’t have them.

It uses the number of times a word is in a post vs how often it’s in my other posts to try and figure out unique/important terms.

Before/after:

I liked the question mark placeholders, but they looked a bit odd when there was more than one post using them.

4 Likes

I’ve finished the conversion from hugo to 11ty at least enough to start actually writing things again. I’ve added some small visual highlights (and one medium one) and had some more fun with CSS and SVG along the way. I’m happy with how it looks. I also figured I’d try out WebC in 11ty and understand the basics now, so that was fun.

2 Likes

My website’s makefile has a new target for taking individual pages and generating RSS <item> blocks that I can include in RSS files using hxincl in a separate make target as long as I get the dependencies right. There’s a lot of sed trickery involved, along with this shell script that uses hxselect (from HTML-XML-Utils) and cat.

#!/usr/bin/env bash

# rssitem.sh
# Ā© 2025 Matthew Cambion <contact@starbreaker.org>
# available under the terms of the GNU General Public License v3

# Given a raw HTML file let's use hxselect to extract the contents
# of the "#content" selector and wrap it in an <item> element for
# inclusion into one or more RSS feeds.
#
# Because we're generating a heredoc with cat, we can't do this directly
# in a makefile. So we'll wrap it in a shell script and then pipe
# the output through sed and whatever other processing needs doing.
#
# Now that I think of it, however, running hxincl and m4 can wait
# until we process full RSS feeds, not individual <item> files.

HTML_FILE=$1
CONTENT=$(hxselect -c "#content" < "${HTML_FILE}")

cat <<EOF
<item>
<pubdate>__CREATED</pubdate>
<atom:published>__ISO_CREATED</atom:published>
<title>__TITLE</title>
<link>__BASE/__URL</link>
<author>__AUTHOR_EMAIL (__AUTHOR_NAME)</author>
<description>__DESCRIPTION</description>
<content:encoded>
<![CDATA[
${CONTENT}
<hr />
<p>
Thanks for using <a href="https://aboutfeeds.com/">web feeds</a> to keep up with this website!
</p>
<p>
If you’d like to get in touch, please <a href="mailto:__AUTHOR_EMAIL?subject=RE: __TITLE">reply by email</a>.
I can also be reached via <a href="https://signal.org/">Signal</a> by texting
<a href="https://signal.me/#eu/rLUQHAt6iG5v_5Pee2BbSON_aa1t88FhO6GgpJfS_ROOyq43F9NHXJAreegQLw_j">starbreaker.84</a>.
</p>
]]>
</content:encoded>
<guid isPermaLink="false">__RSS_GUID</guid>
</item>
EOF

2 Likes

I added a ā€œbutton wallā€ type page and a ā€œrabbit holesā€ page.
I see other people usually keep a button wall and I’m trying to keep up though I don’t even have a button yet and I’m not really friends with anybody but added some websites i liked
The rabbit hole part, I just wanted to make a page to dump my weirdest/favorite deep dive stories. I think I established in my friendships I’m the like the media miner and hoarder and like weird wiki finder. But I never really put it anywhere :thinking2: gave it a bumper crop of things I could remember lately

https://kiwizoom.neocities.org/#fav_sites
https://kiwizoom.neocities.org/#rabbit_holes

4 Likes

finally made up my mind on the criteria ill rate tv shows/movies on when i start writing reviews on GDLand. now i just need to decide on my rating system for all the other types of media

2 Likes

As @starbreaker knows, I’ve been slowly working on a website structure for a skateboarding zine that uses only basic HTML, CSS, and server site includes. Obviously it can have images and embedded video too. My goal here is to make the pages extremely legible, the site easy to navigate, and for each issue of the zine to have its own space, so it isn’t simply another blog.

Hopefully my two partners and I will get to a second issue. The articles that I have up right now are simply placeholders. I think each of us is going to try to produce three articles of substance for the first issue.

The goal here is to use the same approach someone might have in 1996. Minus CGI scripts.

I’ve got the file structure set up so that I can download it from my server space at dream host and re-upload everything to its own domain name with only a few edits to the html files.

6 Likes

And it looks solid so far.

Thanks. I’m doing some of the CSS a bit caveman style. Using inline CSS in my various includes rather than doing a bunch of CSS classes. My goal is for it to work, and for me to be able to easily see how it works in the future, rather than trying to be clever.

2 Likes