Links

Native lazy-loading for the web | web.dev

Now that we have the HTML attribute loading we can set loading="lazy" on our website’s media, and the loading of non-critical, below-the-fold media will be deferred until the user scrolls to them.

This can really improve performance so I’ve implemented it on images and iframes (youtube video embeds etc) throughout this site.

This is currently only supported in Chrome, but that still makes it well worth doing.

Get Waves

I’ve been admiring the wave effect at the foot of banners on Netlify’s website and had noted that they were achieved using SVG. So this tool which helps you “make waves” is pretty timely!

Cookie Consent by Osano | The most popular solution to the EU cookie law

This utility adds a banner to the bottom (or top) of your website, asking the visitor to explicitly give or decline consent for the cookies your website uses. It’s a great free resource which handles the requisite GDPR requirements (and more) and offers a number of customisation options.

We need this because cookies often collect information about their users that, while not specifically identified with one individual, could be combined with other data then used to identify an individual therefore becoming “personal information” for the purposes of the GDPR – and must be treated as such.

Real Favicon Generator

Knowing how best to serve, size and format favicons and other icons for the many different device types and operating systems can be a minefield. My current best practice approach is to create a 260px × 260px (or larger) source icon then upload it to Real Favicon Generator. This is the tool recommended by CSS-Tricks and it takes care of most of the pain by not only generating all the formats and sizes you need but also providing some code to put in your <head> and site.webmanifest file.

Intrinsically Responsive CSS Grid with minmax and min

Evan Minto notes that flexible grids created with CSS Grid’s repeat, auto-fill, and minmax are only intrinsically responsive (responsive to their container rather than the viewport) up to a point, because when the container width is narrower than the minimum width specified in minmax the grid children overflow.

Applying media queries to the grid is not a satisfactory solution because they relate to the the viewport (hence why Every Layout often prefer Flexbox to CSS Grid because it allows them to achieve intrinsic responsiveness).

However we’ll soon be able to suggest grid item width as a percentage of the parent container, avoiding the overflow problem. The new “CSS Math functions” to help us achieve this are min(), max() and clamp(). At the time of writing, these are only supported in Safari however Chrome support is in the pipeline.

Namecheap

I’ve heard a couple of people mention that when they buy domain names, the use Namecheap because they are cheap and trustworthy. I tend not to have any particular favourites but I’ll maybe give Namecheap a go next time.

External Link Search