In this week’s roundup of the past week’s web design and development related articles, we have a variety of topics that include animation, JavaScript tips and tricks, CSS shadows, UX inspiration, spooky fonts for Halloween, and much more. Sit back and catch up on what’s been written this week.

The UX Designer Toolbox

Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets
Starting at only $16.50 per month!


 

Animation Techniques for Adding and Removing Items From a Stack

Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button
Read More

3 Essential Design Trends, October 2021 | Webdesigner Depot

Design trends on top of design trends. This theme of this month’s collection is trends that seem to build on each other. These examples use multiple trends listed here: hero typography, round buttons, and big branding. Here’s what’s trending in design this month… 1. Hero Typography Big, bold, and even unusual typography choices are the […]
Read More

Round a number to a specified amount of digits - JavaScriptSource

Use Math.round() and template literals to round the number to the specified number of digits.
Read More

16 Free Looped Animation and Samples to Use for Your Projects - SpyreStudios

Animation in websites has reached new, incredible levels since the increased availability of free looped animation on the internet. The great news is that there are numerous sources available.  These could be samples, templates, or ready-to-use animations you can simply embed on your website.
Read More

Creating 3D Characters in Three.js - Codrops

Are you looking to get started with 3D on the web? In this tutorial we’ll walk through creating a three-dimensional character using Three.js, adding some simple but effective animation, and a generative color palette.
Read More

Conceptual Design: The Tool You Need to Ideate Like a Pro

How does the design process start for you? If you want to take ideation and creation to another level, conceptual design may be the place to start. Conceptual design can actually help you better design an idea so that when you start the process of creation, it is more developed and functio...
Read More

Pondering the Future of the WordPress Sidebar

We take a trip back in time and examine what made the WordPress sidebar so special and share some potential sidebar ideas for a new era.
Read More

Deconstructing the homunculus.jp Distortion with Three.js - Codrops

Learn how to replicate the pixel river distortion effect seen on homunculus.js using Three.js.
Read More

Branching Strategies in Git

In this article I'm going to talk about branching strategies and different types of Git branches. I’m also going to introduce you to two common branching workflows: Git Flow and GitHub Flow.
Read More

Confirm Yes or No With JavaScript - JavaScriptSource

How to display a confirm dialog box using JavaScript. The confirm dialog box allows you to perform actions based on the user input.
Read More

3 Ways to Remove the Background from an Image

Removing a background from an image is extremely useful when it comes to creating content for blogs, social media, or other online platforms. It allows creators to make sure every...
Read More

Inspirational Websites Roundup #30 - Codrops

A roundup of creative websites collected over the past couple of weeks that stand out with their great design and interactivity.
Read More

Project Management for Designers: How to Improve Your Day-to-Day Operations

Designers matter too! Learn what the biggest project management pain points are for designers, and which project management features you should be looking out for.
Read More

Quickly Testing CSS Fallbacks

Dumb trick alert! Not all browsers support all features. Say you want to write a fallback for browsers that doesn't support CSS Grid. Not very common
Read More

7 Websites with Incredible Animation For Inspiration - SpyreStudios

Websites with animation are pretty common nowadays and we don't even know it. The animation could be injected into a website to make it the main focus of interest - landing pages, backgrounds, headers, and more. However, there are some websites that introduce the animation so subtly, readers don't often notice it. This could be via scrolling, navigation, loaders, progress bars, and the like. 
Read More

Apply a CSS animation to an element with JavaScript - JavaScriptSource

A helper function to apply a CSS animation to an element with JavaScript.
Read More

How to Implement and Style the Dialog Element - Codrops

Go in-depth on the native dialog HTML element with this tutorial and learn how to implement a user-friendly, accessible dialog on your website.
Read More

12 Spooky Fonts Perfect For Your Halloween-Inspired Designs

Download spooky fonts for your Halloween-inspired designs this month. Check out this creepy collection of typefaces and download your favorites.
Read More

Want UX Inspiration? Look To Classic Video Games

Web designers are always looking for inspiration. Something that will jumpstart our creativity and lead us to reach new heights. Quite often, we find what we’re looking for by studying...
Read More

Scroll Shadows With JavaScript

Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It's just good UX. You can
Read More

4 Steps to Improve PageSpeed Insights Score and SEO | Webdesigner Depot

PageSpeed Insights is a free performance measurement tool provided by Google. It analyzes the contents of a web page for desktop and mobile devices. It provides a single number score (from 1 to 100) that summarizes several underlying metrics that measure performance. If you have not run PageSpeed Insights on your website, then you should […]
Read More

Copy text to the clipboard - JavaScriptSource

Assume that we want to copy a given text to the clipboard. Here's how.
Read More

7 UX Principles to Boost SERPs | Webdesigner Depot

User experience is one of the most important principles of web design. There’s no doubt that you focus on UX with every page you design on the web, whether it’s a portfolio, a profile page, or an entire website. Unfortunately, what many experts forget is that UX doesn’t just apply to digital pages. That means that […]
Read More

9 Figma Design System Tips.

In this article, I’ve listed a few quick and easy methods to help you speed up your design system workflow in Figma.
Read More

7 Ways Your UX Needs to Extend Beyond Your Website (And How to Do It)

User experience is a conversation that’s part of every website or app design conversation. It’s likely one of the first things you talk about when making choices about functionality, customer journeys, and visuals. But do you talk about UX in the greater picture of designing your entir...
Read More

The Challenge of Designing Websites for Large Screens

If you’re looking to build a website that takes advantage of large screens, we’ve put together some general rules of thumb for you.
Read More

Considerations for Using Markdown Writing Apps on Static Sites

If you run or have recently switched to a static site generator, you might find yourself writing a lot of Markdown. And the more you write it, the more
Read More

The Options for Password Revealing Inputs

In HTML, there is a very clear input type for dealing with passwords: <input type="password"> If you use that, you get the obfuscated bullet-points
Read More

JavaScript Booleans Explained - JavaScriptSource

A boolean value is one that can either be TRUE or FALSE. If you need to know “yes” or “no” about something, then you would want to use the boolean function.
Read More

How Good Design Can Help Your Business Rank Higher

Good website design is a topic that many people overlook because they think it’s not important. The truth is, if you want to rank higher on the Google search results...
Read More

Learn How to Create a Headless WordPress Site With Vue.js

WordPress has been the go-to content management system for developers and non-developers to quickly build and create stunning websites. Using a
Read More

How to Design for All Screen Sizes With Elementor’s Custom Breakpoint

Elementor has been making waves in the world of WordPress website design since its launch in 2016. Part of what makes this platform so appealing to creators is a constantly evolving set of features. As the web continues to transform, so too does the Elementor landscape. Recently, in Septem...
Read More

'Freebie: COVID-19 Icon Set (56 Icons, AI, EPS, SVG, PNG) — Smashing Magazine' /

Every once in a while, we publish [freebies](https://www.smashingmagazine.com/category/freebies/) related to different occasions and themes. We hope that with this icon set, every designer will be able to find their own use case and contribute to saving lives. Free for personal and commercial use.
Read More

'A Guide To CSS Debugging — Smashing Magazine' /

Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs.
Read More

Writing Your Own Code Rules

There comes a time on a project when it's worth investing in tooling to protect the codebase. I'm not sure how to articulate when, but it's somewhere
Read More

CSS in TypeScript with vanilla-extract

vanilla-extract is a new framework-agnostic CSS-in-TypeScript library. It’s a lightweight, robust, and intuitive way to write your styles. vanilla-extract
Read More