Yearly Archives: 2018

Alex Russell describes his thoughts on the current state of JavaScript and how we might sometimes put a ton of focus on the ease-of-use of development at the expense of user experience. So, for example, we might pick a massive framework to make development easier and faster but then that might have an enormous impact on the user.

Alex describes it as substituting “developer value for user value.”

The “developer experience” bait-and-switch works by appealing to the listener’s parochial interests …

The post The “Developer Experience” Bait-and-Switch appeared first on CSS-Tricks.

Dave and I had Jen Simmons on ShopTalk the other day. Jen was talking about Intrinsic Web Design and how one of the core tenets of it is grids with rows and columns that don’t necessarily change at the same rate or ones that have essentially different rules for how they behave.

For example, take this (contrived) grid setup:

.grid {
display: grid;
grid-template-columns: 1fr minmax(50px, 100px) 20% auto;
}

Each of those columns will behave differently.

I’m just wrapping …

The post Don’t use empty or low content for your design system grid examples appeared first on CSS-Tricks.

A plain-language romp through the trials and tribulations of z-indexby Isabel Brison. On the surface, z-index seems simple. It’s a number and it represents what is on top of what… assuming it is positioned… and assuming it is within the same stacking context as the other things.

… that is the gist of it: stacking contexts are caused by a variety of properties and the main reasons for their existence are performance concerns and ease of implementation by browsers. …

The post Putting things on top of other things appeared first on CSS-Tricks.

Images are critical. Whether it is marketing banners, product images or logos, it is impossible to imagine a website without images. Sadly though, images are often heavy files making them the single biggest contributor to the page bloat. According the HTTP Archive’s State of Images report, the median page size on desktops is 1511 KB and images account for nearly 45% (650 KB) of that total.

That said, it’s not like we can simply do away with images. They’re …

The post The Complete Guide to Lazy Loading Images appeared first on CSS-Tricks.