Happy Friday, and welcome to another edition of our roundup of all the web design and development related articles we’ve found that were published in the past seven days. This week includes design trends and tips, Vue and other JavaScript, WordPress, freelancing, and more. Let’s dive in!

UNLIMITED DOWNLOADS: 500,000+ WordPress & Design Assets

Sign up for Envato Elements and get unlimited downloads starting at only $16.50 per month!



 

 

3 Essential Design Trends, June 2021 | Webdesigner Depot

If you are feeling like me right now, you have mixed emotions about the world in general. And this is translating into a pretty distinct design trend that’s happening almost across the board: Websites aren’t using many images of people right now. There are just too many questions about what is appropriate (mask, no mask? […]
Read More

How Truthy and Falsy Values in JavaScript Work

Truthy and falsy values are important for JavaScript developers to understand. Learn what truthy and falsy values are and how they work.
Read More

Should Web Designers Worry About Competition?

Do web designers need to spend time researching their competition? Should they worry about what other firms are doing?
Read More

8 Design Trends That Are Fading Fast

Almost every year, we kick off with a list of design trends that we think will dominate projects in the coming year. While we’ve gotten pretty good at identifying hits, there are also some misses. These trends might fade due to a lot of different factors, but commonly they are just diffi...
Read More

Links on Accessibility | CSS-Tricks

Show/Hide password accessibility and password hints tutorial — Nicolas Steenhout goes deep on <input type="password"> accessibility. For one thing,
Read More

The right tag for the job: why you should use semantic HTML - localghost

Whether you write plain old HTML, HTML templating or JSX, are you using the right HTML tags? A guide to semantic HTML: what it is, why it’s so important, and how to use it
Read More

VS Code Extensions for HTML | CSS-Tricks

Let's look at some extensions for VS Code that make writing and editing HTML (and languages that are basically HTML with extra powers) better. You may not
Read More

What does “it depends” mean in web development | Home of fearless web developer Silvestar Bistrović

I have been in numerous situations where my answer to a client’s question was: “it depends.” But what does that seemingly simple phrase mean in web development? Let’s try to find out.
Read More

9 Amazing Design-Resource Package Sites | Webdesigner Depot

Every designer has their own preferred strategy for collecting resources. Some pluck brushes, fonts, and templates from different “stock photo sites” and public marketplaces. Others collect graphics from swipe files and forums around the web. The never-ending desire for themes, visual content, and graphical components has prompted an influx of “design packages” to appear around the […]
Read More

35 Popular Forums for Web Designers and Developers - Hongkiat

Web designing and development are one of the most widespread professional careers. These are also rapidly emerging fields that require one to be
Read More

Thumbnail Hover Effect with SVG Filters | Codrops

A simple thumbnail hover effect with a caption slide out animation and an SVG filter distortion on the image.
Read More

Video Tutorial: Melting Liquid RGB Text Effect in Photoshop

In today’s Photoshop tutorial I’m going to take you through the process of creating a melting liquid RGB text effect with somewhat of a retro 80s aesthetic with its vibrant colours and grainy texturing. This effect is ideal for creating poster art or an album cover design with a retro-futuristic style. We’ll use a couple […]
Read More

All you need is 5 fonts

There weren’t as many web fonts to pick from when I started my freelance career in the early 2000s, still I was always overwhelmed by the number of fonts to choose from. With no formal education in design or typography, my choices were uninformed and limited.
Read More

Looking at WCAG 2.5.5 for Better Target Sizes | CSS-Tricks

Have you ever experienced the frustration of trying to tap a button on a mobile device only to have it do nothing because the target size is just not
Read More

Component-Specific Design Tokens

In a recent project, I helped implement design tokens in an established design system. One of the more challenging parts of this work was updating the components to use design tokens. I learned a couple of things that might help speed up the process for others. Before we talk about using design tokens with components,...
Read More

4 Testimonial Page Examples for UX/UI Design

In these testimonial page examples, you’ll see how UX designers help clients provide social proof for their products and services.
Read More

8 Skills Designers Need to Thrive in Today’s Market

This is not another article about how the pandemic has changed the way we work. The reality is that plenty of creative professionals – especially freelancers – have been working from home and in remote environments for a long time. It’s probably why so many of us were quick to adapt ...
Read More

WordPress Plugin Acquisitions: What They Say About the Future

The WordPress plugin marketplace is seeing quite a bit of consolidation lately. And, even if you aren’t a close follower of the business side of things, it’s likely some of...
Read More

A Cornucopia of Container Queries | CSS-Tricks

I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries
Read More

WordPress 5.8 Introduces Support for WebP Images

WebP support is coming to WordPress 5.8. This modern image file format was created by Google in September 2010, and is now supported by 95% of the web browsers in use worldwide. It has distinct adv…
Read More

Assistive Technology: Fixing contrast issues, on your own site and elsewhere - The A11Y Project

Insufficient text contrast is the most common accessibility issue on websites today, even though by and large be automatically found and fixed. The Fix Contrast browser extension fixes contrast issues for end users.
Read More

How to Improve Your eCommerce UX for Better Conversions

It's not easy to fine-tune your eCommerce UX but this article breaks down every key page of an online store to help you increase conversions.
Read More

Thinking of going freelance? Here are 6 pieces of advice from a pro

After three years of freelancing full-time, graphic designer James Round stops by to share his biggest lessons learned and advice for anyone considering taking the leap.
Read More

Adding Shadows to SVG Icons With CSS and SVG Filters | CSS-Tricks

Why would we need to apply shadows to SVG? Shadows are a common design feature that can help elements, like icons, stand out. They could be persistent, or
Read More

11 landing page design tips

Learn about the top 11 landing page design tips. The rules you need to follow.
Read More

Weekly News for Designers № 596 - CSS for Web Vitals, GitHub Profile Generator, Fluid CSS Typography, Modern Minimal UI Style

This week’s Designer News – № 596 – includes A Guide to the Modern Minimal UI Style, CSS for Web Vitals, a CSS Layout Generator, Free Universal Icon Set, Creating the Perfect Link, Full Site Editing in WordPress 5.8, an iPhone 12 Clay Mockup and so much more.
Read More

Three Front-End Auditing Tools I Discovered Recently — Smashing Magazine

Building a faster website can be a rocket task these days. There are so many things to consider, so it’s challenging to get everything right. Here are some less-known tools that might help you get there.
Read More

Put a Background on Open Details Elements | CSS-Tricks

One thing that can be just a smidge funky about the <details> element is that, when open, it's not always 100% clear what is inside that element and
Read More

Meet :has, A Native CSS Parent Selector (And More) — Smashing Magazine

What makes relational selector one of the most requested features and how are we, as developers, working around not having it? In this article, we’re going to check the early spec of the :has selector, and see how it should improve the CSS workflow once it’s released.
Read More

Equal Columns With Flexbox: It’s More Complicated Than You Might Think | CSS-Tricks

As awesome as flexbox is, what it’s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top of that, flex-shrink is also doing some work allowing the items to be smaller, but only if needed. Let’s break those two down and see how they work together.
Read More

Building a Headless CMS with Fauna and Vercel Functions | CSS-Tricks

In this tutorial, we will learn and use headless CMS, Fauna, and Vercel functions to build a blogging platform, Blogify After that, you can easily build any web application using a headless CMS, Fauna and Vercel functions.
Read More