Skip to main content
Fresh Article

CSS Foldable Display Polyfill

Foldable phones are starting to be a thing. Early days, for sure, but some are already shipping, and they definitely have web browsers on them. Stands to reason that, as web designers, we are going to want to know where that fold is so we can design screens that fit onto the top half and bottom half… or left half and right half¹. … Read article “CSS Foldable Display Polyfill”

Link

Create Diagonal Layouts Like it’s 2020

Video

#180: Tinkering with Video on Mobile

Fair warning: I’m no expert on this stuff, I’m just playing around with video on the web and addressing some issues I have when showing off video clips in blog posts.

I have an iOS simulator up in this video, and I’m putting an HTML video tag in a basic HTML document for a quick video I recorded with Kap.

There are lots of things to consider with video:

  1. Giving it controls! As in, <video src="" controls></video>. Note
Read article “#180: Tinkering with Video on Mobile”
Article

Creating Scheduled Push Notifications

Scheduled is the key word there — that’s a fairly new thing! When a push notification is scheduled (i.e. “Take your pill” or “You’ve got a flight in 3 hours”) that means it can be shown to the user even if they’ve gone offline. That’s an improvement from the past where push notification required the user being online. 

So how do scheduled push notifications work? There are four key parts we’re going to look at:

  • Registering a Service Worker
  • Adding
Read article “Creating Scheduled Push Notifications”
Link

The WebAIM Million—Updated

Link

Learn Eleventy From Scratch

Article

How to Re-Create a Nifty Netflix Animation in CSS

The design for Netflix’s browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll through content and hover on items to see a preview.

One unique characteristic of the UI is its hover behavior. When a show preview expands on hover, the cards next to it are pushed outward so that they don’t overlap. … Read article “How to Re-Create a Nifty Netflix Animation in CSS”

Link

CSS Findings From The New Facebook Design

Article

A Grid of Logos in Squares

Let’s build a literal grid of squares, and we’ll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo grid before. You can probably already picture it: an area of a site that lists the donors, sponsors, or that is showing off all the big fancy companies that use some product. Putting the logos into squares is a decent way of handling it, as it forces some clean structure … Read article “A Grid of Logos in Squares”

Video

#179: A Grid of Squares

Using CSS grid to make a grid, is, well, the whole point. But what if you want all those grid items to maintain an aspect ratio, like a 1:1 square? It’s possible, but it involves a little trickery. In this video, we’ll look at doing that because we want to put a logo, centered, in each square.

One of the final demos:

CodePen Embed Fallback… Read article “#179: A Grid of Squares”
Article

Continuous Deployments for WordPress Using GitHub Actions

Continuous Integration (CI) workflows are considered a best practice these days. As in, you work with your version control system (Git), and as you do, CI is doing work for you like running tests, sending notifications, and deploying code. That last part is called Continuous Deployment (CD). But shipping code to a production server often requires paid services. With GitHub Actions, Continuous Deployment is free for everyone. Let’s explore how to set that up.

DevOps is for everyone… Read article “Continuous Deployments for WordPress Using GitHub Actions”
Keep browsing in the archives

Monthly Mixup

Article

Where Style Guides Fit Into Process

Article

Understanding the Almighty Reducer

Article

I don’t like our company’s process. How do I tell my boss?

Snippet

Random Hex Color

Monthly Sponsor
Thanks, Frontend Masters!