Web development news
Collective #856
26 July 2024 @ 11:00 am - Codrops
Misconceptions about view transitions * The Right Kind of Stubborn * CSS Grid Generator
Case Study: Rogier de Boevé Portfolio — 2024
26 July 2024 @ 9:57 am - Codrops
Insights into the creative process and technical details behind the portfolio of Rogier de Boevé, a Belgium-based creative developer and digital designer.
100% Test Coverage is Bad
25 July 2024 @ 4:00 pm - Web Dev Simplified
Pop(over) the Balloons
25 July 2024 @ 1:31 pm - CSS-Tricks
I’ve always been fascinated with how much we can do with just HTML and CSS. The new interactive features of the Popover API are yet another example of just how far we can get with those two languages alone.
You …
Pop(over) the Balloons originally published on CSS-Tricks, which is part of the
A background-image trick most people don't know about
25 July 2024 @ 1:00 pm - Kevin Powell
Taking on HTML & CSS challenges
24 July 2024 @ 8:03 pm - Kevin Powell
Integrating Image-To-Text And Text-To-Speech Models (Part 1)
24 July 2024 @ 10:00 am - Articles on Smashing Magazine — For Web Designers And Developers
Joas Pambou built an app that integrates vision language models (VLMs) and text-to-speech (TTS) AI technologies to describe images audibly with speech. This audio description tool can be a big help for people with sight challenges to understand what’s in an image. But how this does it even work? Joas explains how these AI systems work and their potential uses, including how he built the app and ways to further improve it.
What You Can Learn From CrowdStrike Breaking The World
23 July 2024 @ 4:00 pm - Web Dev Simplified
On Ne Change Pas: The Creative Work Process Behind a Stunning UI Animation
23 July 2024 @ 10:31 am - Codrops
In this article, we take you behind the scenes to explore the creation process of an intriguing animation.
Alvaro Montoro: CSS One-Liners to Improve (Almost) Every Project
22 July 2024 @ 2:38 pm - CSS-Tricks
These sorts of roundups always get me. My wife will flip through Zillow photos of the insides of homes for hours because she likes seeing how different people decorate, Feng Shui, or what have you. That’s her little dip into …
Alvaro Montoro: CSS One-Liners to Improve (Almost) Every Project originally published on
How To Debug React Apps Like A Senior Developer
20 July 2024 @ 4:00 pm - Web Dev Simplified
CSS Stuff I’m Excited After the Last CSSWG Meeting
19 July 2024 @ 5:16 pm - CSS-Tricks
From June 11–13, the CSS Working Group (CSSWG) held its second face-to-face meeting of the year in Coruña, Spain, with a long agenda of new features and improvements coming to language. If 2023 brought us incredible advances like …
CSS Stuff I’m Excited After the Last CSSWG Meeting originally published on
Collective #855
19 July 2024 @ 5:04 pm - Codrops
The Magic of Clip Path * Framer Motion Theatre * State of Text Rendering 2024
Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size
19 July 2024 @ 1:00 pm - Articles on Smashing Magazine — For Web Designers And Developers
WCAG provides guidance for making interactive elements more accessible by specifying minimum size requirements. In this article, Eric Bailey discusses the nuances of interactive element sizes and clarifies what it looks like to provide accessible interactive experiences using WCAG-compliant target sizes.
If You Use Tailwind You Need This Plugin
18 July 2024 @ 4:00 pm - Web Dev Simplified
Quick trick to boost specificity
18 July 2024 @ 1:00 pm - Kevin Powell
How to Create Distortion and Grain Effects on Scroll with Shaders in Three.js
18 July 2024 @ 12:12 pm - Codrops
Learn how to create distortion and grain effects on scroll using Three.js shaders, syncing HTML images with WebGL.
Build Design Systems With Penpot Components
18 July 2024 @ 10:00 am - Articles on Smashing Magazine — For Web Designers And Developers
In today’s turbulent landscape of design, Penpot stands out with its commitment to open-source, free unlimited access, and its unique, robust features. An example could be its new components system that takes another leap forward in aligning design with code. Let's dive into how it empowers both designers and developers to create more maintainable and scalable design systems.
Sara Joy: Everybody’s Free (To Write Websites)
17 July 2024 @ 6:36 pm - CSS-Tricks
Sara Joy’s adaptation of the song “Everybody’s Free (To Wear Sunscreen)” (YouTube) originally by Baz Luhrman with lyrics pulled directly from Mary Schmich‘s classic essay, “W
Design to Code // HTML & CSS from scratch // Frontend Mentor Form
17 July 2024 @ 1:34 pm - Kevin Powell
We Can Finally Animate height: auto; in CSS!
16 July 2024 @ 4:00 pm - Web Dev Simplified
CSS Selectors
15 July 2024 @ 4:13 pm - CSS-Tricks
A complete guide covering all of the various methods we have to select elements in CSS and how to use them for applying styles.
CSS Selectors originally published on CSS-Tricks, which is part of the DigitalOcean fam
How to Create a Liquid Raymarching Scene Using Three.js Shading Language
15 July 2024 @ 10:33 am - Codrops
An introduction to Raymarching using the power of Signed Distance Fields (SDFs) and simple lighting to create a liquid shape effect.
How To Design Effective Conversational AI Experiences: A Comprehensive Guide
15 July 2024 @ 9:00 am - Articles on Smashing Magazine — For Web Designers And Developers
This in-depth guide takes you through the three crucial phases of conversational search, revealing how users express their needs, explore results, and refine their queries. Learn how AI agents can overcome communication barriers, personalize the search experience, and adapt to evolving user intent.
100% Code Coverage Is Useless
13 July 2024 @ 4:00 pm - Web Dev Simplified
Collective #854
12 July 2024 @ 11:00 am - Codrops
How to use container queries now * Exploring Randomness In JavaScript * Drop it! * Vizzu
I Can’t Believe TypeScript Finally Fixed This
11 July 2024 @ 4:00 pm - Web Dev Simplified
One-liner to fix shadows, borders, and gradients that break multiple lines
11 July 2024 @ 1:03 pm - Kevin Powell
Stop the Flexbox for 1D, Grid for 2D layout nonsense
10 July 2024 @ 5:38 pm - Kevin Powell
When Friction Is A Good Thing: Designing Sustainable E-Commerce Experiences
10 July 2024 @ 1:00 pm - Articles on Smashing Magazine — For Web Designers And Developers
Today, UX design contributes to the problem of excessive consumption through persuasive e-commerce practices and designing for companies with linear and exploitative business models. Anna Rátkai explores practical steps we can take to reduce material consumption and the massive environmental impact that comes along with it by designing mindful shopping experiences.
Learn Closures In 13 Minutes
9 July 2024 @ 4:00 pm - Web Dev Simplified
“If” CSS Gets Inline Conditionals
9 July 2024 @ 3:18 pm - CSS-Tricks
A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5 specification. It was Lea Verou’s X post that same day that …
“If” CSS Gets Inline Conditionals original
Creating an Animated Displaced Sphere with a Custom Three.js Material
9 July 2024 @ 2:05 pm - Codrops
Learn how to create an animated, displaced sphere using custom shaders with Three.js and React Three Fiber.
Useful Customer Journey Maps (+ Figma & Miro Templates)
8 July 2024 @ 10:00 am - Articles on Smashing Magazine — For Web Designers And Developers
Visualize the user experience with user journey maps. Here are some helpful templates, real-world applications, and insights on the importance of mapping both successful and unsuccessful touchpoints. Part of [Smart Interface Design Patterns](https://smart-interface-design-patterns.com) by yours truly.
If You Feel Burnt Out Do This
6 July 2024 @ 4:00 pm - Web Dev Simplified
Collective #853
5 July 2024 @ 11:00 am - Codrops
Design GUI * Morphing Arbitrary Paths in SVG * Local, first, forever
Inspirational Websites Roundup #62
5 July 2024 @ 10:46 am - Codrops
A brand new collection of the most inspiring website designs from the past couple of weeks.
How To Debug In VSCode In 1 Minute
4 July 2024 @ 4:00 pm - Web Dev Simplified
Use this instead of white-space: nowrap
4 July 2024 @ 1:00 pm - Kevin Powell
Relative colors make so many things easier!
3 July 2024 @ 3:06 pm - Kevin Powell
4 NEW TypeScript 5.5 Features!
2 July 2024 @ 4:00 pm - Web Dev Simplified
Tales Of An Eternal Summer (July 2024 Wallpapers Edition)
30 June 2024 @ 8:00 am - Articles on Smashing Magazine — For Web Designers And Developers
Let’s welcome the new month with some fresh desktop wallpapers! Created by artists and designers from across the globe, they come in versions with and without a calendar for July 2024. Enjoy!
Transitioning to Auto Height
28 June 2024 @ 1:44 pm - CSS-Tricks
I know this is something Chris has wanted forever, so it’s no surprise he’s already got a fantastic write-up just a day after the news broke. In fact, I first learned about it from his post and was unable …
How To Improve Your Microcopy: UX Writing Tips For Non-UX Writers
28 June 2024 @ 10:00 am - Articles on Smashing Magazine — For Web Designers And Developers
Interface copy plays a crucial role in the overall user experience, helping guide users smoothly, allowing them to navigate easily through the app, discover and start using product features, and more. In this article, you’ll find simple, practical tips and a checklist to help you create a clear and concise microcopy, ensuring a seamless user experience.
One small tweak to instantly improve your gradients
27 June 2024 @ 1:00 pm - Kevin Powell
Poppin’ In
26 June 2024 @ 4:37 pm - CSS-Tricks
Oh, hey there! It’s been a hot minute, hasn’t it? Thought I’d pop in and say hello while we get to know the Popover API a bit.
Poppin’ In originally published on CSS-Tricks, which is part of the DigitalOcean
"Smart" design patterns with container queries
26 June 2024 @ 1:12 pm - Kevin Powell
How To Make A Strong Case For Accessibility
26 June 2024 @ 12:00 pm - Articles on Smashing Magazine — For Web Designers And Developers
Gaining buy-in for accessibility can be challenging due to common myths and misunderstandings. For many, accessibility remains a big mystery. Here are some practical techniques for winning stakeholder support. Part of [Smart Interface Design Patterns](https://smart-interface-design-patterns.com) by yours truly.
Only The Best Developers Understand How This Works
25 June 2024 @ 4:00 pm - Web Dev Simplified
So Your Website Or App Is Live… Now What?
24 June 2024 @ 6:00 pm - Articles on Smashing Magazine — For Web Designers And Developers
The biggest mistake you can make in UX design is to launch a website or app and then walk away. Monitoring and improving after launch will benefit users and your metrics. Nothing will bring bigger gains.
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.
Uniting Web And Native Apps With 4 Unknown JavaScript APIs
20 June 2024 @ 6:00 pm - 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.
Naming things just got easier thanks to @scope
20 June 2024 @ 3:15 pm - Kevin Powell
CSS animations just got a lot more powerful
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
Chatting with Clark Sell on the current state of front-end, CSS, and more
18 June 2024 @ 2:33 pm - Kevin Powell
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.
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.
Easily reduce the opacity of a custom property color with relative colors
13 June 2024 @ 1:00 pm - Kevin Powell
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.
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
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.
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
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.
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 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.
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.
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.
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.
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.
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 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.
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!