Reading view

There are new articles available, click to refresh the page.

11ty, nunjucks, tag counts

As I write more for the 100DaysToOffload, I like to post on my social media the post number. I also made this page for myself to review the posts I’ve written, and post counts. Initially I did not have this added on this page, but it is on my tags page where I list the tag and the number of posts in it.

On my tags page, it uses an eleventy filter of the collection of all posts, and adds this information to the collection. Then on the tags page do a for loop to loop through all the tags and post counts with Nunjucks.

config.addCollection("tagList", collection => {
    const tagsObject = {}
    collection.getAll().forEach(item => {
      if (!item.data.tags) return;
      item.data.tags
        .filter(tag => !['post', 'all'].includes(tag))
        .forEach(tag => {
          if(typeof tagsObject[tag] === 'undefined') {
            tagsObject[tag] = 1
          } else {
            tagsObject[tag] += 1
          }
        });
    });

    const tagList = []
    Object.keys(tagsObject).forEach(tag => {
      tagList.push({ tagName: tag, tagCount: tagsObject[tag] })
    })
  return tagList.sort((a, b) => b.tagCount - a.tagCount)
});

This is great, but I have a simpler collection of the posts by tags using the collectionApi.getFilteredByTag() filter.

// Get only content that matches a tag
config.addCollection("offload", function(collectionApi) {
  return collectionApi.getFilteredByTag("100DaysToOffload").reverse();
});

So now on my page specificly for the 100DaysToOffload, we can do a for loop to display just the posts in this collection.

Halo: Combat Evolved

  Get IP From DNS Name Using Python

  Updated Plop Automation 2.0

  Human Readable File Sizes in PowerShell

  Reverse, esreveR

  Switch Python to Match

  Too Much Data

  Confirming public GPG fingerprints from Git platforms

  AWS EC2 termination protection

  Burning musical memories

  100 Pics - Day 9

  Securing 11ty with SSL Locally

  100 Pics - Day 8

  Adding GPG to Codeberg From Windows

  Codeberg Migration

  Jellyfin and SSL

  Be Proud of Your Work

  Blog Questions Challenge 2025

  Changing Your LUKS Full Disk Encryption Password

  How to tag AWS EBS volumes on Linux EC2 Servers

  100 Pics - Day 1

  Reviewing 2024

  Year in Review

  Updating Codeberg Pages Static Sites

  Expanding URLs in Powershell

  Automation waiting game

  The Collection

  Mobile writing, part 2

  Getting into Podcasts

  Using PSCustomObjects

  Backing up the Cloud

  Future proofing scripts

  The state of Linux

  Making Notepad with HTML

  Updating Docker Containers

  Advent of Code - Day 4

  Changing Git config URL

  Advent of Code - Day 1

  Wordle Analytics - November 2023

  Reducing the noise

  Making Change

  Knowing the long way

  Write fast, deploy, update

  Migrating 2FA apps

  Hardware and Tech I Use

  Do you follow RSS?

  GNOME VS KDE

  Almost there - 100DaysToOffload

  Download latest file from a S3 Bucket

  Posting from my phone

  Default apps

  Git Status

  Lessons learned, backup

  Installing Node.js on Pop!_OS 22.04 LTS

  Wordle Analytics - October 2023

  Using ChatGPT wisely

  Simple HTTP Server

  My Linux Journey

  Regex a UNC path

  TinaCMS + 11ty

  Verifying Ubuntu 23.10.1 ISO

  Updating Umami Analytics

  Taking A Screenshot In Python

  100 Days to Offload Update

  Network Usage Since Last Boot

  Hosting FreshRSS on Fly.io

  Robots and AI

  File Encryption with GPG

  Retro Gaming

  Creating a Test File

  Wordle Analytics - September 2023

  Using Cheat sheets

  Creating Status Pages on the Fly

  Scheduling Automatic Builds with Static Site Generators

  Boto3 cross regions for AWS Lambda Functions

  Building a Blogroll with 11ty

  Adding some flare to RSS

  List Throttling with Python

  Migrating GPG keys to a new machine

  Installing Node.js on Fedora

  CloudCannon + Eleventy

  The Good Side of Analytics - Umami & Vercel

  Wordle Analytics - August 2023

  Manage AWS Instances

  Wordle Analytics - July 2023

  I Broke NextCloud, Again

  What is in Your Headers?

  Wordle Analytics - June 2023

  Mapping the internet

  Wordle Analytics

  Finding your Windows Install Date

  Powershell GUI with WPF

  Ubuntu's change with Python support

  Bookmarks in PowerShell

  Console Speech API, Part 2

  Console Speech API and Beeps

  Spring Cleaning

  Getting Into Cron Jobs

  Intro to Pickleball

  Using the Codeberg CI

  How I Missed Gaming

  Using Cloudflare Workers to Get Visitor Information

  Select-Object with PowerShell

  Command Line vs GUI Windows programs

  Plop in Automation

  Extracting Files with Progress

  Port Checking in Python

  Creating a static site using Python and Flask

  Going Headless

  Nextcloud Docker Compose

  11ty, nunjucks, tag counts

  Adding a basic search to a static site

  Getting started with docker and Luanti (Minetest)

  GitHub profile with actions

  Website redesign with 11ty!

  Quick tips on Linux aliases

  How to start coding

  Securing Jekyll with SSL locally

  Got Git?

  Netlify hosting and redirects

  Working with Tags in Jekyll

  New Year's Resolution for 2023

This solution does not have a built in way to get the tag count. So I found two solutions that work in this situation.

Solution 1

Using the full tags collection. For this to work, we need to loop over all the tags, and if we find the tag we want, pull out the tagCount that is defined in our collection.

<h1>100 Days To Offload
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
</h1>

Depending on how many tags you have you’d still have to loop over all of them to pull out the one. This is a collection that is more of an array of the data that would be needed in one object.

Solution 2

The second method uses a variable and a loop as well to increase a count, then output that count.

<h1>100 Days To Offload
  
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
  <small>(122 posts)</small>
</h1>

I like this method as I have already filtered the tag in a collection, and manually added the count on the page at render time. This is a collection that just has the posts and basic information and not the extra details that could be included.

Wrap up

Both methods do work and could still have a valid use case when needed. My tags page has its own loop process to notate the tag name and tag counts. Now as I post more to the 100DaysToOffload, I can know the post counts. The 100DaysToOffload page uses the simpler collection and a for loop to get the data that is needed. On this page, I’d rather call back to the same collection, than call a larger collection to get a smaller amount of data.

When I moved from Jekyll and talked about the 11ty redesign, I had a post about the same process in Jekyll and working with tags


Reply via email

Year in Review

Not only is this the Year in Review for 2023, but it also completes the 100 Days to Offload challenge I started this time last year.

I wrote about 29 total tags and topics throughout the year.

Here's a neat graph by Robb Knight as well, similar to the GitHub commit graph. This is showing all the posts tagged for the 100 Days to Offload, which should be all posts from 2023 as well. There's that one post in 2022 for the start of journey.

2022

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec


2023

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec


2025

Jan

Feb

Mar

Apr

May

Jun

Jul

Aug

Sep

Oct

Nov

Dec


Next, I thought it would be neat to list out the tags and the count of posts per tag to see the topics I wrote about.

This has been an exciting year! I have written a lot about my adventures of Docker, powershell, a new position and learning more about AWS. Upgrading my blog to use the 11ty backend static site generator. I think was the best choice this year to help add to the fun of writing and experimenting with the static site generator.

What is in store for next year? I have not decided if I will partake in the 100 Days to Offload again right now, but I have found a new groove in writing and keeping things updated. I still like writing about the new things I learn while coding and preparing my solutions. Writing things down this year has been helpful, and I have even gone back to my own posts later one to see how I did something as it also applied to a new issue.

Here’s to 2024!


Reply via email

Halo: Combat Evolved

Not too long ago I was cleaning some things from storage and found the Halo: Combat Evolved PC game disc. The disc was in great condition and I really wanted to see if I could still the game and play again.

Halo game disc

I spent a lot of hours playing Halo on the Xbox with friends when it first came out, and I did not have an Xbox so I got the PC version. When playing with friends we’d always to do multiplayer and play Red vs Blue, capture the flag, and free for all so I never really played the campaign. When I was younger and played this one a Windows XP machine, the operating system is was designed for, I never really made it past much of the campaign then either.

This time I was able to install the game using the same key that the CD case had all these years later. Now I was using a Windows 10 machine and the installation did succeed, but it would not start due to a DLL issue. I took to the internet and found there was a patch that was needed and got that installed. The use of GameSpy that provided servers and some connection items was no longer a service, and the patch updated some of the need for the game to reach out to them.

Now that I had the game launching, I began the campaign. I’ve now spent a few hours and really enjoying the campaign story line even after all this time. I made a comment that I don’t remember getting this far all those years ago. My thought is all the additional years of playing games has helped me now when going back and replaying Halo.

What brought back memories as well was in high school some of the more technical students, like my self, found ways to install the Halo Custom Edition. This was a simple install that could also run stand-alone and not need a CD to play. So we would find a network share and place the files there in the shared location and in the computer lab time, all play Halo multiplayer - after our work was done of course.

Then the IT staff would find the game files and delete them. The students would return with a new location and find new ways to keep the game on the network and keep playing.

The only thing I wish I had now was a way to host a server and be able to play a few games with some others. There’s nothing like driving the warthogs around and using the alien blasters to save the world from the Covenant takeover and protect the Halo.


Reply via email

Organizing a design system via folksonomy

Design systems are organized in an imperative, top-down, hierarchical way.

By this, I mean Its maintainers decide on categories of content, and then how that content is ordered. This is done as a calculated bet to best serve the known and unknown audiences who consume the design system‘s content.

For example, GitHub’s Primer design system divides the world into a Getting Started guide, Primitives, UI Patterns, Components, React Hooks, and guidelines for Contributing. Shopify’s Polaris design system has has a similar approach with its navigation, but includes more options such as Content, Patterns, Tools, etc.

Everything in its right place

This is the tyranny of category made manifest. Organizing things in this way intrinsically means needing to put each item within the design system in a single location as either a parent or child-level object.

A three layer flowchart shaped like a pyramid. The top layer is a single item, the middle layer has two items, and the bottom layer has three items. Items are connected to show parent/child relationships.

Due to sheer probability, this means that the organization approach may not fit every design system consumer’s mental model for how things should be organized. This means that discovering, referring to, and using the design system will be more difficult for some people than others.

This singular way of presenting content can impede design system adoption. It’s an understatement to say that this is counter to a design system’s overall goal.

Categorically different

Most design systems I’m aware of use organization via category, making it somewhat of a de-facto standard. However, there isn’t uniformity across all design systems for how many categories are used, or what each category is called. There’s also not always uniformity for how components are named.

Less external consistency means the design system adoption issue persists—consider a situation where a developer changes jobs and has to re-learn what components are called at their new place of employment. This is also to say nothing about names for component props, tokens, icons, etc.

Yes, the ability to use search a design system does help here some, but its not always enough. It is also not the biggest concern, but I’m of the school of thought that this sort of friction adds up.

Other ways of organizing things

A folksonomy is a way of organizing things where the people who use the service are allowed to create and apply their own tags to things. Think of Gmail’s labelling capability, or adding hashtags on any number of social media platforms.

A folksonomy is used as an alternative to a more standard tagging system, in that the creating and stewarding of tags is in the hands of the people who consume the content, and not just the people who create the content.

There is no hierarchy other than what people create for themselves with a folksonomy. In this way they are more equitable in terms of power dynamics, in that they enable a bottom-up way of organizing things. This can serve one individual’s organizational needs, a group, or even an entire community.

Nine free-floating items that look like a haphazard spiderweb. All items are connected to other items, but every item is not connected to every other item.

This alternate approach makes folksonomies popular with social bookmarking services, as well as with fanfiction communities. An example of these two things harmoniously blending is the social bookmarking site Pinboard’s embracing of the fanfiction community.

Mature folksonomies can contain an incredible amount of information. Check out this folksonomy for "country" organized via significance-testing, as shared by Kristina Lerman on Flickr:

A near-overwhelming amount of tags branching out from a center labeled 'country.' There are branches and sub-branches fanning out in all directions, clustered around country names. The tags surrounding the country names represent free-assocation terms that come with the country name. For example, the tag called 'spain' has the following tags surrounding it: 'barcelona', 'mallorda', 'alhambra', 'galicia', 'valencia', 'burgo', and 'sevilla'.

What if?

I’ve long wondered what it would be like if we allowed design systems to support folksonomies.

Each person using a design system has a different way of thinking about it, as well as a different way of interacting with it. Anecdotally, I know a lot of people who rely on browser folders and bookmarks as a way to create a sense of order that works for their own needs.

I’d also like to set aside technical concerns for the time being. I do understand you’d need mechanisms for people to create identities on the design system site, and as well as creating, editing and storing the tags.

What would design system folksonomies look like?

People are creative, so there’s all sorts of things that could happen. To rattle off a few examples, we could see grouping by:

  • Favorites, to quickly come back to,
  • Something missing or outdated,
  • Age,
  • What a feature or larger initiative uses,
  • Dependencies,
  • Friction, to identify what isn’t working as intended,
  • Supported tech stack,
  • Use as a sub-component in other components,
  • Common or shared props,
  • Version,
  • Status, such as stable, preview, or deprecated,
  • Upcoming quarter, for planning purposes,
  • Aliases,
  • Things someone wants to try out,
  • etc.

This is an incomplete list in that I can only guess what people would do. And that’s sort of the point!

Meeting people where they are creates surface area that promotes collaborative and emergent organizational structures that aid in discovery. This requires letting go of some control, which can be an uncomfortable thing for people who spend all day on design systems trying to enforce it.

Potential downsides

I’d be remiss if I didn’t be the villain for a moment. Any time you introduce open-ended input into a system you need to factor in how it could be used to abuse or exploit.

Sanitizing your inputs is a requisite for any public-facing service, so I won’t belabor that point. What I would like to call attention to is:

  • The need to review what people are adding,
  • A mechanism to report things added with the intent to cause harm, and
  • A process to ensure something is done about it.

These considerations also require resourcing and effort to do. Unfortunately, this is a difficult thing to sell in our current working climate.

I am also not so naïve as to think you would not need reviewing and reporting capabilities for if a tagging system was made staff-only.

Curation

Reviewing also does not need to thought about as an arduous chore. Fandoms treat the task as a way to help steward the community. Within the context of a design system, this could be a way to engage with the audiences that use it.

Curation also poses more potential opportunity. It could be a way to feature content from engaged contributors, which in turn creates positive associations with the design system and its maintainers. It could also be a way for the design system team to make informed choices about what is working and what needs attention.

What about auto-classifiers?

LLMs are actually pretty dang good at generating tons of tags for any corpus of content you throw at them.

When used as an auto-classifier, an LLM can be a great way to add a descriptive layer of metadata. Here, I’d like to highlight Max Woolf’s writing on how Buzzfeed uses it to create a hierarchal taxonomy for its gigantic library of content.

For a design system, it is also something that could be easily replaced with a decent searching service. The thing is, auto-generated information is bereft of meaning or intent.

An auto-classifier cannot answer the underlying why this information exists. It is is why I’m bullish on folksonomies, in that intent is integral to the act of human-powered tagging.

Design systems are not a solved problem

The way we create and organize design systems has largely settled into common patterns and practices. However, this does not mean the way to make design systems has calcified.

I’m not aware of any design systems that use folksonomies, but would love to be proven wrong!

❌