A Deep Dive into Native Lazy-Loading for Images and Frames

Today's websites are packed with heavy media assets like images and videos. Images make up around 50% of an average website's traffic. Many of them, however, are never shown to a user because they're placed way below the fold. What’s this thing …

Iterating a React Design with Styled Components

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs. There would be consensus among developers about the best way to approach styling. There’d be one …

Weekly Platform News: PWA Issue on iOS, Performance Culture, Anti-Tracking in Browsers

Installed PWAs cannot easily be restarted on iOS Maximiliano Firtman @ Roma✔@firt iOS 12.2 PWAs In-App browser for external content (OAuth) New lifecycle (No Reload)Navigation gesturesWebShareMotion Sensors disabled; old getUserMedia removed IntersectionObserver, ConicGradients, datalist, color picker, AbortFetchhttps://medium.com/@firt/whats-new-on-ios-12-2-for-progressive-web-apps-75c348f8e945 …4142:37 AM - Mar 27, 2019Twitter Ads …

Everything You Ever Wanted to Know About inputmode

The inputmode global attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display when a user has selected any input or textareaelement. <input type="text" inputmode="" /<textarea inputmode="" /Unlike changing the type of the form, inputmode doesn’t change the …

Footnotes That Work in RSS Readers

Feedbin is the RSS reader I'm using at the moment. I was reading one of Harry's blog posts on it the other day, and I noticed a nice little interactive touch right inside Feedbin. There was a button-looking element with the number one …

Creating a Diversity Scholarship Program for Your Conference

My partner and I ran a design and development conference company for eight years. During that time, we produced hundreds of hours of conferences, both on-site and online. Diversity scholarships were only becoming a typical conference offering around the time …

The “Inside” Problem

So, you're working on a design. You need a full-width container element because the design has a background-color that goes from edge-to-edge horizontally. But the content inside doesn’t necessarily need to be edge-to-edge. You want to: Limit the width (for large screens)Pad …

How I Use CleanMyMac X

I'm a lifelong Mac user. Ever since our family upgraded from a Commodore 128 to an Apple Macintosh Performa 636 (CD) when I was in middle school, I've never owned or worked on anything other than a Mac. I'm pretty …

What Does it Mean to Be “Full Stack”?

was asked this recently by a fellow developer who was at the same web tech conference I was at. This developer had met a lot of new people who literally introduced themselves as full-stack developers sort of the way Bob Vance, Vance Refrigeration would …

Getting Started with React Testing Library

I can guess what you are thinking: another React testing library? So many have already been covered here on CSS-Tricks (heck, I’ve already posted one covering Jest and Enzyme) so aren’t there already enough options to go around? But react-testing-library is not just another testing …