How to run A/B tests with Next.js and Vercel
Learn how to run A/B tests with Next.js and Vercel Edge Middleware.
Hacking CSS Animation State and Playback Time
In a nutshell, my project is nothing but a carefully scripted long CSS animation. Plus a few instances of the checkbox hack.
Useful JavaScript Data Grid Libraries — Smashing Magazine
In this article, Zara Cooper provides a rundown of some popular data grid libraries that would be a great addition to any data-heavy application and shares recommendations on what factors to consider when choosing a suitable data grid library.
Interpolating Numeric CSS Variables
We can make variables in CSS pretty easily:
Understanding useMemo and useCallback
What's the deal with these two hooks?! Lots of devs find them confusing, for a whole host of reasons. In this tutorial, we'll dig deep and understand what they do, why they're useful, and how to get the most out of them.
How SZA and Integral Studio create at the moment of inspiration
In 2017, Integral Studio chose Vercel & Next.js to create a site that would mirror the creativity of then-up-and-coming artist, SZA. To celebrate the 5-year anniversary and re-release of her Grammy-winning album, they once again turned to Vercel.
When Do You Use CSS Columns?
That ain't rhetorical: I'm really interested in finding great use cases for CSS multi-column layouts.
An Introduction To Context Propagation In JavaScript — Smashing Magazine
React popularized context-propagation within applications with the context API. Evyatar Alush brings a brief intro to context propagation in JavaScript and how you can build React Context yourself.
Improving INP with React 18 and Suspense
Learn how to improve Interaction to Next Paint in React applications by using Suspense and selective hydration.
Approaches for optimizing your dashboard's frontend
Let’s review the techniques and strategies we used to improve the Vercel Dashboard so you can make a data-driven impact on your application.
Zooming Images in a Grid Layout
Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off.
How I Added Scroll Snapping To My Twitter Timeline
CSS Scroll Snap allows websites to snap the web page or any other scroll container to a specific scroll position when the user performs a scrolling operation.
Migration From jQuery to Next.js: A Guide — Smashing Magazine
This guide will show you how to migrate your jQuery site to [React](/category/React) with [Next.js](/category/next.js) – which is a significant undertaking, especially for big code bases. However, this migration allows you to use newer concepts (such as data fetching at build time) to help with our code
Implicit Grids, Repeatable Layout Patterns, and Danglers
Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content
Mastering React’s Stable Values - Shopify
In this post, Colin Gray, Principal Developer at Shopify, delivers a crash course in how to make sense of stable values in React and when they matter most.
Fluid Sizing Instead Of Multiple Media Queries? — Smashing Magazine
If you like math and CSS, you’ll love this one. We don’t need to use media queries to change the values of some CSS properties — *font-size*, *padding*, *margin* etc. — depending on the viewport width, with the CSS `clamp` function. But: we still need to use media queries for changing colors, borders, shadows and other CSS styles.
Scroll Shadows? Pure CSS Parallax? Game Back On.
Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with
Recreating MDN's Truncated Text Effect
It's no secret that MDN rolled out a new design back in March. It's gorgeous! And there are some sweet CSS-y gems in it that are fun to look at. One of those
Testable Frontend: The Good, The Bad And The Flaky — Smashing Magazine
How to organize their testing between unit, integration, and E2E testing and how to test their UI components? Testing is not just about tools and processes. It’s about architecture. In this article, Noam Rosenthal will share his experience on how to organize testing and find the right balance between front-end and subsystems and between different strategies.
Launching Instagram Messaging on desktop
In 2020 we launched Instagram Messaging (referred to in this post simply as “Messaging”) for personal desktop computers. We believe that this feature will improve everyday experiences and enable new use cases for all of our desktop web users. In this post, we go through some of our overall learnings from our desktop users, and […]
vs. : How To Choose The Right One — Smashing Magazine
We may tend to think largely in terms of end-users when it comes to HTML. However, writing HTML that is easy to understand and self-explanatory for whoever will work on it is sufficient reason to use the correct semantic element. In this article, Olushuyi explores a mental model that helps you decide between the `` and `` elements when writing documents. You will explore how grouping content affec
Roundup of Recent Document Outline Chatter
It’s not everyday that HTML headings are the topic de jour, but my folder of saved links is accumulating articles about the recently merged removal of the
Tips & tricks for using GitHub Projects for personal productivity
GitHub Issues is a core component of how developers get things done and, as we built more project planning capabilities into GitHub, we’ve found some fun and unique ways to use the new projects experience for personal productivity.
Building text animations for Instagram Stories
In August 2020, Instagram launched a set of dynamic and fun text styles followed by animations to give people more choices to express themselves on Stories and Reels. This was the first major update to Stories’ text tools since 2016, and we wanted to share how we approached some obstacles we encountered and what we […]
How stroke-dasharray Patterns Work
Say you have a line in SVG:
In Praise of Shadows
Our dear friend Robin has a new essay called In Praise of Shadows. Now, before you hop over there looking for nuggets on CSS box shadows, text shadows, and
Kendo UI For Angular Data Grid And Angular Material: Have Your Cake And Eat It Too — Smashing Magazine
Although Angular Material is one of the most popular component libraries which also offers a table, it lacks some crucial data handling features. In this article, Zara Cooper will examine some of the features of the Kendo UI for Angular Data Grid in comparison to those offered by the Angular Material Table.
Technical Writing for Developers
HTML, CSS, JavaScript, Python, PHP, C++, Dart — there are so many programming languages out there and you may even be totally fluent in several of them! But
Statements Vs. Expressions
One of the most foundational things to understand about JavaScript is that programs are made up of statements, and statements have slots for expressions. In this blog post, we'll dig into how these two structures work, and see how building an intuition about this can help us solve practical problems.
A Look At Remix And The Differences With Next.js — Smashing Magazine
Let’s talk about Remix, the framework to create JavaScript projects using server-side rendering. Let’s go through its main features and concepts and see the similarities and differences with Next.js. Remix became open-source not so long ago, and it has a promising future. Let’s see how it evolves, which features are added, which related projects are created to improve the developer experience, and
Help Shape the Future of CSS-Tricks!
Head's up! The survey closed on July 12, 2022. We got tons of responses — thanks to everyone for helping us out!
Smashing Podcast Episode 48 With Stephanie Eckles: Is Sass Still Relevant? — Smashing Magazine
In this episode, we ask if Sass is still relevant in 2022 and if it adds any value modern CSS workflows. Vitaly talks to expert Stephanie Eckles to find out.
My Wonderful HTML Email Workflow
If you've ever had the misfortune of being tasked with building a template for HTML emails, you know it's tricky business! In this blog post, I share the approach I took to build responsive, client-friendly emails without a single tag.
Demystifying The New Gatsby Framework — Smashing Magazine
Until a few months ago, Gatsby.js was best suited to make not-so-big Jamstack websites, but with the release of Gatsby 4, how well does Gatsby work with big and rapidly-changing pages? And how will it compare to other frameworks like Next.js? Gatsby 4 came out in October 2021 with a lot of new features. It may seem as if Gatsby 4 didn’t cause a big stir among developers, but it brought several gam
Decommissioning your VDI
This blog offers Cloudflare’s perspective on how remote browser isolation can help organizations offload internal web application use cases currently secured by virtual desktop infrastructure (VDI)
Connect to private network services with Browser Isolation
Browser Isolation with private network connectivity enables your users to securely access private web services without installing any software or agents on an endpoint device or absorbing the management and cost overhead of serving virtual desktops
How To Create A Vanilla JavaScript Gantt Chart: Adding Task Editing Features (Part 2) — Smashing Magazine
Gantt Charts are a valuable visualization for project management, planning, and task organization. There are many ways to integrate Gantt Charts into a web application. In this article, we will enhance the Gantt Chart component with some interaction possibilities for editing the jobs. In doing so, we will continue to work with Vanilla JS and Web Components and look at some JavaScript libraries tha
How We Built Hydrogen: A React Framework for Building Custom Storefronts - Shopify
We’ve been building Hydrogen for more than a year. Here’s a look behind the scenes at how we did it, what we learned from making big bets, and what it was like building a new framework from the ground up on experimental technology.
Precise Timing With Web Animations API — Smashing Magazine
In JavaScript, it’s natural to reach for timers when something is to happen on time. But when something is to happen at the exact moment because other things depend on it, you quickly learn timers are more of a problem than a solution. They are never on time, really. Web Animations API could eliminate the need for timers in certain cases while being precise.
How We Built Shopify Party - Shopify
Shopify Party is a browser-based internal tool that we built to make our virtual hangouts more fun. With Shopify’s move to remote, we wanted to explore how to give people a break from video fatigue and create a new space designed for social interaction. Here's how we built it.
Implementing a robust digital identity
How can you robustly assert and identify a user’s identity?
How we think about browsers
Discover how GitHub thinks about browser support, look at usage patterns, and learn about the tools we use to make sure our customers are getting the best experience.
Under the hood: Meta’s cloud gaming infrastructure
The promise of cloud gaming is a promise to democratize gaming. Anyone who loves games should be able to enjoy them and share the experience with their friends, no matter where they’re located, and even if they don’t have the latest, most expensive gaming hardware. Facebook launched its cloud gaming platform in 2020 to give […]
The Future Of Frontend Build Tools — Smashing Magazine
This article explores the concept of tooling for frontend development on the web. You will learn why we need frontend tooling, the various stages of evolution it has gone through, and the new developments that will shape the frontend build tools of the future. To follow along with this article, a general understanding of modern frontend development on the web is necessary.
Simplify Your Color Palette With CSS Color-Mix() — Smashing Magazine
Defining a color palette and theme can be a lot of work, especially when considering contextual colors for elements’ various states. While CSS `color-mix()` *only* blends two colors together, this little function may be the key to maximizing your colors without maximum effort.
How To Build A Group Chat App With Vanilla JS, Twilio And Node.js — Smashing Magazine
In this tutorial, you will learn how to create a group chat app. You will build a backend app using Node.js that will make group chats, authorize chat participants, and maintain sessions for them. The front-end will be built using Vanilla JS, HTML and CSS. It will allow users to log in, make new groups, invite friends, and trade messages. By the end, you should have a working app where multiple pa
Building a Form with Polaris - Shopify
A tutorial to create the basic form design that's meant to introduction to React including additional logic to emulate a fully functional React form.
What’s That (Dev) Tool? — Smashing Magazine
How many browser DevTools panels do you commonly use in your day-to-day web development? One? Three? Probably not that many more. In this article, Patrick Brosset shines the spotlight on a number of tools that people don’t use or even know about. Let’s dive in!
Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D
We’ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background
Manage Accessible Design System Themes With CSS Color-Contrast() — Smashing Magazine
Developing accessible products can be challenging, especially when some of the requirements are beyond the scope of development. It’s one thing to enforce `alt` text for images and labels for form fields, but another to define an accessible color palette. From working with design handoffs to supporting custom themes in a design system, the CSS `color-contrast()` function can become a cornerstone f
Mastering SVG's stroke-miterlimit Attribute
So, SVG has this stroke-miterlimit presentation attribute. You’ve probably seen it when exporting an SVG from a graphic editor program, or perhaps you find
First Look At The CSS object-view-box Property
Ahmad Shadeed — doing what he always does so well — provides an early look at the object-view-box property, something he describes as a native way to crop an
Lesser-Known And Underused CSS Features In 2022 — Smashing Magazine
CSS is constantly evolving, and some cool and useful properties either go completely unnoticed or are not talked about as much as others for some reason or another. In this article, we’ll cover a fraction of those CSS properties and selectors.
Kubernetes For Frontend Developers — Smashing Magazine
Developers are migrating from on-premises technology and embracing the benefits cloud infrastructure offers. Moreso, there is a rapid shift from a monolithic architecture to microservices architecture; this ensures that apps have higher availability, are simple to install, and easy to upgrade with the microservices architecture approach. In this post, we introduced Kubernetes to front-end engineer
Introducing Custom Domains for Workers
Custom Domains are now available for your Workers. Hook up a Worker to any domain you own, and Cloudflare will handle making DNS records and issuing certificates on your behalf
Magical SVG Techniques — Smashing Magazine
SVGs are scalable, flexible, and, most importantly, lightweight. And, well, they have even more to offer than you might think. Smart SVG techniques, from generative SVG grids to SVG paths with masks, grainy SVG gradients, cut-out effects and fractional SVG stars. Let’s look at some magical SVG techniques that you can use right away.
A Community Group for Web-interoperable JavaScript runtimes
The Web-interoperable Runtimes Community Group is a new effort that brings contributors from Cloudflare Workers, Deno, and Node.js together to collaborate on common Web platform API standards.
Cloudflare and StackBlitz partner to deliver an instant and secure developer experience
We’re excited to announce that we’re partnering with StackBlitz. Together, we will bring the Wrangler experience closer to you – directly to your browser, with no dependencies required
Language packs: Meta’s mobile localization solution
More than 3 billion people around the world rely on our services each month. On mobile, around 57 percent of people on Facebook for Android and 49 percent of those on Facebook for iOS use the app in a language other than English. Delivering the best experience for these people, in their own language, is […]
Syntax Highlighting (and More!) With Prism on a Static Site
This post will show you how to implement syntax highlighting on a Next.js blog with the popular Prism.js library.
