Google’s Core Web Vitals initiative has taken the SEO and Web Performance worlds by storm and many sites are busy optimizing their Page Experience to maximize the ranking factor. The Cumulative Layout Shift metric is causing trouble to a lot of sites, so let’s have a look at ways of addressing any issues for that metric.
Read more…
Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that. If you want to use web fonts your choices are basically Flash of Invisible Text (aka FOIT) or Flash of Unstyled Text (FOUT). Neither option has really “won out” because neither is really satisfactory, to be honest. Upcoming font options may finally deliver on the promise of making it easier to align fallback fonts to the final fonts.
Read more…
CSS Container queries bring media queries closer to the target elements themselves and enables them to adapt to virtually any given container or layout. In this article, Adrian Bece is going to cover CSS container query basics and how to use them today with progressive enhancement or polyfills.
Read more…
In this article, Shalabh Vyas will show you how to build a WYSIWYG/Rich-Text Editor that supports rich text, images, links and some nuanced features from word processing apps. We will use SlateJS to build the shell of the editor and then add a toolbar and custom configurations. The code for the application is available on GitHub for reference.
Read more…
In more recent years, design systems and component libraries have gained popularity. There is also a desire to build once, deploy anywhere. Meaning a component developed in isolation is intended to work in any number of contexts to make building complex interfaces more efficient and consistent. CSS container queries have landed and are now available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.
Read more…
Easing functions can change the look and feel of an animation by affecting the rate, or speed, of an animation. As human beings, we are accustomed to a natural, non-linear motion. Using those custom-easing functions in the animations can lead to an improved impression on users and a more delightful user experience. In this article, we’re going to take a deep dive into easing functions and see how we can use them to create those natural and stunning animations.
Read more…
The CSS Working Group Editor’s Draft for Selectors Level 4 includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today!
Read more…
Sometimes it’s the little things in web life that make us look twice. From carousels to documentation to cookie disclaimers, here are some sites taking the mundane and sprinkling in a little magic. Great ideas in web design come so thick and fast that it can be easy to miss them if you’re not careful. In this article, Frederick O’Brien brings you a small antidote to that, piecing together splashes of inspiration that caught our eye.
Read more…
You may have come across horizontal scrollbar issues, especially on mobile, if you’re a front-end developer. Because there are many causes of scrollbar problems, there is no straightforward solution. Some issues can be fixed quickly, and some need a little debugging skill. In this article, Ahmad Shadeed will explore the causes of overflow issues and how to solve them. We will also explore how modern features in the developer tools (DevTools) can make the process of fixing and debugging easier.
Read more…
By systemizing the fundamentals of typography and space, and leaning into the inherent fluidity of the web, a free new CSS tool called Utopia offers an alternative to breakpoint-driven design. This shared language between design and development streamlines communication and encourages the creation of bespoke constraints for your projects to ensure consistent and harmonious designs.
Read more…
