Anoesj
@anoesj.dev
Vue, Nuxt, CSS & TypeScript maestro, usually over-caffeinated, cat lover, leftfield electronic enthusiast, something something
Yes, there are scale transitions in place here using Vue's mechanism. I didn't screenshot them before, sorry for the unclarity. However, transform-origin does not (seem to) work in a @position-try clause 😕 github.com/w3c/csswg-dr...
September 19, 2025 at 12:46 PM
Yes, there are scale transitions in place here using Vue's mechanism. I didn't screenshot them before, sorry for the unclarity. However, transform-origin does not (seem to) work in a @position-try clause 😕 github.com/w3c/csswg-dr...
Well that is a bit ironic 🥲
September 17, 2025 at 5:06 PM
Well that is a bit ironic 🥲
Glad I'm not the only one 🤗
August 19, 2025 at 10:52 PM
Glad I'm not the only one 🤗
Note to future self: when multiple tsconfigs all include the same folders, you can create tsconfig.json files inside of those folders extending one of the root tsconfigs explicitly to force VS Code to type check using that particular tsconfig. No need to go down that TS rabbit hole again 🫶
August 14, 2025 at 2:11 PM
Note to future self: when multiple tsconfigs all include the same folders, you can create tsconfig.json files inside of those folders extending one of the root tsconfigs explicitly to force VS Code to type check using that particular tsconfig. No need to go down that TS rabbit hole again 🫶
Pretty cool to find out @rolldown.rs already simplifies calculations during bundling. Like when you run "export const foo = 0.1 + 0.2;" it simplifies that compile-time, which saves some time doing runtime calculations. Rollup doesn't do that (tested in REPL) 😄
July 9, 2025 at 12:44 PM
Pretty cool to find out @rolldown.rs already simplifies calculations during bundling. Like when you run "export const foo = 0.1 + 0.2;" it simplifies that compile-time, which saves some time doing runtime calculations. Rollup doesn't do that (tested in REPL) 😄
Sorry, super late reply! I ran some manual tests and these are the results:
July 1, 2025 at 4:04 PM
Sorry, super late reply! I ran some manual tests and these are the results:
Using marked types does not require you to type cast values before assigning. So they are way less strict than branded types, but they serve a different purpose.
We could use it to hide some User properties in forms with a defineForm() helper that disallows hidden properties in form definitions.
We could use it to hide some User properties in forms with a defineForm() helper that disallows hidden properties in form definitions.
June 1, 2025 at 10:55 AM
Using marked types does not require you to type cast values before assigning. So they are way less strict than branded types, but they serve a different purpose.
We could use it to hide some User properties in forms with a defineForm() helper that disallows hidden properties in form definitions.
We could use it to hide some User properties in forms with a defineForm() helper that disallows hidden properties in form definitions.
What if we want to mark some properties as “hidden properties”? Let‘s create a User type and explore some nice use cases.
June 1, 2025 at 10:55 AM
What if we want to mark some properties as “hidden properties”? Let‘s create a User type and explore some nice use cases.
Marked types 🎯 are awesome! Lots of folks know about branded types already, but what if we change the mechanism a bit to loosen it up a little. No idea if somebody has already named this pattern before, but I like the term “marked types”, which is kind of like “soft branding”. Examples in replies...
June 1, 2025 at 10:55 AM
Marked types 🎯 are awesome! Lots of folks know about branded types already, but what if we change the mechanism a bit to loosen it up a little. No idea if somebody has already named this pattern before, but I like the term “marked types”, which is kind of like “soft branding”. Examples in replies...
Another day, another TypeScript frustration
May 28, 2025 at 9:35 AM
Another day, another TypeScript frustration
Every day of working with TypeScript, you learn something new 😜
May 27, 2025 at 7:37 AM
Every day of working with TypeScript, you learn something new 😜
Nope! On Ubuntu in multiple browsers, with or without extensions. It must be one of these updates. Going to roll them back one by one to figure out which one caused the issue.
March 22, 2025 at 10:53 AM
Nope! On Ubuntu in multiple browsers, with or without extensions. It must be one of these updates. Going to roll them back one by one to figure out which one caused the issue.
This now works by patching Nuxt locally to generate a `typed-pages.d.ts` (screenshot) and including a VLS plugin using `vueCompilerOptions` in tsconfig.json that rewrites `useRoute()` to `useRoute<import('#app').FileRouteNameMap['/path/to/project/app/layers/2-account/pages/account/login.vue']>()`
March 14, 2025 at 3:32 PM
This now works by patching Nuxt locally to generate a `typed-pages.d.ts` (screenshot) and including a VLS plugin using `vueCompilerOptions` in tsconfig.json that rewrites `useRoute()` to `useRoute<import('#app').FileRouteNameMap['/path/to/project/app/layers/2-account/pages/account/login.vue']>()`
@esm.dev @danielroe.dev @bikari.top Progressss 😁 While I broke syntax highlighting, I got to the point where `useRoute()` is automatically typed in pages! It's just a proof-of-concept, so still lots of code to write and bugs to fix. Could use some help actually shipping this, hit me up on Discord!
March 14, 2025 at 3:26 PM
@esm.dev @danielroe.dev @bikari.top Progressss 😁 While I broke syntax highlighting, I got to the point where `useRoute()` is automatically typed in pages! It's just a proof-of-concept, so still lots of code to write and bugs to fix. Could use some help actually shipping this, hit me up on Discord!
Scroll-linked animations are flawed on Chrome for Android 😐. They don't recalculate properly while scrolling. The view is changed when releasing touch, causing an instant style change. Reminds me of vh-related issues, where the height of the screen is only recalculated after touchend. Who do I tag?
March 9, 2025 at 9:37 AM
Scroll-linked animations are flawed on Chrome for Android 😐. They don't recalculate properly while scrolling. The view is changed when releasing touch, causing an instant style change. Reminds me of vh-related issues, where the height of the screen is only recalculated after touchend. Who do I tag?
🤨 When submitting a form that contains an invalid input in a collapsed <details> element, browsers can't focus that invalid input, so the end user is missing expected feedback. Also, "invalid" events don't bubble, so you also can't listen for those on <details> elements to auto-expand them on error.
February 17, 2025 at 4:40 PM
🤨 When submitting a form that contains an invalid input in a collapsed <details> element, browsers can't focus that invalid input, so the end user is missing expected feedback. Also, "invalid" events don't bubble, so you also can't listen for those on <details> elements to auto-expand them on error.
💡 Vue follows browser standards when a number input is empty, but that makes its model a string value "", which is just bad DX IMO, especially when using TypeScript and having to type a model as number | string 😦. It's easy to make it null when empty though. Source: gist.github.com/Anoesj/0cc2f...
February 15, 2025 at 1:00 PM
💡 Vue follows browser standards when a number input is empty, but that makes its model a string value "", which is just bad DX IMO, especially when using TypeScript and having to type a model as number | string 😦. It's easy to make it null when empty though. Source: gist.github.com/Anoesj/0cc2f...
Another day, another stupid CSS quirk. Chrome seems to enforce a minimum line-height on inputs, but instead of clamping the configured line-height to the lowest possible line-height, it just completely ignores the CSS rule. Threshold seems to be around 1.05 here. In Firefox, it's even around 1.2 😮💨
January 6, 2025 at 3:24 PM
Another day, another stupid CSS quirk. Chrome seems to enforce a minimum line-height on inputs, but instead of clamping the configured line-height to the lowest possible line-height, it just completely ignores the CSS rule. Threshold seems to be around 1.05 here. In Firefox, it's even around 1.2 😮💨
Very very not ready for getting back to work 😅. Wish I could just be my cat for a day..
January 6, 2025 at 10:49 AM
Very very not ready for getting back to work 😅. Wish I could just be my cat for a day..
@colinhacks.com I may have found one minor issue with `matches`. This results in a TS error:
`const validationSchema = matches
`const validationSchema = matches
November 27, 2024 at 11:06 PM
@colinhacks.com I may have found one minor issue with `matches`. This results in a TS error:
`const validationSchema = matches
`const validationSchema = matches
3️⃣ From now on, `resolveComponent` requires you to provide an actually existing component name. It will also return the typings of that particular component, instead of `ConcreteComponent | string`! 🌟
Bonus: when using this combined with `<component :is>`, it's now typed way more strictly.
Bonus: when using this combined with `<component :is>`, it's now typed way more strictly.
November 15, 2024 at 3:39 PM
3️⃣ From now on, `resolveComponent` requires you to provide an actually existing component name. It will also return the typings of that particular component, instead of `ConcreteComponent | string`! 🌟
Bonus: when using this combined with `<component :is>`, it's now typed way more strictly.
Bonus: when using this combined with `<component :is>`, it's now typed way more strictly.
2️⃣ In /typings-high-prio (rename to taste), add a .d.ts file with the following contents. Nuxt keeps an object of all globally registered components, which we can use to make the typings of resolveComponent stronger.
2/n
2/n
November 15, 2024 at 3:39 PM
2️⃣ In /typings-high-prio (rename to taste), add a .d.ts file with the following contents. Nuxt keeps an object of all globally registered components, which we can use to make the typings of resolveComponent stronger.
2/n
2/n
In @nuxt.com, resolveComponent could be typed a lot stricter. Here's a way to monkeypatch its types:
1️⃣ In nuxt.config.ts, manually add an include rule for the generated tsconfig.json. This will be prepended to the 'include' list in tsconfig.json, making types in matching files more important.
1/n
1️⃣ In nuxt.config.ts, manually add an include rule for the generated tsconfig.json. This will be prepended to the 'include' list in tsconfig.json, making types in matching files more important.
1/n
November 15, 2024 at 3:39 PM
In @nuxt.com, resolveComponent could be typed a lot stricter. Here's a way to monkeypatch its types:
1️⃣ In nuxt.config.ts, manually add an include rule for the generated tsconfig.json. This will be prepended to the 'include' list in tsconfig.json, making types in matching files more important.
1/n
1️⃣ In nuxt.config.ts, manually add an include rule for the generated tsconfig.json. This will be prepended to the 'include' list in tsconfig.json, making types in matching files more important.
1/n
