This Week In Web Design – April 17, 2020

Welcome to another edition of This Week In Web Design, our weekly roundup of articles published in the past seven days related to web design and development. This week we have a wide variety of articles, ready for you to peruse and bookmark to your heart’s extent. So saddle up and take advantage of this curated list!

16 Tools for Keeping Your Remote Design Team Together (and on Task)

Break down some of the best tools out there and how they can improve collaboration amongst your remote team.

10 “Random Act of Kindness” Ideas for Designers

We have a few ideas that you can borrow, add your creative flair to, and use to spread kindness and happiness.

Getting Started With The React Hooks API

Learn and understand what React hooks are, the basic React Hooks that are available and also examples of how to write them for your React applications.

How to Create a CSS-Tricks Custom Scrollbar

Take a look at how to make the custom scrollbar on the CSS-Tricks website.

Inspired Design Decisions With Herb Lubalin: Typography Can Be As Exciting As Illustration And Photography

How can we combine elements to develop powerful headers and calls to action? How do we use pre-formatted HTML text, and the text element in SVG for precise control over type? How can we optimise SVGs and make SVG text accessible? In this article, we’ll explore just that.

Styling in the Shadow DOM With CSS Shadow Parts

The ::part() selector is now supported in Chrome, Edge, Opera, Safari, and Firefox. We’ll see why it’s useful.

CSS Animation Timelines: Building a Rube Goldberg Machine

Using custom properties to plan out pure CSS timelines for complex animations.

8 Things NOT to do while designing website forms

An effective web form is aesthetically pleasing and yet serves the purpose of creation.

Working From Home? 10 Cheap Ways To Set Up Your Home Office

By utilizing these ideas you can save a significant amount of stress and money and get your home office up and running quickly and affordably.

No-Class CSS Frameworks

Just use semantic HTML and get styles.

Supercharge Your Site: How To Update Your PHP in WordPress

When you keep your PHP up to date, you inherently enhance your website’s performance, security, and SEO.

25+ Best Figma Plugins for Creating Design Systems

Take a look at some of the best and most useful plugins you can use to create your own workflows and design systems.

25+ Best Mobile App UI Design Examples + Templates

To help you find inspiration for your next app design project, we put together this collection of best app designs.

Interactive WebGL Hover Effects

A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.

Don’t do these usability mistakes on your website

A site that contains good usability can greatly improve the user’s experience when they visit the website and can, therefore, be positive to the user.

4 Examples of Bad Ecommerce Website Design and What to Do Instead

Look at four websites that show you exactly what not to do, with some hints and tips for what to do instead.

14 Mega Menu Designs All Designers Can Learn From

One of the most important considerations to be kept while including a mega menu design in a website layout is that it should contribute to the UX positively.

How the Vue Composition API Replaces Vue Mixins

The new Composition API, which is available now as a plugin for Vue 2 and an upcoming feature of Vue 3, provides a much better solution for sharing code between your Vue components.

How To Create A Particle Trail Animation In JavaScript

How you can to easily program a small trail of particles with anime.js.

Using CSS to Set Text Inside a Circle

You want to set some text inside the shape of a circle with HTML and CSS? That’s crazy talk, right?

Stop Outsmarting Yourself: Simplify WordPress Development

Some tips for avoiding the virtual minefield of overlooking simpler solutions.

Best Practices With React Hooks

This article covers the rules of React Hooks and how to effectively start using them in your projects.

CSS Scrollbar With Progress Meter

We can use some CSS trickery to make the scrollbar fill up as we go.

Visual Studio Code: A Power User’s Guide

In this guide, you’ll learn how to take advantage of Visual Studio Code to supercharge your development workflow.

12 Free Web Development Courses to Take While in Self-Isolation

With these, you’ll probably come out of the quarantine with some new programming skills that can take you a long way.

Create a Responsive CSS Motion Path? Sure We Can!

How could you make a CSS motion path responsive?

What Are Web Standards (And Do We Really Need Them)?

What web standards are, why we have them, and what you actually need to do with them in web design.

Creating Color Themes With Custom Properties, HSL, and a Little calc()

Nowadays we can define variables in a single stylesheet and let CSS do the magic.

Web Developer Workflow Tools: A Beginner’s Guide

Here’s a primer for the tools all web developers should get to know, from basic Bash commands to web browser add-ons that will debug your web apps and automate navigation tests, plus continuous integrations pipelines.