Turbopack updates: Moving homes
An update on our progress with Turbopack, details on where we’re headed, and a planned move of Turbopack to the Next.js repository.
CSS One-Liners to Improve (Almost) Every Project
These sorts of roundups always get me. My wife will flip through Zillow photos of the insides of homes for hours because she likes seeing how different people
"If" CSS Gets Inline Conditionals
A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5
Exploring the challenges in creating an accessible sortable list (drag-and-drop)
Drag-and-drop is a highly interactive and visual interface. We often use drag-and-drop to perform tasks like uploading files, reordering browser bookmarks, or even moving a card in solitaire.
Automatically replacing polyfill.io links with Cloudflare’s mirror for a safer Internet
polyfill.io, a popular JavaScript library service, can no longer be trusted and should be removed from websites
Can we reach beyond the echo chamber?
Two creatives behind the browser that’s breaking the internet discuss what Zadie Smith, A24, and sunspots have to do with building a product.
Quick Hit #8
CSS Meditation #8: .work + .life { border: 10px solid #000; }
Quick Hit #6
CSS Meditation #6: The color space is always calc(rgb(0 255 0)+er) on the other side of the fence.
Quick Hit #4
CSS Meditation #4: Select, style, adjust. Select, style, adjust. Select, sty…
Quick Hit #5
CSS Meditation #5: :where(:is(.my-mind))
Quick Hit #3
CSS Meditation #3: A pseudo is as a pseudo does.
Quick Hit #2
CSS Meditation #2: Who gives a flying frick what constitutes a “programming” language.
Quick Hit #1
CSS Meditation #1: If the code works as expected and it fits your mental model, then it’s perfect.
Uniting Web And Native Apps With 4 Unknown JavaScript APIs — Smashing Magazine
Have you heard of the Screen Orientation API? What about the Device Orientation API, Vibration API, or the Contact Picker API? Juan Diego Rodriguez is interested in these under-the-radar web features and discusses how they can be used to create more usable and robust progressive web apps if and when they gain broader support.
What Are CSS Container Style Queries Good For? — Smashing Magazine
What are these CSS Container Style Queries, and why should you use them? Juan Diego Rodríguez delves deeply into style queries, and not at the syntax level, but at what exactly they are solving and what sort of use cases you would find yourselves reaching for them in your work if and when they gain browser support.
MLow: Meta’s low bitrate audio codec
At Meta, we support real-time communication (RTC) for billions of people through our apps, including WhatsApp, Instagram, and Messenger. We are working to make RTC accessible by providing a high-quality experience for everyone – even those who might not have the fastest connections or the latest phones. As more and more people have relied on […]
Useful CSS Tips And Techniques — Smashing Magazine
The times for CSS have probably never been more exciting than today. In this quick read, we’ve got some useful CSS tips and techniques for you that you can apply to your work right away. Let’s dive deeper into self-modifying CSS variables, hanging punctuation, and more.
Test-Driving HTML Templates
When building a server-side rendered web application, it is valuable to test the HTML that's generated through templates. While these can be tested through end-to-end tests running in the browser, such tests are slow and more work to maintain than unit tests. Unit tests, written in the server-side environment, can check for valid HTML, and extract elements with CSS selectors to test the details of
CSS Length Units
A comprehensive guide covering nine types of lengths that CSS uses to size elements in terms of dimensions, space, time, and even sound.
Promises From The Ground Up
The “Promises” API is a surprisingly tricky part of modern JavaScript. Without the right context, it doesn’t make much sense at all! In this tutorial, you’ll build an intuition for how Promises work by getting a deeper understanding of JavaScript and its limitations.
Introducing bytecode caching for Vercel Functions
Vercel's bytecode caching eliminates JavaScript compilation on cold starts by caching V8 bytecode across invocations, reducing TTFB by up to 27% and billed duration by up to 58% for serverless functions.
In Praise Of The Basics — Smashing Magazine
What does it mean to learn the “basics”, or fundamentals, of front-end web development? Is starting with HTML and CSS still the best entry point to learn how to make websites and apps when we have a seemingly endless supply of frameworks? Geoff Graham thinks so and discusses why you might consider going “back to basics” to start or move forward in your career.
Switching It Up With HTML’s Latest Control — Smashing Magazine
After years of relying on checkbox hacks to create a “switch” control for forms that toggle between two states, HTML may be gaining a native way to go about it by adding a `switch` attribute to checkbox inputs. Daniel Yuschick walks us through a first impression of switch controls and discusses current and ongoing considerations that need to be explored further before it is ready for prime time.
Introducing deeper integrations for feature flags in Vercel
Introducing a platform-wide understanding of feature flags in Vercel, and an experimental Next.js design pattern for working with flags in code.
Modern CSS Layouts: You Might Not Need A Framework For That — Smashing Magazine
It’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts. Brecht De Ruyte demonstrates four CSS utility classes (plus a bonus) using techniques that allow them to be used practically anywhere you need a particular layout — be it Grid or Flexbox — with configurable options.
Beyond CSS Media Queries — Smashing Magazine
Juan Diego Rodriguez explains why media queries still occupy a vital role in responsive layouts; only they are now one tool in a larger toolbox with modern techniques that are best when used together.
The Times You Need A Custom @property Instead Of A CSS Variable — Smashing Magazine
Preethi Sam walks through an example that demonstrates where custom properties are more suitable than variables while showcasing the greater freedom and flexibility that custom properties provide for designing complex, refined animations.
The Modern Guide For Making CSS Shapes — Smashing Magazine
In this comprehensive guide, Temani Afif explores different techniques for creating common shapes with the smallest and most flexible code possible.
The Forensics Of React Server Components (RSCs) — Smashing Magazine
React Server Components (RSCs) combine the best of client-side rendering, and author Lazar Nikolov thoroughly examines how we got here with a deep look at the impact that RSCs have on the page load timeline.
Combining CSS :has() And HTML For Greater Conditional Styling — Smashing Magazine
Amit Sheen demonstrates using `:has()` to apply styles conditionally when a certain `` in a `` element is chosen by the user and how we gain even more conditional styling capabilities when chaining `:has()` with other pseudo-classes, such as `:not()` — no JavaScript necessary.
The evolution of Figma’s mobile engine: Compiling away our custom programming language
Figma's team recently converted one of its codebases from a custom programming language to TypeScript without disrupting a single day of development.
Converting Plain Text To Encoded HTML With Vanilla JavaScript — Smashing Magazine
What do you do when you need to convert plain text into formatted HTML? Perhaps you reach for Markdown or manually write in the element tags yourself. Or maybe you have one or two of the dozens of online tools that will do it for you. In this tutorial, Alexis Kypridemos picks those tools apart and details the steps for how we can do it ourselves with a little vanilla HTML, CSS, and JavaScript.
Building an interactive 3D event badge with React Three Fiber
See a full working demo of how we built the interactive Vercel Ship '24 badge using React Three Fiber and react-three-rapier.
CSS in React Server Components
You can’t make an omelette without cracking a few eggs, and when the core React team unveiled their vision for the future of React, some of my favourite libraries got scrambled 😅. In this blog post, we’re going to explore the compatibility issues between React Server Components and CSS-in-JS libraries like styled-components. You’ll understand what the issue is, what the options are, and what’s on
Sliding 3D Image Frames In CSS — Smashing Magazine
Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup and pseudo-elements in the styles to pull it off. Temani Afif applies 3D effects and sliding transitions to a single `` using clever CSS techniques that demonstrate advanced, modern styling practices.
Penpot’s CSS Grid Layout: Designing With Superpowers — Smashing Magazine
Penpot helps designers and developers work better together by offering a free, open-source design tool based on open web standards. Today, let
The anatomy of a component sprint
The Washington Post’s inclusive process for creating new design system components bridges the gap between design and development.
Creating a robust platform for documentation with Next.js and Vercel
How Ruggable saw 300% more organic clicks by optimizing their frontend architecture
Browser Rendering API GA, rolling out Cloudflare Snippets, SWR, and bringing Workers for Platforms to all users
Browser Rendering API is now available to all paid Workers customers with improved session management
We've added JavaScript-native RPC to Cloudflare Workers
Cloudflare Workers now features a built-in RPC (Remote Procedure Call) system for use in Worker-to-Worker and Worker-to-Durable Object communication, with absolutely minimal boilerplate. We've designed an RPC system so expressive that calling a remote service can feel like using a library
Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine
Remember the HTML `` element? It’s deprecated, so it’s not like you’re going to use it when you need some sort of horizontal auto-scrolling feature. That’s where CSS comes in because it has all the tools we need to pull it off. Silvestar Bistrović demonstrates a technique that makes it possible with a set of images and as little HTML as possible.
The Power of :has() in CSS
Hey all you wonderful developers out there! In this post we are going to explore the use of :has() in your next web project. :has() is relatively newish but
Bringing HDR photo support to Instagram and Threads
Meta’s family of apps serves trillions of image download requests every day. And if you’re into high-quality images, you’ve probably noticed that Instagram and Threads have added support for high dynamic range (HDR) photos. Now people on Threads and Instagram can upload and share images that are more true-to-life, with the full color and range […]
Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript — Smashing Magazine
There are many ways to approach a “Dark Mode” feature that respects a user’s system color scheme preferences and allows for per-site customization. Henry Bley-Vroman walks through a new possibility that leans into cutting-edge CSS, with minimal JavaScript to support persisting the user’s color scheme preference across pages.
Revolutionizing video editing on the web with Next.js and Vercel
Leonardo generates 4.5M images daily with Next.js and Vercel
Modern CSS Tooltips And Speech Bubbles (Part 2) — Smashing Magazine
In Part 1 of this series, Temani Afif explored different CSS techniques to create tooltip shapes. The main challenge was to rely on a single element and create optimized code that could easily be controlled using CSS variables to update the size, shape, and position of the tail. In this second part, you are going explore more shapes.
Modern CSS Tooltips And Speech Bubbles (Part 1) — Smashing Magazine
Tooltips are a very common pattern used in CSS for years. There are a lot of ways to approach tooltips in CSS, though some evoke headaches with all the magic numbers they require. In this article, Temani Afif presents modern techniques to create tooltips with the smallest amount of markup and the greatest amount of flexibility.
Insider newsletter digest: Cook up a controller with GitHub Copilot
Whether you’re coding up a storm or cooking up code, building a controller function with AI is your secret sauce to a flavorful app.
Maximize Uptime with Vercel's Frontend Cloud: How Vercel ensures highly available, globally performant dynamic applications. Even during massive traffic spikes.
Vercel's Frontend Cloud is designed with high availability at its core, to maintain uptime for dynamic applications.
Build code security skills with the GitHub Secure Code Game
Learn to find and fix security issues while having fun with Secure Code Game, now with new challenges focusing on JavaScript, Python, Go, and GitHub Actions!
How To Center a Div
Back in the day, centering an element was one of the trickiest things in CSS. As the language has evolved, we’ve been given lots of new tools we can use… But how do we pick the best option? When do we use Flexbox, or CSS Grid, or something else? Let's dig into it.
How To Draw Radar Charts In Web — Smashing Magazine
A radar chart — also commonly called a spider chart — is yet another way to visualize data and make connections. Radar charts are inherently geometric, making them both a perfect fit and fun to make with CSS, thanks to the `polygon()` function. Read along as Preethi Sam demonstrates the process and sprinkles it with a pinch of JavaScript to make a handy, reusable component.
CSS Blurry Shimmer Effect — Smashing Magazine
Taking inspiration from shadows, author Yair Even Or creates the same sort of thing, only with a blurring effect in place of the shadow. Read along for a step-by-step explanation of how it comes together using a combination of masks, gradients, and the good ol’ `backdrop-filter` property.
Insider newsletter digest: Build from anywhere
Explore the August 2023 edition, featuring easy tips and tricks for GitHub Mobile.
The Complex But Awesome CSS border-image Property — Smashing Magazine
The CSS `border-image` property is one of those properties you undoubtedly know exists but may not have ever reached for. In this article, Temani Afif demonstrates different approaches for using `border-image` to create clever decorative accents and shapes.
Common mistakes with the Next.js App Router and how to fix them
Learn how to use the Next.js App Router more effectively and understand the new model.
Forrester Total Economic Impact™ (TEI): Vercel can deliver a 264% return on investment (ROI)
Forrester's Total Economic Impact study found Vercel's Frontend Cloud delivers a three-year 264% ROI and $9.53M in benefits, with 90% less infrastructure management time and 4x more major releases.
The View Transitions API And Delightful UI Animations (Part 2) — Smashing Magazine
The View Transitions API is a new — but game-changing — feature that allows us to do the types of reactive state-based UI and page transitions that have traditionally been exclusive to JavaScript frameworks. In the second half of this mini two-part series, Adrian Bece expands on the demos from the first article to demonstrate how the View Transitions API can be used to transition not just elements
