Smashing Magazine — For Web Designers And Developers

Marcel Moreau wrote

Reducing The Need For Pseudo-Elements

Sep 15, 2021 in CSS, Tools, Techniques

For years, pseudo-elements have faithfully helped front-end developers implement creative designs. While they still have an important place, we can now leave pseudo-elements behind in some scenarios, thanks to newer CSS properties.

Continue reading ↬

Tracy Osborn / Sep 14, 2021 in Tools, Design, Sketching

The Power Of Pen And Paper Sketching

Kirill Myshkin / Sep 13, 2021 in API, Animation, Interfaces

Orchestrating Complexity With Web Animations API

Accessible Front-End Components

Reliable accessible UI components: :focus styles, modals, date pickers, navigation, tables, buttons, SVGs.

Explore Accessible Components

CSS Generators & Tools

Useful CSS tools for animations, shadows, cubic-bezier curves, easing gradients, filters, overlays, type scales.

Explore CSS Generators

Front-End Boilerplates & Starter Kits

HTML boilerplates, CSS resets, forms, dev themes, gitignore, CSS snippets, static sites, style guides.

Explore Front-End Boilerplates

See All Guides

Latest Posts

Frederick O’Brien wrote

Web Design Done Well: Excellent Editorial

They say content is king, and they’re right. The web has unlocked untold possibilities for storytellers — provided the story is right, of course. Here are some of our favorite examples of editorial content thriving in the digital realm.

September 10, 2021 in Design, Inspiration, User Experience

Sam Poder wrote

Using SWR React Hooks With Next.js’ Incremental Static Regeneration (ISR)

When paired with ISR and Next.js’ API routes, SWR can be used to create a responsive user experience. In this article, Sam Poder explains what SWR is, where to use it (and where not), and how to build a website by using Incremental Static Regeneration.

September 9, 2021 in Next.js, React, JavaScript

Michelle Barker wrote

Developer Decisions For Building Flexible Components

In this article, we’ll walk through the process of taking a seemingly simple design for a text-and-media component and deciding how best to translate it into code, keeping in mind the needs of both users and content authors.

September 8, 2021 in CSS, Design, Content

Iris Lješnjanin wrote

New Smashing Online Workshops on Front-End & UX

What’s the state of HTML Email, Vue.js and Next.js? What are new, smart interface design patterns we could use? Let’s figure it out. With our brand new online workshops on front-end & design. Now with free workshops for you to test the waters.

September 8, 2021 in Smashing, Workshops

Patrick Brosset wrote

What’s New With DevTools: Cross-Browser Edition

Learn what’s new with developer tools in Firefox, Edge, Chrome and Safari. Discover new and powerful features that will help you be more comfortable and productive when testing and debugging across browsers.

September 7, 2021 in Tools, Browsers, Debugging

Robin Marx wrote

HTTP/3: Practical Deployment Options (Part 3)

After almost five years in development, the new HTTP/3 protocol is nearing its final form. Let’s take a close look at the challenges involved in deploying and testing HTTP/3, and how and if you should change your websites and resources as well.

September 6, 2021 in Performance, Security, Browsers

Berwyn Powell wrote

Reducing Carbon Emissions On The Web

Websites, unfortunately, aren’t as environmentally friendly as we might like them to be. This article contains some thoughts and experiences from trying to clean them up.

September 3, 2021 in Performance, Optimization, Opinion Column

Louis Lazaris wrote

Interactive Learning Tools For Front-End Developers

Interactive coding tools to help you learn CSS, JavaScript, SQL, React, Vim, regular expressions and Jamstack.

September 2, 2021 in CSS, JavaScript, Round-Ups

See More Latest Articles

That’s The Smashing Family.

Smashing Magazine is so much more than articles.

September–December 2021 • New Workshops

Boost Your Skills Online,
On Front-End & Design

Meet Smashing Workshops, with practical, actionable insights from experts — live. With interactive exercises, slides, video recordings and a friendly Q&A.

Explore all speakers and topics →

The Smashing Cat enjoying adventures, and the sun.

Community Links

Person Of The Week

Kitty Giraudel (@KittyGiraudel) is a non-binary front-end developer with a strong focus on web accessibility and building diverse and healthy teams. They initiated various open-source projects, among them Sass Guidelines, a11y-dialog, and Simplified JS Jargon. Kitty also shares their knowledge on their blog and as a speaker. Thank you for everything you do for the community, dear Kitty!

Bramus Van Damme wrote