Headless WordPress on the JAMstack

A “new direction” in the struggle against rightward scrolling

May 21, 2020

You know those times you get a horizontal scrollbar when accidentally placing an element off the right edge of the browser window? It might be a menu that slides in or the like. Sometimes we to overflow-x: hidden; on the body to fix that, but that can sometimes wreck stuff like position: sticky;. Well, you […]

Read more ⟶

Flexbox-like “just put elements in a row” with CSS grid

May 21, 2020

It occurred to me while we were talking about flexbox and gap that one reason we sometimes reach for flexbox is to chuck some boxes in a row and space them out a little. My brain still reaches for flexbox in that situation, and with gap, it probably will continue to do so. It’s worth […]

Read more ⟶

How to Make Taxonomy Pages With Gatsby and Sanity.io

May 21, 2020

Learn how to make category pages with Gatsby and structured content from Sanity.io.

Read more ⟶

Roll Your Own Comments With Gatsby and FaunaDB

May 21, 2020

If you haven’t used Gatsby before have a read about why it’s fast in every way that matters, and if you haven’t used FaunaDB before you’re in for a treat. If you’re looking to make your static sites full blown Jamstack applications this is the back end solution for you! This tutorial will only focus on the operations […]

Read more ⟶

Avoid Heavy Babel Transformations by (Sometimes) Not Writing Modern JavaScript

May 20, 2020

It’s hard to imagine writing production-ready JavaScript without a tool like Babel. It’s been an undisputed game-changer in making modern code accessible to a wide range of users. With this challenge largely out of the way, there’s not much holding us back from really leaning into the features that modern specifications have to offer. But […]

Read more ⟶

Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects

May 20, 2020

I was reading Anna Kaley’s “Listboxes vs. Dropdown Lists” post the other day. It’s a fairly straightforward comparison between different UI implementations of selecting options. There is lots of good advice there. Classics like that you should use radio buttons (single select) or checkboxes (multiple select) if you’re showing five or fewer options, and the […]

Read more ⟶

WordPress Block Transforms

May 19, 2020

This has been the year of Gutenberg for us here at CSS-Tricks. In fact, that’s a goal we set at the end of last year. We’re much further along that I thought we’d be, authoring all new content in the block editor¹, enabling the block editor for all content now. That means when we open […]

Read more ⟶

How to Build a Chrome Extension

May 19, 2020

I made a Chrome extension this weekend because I found I was doing the same task over and over and wanted to automate it. Plus, I’m a nerd living through a pandemic, so I spend my pent-up energy building things. I’ve made a few Chrome Extensions over the years, hope this post helps you get […]

Read more ⟶

User agents

May 19, 2020

Jeremy beating the classic drum: For web development, start with HTML, then CSS, then JavaScript (and don’t move on to JavaScript too quickly—really get to grips with HTML and CSS first). And then… That’s assuming you want to be a good well-rounded web developer. But it might be that you need to get a job […]

Read more ⟶

Using BugHerd to Track Visual Feedback on Websites

May 19, 2020

BugHerd is about collecting visual feedback for websites. If you’re like me, you’re constantly looking at your own websites and you’re constantly critiquing them. I think that’s healthy. Nothing gets better if you look at your own work and consider it perfectly finished. This is where BugHerd shines. With BugHerd, anytime you have one of […]

Read more ⟶

First Steps into a Possible CSS Masonry Layout

May 18, 2020

It’s not at the level of demand as, say, container queries, but being able to make “masonry” layouts in CSS has been a big ask for CSS developers for a long time. Masonry being that kind of layout where unevenly-sized elements are layed out in ragged rows. Sorta like a typical brick wall turned sideways. […]

Read more ⟶

Unprefixed `appearance `

May 18, 2020

It’s interesting how third-parties are sometimes super involved in pushing browser things forward. One big story there was how Bloomberg hired Igalia to implement CSS grid across the browsers. Here’s another story of Bocoup doing that, this time for the appearance property. The story is told in a Twitter thread, but the thread is broken […]

Read more ⟶

Tackling Authentication With Vue Using RESTful APIs

May 18, 2020

Authentication (logging in!) is a crucial part of many websites. Let’s look at how to go about it on a site using Vue, in the same way it can be done with any custom back end. Vue can’t actually do authentication all by itself, —we’ll need another service for that, so we’ll be using another […]

Read more ⟶

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 ⟶