Smashing Magazine


Smashing Magazine is focused on designing and building websites. We present most valuable techniques, ideas and resources for Web designers — articles written by...





7 items/week

A Book Release For Click! And A Chance To Rethink Our Routines

Paul Boag has written three books in the Smashing Library, and Click! How to Encourage Clicks Without Shady Tricks is just the most recent one. Paul wrote some articles for Smashing Magazine in addition to appearing on the Smashing Podcast and SmashingTV to promote the book and talk about some of its themes. Click! finally started shipping in June, and our beloved preorder customers found a sur...

CSS Transitions In Vuejs And Nuxtjs

Transitions are a module of CSS that lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes. Using these transitions in your applications and websites create a better visual experience and sometimes draws and holds the user’s attention while a piece...

Removing Panic From E-Commerce Shipping And Inventory Alerts

When it comes to displaying shipping and inventory alerts on an e-commerce website, you have to be very careful about inciting panic in your shoppers. “Item is out of stock.” “Expect shipping delays.” “Page does not exist.” These words alone are enough to turn a pleasant shopping experience into a panicked and frustrating one. You have to be very careful about how you design these notices on yo...

Creating Tiny Desktop Apps With Tauri And Vue.js

Technology makes our lives better, not just users, but also creators (developers and designers). In this article, I’ll introduce you to Tauri. This article will be useful to you if: you have been building applications on the web with HTML, CSS, and JavaScript, and you want to use the same technologies to create apps targeted at Windows, macOS, or Linux platforms; you are already building cross-...

CSS News July 2020

Things move a lot faster than they used to in terms of the implementation of Web Platform features, and this post is a round-up of news about CSS features that are making their way into the platform. If you are the sort of person who doesn’t like reading about things if you can’t use them now, then this article probably isn’t for you — we have many others for you to enjoy instead!

Understanding Plugin Development In Gatsby

Gatsby is a React-based static-site generator that has overhauled how websites and blogs are created. It supports the use of plugins to create custom functionality that is not available in the standard installation. In this post, I will introduce Gatsby plugins, discuss the types of Gatsby plugins that exist, differentiate between the forms of Gatsby plugins, and, finally, create a comment plug...

Make Your Sites Fast, Accessible And Secure With Help From Google

Earlier this year, the Chrome team announced the Web Vitals initiative to provide unified guidance, metrics, and tools to help developers deliver great user experiences on the web. The Google Search team also recently announced that they will be evaluating page experience as a ranking criteria, and will include Core Web Vitals metrics as its foundation. The three pillars of 2020 Core Web Vitals...

How To Test Your React Apps With The React Testing Library

Today, we’ll briefly discuss why it’s important to write automated tests for any software project, and shed light on some of the common types of automated testing. We’ll build a to-do list app by following the Test-Driven Development (TDD) approach. I’ll show you how to write both unit and functional tests, and in the process, explain what code mocks are by mocking a few libraries. I’ll be usin...

Differences Between Static Generated Sites And Server-Side Rendered Apps

JavaScript currently has three types of applications that you can build with: Single Page Applications (SPAs), pre-rendering/static generated sites and server-side rendered applications. SPAs come with many challenges, one of which is Search Engine Optimization (SEO). Possible solutions are to make use of Static Site Generators or Server-Side Rendering (SSR). In this article, I’m going to expla...

Information And Information Architecture: The BIG Picture

We are living in a world exploding with information, but how do we find what is relevant to us at the time that we need it? I believe that good information architecture is key to helping us navigate through the mountains of data and information we have created for ourselves. In this article, we will first describe what information architecture is, why it’s important, and approaches to effective...

Finding Inspiration In The Simple Things (July 2020 Wallpapers Edition)

The smell of rain after a hot day, watching the moon rise on a summer night’s sky, going for a swim — often it’s the simple experiences that inspire us and that we treasure most. No matter what July will have in store for you this year, our new batch of wallpapers is bound to cater for some colorful inspiration along the way. More than nine years ago, we started out on this wallpapers adventure...

Smashing Podcast Episode 19 With Andy Bell: What Is CUBE CSS?

Today, we’re talking about CUBE CSS. What is it, and how does it differ from approaches such as BEM, SMACSS, and OOCSS? I spoke to its creator, Andy Bell, to find out. Show Notes CUBE CSS Piccalilli Learn Eleventy From Scratch - save 40%! Andy Bell and Piccalilli on Twitter Note: Listeners of the Smashing Podcast can save a whopping 40% on Andy’s Learn Eleventy From Scratch course using the cod...

Firebase Push Notifications In React

Notifications have become a stable part of the web nowadays. It’s not uncommon to come across sites asking for permission to send notifications to your browser. Most modern web browsers implement the push API and are able to handle push notifications. A quick check on caniuse shows that the API enjoys wide support among modern chrome-based browsers and Firefox browser. There are various service...

Inspired Design Decisions With Giovanni Pintori: Publicity Becomes An Art Form

With one or two occasional exceptions, I’ve spent the past twenty-two years designing for countless clients. A few of these projects lasted a year, some several months, but the majority for no more than a few weeks. Being completely absorbed for a few weeks or months in designing a product interface or a website can be a thrill. It often starts with the gratification which comes from winning th...

Django Highlights: Wrangling Static Assets And Media Files (Part 4)

Django websites involve a lot of files. It’s not just source code for the configuration, models, views, and templates, but also static assets: CSS and JavaScript, images, icons. As if that wasn’t enough already, sometimes users come along and want to upload their own files to your website. It’s enough to make any developer incredulous. Files everywhere! Here’s where I wish I could say (without ...
© 2000-2020 ANNECA s.r.o., Klíšská 977/77, 400 01 Ústí nad Labem, Tel: +420 478571021, Email:, Twitter: @hreader