Andrea Verlicchi's Blog
Hello! I'm Andrea and I wrote...
As the author of vanilla-lazyload, it’s not the first time I get asked the question:
What are the differences between vanilla-lazyload and lazysizes? This blog post is the answer to that question.
To avoid layout shifting and optimize for the Cumulative Layout Shift web vital in you web pages, you need to reserve space for any content that might be rendered later in time. This is the case for images, videos and any asynchonously loaded content (e.g with AJAX calls). Here’s a new way to do it.Read more →
Before the day Safari started support WebP images, we were forced to use the
picture tag to serve WebP images to browsers supporting it. Today all modern browsers support WebP, so there’s probably a clever way to do that using a single tag:
With the rise of very high density “super retina” displays in the newest high-end devices, capping image fidelity to 2x leads to a big improvement in terms of rendering speed, and no perceivable quality loss for your users. Here’s a new best practice on how to do that.Read more →
Here’s a practical guide on how to productively use the new Chromium-based Microsoft Edge browser: download it, change the default search engine, install extensions, and more.Read more →
This site is run by Jekyll on GitHub pages and its CSS is built using SASS. Today I decided to boost performance even more inlining the render-blocking critical CSS, but even searching the internet I struggled to find an easy way to do it. This post is for you, in case you want to do the same.Read more →
Today I experimented with the Web Share API and implemented it on this website, just to begin. Here’s what I did and how you can implement it on your website.Read more →
Some of my workmates and I took part to a Google Hackathon about Progressive Web Application and we learned a lot, so I’ve decided to enable this website as a PWA. Here’s what I did…Read more →
On I wrote my first article on Smashing Magazine: Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading.Read more →
On April 6th 2019, Addy Osmany wrote about native image lazy-loading. Two days later Yvain, a front-end developer from Paris, asked me if my vanilla-lazyload could be a loading attribute polyfill, inspiring me to develop and release version 12 of the script, which features a new
use_native option to enable native lazy-loading where supported. You can already use it today.
Today I updated my iPhone to iOS 12.2 beta 4 which features the new version of Safari (also 12.2) with support to the IntersectionObserver API. I wanted to see it clearly so I’ve created a web page that detects and reveals to you if it’s supported.Read more →
How to make a potentially wide table fit on small devices, without losing readability and accessibility? Here are simple solutions to make tables look like lists, lists look like tables, in responsive and accessible design.Read more →
I just returned from Barcellona where I attended the Full Stack Fest Conference, which was I think the best one I’ve ever attended in the latest years.Read more →
What would you do if somebody asked you to load a DOM element only if it stays inside the viewport for a given time? You would use vanilla-lazyload, wouldn’t you? 😉 This is exactly what the GitHub community asked for as new feature in LazyLoad, to avoid loading elements which users skipped by scrolling fast beyond them. In this post, I’d like to share the solution with you.Read more →
In August 2017 a new exciting browser API finally gained quite a wide support: the Intersection Observer, which we can use to know when two DOM elements intersect, or when a given DOM element enters the browser viewport. Lazy loading of images is just the case.Read more →
Here I show you how you can CSS variables, popular name of CSS custom properties, to scale your layout spaces across different media queries.Read more →
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? CSS filters, blend modes? But what if you had to support all browsers, including Internet Explorer? Here are a couple of ways to do that using CSS