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
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?
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!).
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
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.
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ā¦
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> — $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>
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:
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!
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.
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).
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.
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.
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.
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 gave it a bumper crop of things I could remember lately
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
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.
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.