WebDev Feed

Web development news

Diagonal Stripes Wipe Animation

30 November 2021 @ 5:26 pm - CSS-Tricks

I was playing this game on Apple Arcade the other day called wurdweb. It’s a fun little game! Little touches like the little shape dudes that walk around the screen (but otherwise don’t do anything) give it a lot …

Using the Reflog to Restore Lost Commits

30 November 2021 @ 3:53 pm - CSS-Tricks

This article is part of our “Advanced Git” series. Be sure to follow us on Twitter or sign up for our newsletter to hear about future articles! The “Reflog” is one of Git’s lesser-known features—but one tha

A Look at the Cloudinary WordPress Plugin

30 November 2021 @ 3:23 pm - CSS-Tricks

(This is a sponsored post.) Cloudinary (the media hosting and optimization service) has a brand new version (v3) of its WordPress plugin that has really nailed it. First, a high-level look at the biggest things this plugin does: It ̷

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!

Recreating the Apple Music Hits Playlist Animation in CSS

29 November 2021 @ 4:38 pm - CSS-Tricks

Apple Music has this “Spatial Audio” feature where the direction of the music in your headphones is based on the location of the device. It’s tough to explain just how neat it is. But that’s not what I’m here to …

We Analyzed 425,909 Favicons

29 November 2021 @ 4:38 pm - CSS-Tricks

This is a neat idea for a research project. The big map is fun, but the research had some tidbits in it worth looking at. The average favicon network request takes 130ms, at least from our speedy cloud instance.…

They’re Here! 10 Best Cyber Monday 2021 Deals for Designers and Agencies

29 November 2021 @ 2:31 pm - Codrops

A list of great Cyber Monday deals and bargains for designers and agencies. The post They’re Here! 10 Best Cyber Monday 2021 Deals for Designers and Agencies appeared first on Codrops.

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.

Collective #690

29 November 2021 @ 10:51 am - Codrops

Image Optimizer * Pglet * cccolor * There Is No Digital World * Underline Fill Effect in CSS The post Collective #690 appeared first on Codrops.

Animated 3D Ribbons with Three.js

29 November 2021 @ 9:33 am - Codrops

Deconstructing the ribbon animation seen on iad-lab with geometrical tricks. The post Animated 3D Ribbons with Three.js appeared first on Codrops.

When is it “Right” to Reach for contain and will-change in CSS?

26 November 2021 @ 8:43 pm - CSS-Tricks

I’ve got some blind spots in CSS-related performance things. One example is the will-change property. It’s a good name. You’re telling the browser some particular property (or the scroll-position or content) uh, will, change: .el { will-change: opacity; …

A Handy Little System for Animated Entrances in CSS

26 November 2021 @ 4:12 pm - CSS-Tricks

I love little touches that make a website feel like more than just a static document. What if web content wouldn’t just “appear” when a page loaded, but instead popped, slid, faded, or spun into place? It might be a …

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.

Collective #689

25 November 2021 @ 2:57 pm - Codrops

Modern CSS Reset * SVGcode * Stunning 3D scenes with R3F * Caffeine The post Collective #689 appeared first on Codrops.

Creating Generative Patterns with The CSS Paint API

24 November 2021 @ 3:49 pm - CSS-Tricks

The browser has long been a medium for art and design. From Lynn Fisher’s joyful A Single Div creations to Diana Smith’s staggeringly detailed CSS paintings, wildly creative, highly skilled developers have — over the years — continuously pushed …

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.

Which SVG technique performs best for way too many icons?

23 November 2021 @ 7:21 pm - CSS-Tricks

Tyler Sticka digs in here in the best possible way: by making a test page and literally measuring performance. Maybe 1,000 icons is a little bit of an edge case, but hey, 250 rows of data with four icons in …

Control Layout in a Multi-Directional Website

23 November 2021 @ 4:06 pm - CSS-Tricks

Many business websites need a multilingual setup. As with anything development-related, implementing one in an easy, efficient, and maintainable way is desirable. Designing and developing to be ready for multiple languages, whether it happens right at launch or is expected …

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.

On User Tracking and Industry Standards on Privacy

22 November 2021 @ 9:00 pm - CSS-Tricks

Inspired by Eva PenzeyMoog’s new book, Jeremy highlights the widespread user tracking situation in this industry: There was a line that really stood out to me: The idea that it’s alright to do whatever unethical thing is currently the

CSS “decorations”

22 November 2021 @ 6:48 pm - CSS-Tricks

A reader wrote to me the other day asking about this bit of CSS they came across in Wikipedia’s Common.css: .mw-collapsible-leftside-toggle .mw-collapsible-toggle { /* @noflip */ float: left; /* @noflip */ text-align: left; } What’s that @noflip busin

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).

Responsive Layouts, Fewer Media Queries

22 November 2021 @ 3:29 pm - CSS-Tricks

We cannot talk about web development without talking about Responsive Design. It’s just a given these days and has been for many years. Media queries are a part of Responsive Design and they aren’t going anywhere. Since the introduction of …

Ripple Effect on a Texture with Three.js

22 November 2021 @ 1:13 pm - Codrops

A coding session that deconstructs the ripple effect seen on homunculus.jp. The post Ripple Effect on a Texture with Three.js appeared first on Codrops.

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.

Reimagine Atomic CSS

19 November 2021 @ 10:01 pm - CSS-Tricks

I’m not the biggest fan of Atomic CSS myself. I don’t like all the classes. I like to express my styles in CSS because I find CSS… good. But I appreciate that a lot of people seem to like it, …

Coding Font Game

19 November 2021 @ 9:18 pm - CSS-Tricks

A tournament bracket UI where you pick your favorite between two coding fonts and your choices are whittled down all the way to a final winner. A clever way to suss out your own taste and arrive at a choice.…

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.

Collective #688

18 November 2021 @ 5:48 pm - Codrops

Flip, Invert, and Reverse * Shadow Palette Generator * tldraw * Rows * RegexLearn The post Collective #688 appeared first on Codrops.

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.

Slideshow with Filter Reveal Effect

17 November 2021 @ 11:33 am - Codrops

A slideshow page layout with a filter enhanced navigation effect. The post Slideshow with Filter Reveal Effect appeared first on Codrops.

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 early January.

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.

Collective #687

11 November 2021 @ 3:29 pm - Codrops

#Chatcontrol Explained * Layout patterns * Web Animation Course * Curves and Surfaces * Papyrus The post Collective #687 appeared first on Codrops.

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.

Inspirational Websites Roundup #31

8 November 2021 @ 4:14 pm - Codrops

A new collection of the most interesting and creative websites from the past couple of weeks. The post Inspirational Websites Roundup #31 appeared first on Codrops.

Meet Hydrogen: A React Framework For Dynamic, Contextual And Personalized E-Commerce

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

A great commerce experience is not a Lighthouse score or a set of Core Web Vitals figures (although both are important inputs), but it’s also a trilemma that carefully balances competing needs of delivering a great customer experience, dynamic storefront capabilities and long-term business objectives.

The Value Of Concept Testing As Part Of Product Design

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

Concept testing ideas before moving into a detailed design is good UX practice. In this article, Victor Yocco presents details on how and when to engage in concept testing, as well as case studies providing details on the insights gained in two very different settings.

Smashing Podcast Episode 43 With Matthew Phillips: What Is Astro?

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

In this episode, we’re talking about Astro. Will this modern static site builder launch you into the stratosphere? Drew McLellan talks to developer Matthew Phillips to find out.

Collective #686

4 November 2021 @ 11:43 am - Codrops

Codeamigo * MangoDB * Coding Font * Developer Tools secrets that shouldn’t be secrets The post Collective #686 appeared first on Codrops.

GraphQL On The Front-End (React And Apollo)

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

Within the last decade, technologies like GraphQL have changed how we build web apps and how they communicate with each other. GraphQL provides certain benefits over REST APIs — let’s find out what they are.

A Deep Dive Into Serverless UI With TypeScript

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

Serverless UI is simply a free, open-source command-line utility for quickly building and deploying serverless applications on the AWS platform. In this article, we will learn and cover everything needed on using Serverless UI to deploy our projects or serverless applications to cloud services providers.

Creating A Magento PWA: Customizing Themes vs. Coding From Scratch

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

This article sheds the spotlight on Magento PWAs and explains why business owners are getting them (often instead of native applications). Alex Husar introduces ways of how progressive web applications can be developed on Magento, as well as go over the major pros and cons of each development path.

A Splash Of Color For Misty Days (November 2021 Desktop Wallpapers Edition)

31 October 2021 @ 8:20 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!

50 Resources And Tools To Turbocharge Your Copywriting Skills

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

Stop wasting time and effort writing copy that falls flat. Raise your copywriting game and boost your powers of persuasion with these rich and informative online resources.

How To Build An Amazon Product Scraper With Node.js

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

The wealth of data that Amazon holds can make a huge difference when you’re designing a product or hunting for a bargain. But, how can a developer get that data? Simple, by using a web scraper. Here’s how to build your data extraction bot with Node.js.

Eye-Tracking In Mobile UX Research

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

Thanks to technology, eye-tracking has become more accessible to UX research as it allows researchers to get insights about users ’visual attention. This article explores the latest trends in the eye-tracking market and how the methodology can be included in the UX researcher’s toolbox.

Optimizing Next.js Applications With Nx

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

Nx is a build framework that facilitates optimization, efficient scaling of applications, and other features such as shared libraries and components. In this article, we will be looking at how we can effectively scale Next.js applications by using Nx.

A Deep Dive Into object-fit And background-size In CSS

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

In this article, we will go through how `object-fit` and `background-size` work, when we can use them, and why, along with some practical use cases and recommendations. Let’s dive in.

An Introduction To Quasar Framework: Building Cross-Platform Applications

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

Quasar is an open-source Vue.js-based cross-platform framework that allows you, as a developer, to easily build apps for both desktop and mobile using technologies such as Cordova and Electron and writing your code once. The app we’ll build will store and get its data from Firebase, meaning that we will also be seeing how to use Firebase in Quasar.

How To Build A Real-Time Multi-User Game From Scratch

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

This article highlights the process, technical decisions and lessons learned behind building the real-time game Autowuzzler. Learn how to share game state across multiple clients in real-time with Colyseus, do physics calculations with Matter.js, store data in Supabase.io and build the front-end with SvelteKit.

Respecting Users’ Motion Preferences

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

The `prefers-reduced-motion` media query has excellent support in all modern browsers going back a couple of years. In this article, Michelle Barker explains why there’s no reason not to use it today to make your sites more accessible.

Building The SSG I’ve Always Wanted: An 11ty, Vite And JAM Sandwich

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

Back in January 2020, Ben Holmes set out to do what just about every web developer does each year: rebuild his personal site. In this article, he shares his story of how he set out to build his own build pipeline from absolute ground zero and created “Slinkity”.

Building An API With Gatsby Functions

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

In this tutorial, Paul Scanlon explains how to build an API by using Gatsby Functions and what you need to keep in mind when deploying it to Gatsby Cloud.

Smashing Podcast Episode 42 With Jeff Smith: What Is DevOps?

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

In this episode, we’re talking about DevOps. What is it, and is it a string to add to your web development bow? Drew McLellan talks to expert Jeff Smith to find out.

Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study)

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

Cumulative Layout Shift is one of the hardest core web vital to debug. In this article, we go through different tools to investigate CLS, when to use them(and when not), and solutions to some of the CLS issues we faced in our Next.js-based e-commerce website.

A Simple But Effective Mental Health Routine For Programmers

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

In this article, we’ll look at why taking care of our work-life balance is important, how to develop a simple and effective mental health routine, and the most common and efficient techniques you can use to make your custom routine.

Tips And Tricks For Evaluating UX/UI Designers

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

Customers may start using your app because you offer a unique product, but user experience is what makes them stay. For that, you need excellent UX designers, and the know-how to spot them when hiring.

Smart CSS Solutions For Common UI Challenges

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

Writing CSS has probably never been more fun and exciting than it is today. In this post we’ll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS. If you’re interested, we’ve also just recently covered [CSS auditing tools](https://www.smashingmagazine.com/2021/03/css-auditing-tools/), [CSS generators](https://www.smashingmagazine.com/2021/03/css-generators/), [front-end boilerplates](https://www.smashingmagazine.com/2021/06/us

Upcoming Live Workshops On Front-End & UX (Oct 2021–Jan 2022)

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

Do you like a good interface design challenge? What about accessibility testing and design systems? Or maybe Next.js and advanced CSS? With our new online workshops on front-end & design, we cover all of it. Ah, and [here's what our workshops are like](https://vimeo.com/616485526).

Useful React APIs For Building Flexible Components With TypeScript

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

React with JSX is a fantastic tool for making easy-to-use components. Typescript components make it an absolute pleasure for developers to integrate your components into their apps and explore your APIs. Learn about three lesser-known React APIs that can take your components to the next level, and help you build even better React Components in this article.