Rob Wood

Using cmus for local music

2026-01-05T00:00:00Z

cmus is a fast console-based music player for Linux. It looks like this:

Although I use Spotify I wanted to try this for a load of music files I've got stored on a network drive. It's not pretty or intuitive but it is:

light and fast
free

I've a got a lot of MP3s so I thought I'd give it a try. I'm enjoying it at the moment and it feels good to listen to some things that you can't get on Spotify. It's not the most intuitive software so I've made a guide on the most common things I use it for (based off this article):

Load cmus

Open up a terminal and type cmus. On first launch, you'll see a screen like this (or you can access this by pressing 1):

+---------------------------------------------------------------------+
| Artist / Album             Track                            Library |
|                          |                                          |
|                          |                                          |
|                          |                                          |
|                          |                                          |
|                          |                                          |
|                          |                                          |
|                          |                                          |
|---------------------------------------------------------------------|
| . 00:00 - 00:00 vol: 100                     all from library | C   |
+---------------------------------------------------------------------+

Adding music

Press 5 to go to the file browser. It should look like this:

+---------------------------------------------------------------------+
| Browser - /home/username                                            |
| ../                                                                 |
| Desktop/                                                            |
| audio-projects/                                                     |
| audio/                                                              |
| bin/                                                                |
| config/                                                             |
|---------------------------------------------------------------------|
| . 00:00 - 00:00 vol: 100                     all from library | C   |
+---------------------------------------------------------------------+

Use the keyboard to navigate to your music folder. Press a to add folders/files to your library.

Playing music

Press 2 to go to the library view. You should see your added music files here:

+---------------------------------------------------------------------+
| Library ~/.cmus/lib.pl - 31 tracks sorted by artist album discnumbe |
| Flying Lizards         . Money (That's What I Want)           02:31 |
| Jason Woofenden        . VoR Theme                       2009 01:20 |
| Keali'i Reichel      06. Wanting Memories                1994 04:28 |
| Molly Lewis            . Tom Cruise Crazy                     03:13 |
| NonMemory              . pista1                          2009 03:18 |
| NonMemory            01. pista1                    2009-04-21 04:13 |
| Ray Charles          06. Halleluja I Love Her So              02:33 |
|---------------------------------------------------------------------|
| . 00:00 - 2:16:25 vol: 100                   all from library | C   |
+---------------------------------------------------------------------+

Use the keyboard to navigate to a track and press Enter to play it. Press c to pause/resume playback. Press ,/. to seek by 1 minute. and ←/→ to seek by 10 seconds.

Options

There are different options on what to do when a track ends. Press m to scroll through them. There are also 3 toggles:

[C]ontinue - Toggle with by pressing Shift-C.
[R]epeat - If this and 'Continue' are on, when cmus reaches the end of the group of tracks you're playing it will start again from the beginning. Press r to toggle this.
[S]huffle - cmus will choose a random order to play all the tracks in the current group. Press s to toggle this option.

Playlist

To create your own playlist press 3 to get to the playlist view and then type pl-create name-of-your-playlist. To set this new playlist as the active one, select it and press Space.

To delete a playlist, select it in the list and press Shift-D. It will ask for confirmation.

To rename a playlist, select it in the list and type pl-rename new-playlist-name

Add songs to this playlist from any view with y.

Keyboard shortcuts

Action	Keybinding
`←`/`→`	Seek by 10 seconds
`<`/`>`	Seek by 1 minute
`c`	Pause/Resume playback
`b`	Next song
`z`	Previous song
`i`	Focus currently playing song
`f`	Toggle 'follow' mode
`pl-create <name>`	Create new playlist
`y`	Add song to playlist

Neovim shortcuts

2025-10-29T00:00:00Z

There are loads of guides and cheat sheets for Vim but they can be a bit overwhelming. I thought I'd create my own non-exhaustive list of the shortcuts that make sense to me. This will grow and evolve as I learn more about NeoVim. I used this Vim cheat-sheet for inspiration.

Files
Open last file	`'0`
Browse old files	`:browse oldfiles`
Close current file ('buffer')	`:bd`
Search for files (using telescope)	`:Telescope find_files` OR `Space`
Save	`:w`
Close	`:q`
Save and close	`:wq`

Navigating
Arrow keys	`h` `j` `k` `l`
Previous/next word	`b` / `w`
Previous/next end of word	`ge` / `e`
First line	`gg`
Last line	`G`

Editing
Append	`a`
Append from end of line	`A`
Insert	`i`
Replace character	`r`
Undo	`u`
Redo	`'Ctrl' + r`

Clipboard
Delete line (Cut)	`dd`
Delete character	`x`
Yank line (Copy)	`yy`
Paste	`p`

NvimTree
Open NvimTree	`'Space' + e`
Reveal current file in NvimTree	`'Space + er`
Yank line (Copy)	`yy`
Paste	`p`

Auto-fill vs auto-fit

2025-09-21T00:00:00Z

It always takes me a second to remember which way round these are. Up to a point, they seem to work in the same way.

When using the minmax() function in a grid declaration, auto-fit will expand the grid items to fill the available space. auto-fill keeps the available space as if there was an grid item there.

I've found auto-fit to be useful where I've had two columns with different content and I want them to be the same width.

auto-fill is useful when you want to keep the grid items the same size but you want to fill the available space.

Here's the difference:

Auto-fit

Auto-fill

Git commands I find useful

2025-01-06T00:00:00Z

One day I'll memorise these but until then, here are some basic Git commands:

Push changes to a remote repository

# Stage all changes
git add --all

# See staged changes
git status

# Commit staged changes
git commit -m "Your comment here"

# Push all local commits to the remote branch
git push

General

# Check out an existing local branch:
git checkout <local-branch>

# Compare local changes to the remote in a local branch
git diff origin/<MAIN-BRANCH-NAME>..HEAD

Branches

# Create a new branch from the currently checked out local branch and check it out:
git checkout -b <new-branch>

# Checkout a tagged branch and create a new branch from it.
# If a branch has been tagged you can see the code at a particular point:
git checkout tags/<tag-name> -b <new-branch-name>

Merging

# Merge changes from a local branch into a currently checked out branch:
git merge <existing-local-branch>

# Merge changes from a remote branch into a currently checked out branch:
git merge origin/<remote-branch>

Remote branches

# Switch to a new local branch, and pull changes from a specific remote branch:
git switch -c <new-local-branch> origin/<remote-branch>

# Same as above but without tracking the remote:
git switch --no-track -c <new-local-branch> origin/<remote-branch>

# Get the latest changes from a remote branch:
git pull origin <remote-branch>

Deleting

# Delete a local branch:
git branch --delete <local-branch>

# Delete a remote branch:
git push origin --delete <remote-branch>

Reverting changes

# Get your local branch to match your remote branch.
git reset --hard origin/<remote-branch>

Building a Euros sweepstake website with 11ty

2024-07-11T00:00:00Z

We always have a family sweepstake for the Euros and the World Cup so this year I created a website for it: euros.robwood.uk. This is a brief write-up of what I can remember.

The source-code is here.

The basics

I built this website with 11ty and I used a simple starter template I'd created.

The data fetching happens in a global data.js file. When I previously made a World Cup sweepstake site I split the data files up and imported them. That made sense as a way to manage the data but I decided to chuck it all in one file this time. Who doesn't love a bit of chaos?

The API

I used the free football-data.org API to get all the data for this website.

The main problem I had is that I haven't been able to read the API using a token on the client without a CORS error.

This is either something I'm doing wrong or a limit of the free tier. As the documentation shows how make make a request in various programming languages but not JavaScript, I'm assuming it's the latter.

To get around it I make the fetch request during the build process, using 11ty fetch.

As a result, the website would only update when I deployed the site to Netlify. I needed a way to deploy the site daily so the data was at least correct the following day.

Deploying the site daily

Before I decided how I'd do this I needed to set up a Netlify Build Hook first.

I'd previously used the IFTTT service to hook into this Build Hook. Unfortunately, this ability is now part of the 'Pro' tier and is no longer free. I had to look for another way so I decided to give GitHub Actions a go.

I found an article that shows how to trigger a netlify build every day. To create the new workflow in my repo I went to the 'Actions' tab then the 'set up a workflow yourself' link.

The only things I changed in the example code were the build hook URL and the time the workflow is triggered.

This did the job!

Assigning the family members

The API gave me most of what I needed but I wanted to be able to assign a family member to each team when it came to the fixtures, results and standings.

I cloned the teams array and created a new property called 'family_member'. I then assigned each team to a family member. I also created an assignFamilyMember function that I could use for the fixture, results and standings.

Graphics

I wanted it to look like an old 8-bit football game but that didn't quite pan out. The most authentic typefaces I could find were also hard to read so I played it safe with Roboto Mono.

I created pixel-art style icons for family members and the country flags. I based the family member's heads on those in the 90s football game Sensible Soccer.

I'd planned on using some flag icons I found online but in the end I decided to recreate my own 8-bit style versions (inaccurate aspect ratios and all).

The PWA

I don't have a lot of experience with PWAs so I created the minimum needed for a user to be able to add the app icon to their homescreens.

There are two things needed for a PWA (in addition to serving the website over https):

Manifest

This file tells the browser how it should display the app. It includes things like the name, start URL colours and logos. This is in the JSON format and follows a straightforward convention.

Service worker

The service worker file runs in the browser separately to the main app.

It can handle network requests, manage the cache and do all sorts of things I haven't dug into yet.

I ended up using an example service worker from Google to fulfill the requirements of a PWA.

What I ended up with

A website that does the job!

It's far from perfect but it's an improvement on the last sweepstake website I made. I just need to improve it in time for the 2026 World Cup in North America!

Digital gardens

2024-07-07T00:00:00Z

I've been reading about the concept of digital gardens, starting from this article.

My interpretation of these is that they're a place on the internet where an author can note down their current thoughts about a specific topic rather than a full, polished article.

This sounds a lot lot like learning in public.

I like the idea of giving yourself permission to think out loud and change your perspectives as you learn more.

I think a key part of this is that you revisit what you wrote and develop it.

I like the idea that I'm writing for me, not any particular audience. I'm writing stuff down to help my future self with topics that I may need to reference in the future.

It also reinforces the idea that writing is a way of helping you think.

Grid template areas

2023-04-15T00:00:00Z

I use grid a fair bit in my work but I realise there's so much of it I don't know that well.

One thing that I've not used too much is grid-area. In creating the header for this site, I created a simple 2 by 2 grid.

I then placed the logo, theme switcher and nav items in separate areas. To do this, I used <grid-line>. After a bit of faffing I got it to work.

It just seems so un-intuitive though. You set 4 values (in this order):

grid-row-start
grid-column-start
grid-row-end
grid-column-end

So, you can end up with something like this (assuming you're using integers as the values):

grid-area: 1 / 1 / 2 / 2

You can omit certain values and certain rules are applied to set the values automatically. This is great but it means it's not always obvious what's going on.

A nicer way?

A better way for my brain to understand is to use a CSS <custom-ident> data type. This allows you to apply a user-defined string to visually map out how I you want the grid to look. Instead of effectively specifying the co-ordinates of where each item should sit in a 2x2 column grid, you map out the areas in the parent and give them an identifier. That identifier is then referenced in the CSS for the child item.

What does that mean in English?

This:

nav {
  grid-template-areas:
    "logo switcher"
    "link links";
}

I find this a much easier way to visualise what's going on and create the grid I need.

WebC for 11ty

2023-02-04T00:00:00Z

I love 11ty and use it for pretty much every personal project. One of the main things that I've wanted for 11ty is a robust way to work with reusable components. I've used Vue for a while now and one of the things I like about it are the single file components. Being able to have the HTML, scripts and styles all in one place is useful, especially the ability to scope styles to the component. I've always wished that 11ty had something similar.

Guess what? Now it does!

What's WebC?

What it means to me is basically single file components for 11ty. You can find a more thorough and accurate explanation on the official site. You get reusable components you can use on your website that will render to the client as static HTML. It also gives you scoped CSS!

Single file components for 11ty

I've used 11ty for a while now and I've played around with different methods to to give me a similar experience to what I'm used to in Vue. The closest I got was using Nunjucks macros. These gave me the ability to have reusable components with props but it wasn't perfect. There was no way to scope the styles so you still had to rely on global styles. The markup needed to create the macro also made it hard to easily tell what macro was doing.

What's good about WebC?

Lots. Here's are a few of the obvious ones for me:

You write the components with HTML (and and some WebC sprinkles).
They render statically on the client which means they work without JavaScript.
You can write CSS that is scoped to that component.
You can also use them to render reusable content (instead of using Nunjucks includes, for example).

What are the downsides?

Nothing's perfect but this isn't far off!

There's a bit of a learning curve but it's really not that steep.
It requires an additional plugin if that bothers you.
With my original setup I couldn't get pages using WebC layouts to render correctly using directory data. It needed a little bit of eleventyConfig-wrangling to get around it.

Where can I learn more?

I'm still getting my head around WebC and I know I've barely scratched the surface of what it can do. Here are some resources I found useful:

Also, there's a link to my starter template.

This website

2021-01-29T00:00:00Z

I've had various versions of this website over the years. I've gone through phases of completely ignoring it for years, or tinkering with it endlessly. There's a third phase which is the 'rip-it-all-up-and-start-again' phase. That's where I am now.

I've decided to focus on making it as light as I can then building on top of it. This website is static and only contains a few pages so it really needs to be fast, if nothing else.

I've decided (for now) to stick with system fonts as the main change. I'm also aiming to actually start blogging a little.