Headless WordPress on the JAMstack

Read Me!

September 11, 2020

A fancy experiential essay from the team at Readymag, which is a tool for building… fancy experiential essays, about fancy experiential essays: With all the technology addressing readability issues, it’s still design basics that distinguish a readable text from one that isn’t. Here are some simple rules we use ourselves when developing engaging texts and […]

Read more ⟶

Using a brightness() filter to generically highlight content

September 11, 2020

Rick Strahl: I can’t tell you how many times over the years I’ve implemented a custom ‘button’ like CSS implementation. Over the years I’ve used images, backgrounds, gradients, and opacity to effectively ‘highlight’ a control. All that works of course, but the problem with most of these approaches is that one way or the other […]

Read more ⟶

How to Get Handwriting Animation With Irregular SVG Strokes

September 11, 2020

I wanted to do a handwriting animation for calligraphy fonts — the kind where the words animate like they are being written by an invisible pen. Because calligraphy fonts have uneven stroke widths (they actually aren’t even strokes in terms of SVG), it was near impossible to do this sort of thing with typical path […]

Read more ⟶

Defining “View Source”

September 10, 2020

Last time there was a little flurry of activity around the concept of “View Source,” I did get the sense that not everyone was on the same page about what that even means. Jim Nielsen: First, when we talk about “View Source” what precisely are we talking about? I think this is an important point […]

Read more ⟶

Modifying Specific Letters with CSS and JavaScript

September 10, 2020

Changing specific characters can be a challenge in CSS. Often, we’re forced to implement our desired changes one-by-one in HTML, perhaps using the span element. But, in a few specific cases, a CSS-focused solution may still be possible. In this article, we’ll start by looking at some CSS-first approaches to changing characters, before considering a […]

Read more ⟶

Setting up and Customizing the Ant Design System in a Nuxt App

September 9, 2020

I don’t typically work with UI libraries because they can be cumbersome and hard to override, which can contribute to a bloated. However, Ant Design has recently gained some some of my affection because it’s easy to use, has extensible defaults, and features a delicate design. Nuxt and Ant Design work well together, in part […]

Read more ⟶

How CSS Perspective Works

September 9, 2020

As someone who loves creating CSS animations, one of the more powerful tools I use is perspective. While the perspective property is not capable of 3D effects all by itself (since basic shapes can’t have depth), you can use the transform property to move and rotate objects in a 3D space (with the X, Y, […]

Read more ⟶

AVIF has landed

September 8, 2020

Everybody is talking about AVIF today because of Jake’s blog post. As the say, I was today years old when I learned AVIF was a thing. But thanks to web technology being ahead of the game for once, we can already take advantage of it.

Read more ⟶

One Action, Multiple Terminal Windows Running Stuff

September 8, 2020

Many development environments require running things in a terminal window. npm run start, or whatever. I know my biggest project requires me to be running a big fancy Docker-based thing in one terminal, Ruby on Rails in another, and webpack in another. I’ve worked on other projects that require multiple terminal windows as well, and […]

Read more ⟶

Jetpack 8.9: Take Donations, Capture Email Subscribers, AMP integration, and More

September 8, 2020

Jetpack 8.9 shipped on September 1 and it shows why the plugin continues to be the premier way to take a WordPress site from good to holy smokes! Several new features are packed into the release, but a few really stand out.

Read more ⟶

Menu Reveal By Page Rotate Animation

September 8, 2020

There are many different approaches to menus on websites. Some menus are persistent, always in view and display all the options. Other menus are hidden by design and need to be opened to view the options. And there are even additional approaches on how hidden menus reveal their menu items. Some fly out and overlap […]

Read more ⟶

All the Ways to Make a Web Component

September 7, 2020

This is a neat page that compares a ton of different libraries with web components. One of the things I learned after posting “A Bit on Web Components Libraries” is that the web platform APIs were designed for libraries to be built around them. Interesting, right? This page makes a counter component. By extending HTMLElement […]

Read more ⟶

Import Non-ESM libraries in ES Modules, with Client-Side Vanilla JS

September 7, 2020

We’re living through a weird era where there are tons of JavaScript libraries that were meant to be used as <script> tags that expose available globals. AND there are tons of JavaScript libraries that are meant to be used through module loaders. AND there are tons of JavaScript libraries that assume you will use them […]

Read more ⟶

Working with JavaScript Media Queries

September 7, 2020

What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this: CSS media queries are a core ingredient in any responsive design. They’re a great way to apply different styles to different contexts, whether it’s based on viewport size, motion preference, preferred […]

Read more ⟶

Using max() for an inner-element max-width

September 7, 2020

I go into all this in The “Inside” Problem. The gist: you want an edge-to-edge container, but the content inside to have a limited width. I think there is absolutely no problem using a nested element inside, but it’s also fun to look at the possibilities of making that work on a single element.

Read more ⟶

Beyond Media Queries: Using Newer HTML &#038; CSS Features for Responsive Designs

September 4, 2020

Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to make responsive sites. In this article, we’ll dig into a number tools (revolving around HTML and CSS) we have at the ready, from responsive images to relatively new CSS […]

Read more ⟶

Supercharging Number Inputs

September 4, 2020

Speaking of number scrubbing (i.e. adding mouse UX to number inputs), you can also add better keyboard commands to number inputs. Kilian Valkhof explains how he added up and down arrows to a number input, as well as modifier keys to change how much the keys increment the value, like Emmet does. This would make […]

Read more ⟶

Stroke Text CSS: The Definitive Guide

September 3, 2020

Whenever I think of stroked text on the web I think: nope. There is -webkit-text-stroke in CSS for it, but it places that stroke in the middle of the vector outline of the characters, absolutely ensuring that the character doesn’t look right. Just look at this in Chrome or Safari. Gross. If you’re going to […]

Read more ⟶

How to Simplify SVG Code Using Basic Shapes

September 3, 2020

There are different ways to work with icons, but the best solution always includes SVG, whether it’s implemented inline or linked up as an image file. That’s because they’re “drawn” in code, making them flexible, adaptable, and scalable in any context. But when working with SVG, there’s always the chance that they contain a lot […]

Read more ⟶

State of Jamstack 2020: Data Deep Dive

September 3, 2020

The Jamstack, a modern approach to building websites and apps, delivers better performance, higher security, lower cost of scaling, and a better developer experience. But how popular is it among developers worldwide, and what do they love and hate about it?

Read more ⟶