From scroll-linked animations to website load testing, functions in typescript to design portfolios, WordPress tutorials to voice UI – these topics and many more are covered in this week’s roundup of all the web design and development related articles we’ve found that were published on the interwebs over the past seven days. Let’s have a look!

Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets
Starting at only $16.50/month!


 

 

Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines

The Scroll-Linked Animations specification is an upcoming and experimental addition to CSS. Thanks to the @scroll-timeline at-rule and animation-timeline
Read More

'Maintaining End-To-End Quality With Visual Testing — Smashing Magazine' /

By adding visual elements to your tests, you can gain more options to add meaningful ways in maintaining a high level of quality for your app. Colby Fayock explains how.
Read More

Functions in TypeScript: A Simple Introduction

Learn how to use functions in TypeScript. Learn how to define types for parameters and return types, how to create function types and more.
Read More

8 CSS & JavaScript Code Snippets for Creating Realistic Animation

A collection of CSS & JavaScript code snippets that bring an element of realism to web animation. Full-on recreations to real-world effects.
Read More

10 tutorials and guides for learning Affinity Designer | Creative Nerds

Affinity is a great more affordable alterative to photoshop. Affinity is available on mac, window and Ipad making accessible across a broad range of devices. Its a great application for creating concept art, print projects, logos, icons, UI designs, mock-ups and more. Its become a staple as an application commonly used by a lot of […]
Read More

Images are hard.

Putting images on websites is incredibly simple, yes? Actually, yes, it is. You use <img> and link it to a valid source in the src attribute and
Read More

How to Remove an Object in Photoshop (Step by Step Guide)

One of the most common uses of Photoshop is removing objects from photos. In fact, it’s one of the reasons the software was so popular back in the day. If you’ve just bought a subscription to Photoshop, removing objects is a trick you must learn right away. In this quick guide, we’ll...
Read More

Things You Should Know Before Customizing WordPress

Customizing WordPress requires planning. So, before you fire up that code editor, here are some things you should know about the process.
Read More

25+ Freelance Statistics & Surprising Trends (2021 Update)

Freelance statistics show freelancing is growing faster than ever and it's a force to be reckoned with. Time to join the freelance movement.
Read More

Learn how to use WordPress without touching any code

Anyone can create a site with WordPress, but a guide to getting started is always helpful. Let's find out how you can learn to use WordPress!
Read More

9 Must-Install Craft CMS Plugins | Webdesigner Depot

Craft CMS is increasing in popularity, and as it does, the previously relatively scant range of plugins is growing rapidly. There are plugins for Craft ranging from simple field utilities to the full ecommerce solution provided by Pixel & Tonic — the makers of Craft. An early decision that has borne fruit for Craft has […]
Read More

3 Simple PageSpeed & Core Web Vital Hacks for WordPress

Waited until the last minute and now you need to get your Core Web Vital numbers up? Here are three quick hacks to get it done.
Read More

Creating a Typography Motion Trail Effect with Three.js | Codrops

A tutorial on how to use WebGL framebuffers via Three.js to create an interactive typography motion trail effect.
Read More

Video Tutorial: How to Create a Modern Gradient Logo Design in Adobe Illustrator

In today’s Adobe Illustrator tutorial I’m going to take you through the process of creating a colourful gradient logo icon. I’ll show you how Illustrator’s shape tools make it easy to construct the basic vector design, then we’ll apply a vibrant colour scheme using gradients. The final result is a trendy vector logo icon with […]
Read More

'How To Migrate From WordPress To A Headless CMS — Smashing Magazine' /

In this article, we will look at when it makes sense to migrate from a monolithic project to a headless setup and the benefits that come with it. In addition to a step-by-step guide on how to migrate WordPress to Storyblok Headless CMS, the problems that will arise during the process and how to deal with them.
Read More

The complete guide to making a responsive website

Designing a website? Read on for expert tips on how to make a responsive website from start to finish.
Read More

Full-Screen Video Backgrounds in Web Design: Pros, Cons & Tips

There’s still a debate going on in the web design community on whether video backgrounds in websites are good or bad. However, we’ve seen a rise in websites utilizing fullscreen video backgrounds in the past few months than ever before. But is it really an effective strategy? Does it h...
Read More

1099 vs W2: What's the Difference as a Freelancer?

This article will cover all the basics between a 1099 vs W2, and which might apply to you as a freelancer in a gig economy.
Read More

A Step-By-Step Process for Turning Designs Into Code

Turning website design files into a combination of HTML, CSS and JavaScript is the bread and butter of many front-end web development jobs, but there’s a
Read More

8 cool CSS tips & tricks to impress

CSS has thousands of secrets, today we will explore 8.
Read More

Best YouTube Channels for Front-end Developers — dailydevlinks

Most useful YouTube channels for front-end developers. You'll find something for beginners, juniors, mid-levels and seniors in each of these YouTube channels and you'll be sure to learn something new.
Read More

'A Guide To Attracting Clients To Your Agency — Smashing Magazine' /

Many web design agencies consider it a badge of honor that they win work exclusively through word-of-mouth recommendations. In this article, Paul Boag explains why that is entirely the wrong attitude and what to do about it.
Read More

WebSockets and Node.js - testing WS and SockJS by building a web app | Ably Blog: Data in Motion

Building a cursor position sharing web app to demonstrate how to implement WebSockets with Node.js, and the pros and cons of WS and SockJS.
Read More

Design Trend: Soft UI

There’s a website and app design trend that’s so subtle you almost don’t see it. Soft UI creates a frost-style or glassy blur where elements sink and extrude from the background to create varying levels of depth and dimension. Combine this effect with a softer, more pastel color pale...
Read More

Making Your Mark: 6 Tips for Infusing Brand Essence into Your Website | Webdesigner Depot

What makes a company special? There are hundreds of organizations out there selling fast food, but only one McDonalds. You’ve probably stumbled across dozens of technology companies too, but none of them inspire the same kind of loyalty and commitment as Apple. So why do people fall in love with some companies more than others? […]
Read More

How To Perform a Website Load Testing

Want to improve your website load speed? Website load testing tools can help you.
Read More