Headless WordPress on the JAMstack

CSS fix for 100vh in mobile WebKit

May 15, 2020

A surprisingly common response when asking people about things they’d fix about anything in CSS, is to improve the handling of viewport units. One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw and stretches edge-to-edge, that’s fine so long as the page doesn’t […]

Read more ⟶

Comparing Social Media Outlets for Developer Tips

May 15, 2020

As a little experiment, I shared a development tip on three different social networks. I also tried to post it in a format that was most suitable for that particular social network: On Twitter, I made it a thread. On Instagram, I made it a series of images. On YouTube, I made it a video. […]

Read more ⟶

How to Tame Line Height in CSS

May 15, 2020

In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height, we might think about the concept of leading from print design — a term, interestingly enough, that comes from literally putting pieces of lead between lines of type.  Leading and line-height, however similar, […]

Read more ⟶

WTF is a Static API

May 15, 2020

Just like there is a movement to make more websites (and more of websites) from pre-rendered static files (Jamstack), so to might we consider moving content-based APIs to be static. Sean C Davis: A static API is simply a collection of flat JSON files that live on a content delivery network (CDN). It doesn’t perform any action […]

Read more ⟶

Notion-Powered Websites

May 14, 2020

I’m a big fan of Notion, as you likely know from previous coverage and recent video. It’s always interesting to see what other people do with Notion, and even how Notion uses Notion. I’d say most usage of Notion is private and internal, but any page on Notion can be totally public with the flip […]

Read more ⟶

How to Make a Simple CMS With Cloudflare, GitHub Actions and Metalsmith

May 14, 2020

Let’s build ourselves a CMS. But rather than build out a UI, we’re going to get that UI for free in the form of GitHub itself! We’ll be leveraging GitHub as the way to manage the content for our static site generator (it could be any static site generator). Here’s the gist of it: GitHub […]

Read more ⟶

Online Together

May 14, 2020

An Event Apart: Online Together is a single-day online conference with an intense focus on digital design, UX, content, code, and more, giving you deep insights into where we are now and where things are going next. AEA! With a brand new online version of their conference! That’s awesome. AEA is a best-in-class web conference, so […]

Read more ⟶

Equal Width Columns in CSS Grid are Kinda Weird

May 13, 2020

Everything is flexible these days. If you write grid-template-columns: 200px 200px 200px;, sure, you’d have equal-width columns, but that’s a rare day. What you usually mean is three columns of equal fluid width. We’ve got fractional units for that, like grid-template-columns: 1fr 1fr fr;. That’s usually fine, but they aren’t very sturdy like pixels. A […]

Read more ⟶

Pseudo-elements in the Web Animations API

May 13, 2020

To use the Web Animations API (e.g. el.animate()) you need a reference to a DOM element to target. So, how do you use it on pseudo-elements, which don’t really offer a direct reference? Dan Wilson covers a (newish?) part of the API itself:

Read more ⟶

React Single File Components Are Here

May 12, 2020

Shawn Wang is talking about RedwoodJS here: …  it is the first time React components are being expressed in a single file format with explicit conventions. Which is the RedwoodJS idea of Cells. To me, it feels like a slightly cleaner version of how Apollo wants you to do it with useQuery. Shawn makes that […]

Read more ⟶

Using CSS Masks to Create Jagged Edges

May 12, 2020

I was working on a project that had this neat jagged edge along the bottom of a banner image. It’s something that made me think for a second and I learned something in the process! I thought I’d write up how I approached it so you can use it on your own projects.

Read more ⟶

Recent Episodes of ShopTalk Show

May 12, 2020

There is a super cool new Podcast block for WordPress Gutenberg you use Jetpack (released in 8.5). I wanted to try it out, so below you’ll see recent episodes from ShopTalk Show. I’d tell you all about the recent episodes, except then this blog post wouldn’t age very well, because the point of this blog […]

Read more ⟶

Why does writing matter in remote work?

May 12, 2020

Talk to anyone who has an active blog and I bet they’ll tell you it’s been valuable to them. Maybe it’s opened doors. Maybe it’s got them a job. Maybe it’s got them a conference invite. Maybe they just like the thrill of knowing people have read and responded to it. Maybe they learned a […]

Read more ⟶

Accepting Payments (including Recurring Payments) on WordPress.com

May 12, 2020

I’m a fan of building websites with the least amount of technical debt and things you have to be responsible for as possible for what you wanna do. Sometimes you take on this debt on purpose because you have to, but when you don’t, please don’t ;). Let’s say you need to build a site […]

Read more ⟶

Dealing With Stale Props and States in React’s Functional Components

May 12, 2020

There’s one aspect of JavaScript that always has me pulling my hair: closures. I work with React a lot, and the overlap there is that they can sometimes be the cause of stale props and state. We’ll get into exactly what that means, but the trouble is that the data we use to build our […]

Read more ⟶

How I Put the Scroll Percentage in the Browser Title Bar

May 12, 2020

Some nice trickery from Knut Melvær. Ultimately the trick boils down to figuring out how far you’ve scrolled on the page and changing the title to show it, like: Knut’s trick assumes React and installing an additional library. I’m sure that library does all kinds of smart stuff, but if you’re looking to do this […]

Read more ⟶

CSS Animation Timelines: Building a Rube Goldberg Machine

May 11, 2020

If you’re going to build a multi-step CSS animation or transition, you have a particular conundrum. The second step needs a delay that is equal to the duration of the first step. And the third step is equal to the duration of the first two steps, plus any delay in between. It gets more and […]

Read more ⟶

min(), max(), and clamp() are CSS magic!

May 11, 2020

Nice video from Kevin Powell. Here are some notes, thoughts, and stuff I learned while watching it. Right when they came out, I was mostly obsessed with font-size usage, but they are just functions, so they can be used anywhere you’d use a number, like a length.

Read more ⟶

Turning a Fixed-Size Object into a Responsive Element

May 11, 2020

I was in a situation recently where I wanted to show an iPhone on a website. I wanted users to be able to interact with an application demo on this “mock” phone, so it had to be rendered in CSS, not an image. I found a great library called marvelapp/devices.css. The library implemented the device […]

Read more ⟶

Modern CSS Solutions for Old CSS Problems

May 11, 2020

This is a hell of a series by Stephanie Eckles. It’s a real pleasure watching CSS evolve and solve problems in clear and elegant ways.

Read more ⟶