We’re back with our weekly roundup of all the web design and development related articles that we’ve found published around the internet. Let’s close out October with this week’s articles full of education, tutorials, inspiration, and creative conversations.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets

Starting at only $16.50 per month!



 

The Semantics of Jamstack

The past year has seen a healthy debate around the term 'Jamstack' as the definition gets stretched to include new use cases. I recently posted my take on
Read More

20 Best New Websites, October 2021 | Webdesigner Depot

We’re well on our way to Hallowe’en already, and it’s time for another collection of websites that have caught our eye. It’s a mixed bag of candy this month, but nothing that should make you scream with fright. Enjoy! Tether This single-page site for forthcoming cycle safety system Tether uses a balanced combination of hero […]
Read More

'A Deep Dive Into object-fit And background-size In CSS — Smashing Magazine' /

In this article, we will go through how `object-fit` and `background-size` work, when we can use them, and why, along with some practical use cases and recommendations. Let’s dive in.
Read More

Check if an Object Is Empty - JavaScriptSource

Here some different methods that you could use to check if an object is empty in modern browsers that support the ES5 edition of JavaScript.
Read More

The Process of Building a CSS Framework - Codrops

In this article, I want to show you the steps that brought us to the last version of CodyFrame, the key features of the framework, and how CodyFrame and the library of components that come with it - almost 400 - can be used to create web pages in no time.
Read More

How to Create File Dropzone in React and TypeScript

Creating a simple file dropzone doesn't have to be hard. This tutorial will help you create your own file dropzone with React and TypeScript.
Read More

5 Pillars of Effective Landing Page Design

Let's consider the must-have points that make a landing page design both user-friendly and effective for the business goals. Packed with web design examples.
Read More

Top Tools Every UI/UX Designer Should Know

Wondering which tools successful UXers use to design top-notch digital products? From ideation to developer handoff, UX designers rely on a variety of programs to execute each phase of the product development process. If you’re getting started with UX design, you’ll need to know what t...
Read More

Having a Singular Focus for Your Web Design Business

We take a look at the benefits and challenges of having a singular focus in web design. And hear from a web designer who's taken the plunge.
Read More

Get and Set Classes On An Element - JavaScriptSource

Get all of the classes on an element as a string, add a class or classes, or completely replace or remove all classes. Get and set classes in JavaScript.
Read More

5 Laws of UX Every Designer Must Know - SpyreStudios

There are multiple laws of UX that designers must know by heart to make sure that their work meets user expectations. However, there are so many UX laws, sometimes, it is difficult to remember and apply all of them. There are a few basic UX laws that designers must know by heart, and are already considered as "norms" in the design world. These are the kinds of laws we learn about and help us understand why apps and websites are designed the way they are.
Read More

Which design team suits you best? Take this test to find out.

Every designer deserves a special team they truly connect with. But which type of design role will give you the most happiness? Take this test to find out.
Read More

Why Best Practice Web Design Is Critical to Engage Your Audience

In this article, we discuss why web design is so important and how you can create a better, more intuitive website for your audience.
Read More

"Dark Mode" vs "Inverted"

One thing we run into a fair amount in our design system work is the need to clarify the difference between "dark mode" and "components rendered on a dark background". What is actual dark mode? prefers-color-scheme is a CSS media feature that listens to a user's preference for dark or light
Read More

Submit a form with Ajax - JavaScriptSource

The following function submits the data of formEle to the back-end using an Ajax request.
Read More

Why Experience Mapping is a Vital Element of the UX Design

A good UX design ensures that your users have an all-around positive experience on your website. You need a good user experience design: If you want to retain your customers...
Read More

Creating the Effect of Transparent Glass and Plastic in Three.js - Codrops

Learn how to create convincing transparent, glass-like and plastic-like materials in Three.js using MeshPhysicalMaterial.
Read More

25 Best Condensed Fonts for 2022 - Onextrapixel

Looking for a stylish condensed font for your next project? Check out this list of the 25 best condensed fonts for 2022.
Read More

On Browser-Specific URL Schemes

We've covered URL schemes: A URL Scheme is like “http://…” or “ftp://…”. Those seem like a very low-level concept that you don’t have much control over,
Read More

In-Page Filtered Search With Vanilla JavaScript

If you have a page that includes a lot of information, it’s a good idea to let users search for what they might be looking for. I’m not talking about
Read More

JavaScript Functions Explained - JavaScriptSource

JavaScript functions are reusable blocks of code that perform a specific task, taking some form of input and returning an output.
Read More

An Introduction to the WordPress theme.json File

theme.json is a simple document for styling the WordPress block editor, and we show you how it can help theme developers.
Read More

'Eye-Tracking In Mobile UX Research — Smashing Magazine' /

Thanks to technology, eye-tracking has become more accessible to UX research as it allows researchers to get insights about users ’visual attention. This article explores the latest trends in the eye-tracking market and how the methodology can be included in the UX researcher’s toolbox.
Read More

35 E-Mail Newsletter Signup Forms in Website Layouts - SpyreStudios

I want to offer this collection of 35 website and mobile interfaces based around input form fields. You can design incredible user fields.
Read More

Testing Vue Components With Cypress

Cypress is an automated test runner for browser-based applications and pages. I’ve used it for years to write end-to-end tests for web projects, and was
Read More

What Does Creativity Mean to You? » Design.org » Creativity Blog

What does creativity mean to you? The sooner you answer that question, the sooner you can use creativity to create a happier life.
Read More

'How To Build An Amazon Product Scraper With Node.js — Smashing Magazine' /

The wealth of data that Amazon holds can make a huge difference when you’re designing a product or hunting for a bargain. But, how can a developer get that data? Simple, by using a web scraper. Here’s how to build your data extraction bot with Node.js.
Read More

How to Design a Landing Page That Sends Conversions Skyrocketing

If you’re in a sales slump, you might want to look into landing page design. We have six tips to help boost your conversions with design.
Read More

8 Reasons Your Site Is Slow + How To Fix Them | Webdesigner Depot

1, 2, 3 – That’s exactly how long it takes you to start losing visitors if you have a slow-loading website. Hold on! Surely, the only thing that matters to users is that your website works flawlessly and looks great… right? Wrong! The fact of the matter is that we’ve all become accustomed to instant […]
Read More

Merge Conflicts: What They Are and How to Deal with Them​

Merge conflicts... Nobody likes them. Some of us even fear them. But they are a fact of life when you're working with Git, especially when you're teaming up with other developers. In most cases, merge conflicts aren't as scary as you might think. In this fourth part of our “Advanced Git” series we'll talk about when they can happen, what they actually are, and how to solve them.
Read More