1,379 articles from Smashing Magazine.
Embedded systems make our lives easier. We unawarely interact with embedded systems all the time, and they go largely unnoticed — until things do not work as expected. In this article, Eva gives an overview of what embedded systems are and how they impact our lives. She presents three main learnings gained across her quest for creating better-embedded systems to enable the world as we know it.
[DevFest for Ukraine](https://devfest.gdg.org.ua/) is a charitable online conference that will bring together 20 industry-leading tech speakers in support of Ukraine. June 14–15.
Do we, as users and designers, really need to assess typefaces and find out how they perform? Is it necessary? Well, whatever your thoughts are, in 2022, with a mass of typefaces available and 100s of years of designing and manufacturing typefaces, it is time to consider this topic. In this article, we will be discussing ways to test typefaces and other typographic issues. Though this article is s
This article explores the concept of tooling for frontend development on the web. You will learn why we need frontend tooling, the various stages of evolution it has gone through, and the new developments that will shape the frontend build tools of the future. To follow along with this article, a general understanding of modern frontend development on the web is necessary.
Defining a color palette and theme can be a lot of work, especially when considering contextual colors for elements’ various states. While CSS `color-mix()` *only* blends two colors together, this little function may be the key to maximizing your colors without maximum effort.
Computer technologies have simplified the process of recording historical events, technological breakthroughs, contemporary art, and everyday life. However, the notion of digital archiving can be deceptive. Often our technical footprints are carved in sand rather than stone.
Jamstack has surged in popularity over the past few years as an approach to building websites. As developers are building Jamstack sites, finding a well-integrated method to interact with a database can be a major stumbling block. In this article, Sam Poder explores how Prisma integrates with the Jamstack and why it’s a great solution for Serverless databases in JavaScript or TypeScript-based proj
In this article, we will be discussing how typefaces work, ways to test typefaces, and broader typographic issues. Though this article is slightly high-end and academic, fear not. The content will be of interest, especially for committed typeface designers and typographers. If you like complex issues and problems, this is for you.
In this tutorial, you will learn how to create a group chat app. You will build a backend app using Node.js that will make group chats, authorize chat participants, and maintain sessions for them. The front-end will be built using Vanilla JS, HTML and CSS. It will allow users to log in, make new groups, invite friends, and trade messages. By the end, you should have a working app where multiple pa
In this article, Ken Harker explains what third-party resource requests really are and which common optimization strategies can help reduce the impact on the user experience. By carefully considering how third-party requests will fit into your website during the design stage, you’ll be able to avoid the most significant negative impacts.
What could be a better way to welcome June than with some colorful inspiration? Well, we might have something for you: wallpapers created with love by artists and designers from across the globe. The wallpapers in this collection come in versions with and without a calendar and can be downloaded for free. As a little bonus goodie, we also compiled some designs from our wallpapers archives at the e
In this episode of the Smashing Podcast, we ask why accessibility really matters and why it is so important to get it right. Smashing’s Vitaly Friedman talks in-depth to Sara Soueidan to find out.
How many browser DevTools panels do you commonly use in your day-to-day web development? One? Three? Probably not that many more. In this article, Patrick Brosset shines the spotlight on a number of tools that people don’t use or even know about. Let’s dive in!
In this article, Vijay describes his learning experiences during the design stages of creating his 3dicons image library (a free library for product screens, social media posts and marketing campaigns), which you can download and use for free.
Developing accessible products can be challenging, especially when some of the requirements are beyond the scope of development. It’s one thing to enforce `alt` text for images and labels for form fields, but another to define an accessible color palette. From working with design handoffs to supporting custom themes in a design system, the CSS `color-contrast()` function can become a cornerstone f
One of the most important aspects of software development, are memory and performance management and every software developer should pay attention to them. In this article, Frank Joseph explains both weak and strong references in JavaScript, as well as the concept of reachability. Let’s dig in!
A well-constructed onboarding process boosts engagement, improves product adoption, increases conversion rates, and educates users about a product. This article is a case study of how the platformOS team has researched, developed, and iteratively adjusted their onboarding processes over more than three years to eventually create the multiple award winning developer experience they provide today.
CSS is constantly evolving, and some cool and useful properties either go completely unnoticed or are not talked about as much as others for some reason or another. In this article, we’ll cover a fraction of those CSS properties and selectors.
When it comes to tools for publishing a blog, it can seem like there’s never a perfect solution that mixes customization with easy admin. In this article, we will see step-by-step how you can get the best of both worlds by using Ghost as a headless CMS for a Gatsby static site. We will cover all the tricky parts in-depth and show you can do everything for free.
Developers are migrating from on-premises technology and embracing the benefits cloud infrastructure offers. Moreso, there is a rapid shift from a monolithic architecture to microservices architecture; this ensures that apps have higher availability, are simple to install, and easy to upgrade with the microservices architecture approach. In this post, we introduced Kubernetes to front-end engineer
In this episode, we ask how one man can go from designing websites for local bands to heading up Google Fonts Knowledge. Smashing’s Vitaly Friedman talks to Elliot Jay Stocks to find out.
Web design should be fun and accessible for anyone. After all, when we build a new website, our primary goal is to share our idea, product, or service with the world, not to dive into solving technical problems. Let’s take a closer look at how you can create your very own WordPress site up and running created and hosted with the [Elementor Cloud Website](https://elementor.com/features/cloud/?utm_s
What makes the underused `Server-Timing` header uniquely powerful among all other response headers? We’ll rethink the expectation for using it exclusively for timing and see fast solutions for hard-to-solve monitoring challenges. In this article, Sean Roberts will provide you with a new perspective on Server-Timing as a tool to reach for, even if you’re not measuring time.
We waste so much today. One way of focusing on what truly matters is by identifying Top Tasks for yourself. In this article, Gerry McGovern will show you how to make tough decisions by focusing on the real, quantifiable evidence that will help create a better experience for your users.
Google collects performance information from millions of opted-in Chrome browsers around the world and uses this information as a performance ranking factor for its search engine. But it also makes this information freely available so that anyone can use it to check the real-world performance of individual websites. Even more significantly, it’s possible to segment this data according to the techn
In this article, Denis Studennikov will be taking a closer look at a design case study and discuss possible reasons why its customers abandon their online shopping carts and what solutions are recommended in each particular case.
SVGs are scalable, flexible, and, most importantly, lightweight. And, well, they have even more to offer than you might think. Smart SVG techniques, from generative SVG grids to SVG paths with masks, grainy SVG gradients, cut-out effects and fractional SVG stars. Let’s look at some magical SVG techniques that you can use right away.
At the end of 2021, the Chrome team shipped some functionality that has the ability to make or break sites meeting the Core Web Vitals. So, let’s learn a little bit more about the Back/Forward Cache (aka bfcache), and what you can do to test if your website is compatible with it. Barry Pollard strongly encourage sites to run the Back/Forward Cache test, understand any blockers leading to an unsucc
Let’s explore how to give and receive better feedback when working remotely — feedback that is actionable, specific, kind, and that won’t set you on edge. In this article, Joshua Mauldin will discuss a few ways to get around that difficulty. We’ll start by learning what causes feedback sessions to get off track, how to prevent this from happening, and what to do when this happens.
When deploying websites, there’s rarely a one-size-fits-all solution. Some websites benefit from server-rendered pages, some prefer statically generating content upfront. In this article, Stefan explains how a CMS such as [Storyblok](https://www.storyblok.com/) can help you make your site more resilient without losing the flexibility to deliver time-relevant content.
How difficult can it be to design a bulletproof language selector? It’s not as straightforward as one might think. We need to avoid redirects, decouple our language and country presets, allow for overrides, and use non-modal windows. Can we fix it? Absolutely! We just need to decouple presets, allow for overrides and allow users to specify their intent.
Let’s welcome May with a new collection of wallpapers. Designed with love by artists and designers from across the globe, they come in versions with and without a calendar for May 2022. As a little bonus goodie, we also compiled some favorites from past May editions at the end of this post. Thank you to everyone who took on the challenge and shared their wallpapers with us — you’re smashing!
Performance needs to be built in starting at the code level, and user-centric metrics like time to interactive (TTI), total blocking time (TBT), and first input delay (FID) help you gauge how fast a website is. But modern web pages are heavy and ever-growing in size Introducing Partytown, a lightweight open-source solution that reduces execution delays due to third-party JavaScript by offloading t
In this article, Nathan Smith explains how to create modal dialog windows with rich interaction that will only require authoring HTML in order to be used. They are based on Web Components that are currently supported by every major browser.
We should be able to measure how well a particular design solves a particular problem. Let’s explore design KPIs that capture user’s experience, how to measure them and how to keep both users and business stakeholders happy, over time. In this [series of articles](https://www.smashingmagazine.com/category/design-patterns/), we highlight design patterns and techniques to design better interfaces. Y
Given our increasing dependency on digital interactions, advocating for good UX will become increasingly necessary, as our reliance on digital tools continues to grow. When bad UX has lingered in a product for so long, it can feel like a mountain to overcome. In this article, Ceara Crawshaw shares her advice on how you can invoke joy and assure the quality in the work done on product teams.
Creative Coding to level up your skills is fundamental. But when so much of the web is very “set in its way”, it takes a little more for us to think “outside the box” and have fun! In this article, Jhey Tompkins explores one of GreenSocks’ newest plugins alongside React to create an impractical whimsical spin on a well-known native element: ``.
Have you ever wondered, why do people write CLI tools? When is a good time to think about yours? Today we’ll touch on these questions, along with some tips to remember when creating one. However, all of this serves as a prelude to the real topic: end-to-end testing of CLI tools.
There are a few navigation patterns that are often forgotten or dismissed. We can think of them as navigation shortcuts, helping users get where they want to go, faster — without having to use traditional navigation at all. As it turns out, sometimes they are much more effective, especially on large sites with thousands of pages, many of which have been gathering dust over the years. In UX, we can
Who doesn’t love a good timesaver? In this post, we compiled productivity tips and tools to help you in your day-to-day work. You’ll find shortcuts to speed up routine tasks, tools and cheatsheets to enhance your development workflow, as well as ideas and little helpers to stay organized and improve communication with your team.
In this article, Ekene Eze shares his thoughts about the direction of the web in 2022, and what solutions we can expect to see come up in the ecosystem to significantly improve the Jamstack experience.
What are the benefits of using push notifications and what can you use them for? In this article, Lee Munroe explains how to implement them and which practices are best to follow.
Storytelling is a powerful tool for any UX designer. It helps create a product and understand the people who use it. In this article, Marli Mesibov takes a real-life example of an app she helped to build in 2017 and explains five steps you can use to help you build a story into your user experience.
Freelancers can be a helpful addition to any team when used in the right way and at the right time. But when is that right time? Whether you work in-house or run a digital agency, there are occasions when you will consider hiring freelancers to supplement your team. Today, we’ll take a look into a platform known as [Upwork](https://upwork.pxf.io/c/1221738/1245573/13634) and the best ways in findin
Carousels have plenty of accessibility issues, they often exhibit low click-through rates, can be very disruptive when auto-advancing and people frequently scroll past through them. In this series of articles, we highlight design patterns and techniques to design better interfaces. You can find more examples in “Smart Interface Design Patterns”, a 10h-video course with 100s of hand-picked examples
Everyone needs a design system. You can pick one off the shelf or put one together pretty quickly, and your problems are over. As with many things on the web, your mileage may vary. Like many things, a design system isn’t ever a finished thing — it’s a journey. How we go about that journey can affect the things we produce along the way. Before diving in and starting to plan anything out, be clear
Loading experience is crucial to the user’s first impression and overall usability, so Google defined Largest Contentful Paint (LCP) metric to measure how quickly the main content loads and is displayed to the user. This new attribute will enable us to fine-tune relative resource priority, improve LCP performance, deprioritize JavaScript fetch calls, and much more. Let’s check out fetchpriority an
Data is among the most important things that make up a web application or a conventional native app. We need data to be able to see and perhaps understand the purpose of an application. In this article, we’ll look at another approach to obtaining data in an application that requires authentication or authorization using Next.js.
Breadcrumbs UX are often neglected, but they can be extremely helpful when designing a complex navigation. We can improve them with sideways navigation, clearer breadcrumbs paths and accordions on mobile.
[Devs For Ukraine](https://www.devsforukraine.io/) is a free online charity conference organized by the lovely people at Remote. Two days filled with talks from engineering leaders around the globe, in support of Ukraine. The conference will take place April 25–26, 2022, with the goal to raise funds and provide support to Ukraine. The funds raised during the two days of the event will be evenly di
Whether you work in-house or for an external agency, we all share one challenge — dealing with stakeholders, be they your boss, colleagues, or clients. In this post, veteran web designer Paul Boag shares his approach to getting things done in even the most challenging organizations. He will also change some of our prejudices along the way. Because let’s be clear; we need other people for our websi
Ever wondered how to build a paginated list that works with and without JavaScript? In this article, Manuel explains how you can leverage the power of Progressive Enhancement and do just that with Eleventy and Alpine.js.
Next.js’ recent 12.0 release included a new beta feature: middleware. For a detailed explanation, you can read all about it in Sam’s previous article, “[Next.js Wildcard Subdomains](https://www.smashingmagazine.com/2021/11/nextjs-wildcard-subdomains/)”. This article, on the other hand, dives into the overall concept of middleware and how handy it can be in building things.
Let’s welcome the new month with some new wallpapers. Designed with love by artists and designers from across the globe, they are available in versions with and without a calendar for April 2022. Maybe you’ll rediscover one of your almost-forgotten favorites in there, too? Enjoy!
You need to help customers explore relevant entries, and to do so, you need to support and speed up browsing through entries. Infinite scroll can be designed well. Best practices and guidelines to improve the UX of infinite scroll with bookmarks, footer reveal and pagination.
We love seeing what we all can do to make the web more accessible and usable. We also love organizing and attending online events, with our SmashingConf Live last year, and of course, our online workshops are here to stay! After two years when almost everything moved online, 2022 marks the return of in-person conferences. In fact, [SmashingConf is back](https://smashingconf.com/conferences): comin
In this article, we’ll talk about how to adapt our sites to the different scenarios of a device pointer: whether it has a pointer or not, or how accurate it is. To adapt our site to those devices’ needs we’ll talk about how to properly use media queries `hover`, `pointer`, `any-hover` and `any-pointer`.
In the past months, there have been lots of talks dedictaed to Remix. Routing is not only one of the things that sets it apart from other frameworks, but it also fuels great performance and improves the overall experience for developers. Let’s dig in to all of the features that build up routing in this powerful framework.
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 projects. This post is the result of his research, and he hopes you’ll find some of these useful to you, as you build HTML pages in the coming months.
Good interface design shows the right things at the right moment. We need to understand when to display a call to action, and how to build a relationship with the user before promting them to act.
