Articles by Smashing Magazine from May 2021

In this article, well be re-using the foundational WYSIWYG Editor built in the first article to build a commenting system for a WYSIWYG Editor that enables users to select text inside a document and s...

Meet useful VS Code Extensions for front-end developers: little helpers to minimize slow-downs and frustrations, and boost developers workflow along the way. Recently, weve also covered [CSS auditing ...

Meet useful Visual Studio Code extensions for web developers: little helpers to minimize slow-downs and frustrations, and boost developers workflow along the way. With auto log messages, auto code for...

While web builders have been around for a long time, it wasnt until recently that they became practical for professional use. Closing the gap between design and code has become the north star for many...

While web builders have been around for a long time, it wasnt until recently that they became practical for professional use. Closing the gap between design and code has become the north star for many...

Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers....

Mistakes. These cruel villains do not even stop at the beautiful world of software development. But although we cannot avoid making mistakes, we can learn to undo them! This post will show the right t...

Web fonts are often terrible for web performance and none of the font loading strategies are particularly effective to address that. Upcoming font options may finally deliver on the promise of making ...

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, were going to cover CSS contai...

Lets build a rich text, WYSIWYG-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 t...

Lets build a rich text, WYSIWYG-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 t...

Front-end and design are remarkably complex these days. Thats why we invite kind, smart folks from the community to run online workshops for all of us to learn together. And we have new ones coming up...

A step-by-step tutorial on adding authentication and authorization to your Next.js apps, with Auth0. Well be using a Next.js SDK to connect our application to the Auth0 API and will create the dynamic...

A step-by-step tutorial on adding authentication and authorization to your Next.js apps, with Auth0. Well be using a Next.js SDK to connect our application to the Auth0 API and will create the dynamic...

Do we need mega-dropdown hover menus in 2021? Probably not. Lets explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus and fine details for designing ...

Today, we are taking a closer look at [SVGator 3.0](https://www.svgator.com/?utm_source=article&utm_medium=smashingmag&utm_campaign=svgator3_smashing), a new major release of the popular SVG applicati...

In this episode, were talking about VisBug. What is it, and how is it different from the array of options already found in Chrome DevTools? Drew McLellan talks to its creator Adam Argyle to find out....

Googles Page Experience Update will begin rolling out in June. At first, sites that meet Core Web Vitals thresholds will have a minor ranking advantage in mobile search for all browsers. Search is imp...

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 ...

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 designin...

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 prototype of the long-awaited CSS container queries has landed in Chrome Canary and is available for experimentation. Lets look at what problem is being solved, learn how container queries work, and...

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 ...

Want to get started with React but struggling to find a good place to start? This article should have you covered. Well focus on some of the main concepts of React and then well be building a game fro...

How do you organize your Google Drive assets? How do you name your Dropbox Paper documents? How do you deal with comments? Lets get it right....

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 S...

This article showcases a case study of Bookaways landing page performance. Well see how taking care of the props we send to Next.js pages can make loading times and Web Vitals better. ...

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 m...

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 m...

In this episode, were 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...

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....

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 c...