WebDev Feed

Web development news

A Serene CSS Dappled Light Effect

19 January 2022 @ 10:46 pm - CSS-Tricks

There’s a serene warmth to the early evening sunlight peaking through rustling leaves. Artists use dappled light to create a soft, hypnotic effect. Bedford Dwellings by Ron Donoughe (2013) We can create the same sort of dappled light effect in …

What should someone learn about CSS if they last boned up during CSS3?

19 January 2022 @ 2:25 pm - CSS-Tricks

What's new in CSS? If someone asked you that, who knows CSS but hasn't stayed up to date the last, say, half a decade or more, what advice would you give? What should someone learn about CSS if they last boned up during CSS3? originally published on CSS-Tricks. You should get the newsletter and

Upcoming Online Workshops: January – May 2022

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

What goes into creating a successful design system? How can you take your testing workflow to the next level? And what smart interface design patterns could help you enhance your UIs? Let’s figure it out. With our [online workshops on front-end and UX](https://smashingconf.com/online-workshops).

Animate Anything Along an SVG Path

19 January 2022 @ 10:42 am - Codrops

Learn how to code creative animations using SVG paths and the getPointAtLength() function. The post Animate Anything Along an SVG Path appeared first on Codrops.

4 Quality Options for a Table of Contents Block in WordPress

18 January 2022 @ 11:22 pm - CSS-Tricks

There are a number of options for including a Table of Contents lock in WordPress. You can use a plugin, or try to do it yourself. 4 Quality Options for a Table of Contents Block in WordPress originally published on CSS-Tricks. You should get the newsletter and

Making a Site Work Offline Using the VitePWA Plugin

18 January 2022 @ 2:30 pm - CSS-Tricks

The VitePWA plugin from Anthony Fu is a fantastic tool for your Vite-powered sites. It helps you add a service worker that handles: offline support caching assets and content prompting the user when new content is available …and other goodies! …

Freebie: Wayfinding Icon Sets (164 Icons, PNG, SVG, AI, EPS)

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

Every once in a while, we publish [freebies](https://www.smashingmagazine.com/category/freebies) related to different occasions and themes. We hope that with this icon set, everyone will be able to find their own use case for these icons in particular. Today, we present to you three icon sets designed by the creative folks at GraphicSurf — all free for personal and commercial use.

9 Awesome WordPress Plugins to Use in 2022

18 January 2022 @ 10:01 am - Codrops

A collection of high-quality and popular WordPress plugins that will ease the process of building a website. The post 9 Awesome WordPress Plugins to Use in 2022 appeared first on Codrops.

What Were the Hottest Front-End Tools in 2021?

17 January 2022 @ 3:13 pm - CSS-Tricks

Another year has passed and once again I’ve had the privilege of going through the Web Tools Weekly newsletter archives from the past 12 months to hunt down the front-end tools that readers found to be the most interesting during … What Were the Hottest Front-End Tools in 2021? originally published on

Modern Fluid Typography Using CSS Clamp

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

We’ll explore fluid typography principles, use-cases, implementation with CSS clamp() and an interactive fluid typography calculator.

Using the CSS Me Not Bookmarklet to See (and Disable) CSS Files

15 January 2022 @ 12:06 am - CSS-Tricks

Stoyan is absolutely correct. As much as we all love CSS, it’s still an important player in how websites load and using less of it is a good thing. He has a neat new bookmarklet called CSS Me Not … Using the CSS Me Not Bookmarklet to See (and Disable) CSS Files originally published on

Mondrian Art in CSS From 5 Code Artists

14 January 2022 @ 6:15 pm - CSS-Tricks

Mondrian is famous for paintings with big thick black lines forming a grid, where each cell is white, red, yellow, or blue. This aesthetic pairs well with the notoriously rectangular web, and that hasn’t gone unnoticed over the years with … Mondrian Art in CSS From 5 Code Artists originally published on CSS-Tricks. Yo

How to Build Your First Custom Svelte Transition

14 January 2022 @ 3:24 pm - CSS-Tricks

The Svelte transition API provides a first-class way to animate your components when they enter or leave the document, including custom Svelte transitions. By default, the transition directive uses CSS animations, which generally offer better performance and allow the browser’s …

Ten Tips For Aspiring Designer Beginners (Part 2)

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

In [Part 1](https://www.smashingmagazine.com/2022/01/ten-tips-aspiring-designer-beginners-part1/), Luis Ouriach shared advice he wished he had when starting out in his career. In this second and last part of this series, Luis continues sharing tips that helped him grow and become a better designer throughout the years.

Case Study: Anatole Touvron’s Portfolio

14 January 2022 @ 1:09 pm - Codrops

A practical case study of Anatole Touvron’s Portfolio where you'll get some insight on the process and some valuable tips. The post Case Study: Anatole Touvron’s Portfolio appeared first on Codrops.

8 Helpful Accessibility Links for January 2022

13 January 2022 @ 8:57 pm - CSS-Tricks

Every now and then, I find that I’ve accumulated a bunch of links about various things I find interesting. Accessibility is one of those things! Here’s a list of related links to other articles that I’ve been saving up and … 8 Helpful Accessibility Links for January 2022 originally published on

A Practical Tip For Using Sass Default Parameters

13 January 2022 @ 3:17 pm - CSS-Tricks

Sass offers functions and mixins that accept parameters. You can use Sass default parameters, that is, parameters that have a value even if you don’t provide them when the function or mixin is called. Let’s focus on mixins here. … A Practical Tip For Using Sass Default Parameters or

Collective #694

13 January 2022 @ 11:56 am - Codrops

Biased by Design * Vanta.js * Parcel CSS * Color Modulation * Memory leaks The post Collective #694 appeared first on Codrops.

Building A Web Code Editor

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

If you’re a developer who’s thinking about building a platform that requires a code editor in one form or another, then this article is for you. This article explains how to create a web code editor that displays the result in real time with the help of some HTML, CSS and JavaScript.

Parcel CSS: A New CSS Parser, Transformer, and Minifier

12 January 2022 @ 9:10 pm - CSS-Tricks

Hot off the presses from Devon Govett, creator of Parcel, is Parcel CSS: A CSS parser, transformer, and minifier written in Rust. Nice. The CSS world could use a l

Open Source & Sustainability

12 January 2022 @ 8:51 pm - CSS-Tricks

It’s a god-damned miracle to me that open source is as robust as it is in tech. Consider the options. You could have a job (or be entrepreneurial) with your coding skills and likely be paid quite well. Or, you … Open Source & Sustainability originally published on CSS-Tricks. You should

How to Make a Pure CSS 3D Package Toggle

12 January 2022 @ 3:29 pm - CSS-Tricks

You know how you can get cardboard boxes that come totally flat? You fold ‘em up and tape ‘em to make them into a useful box. Then when it’s time to recycle them, you cut them back apart to flatten … How to Make a Pure CSS 3D Package Toggle originally published on CSS-Tricks. You should

Netlify Identity, a Key Aspect to Jamstack Development

12 January 2022 @ 2:13 pm - CSS-Tricks

(This is a sponsored post.) Netlify is amazing at static file hosting, but it’s really so much more than that. You can build any sort of website, even highly dynamic apps, with the Jamstack approach and static file hosting … Netlify Identity, a Key Aspect to Jamstack Development orig

Pixel Distortion Effect with Three.js

12 January 2022 @ 11:19 am - Codrops

An interactive WebGL pixel distortion effect with lots of possibilities based on the effect seen on the website for "Infinite Bad Guy". The post Pixel Distortion Effect with Three.js appeared first on Codrops.

How To Hire For Digital Accessibility Roles

12 January 2022 @ 10:30 am - Articles on Smashing Magazine — For Web Designers And Developers

Accessibility must be a permanent program within organizations, much like security. In this article, Kate Kalcevich shares tips on which skills and questions to keep in mind when hiring for digital accessibility roles.

What Would it Take to Prevent CSS Tooltips From Overflowing?

11 January 2022 @ 11:18 pm - CSS-Tricks

Say you have an elements with CSS tooltips and you’re going to position those tooltips such that it opens up next to the element on hover (or probably better: when clicked/tapped). Next to it where? Above it? What if the … What Would it Take to Prevent CSS Tooltips From Overflowing?

10 Best WordPress Themes to Use in 2022

11 January 2022 @ 9:36 am - Codrops

A collection of top WordPress themes going into 2022 to help you find the perfect fit for your project. The post 10 Best WordPress Themes to Use in 2022 appeared first on Codrops.

A Deep CSS Dive Into Radial And Conic Gradients

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

In this article, we’ll be taking a closer look at two gradients: `conic-gradient` and `radial-gradient`. You’ll see how each one of them works in detail, what the differences and similarities are between them, how and where to use them, and some use cases for each.

Changing A Tire On A Moving Car (Or How To Improve Product Roadmaps)

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

Product roadmaps are often treated as a series of checkboxes. But they are more than that. In this article, Scott Himmer explains how internal partnerships, research, design systems, and regular touch bases can help make sure that your product roadmap is a successful one.

Ten Tips For Aspiring Designer Beginners (Part 1)

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

In this article (the first part in a series of two), Luis Ouriach shares advice that he wishes he has when starting out in his career. These tips come from his experience as a user interface and product designer for close to ten years, and if you’re starting just now, then read on!

Crafting Scroll Based Animations in Three.js

5 January 2022 @ 11:09 am - Codrops

Learn how to create a scroll based animation in WebGL with Three.js. The post Crafting Scroll Based Animations in Three.js appeared first on Codrops.

Composition-Based Design System In Figma

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

Figma has advanced enough where it now supports some powerful concepts that can help with the flexibility and maintainability of a design system. In this article, Sasha explains why she finds the Systems Designer position so rewarding — and it’s not only because of how fast certain tools have developed to help her master challenges she faces in her work projects.

Building a Scrollable and Draggable Timeline with GSAP

3 January 2022 @ 11:44 am - Codrops

Learn how to build a scrollable and draggable horizontal timeline using GSAP's ScrollTrigger and Draggable plugins. The post Building a Scrollable and Draggable Timeline with GSAP appeared first on Codrops.

A Look Back at 2021: Roundup of Codrops Resources

31 December 2021 @ 6:33 pm - Codrops

The countdown to the new year is already running! Join us for a look back at our favorite posts from 2021. The post A Look Back at 2021: Roundup of Codrops Resources appeared first on Codrops.

New Year, Fresh Desktop (January 2022 Wallpapers Edition)

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

What better way could there be to start the new year than with some fresh inspiration? Our collection of wallpapers for January 2022 is bound to put a smile on your face — and maybe spark new ideas, too.

Collective #693

30 December 2021 @ 12:03 pm - Codrops

Typejuice * PrinceJS * CSS in 2022 * React Native Skia * Smoothly Reverting CSS Animations The post Collective #693 appeared first on Codrops.

How To Price Projects And Manage Scope Creep

29 December 2021 @ 10:30 am - Articles on Smashing Magazine — For Web Designers And Developers

Scoping, estimating, and running digital projects can often feel like an exercise in futility. In this article, Paul Boag explains why you need to start breaking your projects down into manageable phases and why that’s the best way to achieve significant benefits.

Building Gatsby Themes For WordPress-Powered Websites

27 December 2021 @ 10:30 am - Articles on Smashing Magazine — For Web Designers And Developers

Have you already built and published a Gatsby theme? In this article, Paulina Hetman explains how Gatsby themes work and what problems they can solve by comparing Gatsby themes with their WordPress counterparts.

Creating A Custom Range Input That Looks Consistent Across All Browsers

23 December 2021 @ 11:00 am - Articles on Smashing Magazine — For Web Designers And Developers

Range inputs have notoriously been a pain to style. Each browser renders the input differently requiring you to use vendor prefixes in order to create a cohesive look and feel. In this article, we’ll take a look at the quirkiness of the HTML range input and demonstrate how to style the input to look consistent across all major browsers.

Useful UX Guidelines, Tools And Resources

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

A meaningful user experience is what can set your site apart from others. But what makes an experience truly meaningful? And how to achieve that? The tools, tips, and resources in this post not only help you to come up with a UX strategy that works for you and your team but also to circumvent potential UX pitfalls.

Improving Core Web Vitals, A Smashing Magazine Case Study

20 December 2021 @ 5:30 am - Articles on Smashing Magazine — For Web Designers And Developers

How to improve Core Web Vitals, a Smashing Magazine case study on how we detected and fixed the bottlenecks, and how we ended up with green scores, all the way.

Designing Human-Machine Interfaces For Vehicles Of The Future

17 December 2021 @ 2:30 pm - Articles on Smashing Magazine — For Web Designers And Developers

Modern HMIs are transforming the way we interact with our vehicles. A car becomes a gadget that we use in a similar way as we use our phones. Users expect a lot of HMI, they even evaluate car experience based on the experience they have with HMI. In this article, let’s look at some ways to help us satisfy users’ needs with proper design.

Billing Management For Your Next SaaS Idea Using Stripe And Azure Functions

17 December 2021 @ 1:30 pm - Articles on Smashing Magazine — For Web Designers And Developers

In every software-as-a-service solution, user billing and payments are key aspects in the sale of services rendered. Let’s learn about Stripe and how the REST API can be programmatically used in serverless functions to manage the billing for an application.

Touch Design For Mobile Interfaces: Defining Mobile Devices (Excerpt)

15 December 2021 @ 11:30 am - Articles on Smashing Magazine — For Web Designers And Developers

Before we can talk about how people interact, much less how to take advantage of that knowledge and design, it’s important to understand a bit about the history, the technology, and what today counts as a mobile touchscreen device at all.

Modifying Headers In HTTP(s) Requests In UI Automation Testing

14 December 2021 @ 10:30 am - Articles on Smashing Magazine — For Web Designers And Developers

To be able to modify headers in a testing environment is a great thing to have. It allows control over your application as one can bypass authentication, set cookies, and so on. In this article, Nafees Nehar explores some methods which allow modification of headers in an automation testing setup.

Free Christmas Icon Sets And Vector Elements

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

Everybody loves a nice freebie, right? To get you in the mood for the upcoming holidays, we collected some winter- and holiday-themed icon sets and vector elements that you can use in your projects for free. Enjoy!

Designing Better Links For Websites And Emails: A Guideline

6 December 2021 @ 5:30 pm - Articles on Smashing Magazine — For Web Designers And Developers

There are so many websites out there that have not considered the overall usability of their visually impaired users. When it comes to designing better links and sending better emails, Slava Shestopalov has a few tips on how to improve your website’s experience while accessibility in mind.

Advent Calendars For Web Designers And Developers (December 2021 Edition)

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

Are you ready for the countdown to Christmas? From [festive](https://www.smashingmagazine.com/2016/12/freebie-christmas-advent-icon-set-25-icons-ai-eps-svg-png-pdf/) [icon](https://www.smashingmagazine.com/2015/12/freebie-christmas-icons-illustrations/) [sets](https://www.smashingmagazine.com/2014/11/freebie-christmas-icon-set-ai-psd-eps-pdf-svg-png/) to advent calendars that are bound to sweeten your days with a delightful little surprise each morning, we’ve decided to join in on this lovely

How To Protect Your API Key In Production With Next.js API Route

2 December 2021 @ 9:30 am - Articles on Smashing Magazine — For Web Designers And Developers

There’s a great challenge that comes with building Jamstack applications on the web. In this article, Caleb Olojo explains how you can use Next.js to bootstrap your app safely.

Smashing Podcast Episode 44 With Chris Ferdinandi: Is The Web Dead?

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

In this episode, we’re asking if changes to best practises over the last year have negatively impacted the web. Is it all downhill from here? Drew McLellan talks to expert Chris Ferdinandi to find out.

It’s That Time Of The Year (December 2021 Desktop Wallpapers Edition)

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

Let’s welcome December with some new wallpapers! Designed by artists and designers from across the globe, they are available with and without a calendar for the month. Enjoy!

3D CSS Flippy Snaps With React And GreenSock

29 November 2021 @ 12:30 pm - Articles on Smashing Magazine — For Web Designers And Developers

One of Jhey’s main mantras is to make learning fun. In this article, he shows you ways to level up your skills by bringing your ideas to life, and not forgetting that [you can be playful with code](https://www.smashingmagazine.com/2020/11/playfulness-code-supercharge-fun-learning/). With that mindset, every idea is bound to become an opportunity to try something new.

How To Maintain A Large Next.js Application

26 November 2021 @ 12:30 pm - Articles on Smashing Magazine — For Web Designers And Developers

In this article, Nirmalya discusses some of the complex problems that he faced while building and maintaining large Next.js applications. He always explains how these problems can be solved by using various tools.

A Showcase Of Lovely Little Websites

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

Instead of spending your coffee break scrolling through your social feeds, how about a lovely little website instead? We came across some fantastic ones that are just too good not to be shared. But be warned, your break might take a bit longer than intended.

Adding A Dyslexia-Friendly Mode To A Website

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

With a little CSS, we can adapt our web designs to be more accommodating for people with dyslexia. In this article, we’ll explore those techniques by adding a dyslexia-friendly mode to an existing design.

Smashing Workshops: Winter 2021

22 November 2021 @ 4:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

What’s the state of CSS, Vue.js and Next.js? What are new, smart interface design patterns we could use? Let’s figure it out. With our [online workshops on UX, front-end and design](https://smashingconf.com/online-workshops).

Improving The Performance Of Wix Websites (Case Study)

22 November 2021 @ 10:30 am - Articles on Smashing Magazine — For Web Designers And Developers

Implementing a performance culture is very important. In this article, Dan Shappir shares which actions and processes the Wix team put in place in order to achieve dramatic improvements in the performance of websites built and hosted on their platform.

Next.js Wildcard Subdomains

19 November 2021 @ 10:30 am - Articles on Smashing Magazine — For Web Designers And Developers

Hosting with a wildcard subdomain enables your users to visit your site on any subdomain of your domain (*.example.com), and as you can imagine, we can use this to create unique user experiences which we’ll be exploring in this article through a Next.js lens.

A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH

17 November 2021 @ 4:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

In this article, we’ll take a look at the best ways to handle colors in CSS today, some tips for using them in a design system, and what we can expect from our colors in the not-too-distant future.

Meet Touch Design For Mobile Interfaces, A New Smashing Book By Steven Hoober

16 November 2021 @ 4:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Meet “Touch Design for Mobile Interfaces”, our brand-new guide on designing for mobile with proven, universal, human-centric standards. 400 pages. Shipping starting in mid-January 2022.

Powerful Terminal And Command-Line (CLI) Tools For Modern Web Development

15 November 2021 @ 1:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

What’s your favorite command-line tool? In this post, Louis Lazaris shares a collection of relevant command-line apps and utilities that he has personally come across in the past few years. If there’s a useful one that hasn’t been mentioned and one you use regularly, please do share it in the comments.

Useful React Hooks That You Can Use In Your Projects

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

The React team introduced several hooks in React 16.8 which you can use from third-party providers in your application, or even create your own custom hook. In this tutorial, we’ll take a look at some of the most useful hooks in React and how to use them.

From Good To Great In Dashboard Design: Research, Decluttering And Data Viz

11 November 2021 @ 2:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Dribbbleshots just might be the hotbed of questionable dashboards. Striking visuals, little context, and no research: all recipes for mediocrity. Mediocrity won’t do. We’ll pursue greatness. And in that pursuit, we’ll cover research, decluttering, and data visualization.

Localizing Your Next.js App

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

Internationalized routing is not exactly a new feature on Next.js. In this article, we are not only checking what we get from this feature, but also how to leverage such functionalities to achieve the best user experience and a smooth developer experience as well.

Automatically Transforming And Optimizing Images And Videos On Your WordPress Website

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

In this article, Leonardo Losoviz explains how Cloudinary’s integration can be used with WordPress to produce and deliver optimal digital experiences.