Tips I discovered this week (for web developers)
Serhii
Posted on February 6, 2020
Lazy image loading
In case you need to postpone image loading. For example, you have a page that has a list of 10+ images, let's say you describe the details of your recent travel in a blog. When your reader wants to read the article, 10+ images definitely will affect a page loading time.
You can write a logic by yourself, using Intersection Observer API, as well as using ready-made solutions.
But Chrome 75+ has native support for loading
attribute:
<img src="travel.jpg" loading="lazy" alt="Paris castle" />
That means, loading="lazy"
will defer image loading until it become visible on the screen.
Blog post from Lighthouse team
Performance audit in the CI process
The Lighthouse team has introduced a tool that can audit every commit for performance, accessibility issues. Try their online auditing tool if you haven't yet.
Puppeteer
A tool can automate many things you do manually, for example:
- generate screenshots of websites, saving a page as PDF;
- automate UI testing by providing API to make mouse clicks, form submissions, dealing with inputs, etc.;
- crawl SPAs;
- test Chrome extensions;
Pre-loading links
Quicklink pre-loads links in a browser idle time when a link becomes reachable for the user. The tool also verifies whether a user has a slow connection, if so - it will not pre-load a link.
Packages
city-roads
It visualizes all city roads in a particular city, uses OpenStreetMap, renders hand-written like city paths. Source
OpenLayers
One more package to render maps, easy to customize. Source
Posted on February 6, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.