Andrea Verlicchi - Blog
Hello! I'm Andrea and I wrote...
Detect IntersectionObserver with an online tool
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 →Responsive and accessible table design
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 →Lazy load responsive images in 2019
In the latest years, both at my job and as maintainer of a LazyLoad script, I’ve specialized in lazy loading of responsive images. Today I’m going to show you what HTML, CSS and JavaScript code you need to write in 2019 in order to serve responsive images and load them lazily. In the second part of the post, I’m also showing how to make the browser natively pick the WebP image when it supports it.
Read more →My notes from Full Stack Fest Barcelona
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 →Check if an element is still inside viewport after a given time
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 →Create a JavaScript library using ES2015 modules, Gulp, Rollup and Jest
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.
Read more →Intersection Observer and Lazy Load of elements
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 →Using CSS variables as a spacing unit
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 →Changing text color for contrast based on background lightness
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 clip and clip-path.
Notes from Front-Trends 2017 Warsaw conference
I’m currently in Warsaw, Poland, attending the 2017 edition of the Front-Trends conference. You can find my personal notes on Github.
Read more →Responsive images, an HTML 5.1 standard
It’s official. Responsive images are a W3C recommendation since November 2016, featuring the brand new picture tag and new attributes for the img tag: srcset and sizes.
Talk about responsive images at CSS Day 2017
On March 17th 2017 I spoke about responsive images, an HTML 5.1 standard at the CSS Day 2017 Conference in Faenza, Italy. The speech was on web performance, since using responsive images is a way to serve lighter images to smaller screens (and viceversa) and images optimization. I also took a sneak peek on how to generate the right size for your images in the cloud using a software as a service.
Read more →5 accessibility tips to code accessible e-commerce websites (speech)
On October 6th 2016 I spoke about 5 tips to code accessible e-commerce websites at the Fronteers Conference 2016 Jam Session in Amsterdam. Here are my slides. Video coming soon. Maybe also a blog post :)
Read more →Responsive images? You don't need the picture tag
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. Do we need to use the picture tag, or the img tag is enough? The img tag can do it, using its sizes and srcset attributes. Here’s how.
YOOXlabs 1st Tech Event speech about Compass & SASS
On Tuesday, 22nd September 2015 the first YOOXlabs tech event took place in Bologna, Italy and I spoke about agile CSS development using SASS and Compass.
Read more →Lazy load of responsive images with srcset and LazyLoad
It’s now possible (yes, today!) to have lazy loading on responsive images to make our images to adapt to users screens and keep our website fast. YAY! \o/ In this article, we’ll see what markup we need to write and which Javascript libraries we’re gonna need to do that.
Read more →CSS Day 2015 Faenza, Italy - "Sviluppo CSS agile con SASS e Compass"
On Friday, 2015 March 27th I spoke at CSS Day in Faenza, Italy about agile CSS development using SASS and Compass. The slides are now live on SlideShare and embedded below.
Read more →Advanced sprite generation using Compass (SASS)
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. Here’s how you can do sprites using Compass.
Read more →A new LazyLoad to improve your website performance
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. So after sending a pull request to its author, I decided to write my own lazy load, which turned out to be better, because:
Read more →PicturePolyfill 4 - the fastest picture tag polyfill
PicturePolyfill 4 is out! Implementing responsive images in your site has never been so simple and fast.
Read more →