Chris Jarling

In the last post of this series, I wrote that I tend to get bored with creating designs at some point in the process and want to start coding. I now have reached that point.
My joy of creating designs lasted shorter than I thought and currently, I have designs for three pages: The homepage, the blog overview and a single blog post. While this is a lot less than I aimed for, it will give me enough of a base to start coding and even design other parts of the page in code. I might come back to Figma later in the process if I get stuck.

Before going into the details of what I did with the pages, here's the link to the Figma project, if you want to look around: Link
It's not super clean, I don't use components everywhere I want to, but its what I could do in the time and with the motivation I had.
Now, let's jump into the details.

The homepage

Not a lot has changed here. I cleaned up the spacings to get a feel for which dimensions I want to go for. Currently, I'm using multiples of rem, which means all spacings are multiples of 16px. I've done this in a lot of other projects and it worked fine.

The one thing I did change were the underline-background-hybrids I used for the "Continue Reading" and "Project Details" links. They felt too playful and somewhat forced, almost as if the page screamed "look how cool I am". And if there is one thing that does not make you cool, it's saying how cool you are. Here's a direct comparison:

Color-wise, I like the neon green in the header, as it draws a lot of attention to the email I want people to contact me at. Using the green in that many other places on the site made it loose its value. I went with the orange instead and used a pale version of the green on the divider instead.

Looking at the page now, I feel it looks like a more confident design. I might even go back and remove the color on the links altogether. Not sure about this, though.

The blog post overview

Not much to talk about on this site. I feel like the only big question on these sites i wether you want to display

• Only the titles
• The titles and an excerpt
• The full posts

I went for only the titles (and the tags, more on them later) here. Partly because that's the way it is currently implemented and I like it, partly because I like an overview to be clear and give an... overview on which articles one can find here.

I originally added the tags because the site looked bleak and I wanted it to be more colourful without adding arbitrary elements. In addition, the tags give visitors a quick overview of the topics of the blog, even though they might not understand the titles of all posts.

There is no pagination in the design, even though I will need one. A pagination seems to be the one of the things that you design and then you end up using it and it feels weird. I will prototype that in code and then make it look good.

Single post

The content did not change a lot compared to what I currently have. The date was moved to the top, that way all the meta data of the post is at the top. The images now are wider than the content. I've always liked that and this is why that's here. Sometimes, that's enough justification.

The "written by" may feel weird at first, because I'm the only author of this blog, but I added it in preparation for micropub and having a author card on my content. There is more that I'll need to add on this page regarding webmentions, but I have not read into that topic enough to make design decisions on this yet. This will have to happen later, either in code or in Figma if it turns out to be complex.

The bottom section (I don't want to call it CTA) is more present because I want RSS to be cool again and also I want to be bought coffee.

Other post types

I though about other post types in this context. What I currently think of are link posts (like on daring fireball) which I had in earlier blogs of mine and want to have again. Photo posts might be a possibility as well (even though they would live in notes, I guess). I decided to have those post types as distinct feeds and not mix them with longer posts.

Now what?

Now I will go ahead and do a git init, set up Gatsby and a naive blog and then read into micropub and webmentions and try to get those to work as a first step. Well, now I will go to bed. But sometime in the future, git init and things.

I'm starting to redesign this website. I like the idea of building in public, and this is a good case for doing so. I've documented progress on other projects before, but I want this to be a series of blog posts, not something tucked away in a project page. There may not be too many interesting things to tell in the process to justify more than a few posts, but at least it will prevent the old "I'm busy with my redesign and do not have time to write" dance from happening.

Why start a redesign?

If you're asking why I started the redesign, here is the story: This morning, at about 5:45am, the cat decided to puke right next to my bed. I woke up and could not get back to sleep. Being the only human awake in the house with nothing to do, it felt right to start a website redesign. This was not an idea I had in my mind at all. I did not think about this in the past days. I thought about various features I wanted to add, but a redesign was never on the table. Yet, it felt like it hat do be done. I opened Figma and started with the home page. By the time the family was awake, I had a first draft that I was happy with.

This might be the first time in human history a website got redesigned because of a puking cat. There's worse stories to tell.

Why I think I did it

But there must be more to the story. This sense of urgency and the excitement I got from the first few hours of working on the new design must have a root somewhere. It's now 10pm and I though about it for the better part of the day and my explanation is as follows:

For the last few weeks, I was obsessed with personal websites, reading blogs and looking at what other people are doing. This priming likely brought "working on website" as a general topic to the front of my mind.

I have been blogging on various platforms and under different domains on and off for the last 13 years. This site grew organically. It started as yet another blog and became my personal website with other things on it. I know have projects on here, a CV, a list of app ideas. I have a lot of other things in mind that I'd like to add to the site. Links or Bookmarks are the one that I planned on adding next. Then there are webmentions and microformats.

There is no reason this would not work with the site as it currently is. When I started building this site, I built is as simple as possible on purpose. I wanted to focus on creating content instead of building the site. I feel this way still. However, because of this, the site felt okay to me at best. The minimalist look has a certain aesthetic to it, but I never felt at home with it. I want that to change.

Feeling the excitement when I redesigned the homepage this morning, when I tweaked it more after work and even looking at it now, I am certain this is the right thing to do. I cannot wait for the page to look how it will look. And I'm happy you're here for the journey, if you want.

Where we stand

Not taking writing this into account, I assume I have spent about 3-4 hours with the redesign up to this point.

I started with adding the content I currently have on my homepage to Figma (cut the text to have a better flow) and adding colours to it.

I wanted to have a page with this photo-colour style for years now, but I could never justify spending money on a photographer, since I do not rely on the site as a portfolio. This morning I realised that my phone could do anything I needed. Placed it in a bookshelf next to the window, pointed a flashlight to the wall to have secondary lighting and used portrait mode. It's not white box quality, but it's good enough for me. That's how I look with less than 5 hours of sleep, if you ever wondered.

The content stayed the same, except for the recent articles and the footer. I did a handful of variants with different colours. Started out with an orange (and a different picture where my arms were cut off on the sides) and landed at the pale rose / orange / neon-green combination.

I will design a few more pages in Figma before starting to code. I tend to get bored of that quickly and want to start building the thing, but I enjoy playing around in Figma and hope that will last a few days. I think I will at least do:

• Articles List
• Single Article
• Project Page
• CV
• Content Site

I'm not sure if the notes and article pages should use the same template or if they should differ visually. Will sleep on that.

About the future

With the redesign, I want to change the underlying technology of the site. It currently is built on Jekyll, which worked great and is a lovely project. But I want to learn something new. There is one need I have: I want to be able to use a CMS for managing content on the go. Having to set up the laptop, write something and check it into git feels daunting at times. It makes me not write things I otherwise would have written.

There is a myriad of solutions out there that would fit my needs, but I think I will go with GastbyJS and NetlifyCMS. For one thing, I like writing JavaScript a lot. Secondly, I like the idea of having all my content as markdown files checked into git (as is the case currently) and NetlifyCMS working with that. I heard a lot of good things about CraftCMS as well, but did not look into it. I will do that in the next days, to be sure. Don't think this will be the route to go for me, though.

That's a rough plan, I know. It will get more detailed when we get there.

Building in public

Writing about the progress is a good step, but I want to share actual progress. When the development starts, I will create a new public repository and start deploying from the start. This way, there will always be a latest version of the site to look at.

As for now, the only thing I can offer is the link to the Figma project. Take a look around.

That's it for the first part of the series. Looking forward to this!

Say you have a Post model that should have a maximum of 3 Tags asscotiated to it. There are multiple ways to achieve that:

Use the built in length validation

In models/Post.rb:

has_many :tags
validates :tags, length: { maximum: 3 }

The default error message for this would similar to "tags too long". This sounds weird, so the translations should be adapted: en.activerecord.errors.models.posts.attributes.tags.too_long

Custom validation

  has_many :tags
  validate :tags_count

  def tags_count
    errors.add(:tags_count, "not more than three tags allowed") if tags.size > 3
  end

The adventage here is that no translations are needed.
Since almost all applications I work on are multilanguage and have to be translated, I prefer the first method. It is also more readable.

You know what social media is. You are using it. We both are. Different people use social media in different ways. Some like to post a lot of things and try to get as many likes for what they post. I used to. My contributions never got many likes though. One time, when I was in university, one of my photo posts on Tumblr went viral. I remember what a foreign feeling it was to get a notification every few seconds. Then Tumblr banned nsfw content, drifted into irrelevancy and my life progressed about 8 years without any virality except for covid.

I use social media in a consuming way. I used to read a lot of reddit and watch a lot of TikTok. I read as much of twitter as my anxiety could tolerate. It was not all wasted time, but I assume the amount of meaningful things I got out of the services was 1 out of every 20 bits of content I consumed. This number is not based on any data at all. I will build my entire case on it.

Having a family and a full time job, there is not much time to use social media, because there is always something to do. Water and things that have to be done will find their way. There are three main times when I use social media:

1. The toilet
2. When there is nothing to do for 10 minutes for whatever reason. Don't ask, just take it.
3. Escapism

I have more free time in the evening and on weekends. If there are larger blocks of free time, I use them to do things. Like writing this. But this small list supports my case a lot better.

You cannot improve what you don't measure, Gandhi said. Let's measure: I have sparse free time over the day and 5% of it yield something meaningful. Now let's improve.

I removed all social media apps from my phone (I don't count messaging apps). Where they were, there are now Instapaper and reeder. I subscribed to a lot of RSS feeds, most of them blogs (the terms fediverse and indieweb exist, they might relate, I do not know). When I sit down on the toilet and open reeder, I have more than 100 items unread at most times. I can then choose one based on session length.

Finding new Feeds

The current process works like this: Get attention of an article on new site. There are multiple ways on how to, more below. I save said article to Instapaper. If the general vibe of the site appeals to me from the get go, I subscribe immediately. Eventually, I will read the saved article. If I feel like I want to read more of this, I will subscribe to the site.

Feeds are in one of three states:

• Freshly subscribed, finding out how often I read the content there
• Subscribed for a while and liked
• Subscribed for a while but untouched. Will eventually be deleted

Finding feeds gets easier the more you follow. Blogs tend to link to content on other blogs. Click the link, you found a new blog. In the beginning, I paid more attention to articles friends sent me and subscribed to feeds there. Also, indieblog.page

Objectively, am I a better human being now?

I don't know. But do I read more? Yes. Is the amount of meaningful content I consume on the toilet higher? Definitely. Additionally, this brings back a lot of memories on how the interned was when I was in school, around 2010. This alone is worth it.

Here is a list of blogs that I tend to read frequently:

• https://cagrimmett.com/
• https://jasper.tandy.is/
• https://www.deimeke.net/dirk/blog/ (🇩🇪)
• https://losstopschade.de/ (🇩🇪)

In September 2021 I bought a keyboard with a weird key arrangement that was split in half for a lot of money. I've been using it almost daily for the last 9 months. Following are some thoughts on the keyboard that are neither complete, nor very structured and should under no circumstances be understood as a full review.

While I will talk critically about some aspects of the board, please keep in mind that I think that this is a really good keybard and I like it a lot.

The hardware & build quality

All in all, the Ergodox EZ is built really well. It's almost completely made of plastic, but it does not feel cheap at all. I did not modify it at all, so even though I have a version with tactile switches, the case makes it a rather loud keyboard. It does not sound nearly as good as my Niu Mini with an aluminium case and loubed Kailh Burnt Orange switches, but I can live with that. The stock keycaps feel good and have a nice profile.
That said, there are a few things that I do not like as much about the board.

The feet from the tilt/tent kit are hard to get in the right spot. With the tenting kit, the keyboard has three feet attached to it that can be adjusted in small steps to give the keyboard an angle. I like using it at an angle, it actually feels weird to use it when it's just lying flat on the table.
However, the process is not as easy as it sounds:
First, you have to find positions on all three feet of one half of the board that will make it stable while typing. Then you have to duplicate that exact setting to the other half, or it feels weird after some time. Often, I'm sure that I have the exact same orientation on both halfes, but on of them wiggles. Also, sometimes I fixate one of the feet on a position, but as soon as pressure is applied to it, it moves on step further, causing a wiggle.

The stock wrist rests are not my favourite. I don't know what exactly they are made of, but it feels like some kind of hard rubber. While they are at a nice sweetspot between wood and cloth, the material tends to get filthy after a short while and starts collecting all kinds of dust and hair from my desk.

The layout

There are objective arguments to be made on ortholinear layouts, split keyboards and also orhtolinear split keyboards. I don't want to go into those in the post, so I'll just stick with my personal experience. I type better (i.e. more accurate) on an ortholinear layout. I just don't seem to mess up keys as much. My arms and shoulders feel better with a split board. Natuarlly, the Ergodox layout is very comfortable to me. It took me a weekend to get functional with the layout and about two weeks to get back to my regular typing speed.

What I like about the Ergodox layout in specific is the thumb cluster. The position feels like a very natuarl place for my thumbs to rest. This goes for the first two big keys, at least. For everything else on there, I have to stretch my hands so far that I have to lift them from the home row. As my layouts evolved, those buttons get assinged less and less.

There are also three keys to the inner side of each half that are okay to reach for the most part. When starting out, I set some core keys (esc for example) on those. Since I try to make use of less keys and more layers currently, I have some utility functions on those. On the left side, the two big keys are copy and paste, which is comfotable when selecting something with the mouse.
For what it's worth, I think the moonlander has the superior layout and removes a lot of the pain points I currently have.

Software

The software is just great, period. ZSA encourages you to use Oryx for managing your layouts, which is basically a web UI for qmk, and a good one. It makes configuring and adapting layouts easy and keeps a list of revisions of a layout for. Up until this point, I've adapted my layout 15 time to arrive at my current layout.

For flashing the firmware onto the board, you just download wally, choose the file and press a button on the board. It's actually so easy and fast to do that I changed my layout today in the middle of writing a commit message without leaving insert mode.

I think having this great software is one of the main reasons that make the board so worthwile. Switching to it means a lot of changes for the most people. First, you have the split layout. If you're not typing with a clean 10 finger system already, this probably means you will hit the air a lot. Then you have the thumb cluster and in general alternate layout, which makes you think a lot about where a certain key is. And then you have the ortholinear layout, which will likely cause you to hit the wrong keys a lot in the beginning.
So not having to worry about customizing the layout and making it easy to flash the board removes a hughe potential pain point from the process of getting used to it. Most of the times, I just have my layout in a pinned tab so I can reference and change it quickly.

Misc

• Getting one in Europe is possible, but it takes a while to arrive and you have to deal with taxes and customs. I don't know about you, but I don't like dealing with taxes and customs. That's why I took the easy route and set up an alert on Germanys equivalent of Craigslist for people selling the Ergodox. I got lucky one evening and ordered one for 275€.
  From others around the internet, I read that customs and taxes will be about 60€ to 90€, so the total price might settle somewhere around 400€.
• I do not have any problems using other keyboard layouts. I do prefer a ortho split layout, but switching to my MacBook keyboard is seamless.
• If I were to get an Ergodox again now, I would choose the shine version (with LEDs on the back of the board instead of under the switches) over the the glow.
• In the future, I plan to swap out the switches to something fancy and do some mods to the board to make it thocc. This should be easy, since it has hotswap sockets.
• I'm thinking a lot about making my layout a little smarter currently. Probably not down to 36 keys, but I defenitely feel like I don't want to use all keys on the board.

I used the day to make some updates to the site that I wanted to do for a while now.

No more webfonts

I removed all webfonts from the site. It now uses Trebuchet MS for almost all texts (except for code lines, which are set in Courier New).

I thought about this for a while now. Currently, I try to simplify my life in a lot of areas, both digital and analog. Having no webfonts on this site sounded like a good idea in terms of simplicity. I still have this thought in the back of my head though, that a website with a good design has to be fancy. But I think you can also look at design this way: Good design provides the best outcome based on the restrictions it has. So for this site, the restriction is no webfonts. And for that, I think the design works well.

This also has the nice effect that I now have a score of 100 on Pagespeed insights.

So, except for utteranc.es that I installed as a test, this site uses no external resources.
Well, that's not the whole truth.

A thousands words is a lot of words

I (finally) set up a system to use images in here. I'm using an S3 Bucket for storage with a CloudFront distribution on top. I'm curious how much I'll have to pay up at the end of the month. Also, I still do not like the experience of the AWS console.

What this is

I currently have two problems. Let me tell you.

I learn a lot of things in a day. Most of them are loosely related to software development, but there are other topics I learn about as well. For some of those, I write articles on this site. But most of the things I learn feel too small to write a distinct blog post for.
I write those things down in my note taking app (currently Roam Research) and transfer some of them over to my knowledge base (this process is very bulky and I'm thinking about how to make this easier), but I don't write about them on this site, since they feel too insignificant. That's the first problem.

The second problem is that I would love to publish more on this page, but I only have limited time during the week. Writing a longer article (like Using sass variables for svg background-image fill) can take up two or three evenings.

Luckily, there is a simple solution for both problems: Squeeze mutliple things I learned into a single article. This way, I will have the feeling that it contains sufficient information to be published and I don't have to invest too much time since I already wrote up most of the things anyways.

So, this is what this is.

The actual thing

Rails testing

I was in the situation that my tests were running, but there was no output at all. Just stuck in what seemd to be an infinite loop. There's a couple of things I picked up on the way to fixing this.

Rails test logs

Logs from the tests are saved to logs/test.log. So tail -f logs/test.log can give you a good hint on what is happening.
Also, this can help you getting a backtrace if a ruby process hangs without output.

Looking at the logs, I realized that the tests froze after a few database queries. So I decided to look at the database next.

Mysql Metadata locking

Mysql uses metadata locking to manage concurrent access to database objects (Docs).
You can get a full list of processes running using SHOW FULL PROCESSLIST;.
show processlist yields a cleaner view. In my case, there ware a dozen or so processes, all with the state Waiting for table metadata lock. Killed all of them and tests were working again.
This StackOverflow answer goes into a lot more detail on this.

The RSS specification

After deciding that I want to read less social media and more blogposts, I started to fill up Reeder again. For the last week or so it has pretty much replaced all my social media consumption.

I took this chance to also look in the RSS Specification and build a small (and currently non-fucntional) RSS-Parser myself. The specification is a lot simpler then I thought.

Here's the basic markup:

<rss version="2.0">
  <channel>
    ...
    <item></item>
    <item></item>
    ...
  </channel>
</rss>

Both the <channel> and the <item> elements have a lot of child elements, however, only a handful of those are reuired.

Channel:

• <title>: The name of the channel
• <link>: The URL to the html site
• <description>: The, well, description

Item:

The item is a little more complex. It can have either the <description> and the <link> or only the <description> if it contains the complete story. That means that all elements of the item are optional, but at least the title or the description must be present.

Random stuff

Articles

• It's not my job: As as senior leader, is everything your job?
• Why blog?: About the andvantages of blogging. Me reading that article and writing this one might have a correlation
• indieblog.page: On my quest to fill my RSS reader with enough things to make it more interesting than TikTok while I'm on the toilet, this was a huge help.

Podcasts

• The art of manliness #805: How to Get Your Anger Under Control: An interview with Dr. Chip Tafrate about anger. What it is, if it is good or bad and how to get it under control if it has a negative influence on your life.

Books

Currently reading A brief history of humankind. Learned that the Agrarian Revolution, often referred to as a milestone in human history, was actually a bad deal. Humans worked more, had less time and also less food (because more children were born) that was less healthy.

Let's assume we have an element that has an svg as a background image in the data-uri format, maybe like this:

.bg-svg {
  background-image: url("data:image/svg+xml,%3Csvg width='108' height='93' viewBox='0 0 108 93' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54 0L107.694 93H0.306423L54 0Z' fill='%230057b7'/%3E%3C/svg%3E%0A");
  width: 120px;
  height: 100px;
  background-repeat: no-repeat;
}

The svg in this case is just a grey triangle, like this, with a fill color of #0057b7

This does not fit our CD at all, so we want it to have our brands main color, $cd-main-color: #ffd700, so it looks like this

String interpolation

Sass allows us to use string interpolation, and since the background-image url is a string, we can use it here. So our first attempt might look like this:

background-image: url("data:image/svg+xml,%3Csvg width='108' height='93' viewBox='0 0 108 93' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54 0L107.694 93H0.306423L54 0Z' fill='#{$cd-main-color}'/%3E%3C/svg%3E%0A");

Now nothing is rendered at all. That's not what we wanted and on inspection, we can see why:

background-image: url("data:image/svg+xml,%3Csvg width='108' height='93' viewBox='0 0 108 93' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54 0L107.694 93H0.306423L54 0Z' fill='#ffd700'/%3E%3C/svg%3E%0A");

The string interpolation also passed in the unencoded # that is saved in our sass variable. By definition, a # inside an URI defines the start of an URI Fragment, which breaks our data-uri.

So there is two things we need to do now:

1. Encode the #
2. Pass in the color variable wihtout the #

Encoding the #

This part is fairly simple, as we can just look this up in an ASCII Table or steal it from the encoded examples above. Either way, we want %23 in there instead of the #.

Only passing in the hex code

To achieve this, we just need to remove the first character from our color variable. Looks like str-slice() could achive that.

The str-slice() function returns the slice of a string starting at the specified index and ending at the specified index.

Let's try that.

$cd-main-color: #ffd700;
$cd-hex-only: str-slice($cd-main-color, 2);

.bg-svg {
  background-image: url("data:image/svg+xml,%3Csvg width='108' height='93' viewBox='0 0 108 93' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54 0L107.694 93H0.306423L54 0Z' fill='#{$cd-hex-only}'/%3E%3C/svg%3E%0A");
  width: 120px;
  height: 100px;
  background-repeat: no-repeat;
}

Unfortunately, this gives us an error:

Error: $string: #ffd700 is not a string.

$cd-main-color is of the type color and we're trying to call a function on it that only works on string types. So we need to convert our color variable to be a string first. There are a couple of ways to do that.

We can use inspect(), which gives us a string representation of whatever we pass in. I'll go with this one. However, the sass docs state that it is only inteded for debugging use. If you do not like to live dangerously, you can also use ie-hex-str() and adapt how much of the string you slice.

So we now have one of those:

$cd-hex-only: str-slice(inspect($cd-main-color), 2);
$cd-hex-only: str-slice(ie-hex-str($cd-main-color), 4);

Only thing left to do is to put the two parts together:

$cd-main-color: #ffd700;
$cd-hex-only: str-slice(inspect($cd-main-color), 2);

.bg-svg {
  background-image: url("data:image/svg+xml,%3Csvg width='108' height='93' viewBox='0 0 108 93' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54 0L107.694 93H0.306423L54 0Z' fill='%23#{$cd-hex-only}'/%3E%3C/svg%3E%0A");
  width: 120px;
  height: 100px;
  background-repeat: no-repeat;
}

Done 🤘

The idea for this stems from this gist, which also wraps the whole thing in a nice function for reuse.

The other day I needed to build a circle with a gap as SVG. Here's how I approched it.

Tl;dr

Use stroke-dasharray to define the gap in the circle. You'll want three values:

1. Offset from the start of the circle (right hand side, 90 degrees)
2. Size of the gap in the circle
3. Fill the rest of the circle (any number greater than what is left from 2 * pi * radius - (offset + gap size), see "Placing the Gap" below for more detail)

So, something like this:

<svg width="250" height="250">
  <circle
    cx="110"
    cy="110"
    r="100"
    fill="none"
    stroke-width="4"
    stroke="black"
    stroke-dasharray="40 80 508"
  />
</svg>

that'll result in

If this is enough for you, I'm glad I could help. If not, I'll go into more detail below.

Quick intro to the <circle> element

The <cricle> element has a few specific attributes we need to know about.

• cx: The x-coordinate where the center of the circle is located
• cy: The y-coordinate where the center of the circle is located
• r: The radius of the circle

A simple example would look like this:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="100" fill="black" />
</svg>

We have an svg that has a width and height of 200. Inside that, we have a <circle> with a radius of 100 (so its 200 in diameter). The center is located right in the middle of our svg.

If we want an outline circle with no fill, we can achieve that as well:

<svg width="208" height="208">
  <circle
    cx="100"
    cy="100"
    r="100"
    fill="none"
    stroke-width="4"
    stroke="black"
  />
</svg>

Note that we had to make the svg 8px higher and wider, as well as move the center by 4px since the stroke for an svg is rendered on the outside and it would be cut off otherwise.

stroke-dasharray

Now to place the gap in our circle, we will use the stroke-dasharray attribute. As the name suggests, this attribute takes an array of dashes for the stroke. Let's play around with it a little.

Only one value

<svg width="208" height="208">
  <circle
    cx="100"
    cy="100"
    r="100"
    fill="none"
    stroke-width="4"
    stroke="black"
    stroke-dasharray="10"
  />
</svg>

This causes the dashes and gaps to be exactly the same size, 10px in this case.

Two values

<svg width="208" height="208">
  <circle
    cx="100"
    cy="100"
    r="100"
    fill="none"
    stroke-width="4"
    stroke="black"
    stroke-dasharray="10 50"
  />
</svg>

This will render dashes with the size of 10px and gaps with the size of 50px. Not too surpirsing.

Three values

Three values is where it gets a little more interesting.

<svg width="208" height="208">
  <circle
    cx="100"
    cy="100"
    r="100"
    fill="none"
    stroke-width="4"
    stroke="black"
    stroke-dasharray="10 50 150"
  />
</svg>

We are iterating though the values, but if it is a dash or a gap changes. Let's go through this, starging at the rightmost side (marked with the small red point).
We will start with a 10px dash, followed by a 50px gap, followed by a 150px dash. Then, the 10px are used for a gap, the 50px for a dash and the 150px for a gap and so on.

We can use this to create an opening in the circle perfectly.

Placing the gap

We now have all the tools we need, the only thing left to do is figure out what to pass to stroke-dasharray.

Let's say we wanted to place a gap between the 4 and 5 o'clock position in our circle. That would be between the 30 and 60 degree mark or between 1/12th and 2/12th of the circle (remember we're starting at the 3 o'clock position).
We could totally get by with just filling in numbers and seeing how it goes, but just for the fun of it, let's calculate the values.

The whole circumference of our circle is

2 * pi * r = 2 * pi * 100 =~ 628

We now want to fill 1/12th of this, then have a gap the size of 1/12th as well and fill out the rest of the cirlce.

1/12 * 628 =~ 52

So our stroke-dasharray would have to be 52 52 524. The last value is what is left from the circumference after the first dash and gap. You could use any number greater than whats leftover here, but since we're practically doing science now, we can as well be precise. Let's put this into action:

<svg width="208" height="208">
  <circle
    cx="100"
    cy="100"
    r="100"
    fill="none"
    stroke-width="4"
    stroke="black"
    stroke-dasharray="52 52 524"
  />
</svg>

And that looks just about right. Nice 🎉

Why not stroke-dashoffset and transform: rotate?

You could also achieve the above effect with just passing the desired gap size to stroke-dashoffset and then rotating the entire svg via CSS to position the gap where we want it. This works for the simple use case we went through above, but has it's limitations.

When I needed to build this, inside the circle there was another element and both of the elements had a uniform linear gradient to it. By rotating the circle, the gradient now went in a different direction on the circle and the inner elements.

If you are using RSpec to test ruby code, you probably have a preference for how your output should look. I think a lot of people like the default output format that looks like this:

....F.....*.....

Obviously, this is wrong. I tend to put a lot of effort in my describe context it texts to make sense when read out after another, so I want to see it. I earned that. I don't want no F...F*...F..F, I want the beauty of my prose to touch my eyes and my soul.

Obviously, I want the documentation format that looks like this:

a method
  with a :param set
    does something that passes
    does something that fails (FAILED - 1)
    does something that is pending (PENDING: No reason given)
    does something that is skipped (PENDING: No reason given)

However, in your CI, you probably don't want half a book printed. Some people prefer color, while others do not like the funky reds and greens distrubing their monochrome terminal asthetics.

What I'm trying to say is: it's subjective. Also, it's tedious to always remember to run your rspec commands with --format documentation --color.

Luckily, you can configurate this from files. In your home directory, you can have an .rspec file to make rspec right for you, globally. Mine looks like this:

--format documentation
--color

If you wanted, you could even add an .rspec file in the root of a project, to force your configuration on your teammates. So, you know, the prose can touch their souls as well (You'll probably have to force-push this to main on a saturday to get through with it).