Liv Asch

I always use a grid for my cross stitch to make counting easier. Since I always do all the stitches of one colour before moving on to the next colour, there aren't always stitches nearby to count from.

As you can imagine, drawing a grid for even a relatively small piece can be quite tedious. It involves counting batches of 5 or 10 holes. And since the holes are spaced at very specific intervals – for instance, on 18 count fabric there are 18 holes per inch, meaning they're 0.5555... inches apart – it's simply not possible to use a normal ruler to easily find where the 10th hole is each time.

When it came time to start another cross stitch (this one 161 by 174 stitches) I was once again faced with manually counting 335 holes. That is, until I came up with a fun idea for 3D printing a "cross stitch ruler".

These are custom designed templates with the cutouts perfectly spaced to draw tickmarks every 5 and 10 holes on the fabric. All I have to do is line them up and draw round the cutout.

What used to be an exercise in frustration is now a fairly straightforward task that doesn't require anywhere near as much concentration. My next project was ready to go in no time.

I've made a version for 11, 14, 16, 18, and 20 count fabric, and they're all available as STLs on Printables.

When Lego announced a replacement for the retired 10261 Roller Coaster I knew immediately I'd be buying one. I had wanted the old set for years but never had the space to display it, and when I finally did have space, the set was retired.

I finally got my hands on the new 10303 Loop Coaster at the beginning of July and I was so excited to build it that I live tweeted the process with lots of photos.

I've collected all those tweets here for better preservation of the build diary.

The CSS content property is used with ::before or ::after to add additional content dynamically. For example, it could be used to add an asterisk * to the label for required form fields:

label.required::after {
  content: '*';
}

But what happens if someone uses a screen reader to fill in this hypothetical form? They'd hear something like this:

Username star, text field.

While the user might be able to work out from context that a star indicates a required field, it would be better to explicitly convey that.

New syntax was recently added to a draft of the CSS spec which allows alt text to be added to the CSS content property. It looks like this:

label.required::after {
  content: '*' / 'required';
}

Anything specified after the slash / will be used as alt text, so it'll be read by screen readers. Now the form field gets read like this:

Username required, text field.

That's much more understandable! And the asterisk still appears visually in the browser.

Accessibility note

This example of using the alt text for a required form field is contrived just for a simple explanation. In reality, a required form field should be marked up with aria-required="true", which screen readers can use to let the user know a field is required. There's no need to explicitly add "required" to the label.

The content property can also be used to display images using CSS, so adding alt text is especially important for those cases.

The bad news is that this syntax is still a draft, which means it's not real CSS syntax yet. As of writing, it's only available in Chromium-based browsers. Other browsers will treat it as invalid, which might cause the entire content property to be disregarded, even the content before the slash.

For now, unless you can guarantee your users are all using Chrome, it's probably best to wait before adopting this syntax. But in future please bear it in mind as more browsers begin to support it, because accessibility is important.

This post was inspired by a tweet by @chordbug.

Update: 25 November 2020

I have now removed Netlify CMS from my site because I realised it was overkill for a site I only update a few times a year. The information below still stands as a semi-useful tutorial.

As part of rebuilding my website to use Next.js and Netlify CMS, I wanted to reuse components I made for Next.js as the editor preview in Netlify CMS. Unfortunately for me, I couldn't find any resources about how to do so.

After lots of trial and error, I found a way to initialize the CMS as part of a Next.js page, so I was able to import other components to use as the preview. Here's how I did it.

Update: 25 November 2020

I have now removed Netlify CMS from my site because I realised it was overkill for a site I only update a few times a year. The story below is still mostly relevant.

For my first post in almost two years, and to go along with the redesign I've just rolled out, here's the story of why and how I rebuilt this site from scratch on an entirely new technology stack.