The Best of Smashing Magazine πΊπ¦ π³οΈβπ
20+ most popular Smashing Magazine πΊπ¦ π³οΈβπ articles, as voted by our community.
An online magazine for designers and web developers. Questions? We've got your back: @SmashingSupport, @SmashingConf. Curated by Iris, Vitaly and the team.
Trending
These are currently making the rounds on Refind.
How To Design An Effective User Onboarding Flow β Smashing Magazine
If you want to maximize conversions or collect necessary user information for other purposes, a user onboarding flow is necessary. In this article, you will learn how, with the help of Feathery, to…
Color Mechanics In UI Kits β Smashing Magazine
In this article, Adel Khamatov shares a model of color mechanics that he came up with during research on developing UI kits and illustrates an approach to solving related problems with best practices.
Design Patterns Are A Better Way To Collaborate On Your Design System β Smashing Magazine
Every company and team has to have deep collaboration between engineering and design to get the value out of a design system (and not go nuts). Building design patterns first unblock people to work in…
Smashing Magazine πΊπ¦ π³οΈβπ on a11y
Stop Designing For Only 85% Of Users: Nailing Accessibility In Design
As designers, we like to think we are solution-based. But whereas we wouldnβt hesitate to call out a museum made inaccessible by a lack of wheelchair ramps, many of us still remain somewhat oblivious…
Accessibility In Chrome DevTools β Smashing Magazine
This article will demonstrate some useful features in DevTools which can help you improve the accessibility of your website.
Smashing Magazine πΊπ¦ π³οΈβπ on Accessibility
Using Automated Test Results To Improve Accessibility β Smashing Magazine
In this article, Noah Mashni and Mark Steadman share their approach to how to leverage the automated test results from the accessibility checks to drive change and reach sustainable digital…
Color Theory for Designers: The Meaning of Color
Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself. Studying how colors affect different people, either individually or as a group, is something some people build their careers on. And there's a lot to it. Something as simple as changing the exact hue or saturation of a color can evoke a completel
Smashing Magazine πΊπ¦ π³οΈβπ on CSS
How To Create Advanced Animations With CSS β Smashing Magazine
In this article, Yosra Emad explains how to create a rollercoaster path that a ball follows using cubic beziers and CSS transitions. Youβll also learn how the cubic-bezier function in CSS works in…
Houdini: Maybe The Most Exciting Development In CSS Youβve Never Heard Of
Have you ever wanted to use a particular CSS feature but didnβt because it **wasnβt fully supported in all browsers**? Or, worse, it was supported in all browsers, but the support was buggy, inconsistent or even completely incompatible? If this has happened to you β and Iβm betting it has β then you should care about [Houdini](https://wiki.css-houdini.org/). Houdini is a new W3C task force whose ultimate goal is to make this problem go away forever. It plans to do that by introducing a new set o
Smashing Magazine πΊπ¦ π³οΈβπ on Design
A Showcase Of Lovely Little Websites β Smashing Magazine
Instead of spending your coffee break scrolling through your social feeds, how about a lovely little website instead? We came across some fantastic ones that are just too good not to be shared. But be…
Organizing Design Workshops
Workshops are all about people: they involve people, are conducted by people, and aim to close the gaps in peopleβs communication. Slava Shestopalov shares a checklist with everything you need to keep…
Smashing Magazine πΊπ¦ π³οΈβπ on Frontend
Top Front-End Tools Of 2022 β Smashing Magazine
Who doesnβt love a good front-end tool? In this roundup, youβll find a nice list of useful front-end tools that were popular last year but are still bound to help you speed up and enhance your…
Smashing Magazine πΊπ¦ π³οΈβπ on Javascript
A Guide To Audio Visualization With JavaScript And GSAP (Part 1) β Smashing Magazine
What started as a case study turned into a guide to visualizing audio with JavaScript. Although the output demos are in React, Jhey Tompkins isnβt going to dwell on the React side of things too much.…
Improving JavaScript Bundle Performance With Code-Splitting β Smashing Magazine
In this article, Adrian Bece shares more about the benefits and caveats of code-splitting and how page performance and load times can be improved by dynamically loading expensive, non-critical…
«Password checking is not critical for page render. Its functionality is required only when the user interacts with the password input. So, letβs code-split zxcvbn into a separate bundle, dynamically import it and load it only when the password input value changes, i.e. when the user starts typing their password.»
Smashing Magazine πΊπ¦ π³οΈβπ on Programming
JavaScript APIs You Donβt Know About β Smashing Magazine
In this article, Juan Diego covers the least known yet extremely useful APIs, such as the Page Visibility API, Web Sharing API, Broadcast Channel API and Internationalization API. Together we will see…
How To Make A Drag-and-Drop File Uploader With Vanilla JavaScript
In this article, we'll be using "vanilla" ES2015+ JavaScript (no frameworks or libraries) to complete this project, and it is assumed you have a working knowledge of JavaScript in the browser. This…
Smashing Magazine πΊπ¦ π³οΈβπ on UX
Designing The Perfect Mobile Navigation UX β Smashing Magazine
When designing navigation on mobile, we donβt have to rely on slide-in-menus or nested accordions. We can also use the curtain design pattern, and show multiple levels of navigation at once.
Product Reviews And Ratings UX
How do we design effective reviews and ratings? With a distribution chart, decimal scores, tags, recommendation score and unedited product photos.
Smashing Magazine πΊπ¦ π³οΈβπ on Visual Design
Designing A Better Pricing Page β Smashing Magazine
In this [series of articles](/category/design-patterns/), we highlight design patterns and techniques to design better interfaces. You can find more examples in [βSmart Interface Design…
You Donβt Need A UI Framework β Smashing Magazine
Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that theyβll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out…
Smashing Magazine πΊπ¦ π³οΈβπ on webdev
What Leonardo Da Vinci Can Teach Us About Web Design β Smashing Magazine
Perhaps more than any other person in history, Leonardo da Vinci showed the kind of magic that can happen in the overlap between art and science, where much of web development lives. His methods and…
Level Up Your CSS Skills With The :has() Selector β Smashing Magazine
The CSS relational selector :has() allows selecting elements in combinations that were previously impossible without the assistance of JavaScript. Weβll review how to combine :has() with core CSS…
Popular
These are some all-time favorites with Refind users.
Rethinking Authentication UX β Smashing Magazine
How to improve authentication UX, with magic links, 2FA, better password recovery and relaxed rules for secure, accessible and usable passwords.
The Realities And Myths Of Contrast And Color β Smashing Magazine
In this article, Andrew Somers, a 35-year veteran of the Hollywood film and television industry, shares his experience about the hard-fought battles and lessons learned designing for illuminated…
Those HTML Attributes You Never Use β Smashing Magazine
In this article, Louis Lazaris describes and demonstrates some interesting HTML attributes that you may or may not have heard of and perhaps find useful enough to personally use in one of your…
Designing Better Inline Validation UX β Smashing Magazine
Inline validation in web forms is useful when it works, but frustrating when it fails. Too often it leads to an endless stream of disruptive error messages or dead-ends without any chance of getting…
Core Web Vitals Tools To Boost Your Web Performance Scores β Smashing Magazine
Identify, compare, analyze and fix your Core Web Vitals scores to boost web performance of your sites. These tools will help you to do just that.
What is Refind?
Every day Refind picks the most relevant links from around the web for you. is one of more than 10k sources we monitor.
How does Refind curate?
It’s a mix of human and algorithmic curation, following a number of steps:
- We monitor 10k+ sources and 1k+ thought leaders on hundreds of topics—publications, blogs, news sites, newsletters, Substack, Medium, Twitter, etc.
- In addition, our users save links from around the web using our Save buttons and our extensions.
- Our algorithm processes 100k+ new links every day and uses external signals to find the most relevant ones, focusing on timeless pieces.
- Our community of active users gets the most relevant links every day, tailored to their interests. They provide feedback via implicit and explicit signals: open, read, listen, share, mark as read, read later, «More/less like this», etc.
- Our algorithm uses these internal signals to refine the selection.
- In addition, we have expert curators who manually curate niche topics.
The result: lists of the best and most useful articles on hundreds of topics.
How does Refind detect «timeless» pieces?
We focus on pieces with long shelf-lives—not news. We determine «timelessness» via a number of metrics, for example, the consumption pattern of links over time.
How many sources does Refind monitor?
We monitor 10k+ content sources on hundreds of topics—publications, blogs, news sites, newsletters, Substack, Medium, Twitter, etc.
Can I submit a link?
Indirectly, by using Refind and saving links from outside (e.g., via our extensions).
How can I report a problem?
When you’re logged-in, you can flag any link via the «More» (...) menu. You can also report problems via email to hello@refind.com
Who uses Refind?
200k+ smart people start their day with Refind. To learn something new. To get inspired. To move forward. Our apps have a 4.9/5 rating.
Is Refind free?
Yes, it’s free!
How can I sign up?
Head over to our homepage and sign up by email or with your Twitter or Google account.