Welcome to the blog!

It's basically a reverse chronological record of my bookmarks with the occasional release announcement. Not sure where to start? Here are some of my most active tags:

Best 2024 Campaign Website Design

One thing I like to do when national politics have me spiraling into a panic (or, shockingly, when they have me feeling optimistic) is volunteer with Tech for Campaigns. If you have experience in engineering/product/design/etc. and want to help build websites or run email marketing for smaller campaigns, it's a great way to connect with talented, like-minded people and feel like you're actually helping.

As part of that, I've seen a lot of campaign websites this cycle. Sometimes the candidates recommend designs they like. Sometimes I'm out looking for inspiration. Since the content on these sites is generally very similar, it's interesting to see the different design approaches.

So, in no particular order, here's my partisan, totally subjective, and very non-exhaustive list of the best political website designs from 2024.

Elissa Slotkin for Michigan

Download full screenshot

This one is my favorite. Love the color palette, the background textures, and (most of all) the triangular decorative elements.

Lisa Blunt Rochester for U.S. Senate

Download full screenshot

Nice use of background photos. The transitions in the issues and latest updates sections are worth visiting the site to check out.

Bryon Best For Congress

Download full screenshot

A different approach to background photos that creates a very cool overflow effect.

Haley Stevens for Congress

Download full screenshot

The colors here pop and they've managed to create a really eye-catching layout just using overlapping rectangles.

Madeleine Dean for Congress

Download full screenshot

A little more muted but everything about this site is so clean. The opaque design flourishes are subtle but keep things from feeling boring.

Josh Harder for Congress

Download full screenshot

Mostly included for the timeline on the Josh's Story page but the homepage layout is good too.

Tanya for Congress TX 27

Download full screenshot

A lot to like here! The Texas flag as a book logo for a teacher, the ribbon/bookmark motif, and the angled backgrounds complementing both. It all flows together really nicely.

Sydney Kamlager – For Congress District 37

Download full screenshot

Another example of an angled background pairing well with a logo.

Demo poster for Gremlin, a boxy outline font

I've recommended a couple TypeFactory fonts already but Gremlin is also a good one. It's a boxy outline font and free for personal use. My only complaint is that it was a little hard to look up by name because SEO really prefers the title font from the movie Gremlins.

Download at FontSpace or buy at Creative Fabrica.

My sister went to the Culinary Institute of America and I've watched every episode of Top Chef and yet somehow I'm just hearing about the big type wall they have there? And it looks amazing and has a name like Gastrotypographicalassemblage?! Very disappointed with the people and television shows in my life.

Hexadecimal color code for transparency

Hexadecimal color code for transparency. GitHub Gist: instantly share code, notes, and snippets....

I've been back to this Gist so often lately. 8 digit hex codes are a great alternative to RGBA if you're using a styling library like Emotion or a React component library like Material UI and you want to store your colors as 6 digit hex codes. They allow you to change opacity by adding two characters to the end with string interpolation. For example, a white background at 50% opacity would be written background: #ffffff80 or, in JavaScript with a variable, something like background: `${theme.background}80`. The only catch is remembering the alpha codes and that's where this link comes in handy.

I believe the Gist was originally created back when support was mostly limited to Android (which is why the examples add the alpha codes to the beginning) but, according to Can I use... support is pretty widespread today.

And as a bonus, people in the comments have provided the list in different formats like objects and arrays.

Mystery AI Hype Theater 3000

Artificial Intelligence has too much hype. In this podcast, linguist Emily M. Bender and sociologist Alex Hanna break down the AI hype, separate fact from fiction, and science from bloviation. They're joined by special guests and talk about everything...

I've really been enjoying listening to people who know way more than I do separating what's real from what's just hype when it comes to AI. Instead of being dry, a lot of the topics they cover are pretty comical in their ridiculousness.

My only complaint: I think hosts Emily M. Bender and Alex Hanna have NPR-style soothing voices and sometimes find myself lulled into missing a point and forced to rewind.

I was looking at ocean themed fonts recently and Ocean Wave by 177 Studio really caught my eye. The wave illustrations inside each letter are fantastic and so detailed. Free for personal use only.

Other honorable mentions in my search were Spirited Away by DaptsFonts and Squid Junkie by Måns Grebäck.

Download at FontSpace or buy on Creative Market.

Horseshoes & Lemonade Version 3!

I made some changes to my most popular font! I'm not as fastidious when it comes to versioning fonts but 3.0 seems about right since this is the third major change to the family.

This update includes:

Adding a new Horseshoes Outline variation
Improving kerning on Horseshoes
Making minor tweaks to characters that felt a little awkward in Horseshoes and Horseshoes & Lemonade
Bundling up some bonus assets (retro seamless backgrounds and illustrations) in PSD, PNG, and SVG formats

Give it a try here and if you run into any issues, please let me know! And if you previously purchased a commercial license and would like a copy of the new commercial files, send me an email at lauren@laurenashpole.com.

First font download of the year! Nature Impact by 177 Studio is a really cool display font filled with outdoorsy illustrations. Not sure what I'll use it for yet but I wanted to have it just in case. Free for personal use/demo purposes.

Download at FontSpace or buy at Creative Fabrica.

Troubleshooting Universal Links for Non-App Developers

Universal links are Apple's way of directing a link to an app (if installed) or website. Setting them up requires updates to both your app and website. On the app side, you'll need to add your site's domain to the associated domain entitlements while your website will need an Apple App Site Association file. If, like me, you've exclusively done web work, some of the documentation and tools may feel a little dense or unfamiliar. For example, Apple's technotes on Debugging Universal Links is a great resource but assumes some prerequisite app development knowledge. So, this is a guide for troubleshooting universal links designed specifically for people without that experience.

General Gotchas

Links will only open in app when tapped; they cannot be copied and pasted into the URL bar.
The link can't be rendered on the domain you added to the app's associated domains. So basically, if you want to open a link to https://yourdomain.com in app, the link shouldn't be on the page https://yourdomain.com/test-universal-links. As a workaround, I used Replit to publish quick pages to share on mobile. You can also paste links into your Notes app for personal testing.
Instead of pulling the apple-app-site-association file directly from your web server, Apple will serve it from their own CDN. I generally saw updates in about a day but your mileage may vary. If you want to check their cache, you should be able to hit https://app-site-association.cdn-apple.com/a/v1/yourdomain.com.
The Apple docs claim you can bypass the CDN by adding ?mode=developer to the app's associated domains. However, in my experience, backed up by a few users in the Developer Forums, including the param broke universal linking entirely. (It's very possible that I just missed a step so, if you know what I did wrong, please let me know in the comments.)

Tools

AASA Validator | Branch - This validator will run a few checks on your apple-app-site-association file but it's especially reassuring to know that the file contains valid JSON and includes the correct content-type header.

Potential Gotchas

The file Branch validates comes from your web server so it may not match what Apple has saved in its CDN.

swcutil - swcutil is a command line tool that comes built-in on a Mac. You can run swcutil -h to view a list of options but the ones I found most helpful were:

swcutil dl -d yourdomain.com - View the contents of an apple-app-site-association file from a specific domain.
swcutil verify -d yourdomain.com -j ./apple-app-site-association.json -u https://yourdomain.com/page - Verify that a URL matches a pattern in an apple-app-site-association file. This checks against a JSON file on your computer (see the second parameter) so make sure to download it and point to the correct location.

Potential Gotchas

This isn't swcutil specific but, if you're testing a link with a query parameter, make sure to escape the question mark or you'll get a zsh: no matches found error.

iPhone Developer - If you have the app installed on an iPhone, you should be able to use the Universal Links Diagnostics option in Settings > Developer. Enter a URL and the tool will check whether that page would open in an installed app. It also provides the app ID.

Potential Gotchas

To use the Developer tools, you'll need to enable Developer Mode on your iPhone and that's trickier than expected. The toggle switch should be under Settings > Privacy & Security but it doesn't appear by default. To see the switch, you'll need to connect your phone to your computer and either a) open a project in Xcode or b) use a program like iCareFone.

Hope these help save some time and frustration!

All the fonts I liked in 2023

The year has been over for two days so, before I close it out, here's a quick look back at all the fonts I recommended. The big question is, how close will I get to twelve?