Lars Ejaas 🦋
@larsejaas.bsky.social
Frontend developer at BoligPortal.
larsejaas.com
Creating UI using React, TypeScript and/or whatever gets the job done.
Let's connect!
larsejaas.com
Creating UI using React, TypeScript and/or whatever gets the job done.
Let's connect!
This is sooooo satisfying 😌
November 2, 2025 at 11:56 AM
This is sooooo satisfying 😌
This reminds me of some edge-case I've seen recently in Chrome 🤔 It definitely wasn't about RTL - but of course I forgot how to trigger it 😒
September 30, 2025 at 7:41 AM
This reminds me of some edge-case I've seen recently in Chrome 🤔 It definitely wasn't about RTL - but of course I forgot how to trigger it 😒
IMO it takes a bit more optimization to make things really smooth.
Especially on mobile devices.
Prefetcing and prerendering can really help a lot!
Especially on mobile devices.
Prefetcing and prerendering can really help a lot!
September 17, 2025 at 2:02 PM
IMO it takes a bit more optimization to make things really smooth.
Especially on mobile devices.
Prefetcing and prerendering can really help a lot!
Especially on mobile devices.
Prefetcing and prerendering can really help a lot!
The animation tab in Chrome dev tools instantly becomes your best friend 😅
September 17, 2025 at 11:09 AM
The animation tab in Chrome dev tools instantly becomes your best friend 😅
Love it Salma! 😍
The view transition API is soo nice!
Been playing a lot around with this on my own page as well - makes the look and feel of multi-page apps/pages sooooo much nicer! 😍 🥳
The view transition API is soo nice!
Been playing a lot around with this on my own page as well - makes the look and feel of multi-page apps/pages sooooo much nicer! 😍 🥳
September 17, 2025 at 11:08 AM
Love it Salma! 😍
The view transition API is soo nice!
Been playing a lot around with this on my own page as well - makes the look and feel of multi-page apps/pages sooooo much nicer! 😍 🥳
The view transition API is soo nice!
Been playing a lot around with this on my own page as well - makes the look and feel of multi-page apps/pages sooooo much nicer! 😍 🥳
This is SO clever! 🤯
September 13, 2025 at 8:47 PM
This is SO clever! 🤯
Congrats! This sounds like a powerful combo 💪🥳
September 13, 2025 at 7:03 AM
Congrats! This sounds like a powerful combo 💪🥳
But I really like the idea of inserting a breakpoint on pagereveal - will take a stab at that!
September 11, 2025 at 7:46 PM
But I really like the idea of inserting a breakpoint on pagereveal - will take a stab at that!
Thanks! NO, my portfolio is certainly not a minimal reproduction - quite the contrary! 😂
I better start off with something simpler than the blur-background - this one is quite a bit more complex - but I also get this weird blink of "no blur" on my header menu on desktop.
I better start off with something simpler than the blur-background - this one is quite a bit more complex - but I also get this weird blink of "no blur" on my header menu on desktop.
September 11, 2025 at 7:46 PM
Thanks! NO, my portfolio is certainly not a minimal reproduction - quite the contrary! 😂
I better start off with something simpler than the blur-background - this one is quite a bit more complex - but I also get this weird blink of "no blur" on my header menu on desktop.
I better start off with something simpler than the blur-background - this one is quite a bit more complex - but I also get this weird blink of "no blur" on my header menu on desktop.
The easiest way to understand what I mean is to go to my page at:
larsejaas.com/about/cyclin...
and then navigate to the next image using the arrow-buttons.
larsejaas.com/about/cyclin...
and then navigate to the next image using the arrow-buttons.
Lars Ejaas | Cycling Roadrace in Hammel, 2009
🏃♂️🚴 Explore pictures from my years as an athlete. Competing in a Danish elite road race in Hammel, Denmark - 2007.
larsejaas.com
September 10, 2025 at 5:40 PM
The easiest way to understand what I mean is to go to my page at:
larsejaas.com/about/cyclin...
and then navigate to the next image using the arrow-buttons.
larsejaas.com/about/cyclin...
and then navigate to the next image using the arrow-buttons.
The issue is probably in terms of transparent layers and backdrop-filter.
I would like my blur background to look like it persists across navigation to a different URL - I just haven't found a way to do this yet...
I would like my blur background to look like it persists across navigation to a different URL - I just haven't found a way to do this yet...
September 10, 2025 at 5:40 PM
The issue is probably in terms of transparent layers and backdrop-filter.
I would like my blur background to look like it persists across navigation to a different URL - I just haven't found a way to do this yet...
I would like my blur background to look like it persists across navigation to a different URL - I just haven't found a way to do this yet...
I am using CSS Modules and found it a bit difficult to control the CSS bundling.
So, I ended up adding a style tag manually in the top of my head where the cascade layers are defined. This works well 🙂
So, I ended up adding a style tag manually in the top of my head where the cascade layers are defined. This works well 🙂
September 9, 2025 at 8:20 AM
I am using CSS Modules and found it a bit difficult to control the CSS bundling.
So, I ended up adding a style tag manually in the top of my head where the cascade layers are defined. This works well 🙂
So, I ended up adding a style tag manually in the top of my head where the cascade layers are defined. This works well 🙂
Finally got around to taking a look at your entry!
Makes sense!
I am in Astro actually - but prefer CSS Modules over <style> tags - totally a personal preference...
But your info here on local/global scope could have helped me out!
Maybe include info about view-transition-class here also 💡😀
Makes sense!
I am in Astro actually - but prefer CSS Modules over <style> tags - totally a personal preference...
But your info here on local/global scope could have helped me out!
Maybe include info about view-transition-class here also 💡😀
September 8, 2025 at 2:10 PM
Finally got around to taking a look at your entry!
Makes sense!
I am in Astro actually - but prefer CSS Modules over <style> tags - totally a personal preference...
But your info here on local/global scope could have helped me out!
Maybe include info about view-transition-class here also 💡😀
Makes sense!
I am in Astro actually - but prefer CSS Modules over <style> tags - totally a personal preference...
But your info here on local/global scope could have helped me out!
Maybe include info about view-transition-class here also 💡😀
CSS Modules are simple but super powerful if you lean into these tricks. 🚀
September 8, 2025 at 12:21 PM
CSS Modules are simple but super powerful if you lean into these tricks. 🚀
🌍 Global styling
Most of the time, you’ll want to keep styles local, but sometimes it’s useful to reference global classes, IDs, or states.
You can combine local and global selectors with the global keyword.
Here, `.someLocalClass` remains local, but its style adapts to a global state.
Most of the time, you’ll want to keep styles local, but sometimes it’s useful to reference global classes, IDs, or states.
You can combine local and global selectors with the global keyword.
Here, `.someLocalClass` remains local, but its style adapts to a global state.
![CSS styling:
:global(:root[data-darkmode="true"]) .someLocalClass {
box-shadow: unset;
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:lz2liw6r2iuxf7kmqlq46ggn/bafkreie2zukraokotnsyv7uivkxc747i2hv4dfbhenmamhafkv3uqkculm@jpeg)
September 8, 2025 at 12:21 PM
🌍 Global styling
Most of the time, you’ll want to keep styles local, but sometimes it’s useful to reference global classes, IDs, or states.
You can combine local and global selectors with the global keyword.
Here, `.someLocalClass` remains local, but its style adapts to a global state.
Most of the time, you’ll want to keep styles local, but sometimes it’s useful to reference global classes, IDs, or states.
You can combine local and global selectors with the global keyword.
Here, `.someLocalClass` remains local, but its style adapts to a global state.
🛡️ Type Safety
If you want full type safety in TypeScript, you can generate `.d.ts` files for your CSS Modules.
A package like typed-css-modules github.com/Quramy/typed... can do this automatically for all modules.
Now classnames will be typed, avoiding typos and giving you editor autocompletion.
If you want full type safety in TypeScript, you can generate `.d.ts` files for your CSS Modules.
A package like typed-css-modules github.com/Quramy/typed... can do this automatically for all modules.
Now classnames will be typed, avoiding typos and giving you editor autocompletion.
September 8, 2025 at 12:21 PM
🛡️ Type Safety
If you want full type safety in TypeScript, you can generate `.d.ts` files for your CSS Modules.
A package like typed-css-modules github.com/Quramy/typed... can do this automatically for all modules.
Now classnames will be typed, avoiding typos and giving you editor autocompletion.
If you want full type safety in TypeScript, you can generate `.d.ts` files for your CSS Modules.
A package like typed-css-modules github.com/Quramy/typed... can do this automatically for all modules.
Now classnames will be typed, avoiding typos and giving you editor autocompletion.
🪄 Cascade Layers Tip
Wrap all component styles in the `components` cascade layer.
Anything outside cascade layers has higher specificity.
This makes it easier to override component styles from the outside when needed.
Wrap all component styles in the `components` cascade layer.
Anything outside cascade layers has higher specificity.
This makes it easier to override component styles from the outside when needed.
September 8, 2025 at 12:21 PM
🪄 Cascade Layers Tip
Wrap all component styles in the `components` cascade layer.
Anything outside cascade layers has higher specificity.
This makes it easier to override component styles from the outside when needed.
Wrap all component styles in the `components` cascade layer.
Anything outside cascade layers has higher specificity.
This makes it easier to override component styles from the outside when needed.
🎬 Importing animations
CSS Modules let you import from other `.module.css` files — even keyframes!
The import syntax allows for renaming the keyframe animations - or use them as-is.
Now you can use the animation as if it were local.
CSS Modules let you import from other `.module.css` files — even keyframes!
The import syntax allows for renaming the keyframe animations - or use them as-is.
Now you can use the animation as if it were local.
September 8, 2025 at 12:21 PM
🎬 Importing animations
CSS Modules let you import from other `.module.css` files — even keyframes!
The import syntax allows for renaming the keyframe animations - or use them as-is.
Now you can use the animation as if it were local.
CSS Modules let you import from other `.module.css` files — even keyframes!
The import syntax allows for renaming the keyframe animations - or use them as-is.
Now you can use the animation as if it were local.
🔄 Re-using classes with `composes`
You can “spread” one class into another using `composes`.
Works a bit like Sass mixins but stays inside the CSS Modules ecosystem.
You can “spread” one class into another using `composes`.
Works a bit like Sass mixins but stays inside the CSS Modules ecosystem.
September 8, 2025 at 12:21 PM
🔄 Re-using classes with `composes`
You can “spread” one class into another using `composes`.
Works a bit like Sass mixins but stays inside the CSS Modules ecosystem.
You can “spread” one class into another using `composes`.
Works a bit like Sass mixins but stays inside the CSS Modules ecosystem.
✅ Preprocessors?
CSS Modules are often paired with Sass, but native CSS now supports nested selectors in all modern browsers, making Sass less essential.
If you previously relied on Sass mixins for reusable styles, you can often achieve the same with reusable classes using `composes`.
CSS Modules are often paired with Sass, but native CSS now supports nested selectors in all modern browsers, making Sass less essential.
If you previously relied on Sass mixins for reusable styles, you can often achieve the same with reusable classes using `composes`.
September 8, 2025 at 12:21 PM
✅ Preprocessors?
CSS Modules are often paired with Sass, but native CSS now supports nested selectors in all modern browsers, making Sass less essential.
If you previously relied on Sass mixins for reusable styles, you can often achieve the same with reusable classes using `composes`.
CSS Modules are often paired with Sass, but native CSS now supports nested selectors in all modern browsers, making Sass less essential.
If you previously relied on Sass mixins for reusable styles, you can often achieve the same with reusable classes using `composes`.
No worries! It helped a ton with your working example! I could exclude a lot of previous unknowns pretty fast 😃
Number 14? I would love to take a stab at an issue if I might be of help!
I still have a thing that bothers me with transparent layers with a background blur filter applied 🤔
Number 14? I would love to take a stab at an issue if I might be of help!
I still have a thing that bothers me with transparent layers with a background blur filter applied 🤔
September 6, 2025 at 7:24 PM
No worries! It helped a ton with your working example! I could exclude a lot of previous unknowns pretty fast 😃
Number 14? I would love to take a stab at an issue if I might be of help!
I still have a thing that bothers me with transparent layers with a background blur filter applied 🤔
Number 14? I would love to take a stab at an issue if I might be of help!
I still have a thing that bothers me with transparent layers with a background blur filter applied 🤔
Thanks! No bug here: just needed a small syntax tweak when using class declarations inside CSS modules 😀 See my post above...
September 5, 2025 at 9:22 PM
Thanks! No bug here: just needed a small syntax tweak when using class declarations inside CSS modules 😀 See my post above...
👆 @vtbag.dev - finally found out why I couldn't make this work - but took some time to figure out how to get it working 😀
September 5, 2025 at 9:21 PM
👆 @vtbag.dev - finally found out why I couldn't make this work - but took some time to figure out how to get it working 😀
::view-transition-image-pair(.test-class) {
animation-duration: 1s;
}
it will fail!
I have to use this syntax:
::view-transition-image-pair(:global(.test-class)) {
animation-duration: 1s;
}
So now it works 🕺
view-transition-classes must be globally scoped!
animation-duration: 1s;
}
it will fail!
I have to use this syntax:
::view-transition-image-pair(:global(.test-class)) {
animation-duration: 1s;
}
So now it works 🕺
view-transition-classes must be globally scoped!
September 5, 2025 at 9:18 PM
::view-transition-image-pair(.test-class) {
animation-duration: 1s;
}
it will fail!
I have to use this syntax:
::view-transition-image-pair(:global(.test-class)) {
animation-duration: 1s;
}
So now it works 🕺
view-transition-classes must be globally scoped!
animation-duration: 1s;
}
it will fail!
I have to use this syntax:
::view-transition-image-pair(:global(.test-class)) {
animation-duration: 1s;
}
So now it works 🕺
view-transition-classes must be globally scoped!