Published by

The serial (“Oxford”) comma and screen readers

People think that serial / “Oxford” commas should be an optional style thing. But if you’re writing for the web, please use it.

Here’s an example of a sentence without a serial comma:

Please bring Jack, your brother and your uncle to the party

And an example of a sentence with a serial comma:

Please bring Jack, your brother, and your uncle to the party

First point: the second sentence makes it much clearer that Jack isn’t some questionable relative and that you’re meant to bring three people to the party.

Second point, and more the point of this post: the sentence with the serial comma is much more intelligibly read by screen readers, particularly when content is being read quickly.

Use the serial comma!

Published by

What to do if Command + R won’t reload your VSCode window

So CommandR hasn’t been reloading my VSCode window. But the “Reload window” command in the palette (ShiftCommandP to open palette) shows that it should work. Charles told me how to fix it!

To sort it out, click the cog icon next to the “Reload window” command in the palette to open the Keyboard Shortcuts settings for that command. Then under the “When” column, right-click isDevelopment and select “Change when expression”. Delete the contents, then press enter. There should now be a dash under “When” to indicate that it’s empty. Close the Keyboard Shortcuts file, then try reloading a window by typing CommandR and it should work.

Published by

How and why I stopped freelancing

A quick disclaimer: This is NOT an article about how to find a full-time job. There are a million posts about that online. And anyways, beyond the general advice1, I’m not sure how useful those articles usually are anyways. Every person’s path to a job is super different.

This is about the steps I took to make the transition from independent work to full-time employment as smooth as possible for my clients, my collaborators, my new employer, and most importantly myself. It’s also about the thought process behind that decision.

In many ways, this is all a long explanation of the feelings behind this earlier post.

It wasn’t without stress, but it worked out pretty well with a lot of prior planning and communication.

Wispy clouds against a blue sky

Before I go in to how, a little about why.

Read more

Published by

My custom bash prompt

This is my custom bash prompt, as defined in my profile (~/.bash_profile). It includes a custom character for the prompt, the path, and the Git branch name (if any). The whole thing is colorful to make it a bit easier to identify the prompt in a sea of characters.

When I’m working on this WordPress theme for example, it looks sort of like this (RSS readers, you’ll miss the colors):

→ ~/sites/commonplace-wp-theme (v0.1.5)

To generate something else, try messing around with the Bash $PS1 Generator.

If you want to try something like this, do not delete the rest of your profile. Just add this at the top.

# Get the Git branch
parse_git_branch() {
  git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}

# Custom bash prompt
# Includes custom character for the prompt, the path, and Git branch name. With colors!
# Source: kirsle.net/wizards/ps1.html
export PS1="\n\[$(tput bold)\]\[$(tput setaf 5)\]➜ \[$(tput setaf 6)\]\w\[$(tput setaf 3)\]\$(parse_git_branch) \[$(tput sgr0)\]"

Note: I got this from someone else at some point… I’m trying to figure out who but haven’t gotten to the bottom of it.

Published by

Fluid type sizes and spacing

I’ve been using a fluid type and spacing system on the most recent builds I’ve completed. Here’s why I use it, and how I approach it. I mainly use SCSS (a Sass syntax), but it’s also very do-able with plain CSS.

Screencast of Gort Scott’s homepage, resizing it in Chrome’s inspector

The example above demonstrates the result on gortscott.com, resizing the window from about 2300px down to about 640px and back again. The type and spacing across the page begins scaling down when the window is 2095px wide and stops shrinking at 1047px wide. At that point the text begins to reflow as the CSS Grid layout continues to shrink. Eventually at 703px wide the layout shifts, and again at 543px wide.

Read more

Published by

CSS blend modes: beware the stacking context

I’m working on a site with a complex entanglement of blend modes, SVG backgrounds, gradient backgrounds, positioning, and transitions. I’ve run in to a bunch of issues with mix-blend-mode not working as expected, and it almost always has to do with an inappropriate stacking context.

For posterity, this StackOverflow answer is a really good run-down of CSS combos that create new stacking contexts.

Now to see what I can do about browsers rendering color profiles slightly differently… 💀

Edit: UGHHHHHH it’s different in different browsers. Check out this CodePen in Chrome and Firefox vs Safari. This is why we can’t have nice things.

Edit 2: See the answer to the cross-browser problem from the previous CodePen, via Gregory Cadars (view thread). So Safari is actually behaving correctly, but it’s still a stacking context issue.

To recap: I’m trying to display a “fixed” gradient background with content that scrolls over the top of it. Within this content, only the images have mix-blend-mode: overlay. In the original CodePen, I’m achieving this via a fixed position, 100% width + 100% height element with a linear gradient. This is within the same wrapper as the content.

My example is working in Chrome and Firefox. In Safari, it is effectively as if the blend mode hasn’t been applied. Though I’m not sure why the difference between browsers, it does make sense that a fixed position element would still create a new stacking context regardless of its parent.

In Gregory’s example, he’s removed the fixed position element with the gradient and instead applied the gradient background to the wrapper, as well as background-attachment: fixed via the background shorthand. This achieves the exact same effect, without stacking context issues.

The only thing that gives me pause is performance… I remember running in to some issues when I considered using background-attachment: fixed for Elizabeth Peyton’s Eternal Return. I can’t remember what it was exactly but it had to do with repainting on every scroll event (so, a lot!). I think that this article may give some context, but I’ll have to dig in to it further.

Related: See this CSS gradients resampling tool by Rutherford Craze for smoother gradients, shared by Gregory in the thread.

Twitter is a crappy place a lot of the time, but I love it for things like this.

Published by

Gemma’s site in AIGA Eye On Design

Read “There’s More Than One Way to Share Your Design Work: Four fresh takes on the portfolio” on AIGA Eye On Design.

They spoke to Carly Ayres, Prem Krishnamurthy, David Reinfurt, and Gemma Copeland about their approaches to an online portfolio / website. Gemma spoke a bit about how we designed and built her site together, it was a lot of fun. See her site gemmacope.land, or take a look at the GitHub repo. BIG thanks to Howard Melnyczuk for fixing a bug I totally missed. 🤦🏻‍♀️ 🙏

Published by

Updates to v-fonts.com

I’ve been working with Nick Sherman on some updates to v-fonts.com, and he pushed the changes on Saturday. 🥳

He managed to do it right before his TypeLab talk about these updates as part of Typographics 2021. He kindly invited me to join the talk, and it was a pleasure going through things together. Thank you to Petr Van Blokland for shifting things around so that I could contribute!

Screenshot from Nick Sherman and Piper Haywood’s talk about v-fonts.com as part of TypeLab

Screenshot from Nick Sherman and Piper Haywood’s talk about v-fonts.com as part of TypeLab

About the changes

For context/posterity:

Nick approached me about helping out with v-fonts.com after our back-and-forth about surface area-based logo sizing a little while back. I was pretty excited about the prospect since Nick’s a lovely guy, and I’ve found his Variable Fonts site so useful in the past!

The most major update is the introduction of term-based archives for tags (e.g. unusual variation or serif), designers (e.g. Elena Schneider), publishers (e.g. DJR), licenses (e.g. open source), and character sets (e.g. Cyrillic). These archive pages should make it a bit more straightforward to browse all of the listings, and they provide some useful context for the groupings. Nick has done phenomenal work curating it all.

Other updates include quantities to signpost how many results are returned and how many are left, better keyboard navigation for the sliders, and a RSS feed (yay!!). If RSS is your thing, you can find the link in the site footer.

There’s a lot more we’d like to do though.

For the future

A few enhancements for later down the line:

  • Automated content creation; we could potentially extract some data from the font files to speed up content editing/uploading; the Wakamai Fondue repo on GitHub by Roel Nieskens will no doubt be an invaluable resource for this!
  • Enhanced preview capability; would be nice to change the preview text and the size of the text
  • Automated font preview images for RSS

Things we’d like to get to sooner 🤞 include:

  • Filtering by axis (weight, slant, etc.); this sort of exists currently (see one of the screenshots above for an example), but we can’t really expose it yet due to some limitations
  • Prettier URLs for tags, with automated redirects from the old URLs
  • Sorting capability by things like the date the font was updated or alphabetical by title
  • Multi-dimensional filtering; would be nice to look at all of the serif fonts with extended Latin support that offer a trial, or check out all of the open source variable fonts published by Arrow Type, for example
  • Search!

We didn’t end up including these changes because we hit a few walls with the ExpressionEngine set up. EE is a great CMS, but unfortunately it doesn’t seem to give us quite enough control out-of-the-box for the more extended functionality we’re after. I explored add-ons and such for some of these things, but it quickly felt like too scrappy/hacky when there are other CMS options out there that would allow us to achieve this more maintainably.

So the next big step will likely be migrating to a different CMS. Big task (code, content, URL redirecting, etc.), but do-able! At the moment, I’m eyeing Craft CMS + the Feed Me plugin by the Craft developers for semi-automated content migration.

But it will be a few months before I take a look at it due to maternity leave coming up so soon, so we’ll evaluate the best CMS for the job then. I don’t expect a better CMS option for this particular project to come up between now and then but you never know, these things can move so fast!

Thanks for the screenshots, SB!

Published by

Sass + Eleventy, remember to opt out of using .gitignore

I’m working on an Eleventy site at the moment, the first Eleventy site I’ve done that’s been complex enough CSS-wise to warrant using Sass. I’ve turned to Phil Hawksworth’s Sass + Eleventy technique for the job. It’s a great, simple way of using Sass with Eleventy with a little bit of preprocessing courtesy of Gulp.

Hit a wall at one point though, it was smooth sailing and then my CSS updates just stopped working.

Turns out I had added /_includes/main.css (the compiled styles) to my .gitignore file since I prefer not to commit compiled files, but I forgot that Eleventy uses the .gitignore file + the .eleventyignore file to decide what not to compile. So Eleventy was just ignoring it. 🤦🏻‍♀️

I did this .gitignore change as an end-of-day commit, tidying things up before closing my laptop. When I picked the project back up days later, it took me longer than I’d like to admit to figure out what was going on!

To sort it, I just had to opt out of using .gitignore by adding eleventyConfig.setUseGitIgnore(false); to the .eleventy.js config file, and then adding the necessary files listed in .gitignore to .eleventyignore. Then I re-ran gulp watch & npx eleventy --serve, and all was well.

Separate but related to static site generators: Check out Astro. Would be curious to see a detailed comparison of Eleventy vs Astro since Eleventy is currently top-of-the-list for me in terms of static site generators.