Andrea Verlicchi's Blog

Hello! I'm Andrea and I wrote...

Critical CSS with Jekyll and SASS

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 →

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 →

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 →

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.

Read more →

Slides of my talk about responsive images at CSS Day 2017

e 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 →

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.

Read more →

Pagination

Page 1 of 3 No newer posts Older posts →