Andrea Verlicchi

On April 6th 2019, Addy Osmany wrote about native image lazy-loading.

How to make a potentially wide table fit on small devices, without losing readability and accessibility?

In the latest years, both at my job and as maintainer of a LazyLoad script, I've specialized in lazy loading of responsive images.

What would you do if somebody asked you to load a DOM element only if it stays inside the viewport for a given time?

Let's see how to write a JavaScript library using ES2015 transpiled with Babel, featuring ES modules packed up using Rollup via Gulp, and Jest to test your code.

In August 2017 a new exciting browser API finally gained quite wide support: the Intersection Observer API, which we can use to know when two DOM elements intersect, or when a given DOM element enters the browser viewport.

Here I show you how you can CSS variables, popular name of CSS custom properties, to scale your layout spaces across different media queries.

If you had to change the color of some fixed-positioned text based on the lightness of its scrolling background, how would you do that?

It's official.

Say you have a responsive website layout where images are sized at 100% of the container, but the container is not always as wide as the viewport.

It's now possible (yes, today!)

Spriting is a way to improve performance in your website by putting many images (or icons) in a single larger image, in order to make a single HTTP request instead of many.

In the latest days I've been working on websites performance optimization and I realized that there is no way to take advantage of the progressive JPEG image format on websites if you're using jQuery_lazyload.

We used GIF images to create animations for years, but they aren't pretty to be used over gradients or pictures (no alpha channel, no anti-aliasing) of which modern web sites are full.