Work — Page 3 of 9 — Piper Haywood

Published Monday, 21 June 2021 by Piper Haywood

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!

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 Friday, 18 June 2021 by Piper Haywood

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 Thursday, 3 June 2021 by Piper Haywood

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 Monday, 17 May 2021 by Piper Haywood

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:

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.

Published Thursday, 15 April 2021 by Piper Haywood

General maintenance tips for website owners

This was originally written as a bit of a guide for my clients and collaborators, an aggregation of similar tips I have given to many of them individually in the past in so many shorter emails and conversations. Since it is relevant to most website owners though regardless of their relationship with me, I decided to share it more broadly here.

Websites require maintenance, even those with the smallest of footprints.

This is what I would consider “bare minimum” website-related maintenance tasks including checking your payment methods and contact details, reviewing your login and security practices, performing updates and taking backups, and checking your privacy policy.

If you do fall behind on maintenance (it happens to the best of us!) and something goes wrong, at the very bottom you’ll find some tips on what to do if your site goes down suddenly.

The vast majority of these tasks do not require a web developer or IT person, almost anyone can perform this maintenance so long as you have access to necessary logins, can follow instructions, and are willing to set aside the time.

I say “almost anyone” because some people are understandably uncomfortable with wading in to this stuff, they may get confused or a bit daunted by the user interfaces they have to use. In that case, just be sure that you are working with someone that can hold your hand through it or can simply do it for you. Also, not everyone has access to all of their service providers. If you’re in a different situation, for example if you retain a web developer, design studio, or IT person to continuously maintain your website, then these are worthy topics to discuss with them but ultimately they will probably need to complete these tasks for you.

Of course there are other maintenance tasks that are super worthwhile. For example it might be worth checking search performance or 404 pages with Google Search Console if search engine optimization (SEO) is important to you, or to check analytics if that’s relevant to your site. And it’s worth speaking to your web developer about front-end maintenance. CSS and JavaScript gets better all the time, as do browsers, so old front-end behavior can really date a site.

But that’s all just the cherry on top. If you complete the tasks below I’d say you’re pretty golden, probably a step ahead of 80% of the site owners I’ve come across.

Maintenance is everything

I don’t expect most of the opinions that I hold now to have the same shape in 10, 20. years. I don’t think any of us is the same person every day, identity shifts with every tiny experience, so it’d be a silly thing to suggest or expect.

But one that I think might stick, the thing that might last if I ever wrote a manifesto: Maintenance is everything.

Bikes, physical health, mental health, roads, relationships, furniture, websites, clothing, parks, plants, sewers.

If it’s worth creating/buying/doing in the first place, it’s usually worth maintaining. And I love maintenance, fixing things, so that’s lucky! (Don’t like cleaning so much, which is another major part of physical maintenance, but I’m working on that.)

The problem is that new/shiny is a lot more lucrative than old/broken (more on this). How do we shift that mindset?

Published Thursday, 11 March 2021 by Piper Haywood

Dev environment issue related to MySQL and missing OpenSSL v1.0.0 symlink

I woke up early this morning to get some work done before a call and suddenly my local dev environment stopped working without warning and with seemingly no reason. The root issue was that MySQL wouldn’t work, /usr/local/opt/openssl/lib/libssl.1.0.0.dylib was not loading.

TL;DR: This may have been related to some automatic cleanup on Homebrew’s part. But regardless, a simple restart sorted it. If this happens again and restarting doesn’t sort it, try uninstalling and reinstalling MySQL.

The rest of the detail is below for posterity if I run in to this in the future.

Questions and questionable answers on the blockchain and cryptocurrencies

Quick note: This post is way too long… but it felt weird to split it up considering it all came from the same burst of research, and I didn’t want to cut some of the finer details because I’m using this for reference. So apologies! ¯\_(ツ)_/¯

I’ve been aware of cryptocurrencies and the blockchain for a long time but have never taken a moment to dig in. Recently there’s been a lot of buzz around the blockchain amongst people I know and like. Some of these people have historically been pretty skeptical about it, as have I, so this has made me curious about what might have changed.

This is an attempt to get to the bottom of a few concepts and questions that have been lingering in my mind. It starts with a very basic attempt to describe the blockchain and crypto and then moves on to topics I’m particularly concerned about, especially energy usage, risk / legality, and the impact on the digital divide. I’m calling these answers “questionable” because I’m definitely still learning, but I’ve done enough research and thinking around it all that I’m comfortable with what I’ve written here. If you read any of this and think I’ve gotten something wrong, let me know.

I’m most interested in why non-fungible tokens (NFTs) are getting so much hype right this moment but decided to focus on the blockchain and crypto first since it forms the foundation of NFTs. A dive in to NFTs is to come separately.

What is the blockchain?

The blockchain is a way of storing data cryptographically. You can think of the term quite literally: blocks of data are chained together to form an ever-growing and nearly immutable ledger. The blockchain as we know it was invented in 2008 and was implemented for the first time with the Bitcoin protocol in 2009, creating the cryptocurrency bitcoin.

The blockchain is decentralized, meaning it isn’t stored in any one place. It is instead distributed across every different computer, or node, that has interacted with it on a particular network. The blockchain is one of many decentralized technologies, but it is more of a concept than a unique protocol such as Dat or the InterPlanetary File System (IPFS) (neither use the blockchain, to be clear). There are many different blockchain protocols with different advantages.

On the blockchain, each block of data and the way it is connected to the previous block is permanent and verifiable without the need for any third-party involvement or intervention. Because of this, one of the most common applications for the blockchain that we’ve seen so far is cryptocurrency transactions and investment.

But it’s worth noting that the blockchain can be useful for much more than cryptocurrencies and decentralized finance (DeFi). I’m particularly interested in the Handshake Network, a decentralized domain name system (DNS) alternative. And the blockchain could also be used to track the supply chain to prove with 99.9% certainty that a particular product’s manufacturing didn’t involve things like child labor.

Fix for overflow at top / bottom of screen when using CSS Scroll Snap

I’m currently working on a site that uses CSS Scroll Snap to frame some of the content nicely as you scroll through. In Chrome though, I was getting weird overflow issues at the top and bottom of the screen. If I scrolled to the bottom and then kept attempting to scroll down, it would gradually add more and more length to the page. Same with scrolling back up.

Adding overscroll-behavior-y: none; to the body element sorted it out. Read more about overscroll-behavior on MDN.

I originally tried to add this property to the html element since that’s the element with scroll-snap-type: y mandatory;. This didn’t work though, it seems that overscroll-behavior has to be on body.