Published

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

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

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

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

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

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

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.

Published

Two articles on SPA or SPA-like sites vs alternatives

I missed these two articles by Tom MacWright from last year.

Second-guessing the modern web, 10 May 2020
If not SPAs, What?, 28 October 2020

In both, he outlines few upsides and downsides about the single page app (SPA) approach to websites and has a few points that I have really struggled to articulate in the past.

From “Second-guessing”:

There is a swath of use cases which would be hard without React and which aren’t complicated enough to push beyond React’s limits. But there are also a lot of problems for which I can’t see any concrete benefit to using React. Those are things like blogs, shopping-cart-websites, mostly-CRUD-and-forms-websites. For these things, all of the fancy optimizations are trying to get you closer to the performance you would’ve gotten if you just hadn’t used so much technology.

I’ve dabbled with React and Vue in small side projects and experiments. But the point above is the big reason I’ve never taken the time to sit down and learn either of them properly. For almost every client site I’ve ever done, it just didn’t make sense to make it an SPA.

And I’m not 100% sure, but I think this might contribute to longevity. Some of my clients are still working with the same sites I built for them nearly 10 years ago, a few with just minor security-related updates in the meantime and no other maintenance strictly required. That’s not to say that those sites couldn’t use a “lick of paint” to bring them in to the 2020s; the point is that they work. And for organizations working on really tight budgets, or budgets that fluctuate wildly due to public funding, stability is really important. They can’t afford a developer on retainer to keep things running smoothly.

But of course the SPA vibe is pretty attractive, particularly for cultural orgs. MacWright has some decent alternatives suggested in “If not SPAs” including Turbolinks, Barba.js, and instant.page. Will also mention MoOx/pjax since I’ve used it before for page transitions with very good results, but probably won’t use it in the future as it hasn’t been updated in a while.

And again, there’s the rub. The more non-native scripts, plugins, etc I use in a project, the more likely that it’s going to be a major headache (and thus major time/money for the client) for me to change things down the line if or when that bit of tech is no longer supported or has changed significantly.

So it’s not even so much about being wary of React or Vue, it’s about not making assumptions, being cautious and cognizant of future needs or restrictions when proposing a tech stack. Any tech stack you choose will ultimately become a ball-and-chain, not just those based on JavaScript frameworks. It’s just that the ball can sometimes be heavier than it needed to be, and you can anticipate that with a little foresight.

Published

Some long-winded thoughts on privacy policies and consent popups

This Q&A is compiled from conversations I have had with many, many clients and collaborators who have had a hard time navigating things like the GDPR, privacy policies, cookie notices, consent messaging, and other related topics.

Here are all the questions covered below:

Read more

Published

Edit your hosts file on a Mac to spoof DNS changes

Sometimes I need to spoof DNS changes before they go live, like when double-checking the behavior of a site in a production environment before the site launches.

You can do this by editing your Hosts file. By editing your Hosts file, you’re basically telling your computer, “Hey, ignore what all of the DNS caches are telling you about where to find this site. This is where you should actually look for it.”

All great and useful, but I forget how to do this every time. For future reference:

Open up Terminal (the command line) and run

sudo nano /etc/hosts

You’ll likely be prompted to enter the password for the user you have set up on your computer since sudo tells the computer to execute a command as a superuser, and it needs to make sure you’re authorized to do that. Once the command runs, the file you specified (/etc/hosts) will be opened up in the GNU nano command line text editor. Nano can be a little confusing if it’s super new to you, refer to the docs or search around, guides abound online.

There will probably be a bit of content in this file already. Some of it might be comments, text preceded by a # symbol. Don’t change the existing contents unless you know what the effect will be and you’re really sure about it!

Instead, on a new line at the base, just add a new line with the IP address you want to point to followed by the URL without the protocol (so piperhaywood.com, not https://piperhaywood.com).

Once you’ve changed it, save the file and exit nano. When you load up the URL in a browser, you should be seeing whatever resources are available at the IP address you’ve specified. If you’re still seeing the “old” site, try loading it in a private browsing window.

Don’t forget to change it back when you’re done.