development

How We Added Open Graph Tags to CloudFour.com

When plugins to add OG tags failed us, we decided to roll our own! This post demystifies open graph tags (which are just HTML meta elements, after all) and shows how we handle them.

css

Highly Customizable Background Gradients

How to create a complex but highly customizable background gradient that can be modified easily using CSS custom properties.

css

The Power of CSS Blend Modes

I knew CSS blend modes could create some cool effects, but even so, a CodePen I saw recently left me shocked at what they’re capable of.

accessibility

Mac VoiceOver Testing the Simple Way

Learning VoiceOver can feel overwhelming, so I’m here to give you a simple, repeatable process you can follow to make testing with VoiceOver as easy as possible.

books

Books I Loved in 2021

I read 30 books in 2021, and 13 of those were reading to my youngest, John. In 2020, our habit of me reading to him at bedtime faltered a bit, as he was getting a bit older. But he was absolutely in love with Breath of the Wild, the open-world

javascript

Defensive API Handling

On a recent client project, we built a form that submitted to a third-party registration service. Easy-peasy, right? What followed was a comical series of incidents that served as an excellent lesson in defensive API handling.

css

Resetting Inherited CSS with “Revert”

For a recent project, we needed to take a small web application and embed it inside a client’s existing site. Typically, this means inheriting the site’s styles. However, in this case, the client wanted this app to follow a new design system that hadn’t been applied to

css

Modern CSS in a Nutshell

A friend recently shared his frustration with CSS development. I responded to him with a high-level overview of the current state of CSS. If you’re feeling a bit out of touch with modern CSS development, I hope this helps. You’d be surprised how much you can do with vanilla CSS nowadays!

images

How to Resize Cloudinary Images in WordPress Timber Templates

Timber’s resize filters don’t play nicely with the Cloudinary WordPress plugin. We added our own custom image optimizer function that check if an image is served from Cloudinary or WordPress and use the appropriate resize method.

frontend

Code Linting for Web Designers

You may have heard that you should be “linting” your code. What does that mean? Why would you want to do it?

process

What's the Point of Standup Meetings?

If your daily standup meeting has turned into “justify your salary” time, something’s gone wrong.

books

Books I Loved in 2020

Once a year, I review the books I read and write a brief post recommending my favorites. 2020 was a brutal, horrible year, and I had almost no mental bandwidth for reading, but I did read three books that I absolutely loved. Gideon the Ninth, by Tamsyn Muir This was

television

TV Shows I Loved in 2020

2020 sucked, but at least there were some good shows to distract us, from the Mandalorian, to Letterkenny, to What We Do In The Shadows

pandemic

A Typical Day in Early 2021

I thought it’d be interesting to show people what it’s like to work from home with kids who are also doing school from home.

git

Quick Tip: How to Hide Whitespace Changes in Git Diffs

If you’ve ever had to review a PR where the only code change is adding a wrapper element, you’ll be familiar with the pain of reviewing what appears to be a massive change but is actually trivial.

responsive

Responsive Images the Simple Way

The responsive images spec is fantastic and covers a lot of use cases, but most of the time you’ll only need one: resolution switching using the `srcset` and `sizes` attributes.

television

What to Watch while Social Distancing

A friend of mine recently asked "What's good on Netflix right now? What are y'all watching?"

npm

How to Publish an Updated Version of an npm Package

What’s typically involved in an npm version release? How can you determine the release process for an existing project? Can project maintainers do anything to make it easier for new contributors?

npm

How to Automatically Update Your JavaScript Dependencies

One frustrating aspect of the modern JavaScript ecosystem is keeping all your dependencies up to date. Thankfully, there are automated tools that can handle this thankless task for you.

books

Books I Loved in 2019

Once a year, I like to look back over my reading history and write a brief recommendation of my favorites. Partly I do this for anyone who might trust my judgement on what to read, but mostly it's because I have a terrible memory. I have books on my shelves

productivity

22 Panels That Always Work: Wally Wood’s Legendary Productivity Hack

Comic book artist Wally Wood’s “22 Panels That Always Work” is a legendary bit of productivity hacking. How can you reduce “noodling” in your work?

git

Squashing Your Pull Requests

Most pull requests should squash down to a single commit with a well-written message explaining why a change is happening.

job hunting

React-ing to Change

Exactly one year ago today, I was laid off. At the time I was working for Say Media, a small media company that was acquired by Maven, “a relatively unknown start-up run by two notorious media fuck boys [http://bigwnews.com/sport/sports-illustrateds-media-operations-pawne].” I was caught in the first round

npm

How to Distribute a Pattern Library as an npm Package from a Private Git Repo

So you’ve got a pattern library: Congratulations! The next step is making it possible for other people to use those patterns. You could simply provide download links for the CSS and other assets, but then your users can’t easily get any updates to the pattern library. Instead, you

frontend

Friday Front-End’s Top Links in 2018

In 2018, Friday Front-End shared a curated list of five articles and one video every week. Here are the links that were most popular.