HTML is getting better at providing nice APIs for implementing cool features. In this tutorial, Chidi Orji is going to show you how to use the HTMLIntersection Observer API to implement infinite scrolling and image lazy loading in a React functional component. In the process, we’ll learn how to use some of React’s hooks and how to create Custom Hooks. Let’s get started!
Read more…
Thanks to some recent changes in browsers, it’s now well worth setting width and height attributes on your images to prevent layout shifts and improve the experience of your site visitors. Barry Polland loves improvements that just work without any effort required of website owners. That is not to ignore the hard work required by the browser developers and standardization teams, of course, but it’s often rolling out to websites that is the real difficulty. The less friction we can add to introduce these improvements, the more likely they will be adopted, and there’s no better friction than none at all!
Read more…
Let’s make 2020… fast! A front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences on the web today.
Read more…
Images are a big part of the web and, yet, they can cause a lot of challenges for the user experience if not properly optimized or delivered. It’s been almost a decade since Google introduced the world to WebP as a solution to this problem. As more of our browsers, devices and software support it, it’s time that web designers started adopting it as their default image format. In this article, Suzanne Scacca is going to show you What WebP is.
Read more…
You want to build a mobile website or PWA that converts visitors into leads or customers. But with Google and consumers alike becoming ever more demanding when it comes to loading speeds, what more can you do? ImageKit, a digital image optimization service, might have the all-in-one hands-off solution you need. Today, Suzanne Scacca will focus on how you can still design with as many images as you want without slowing down your website.
Read more…
Denys Mishunov recently discussed what “Frankenstein Migration” is, compared it to conventional types of migrations, and mentioned two main building blocks: microservices and Web Components. He also showed you a theoretical basis of how this type of migration works. If you didn’t read or forgot that discussion, you might want to get back to Part 1 first because it helps to understand everything we’ll cover in this second part of the article.
Read more…
What if you spend the unproportionate amount of time to support an outdated system?
The typical answer to such a problem is the migration of the application. However, all of the front-end frameworks are different. In this article, Denys Mishunov will show you “Frankenstein Migration” which is a new, framework-agnostic approach to the process of migration that allows using the same mechanism to migrate to pretty much any framework of your choice.
Read more…
The typical website stack has gotten complex, involving many tools and technologies, and requiring automation to handle its deployment adequately. By automating all the tasks to execute, you will not dread doing the deployment, indeed you may not be even aware of it. In this article, Leonardo Losoviz will take a closer look at Buddy, one of the most comprehensive tools for automating website deployments.
Read more…
The Embedded Image Preview (EIP) technique introduced in this article allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests without having to transfer additional data. JPEG files, for which lazy loading is mostly used, have the possibility, according to the specification, to store the data contained in them in such a way that first the coarse and then the detailed image contents are displayed. Instead of having the image built up from top to bottom during loading, a blurred image can be displayed very quickly, which gradually becomes sharper and sharper.
Read more…
Do you know the impact unused CSS has on performance? Spoiler: It’s a lot! In this article, Luke Harrison will explore a Sass-oriented solution for dealing with unused CSS, avoiding the need for complicated Node.js dependencies involving headless browsers, and DOM emulation. He will then touch upon some existing solution for removing it from stylesheets.
Read more…
