Strut Your Stuff With a Custom Scrollbar
The first time I had my breath taken away by a humble scrollbar was on this very site. When CSS-Tricks v17 rolled out with its FAT CHONKY BOI, my jaw dropped.
Care for the Text
How do you make a great website? Everyone has an answer at the ready: Flashy animations! The latest punk-rock CSS trick! Gradients! Illustrations! Colors to
Creating A Custom Range Input That Looks Consistent Across All Browsers — Smashing Magazine
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.
The surprising behavior of !important in CSS custom property values
Huh! I did not realize that CSS custom properties had their own resolution behavior for how !important works in their values. Uh, despite writing a guide
Topological sort
Jordan Scales explores the computer science concept of topological sorting, and what it might look like if applied to the concept of z-index in CSS. So, you
HTML Sanitizer API
Three cheers for (draft stage) progress on a Sanitizer API! It's gospel that you can't trust user input. And indeed, any app I've ever worked on has dealt
Maybe there kinda is background-opacity?
I was reading Jake's "Cross-fading any two DOM elements is currently impossible" which is a wonderfully nerdy deep dive into how there is no real way to
CSS-Tricks Chronicle XLI
Ya know, I used to do one of these posts after making a few podcast appearances I hadn't had a chance to link up yet, so I could share them. As fate would
Standardizing Focus Styles With CSS Custom Properties
Take two minutes right now and visit your current project in a browser. Then, using only the Tab key, you should be able to navigate between interactive
Spicy Sections
What if HTML had "tabs"? That would be cool, says I. Dave has been spending some of his time and energy, along with a group of "Tabvengers" from OpenUI, on
How To Protect Your API Key In Production With Next.js API Route — Smashing Magazine
There’s a great challenge that comes with building Jamstack applications on the web. In this article, Caleb Olojo will be using Next.js to bootstrap your app. This does not mean that the [create-react-app](https://create-react-app.dev/) library will not work. You can make use of any one that you find convenient. You’re using Next.js because of the many perks that come with it.
Diagonal Stripes Wipe Animation
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
Recreating the Apple Music Hits Playlist Animation in CSS
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
3D CSS Flippy Snaps With React And GreenSock — Smashing Magazine
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. With that mindset, every idea is bound to become an opportunity to try something new. It’s fun to make things that we may not create on a day-to-day basis. Demos like this can pose different challenges a
A Handy Little System for Animated Entrances in CSS
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
Building an App Clip with React Native - Shopify
Being the first to build an App Clip in React Native that was going to be surfaced to millions of Shopify's Shop app users each day proved to be a challenging task.
How To Maintain A Large Next.js Application — Smashing Magazine
There are a few ways in which you can make a large code-base easy to maintain. 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. Most of these points will apply to any front-end application. For any front-end application, the main prior
Creating Generative Patterns with The CSS Paint API
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,
A Modern CSS Reset
I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!
Adding A Dyslexia-Friendly Mode To A Website — Smashing Magazine
The separation of content and presentation that CSS gives us always comes in handy when we need to adapt designs to better serve different communities. With a little CSS, we can adapt our web designs to be more accommodating for people with dyslexia. In this article, John C Barstow will explore those techniques by adding a dyslexia-friendly mode to an existing design.
Smashing Workshops: Winter 2021 — Smashing Magazine
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).
Announcing native support for Stripe’s JavaScript SDK in Cloudflare Workers
Handling payments inside your apps is crucial to building a business online. For many developers, the leading choice for handling payments is Stripe.
Next.js Wildcard Subdomains — Smashing Magazine
Wildcard domains often go under the radar. 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.
The Gap (Design Engineering)
Egor Kloos describes a situation where a (purely visual) designer asks for some changes to a component. There is a misunderstanding where the (code monkey)
A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH — Smashing Magazine
Did you know that your chosen color palette can have an impact on how much energy your website uses? Even a more environmentally friendly choice of colors can reduce the impact on the battery life of mobile devices. In this article, Michelle Barker shares advice on the not-so-obvious things you have to keep in mind when handling colors in CSS today.
Automatically generating types for Cloudflare Workers
Every time the Workers runtime code is built, a script runs over the public APIs and generates the Rust and TypeScript types as well as a JSON file containing an intermediate representation of the static types. The types are sent to the appropriate repositories and the JSON file is uploaded as well.
JavaScript modules are now supported on Cloudflare Workers
Now you can use JavaScript modules, also known as ECMAScript or “ES” modules, on Cloudflare Workers. This replaces the old “addEventListener” syntax with a new “import” and “export” semantics that makes it really easy to write reusable, modular code.
Generate a Pull Request of Static Content With a Simple HTML Form
Jamstack has been in the website world for years. Static Site Generators (SSGs) — which often have content that lives right within a GitHub repo itself — are
Introducing “Shadow Palette Generator”
In order to create lush, realistic shadows in CSS, we need to use multiple layers and colors. How do we come up with all of the parameters, though? I've built a tool that'll help.
Developer Spotlight: Winning a Game Jam with Jamstack and Durable Objects
Guido won the innovative category in one of the biggest Game Jams with a combination of Pages, Durable Objects, modern browser APIs, and a hefty amount of ingenuity.
Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library
Theming UI refers to the ability to perform a change in visual styles in a consistent manner that defines the “look and feel” of a site. Swapping color
Other Looks at the Conditional Border Radius Trick
Remember when Ahmad Shadeed wrote about that border-radius "toggle" he found in Facebook's CSS? It was interesting! I covered it. A few weeks after that surge
Useful React Hooks That You Can Use In Your Projects — Smashing Magazine
React class-based components are messy, confusing, hard for humans and machines. But before React 16.8, class-based components were mandatory for any projects that require states, life-cycle methods, and many other important functionalities. All these changed with the introduction of hooks in React 16.8. Hooks are game-changers. They have simplified React, made it neater, easier to write and debug
Semantic menu context
Scott digs into the history of the <menu> element. He traced it as far back as HTML 2 (!) in a 1994 changelog. The vibe then, it seems, was to mark up a
Quick and Dirty Bootstrap Overrides at Runtime
Bootstrap 5.2 shipped with solutions for the methods covered in this post. So, if you're using Bootstrap 5.2 or newer, you should be able to tinker with CSS
Detecting Specific Text Input with HTML and CSS
Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where:
React Suspense: Lessons Learned While Loading Data
Suspense is React’s forthcoming feature that helps coordinate asynchronous actions—like data loading—allowing you to easily prevent inconsistent state in your
Localizing Your Next.js App — Smashing Magazine
Internationalized routing is not exactly a new feature on Next.js. (It has been out since [v.10](https://nextjs.org/blog/next-10).) 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. Keep reading if you enjoy self-documented code, lean bundle-sizes and
The State Initializer Pattern
A simple pattern used in libraries like downshift and ReachUI to enable component/hook users to initialize your state and even reset it to that initial value.
Introducing Svelte, and Comparing Svelte with React and Vue
Josh Collingsworth is clearly a big fan of Svelte, so while this is a fun and useful comparison article, it's here to crown Svelte the winner all the way
Scroll-Linked Animations With the Web Animations API (WAAPI) and ScrollTimeline
The Scroll-linked Animations specification is an upcoming and experimental addition that allows us to link animation-progress to scroll-progress: as you
GraphQL On The Front-End (React And Apollo) — Smashing Magazine
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. In this article, David Atanda will cover advanced topics to achieve real-time update of data using the update() function, subscription, and Optimistic UI. All in a bit to improve user experien
How to React ⚛️
Let's see how learning React ⚛️ in the right order can make it less overwhelming.
A Deep Dive Into Serverless UI With TypeScript — Smashing Magazine
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.
Responsible JavaScript
High five to Jeremy on the big release of Responsible JavaScript on A Book Apart. There is a lot of talk about how the proliferation of JavaScript has had a
Proxying Third-Party JavaScript as First-Party JavaScript (and the Potential Effect on Analytics)
First, check out how incredibly easy it is to write a Cloudflare Worker to proxy another URL:
CSS-ing Candy Ghost Buttons
Recently, while looking for some ideas on what to code as I have zero artistic sense so the only thing I can do is find pretty things that other people have
Building an Angular Data Grid With Filtering
Kendo UI makes it possible to go from a basic idea to a full-fledged app, thanks to a massive component library. We're talking well over 100 components that
Get a catch block error message with TypeScript
TypeScript forces you to acknowledge you can't know what was thrown making getting the error message a pain. Here's how you can manage it.
Sticky Definition Lists
I ran across this 30 seconds of code website the other day, and they have a CSS section which is really good! The first example snippet I looked at was this
Optimizing Next.js Applications With Nx — Smashing Magazine
Nx is a build framework that facilitates optimization, efficient scaling of applications, and other features such as shared libraries and components. In this article, Melvin Kosisochukwu will be looking at how you can effectively scale Next.js applications by using Nx. If you’re a developer looking to optimize applications and create reuseable components across applications, this article is for yo
The Greatest CSS Tricks Vol. I eBook (PDF and EPUB)
When I wrote the "book" The Greatest CSS Tricks Vol. I, I put "book" in quotes because there wasn't anything terribly book-like about it. The only way you
A Deep Dive Into object-fit And background-size In CSS — Smashing Magazine
If we use a width and height that isn’t proportional to the image’s aspect ratio, the image might either be compressed or stretched. That isn’t good, and it can be solved either with object-fit for an img element or by using background-size. In this article, Ahmad Shadeed will go through how `object-fit` and `background-size` work, when you can use them, and why, along with some practical use case
An Introduction To Quasar Framework: Building Cross-Platform Applications — Smashing Magazine
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.
Can Include (a Certain HTML element within another Certain HTML Element)
A single-serving website from Alexander Vishnyakov for testing if it's valid to put any particular HTML element within another type of HTML element. Kinda
Exploring the CSS Paint API: Rounding Shapes
Adding borders to complex shapes is a pain, but rounding the corner of complex shapes is a nightmare! Luckily, the CSS Paint API is here to the rescue! That’s
What if… you could use Visual Studio Code as the editor of in-browser Developer Tools?
It's not uncommon for my front-end workflow to go something like this:
Building The SSG I’ve Always Wanted: An 11ty, Vite And JAM Sandwich — Smashing Magazine
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](https://slinkity.dev/).
Introducing the Payment Element
Today, we're introducing the Payment Element, an embeddable UI component for your checkout flow that supports 18 payment methods with a single integration.
An Interview With Elad Shechter on "The New CSS Reset"
Hey folks! Elad reached out to me to show me his new CSS reset project called the-new-css-reset. It’s quite interesting! I thought a neat way to share it with
