WebDev Feed

Web development news

Collective #757

24 March 2023 @ 11:09 am - Codrops

Scrut * All commands * The End of Front-End Development * ThumbHash

Overcoming The Challenges Of Content Creation For Informational Websites

23 March 2023 @ 5:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Content matters! Unfortunately, when it comes to informational websites, content quality is often poor. There is no magic answer to fix that. However, there are practical techniques you can use to improve the copy on your websites and ensure your users find the content they are looking for.

Some Cross-Browser DevTools Features You Might Not Know

22 March 2023 @ 8:22 pm - CSS-Tricks

I spend a lot of time in DevTools, and I’m sure you do too. Sometimes I even bounce between them, especially when I’m debugging cross-browser issues. DevTools is a lot like browsers themselves — not all of the features in … Some Cross-Browser DevTools Features You Might Not Know originally published on CSS

Cyberpunk inspired Three.js Scene with JavaScript and Blender

22 March 2023 @ 12:11 pm - Codrops

Learn how to code a vibrant Cyberpunk scene using Three.js, complete with post-processing and dynamic lighting, no shader expertise needed!

Smashing Podcast Episode 58 With Debbie Levitt: What Is CX Design?

21 March 2023 @ 7:00 am - Articles on Smashing Magazine — For Web Designers And Developers

In this episode of the Smashing Podcast, we ask what is Customer Experience design, and how does it differ from User Experience design? Vitaly Friedman talks to expert Debbie Levitt to find out.

Developer Productivity and The Definition of Developer Happiness

20 March 2023 @ 11:16 am - Codrops

This article provides tips to help developers increase productivity and explores the definition of developer happiness through a survey conducted by the Developer Nation community.

Free Fonts For Interface Designers

20 March 2023 @ 9:00 am - Articles on Smashing Magazine — For Web Designers And Developers

Just a few beautiful, well-crafted fonts for headings and body text that you probably haven’t spotted before. Free for personal and commercial use. Enjoy!

Collective #756

17 March 2023 @ 10:07 am - Codrops

CSS Nesting * Modern Font Stacks * Type Design Resources * Shiny Button * Unplugin

Internationalization In Next.js 13 With React Server Components

16 March 2023 @ 8:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Based on an example of a multilingual app that displays street photography images from Unsplash, Jan Amann explores next-intl to implement all internationalization needs in React Server Components and shares a technique for introducing interactivity with a minimalistic client-side footprint.

Awesome Demos Roundup #24

16 March 2023 @ 10:25 am - Codrops

A collection of creative code experiments from the past couple of weeks.

Full Stack GraphQL With Next.js, Neo4j AuraDB And Vercel

16 March 2023 @ 10:00 am - Articles on Smashing Magazine — For Web Designers And Developers

In this article, William Lyon explores how to build a full stack GraphQL application that takes advantage of the API Routes feature of Next.js API to combine your GraphQL server and front-end React applications into a single framework.

What Leonardo Da Vinci Can Teach Us About Web Design

14 March 2023 @ 4:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Perhaps more than any other person in history, Leonardo da Vinci showed the kind of magic that can happen in the overlap between art and science, where much of web development lives. His methods and outlooks are just as applicable to the web today as they were in Renaissance Italy.

Fullscreen Clip Animation

14 March 2023 @ 12:18 pm - Codrops

Some inspiration for clip-path animations where a fullscreen image moves into a row/grid of smaller images, morphing its shape along the way.

Making Calendars With Accessibility and Internationalization in Mind

13 March 2023 @ 1:23 pm - CSS-Tricks

Doing a quick search here on CSS-Tricks shows just how many different ways there are to approach calendars. Some show how CSS Grid can create the layout efficiently. Some attempt to bring actual data into the mix. Some …

5 Mistakes I Made When Starting My First React Project

10 March 2023 @ 4:41 pm - CSS-Tricks

You know what it’s like to pick up a new language or framework. Sometimes there’s great documentation to help you find your way through it. But even the best documentation doesn’t cover absolutely everything. And when you work with something … 5 Mistakes I Made When Starting My First React Project originally published on CSS-Tricks

Collective #755

10 March 2023 @ 11:48 am - Codrops

Annual Awards 2022 * Relative rounded corners * Three.js Realism Effects * Iconhunt

A Pragmatist’s Guide To Lean User Research

10 March 2023 @ 8:00 am - Articles on Smashing Magazine — For Web Designers And Developers

Instead of telling you once again what the best practice is and adding to your imposter syndrome, let’s concentrate on some practical approaches to user research that we might be able to fit into our existing projects without being left disillusioned.

Building Complex Forms In Vue

9 March 2023 @ 10:00 am - Articles on Smashing Magazine — For Web Designers And Developers

Did you know that creating a complex form can be progressively enhanced using some Vue features like the v-for and the v-model? In this article, Olufunke shares some basic Vue core features that are super useful when building out the complex form in your day-to-day Vue usage.

Creating a Clock with the New CSS sin() and cos() Trigonometry Functions

8 March 2023 @ 2:05 pm - CSS-Tricks

CSS trigonometry functions are here! Well, they are if you’re using the latest versions of Firefox and Safari, that is. Having this sort of mathematical power in CSS opens up a whole bunch of possibilities. In this tutorial, I thought … Creating a Clock with the New CSS sin() and cos() Trigonometry Functions originally published on

How To Create Dynamic Donut Charts With TailwindCSS And React

7 March 2023 @ 3:30 pm - Articles on Smashing Magazine — For Web Designers And Developers

In this article, Paul Scanlon shares a super lightweight approach to creating a Donut chart using conic-gradient(). There are no additional libraries to install or maintain, and there’s no heavy JavaScript that needs to be downloaded by the browser in order for them to work.

Why You Should Consider Graphs For Your Next GraphQL Project

7 March 2023 @ 12:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

In this article, Adam Cowley examines the Graph behind GraphQL and demonstrates why Neo4j could be the best fit for your next project.

11 Best WooCommerce Themes for 2023

7 March 2023 @ 8:25 am - Codrops

Discover the best WooCommerce themes to help create an intuitive and seamless on-brand buying experience for your visitors.

Coding Kenta Toshikura’s Glass Effect with Three.js

6 March 2023 @ 9:45 pm - Codrops

Learn how to recreate the glass effect seen on Kenta Toshikura's website using postprocessing in Three.js.

Inspiring Web Design And UX Showcases

6 March 2023 @ 4:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Do you sometimes feel that all websites look the same? In this post, we compiled web design showcases that prove differently. They highlight some of the finest web designs, well-crafted experiences, and delightful interactions from across the web. Inspiration is guaranteed.

Managing Fonts in WordPress Block Themes

6 March 2023 @ 3:26 pm - CSS-Tricks

Fonts are a defining characteristic of the design of any site. That includes WordPress themes, where it’s common for theme developers to integrate a service like Google Fonts into the WordPress Customizer settings for a “classic” PHP-based theme. That hasn’t … Managing Fonts in WordPress Block Themes originally p

Collective #754

3 March 2023 @ 4:08 pm - Codrops

WebContainers * MakeReign Academy * Strudel REPL * Getting Started with Style Queries

How AI Technology Will Transform Design

3 March 2023 @ 11:00 am - Articles on Smashing Magazine — For Web Designers And Developers

In this article, Nick and Gleb cover the current state of design, answer common questions designers have about AI tools, and share practical tips on how designers can make the most of using AI tools.

Everything You Need to Know About the Gap After the List Marker

2 March 2023 @ 6:20 pm - CSS-Tricks

I was reading “Creative List Styling” on Google’s web.dev blog and noticed something odd in one of the code examples in the ::marker section of the article. The built-in list markers are bullets, ordinal numbers, and letters. The ::marker pseudo-element … E

Moving From Vue 1 To Vue 2 To Vue 3: A Case Study Of Migrating A Headless CMS System

2 March 2023 @ 9:00 am - Articles on Smashing Magazine — For Web Designers And Developers

In this article, Elisabeth Wieser-Linhart explores its potential benefits and drawbacks and shares what considerations and steps were involved in the process of migrating the front-end interface of Storyblok’s headless content management system.

Daydreaming In March (2023 Wallpapers Edition)

28 February 2023 @ 2:30 pm - Articles on Smashing Magazine — For Web Designers And Developers

Let’s get ready for March with some fresh wallpapers! Designed with love by the community for the community, the wallpaper designs in this collection are available in versions with and without a calendar. Enjoy!

Meet Penpot, An Open-Source Design Platform Made For Designers And Developers Alike

28 February 2023 @ 8:00 am - Articles on Smashing Magazine — For Web Designers And Developers

In the ever-evolving design tools landscape, it can be difficult to keep up with the latest and greatest. In this article, we’ll take a closer look at Penpot, the first design and prototyping tool that’s fully open-source and based on open web standards, making it an ideal choice for both designers and developers.

A Guide To Accessible Form Validation

27 February 2023 @ 2:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Each time we build a field validation from scratch, accessibility doesn’t come out of the box. In this guide, Sandrina breaks down what we need to take into consideration, so that nobody gets stuck on an inaccessible invalid field.

Chocolate, Waffles And Fries: Meet SmashingConf Antwerp 2023 🇧🇪

22 February 2023 @ 6:30 pm - Articles on Smashing Magazine — For Web Designers And Developers

Brand new conference on design & UX, for designers and UI engineers who love the web. On design systems, usability, product design and complex UIs. That’s SmashingConf Antwerp, taking place in magical Bourla on October 9–11, 2023.

Building Future-Proof High-Performance Websites With Astro Islands And Headless CMS

22 February 2023 @ 5:30 pm - Articles on Smashing Magazine — For Web Designers And Developers

Let’s see how to achieve phenomenal web performance and great developer experience with Astro and a headless CMS, resulting in the best possible experience for users, developers and content creators alike.

Getting Internationalization (i18n) Right With Remix And Headless CMS

21 February 2023 @ 4:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

This article will show you the impact of internationalization, its fundamental logic, how to approach it with Remix, and optionally, how to manage it more conveniently using a headless CMS.

Smashing Podcast Episode 57 With Marcin Wichary: What’s The Key To A Great Keyboard?

21 February 2023 @ 7:00 am - Articles on Smashing Magazine — For Web Designers And Developers

In this episode of the Smashing Podcast, we ask what’s the key to a great keyboard? Is this essential part of our daily toolkit easily overlooked? Vitaly Friedman talks to expert Marcin Wichary to find out.

Keys To An Accessibility Mindset

20 February 2023 @ 2:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

An accessible product can be daunting to build as there’s so much nuance and technical depth to consider. In this article, Daniel Yuschick demonstrates three keys for approaching and developing accessible content without leaving you lost in the weeds.

A Step-By-Step Guide To Building Accessible Carousels

17 February 2023 @ 12:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Most carousels come along with usability and accessibility issues. To avoid these issues, this article addresses step-by-step design considerations as well as semantic requirements for carousels to be accessible. It is intended to create an in-depth understanding of the implementation and its impact on users.

Putting Gears In Motion: Animating Cars With HTML And SVG

16 February 2023 @ 1:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

SVG `` provides a way to define how an element moves along a motion path. In this article, Paul Scanlon shares an idea of how to use it by animating race cars in an infinite loop as easy as one-two-three!

Five Steps To Design Your Product With Powerful Storytelling

15 February 2023 @ 10:00 am - Articles on Smashing Magazine — For Web Designers And Developers

How to apply powerful storytelling to design a compelling and memorable digital experience on a landing page. A case study of the [Smart Interface Design Patterns landing page](https://smart-interface-design-patterns.com/).

An Approach to Lazy Loading Custom Elements

13 February 2023 @ 3:10 pm - CSS-Tricks

We’re fans of Custom Elements around here. Their design makes them particularly amenable to lazy loading, which can be a boon for performance. Inspired by a colleague’s experiments, I recently set

Different Ways to Get CSS Gradient Shadows

10 February 2023 @ 3:13 pm - CSS-Tricks

It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does this (believe me, I’ve looked) and any blog post you find about … Different Ways to Get CSS Gradient Shadows originally published on CSS-Tricks, which

Discovering Primitive Objects In JavaScript (Part 1)

10 February 2023 @ 12:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

In the first part of the series, Kirill Myshkin covers some aspects of JavaScript that help bring objects closer to primitive values, which allow benefiting from common language features that aren’t usually associated with an object, like comparisons and arithmetic operators.

Healthcare, Selling Lemons, and the Price of Developer Experience

9 February 2023 @ 7:45 pm - CSS-Tricks

Every now and then, a one blog post is published and it spurs a reaction or response in others that are, in turn, published as blogs posts, and a theme starts to emerge. That’s what happened this past week and … Healthcare, Selling Lemons, and the Price of Developer Experience originally published on

Moving Backgrounds

9 February 2023 @ 3:03 pm - CSS-Tricks

We often think of background images as texture or something that provides contrast for legible content — in other words, not really content. If it was content, you’d probably reach for an <img> anyway, accessibility and whatnot. But there are … Moving Backgrounds originally published on CSS-Tricks, which is par

Picture Perfect: Meet Pixo, A Photo Editor For Your End Users

9 February 2023 @ 9:00 am - Articles on Smashing Magazine — For Web Designers And Developers

With so many image editing services available nowadays, it’s good to have one good solution that is applicable for all websites and web apps that need to provide image editing as a feature. Hristo Chakarov explains how Pixo Editor’s easy integration (just a few JavaScript lines) and rich API can save your time and improve your end users’ workflow.

How Designers Should Ask For (And Receive) High-Quality Feedback

8 February 2023 @ 11:00 am - Articles on Smashing Magazine — For Web Designers And Developers

In this article, Andy Budd shares his way of requesting feedback: rather than sharing a linear case study that explains every design revision, the first thing to do would be to better frame the problem.

The truth about CSS selector performance

7 February 2023 @ 3:59 pm - CSS-Tricks

Geez, leave it to Patrick Brosset to talk CSS performance in the most approachable and practical way possible. Not that CSS is always what’s gunking up the speed, or even the lowest hanging fruit when it comes to improving …

Smashing Podcast Episode 56 With Veerle Pieters: How Has The Design Industry Changed?

7 February 2023 @ 9:30 am - Articles on Smashing Magazine — For Web Designers And Developers

In this episode of the Smashing Podcast we ask how has the design industry changed? Is technology making our work easier? Vitaly Friedman talks to veteran designer Veerle Pieters to find out.

The Double Emphasis Thing

6 February 2023 @ 3:06 pm - CSS-Tricks

I used to have this boss who loved, loved, loved, loved to emphasize words. This was way back before we used a WYSIWYG editors and I’d have to handcode that crap. <pI used to have this … The Double Emphasis

How To Build A Magazine Layout With CSS Grid Areas

6 February 2023 @ 1:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Web development, especially what you can do with CSS, has become increasingly complex. With the added capabilities of CSS Grid, it is now possible to achieve layouts that look like they were laid out by hand. Let’s tackle a practical example of how to do something like that.

A Fancy Hover Effect For Your Avatar

3 February 2023 @ 3:11 pm - CSS-Tricks

Do you know that kind of effect where someone’s head is poking through a circle or hole? The famous Porky Pig animation where he waves goodbye while popping out of a series of red rings is the perfect example, and … A Fancy Hover Effect For Your Avatar originally published on CSS-Tricks, which is part of the

UX Podcasts For Designers

2 February 2023 @ 3:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Podcasts are a fantastic opportunity to get up close with the people who know their craft. In this post, we compiled podcasts that are bound to provide valuable insights into UX and new perspectives on the field. Perfect for a short coffee break or a long commute.

How To Host A WordPress Site On Amazon Lightsail

2 February 2023 @ 9:00 am - Articles on Smashing Magazine — For Web Designers And Developers

Lightsail provides all the power we need to host our websites, as we are used to from AWS, but making it way easier than ever before. In this article, Leonardo Losoviz explores how to launch a WordPress site in Lightsail in a quick and easy way.

Caching Data in SvelteKit

1 February 2023 @ 3:04 pm - CSS-Tricks

My previous post was a broad overview of SvelteKit where we saw what a great tool it is for web development. This post will fork off what we did there and dive into every developer’s favorite topic: caching. So, … Caching Data in SvelteKit originally published on

Understanding App Directory Architecture In Next.js

1 February 2023 @ 11:00 am - Articles on Smashing Magazine — For Web Designers And Developers

The new App Directory architecture has been the main character of the recent Next.js release, which keeps bringing up many questions. In this article, Atila Fassina explores the advantages and pitfalls of this new strategy and reflects on whether you should use it in production now or not.

The Magic Of February (2023 Wallpapers Edition)

31 January 2023 @ 4:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Do you need a little inspiration boost? Well, then our new batch of desktop wallpapers is for you. Designed by artists and designers from across the globe, they come in versions with and without a calendar for February 2023.

How B2B Sales Help Us Understand Our Role As UX Designers Better

31 January 2023 @ 8:30 am - Articles on Smashing Magazine — For Web Designers And Developers

Throughout a customer journey (particularly in B2B), there will be interactions that are primarily between two people rather than a human and an interface. In this article, Paul Boag explains why you cannot improve the user experience without considering the entirety of the UX journey.

Easy SVG Customization And Animation: A Practical Guide

30 January 2023 @ 2:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Developers often feel discouraged from editing SVG markup and experimenting with SVG animations, thinking it’s a significant time investment or they need to use a complex animation library to do so. In this article, Adrian showcases his favorite tricks, which make the process streamlined and fun.

AR, VR, and a Model for 3D in HTML

27 January 2023 @ 2:15 pm - CSS-Tricks

Tucked down somewhere in the Safari Technology Preview 161 release notes is a seemingly innocous line about support for a new HTML element and attribute: Added support for <model src> and honor <source type> attributes (257518

How To Build Strong Customer Relationships For User Research

27 January 2023 @ 11:30 am - Articles on Smashing Magazine — For Web Designers And Developers

In this article, Rachel walks you through various ways that product teams can utilize to build relationships with customers. She will share some tips and tricks from her experience that have helped her nurture customer relationships and build better products.

Creating A High-Contrast Design System With CSS Custom Properties

26 January 2023 @ 2:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Managing our colors can truly help people to access our content. In this article, Brecht de Ruyte takes a deep dive into how we can create a high-contrast system while maintaining a balance between designing something accessible and respecting the look and feel of a brand.

Better ROI For Your Digital Products: Why Continuous Research Is Key

26 January 2023 @ 10:00 am - Articles on Smashing Magazine — For Web Designers And Developers

57% of product professionals say that product research has a positive effect on customer satisfaction. 42% agree that it affects profitability. Imagine how much more successful your product would be if you did research continuously?

Product Reviews And Ratings UX: A Designer’s Guide

25 January 2023 @ 12:30 pm - Articles on Smashing Magazine — For Web Designers And Developers

How do we design effective reviews and ratings? With a distribution chart, decimal scores, tags, recommendation score and unedited product photos.

Copying Designs Doesn’t Work, And Here’s Why

24 January 2023 @ 11:00 am - Articles on Smashing Magazine — For Web Designers And Developers

Striking the right balance between inspiration and innovation might be hard. Let’s explore how to effectively get inspiration from others without losing that magic spark, including some do’s and don’ts along the way.