August 11, 2020 — Splitting colors into three levels (palette, functional, and component) can help you be more adaptive to changes and new requirements while working on a project. In this article, Artur Basak introduces a modern approach on how to set up CSS Custom Properties that respond to the application colors. The idea of dividing colors into three levels can be quite useful: a palette (or scheme), functional colors (or theme), and component colors (local scope). Read more…

August 11, 2020 — We’re talking about Serverless architectures. What does that mean, and how does it differ from how we might build sites currently? Drew McLellan talks to Chris Coyier to find out. Read more…

August 10, 2020 — You can get by in NodeJS without properly handling errors but due to the asynchronous nature of NodeJS, improper handling or errors can cause you pain soon enough. This article is for JavaScript and NodeJS developers who want to improve error-handling in their applications. Kelvin Omereshone explains the error class pattern and how to use it for a better, more efficient way of handling errors across your applications. Read more…

August 7, 2020 — This is the third and final part of the tutorial in which we’ll create the wheels (rims and tires), and add all the final touches (including the racing decals on the car’s body). Read more…

August 6, 2020 — Showcasing new product features to users or familiarizing them with some UI functionality in a web app can get tedious, especially when you want users to see a lot of things. In the following guide, BLessing Krofegha will show you how to proactively use product tours to onboard users into a new and complex UX, and how to familiarize them with UI functionality without boring them, using a typical React app. Read more…

August 5, 2020 — You might be wondering, “Why should I use this instead of the alternatives?” Sapper is based on Svelte, which is known for its speed and relatively small bundle size. In a world where performance plays a huge role in determining an effective user experience, we want to optimize for that. In this article, Daniel Madalitso Phiri will take you through how to build a Svelte-powered static blog with Sapper and Strapi, as well as how to deploy the website to Netlify. You’ll understand how to build a static website, as well as use the power of a headless CMS, with a real-world example. So, let’s get started building our minimal blog, starting with our Sapper front end. Read more…

August 4, 2020 — Meet our Smart Interface Design Patterns Checklist Cards, a deck of 100 cards with common questions to ask when tackling a common interface challenge — carousel, table, date picker, autocomplete, filtering, sorting, search, configurator, slider, timeline, map, web forms, reviews and testimonials, onboarding, pricing plan, authentication and many others. Get the PDF deck right away. Read more…

August 4, 2020 — Imagine if your website could evoke this kind of response. Visitors who respond to the sensory stimulation would instantly be in a more positive headspace, which they’d then associate with the site and your brand. While you don’t want to design a website for all five senses — because that would most certainly lead to sensory overload — you can use individual senses to strengthen the experience visitors have. In this article, Suzanne Scacca will take a look at five ways you can use the senses to put your visitors in a better headspace when they enter your site and interact with your brand. Read more…

August 3, 2020 — Redux is a robust state-management library for single-page JavaScript apps. It is described on the official documentation as a predictable state container for Javascript applications and it’s fairly simple to learn the concepts and implement Redux in a simple app. Going from a simple counter app to a real-world app, however, can be quite the jump. Read more…

July 31, 2020 — This tutorial is for illustrators who also happen to be passionate car enthusiasts. If you follow me along, you will learn how to draw from scratch in Sketch the legendary Porsche 911, all in vectors. Together, we will be pushing Sketch to its limits and you will learn how to create an almost photo realistic car by using basic shapes, layer styles, and various Sketch features. No bitmap images will be used, which means the final vector illustration could be scaled up to any size with no loss of detail. Read more…