WebDev Feed

Web development news

Inspirational Websites Roundup #57

15 March 2024 @ 2:44 pm - Codrops

Discover a fresh collection of websites, each chosen for their outstanding design, to spark your inspiration.

Collective #821

15 March 2024 @ 12:00 pm - Codrops

Puter * Reward your future customers with a game * Twitter creative list

This changed how I use media queries

14 March 2024 @ 2:40 pm - Kevin Powell

Grid Item Reveal Animation on Hover

13 March 2024 @ 3:50 pm - Codrops

A recreation of the grid item reveal animation on hover as seen on the website of Metalab.

Is Drizzle Really Better Than Prisma?

12 March 2024 @ 4:00 pm - Web Dev Simplified

Create an animated, circular progress bar

12 March 2024 @ 3:52 pm - Kevin Powell

Event Calendars For Web Made Easy With These Commercial Options

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

Collection of top-notch calendar components for seamless event scheduling. Whether you prefer ready-to-use setups or enjoy tweaking code for a tailored experience, these calendars have you covered.

Collective #820

12 March 2024 @ 12:00 pm - Codrops

UVCanvas * Bugs I've filed on browsers * Nekoweb.org

Success At Scale: Last Chance For Pre-Sale Price

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

Our next book, “Success at Scale” is finally at the printer, which means we’ll be shipping books soon. It’s also your last chance to get the book at the presale price. Get your copy and save now!

Modern CSS Tooltips And Speech Bubbles (Part 2)

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

In Part 1 of this series, Temani Afif explored different CSS techniques to create tooltip shapes. The main challenge was to rely on a single element and create optimized code that could easily be controlled using CSS variables to update the size, shape, and position of the tail. In this second part, you are going explore more shapes.

Collective #819

8 March 2024 @ 12:00 pm - Codrops

Home Screen Advantage * AI and Design Systems * CSS Foundations: What is IACVT?

Front-end dev takes on a CSS Battle

7 March 2024 @ 4:38 pm - Kevin Powell

On-Scroll 3D Stack Motion Effect

6 March 2024 @ 1:02 pm - Codrops

An experimental 3D card stack animation on scroll.

The End Of My Gatsby Journey

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

[“Gatsby headaches”](https://www.smashingmagazine.com/2023/06/gatsby-headaches-i18n-part-1/) are over. Juan Diego Rodríguez reflects on his decision to stop using Gatsby as his go-to framework. Through a detailed examination of its strengths and weaknesses, he provides valuable insights and alternative options for developers navigating their tooling choices.

State Managers Are Making Your Code Worse In React

5 March 2024 @ 5:00 pm - Web Dev Simplified

A simple CSS solution to select ranges of content

5 March 2024 @ 4:00 pm - Kevin Powell

Collective #818

5 March 2024 @ 12:00 pm - Codrops

What is Utility-First CSS? * Hyperdiv * htmz * 404 Creatives

Collective #817

1 March 2024 @ 12:00 pm - Codrops

What is Utility-First CSS? * Hyperdiv * htmz * 404 Creatives

Modern CSS Tooltips And Speech Bubbles (Part 1)

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

Tooltips are a very common pattern used in CSS for years. There are a lot of ways to approach tooltips in CSS, though some evoke headaches with all the magic numbers they require. In this article, Temani Afif presents modern techniques to create tooltips with the smallest amount of markup and the greatest amount of flexibility.

Can I clone this fun effect from CSS Day using modern CSS?

29 February 2024 @ 3:23 pm - Kevin Powell

Waiting For Spring (March 2024 Wallpapers Edition)

29 February 2024 @ 10:00 am - 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 March 2024. Enjoy!

Exploring 3D Effects with 2D Optical Illusions

28 February 2024 @ 11:47 am - Codrops

A brief tutorial that guides you through creating a 3D visual effect using a 2D optical illusion with CSS and JavaScript.

NEW React 19 Changes Are Amazing!

27 February 2024 @ 6:00 pm - Web Dev Simplified

Reporting Core Web Vitals With The Performance API

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

The Performance API is a set of standards for measuring and evaluating performance metrics with JavaScript. This article demonstrates how to use the Performance API to generate performance metrics directly in the DOM to create your own reporting.

Collective #816

27 February 2024 @ 12:00 pm - Codrops

Rotten Apple * Specificity battle * PicToBrush * gpu-curtains

A Web Designer’s Accessibility Advocacy Toolkit

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

Digital designer Yichan Wang has put together this collection of strategies and selling points to help you encourage and advocate for accessibility in your place of work, including useful scripts you can use as starting points.

Vanilla JavaScript, Libraries, And The Quest For Stateful DOM Rendering

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

It’s well-established that the web faces wide-ranging usability and performance issues, from user-hostile UI patterns and twisted search results to sluggish performance and battery-draining bloat. In this article, Frederik examines one small-but-significant aspect where developers take the reins: Painting pixels on the screen.

These two CSS features make colors a breeze

22 February 2024 @ 5:34 pm - Kevin Powell

The background values no one knows about

20 February 2024 @ 5:51 pm - Kevin Powell

10 Tailwind Classes I Wish I Knew Earlier

20 February 2024 @ 5:00 pm - Web Dev Simplified

A Practical Guide To Designing For Colorblind People

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

Color accessibility is more than just ticking boxes. Even with good contrast, some color palettes can make interfaces challenging for users. Here are some practical guidelines to ensure more inclusive design for colorblind people. An upcoming part of Smart Interface Design Patterns.

Mobile Accessibility Barriers For Assistive Technology Users

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

Accessibility goes beyond making products user-friendly. It can significantly impact the quality of life for people with disabilities. Kate Kalcevich shares lessons she learned from assistive technology users — challenges and barriers they encounter on mobile devices.

This New Next.js Feature Makes Caching Much Easier

17 February 2024 @ 5:00 pm - Web Dev Simplified

Taking on a CSS Battle Live

15 February 2024 @ 8:17 pm - Kevin Powell

How Accessibility Standards Can Empower Better Chart Visual Design

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

Accessibility for data visualization extends well beyond web standards, at least if you’re trying to create an experience that’s actually useful. This article focuses on techniques for creating useful and accessible visualizations that extend well beyond compliance.

8 NEW JavaScript 2024 Features

13 February 2024 @ 5:00 pm - Web Dev Simplified

Can I recreate this tucked-corner photo effect with CSS?

13 February 2024 @ 1:53 pm - Kevin Powell

A Practical Guide To Designing For Children

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

How to design for children aged 3–12, with insights into user behavior, considerations for parents, and practical UX guidelines.

How To Draw Radar Charts In Web

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

A radar chart — also commonly called a spider chart — is yet another way to visualize data and make connections. Radar charts are inherently geometric, making them both a perfect fit and fun to make with CSS, thanks to the `polygon()` function. Read along as Preethi Sam demonstrates the process and sprinkles it with a pinch of JavaScript to make a handy, reusable component.

The Web Developer Job Market Is Broken

8 February 2024 @ 5:00 pm - Web Dev Simplified

Is this a good idea?

8 February 2024 @ 2:09 pm - Kevin Powell

Frequently Heard In My Beginning Front-End Web Development Class

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

What could we learn from entry-level students in front-end web development? As seasoned professionals, you might think you’ve seen it all, but the truth is that the newcomers are asking the most intriguing questions and making connections that those of us who have spent years on the front end may have never considered.

Web Development Is Getting Too Complex, And It May Be Our Fault

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

An overwhelming number of frameworks and tooling available today gives the impression that web development has gotten perhaps too complex. Juan Diego Rodríguez explores if web development really is that complex and, most importantly, how we can prevent it from getting even more difficult than we already perceive it to be.

Use this instead of media queries or container queries

6 February 2024 @ 5:26 pm - Kevin Powell

NEW Next.js 14 Course Announcement!

6 February 2024 @ 5:00 pm - Web Dev Simplified

A Guide To Designing For Older Adults

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

With one billion people aged 60 or older worldwide, inclusivity is more important than ever. Learn how to create digital experiences that empower independence and competence for older adults while enhancing usability for all. An upcoming part of Smart Interface Design Patterns.

Do You Know All 63 HTTP Status Codes?

2 February 2024 @ 5:07 pm - Web Dev Simplified

When Words Cannot Describe: Designing For AI Beyond Conversational Interfaces

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

As Artificial Intelligence evolves the computing paradigm, designers have an opportunity to craft more intuitive user interfaces. Maximillian Piras examines how the latest AI capabilities can reshape the future of human-computer interaction beyond conversation alone.

29 Days Of Inspiration (February 2024 Wallpapers Edition)

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

With February just around the corner, how about a little inspiration boost? We might have one for you: desktop wallpapers created with love by the community for the community. Enjoy!

How To Actually Get Hired In 2024

30 January 2024 @ 5:00 pm - Web Dev Simplified

Learn how to use Media queries & Container queries

30 January 2024 @ 2:00 pm - Kevin Powell

The Feature Trap: Why Feature Centricity Is Harming Your Product

29 January 2024 @ 3:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Most product teams commonly adopt a feature-centric mindset, finding them convenient for brainstorming, drafting requirement documents, and integrating into backlogs and ticketing systems. In this article, Andy Budd shows how fixation with features might be holding you back and how making a few small tweaks to your process could make an entire world of difference.

A Simple Guide To Retrieval Augmented Generation Language Models

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

Language models have shown impressive capabilities. But that doesn’t mean they’re without faults, as anyone who has witnessed a ChatGPT “hallucination” can attest. In this article, Joas Pambou diagnoses the symptoms that cause hallucinations and explains not only what RAG is but also different approaches for using it to solve language model limitations.

FREE 2024 Web Dev Roadmap

25 January 2024 @ 7:44 pm - Web Dev Simplified

CSS Blurry Shimmer Effect

25 January 2024 @ 3:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Taking inspiration from shadows, author Yair Even Or creates the same sort of thing, only with a blurring effect in place of the shadow. Read along for a step-by-step explanation of how it comes together using a combination of masks, gradients, and the good ol’ `backdrop-filter` property.

React Server Components Change Everything

23 January 2024 @ 5:00 pm - Web Dev Simplified

The AI Dilemma In Graphic Design: Steering Towards Excellence In Typography And Beyond

23 January 2024 @ 1:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

AI promises a major upheaval in typography, with designers finding themselves navigating both opportunities and challenges. How will it impact quality, design roles, and our use of type in the future? As we explore this new frontier, we realise that we are at a juncture as significant as Gutenberg’s press, set to redefine how we interact with text and visual communication.

Dialog Is My Favorite HTML Element And It Is Amazing

18 January 2024 @ 5:00 pm - Web Dev Simplified

The Ultimate Web Developer Roadmap For 2024

16 January 2024 @ 5:00 pm - Web Dev Simplified

The Complex But Awesome CSS border-image Property

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

The CSS `border-image` property is one of those properties you undoubtedly know exists but may not have ever reached for. In this article, Temani Afif demonstrates different approaches for using `border-image` to create clever decorative accents and shapes.

Top Front-End Tools Of 2023

11 January 2024 @ 6:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Useful front-end tools for CSS and JavaScript developers that were most popular last year and will help you speed up your development workflow. Let’s dive in!

Anchor Is The Best New CSS Feature Since Flexbox

11 January 2024 @ 5:00 pm - Web Dev Simplified

SolidStart: A Different Breed Of Meta-Framework

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

Are you ready for a little exercise of pulling a framework apart and putting the pieces back together? In this article, Atila Fassina explains how meta-frameworks have evolved around core libraries in their own unique ways.

The View Transitions API And Delightful UI Animations (Part 2)

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

The View Transitions API is a new — but game-changing — feature that allows us to do the types of reactive state-based UI and page transitions that have traditionally been exclusive to JavaScript frameworks. In the second half of this mini two-part series, Adrian Bece expands on the demos from the first article to demonstrate how the View Transitions API can be used to transition not just elements between two states but the transition between full views and pages in single-page and m

The Magic Of New Beginnings (January 2024 Wallpapers Edition)

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

Let’s start into the new year with a little inspiration boost: wallpapers created with love by the community for the community. Happy 2024!

Making Sense Of “Senseless” JavaScript Features

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

JavaScript may be the most popular client-side language in the world, but it’s far from perfect and not without its quirks. Juan Diego Rodriguez examines several “absurd” JavaScript eccentricities and explains how they made it into the language as well as how to avoid them in your own code.

The View Transitions API And Delightful UI Animations (Part 1)

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

The View Transitions API is a new — but game-changing — feature that allows us to do the types of reactive state-based UI and page transitions that have traditionally been exclusive to JavaScript frameworks. In the first part of this mini two-part series, Adrian Bece thoroughly explains why we need the API and demonstrates its basic usage.

New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem

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

Since the introduction of CSS viewport units in 2012, many of us have been using `width: 100vw` as a way to set an element’s width to the full width of the viewport. But, as Šime Vidas explains in this deep dive, `100vw` does not always represent the full width of the viewport due to differences in how browsers handle scrollbars.

Building Components For Consumption, Not Complexity (Part 2)

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

Part 2 concentrates on the key points from Luis’ framework and practical tips about managing a design system that should be both robust and easy to adopt.

CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study

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

Have you run into a situation where you need the padding of one element to align with the padding of another element? In this article, Brecht De Ruyte demonstrates the issue with a full-width slider component that breaks out of the main page container and shares a couple of techniques to keep it visually aligned with other elements on the page.

Building Components For Consumption, Not Complexity (Part 1)

11 December 2023 @ 9:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Design systems can be of immense help, but failure to adopt them invalidates the hard work that goes into building the thing in the first place! In this two-part series of articles, Luis shares his experience with design systems and how you can overcome the potential pitfalls.

Preparing For Interaction To Next Paint, A New Web Core Vital

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

Starting in March 2024, Interaction to Next Paint will formally replace First Input Delay as a Core Web Vital metric. Learn how the two metrics differ, why we needed a new way to measure interaction responsiveness, and how you can start optimizing the performance of your site now for a seamless transition to the latest Core Web Vital metric.

Five-Second Testing: Taking A Closer Look At First Impressions (Case Study)

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

Five-second testing is a popular method of usability research used in the industry, yet in essence, its core belief boils down to virtually a superstition. Eduard Kuric looks under the hood at how first impressions are affected by various factors and how UX researchers and product owners can ensure that the user’s first steps can get off on the right foot.

How Marketing Changed OOP In JavaScript

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

Discussing the decisions surrounding JavaScript prototypes, the article by Juan Diego Rodriguez scrutinizes their origin, examines missteps in the design, and explores how these factors have affected the way we write JavaScript today.

Recovering Deleted Files From Your Git Working Tree

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

Git is designed to assure us that we can track a project’s files at different points in time. But it doesn’t assure us that those files are always safe along the way. For those of you who have dealt with the sinking feeling that you’ve irrevocably deleted and lost files, Sanmi has a couple of approaches that, in the right situations, may help bring them back.

Cold Days, Shining Lights (December 2023 Wallpapers Edition)

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

Could there be a better way to welcome the new month than with a collection of desktop wallpapers? We’ve got some eye-catching designs to sweeten up the last few weeks of the year and, if you’re celebrating, to get you in the holiday mood.

Crafting A Killer Brand Identity For A Digital Product

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

In this article, Sasha guides you through crucial processes and factors to achieve a consistent brand presence across platforms. She offers an overview of the entire brand identity process, explores collaboration with UI teams, and provides essential details on the assets required for the successful implementation of a digital brand.

Passkeys: What the Heck and Why?

12 April 2023 @ 5:41 pm - CSS-Tricks

These things called passkeys sure are making the rounds these days. They were a main attraction at W3C TPAC 2022, gained support in Safari 16, are finding their way into macOS and iOS, and

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

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

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

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

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

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

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

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 …

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

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

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