Smashing Magazine

Follow this blog

State Of GDPR In 2021: Cookie Consent For Designers And Developers

As digital practitioners, GDPR has impacted every facet of our professional and personal lives. Whether you’re addicted to Instagram, message your family on WhatsApp, buy products from Etsy or Google information, no one has escaped the rules that were introduced in 2018.

Fresh Inspiration For March And A Smashing Winner (2021 Wallpapers Edition)

Our wallpapers post this month is a special one: There’s not only a new collection of wallpapers created by creative folks from across the globe waiting for you, but we’ll also award a smashing prize to the best design.

Building User Trust In UX Design

Trust is at the heart of a long-term strategy of any product. There are many ways to earn it, and even more ways to lose it. In this article, we’ll go through how you, as a product designer, can make sure your product nurtures and retains trust throughout every touchpoint. To do that, we’ll be borrowing some of the tricks marketers and product people have up their sleeves.

Building A Discord Bot Using Discord.js

An introduction to building a Discord bot using the Discord.js module. The bot will share random jokes, assign or revoke user roles, and post tweets of a specific account to a Discord channel.

Material Design Text Fields Are Badly Designed

Where to put the label in a web form? In the early days, we talked about left-aligned labels versus top-aligned labels. These days we talk about floating labels. Let’s explore why they aren’t a very good idea, and what to use instead.

Create Responsive Image Effects With CSS Gradients And `aspect-ratio`

A classic problem in CSS is maintaining the aspect ratio of images across related components, such as cards. The newly supported `aspect-ratio` property in combination with `object-fit` provides a remedy to this headache of the past! Let’s learn to use these properties, in addition to creating a responsive gradient image effect for extra flair.

State Of GDPR In 2021: Key Updates And What They Mean

As digital practitioners, GDPR has impacted every facet of our professional and personal lives. Whether you’re addicted to Instagram, message your family on WhatsApp, buy products from Etsy or Google information, no one has escaped the rules that were introduced in 2018.

Building Your Own Personal Learning Curriculum

As developers, we’re constantly learning new languages and frameworks. But how can you structure this learning to ensure maximum benefit while still progressing? Here’s how you can devise your own curriculum to keep moving in the right direction.

Context And Variables In The Hugo Static Site Generator

In this article, we take a look at the topic of context and variables in Hugo, a popular static site generator. You’ll understand concepts such as the global context, flow control, and variables in Hugo templates, as well as data flow from content files through templates to partials and base templates.

Useful DevTools Tips And Shortcuts (Chrome, Firefox, Edge)

DevTools is very advanced and helpful, but can also be very intimidating and overwhelming. Let’s fix that. In this article, Vitaly reviews useful features and shortcuts for debugging in Chrome, Firefox, Edge and Safari.

Optimizing Video For Size And Quality

Adding video to your application can increase customer engagement and satisfaction. But the exact opposite can occur when there are issues with the video playback: video stalls are frustrating and drive customers away. In this article, we’ll walk through the steps to optimize the video on your website to ensure fast playback and reduce stalls.

Things To Expect From A Smashing Workshop: Form Design Masterclass

A couple of weeks ago, we organized a [Form Design Masterclass](https://smashingconf.com/online-workshops/workshops/adam-silver), an online workshop with Adam Silver alongside 81 friendly and smart people. Today, Adam shares his experience and details by highlighting what you as an attendee can expect from a Smashing Workshop, and things to keep in mind when running one.

What Saul Bass Can Teach Us About Web Design

Film credits, brand logos, posters… Saul Bass did it all, and the principles that informed his work are just as valuable now as they were 50 years ago.

Building A Web App With React, Redux And Sanity.io

Headless CMS is a powerful and easy way to manage content and access API. Built on React, Sanity.io is a seamless tool for flexible content management. It can be used to build simple to complex applications from the ground up. In this article, Ifeanyi explains how to build a simple listing app with Sanity.io and React. The global states will be managed with Redux and the application will be styled with styled-components.

Getting The Most Out Of Git

In this article, Tobias explores some of the less known but very useful features in Git. You’ll learn how to recover deleted commits, clean up your commit history, use submodules to manage third-party code and compose commits with precision — along with a friendly Git cheat sheet.

Smashing Podcast Episode 35 With Stephanie Stimac & Melanie Richards: What’s Next For HTML Controls?

In this episode, we’re talking about HTML controls. Why are they so hard to style, and how might that change in the future? Drew McLellan talks to Microsoft’s Stephanie Stimac and Melanie Richards to find out.

Managing CSS Z-Index In Large Projects

Wrangling z-index values is a difficult task for many developers. Here is an easy-to-implement mini-framework based on existing conventions that brings clarity and confidence to working with z-index.

Improving Your Team’s Communication In The Age Of Remote Work

Remote work is taking over the world, and the biggest obstacle remote teams face is emulating the natural communication that happens at the office. In this article, Obed Parlapiano shares his advice and tips on how to improve your team’s communication and productivity by creating habits and processes focused on improving collaboration.

Designing Better Tooltips For Mobile User Interfaces

Tooltips are powerful design patterns implemented to enhance the design experience by providing additional information precisely when users need it. Sometimes, however, tooltips are obtrusive, especially on mobile devices where available space is at a premium.

How To Port Your Web App To Microsoft Teams

On your list of places where people might access your web app, Teams is probably number “not-on-the-list”. But it turns out that making your app accessible where your users are already working has some profound benefits. In this article, we’ll look at how Teams makes web apps a first-class citizen, and how it enables you to interact with those apps in completely new ways.

Things You Can Do With CSS Today

The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects, too.

Inspiring Wallpapers For February 2021 And A Little Creativity Challenge

Let’s make this February more colorful! Apart from a new collection of wallpapers, we also have a little creativity challenge waiting for you this month. It’s the perfect occasion to share your ideas with the world — and win a smashing prize along the way.

Dynamic Static Typing In TypeScript

In this article, we look at some of the more advanced features of TypeScript, like union types, conditional types, template literal types, and generics. We want to formalize the most dynamic JavaScript behavior in a way that we can catch most bugs before they happen.

How To Create An Engaging And Useful Chatbot

What makes a good chatbot experience? Most people think of witty responses and machine learning, but the basis of a chatbot UX is actually rooted in content strategy. Learn how to develop a chatbot that sounds human and engages people.

From Design To Developer-Friendly React Code In Minutes With Anima

In this article, we’ll learn how to turn our static designs into a live, code-based prototype with real fields, forms, maps, and animations, and in turn, transform this prototype into React code — all integrated into one tool.

Smashing Podcast Episode 34 With Harry Roberts: What’s The State Of Web Performance?

In this episode, we’re talking about Web Performance. What does the performance landscape look like in 2021? Drew McLellan talks to expert Harry Roberts to find out.

Making Remote Work Work: Useful Tools And Resources

How to stay creative, focused, and organized when working remotely? We've collected some useful tools and resources that we use daily — to help you get most out of your remote work.

When To Say No To Freelance Projects

For hungry freelancers, it can be hard to turn work away. But in the long run, saying no to a project that’s a bad fit will make you a better freelancer. This article will help freelancers and consultants think critically about when to decline an opportunity or request and how to do so assertively but kindly.

How We Improved SmashingMag Performance

In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board.

How To Build A Node.js API For Ethereum Blockchain

In this article, John Agbanusi explains how you can build a Node.js API from scratch by building and deploying an Ethereum Blockchain for decentralization. He also shows you a step-by-step process of integrating both the API and blockchain into a single API called a “decentralized application API”.

Using Grommet In React Applications

In this tutorial, we’re going to learn how to use Grommet as a UI library for React applications. We’ll use Grommet as a UI library of choice to create a pricing component, this would help us have a better understanding of how to use Grommet.

New Year, New Beginnings: Smashing Workshops & Audits

Catch up on what’s been cookin’ at Smashing and explore some of the most popular community resources featured in our newsletter over the past few weeks. Spoiler: there are also new workshops, front-end & UX audits and truly smashing podcast episodes.

Web Design Trends 2021: The Report

2020 was anything but normal. Consumers had their lives shaken up and many businesses experienced new challenges as well as opportunities thanks to the novel events of the year.

Integrating A Dialogflow Agent Into A React Application

When it comes to building a conversational chat assistant that could be used at a small or enterprise level, Dialogflow would most likely be one of the first options that would show up in your search list. But apart from its console that is provided to design and manage an Agent, how can we create a chat assistant that can be used within our built web applications, too?

Front-End Performance Checklist 2021

Let’s make 2021... fast! An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques.

Smashing Podcast Episode 33 With Charlie Gerard: What Is Machine Learning?

In this episode, we’re talking about Machine Learning. What sort of tasks can we put it to within a web development context? Drew McLellan talks to expert Charlie Gerard to find out.

Getting Started With The GetX Package In Flutter Applications

GetX is an extra lightweight solution for state, navigation, and dependencies management for Flutter applications. In this article, we will be looking at its benefits, features, and how to start using it in Flutter applications.

How To Make More Money Selling Shopify Apps In 2021

Developing a Shopify app and being able to sell it are two different things. While you might be a very skilled app developer, that’s not always enough for Shopify merchants to decide to install a newly released and unreviewed app on their sites. If you want to give merchants a reason to install and use your Shopify app, there are four things you need to do.

Should The Web Expose Hardware Capabilities?

This article is a response to the Platform Adjacency Theory by Alex Russell, with specific takes on WebUSB and some alternative proposals for a way forward.

Towards An Ad-Free Web: Diversifying The Online Economy

The founding principles of the World Wide Web have been warped by years of over-reliance on advertising. Fixing that imbalance and moving toward a more ethical, open web means relaying the foundations, with sites showing other ways are possible.