Different Ways to Get CSS Gradient Shadows
It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does
Discovering Primitive Objects In JavaScript (Part 1) — Smashing Magazine
In the first part of the series, Kirill Myshkin covers some aspects of JavaScript that help bring objects closer to primitive values, which allow benefiting from common language features that aren’t usually associated with an object, like comparisons and arithmetic operators.
Bringing Javascript to WebAssembly for Shopify Functions - Shopify
While we’re working on getting our Shopify Functions infrastructure ready for the public beta, we thought we’d use this opportunity to shine some light on how we brought JavaScript to WebAssembly, how we made everything fit within our very tight Shopify Function constraints, and what our plans for the future look like.
Picture Perfect: Meet Pixo, A Photo Editor For Your End Users — Smashing Magazine
With so many image editing services available nowadays, it’s good to have one good solution that is applicable for all websites and web apps that need to provide image editing as a feature. Hristo Chakarov explains how Pixo Editor’s easy integration (just a few JavaScript lines) and rich API can save your time and improve your end users’ workflow.
Moving from Gatsby to Next.js
Navigating large scale migrations
From newsletter to global media brand with a frontend cloud
How To Build A Magazine Layout With CSS Grid Areas — Smashing Magazine
Web development, especially what you can do with CSS, has become increasingly complex. With the added capabilities of CSS Grid, it is now possible to achieve layouts that look like they were laid out by hand. Let’s tackle a practical example of how to do something like that.
How Pinterest’s design systems team measures adoption
The Gestalt team tells us how they used Figma’s REST API to create FigStats, a dashboard for visualizing component usage.
Comparing React Form Libraries: SurveyJS, Formik, React Hook Form, React Final Form And Unform — Smashing Magazine
In handling forms in React, you can either set up a custom solution or reach out to one of the many form libraries available. In this article, we compare some React Libraries: SurveyJS, Formik, React Hook Form, React Final Form, and Unform.
Understanding App Directory Architecture In Next.js — Smashing Magazine
The new App Directory architecture has been the main character of the recent Next.js release, which keeps bringing up many questions. In this article, Atila Fassina explores the advantages and pitfalls of this new strategy and reflects on whether you should use it in production now or not.
Super serves thousands of domains from a single codebase with Next.js and Vercel
Easy SVG Customization And Animation: A Practical Guide — Smashing Magazine
Developers often feel discouraged from editing SVG markup and experimenting with SVG animations, thinking it’s a significant time investment or they need to use a complex animation library to do so. In this article, Adrian showcases his favorite tricks, which make the process streamlined and fun.
AR, VR, and a Model for 3D in HTML
Tucked down somewhere in the Safari Technology Preview 161 release notes is a seemingly innocous line about support for a new HTML element and attribute:
Creating A High-Contrast Design System With CSS Custom Properties — Smashing Magazine
Managing our colors can truly help people to access our content. In this article, Brecht de Ruyte takes a deep dive into how we can create a high-contrast system while maintaining a balance between designing something accessible and respecting the look and feel of a brand.
How Plex 6x their impressions deploying Next.js on Vercel
Animating CSS Grid (How To + Examples)
I’m pleased to shine a light on the fact that the CSS grid-template-rows and grid-template-columns properties are now animatable in all major web browsers!
Level Up Your CSS Skills With The :has() Selector — Smashing Magazine
The CSS relational selector :has() offers what was previously impossible without JavaScript. Let’s explore some magical powers that :has brings.
More Real-World Uses for :has()
The :has() pseudo-class is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took the State of CSS
Making Your React Native Gestures Feel Natural - Shopify
When working with draggable elements in React Native mobile apps, there are some simple ways to help gestures and animations feel better and more natural.
The Key To Good Component Design Is Selfishness — Smashing Magazine
In this article, Daniel Yuschick demonstrates that building selfish components is the key approach to avoiding different pitfalls on the way to good component design.
Improving readability with React Wrap Balancer
React Wrap Balancer tidies up bad typography and matches line lengths on the fly.
:has is an unforgiving selector
A little thing happened on the way to publishing the CSS :has() selector to the ol' Almanac. I had originally described :has() as a "forgiving" selector, the
Faking Min Width on a Table Column
The good ol’ <table> tag is the most semantic HTML for showing tabular data. But I find it very hard to control how the table is presented, particularly
Making Your Collaboration Problems Go Away By Sharing Components — Smashing Magazine
Recently UXPin has extended its powerful Merge technology by adding npm integration, allowing designers to sync React component libraries without requiring any developer input. This new step aims to improve collaboration between designers and developers.
Building a global streetwear label with Next.js
Styling Buttons in WordPress Block Themes
A little while back, Ganesh Dahal penned a post here on CSS-Tricks responding to a tweet that asked about adding CSS box shadows on WordPress blocks and
Data Binding in React
As developers, we don't like working with forms, but they're a critical part of most web applications! In this tutorial, you'll learn exactly how to wire up all of the different form controls in React. Never forget how to data-bind a checkbox or radio button again!
ES Module imports in Node.js and the browser - Eli Bendersky's website
React Native Skia: A Year in Review and a Look Ahead - Shopify
A look at React Native Skia in 2022 and what kept Christian Falch, Colin Gray, and William Candillon busy. Plus, a look at what's ahead for the library in 2023.
Migrating our Largest Mobile App to React Native - Shopify
In 2020, we announced that React Native is the future of mobile at Shopify. As part of that journey, we’ve been migrating Shopify Mobile (our largest app at 300 screens per platform) from native to React Native. Here’s how it’s going.
A Guide To Command-Line Data Manipulation — Smashing Magazine
No more random scripts in Python and JavaScript to transform CSV or JSON data. In this article, Alvin Bryan shows you how to use Miller, a small and powerful CLI tool, to do all your data processing.
Deploying CSS Logical Properties On Web Apps — Smashing Magazine
You may have already heard of CSS logical properties or RTL adaptations but are still deciding whether to deploy them widely. To help raise your awareness of their possibilities, Nicolas Hoffmann shares his experience of how he and his team at Proton carried out a massive move from CSS logical props to production and how you can consider them from a different perspective in your very own projects.
Progress on the Block Protocol
Since the 1990s, the web has been a publishing place for human-readable documents. Documents published on the web are in HTML. HTML has a little bit of… Read more “Progress on the Block Protocol”
Build a powerful notification system with Next.js and Knock
Notifications on Vercel
A Few Times Container Size Queries Would Have Helped Me Out
CSS Container Queries are still gaining traction and many of us are getting our hands wet with them, even if it’s for little experiments or whatnot. They’ve
Creating an accessible search experience with the QueryBuilder component
GitHub’s search inputs have several complex accessibility considerations. Let’s dive into what those are, how we addressed them, and talk about the standalone, reusable component that was ultimately built.
Animated Background Stripes That Transition on Hover
Learn to make background stripes that transition on hover, using a creative mix of CSS gradients, blend modes, and background sizing.
Migrate a large, open-source React application to Next.js and Vercel
Learn how we approached migrating the BBC's large, open-source React application to Next.js and Vercel to see both developer and user experience benefits.
Adding Box Shadows to WordPress Blocks and Elements
The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.
CSS Infinite and Circular Rotating Image Slider
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 Anatomy Of Themed Design System Components — Smashing Magazine
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
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
Using The New Constrained Layout In WordPress Block Themes
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.
With Next.js, Vercel, and Sanity, Loom empowers every team to iterate
Color Formats in CSS
CSS gives us so many options when it comes to expressing color—we can use hex codes, rgb, hsl, and more. Which option should we choose? This turns out to be a surprisingly important decision! In this article, we'll take a tour of color formats in CSS, and see which option will serve us best.
Document Object Model (DOM) Geometry: A Beginner’s Introduction And Guide — Smashing Magazine
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.
Taming the Cascade With BEM and Modern CSS Selectors
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
A Guide To Keyboard Accessibility: JavaScript (Part 2) — Smashing Magazine
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.
Improving Workers TypeScript support: accuracy, ergonomics and interoperability
Today, we’re excited to announce the next major release of Workers TypeScript definitions with a bunch of improvements, and the open-sourcing of the new automatic generation scripts.
The most programmable Supercloud with Cloudflare Snippets
Today we are announcing Cloudflare Snippets. Snippets are a simple way of executing a small piece of Javascript on select HTTP requests, using the ruleset engine filtering logic.
Incremental adoption of micro-frontends with Cloudflare Workers
With Cloudflare Workers, our fragment-based micro-frontend architecture, and fragment piercing technique, engineering teams can incrementally improve large frontends in a fraction of the time, yielding significant user and developer experience gains.
What We Learned from Open-Sourcing FlashList - Shopify
Here's how we launched the React Native List library FlashList as an open-source project, and how you can make your next open-source project a success.
Automate an isolated browser instance with just a few lines of code
Workers Browser Rendering API is our out-of-the-box solution for simplifying developer workflows, including capturing images or screenshots, by running browser automation in Workers. If you’re interested, sign up for the waitlist.
Classy and Cool Custom CSS Scrollbars: A Showcase
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
A Guide To Keyboard Accessibility: HTML And CSS (Part 1) — Smashing Magazine
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.
CSS Grid and Custom Shapes, Part 3
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
What CSS Do You Absolutely Have to Know in 2022?
Sacha Greif openly wondered whether CSS has gotten to be, you know, too big. With all the goodies that've shipped in browsers the past couple of years —
What’s New In Next.js 13? — Smashing Magazine
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.
New Smashing Front-End & UX Workshops — Smashing Magazine
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.
Using Vercel comments to improve the Next.js 13 documentation
Help us build the Next.js 13 documentation by commenting directly on the docs themselves.