Exploring the Complexities of Width and Height in CSS

The following article is co-authored by Uri Shaked and Michal Porag. Let’s explore the complexities of how CSS computes the width and height dimensions of elements. This is based on countless late-night hours debugging and fiddling with lots of combinations of CSS properties, reading though the spe..

Weekly Platform News: The :not() pseudo-class, Video Media Queries, clip-path: path() Support

Hey, we’re back with weekly updates about the browser landscape from Šime Vidas. In this week’s update, the CSS :not pseudo class can accept complex selectors, how to disable smooth scrolling when using “Find on page…” in Chrome, Safari’s support for there media attribute on

Some React Blog Posts I’ve Bookmarked and Read Lately

The React Hooks Announcement In Retrospect: 2 Years Later — Ryan Carniato considers hooks to be the most significant turning point in front end in the past five years, but he also says hooks have muddied the waters as well.Mediator Component in React — Robin Wieruch’s article made me think just how ..

Some Typography Blog Posts I’ve Bookmarked and Read Lately

Font-size: An Unexpectedly Complex CSS Property — From Manish Goregaokar in 2017. Of many oddities, I found the one where font: medium monospace renders at 13px where font: medium sans-serif renders at 16px particularly weird.The good line-height — Since CSS supports unitless line-height, you probab..

Lazy Load Routes in Vue with webpack Dynamic Comments

The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want the component to render. Let’s take a look at how to do this in Vue/Vue Router with lazy loading, and do it as cleanly as possible. I us..

Algolia

Algolia is for search. Literally any website can take advantage of Algolia-powered search. You put JSON data (“records”) in, and then you can search them at lightning speed. The magic of Algolia is that they help you with both of those things: getting data in and getting search results out. As far ..

Some Performance Blog Posts I’ve Bookmarked and Read Lately

Back/forward cache — I always assumed browsers just do fancy stuff with the back/forward buttons and us developers had very little control. Philip Walton tells us it’s critical that we understand “what makes pages eligible (and ineligible) for bfcache to maximize their cache-hit rates.” For example,..

Going From Solid to Knockout Text on Scroll

Here’s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol’ HTML and CSS! This effect is created by rendering two containers with fixed

elements. The first co..

The Web is for More Than Document Viewing

I poked at a tweet from Ken Kocienda over the weekend: “Water not wet” reports man standing in ocean. https://t.co/5oUUdWARTU — Chris Coyier (@chriscoyier) January 31, 2021 I don’t know Ken, so I feel a little bad for being harsh. But I haven’t changed how I feel. Saying “Web browsers are for vie..

I Saw Two Mega Menus Today…

One was the footer of an (older) U.S. Government website: The other was the navigation for AWS services from the AWS Console: It’s weird how much they use the word “Amazon” and “AWS” when you’re literally logged into AWS. Both of them have that vibe of: holy crap we have a lot of stuff, I guess ..