Hugo Campos
@hugocampos.bsky.social
Senior Software Engineer at the Esri R&D Center in Zurich. Working on the ArcGIS Maps SDK for JavaScript. Typescript, CSS, Web Components, WebGL, GIS. He/Him
Reposted by Hugo Campos
Wrote about how our testing strategy evolved to include visual regression testing and how we can generate hundreds of tests in a handful of lines of code
Spoiler: turns out high school math can be useful after all 😶🌫️
macarie.me/writing/when...
Spoiler: turns out high school math can be useful after all 😶🌫️
macarie.me/writing/when...
When Manual Testing Becomes Unsustainable · Raul Macarie
At some point, checking every visual variant by hand becomes impossible. This is about that turning point, and what came after.
macarie.me
November 11, 2025 at 6:15 PM
Wrote about how our testing strategy evolved to include visual regression testing and how we can generate hundreds of tests in a handful of lines of code
Spoiler: turns out high school math can be useful after all 😶🌫️
macarie.me/writing/when...
Spoiler: turns out high school math can be useful after all 😶🌫️
macarie.me/writing/when...
Reposted by Hugo Campos
Storybook 10 is here!
✂️ ESM-only (the only breaking change!)
🧩 Module automocking for easier testing
🏭 Typesafe CSF factories Preview for React
💫 UI editing and sharing optimizations
🏷️ Tag filtering exclusion for sidebar management
🔀 Svelte async component support
✂️ ESM-only (the only breaking change!)
🧩 Module automocking for easier testing
🏭 Typesafe CSF factories Preview for React
💫 UI editing and sharing optimizations
🏷️ Tag filtering exclusion for sidebar management
🔀 Svelte async component support
Storybook 10
ESM-only, 29% lighter, module automocking, and more
storybook.js.org
November 4, 2025 at 7:02 PM
Storybook 10 is here!
✂️ ESM-only (the only breaking change!)
🧩 Module automocking for easier testing
🏭 Typesafe CSF factories Preview for React
💫 UI editing and sharing optimizations
🏷️ Tag filtering exclusion for sidebar management
🔀 Svelte async component support
✂️ ESM-only (the only breaking change!)
🧩 Module automocking for easier testing
🏭 Typesafe CSF factories Preview for React
💫 UI editing and sharing optimizations
🏷️ Tag filtering exclusion for sidebar management
🔀 Svelte async component support
Reposted by Hugo Campos
🔥 Hot off the press 🔥
You can you can finally style anchored elements based on their fallback position in CSS!
Meet the CSS anchored container query 🤝
container-type: anchored
@container anchored(fallback:)
(landing in Chrome 143)
developer.chrome.com/blog/anchore...
You can you can finally style anchored elements based on their fallback position in CSS!
Meet the CSS anchored container query 🤝
container-type: anchored
@container anchored(fallback:
(landing in Chrome 143)
developer.chrome.com/blog/anchore...
Detect fallback positions with anchored container queries from Chrome 143 | Blog | Chrome for Developers
Detect fallback positions with anchored container queries from Chrome 143
developer.chrome.com
October 30, 2025 at 1:39 PM
🔥 Hot off the press 🔥
You can you can finally style anchored elements based on their fallback position in CSS!
Meet the CSS anchored container query 🤝
container-type: anchored
@container anchored(fallback:)
(landing in Chrome 143)
developer.chrome.com/blog/anchore...
You can you can finally style anchored elements based on their fallback position in CSS!
Meet the CSS anchored container query 🤝
container-type: anchored
@container anchored(fallback:
(landing in Chrome 143)
developer.chrome.com/blog/anchore...
Reposted by Hugo Campos
Vitest 4 is out!
- Browser Mode is Stable
- Visual Regression Testing
- Improved Debugging
- Pool Stabilization
- New APIs
- Bug Fixes
Stay updated with our blog post:
vitest.dev/blog/vitest-4
- Browser Mode is Stable
- Visual Regression Testing
- Improved Debugging
- Pool Stabilization
- New APIs
- Bug Fixes
Stay updated with our blog post:
vitest.dev/blog/vitest-4
Announcing Vitest 4.0
Vitest 4.0 Release Announcement
vitest.dev
October 22, 2025 at 3:43 PM
Vitest 4 is out!
- Browser Mode is Stable
- Visual Regression Testing
- Improved Debugging
- Pool Stabilization
- New APIs
- Bug Fixes
Stay updated with our blog post:
vitest.dev/blog/vitest-4
- Browser Mode is Stable
- Visual Regression Testing
- Improved Debugging
- Pool Stabilization
- New APIs
- Bug Fixes
Stay updated with our blog post:
vitest.dev/blog/vitest-4
Reposted by Hugo Campos
⚓ Oxlint now supports plugins written in JavaScript ⚓
Developers can customize and extend Oxlint using JavaScript, but at a speed approaching Rust, due to 'raw transfer' between Rust and JS, and other breakthroughs
Many ESLint plugins can run without any modification.
Read the full post👇
Developers can customize and extend Oxlint using JavaScript, but at a speed approaching Rust, due to 'raw transfer' between Rust and JS, and other breakthroughs
Many ESLint plugins can run without any modification.
Read the full post👇
October 20, 2025 at 11:19 AM
⚓ Oxlint now supports plugins written in JavaScript ⚓
Developers can customize and extend Oxlint using JavaScript, but at a speed approaching Rust, due to 'raw transfer' between Rust and JS, and other breakthroughs
Many ESLint plugins can run without any modification.
Read the full post👇
Developers can customize and extend Oxlint using JavaScript, but at a speed approaching Rust, due to 'raw transfer' between Rust and JS, and other breakthroughs
Many ESLint plugins can run without any modification.
Read the full post👇
Reposted by Hugo Campos
ECMAScript excitement 😉
Congrats to proposal champion Dan Minor @mozilla.org on shipping the TC39 Stage 3 Upsert proposal in Firefox 144 🎉
let map = new Map();
map.getOrInsert(key, defaultVal);
It lets you set a default value on a map key without overwriting an existing value 👍
Congrats to proposal champion Dan Minor @mozilla.org on shipping the TC39 Stage 3 Upsert proposal in Firefox 144 🎉
let map = new Map();
map.getOrInsert(key, defaultVal);
It lets you set a default value on a map key without overwriting an existing value 👍
October 14, 2025 at 7:06 PM
ECMAScript excitement 😉
Congrats to proposal champion Dan Minor @mozilla.org on shipping the TC39 Stage 3 Upsert proposal in Firefox 144 🎉
let map = new Map();
map.getOrInsert(key, defaultVal);
It lets you set a default value on a map key without overwriting an existing value 👍
Congrats to proposal champion Dan Minor @mozilla.org on shipping the TC39 Stage 3 Upsert proposal in Firefox 144 🎉
let map = new Map();
map.getOrInsert(key, defaultVal);
It lets you set a default value on a map key without overwriting an existing value 👍
Reposted by Hugo Campos
inherit() is going to be absolutely huge for working with CSS custom properties. Two big things it'll enable:
Nested indentation:
--indent: calc(inherit(--indent, 0) + 1);
Overridable design token defaults:
--primary-color: inherit(--primary-color, blue);
Nested indentation:
--indent: calc(inherit(--indent, 0) + 1);
Overridable design token defaults:
--primary-color: inherit(--primary-color, blue);
Blink: Intent to Prototype: The inherit() CSS function
Blink: Intent to Prototype: The inherit() CSS function
Blink: Intent to Prototype: The inherit() CSS function
groups.google.com
October 14, 2025 at 2:23 PM
inherit() is going to be absolutely huge for working with CSS custom properties. Two big things it'll enable:
Nested indentation:
--indent: calc(inherit(--indent, 0) + 1);
Overridable design token defaults:
--primary-color: inherit(--primary-color, blue);
Nested indentation:
--indent: calc(inherit(--indent, 0) + 1);
Overridable design token defaults:
--primary-color: inherit(--primary-color, blue);
Reposted by Hugo Campos
React 19.2 is now available!
This release includes Activity, useEffectEvent, React Performance Tracks, partial pre-rendering, and more:
react.dev/blog/2025/10...
This release includes Activity, useEffectEvent, React Performance Tracks, partial pre-rendering, and more:
react.dev/blog/2025/10...
React 19.2 – React
The library for web and native user interfaces
react.dev
October 1, 2025 at 9:49 PM
React 19.2 is now available!
This release includes Activity, useEffectEvent, React Performance Tracks, partial pre-rendering, and more:
react.dev/blog/2025/10...
This release includes Activity, useEffectEvent, React Performance Tracks, partial pre-rendering, and more:
react.dev/blog/2025/10...
Reposted by Hugo Campos
I'm very excited to announce the release of the #WebComponents CLI validator! Now you can validate your web components in your build pipelines.
#html #javascript
#html #javascript
October 1, 2025 at 1:08 PM
I'm very excited to announce the release of the #WebComponents CLI validator! Now you can validate your web components in your build pipelines.
#html #javascript
#html #javascript
Reposted by Hugo Campos
Next version of Browser Mode now also support playwright's trace viewer natively. Just pass down `--browser.trace=on`: main.vitest.dev/guide/browse...
Vitest
Next generation testing framework powered by Vite
main.vitest.dev
September 30, 2025 at 2:34 PM
Next version of Browser Mode now also support playwright's trace viewer natively. Just pass down `--browser.trace=on`: main.vitest.dev/guide/browse...
Reposted by Hugo Campos
New post on big general type-checker improvements. How `specification.md` can be used to test both features and performance. And perhaps what is up for version 0.1.0...
Specification, speed and (a) schedule
356, 11.16 and a future 0.1.0 ?
kaleidawave.github.io
September 24, 2025 at 8:29 PM
New post on big general type-checker improvements. How `specification.md` can be used to test both features and performance. And perhaps what is up for version 0.1.0...
Reposted by Hugo Campos
We’re live!! My brand-new course, “Whimsical Animations”, is now available. 🥳🎉
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
Whimsical Animations
Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas. I’m sharing all my tricks in this one!
whimsy.joshwcomeau.com
September 24, 2025 at 2:56 PM
We’re live!! My brand-new course, “Whimsical Animations”, is now available. 🥳🎉
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
whimsy.joshwcomeau.com
I’m so excited to share all of my animation tools and techniques with y’all. 😄
Reposted by Hugo Campos
TypeScript excitement 😉
TS 6.0 will enable "noUncheckedSideEffectImports" by default 🎉
This increases type safety by erroring if you try to import a non-existent file.
Thanks for @arnaud-barre.bsky.social for pitching & @searyanc.dev for manually coding the PR 👍
github.com/microsoft/Ty...
TS 6.0 will enable "noUncheckedSideEffectImports" by default 🎉
This increases type safety by erroring if you try to import a non-existent file.
Thanks for @arnaud-barre.bsky.social for pitching & @searyanc.dev for manually coding the PR 👍
github.com/microsoft/Ty...
Enable `noUncheckedSideEffectImports` by default by RyanCavanaugh · Pull Request #62443 · microsoft/TypeScript
#62442 doesn't seem to be going well
Fixes #62421
github.com
September 22, 2025 at 8:10 PM
TypeScript excitement 😉
TS 6.0 will enable "noUncheckedSideEffectImports" by default 🎉
This increases type safety by erroring if you try to import a non-existent file.
Thanks for @arnaud-barre.bsky.social for pitching & @searyanc.dev for manually coding the PR 👍
github.com/microsoft/Ty...
TS 6.0 will enable "noUncheckedSideEffectImports" by default 🎉
This increases type safety by erroring if you try to import a non-existent file.
Thanks for @arnaud-barre.bsky.social for pitching & @searyanc.dev for manually coding the PR 👍
github.com/microsoft/Ty...
Reposted by Hugo Campos
ECMAScript excitement 😉
Next week's TC39 meeting has a packed agenda:
🔼 Amount
🔼 Array.prototype.pushAll
🔶 AsyncContext
🔶 Await Dictionary
🔼 Import Bytes
🔶 Intl Era Month Code
🔼 Iterator Chunking
🔶 new Global()
🔼 Non-extensible applies to private
🔼 Promise Adoption
🔼 Promise Predicate
🔶 Temporal
Next week's TC39 meeting has a packed agenda:
🔼 Amount
🔼 Array.prototype.pushAll
🔶 AsyncContext
🔶 Await Dictionary
🔼 Import Bytes
🔶 Intl Era Month Code
🔼 Iterator Chunking
🔶 new Global()
🔼 Non-extensible applies to private
🔼 Promise Adoption
🔼 Promise Predicate
🔶 Temporal
September 20, 2025 at 11:17 AM
ECMAScript excitement 😉
Next week's TC39 meeting has a packed agenda:
🔼 Amount
🔼 Array.prototype.pushAll
🔶 AsyncContext
🔶 Await Dictionary
🔼 Import Bytes
🔶 Intl Era Month Code
🔼 Iterator Chunking
🔶 new Global()
🔼 Non-extensible applies to private
🔼 Promise Adoption
🔼 Promise Predicate
🔶 Temporal
Next week's TC39 meeting has a packed agenda:
🔼 Amount
🔼 Array.prototype.pushAll
🔶 AsyncContext
🔶 Await Dictionary
🔼 Import Bytes
🔶 Intl Era Month Code
🔼 Iterator Chunking
🔶 new Global()
🔼 Non-extensible applies to private
🔼 Promise Adoption
🔼 Promise Predicate
🔶 Temporal
Reposted by Hugo Campos
From the latest articles by @una.im & @ishadeed.com on CSS Anchor Positioning, I realized it’s not just for menu and tooltips.
una.im/follow-the-a...
ishadeed.com/article/anch...
It’s more like position: relative across DOM. Like you can make a floating :focus.
una.im/follow-the-a...
ishadeed.com/article/anch...
It’s more like position: relative across DOM. Like you can make a floating :focus.
September 15, 2025 at 1:11 PM
From the latest articles by @una.im & @ishadeed.com on CSS Anchor Positioning, I realized it’s not just for menu and tooltips.
una.im/follow-the-a...
ishadeed.com/article/anch...
It’s more like position: relative across DOM. Like you can make a floating :focus.
una.im/follow-the-a...
ishadeed.com/article/anch...
It’s more like position: relative across DOM. Like you can make a floating :focus.
Reposted by Hugo Campos
type-fest 5 is out! 🚀
(essential TS types)
Strictness helpers:
- ExtendsStrict
- ExcludeStrict
- ExtractStrict
Checks:
- IsUnion
- IsOptional
- IsNullable
Key-level checks:
- IsOptionalKeyOf
- IsReadonlyKeyOf
- IsRequiredKeyOf
- IsWritableKeyOf
And lots of bug fixes!
github.com/sindresorhus...
(essential TS types)
Strictness helpers:
- ExtendsStrict
- ExcludeStrict
- ExtractStrict
Checks:
- IsUnion
- IsOptional
- IsNullable
Key-level checks:
- IsOptionalKeyOf
- IsReadonlyKeyOf
- IsRequiredKeyOf
- IsWritableKeyOf
And lots of bug fixes!
github.com/sindresorhus...
Release v5.0.0 · sindresorhus/type-fest
Breaking
This package is now pure ESM. Please read this.
Require TypeScript 5.9 b5b0214
Require Node.js 20 cc2b0f2
Reminder: type-fest requires strict: true in your tsconfig.
StringKeyOf: Rename t...
github.com
September 13, 2025 at 7:33 PM
type-fest 5 is out! 🚀
(essential TS types)
Strictness helpers:
- ExtendsStrict
- ExcludeStrict
- ExtractStrict
Checks:
- IsUnion
- IsOptional
- IsNullable
Key-level checks:
- IsOptionalKeyOf
- IsReadonlyKeyOf
- IsRequiredKeyOf
- IsWritableKeyOf
And lots of bug fixes!
github.com/sindresorhus...
(essential TS types)
Strictness helpers:
- ExtendsStrict
- ExcludeStrict
- ExtractStrict
Checks:
- IsUnion
- IsOptional
- IsNullable
Key-level checks:
- IsOptionalKeyOf
- IsReadonlyKeyOf
- IsRequiredKeyOf
- IsWritableKeyOf
And lots of bug fixes!
github.com/sindresorhus...
Reposted by Hugo Campos
A while back, I was building a particle animation, and I ran into some weird issues. The particles were turning grey, mid-animation. And sometimes, they wouldn’t change color at all!
Turns out, there’s a pretty big limitation with color transitions. I share some solutions in my brand-new post!
Turns out, there’s a pretty big limitation with color transitions. I share some solutions in my brand-new post!
Color Shifting in CSS • Josh W. Comeau
A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing! In this tutorial, we’ll dig into the issue, and I’ll share a couple of strategies you can use to work around this limitation.
www.joshwcomeau.com
September 8, 2025 at 7:52 PM
A while back, I was building a particle animation, and I ran into some weird issues. The particles were turning grey, mid-animation. And sometimes, they wouldn’t change color at all!
Turns out, there’s a pretty big limitation with color transitions. I share some solutions in my brand-new post!
Turns out, there’s a pretty big limitation with color transitions. I share some solutions in my brand-new post!
Reposted by Hugo Campos
Rolldown drops CJS support!
From the latest version of @rolldown.rs (1.0.0-beta.36) on, Rolldown will only be released in the ESM format.
The required Node version has also been bumped to align with @vite.dev (20.19+ and 22.12+). Node 18 has been dropped due to being EOL since April.
From the latest version of @rolldown.rs (1.0.0-beta.36) on, Rolldown will only be released in the ESM format.
The required Node version has also been bumped to align with @vite.dev (20.19+ and 22.12+). Node 18 has been dropped due to being EOL since April.
September 8, 2025 at 12:40 PM
Rolldown drops CJS support!
From the latest version of @rolldown.rs (1.0.0-beta.36) on, Rolldown will only be released in the ESM format.
The required Node version has also been bumped to align with @vite.dev (20.19+ and 22.12+). Node 18 has been dropped due to being EOL since April.
From the latest version of @rolldown.rs (1.0.0-beta.36) on, Rolldown will only be released in the ESM format.
The required Node version has also been bumped to align with @vite.dev (20.19+ and 22.12+). Node 18 has been dropped due to being EOL since April.
Reposted by Hugo Campos
Reposted by Hugo Campos
Composition with the Shadow DOM is more powerful than you think. You can do a lot with the default named slot assignment, but manual slot assignment is a pathway to many abilities some consider to be… unnatural.</emperor-palpatine>
An intro to manual slot assignment – Nathan Knowler
knowler.dev
September 3, 2025 at 8:13 PM
Composition with the Shadow DOM is more powerful than you think. You can do a lot with the default named slot assignment, but manual slot assignment is a pathway to many abilities some consider to be… unnatural.</emperor-palpatine>
Reposted by Hugo Campos
About 10 months ago I benchmarked the most popular bundlers to compare build speed and bundle size (tree-shaking + minification).
I just re-ran the tests with the latest versions to see what’s changed 👇
I just re-ran the tests with the latest versions to see what’s changed 👇
August 25, 2025 at 9:40 PM
About 10 months ago I benchmarked the most popular bundlers to compare build speed and bundle size (tree-shaking + minification).
I just re-ran the tests with the latest versions to see what’s changed 👇
I just re-ran the tests with the latest versions to see what’s changed 👇
Reposted by Hugo Campos
From the archives: “Misconceptions about CSS Specificity”
- Misconception 1: Specificity is a decimal score
- Misconception 2: Using the style attribute (“inline styles”) adds Specificity
- Misconception 3: Using !important adds Specificity
bram.us/2024/05/05/m...
- Misconception 1: Specificity is a decimal score
- Misconception 2: Using the style attribute (“inline styles”) adds Specificity
- Misconception 3: Using !important adds Specificity
bram.us/2024/05/05/m...
Misconceptions about CSS Specificity
To remove some of the confusion, here’s a list of misconceptions about Specificity in CSS …
bram.us
August 26, 2025 at 8:03 AM
From the archives: “Misconceptions about CSS Specificity”
- Misconception 1: Specificity is a decimal score
- Misconception 2: Using the style attribute (“inline styles”) adds Specificity
- Misconception 3: Using !important adds Specificity
bram.us/2024/05/05/m...
- Misconception 1: Specificity is a decimal score
- Misconception 2: Using the style attribute (“inline styles”) adds Specificity
- Misconception 3: Using !important adds Specificity
bram.us/2024/05/05/m...
Reposted by Hugo Campos
Rspack v1.5.0 is out! 🎉
⚡️ Barrel file optimization
⚡️ Faster file system watcher
⚡️ Smaller installation size
💪 Extending Rspack with Rust
💪 Type re-export analysis
And many exciting new features...
Read more in our blog:
rspack.rs/blog/announc...
⚡️ Barrel file optimization
⚡️ Faster file system watcher
⚡️ Smaller installation size
💪 Extending Rspack with Rust
💪 Type re-export analysis
And many exciting new features...
Read more in our blog:
rspack.rs/blog/announc...
Announcing Rspack 1.5 - Rspack
Fast Rust-based web bundler
rspack.rs
August 26, 2025 at 11:10 AM
Rspack v1.5.0 is out! 🎉
⚡️ Barrel file optimization
⚡️ Faster file system watcher
⚡️ Smaller installation size
💪 Extending Rspack with Rust
💪 Type re-export analysis
And many exciting new features...
Read more in our blog:
rspack.rs/blog/announc...
⚡️ Barrel file optimization
⚡️ Faster file system watcher
⚡️ Smaller installation size
💪 Extending Rspack with Rust
💪 Type re-export analysis
And many exciting new features...
Read more in our blog:
rspack.rs/blog/announc...
Reposted by Hugo Campos
Just filed an issue to turn `--strict` on by default in TypeScript.
Maybe it's a little bit ambitious, but I'm excited for us to try this one. 😄
github.com/microsoft/Ty...
Maybe it's a little bit ambitious, but I'm excited for us to try this one. 😄
github.com/microsoft/Ty...
Enable `--strict` mode by default · Issue #62333 · microsoft/TypeScript
Background Almost a decade ago, we began to add certain options beyond --noImplicitAny and --strictNullChecks. Flags like --strictFunctionTypes, --noImplicitThis, and --strictBindCallApply have bee...
github.com
August 25, 2025 at 4:27 PM
Just filed an issue to turn `--strict` on by default in TypeScript.
Maybe it's a little bit ambitious, but I'm excited for us to try this one. 😄
github.com/microsoft/Ty...
Maybe it's a little bit ambitious, but I'm excited for us to try this one. 😄
github.com/microsoft/Ty...