WebDev Feed

Web development news

CSS Infinite and Circular Rotating Image Slider

2 December 2022 @ 2:12 pm - CSS-Tricks

Image sliders (also called carousels) are everywhere. There are a lot of CSS tricks to create the common slider where the images slide from left to right (or the opposite). It’s the same deal with the many JavaScript libraries out …

The Anatomy Of Themed Design System Components

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

The world of design systems can be overwhelming sometimes. There’s a lot to take in when you get into that space! In this article, Dan Donald dives into a simple component and explores some issues, complexity, and power we can encounter.

Digging Deeper Into Container Style Queries

1 December 2022 @ 1:59 pm - CSS-Tricks

I wrote up some early thoughts on container style queries a little while back. It’s still early days. They’re already defined in the CSS Containment Module Level 1 specification (currently in Editor’s Draft status) but there’s still a couple of …

Collective #741

1 December 2022 @ 11:44 am - Codrops

Color Formats in CSS * gpu-io * Inkbase * Infisical * The large, small, and dynamic viewport units

FabUnit: A Smart Way To Control And Synchronize Typo And Space

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

Today, we’ll take a look at the Sass function that does all the work for you — with no media queries, no breakpoints, and no design jumps. In this article, Fabienne Bielmann explains what FabUnit stands for and why she decided to create her very own responsive magic formula.

Using The New Constrained Layout In WordPress Block Themes

30 November 2022 @ 2:11 pm - CSS-Tricks

One of the main goals of the WordPress Site Editor (and, yes, that is now the “official” name) is to move basic block styling from CSS to structured JSON. JSON files are machine-readable,

Endings And New Beginnings (December 2022 Desktop Wallpapers Edition)

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

December is almost here, so why not spread some holiday love across your devices? We’ve got some beautiful wallpapers to sweeten up the last days of the year.

More Than “Slapping Paint on a Website”

29 November 2022 @ 3:03 pm - CSS-Tricks

I’m a sucker for anything about front-end job titles. Anselm Hannemann: CSS evolved and we’re beyond the point where everyone can just do it as a side interest. We all can learn it and build amazing stuff with it, …

Sketchy Pencil Effect with Three.js Post-Processing

29 November 2022 @ 1:16 pm - Codrops

A tutorial where you'll learn how to create a pencil effect with a sketchy look using Three.js post-processing.

Today only! 8 Best Cyber Monday 2022 Deals for Designers and Agencies

28 November 2022 @ 2:30 pm - Codrops

A collection of attractive Cyber Monday deals that can help you and your business.

Newer Things to Know About Good Ol’ HTML Lists

28 November 2022 @ 2:05 pm - CSS-Tricks

HTML lists are boring. They don’t do much, so we don’t really think about them despite how widely used they are. And we’re still able to do the same things we’ve always done to customize them, like removing markers, reversing … Newer Things to Know About Good Ol’ HTML Lists originally published on CSS-T

Collective #740

28 November 2022 @ 12:15 pm - Codrops

Alternatives * unjs * Dittytoy * Curations * Lumi * Futicons * Wasp

Awesome Demos Roundup #22

26 November 2022 @ 10:01 am - Codrops

The latest collection of the most creative and inspiring demos and code experiments from around the web.

Conway’s Game Of Life – Cellular Automata and Renderbuffers in Three.js

25 November 2022 @ 11:35 am - Codrops

In this tutorial we will go over implementing the Game of Life in Three.js using ping pong buffering and off-screen renderbuffers.

Document Object Model (DOM) Geometry: A Beginner’s Introduction And Guide

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

In this guide, Pearl Akpan analyzes the methods and properties that make user interface solutions such as infinite scrolling, animating elements on scroll, or even the popular drag and drop achievable, and afterward, dives into some practical use cases for them.

Collective #739

24 November 2022 @ 2:17 pm - Codrops

State of JavaScript 2022 Survey * An Interactive Guide to Flexbox in CSS * Design Threads

Apple Messages & Color Contrast

23 November 2022 @ 2:25 pm - CSS-Tricks

Well, color me this! I was griping to myself last night about just how gosh dang hard it is to read text messages in Apple Messages. You know, not the blue bubbles that you get when messaging other iPhone users. … Apple Messages & Color Contrast originally published on CSS-Tricks, which is part of the

WordPress Developer Blog

22 November 2022 @ 6:36 pm - CSS-Tricks

Well, hey check this out. Looks like there is a brand spankin’ new blog over at WordPress.org all about WordPress development. In the original proposal for the blog, Birgit Pauli-Haak writes: The Make Core blog has a heavy

Optimizing A Vue App

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

Prioritizing performance when building our web apps improves the user experience and helps ensure they can be used by as many people as possible. In this article, Michelle Barker will walk you through some of the front-end optimization tips to keep our Vue apps as efficient as possible.

Inline Layout Switch Ideas

22 November 2022 @ 1:27 pm - Codrops

Two ideas for animating images from an inline layout to a column or grid-based one.

Taming the Cascade With BEM and Modern CSS Selectors

21 November 2022 @ 1:59 pm - CSS-Tricks

BEM. Like seemingly all techniques in the world of front-end development, writing CSS in a BEM format can be polarizing. But it is – at least in my Twitter bubble – one of the better-liked CSS methodologies. Personally, I think … Taming the Cascade With BEM and Modern CSS Selectors originally published on

A Guide To Keyboard Accessibility: JavaScript (Part 2)

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

This article is the second of two parts about a guide to making websites accessible to keyboard users. Here Cristian Diaz covers a toolset on JavaScript that you can mix into different components to create a great experience for keyboard users.

Making Static Noise From a Weird CSS Gradient Bug

18 November 2022 @ 1:55 pm - CSS-Tricks

What I will be doing here is kind of an experiment to explore tricks that leverage a bug with the way CSS gradients handle sub-pixel rendering to create a static noise effect — like you might see on a TV with no signal. Making Static Noise From a Weird CSS Gradient Bug originally published on CSS-Tricks, which is part

Smashing Podcast Episode 54 With Stéphanie Walter: What Is User Journey Mapping?

18 November 2022 @ 7:00 am - Articles on Smashing Magazine — For Web Designers And Developers

In this episode we’re talking about User Journey Mapping. What is it, and how does it help us build better digital products? Vitaly talks to expert Stéphanie Walter to find out.

Collective #738

17 November 2022 @ 2:38 pm - Codrops

GitHub Blocks * CSS Clothoid Corners * CSS Hover Light Card * Stylify * Openblocks

Creating a Settings UI for a Custom WordPress Block

17 November 2022 @ 1:48 pm - CSS-Tricks

So far, we’ve covered how to work with data from an external API in a custom WordPress block. We walked through the process of fetching that data for use on the front end of a WordPress site, and how to … Creating a Settings UI for a Custom WordPress Block ori

A Guide To Image Optimization On Jamstack Sites

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

In this article, Alba Silvente shows us the theoretical and practical solutions to the most common problems when working with images and how to automate them by using a headless CMS and an image CDN.

DigitalOcean Welcomes Cloudways to the Family

16 November 2022 @ 11:38 pm - CSS-Tricks

Hey folks! If you’ve been keeping up with the latest DigitalOcean news, you might be aware that we recently announced our acquisition of a company called

Finding Front-End Development Scholarships

16 November 2022 @ 2:11 pm - CSS-Tricks

I’m often asked where to learn web development. The answer varies, of course, and we’ve published a few posts on the topic over the years, the most recent of which was Chris taking a stab at different learning paths in … Finding Front-End Development Scholarships originally published on

Using Automated Test Results To Improve Accessibility

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

In this article, Noah Mashni and Mark Steadman share their approach to how to leverage the automated test results from the accessibility checks to drive change and reach sustainable digital accessibility transformation.

Inspirational Websites Roundup #43

16 November 2022 @ 10:51 am - Codrops

A fresh collection of the most creative and trendy websites for your inspiration.

Behind the CSScenes, November 2022

15 November 2022 @ 3:54 pm - CSS-Tricks

Is it Fall? Winter? I don’t know, but I woke up with snow in the front yard this morning and felt like it was time to write a little update about what’s been happening around CSS-Tricks this past month, as … Behind the CSScenes, November 2022 originally published on CSS-Tricks, which is part of the

A Guide To Keyboard Accessibility: HTML And CSS (Part 1)

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

In this article, Cristian Diaz covers how to use HTML and CSS to create an accessible experience for keyboard users while mentioning what WCAG criteria we should keep into consideration.

Classy and Cool Custom CSS Scrollbars: A Showcase

14 November 2022 @ 1:54 pm - CSS-Tricks

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand with a matching scrollbar. The old-fashioned chrome scrollbar just doesn’t fit in as … Classy and Cool Custom CSS Scrollbars: A Showcase originally published on

CSS Grid and Custom Shapes, Part 3

11 November 2022 @ 2:42 pm - CSS-Tricks

After Part 1 and Part 2, I am back with a third article to explore more fancy shapes. Like the previous articles, we are going to combine CSS Grid with clipping and masking to create fancy layouts for image … CSS Grid and Custom Shapes, Part 3

How To Search For A Developer Job Abroad

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

Working abroad is a popular prospect, yet many people — including professionals in the tech sphere — don’t know where to start. In this article, Andrew Stetsenko gives you an ultimate step-by-step guide to finding and making international opportunities happen.

Design Systems: Useful Examples and Resources

9 November 2022 @ 7:00 am - Articles on Smashing Magazine — For Web Designers And Developers

Everything design systems on accessibility, enterprise design systems, Figma kits, data visualization, motion design, multi-lingual design, naming, ROI calculator and UX writing.

What’s New In Next.js 13?

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

Let’s talk about Next.js, one of the most well-known React frameworks used for production. From new components to font optimization, Atila shares a quick overview and invites you to join his [Advanced Next.js Masterclass](https://smashingconf.com/online-workshops/workshops/advanced-nextjs-atila-fassina) taking place later this month.

Practical Steps To Build Transparency In Your Remote Business

4 November 2022 @ 9:00 am - Articles on Smashing Magazine — For Web Designers And Developers

Transparency is part of the fabric of many remote businesses. It doesn’t, however, come naturally to everyone, especially if you’ve only recently become remote. In this article, Siobhan takes you through some of the practical ways that you can build transparency within your organization.

New Smashing Front-End & UX Workshops

3 November 2022 @ 7:00 am - Articles on Smashing Magazine — For Web Designers And Developers

What’s the state of HTML Email, Vue.js and Next.js? Would you like to level up with modern CSS? What are new, smart interface design patterns we could use? Let’s figure it all out together with our [brand new online workshops](https://smashingconf.com/online-workshops/) alongside our free community meetups.

Designing The Perfect Mobile Navigation UX

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

When designing navigation on mobile, we don’t have to rely on slide-in-menus or nested accordions. We can also use the curtain design pattern, and show multiple levels of navigation at once.

Putting The Graph In GraphQL With The Neo4j GraphQL Library

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

If building a GraphQL API backed by a native graph database sounds interesting or at all helpful for the problems you’re trying to solve as a developer, perhaps you’d like to give the open-source [Neo4j GraphQL Library](https://srv.buysellads.com/ads/long/x/TCZPLYDDTTTTTTFR6JINCTTTTTTGVUIVKKTTTTTTCT2NTYYTTTTTTI4BVH7U4JBCKQ466IDGV2IUWESGCV7WALL5QYYE) a try. Let’s take a closer look at the reasons why!

On The Edge Of November (2022 Desktop Wallpapers Edition)

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

November is just around the corner, and with it, a new collection of desktop wallpapers to celebrate the beginning of the month. Designed by creatives from all across the globe, they come in versions with and without a calendar. Let’s make November colorful!

How To Create Advanced Animations With CSS

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

In this article, Yosra Emad explains how to create a rollercoaster path that a ball follows using cubic beziers and CSS transitions. You’ll also learn how the cubic-bezier function in CSS works in detail and how to stack multiple simple animations to create one complex one.

Motion Controls In The Browser

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

If you've ever wanted to build a web app that you can control with hand gestures as if by magic, this article is for you. With a couple of APIs and some JavaScript, you can build apps that behave like sorcery.

Typographic Hierarchies

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

In this article, Alma Hoffmann discusses six basic variables to establish a typographic hierarchy, explains how to look at each differently, and in turn, designs pieces by intentionally modifying each variable to create a typographic hierarchy effectively.

State Of CSS Survey: Influence The Future Of CSS

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

The annual survey for anyone who writes CSS, [State of CSS](https://stateofcss.com/en-us/?source=smashing_magazine_css_survey), is nearing the end of its response period for 2022. The survey is available in many different languages and all questions are optional.

Futuristic CSS

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

In this article, Sacha Greif tries to anticipate future CSS trends and takes a look at some far-fetched and futuristic CSS features that might one day make their way to the browser.

What’s New In DevTools: Halloween Edition 🎃

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

In this article, Patrick Brosset gives an update on the most impactful new features that are now available in DevTools, across Firefox, Chrome, Safari, and Edge.

Understanding Privacy: A New Smashing Book Is Here

19 October 2022 @ 12:45 pm - Articles on Smashing Magazine — For Web Designers And Developers

Meet Understanding Privacy, our brand new Smashing Book to make sense of privacy, and learn how to create inclusive, safe and privacy-aware digital experiences. eBook now available, print shipping in early December.

WordPress Full-Site Editing: A Deep Dive Into The New Feature

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

In this article, Nick Schäferhoff will take a deep dive into WordPress Full-Site Editing, examine the tools it provides for theme development, and provide a tutorial on how to use it to make changes to your site.

Effective Communication For Everyday Meetings

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

In this article about conducting productive meetings, Andrii Zhdan will give you a step-by-step guide on preparing a solid meeting structure that will let you follow the original plan and reach the meeting goals, and he will also share a few tips based on his design experience.

Sustainable Web Development Strategies Within An Organization

11 October 2022 @ 3:30 pm - Articles on Smashing Magazine — For Web Designers And Developers

Climate change and sustainability are increasing concerns for digital organizations, as well as individuals working in tech. In this article, we’ll explore some of the ways we can raise awareness and effect change within an organization to create a more positive environmental impact.

Delightful UI Animations With Shared Element Transitions API (Part 2)

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

In this article, Adrian Bece will show how to create same-document page transitions for Single Page Apps using Shared Element Transitions API and check out its future implementation and potential for creating cross-document transitions in Multi-Page Apps.

A Roadmap For Building A Business Chatbot

7 October 2022 @ 8:00 am - Articles on Smashing Magazine — For Web Designers And Developers

Owing to tremendous advancements in Machine Learning and other technologies, chatbots have increased in popularity in the past few years. This article will show you, step by step, how to build a chatbot that meets your business goals.

Node.js Authentication With Twilio Verify

7 October 2022 @ 6:00 am - Articles on Smashing Magazine — For Web Designers And Developers

Integrate two-factor authentication into your Express.js app by building an application that authenticates users using password-based authentication and OTPs powered by the Twilio Verify service.

Easy Fluid Typography With clamp() Using Sass Functions

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

We can use the `clamp()` method today because of the great browser support. In this article, Brecht De Ruyte explains how it can be a beautiful addition to your upcoming project or as an upgrade to a previous one.

Delightful UI Animations With Shared Element Transitions API (Part 1)

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

Shared Element Transitions API is a game-changing feature that will enable us to create impressive and elaborate UI animations easily. In this article, Adrian Bece will explore its incredible potential by building four real-life examples from scratch.

October Vibes For Your Desktop (2022 Wallpapers Edition)

30 September 2022 @ 1:30 pm - 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!

Unconscious Biases That Get In The Way Of Inclusive Design

29 September 2022 @ 9:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

Throughout the research and design processes, our unconscious biases are the greatest risk to delivering inclusive experiences. From who we include and exclude in our research to how we plan and conduct research, it’s crucial that we understand how our unacknowledged biases can perpetuate systems of exclusion.

Building Your Security Strategy (Case Study)

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

In this article, Wix security experts share ten “security by design” principles that emerged from their work in keeping the Wix platform secure. If you’re a developer, these tried-and-true principles can help you build your own secure applications.

Phone Numbers For Web Designers

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

The customer journey is not limited to a website alone. Simply by combining the world of website design and telephony, far better results can be obtained for your organization. And thanks to the similarities and mutual benefits, it is an easy step to take.

Five Data-Loading Patterns To Boost Web Performance

27 September 2022 @ 2:00 pm - Articles on Smashing Magazine — For Web Designers And Developers

You don’t need a framework for everything, but if you use one, this article will help you use it in the most performant way.

Meet SmashingConf New York 🇺🇸 (Oct 10–13)

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

SmashingConf NYC is back! A friendly, inclusive conference for designers and front-end engineers who can’t wait to learn and be inspired. October 10–13, 2022. Get your ticket!

Lessons Learned As A Designer-Founder

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

In this article, Dave Feldman shares his lessons learned and the experiments has done as a multidisciplinary designer-founder-CEO at an early-stage startup. Let’s take a look at what it is that makes a great design process for teams of any size.