Skip to main content
Fresh Article

How to Convert a Date String into a Human-Readable Format

I’ll be the first to admit that I’m writing this article, in part, because it’s something I look up often and want to be able to find it next time. Formatting a date string that you get from an API in JavaScript can take many shapes — anything from loading all of Moment.js to have very finite control, or just using a couple of lines to update it. This article is not meant to be comprehensive, but aims to show … Read article “How to Convert a Date String into a Human-Readable Format”

Article

“The Modern Web”

A couple of interesting articles making the rounds:

Read article ““The Modern Web””
Article

Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages

Apple is well-known for the sleek animations on their product pages. For example, as you scroll down the page products may slide into view, MacBooks fold open and iPhones spin, all while showing off the hardware, demonstrating the software and telling interactive stories of how the products are used.… Read article “Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages”

Link

The Fastest Google Fonts

Link

A “new direction” in the struggle against rightward scrolling

Article

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

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 noting though that grid can do the same thing in its own special way. … Read article “Flexbox-like “just put elements in a row” with CSS grid”

Article

How to Make Taxonomy Pages With Gatsby and Sanity.io

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

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

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 at the same time, we don’t want to lean in too hard. If you take an occasional peek into the code your users are … Read article “Avoid Heavy Babel Transformations by (Sometimes) Not Writing Modern JavaScript”

Article

Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects

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 different options when the number of options grows from there. … Read article “Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects”

Article

WordPress Block Transforms

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 most old posts, we see all the content in the “Classic” block. It looks like this:… Read article “WordPress Block Transforms”

Keep browsing in the archives

Monthly Mixup

Article

Accessibility Testing Tools

Article

Methods for Controlling Spacing in Web Typography

Article

Designing A Product Page Layout with Flexbox

Snippet

Layered Paper

Monthly Sponsor
Thanks, Frontend Masters!