Tree-Shaking: A Reference Guide
Fri, 14 May 2021 10:30:00 GMT
“Tree-shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and how specs and practice intertwine to make bundles leaner and more performant. Plus, you’ll get a tree-shaking checklist to use for your projects.
Frustrating Design Patterns That Need Fixing: Birthday Picker
Wed, 12 May 2021 12:42:00 GMT
In this new series of articles on UX, we take a closer look at some frustrating design patterns and explore better alternatives, along with plenty of examples to keep in mind when building or designing one. Let’s start with an infamous birthday picker.
Little Smashing Stories
Wed, 12 May 2021 08:00:00 GMT
Today marks the day we sent out our 300th edition of the Smashing Newsletter. This article is a little celebration in which we share little Smashing stories from people working behind the scenes.
A Primer On CSS Container Queries
Tue, 11 May 2021 13:30:00 GMT
A prototype of the long-awaited CSS container queries has landed in Chrome Canary and is 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.
The Conference Platform We Use For Our Online Events: Hopin
Tue, 11 May 2021 10:00:00 GMT
At the beginning of 2020, the SmashingConf team was ready for a new year. We had so many things that excited us. New speakers, new workshops, new cities, new attendees, new experiences. And as we all know, 2020 had other ideas. With so many people working from home, we thought we would bring our [Smashing workshops]( from our home offices to yours — but how?
Get Started With React By Building A Whac-A-Mole Game
Mon, 10 May 2021 11:00:00 GMT
Want to get started with React but struggling to find a good place to start? This article should have you covered. We’ll focus on some of the main concepts of React and then we’ll be building a game from scratch!
How To Organize Product-Related Assets And Collaborate Better
Fri, 07 May 2021 10:00:00 GMT
How do you organize your Google Drive assets? How do you name your Dropbox Paper documents? How do you deal with comments? Let’s get it right.
Improving The Performance Of Shopify Themes (Case Study)
Thu, 06 May 2021 11:00:00 GMT
When dealing with themes for large platforms and CMS, legacy issues often become a bottleneck. In this article, Carson Shold discusses how his team improved the performance and organization of their Shopify themes, and improved maintainability along the way.
Reducing HTML Payload With Next.js (Case Study)
Wed, 05 May 2021 10:30:00 GMT
This article showcases a case study of Bookaway’s landing page performance. We’ll see how taking care of the props we send to Next.js pages can make loading times and Web Vitals better.
A Guide To Undoing Mistakes With Git
Tue, 04 May 2021 14:30:00 GMT
No matter how experienced you are, mistakes are an inevitable part of software development. But we can learn to repair them! And this is what we'll be looking at in this two-part series: how to undo mistakes using Git.
Smashing Podcast Episode 36 With Miriam Suzanne: What Is The Future Of CSS?
Tue, 04 May 2021 05:00:00 GMT
In this episode, we’re starting our new season of the Smashing Podcast with a look at the future of CSS. What new specs will be landing in browsers soon? Drew McLellan talks to expert Miriam Suzanne to find out.
The Evolution Of Jamstack
Mon, 03 May 2021 07:00:00 GMT
Web-oriented databases, frameworks like Nuxt and Next.js, and even frameworkless approaches are evolving the Jamstack, but the core principles are more powerful than ever.
May Is In The Air (2021 Wallpapers Edition)
Fri, 30 Apr 2021 09:00:00 GMT
Do you need a little inspiration boost? Well, then our new collection of wallpapers is for you. Designed with love by the community for the community, the wallpapers are available with and without a calendar for May 2021.
The Humble `` Element And Core Web Vitals
Thu, 29 Apr 2021 12:15:00 GMT
Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from [Addy's new book]( (also, check a [free PDF preview](
Meet Image Optimization, A New Smashing Book By Addy Osmani
Wed, 28 Apr 2021 13:20:00 GMT
The cat is out! For the last year, we’ve been working with Addy Osmani on a new Smashing Book all around image optimization. And now it’s here. Meet “Image Optimization”, our practical modern guide to delivering high-quality images on the web with the best performance.
Understanding Easing Functions For CSS Animations And Transitions
Tue, 27 Apr 2021 12:00:00 GMT
Easing functions can change the look and feel of an animation by affecting the rate, or speed, of an animation. 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.
How To Bake Layers Of Accessibility Testing Into Your Process
Mon, 26 Apr 2021 11:00:00 GMT
Accessibility experts Kate Kalcevich and Mike Gifford introduce readers to "layered accessibility testing”, a practice of using a variety of tools and approaches at different stages in the digital product lifecycle to catch accessibility issues early — when it’s easier and cheaper to fix them.
A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors
Fri, 23 Apr 2021 08:30:00 GMT
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!
Web Design Done Well: The Ordinary Made Extraordinary (Part 1)
Thu, 22 Apr 2021 14:00:00 GMT
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.
A Complete Guide To Incremental Static Regeneration (ISR) With Next.js
Wed, 21 Apr 2021 13:55:00 GMT
Incremental Static Regeneration (ISR) is a new evolution of the Jamstack, allowing you to update static content instantly without needing a full rebuild of your site. The hybrid approach of Next.js allows you to use ISR for e-commerce, marketing pages, blog posts, ad-backed media, and more.