Jacob Rask
@ja.cob-ra.sk
web platform staff engineer at Volvo Cars. design systems, developer experience and scaling web teams. falling back in love with css.
Hey, this was 15 years ago
July 13, 2025 at 8:09 PM
Hey, this was 15 years ago
Too bad that Redux haunts me even in Swift.
June 23, 2025 at 8:55 PM
Too bad that Redux haunts me even in Swift.
There's quite a lot you can encode in just a string/name too if you want to. For one color sync from Figma I wrote a 20 line parser and then rules like these to parse the variable names to structured tokens. Took us pretty far honestly!
![const tokenRules = {
color: [
{
name: 'property',
match: /background|foreground|ornament|surface/,
from: 'head',
},
{
name: 'scale',
match: /(subtle|medium|strong)/,
},
{
name: 'variant',
match: /[\w\d]+/,
},
{
name: 'category',
match: /\w+/,
},
],
font: [
{
name: 'property',
match: /size|family|lineheight|weight/,
},
{
},
],
// ...](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:pktcstl57sqndmxsevpa4h6h/bafkreifvvbbmvadmo2pnq7grpgbia6gve2xwe2gyzolljnugoqstx4euuq@jpeg)
June 13, 2025 at 2:21 PM
There's quite a lot you can encode in just a string/name too if you want to. For one color sync from Figma I wrote a 20 line parser and then rules like these to parse the variable names to structured tokens. Took us pretty far honestly!
`<a href="">` is all you need in many cases, but the current state of tooling tricks developers into believing HTML is complex and full of foot guns.
`rel=noopener` has been the default for `target=_blank` links for years.
`rel=noreferrer` is an optional privacy feature, not a reasonable default
`rel=noopener` has been the default for `target=_blank` links for years.
`rel=noreferrer` is an optional privacy feature, not a reasonable default
May 23, 2025 at 7:56 AM
`<a href="">` is all you need in many cases, but the current state of tooling tricks developers into believing HTML is complex and full of foot guns.
`rel=noopener` has been the default for `target=_blank` links for years.
`rel=noreferrer` is an optional privacy feature, not a reasonable default
`rel=noopener` has been the default for `target=_blank` links for years.
`rel=noreferrer` is an optional privacy feature, not a reasonable default
We run our design system's test suite in CI in both React 18 and 19. Sometimes there's minor differences in HTML snapshots which would cause tests to fail. Putting the current React version in the Playwright snapshot filename solved it in a really neat way.
![import { version as reactVersion } from 'react';
export default defineConfig({
snapshotPathTemplate: `./tests/snapshots/{testFileName}-react-${reactVersion.split('.')[0]}/{arg}{ext}.snap`,
...,
});](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:pktcstl57sqndmxsevpa4h6h/bafkreidgsl4supsjxofr2rmxtjtvabvab5o3e6ezsiuimyjyzd6iflhpni@jpeg)
May 22, 2025 at 8:24 AM
We run our design system's test suite in CI in both React 18 and 19. Sometimes there's minor differences in HTML snapshots which would cause tests to fail. Putting the current React version in the Playwright snapshot filename solved it in a really neat way.
It's a shame there's still no good solution for snug widths combined with text-wrap in CSS, like the tooltip example in @ishadeed.com's article ishadeed.com/article/bala...
Maybe `calc-size()` could be extended to support this? It already has a custom `content` param so there's "room" in the API
Maybe `calc-size()` could be extended to support this? It already has a custom `content` param so there's "room" in the API
April 14, 2025 at 10:47 AM
It's a shame there's still no good solution for snug widths combined with text-wrap in CSS, like the tooltip example in @ishadeed.com's article ishadeed.com/article/bala...
Maybe `calc-size()` could be extended to support this? It already has a custom `content` param so there's "room" in the API
Maybe `calc-size()` could be extended to support this? It already has a custom `content` param so there's "room" in the API
First real ride with kiddo on the 26” Woom, to the hill-fort nearby
March 15, 2025 at 1:40 PM
First real ride with kiddo on the 26” Woom, to the hill-fort nearby
Did you know you can now style pseudo elements from JavaScript?
March 15, 2025 at 10:02 AM
Did you know you can now style pseudo elements from JavaScript?
Seems like developers don't hate CSS after all, huh developer.volvocars.com/design-syste...
March 6, 2025 at 4:37 PM
Seems like developers don't hate CSS after all, huh developer.volvocars.com/design-syste...
Noo #figma not `` in my svgs plz 🥴
SVG sprites – broken
github.com/w3c/svgwg/is...
SVG sprites – broken
github.com/w3c/svgwg/is...
March 5, 2025 at 12:58 PM
Noo #figma not `` in my svgs plz 🥴
SVG sprites – broken
github.com/w3c/svgwg/is...
SVG sprites – broken
github.com/w3c/svgwg/is...
I was born in Oman but haven’t been back since I was a kid. Took my family now and it’s such a fantastic place to visit.
Apart from the wonderful surroundings, everyone is really helpful. We went to a wadi/canyon and some goat herders showed the way. Most people <50 speak English.
Apart from the wonderful surroundings, everyone is really helpful. We went to a wadi/canyon and some goat herders showed the way. Most people <50 speak English.
February 10, 2025 at 1:47 PM
I was born in Oman but haven’t been back since I was a kid. Took my family now and it’s such a fantastic place to visit.
Apart from the wonderful surroundings, everyone is really helpful. We went to a wadi/canyon and some goat herders showed the way. Most people <50 speak English.
Apart from the wonderful surroundings, everyone is really helpful. We went to a wadi/canyon and some goat herders showed the way. Most people <50 speak English.
Honestly this Changesets bot is becoming too judgemental
January 24, 2025 at 1:01 PM
Honestly this Changesets bot is becoming too judgemental
Fluid CSS sizes got such a power-up with round()! It's now widely supported too, from Safari 15.4 and Chrome 125.
It let's you happily use %, vw and other units but still stick to (for example) an 8px grid:
width: round(20%, 8px);
gap: round(3vw + 2rem, 8px);
codepen.io/jacobrask/pe...
It let's you happily use %, vw and other units but still stick to (for example) an 8px grid:
width: round(20%, 8px);
gap: round(3vw + 2rem, 8px);
codepen.io/jacobrask/pe...
December 20, 2024 at 10:59 AM
Fluid CSS sizes got such a power-up with round()! It's now widely supported too, from Safari 15.4 and Chrome 125.
It let's you happily use %, vw and other units but still stick to (for example) an 8px grid:
width: round(20%, 8px);
gap: round(3vw + 2rem, 8px);
codepen.io/jacobrask/pe...
It let's you happily use %, vw and other units but still stick to (for example) an 8px grid:
width: round(20%, 8px);
gap: round(3vw + 2rem, 8px);
codepen.io/jacobrask/pe...
With React, you can choose whether to use it as a thick blanket over platform features, or as sprinkles on top.
We intentionally keep our APIs close to the platform. `useAnchoredPopover` here uses `floating-ui` for positioning, but we'll be able to remove it once anchor positioning ships widely.
We intentionally keep our APIs close to the platform. `useAnchoredPopover` here uses `floating-ui` for positioning, but we'll be able to remove it once anchor positioning ships widely.
December 19, 2024 at 1:08 PM
With React, you can choose whether to use it as a thick blanket over platform features, or as sprinkles on top.
We intentionally keep our APIs close to the platform. `useAnchoredPopover` here uses `floating-ui` for positioning, but we'll be able to remove it once anchor positioning ships widely.
We intentionally keep our APIs close to the platform. `useAnchoredPopover` here uses `floating-ui` for positioning, but we'll be able to remove it once anchor positioning ships widely.
Migrating off CSS-in-JS, illustrated
December 10, 2024 at 9:00 AM
Migrating off CSS-in-JS, illustrated
This tiny little CSS class is pulling a lot of weight in our design system. I'd consider it a "utility+" class – it has one purpose, it's composable, but it also has hover and active states built-in.
It mixes the fg and bg colors on an element to to add a background that's shown on press/hover.
It mixes the fg and bg colors on an element to to add a background that's shown on press/hover.
November 29, 2024 at 3:03 PM
This tiny little CSS class is pulling a lot of weight in our design system. I'd consider it a "utility+" class – it has one purpose, it's composable, but it also has hover and active states built-in.
It mixes the fg and bg colors on an element to to add a background that's shown on press/hover.
It mixes the fg and bg colors on an element to to add a background that's shown on press/hover.
Society if everyone was like 10 yo's new school teacher.
Student laptops are often forgotten or not charged, just a constant hassle. Teacher: "Leave the laptops with me in school instead"
Messaging platform sucks. Teacher: "I'm not allowed to, but I'll use the thing that sends you emails instead"
Student laptops are often forgotten or not charged, just a constant hassle. Teacher: "Leave the laptops with me in school instead"
Messaging platform sucks. Teacher: "I'm not allowed to, but I'll use the thing that sends you emails instead"
November 29, 2024 at 8:16 AM
Society if everyone was like 10 yo's new school teacher.
Student laptops are often forgotten or not charged, just a constant hassle. Teacher: "Leave the laptops with me in school instead"
Messaging platform sucks. Teacher: "I'm not allowed to, but I'll use the thing that sends you emails instead"
Student laptops are often forgotten or not charged, just a constant hassle. Teacher: "Leave the laptops with me in school instead"
Messaging platform sucks. Teacher: "I'm not allowed to, but I'll use the thing that sends you emails instead"
Aria snapshots from Playwright 1.49 last week look great. We use Playwright component tests for our design system components and I'm never going back to not running tests in a real browser.
playwright.dev/docs/aria-sn...
playwright.dev/docs/aria-sn...
November 26, 2024 at 9:23 PM
Aria snapshots from Playwright 1.49 last week look great. We use Playwright component tests for our design system components and I'm never going back to not running tests in a real browser.
playwright.dev/docs/aria-sn...
playwright.dev/docs/aria-sn...
Maybe floating labels were a mistake?
It's very difficult to find a floating label implementation that doesn't subtly break with password managers.
It's very difficult to find a floating label implementation that doesn't subtly break with password managers.
November 5, 2024 at 4:22 PM
Maybe floating labels were a mistake?
It's very difficult to find a floating label implementation that doesn't subtly break with password managers.
It's very difficult to find a floating label implementation that doesn't subtly break with password managers.