WebDev Feed

Web development news

MDX Or: How I Learned To Stop Worrying And Love Multimedia Writing

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

Balancing the age-old simplicity of words on paper with the myriad creative possibilities of the web is a tension as old as the web itself. Leaning into that overlap can bring new dimensions not just to the things we write but also to how we write them.

Collective #849

21 June 2024 @ 11:00 am - Codrops

5 hard truths for young designers * Anchor position tool * “Dots” Custom Element

Naming things just got easier thanks to @scope

20 June 2024 @ 3:15 pm - Kevin Powell

Uniting Web And Native Apps With 4 Unknown JavaScript APIs

20 June 2024 @ 11:00 am - Articles on Smashing Magazine — For Web Designers And Developers

Have you heard of the Screen Orientation API? What about the Device Orientation API, Vibration API, or the Contact Picker API? Juan Diego Rodriguez is interested in these under-the-radar web features and discusses how they can be used to create more usable and robust progressive web apps if and when they gain broader support.

Hover Animations for Terminal-like Typography

19 June 2024 @ 1:53 pm - Codrops

Some fun Terminal-like character hover animations for lines of text.

Animate a sibling on scroll with only 5 lines of CSS

19 June 2024 @ 1:00 pm - Kevin Powell

T-Shaped vs. V-Shaped Designers

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

Job openings typically cast a very restrictive frame for candidates, with long lists of expectations and requirements. But what if this narrow focus can overlook the value of “V”-shaped designers who excel by crossing boundaries, connecting dots, and innovating beyond rigid boxes?

Next.js 15 Ruins Caching Even More

18 June 2024 @ 4:00 pm - Web Dev Simplified

Collective #848

18 June 2024 @ 11:00 am - Codrops

The popover drama * Steadfast Self-Hosting * Creating Daylight: The Devex

Inspirational Websites Roundup #61

18 June 2024 @ 9:32 am - Codrops

Check out our fresh picks of websites with awesome designs to keep you in the loop with the latest trends.

Useful Email Newsletters For Designers

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

Whether you want to take your user research skills to the next level, get better at UX writing, or stay up-to-date on the latest design trends, a newsletter is the perfect opportunity to get the best of the best resources delivered straight to your inbox on a regular basis. In this post, we highlight some design newsletters that you might want to consider subscribing to.

How to Visual Test Websites with Chromatic and Playwright

17 June 2024 @ 9:22 am - Codrops

Learn how to visually test websites using Chromatic and Playwright to ensure that web interfaces remain visually consistent and free of bugs.

Collective #847

14 June 2024 @ 11:00 am - Codrops

Wiggle Bones for Three.js * A modern approach to browser support * How Deep is Your DOM?

What Are CSS Container Style Queries Good For?

14 June 2024 @ 11:00 am - Articles on Smashing Magazine — For Web Designers And Developers

What are these CSS Container Style Queries, and why should you use them? Juan Diego Rodríguez delves deeply into style queries, and not at the syntax level, but at what exactly they are solving and what sort of use cases you would find yourselves reaching for them in your work if and when they gain browser support.

2-Page Login Pattern, And How To Fix It

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

The 2-page login pattern is becoming pervasive. Here are the reasons behind this design choice and alternative solutions to create a more efficient and user-friendly authentication experience.

JavaScript Promises Crash Course

12 June 2024 @ 1:48 pm - Kevin Powell

The Scent Of UX: The Unrealized Potential Of Olfactory Design

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

Kristian Mikhel covers various practical applications of scents in product experience, from immersive entertainment to healing spaces and medical appliances, and how designers can drive innovation across spheres and disciplines.

Shape Lens Blur Effect with SDFs and WebGL

12 June 2024 @ 9:47 am - Codrops

An introduction on harnessing the power of Signed Distance Fields (SDFs) to draw shapes in WebGL and create interactive effects, such as lens blur.

How To Hack Your Google Lighthouse Scores In 2024

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

Do perfect Lighthouse scores mean the performance of your website is perfect? As it turns out, Lighthouse is influenced by a number of things that can be manipulated and bent to make sites seem more performant than they really are, as Salma Alam-Naylor demonstrates in several experiments.

If You Cannot Name All 5 JS Scopes You Need To Watch This Video

11 June 2024 @ 4:00 pm - Web Dev Simplified

Collective #846

11 June 2024 @ 11:00 am - Codrops

The Gap * Design outside the computer * Why, after 6 years, I’m over GraphQL * Fusion

Case Study: ToyFight — 2024

11 June 2024 @ 10:16 am - Codrops

A snapshot of how the new ToyFight site was designed and developed.

CSS Container Queries

10 June 2024 @ 4:12 pm - CSS-Tricks

The main idea of CSS Container Queries is to register an element as a “container” and apply styles to other elements when the container element meets certain conditions. CSS Container Queries originally published on CSS-Tricks, which is part of the

Useful CSS Tips And Techniques

7 June 2024 @ 11:00 am - Articles on Smashing Magazine — For Web Designers And Developers

The times for CSS have probably never been more exciting than today. In this quick read, we’ve got some useful CSS tips and techniques for you that you can apply to your work right away. Let’s dive deeper into self-modifying CSS variables, hanging punctuation, and more.

Collective #845

7 June 2024 @ 11:00 am - Codrops

Three.js Shading Language * New magic for animations in CSS * Progressively Enhanced Popover Toggletips

We can now transition to and from display: none

6 June 2024 @ 1:48 pm - Kevin Powell

Presenting UX Research And Design To Stakeholders: The Power Of Persuasion

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

There’s more to achieving good UX than research and design. We need to effectively communicate our ideas to gain buy-in from key stakeholders. Victor covers how UX practitioners can harness the power of persuasion and other tactics from the field of communication when presenting research findings and design concepts to key stakeholders.

The Most Important Skill You Never Learned

4 June 2024 @ 4:00 pm - Web Dev Simplified

A great way to keep up with front-end development

4 June 2024 @ 1:00 pm - Kevin Powell

Scaling Success: Key Insights And Practical Takeaways

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

The web is still a young platform, and we’re only now beginning to recognize what “success” looks like for large projects. In his recent Smashing book, [Success at Scale](https://www.smashingmagazine.com/printed-books/success-at-scale/), Addy Osmani presents practical case studies featuring the web’s most renowned companies and their efforts to make big changes to existing apps and sites. In this article, Addy shows some of the key insights he has learned.

CSS Length Units

3 June 2024 @ 7:22 pm - CSS-Tricks

A comprehensive guide covering nine types of lengths that CSS uses to size elements in terms of dimensions, space, time, and even sound. CSS Length Units originally published on CSS-Tricks, which is part of the Digit

Ice Cream Ahead (June 2024 Wallpapers Edition)

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

Let’s kick off June with some fresh inspiration! Artists and designers from across the globe once again tickled their creativity to celebrate the beginning of the new month with a collection of beautiful and unique wallpaper calendars.

In Praise Of The Basics

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

What does it mean to learn the “basics”, or fundamentals, of front-end web development? Is starting with HTML and CSS still the best entry point to learn how to make websites and apps when we have a seemingly endless supply of frameworks? Geoff Graham thinks so and discusses why you might consider going “back to basics” to start or move forward in your career.

Decision Trees For UI Components

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

Imagine finally resolving never-ending discussions about UI decisions for good. Here are some practical examples of decision trees for UI components and how to use them effectively. An upcoming part of [Smart Interface Design Patterns](https://smart-interface-design-patterns.com).

The different types of JavaScript functions explained

29 May 2024 @ 2:25 pm - Kevin Powell

This New React Feature Will Make Your App 20% Faster

28 May 2024 @ 4:57 pm - Web Dev Simplified

The Era Of Platform Primitives Is Finally Here

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

Application frameworks have built whole ecosystems on top of them. Let’s take a closer look at serverless platforms such as Netlify’s [Platform Primitives](https://www.netlify.com/platform/primitives) and explore how they can increase our productivity with a serverless fullstack experience.

Switching It Up With HTML’s Latest Control

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

After years of relying on checkbox hacks to create a “switch” control for forms that toggle between two states, HTML may be gaining a native way to go about it by adding a `switch` attribute to checkbox inputs. Daniel Yuschick walks us through a first impression of switch controls and discusses current and ongoing considerations that need to be explored further before it is ready for prime time.

Transitioning to and from display none is easy now!

23 May 2024 @ 1:00 pm - Kevin Powell

Best Practices For Naming Design Tokens, Components And Variables

23 May 2024 @ 9:00 am - Articles on Smashing Magazine — For Web Designers And Developers

How can we get better at naming? This post is dedicated to naming conventions, tips, and real-world examples that help you name things in a robust and flexible way.

Modern CSS Layouts: You Might Not Need A Framework For That

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

It’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts. Brecht De Ruyte demonstrates four CSS utility classes (plus a bonus) using techniques that allow them to be used practically anywhere you need a particular layout — be it Grid or Flexbox — with configurable options.

Why Every Computer Fails Basic Math

21 May 2024 @ 4:00 pm - Web Dev Simplified

Hidden vs. Disabled In UX

21 May 2024 @ 8:20 am - Articles on Smashing Magazine — For Web Designers And Developers

Should you hide or disable a feature? You’ve probably been there before. Here are some considerations for hiding versus disabling, along with possible alternatives to improve UX. An upcoming part of [Smart Interface Design Patterns](https://smart-interface-design-patterns.com).

Building A User Segmentation Matrix To Foster Cross-Org Alignment

17 May 2024 @ 5:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Many organizations prioritize internal structures and services over customer-centricity, hindering effective decision-making. Through a case study, Talke Hoppmann-Walton advocates for a shift towards an outside-in perspective and proposes the use of a user segmentation matrix to foster alignment across departments and prioritize customer needs.

Beyond CSS Media Queries

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

Juan Diego Rodriguez explains why media queries still occupy a vital role in responsive layouts; only they are now one tool in a larger toolbox with modern techniques that are best when used together.

Avoid these 5 beginner CSS mistakes

16 May 2024 @ 1:59 pm - Kevin Powell

Fix ugly text wrapping with this simple CSS trick

15 May 2024 @ 1:17 pm - Kevin Powell

Transforming The Relationship Between Designers And Developers

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

Is there such a thing as harmony between designers and developers in the workplace, and if so, how can it be achieved? In this article, Chris Day explores the challenges of effective collaboration, outlines the key factors at play, and (hopefully!) empowers you to find the right solutions to help you and your team deliver to their full potential.

It's time for a change...

14 May 2024 @ 1:09 pm - Kevin Powell

Why Designers Aren’t Understood

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

How do we conduct UX research when there is no or only limited access to users? Here are some workarounds to run UX research or make a strong case for it. An upcoming part of [Smart Interface Design Patterns](https://smart-interface-design-patterns.com).

The Times You Need A Custom @property Instead Of A CSS Variable

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

Preethi Sam walks through an example that demonstrates where custom properties are more suitable than variables while showcasing the greater freedom and flexibility that custom properties provide for designing complex, refined animations.

The Modern Guide For Making CSS Shapes

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

In this comprehensive guide, Temani Afif explores different techniques for creating common shapes with the smallest and most flexible code possible.

A flexbox trick to improve text wrapping

9 May 2024 @ 2:06 pm - Kevin Powell

The Forensics Of React Server Components (RSCs)

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

React Server Components (RSCs) combine the best of client-side rendering, and author Lazar Nikolov thoroughly examines how we got here with a deep look at the impact that RSCs have on the page load timeline.

How This Test Saved Kent’s Site

7 May 2024 @ 4:00 pm - Web Dev Simplified

How To Run UX Research Without Access To Users

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

How do we conduct UX research when there is no or only limited access to users? Here are some workarounds to run UX research or make a strong case for it. An upcoming part of Smart Interface Design Patterns.

How To Harness Mouse Interaction Data For Practical Machine Learning Solutions

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

In this article, Eduard Kuric discusses mouse interaction data, what kind of magic can be done with it, and some of the hidden pitfalls to watch out for so you get a head start incorporating them in your solutions.

Combining CSS :has() And HTML <select> For Greater Conditional Styling

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

Amit Sheen demonstrates using `:has()` to apply styles conditionally when a certain `` in a `` element is chosen by the user and how we gain even more conditional styling capabilities when chaining `:has()` with other pseudo-classes, such as `:not()` — no JavaScript necessary.

I Love This CSS Focus Hack

30 April 2024 @ 4:00 pm - Web Dev Simplified

Longing For May (2024 Wallpapers Edition)

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

May is almost here, so what better occasion could there be for some fresh and inspiring desktop wallpapers? Created with love by artists and designers from across the globe, the wallpapers in this post come in versions with and without a calendar. Enjoy!

Lessons Learned After Selling My Startup

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

Business acquisitions are common but often shrouded in mystery because they happen behind closed doors. In this article, Yaakov details the story of his company and the journey it took him on, shedding light on the process of selling a business and what he learned from the experience.

The End Of The Free Tier

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

Free-tier pricing is a common marketing strategy. “Free” gets people in the door and allows them to settle in and see how things work. But, as Juan Diego Rodriguez explains, the practice of free *tiers* is often conflated with free *trials*. And while the distinction may be nuanced, the consequences of sunsetting free-tier pricing may be huge.

Conducting Accessibility Research In An Inaccessible Ecosystem

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

Conducting UX research that includes participants with a variety of disabilities is vital to building inclusive technology, but most prototypes used for testing are inaccessible. Rather than continuing to leave out feedback from disabled consumers, which ultimately leads to exclusive technology, researchers must get creative in their workarounds and be relentless in their efforts.

How To Make Beautiful Charts In Next.js

24 April 2024 @ 4:04 pm - Web Dev Simplified

Using AI For Neurodiversity And Building Inclusive Tools

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

This article illustrates how AI can be leveraged to build tools that can be inclusive with a little bit of an additional effort.

F-Shape Pattern And How Users Read

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

Scrolling, scanning, skipping: How do users consume content online? Here’s what you need to know about reading behavior and design strategies to prevent harmful scanning patterns. An upcoming part of Smart Interface Design Patterns.

Demystifying Screen Readers: Accessible Forms & Best Practices

19 April 2024 @ 2:26 pm - CSS-Tricks

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out “Managing User Focus with :focus-visible“. In this post we are going to look at using a … Demystifying Screen Readers: Accessible Forms & Best P

How To Work With GraphQL In WordPress In 2024

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

What options do we have for integrating GraphQL with WordPress in 2024? Leonardo Losoviz describes the developments that have taken place in this space over the last three years.

Converting Plain Text To Encoded HTML With Vanilla JavaScript

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

What do you do when you need to convert plain text into formatted HTML? Perhaps you reach for Markdown or manually write in the element tags yourself. Or maybe you have one or two of the dozens of online tools that will do it for you. In this tutorial, Alexis Kypridemos picks those tools apart and details the steps for how we can do it ourselves with a little vanilla HTML, CSS, and JavaScript.

This Ancient CSS Feature Is Incredibly Useful

16 April 2024 @ 4:00 pm - Web Dev Simplified

How To Monitor And Optimize Google Core Web Vitals

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

The three Core Web Vitals metrics don’t only tell you how visitors experience your website but also impact your Google search result rankings. In this article, we’ll look at what Core Web Vitals are, how they are measured, and how you can use DebugBear to monitor them continuously.

Sliding 3D Image Frames In CSS

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

Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup and pseudo-elements in the styles to pull it off. Temani Afif applies 3D effects and sliding transitions to a single `` using clever CSS techniques that demonstrate advanced, modern styling practices.

Penpot’s CSS Grid Layout: Designing With Superpowers

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

Penpot helps designers and developers work better together by offering a free, open-source design tool based on open web standards. Today, let's explore Penpot’s latest feature, CSS Grid Layout. Penpot’s latest release is about efficiency and so much more. It gives designers superpowers and a better place at the table. Excited? Let’s take a look at it together.

How To Build A Next.js Coupon System Like A Senior Developer

9 April 2024 @ 4:00 pm - Web Dev Simplified

Managing User Focus with :focus-visible

5 April 2024 @ 10:13 pm - CSS-Tricks

This is going to be the 2nd post in a small series we are doing on form accessibility. If you missed the first post, check out Accessible Forms with Pseudo Classes. In this post we are going to look … Managing User Focus with :focus-visible

Learn Drizzle In 60 Minutes

2 April 2024 @ 4:00 pm - Web Dev Simplified

The Power of :has() in CSS

30 March 2024 @ 2:07 am - CSS-Tricks

Hey all you wonderful developers out there! In this post we are going to explore the use of :has() in your next web project. :has() is relatively newish but has gained popularity in the front end community by delivering control … The Power of :has() in CSS originally published on CSS-Tricks, which is part of the

Accessible Forms with Pseudo Classes

22 March 2024 @ 6:52 pm - CSS-Tricks

Hey all you wonderful developers out there! In this post, I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within. The :focus-within class allows for … Accessible Forms with Pseudo Classes originally published on CSS-Tricks

Stop Trying Out New Programming Tools

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

Will Devin AI Take Your Job?

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

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