Highlighted code in slides
I have obsessed about this long enough, I think it’s only fair I (and you!) get some content out of it. When I started writing this article, I was working on my P99 CONF slides. Those slides happen to include some bits of code. And because I’m a perfectionist, I would like this code to be syntax highlighted, like this: let addr : SocketAddr = config . address . parse () ? ; let ln = TcpListener
Solved by CSS: Donuts Scopes
Donut scoping addresses the challenge of preventing parent styles from leaking to nested content. Originating from a 2011 concept by Nicole Sullivan, the issue has evolved, culminating in 2024's @scope at-rule. This allows for more precise CSS styling, safeguarding content from unwanted inheritance while managing global CSS complexities.
Invoker Commands: Additional Ways to Work With Dialog, Popover… and More?
Web browsers are experimenting with two HTML attributes — technically, they’re called “invoker commands” — that are designed to invoke popovers, dialogs, and further down the line, all kinds of actions without writing JavaScript. Although, if you do reach for JavaScript, the new attributes come with some new events that we can listen for.
Complete CSS Course
Do you subscribe to Piccalilli? You should. If you're reading that name for the first time, that would be none other than Andy Bell running the ship and he's reimagined the site from the ground-up after coming out of hibernation this year. You're likely familiar with Andy's great writing here on CSS-Tricks.
Importing a frontend Javascript library without a build system
Anchoreum: A New Game for Learning Anchor Positioning
You've played Flexbox Froggy before, right? Or maybe Grid Garden? They're both absolute musts for learning the basics of modern CSS layout using Flexbox and CSS Grid. Thomas Park made those and he's back with another game: Anchoreum.
Vercel named a Visionary in 2024 Gartner® Magic Quadrant™ for Cloud Application Platforms
Vercel is proud to be recognized as a Visionary; we view this Gartner® Magic Quadrant™ as a validation of the Frontend Cloud ecosystem.
State of CSS 2024 Results
The results from this year's survey are fairly fresh off the presses. We took a little time to sit with them and jot down some things we noticed and found interesting.
Recap: Next.js Conf 2024
Next.js Conf 2024
You can use text-wrap: balance; on icons
The CSS text-wrap property is (rightfully) widely assumed to be used strictly for text elements. But Terrence Eden posted an article on his blog that shows how it can also be used to balance the way other types of elements wrap, including icons.
Mastering theme.json: You might not need CSS
I totally get the goal here: make CSS more modular and scalable in WordPress. Put all your global WordPress theme styles in a single file, including
CSS min() All The Things — Smashing Magazine
Victor Ayomipo experiments with the CSS `min()` function, exploring its flexibility with different units to determine if it is the be-all, end-all for responsiveness. Discover the cautions he highlights against dogmatic approaches to web design based on his findings.
Add 3D to your web projects with v0 and React Three Fiber
How to build 3D web projects with React Three Fiber in v0
2024: More CSS At-Rules Than the Past Decade Combined
More times than I can count, while writing, I get myself into random but interesting topics with little relation to the original post. In the end, I have to
React at Meta Connect 2024
At Meta, React and React Native are more than just tools; they are integral to our product development and innovation. With over five thousand people at Meta building products and experiences with React every month, these technologies are fundamental to our engineering culture and our ability to quickly build and ship high quality products. In […]
Quick Hit #21
Seeing a lot more headlines decrying JavaScript and pumping up PHP. Always interesting to see which direction the front-end zeitgeist is leaning.
From CDNs to Frontend Clouds
Content Delivery Networks (CDNs) and Infrastructure as code (IaC) evolved into the next generation of web application delivery.
SVG Coding Examples: Useful Recipes For Writing Vectors By Hand — Smashing Magazine
Myriam Frisano explores the basics of hand-coding SVGs with practical examples to demystify the inner workings of common SVG elements. In this guide, you’ll learn about asking the right questions to solve common positioning problems and how to leverage JavaScript so that, by the end, you can add “SVG coding” to your toolbox. You’ll also be able to declare proudly, “I know how to draw literal pictu
Creating Custom Lottie Animations With SVGator — Smashing Magazine
Creating ready-to-implement Lottie animations with a single tool is now possible thanks to SVGator’s latest feature updates. In this article, you will learn how to create and animate a Lottie using SVGator, an online animation tool that has zero learning curve if you’re familiar with at least one design tool.
Multiple Anchors
Only Chris, right? You'll want to view this in a Chromium browser:
Two CSS Properties for Trimming Text Box Whitespace
The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear above the
Anchor Positioning Quirks
I am thrilled to say, that from this week onwards, the CSS-Tricks Almanac has an entry for each property, function, and at-rule related to the new Anchor
The Undeniable Utility Of CSS :has
Of all the latest and greatest CSS features, the “:has” pseudo-class wasn’t exactly at the top of my wishlist. Once I started using it, however, I kept discovering incredible things I could do with it. It’s now become a core part of my toolkit! In this blog post, I'll show you some practical real-world problems I solved using “:has”, as well as some wild experiments that blew my mind!
Sticky Headers And Full-Height Elements: A Tricky Combination — Smashing Magazine
Sticky positioning is one of those CSS features that’s pretty delicate and can be negated by a lot of things, so here’s another one to add to your mental catalog: Sticky elements don’t play nicely if they have to coordinate with other elements to make up a combined height, like `100vh`. Philip Braunen explores why this happens and presents a solution to fix it.
The “Other” C in CSS
I think it's worth listening to anything Sara Soueidan has to say. That's especially true if she's speaking at an event for the first time in four years,
Generating Unique Random Numbers In JavaScript Using Sets — Smashing Magazine
Want to create more randomized effects in your JavaScript code? The `Math.random()` method alone, with its limitations, won’t cut it for generating unique random numbers. Amejimaobari Ollornwi explains how to generate a series of unique random numbers using the `Set` object, how to use these random numbers as indexes for arrays, and explores some practical applications of randomization.
Callbacks on Web Components?
A gem from Chris Ferdinandi that details how to use custom events to hook into Web Components. More importantly, Chris dutifully explains why custom events
RTL Styling 101
A couple of weeks ago I was super excited about publishing my first CSS-Tricks post: "Letter Spacing is Broken. Forget about that though, what's important is
Regexes Got Good: The History And Future Of Regular Expressions In JavaScript — Smashing Magazine
Although JavaScript regexes used to be underpowered compared to other modern flavors, numerous improvements in recent years mean that’s no longer true. Steven Levithan evaluates the history and present state of regular expressions in JavaScript with tips to make your regexes more readable, maintainable, and resilient.
All About JavaScript Loops
Every programming language has loops. Loops perform an operation (i.e., a chunk of work) a number of times, usually once for every item in an array or list,
HTML Attribute to Allow/Disallow Handwriting Input
A new explainer for a new HTML attribute to handle handwritten inputs. Like this:
Best Of Pro Scheduler Libraries — Smashing Magazine
For teams working remotely across the globe or together in an office, as well as for any group of collaborating users, a scheduler can be a valuable tool indeed. In this post, you’ll find some of the best commercial web scheduler libraries (JavaScript based) with amazing UX and high efficiency that are currently available.
CSS Olympic Rings
It was a few years ago during the 2020 Olympics in Tokyo 2020 that I made a demo of animated 3D Olympic rings. I like it, it looks great, and I love the
It’s Time To Talk About “CSS5” — Smashing Magazine
Have you ever wondered what happened after CSS3? It’s common knowledge that we never saw CSS4 come after it, yet we have a plethora of new features that have no similar way of defining when they were introduced. The W3C CSS-Next community group is actively searching for better approaches for how we describe the evolution of CSS over time and identify feature sets as effectively as we did with CSS3
CSS Functions and Mixins Module Notes
Most days, I'm writing vanilla CSS. Thanks to CSS variables and nesting, I have fewer reasons to reach for Sass or any other preprocessor. The times I reach
Javascript SEO: How Google Crawls, Renders & Indexes JS
Over the years, Google's treatment of JavaScript has changed, leaving us with misconceptions of how it's indexed. Here, we debunk the myths.
Flags as Code in Next.js
The Flags SDK is a free open-source library that gives developers the tools they need to use feature flags in Next.js and SvelteKit applications.
Elkjøp's Digital Transformation: Powering Retail Innovation with Next.js and Vercel
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.
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.
