WebDev Feed

Web development news

The easy way to make sense of complex selectors

4 October 2023 @ 1:00 pm - Kevin Powell

5 tips to getting better at CSS

3 October 2023 @ 1:24 pm - Kevin Powell

Animating Multi-Page Navigations with Browser View Transitions and Astro

3 October 2023 @ 12:55 pm - Codrops

A beginner-friendly guide that walks you through the use of the Browser View Transitions API with Astro for a smoother navigation experience.

The Problem With WordPress Is Positioning, Not Plugins

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

Geoff explores the often-overlooked divide between WordPress.org and WordPress.com, shedding light on the blurred lines between open-source ideals and commercial interests.

WaterBear: Building A Free Platform For Impactful Documentaries (Part 2)

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

In this second article of a two-part series, Adrian shares insights about building WaterBear — his first project as a lead developer — discussing the challenges his team encountered while building it and various accessibility and performance improvements they’ve made. You’ll get a peek at the inner workings of a team striving to find its groove to systematize the work.

Dancing Leaves And Spooky Fellows (October 2023 Wallpapers Edition)

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

How about a little inspiration boost? Well, we might have something for you: desktop wallpapers created with love by artists and designers from across the globe. They are available in versions with and without a calendar for October and can be downloaded for free. Enjoy!

Turns out I know less about HTML than I thought! 😅

29 September 2023 @ 1:36 pm - Kevin Powell

Collective #784

29 September 2023 @ 11:11 am - Codrops

State of HTML 2023 * Nue * The Design System Ecosystem

Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1)

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

This article is all about experimenting with modern CSS features. We will combine things like CSS masks, CSS variables, trigonometric functions, `@property`, and more to create a neat hover effect that would have been extremely difficult to do even a few years ago without the latest and greatest that CSS has to offer.

CSS nth-child Just Got 100x Better

28 September 2023 @ 4:00 pm - Web Dev Simplified

Create an infinite horizontal scroll animation

28 September 2023 @ 1:00 pm - Kevin Powell

Exploring Enhanced Patterns In WordPress 6.3

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

In this article, Ganesh Dahal explains how the features have evolved since reusable blocks were officially released in WordPress 5.0 — and how the two have converged in WordPress 6.3 to form a powerful feature capable of allowing content creators to sync content and design patterns consistently in pages and posts.

The border-radius feature most people don’t know about

27 September 2023 @ 1:00 pm - Kevin Powell

Some Ideas for Fullscreen Image Slideshow Animations

27 September 2023 @ 12:51 pm - Codrops

A collection of ideas for slideshow animations on fullscreen images.

Clean Code Is Killing Your Projects

26 September 2023 @ 4:00 pm - Web Dev Simplified

How to make your own frontend roadmap

26 September 2023 @ 1:50 pm - Kevin Powell

Getting Started With Neon Branching

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

Branches are a really nice (and safe) way to configure or reconfigure your database without fear of screwing up the production database. Let’s take a closer look at how branching works with [Neon](https://bit.ly/46cEgX1), and the good news is, you probably already know how it works!

Smashing Podcast Episode 65 With Alex Older: How Do You Run A Grassroots Conference?

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

We’re talking about running grassroots conferences and meet-ups. What does it take to organize a small industry event for your community? Drew McLellan talks to WDC’s Alex Older to find out.

WaterBear: Building A Free Platform For Impactful Documentaries (Part 1)

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

Adrian’s kicking off a two-part series, sharing his journey as a lead developer. In the process, you will learn about the lessons and insights Adrian gained at work, including the strategies that went into the technical stack of the project and what it looks like to collaborate with a team he is leading for the first time.

Inspirational Websites Roundup #50

25 September 2023 @ 8:40 am - Codrops

A fresh, hand-picked selection of websites highlighting outstanding web designs.

The Path To Awesome CSS Easing With The linear() Function

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

With the new CSS `linear()` easing function on the horizon, the possibilities of what we can do to create natural-feeling animations and transitions in the future are greatly expanded. Jhey Tompkins looks at the current state of CSS easing in this article and demonstrates what we can expect from `linear()`, including handy tools to get your hands on it today.

Collective #783

22 September 2023 @ 8:55 am - Codrops

Postmarks * A Gentle Study of Raymarching * Vue3 + TresJS Starter

This CSS Feature Replaces CSS-In-JS

21 September 2023 @ 4:00 pm - Web Dev Simplified

I just wasted a day on this code, was it worth it?

21 September 2023 @ 12:57 pm - Kevin Powell

UI Interactions & Animations Roundup #36

21 September 2023 @ 9:43 am - Codrops

Get inspired by selected motion designs and UI interaction works of amazing designers on Dribbble.

Is this the strangest CSS solution out there?

20 September 2023 @ 1:27 pm - Kevin Powell

Facilitating Inclusive Online Workshops (Part 2)

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

To help ensure the success of a workshop, Ben Shih introduces the concept of an inclusive workshop. In Part 2 of the series, you will continue to delve deeper into several key principles and guidelines that you can follow during and after the workshop to encourage an inclusive atmosphere.

The Best React State Management Solution Has Been There All Along

19 September 2023 @ 4:00 pm - Web Dev Simplified

Quick guide to CSS focus states

19 September 2023 @ 1:00 pm - Kevin Powell

How Smashing Magazine Uses TinaCMS To Manage An Editorial Workflow

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

This article is a peek behind the curtain of how content is managed here at Smashing Magazine. In it, you’ll get a tour of an article’s full lifecycle, from a basic outline to the sort of thing you’re reading right this second.

5 Essential Kendo UI for Angular Components You Need to Know

18 September 2023 @ 9:38 am - Codrops

The Kendo UI for Angular components library contains over 120 native components, including controls, navigation, layout tools, and complex data grids. Top five Kendo UI components users love for avoiding learning and development time.

Collective #782

15 September 2023 @ 9:56 am - Codrops

Postmarks * A Gentle Study of Raymarching * Vue3 + TresJS Starter

Revealing Images With CSS Mask Animations

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

Let’s play with images and experiment with CSS masks. The idea is fairly simple: take a single `` tag and harness the power of CSS to accomplish complex hover transitions. Through different demos, you will see how CSS masks combined with gradients allow us to create fancy effects — with efficient, reusable code.

NEW React Hooks Saves 1K+ Lines Of Code

14 September 2023 @ 4:00 pm - Web Dev Simplified

Can I copy this cool effect with CSS?

14 September 2023 @ 1:11 pm - Kevin Powell

Why Gradients can be better than SVGs for patterns

13 September 2023 @ 1:00 pm - Kevin Powell

Facilitating Inclusive Online Workshops (Part 1)

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

Running a workshop can be an effective alternative to traditional, long-standing meetings. To help ensure its success, Ben Shih introduces the concept of an inclusive workshop. In Part 1 of the series, you discover the fundamentals of inclusivity and get some solid guidance on how to plan an inclusive remote workshop.

Grid Item Hover Effect

13 September 2023 @ 9:32 am - Codrops

Three hover effects based on a grid design by Alena Orlova.

Learning To Code Is Easy

12 September 2023 @ 4:00 pm - Web Dev Simplified

How to get started with VS Code

12 September 2023 @ 11:47 am - Kevin Powell

Gradients, Blend Modes, And A Really Cool Hover Effect

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

Gradients are a powerful CSS feature. We use them for texture, depth, and even to hide parts of elements with CSS masking. This article covers another interesting way to use gradients — as a hover effect that affects the appearance of other elements around the hovered element.

Rediscovering The Joy Of Design

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

Pratik Joglekar takes a philosophical approach to remind designers about the lost joy within themselves by effectively placing massive importance on mindfulness, introspection, and forward-looking. Without joy, the work we do would feel meaningless. To prevent it from happening, check out a few ideas that would help rediscover that spark of joy.

Inspirational Websites Roundup #49

8 September 2023 @ 10:58 am - Codrops

A thoughtfully curated collection of websites showcasing exceptional web designs.

NEW Way To Create Variables In JavaScript

7 September 2023 @ 4:00 pm - Web Dev Simplified

Bring a smile to your users’ face with a confetti celebration

7 September 2023 @ 12:58 pm - Kevin Powell

The scrollbar control you didn’t know you needed #css

6 September 2023 @ 1:00 pm - Kevin Powell

Long Live The Test Pyramid

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

Is the Test Pyramid really dead? Discover the more contemporary testing strategies and evaluate the Test Pyramid’s relevance in today’s software development practices.

5+ CSS Features That Will Change How You Code

5 September 2023 @ 4:00 pm - Web Dev Simplified

Beginner’s guide to styling text with CSS

5 September 2023 @ 2:13 pm - Kevin Powell

Generating Real-Time Audio Sentiment Analysis With AI

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

In this article, Joas Pambou builds the tool to provide a sentiment score in **real-time** with enhanced user experience by providing multilingual support. You will use an OpenAI library called Whisper that transcribes audio files into text and detects the language, and Gradio, a UI framework, to establish the interface.

New useFormStatus React Hook

31 August 2023 @ 4:00 pm - Web Dev Simplified

A September Of Never Ending Adventures (2023 Wallpapers Edition)

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

Let’s get ready for September with some fresh wallpaper designs! Created with love by artists and designers from across the globe, the wallpapers in this collection come in versions with and without a calendar. Enjoy!

CSS Anchor Is The Best New CSS Feature Since Flexbox

29 August 2023 @ 4:00 pm - Web Dev Simplified

Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS

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

The CSS Color Module Level 4 specification defined a slew of new color features when it became a candidate recommendation in 2022, including Oklab and Oklch, which have widened the field of color we have to work with. Explore the Oklch color space and how to start using it in CSS today.

Improving The Double Diamond Design Process

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

The so-called “Double Diamond” is a great way of visualizing an ideal design process — but it’s just not the way most companies deliver new projects or services. Andy Budd proposes a new “Double Diamond” idea that better aligns with the way work actually gets done and highlights the place where design has the most leverage.

Help Me Teach You TypeScript

24 August 2023 @ 4:00 pm - Web Dev Simplified

A Few Interesting Ways To Use CSS Shadows For More Than Depth

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

We often think of shadows in CSS as something to reach for when we want to add depth to a design. But shadows can be used for more than depth. Let’s experiment with different shadows — two CSS properties and a filter — to make interesting hover effects, different text styles, and even casting shadows on other shadows.

NEW Way To Create Variables In JavaScript

22 August 2023 @ 4:00 pm - Web Dev Simplified

Better Context Menus With Safe Triangles

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

Discover how to improve the user experience of nested menus and tackle a minor yet common issue with them when the user’s pointer leaves the menu item for a moment, and the nested menu goes away, requiring the user to re-hover and try again. A well-known concept called the “safe triangle” solves this problem.

Stop Using {} In TypeScript

17 August 2023 @ 4:00 pm - Web Dev Simplified

I Cannot Believe React Made A Hook For This

15 August 2023 @ 4:00 pm - Web Dev Simplified

Modern Methods For Improving Drupal’s Largest Contentful Paint Core Web Vital

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

The background image used in the hero component, which is slow to load, is a very common problem with any component that uses a large image file as a background image. In this article, Mike Herchel walks you through how to tackle this common performance issue using modern techniques.

Knip: An Automated Tool For Finding Unused Files, Exports, And Dependencies

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

Most of the projects have at least a few unused files, exports, and dependencies lying around, often because it’s difficult knowing when one thing relies on another and scary removing something you’re not sure is in use. Lars Kappert shares a tool he’s been working on that offers a solution.

Designing Accessible Text Over Images: Best Practices, Techniques And Resources (Part 2)

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

In part 2 of the series, Hannah Milan reviews various accessible text over images techniques for designing your content, including framing the image, soft-colored gradients technique, text styles and text position, solid color shapes, and use of colored backgrounds.

Running A Page Speed Test: Monitoring vs. Measuring

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

What does your performance “stack” look like? There are all kinds of tools available for measuring page speed, but what data and assumptions do they use to measure performance? And speaking of *measuring* performance, there’s quite a difference between that and *monitoring* performance. Let’s dig in!

Using Friction As A Feature In Machine Learning Algorithms

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

Friction often has a negative connotation in user experience design, but it actually has many benefits. Its best-known use case is mitigating unintended consequences in high-risk scenarios, yet it has a new place in the age of artificial intelligence. Adding strategic friction to interfaces can lead to profound efficiency gains in machine learning algorithms.

Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1)

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

In this two-part series of articles, Hannah Milan covers the best practices when using various accessible text over images techniques for designing your web and mobile app content.

How We Optimized Performance To Serve A Global Audience

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

Liran Cohen and the team at Bookaway, a travel booking service, dramatically improved their site’s performance by auditing Core Web Vitals. In this article, Liran shares his team’s process for auditing and monitoring Web Vitals and the effort it took to dramatically improve Bookaway’s performance — and the benefits that came with it.

Smashing Podcast Episode 64 With Alvin Bryan: What Is A Headless CMS?

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

We’re talking about headless content management systems. What are they, and how do they differ from more traditional systems? Drew McLellan talks to Alvin Bryan to find out.

CSS And Accessibility: Inclusion Through User Choice

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

In this article, Carie Fisher outlines which CSS media features are available for detecting user preferences and how they are used to design and build more inclusive user experiences.

Living In The Moment (August 2023 Wallpapers Edition)

31 July 2023 @ 9:50 am - Articles on Smashing Magazine — For Web Designers And Developers

New month, new wallpapers! In this post, you’ll find unique and inspiring wallpapers for August 2023. Created with love by the community for the community, they come in versions with and without a calendar. Enjoy!

How To Define An Array Of Colors With CSS

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

Join Temani Afif on experiment with modern CSS features to create an array of colors. The goal is to define a comma-separated list of colors and iterate through them using an index.

How To Use Artificial Intelligence And Machine Learning To Summarize Chat Conversations

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

In this article, we’ll explore how to build a chat summarizer using the Cohere API and deploy it as a web application using Gradio.[ Cohere](https://cohere.com/) is an AI platform that provides state-of-the-art natural language processing models for a variety of tasks, including summarization. We’ll cover the steps involved in training the summarizer using sample chat conversations, interacting with the Cohere API to generate summaries, and creating a user-friendly interface using [Gradio](h

Modern Technology And The Future Of Language Translation

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

The field of language translation has never been more exciting. Explore the evolution of language translation platforms, how we got to where we are today, and what advancements we can look forward to in the coming years.

Recreating YouTube’s Ambient Mode Glow Effect

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

In this article, Adrian deconstructs YouTube’s “Ambient Mode” feature and how HTML `` and the `requestAnimationFrame` function are used to create the glowing effect.

The Art Of Looking Back: A Critical Reflection For Individual Contributors

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

Discover the importance of critical reflective practice and challenge some beliefs about reflection and its role in our work and growth. Kristian Mikhel suggests a critical reflective routine for individual contributors and gives some practical recommendations that will make reflection meaningful and actionable.

Designing Age-Inclusive Products: Guidelines And Best Practices

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

With an estimated one in every eight individuals worldwide surpassing the age of 60, who are actively adopting online shopping, the need for user-friendly interfaces tailored to their needs becomes apparent. Explore the guidelines to help you design inclusive products for all, particularly for an older audience and your future self.

Writing CSS In 2023: Is It Any Different Than A Few Years Ago?

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

CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet).

How To Create A Rapid Research Program To Support Insights At Scale

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

Accelerate your organization’s growth and innovation with the power of Rapid Research. From inception to implementation, here is the step-by-step roadmap on how to build the program from scratch and uncover the untapped ROI opportunities waiting to propel your initiatives to new heights.

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