Damian
@oczki.pl
Product designer, software engineer, accessibility ally. Semantic HTML, CSS that actually cascades, and vanilla JS. Fan of puzzle games and metroidbrainias.
@signal.org This is weird, but I suddenly can't write the words containing "j" and "k" without them getting a newline.
I'm writing "jak jak jak"
It displays as:
jak jak
jak
This only occurs on mobile. Desktop displays the message normally.
I'm writing "jak jak jak"
It displays as:
jak jak
jak
This only occurs on mobile. Desktop displays the message normally.
September 12, 2025 at 11:22 AM
@signal.org This is weird, but I suddenly can't write the words containing "j" and "k" without them getting a newline.
I'm writing "jak jak jak"
It displays as:
jak jak
jak
This only occurs on mobile. Desktop displays the message normally.
I'm writing "jak jak jak"
It displays as:
jak jak
jak
This only occurs on mobile. Desktop displays the message normally.
Something felt off about this "AI" word there. Turns out it's not "AI". It's "Al"—or AL, if you capitalize it.
www.amd.com/en/products/...
AMD, why?
Tagging @gamersnexus.bsky.social
www.amd.com/en/products/...
AMD, why?
Tagging @gamersnexus.bsky.social
August 13, 2025 at 10:34 AM
Something felt off about this "AI" word there. Turns out it's not "AI". It's "Al"—or AL, if you capitalize it.
www.amd.com/en/products/...
AMD, why?
Tagging @gamersnexus.bsky.social
www.amd.com/en/products/...
AMD, why?
Tagging @gamersnexus.bsky.social
August 1, 2025 at 6:30 PM
The regular version is visually unchanged - still colorful, still working well with keyboards, screen readers, taps, clicks, and swipe gestures. v2.4 looks identical to v2.3 at first glance.
Seemingly simple web app... yet doing it right to be accessible takes tons of work and testing.
Seemingly simple web app... yet doing it right to be accessible takes tons of work and testing.
December 29, 2024 at 10:00 PM
The regular version is visually unchanged - still colorful, still working well with keyboards, screen readers, taps, clicks, and swipe gestures. v2.4 looks identical to v2.3 at first glance.
Seemingly simple web app... yet doing it right to be accessible takes tons of work and testing.
Seemingly simple web app... yet doing it right to be accessible takes tons of work and testing.
I'm super proud of my recent #accessibility improvements in my Inspiration Depot web app (idea generator for improv actors). I've focused on high contrast theme; even if exactly zero users will see the changes, I'm still happy with what I've learned while working on this.
Left: old, right: new.
Left: old, right: new.
December 29, 2024 at 9:50 PM
I'm super proud of my recent #accessibility improvements in my Inspiration Depot web app (idea generator for improv actors). I've focused on high contrast theme; even if exactly zero users will see the changes, I'm still happy with what I've learned while working on this.
Left: old, right: new.
Left: old, right: new.
To make the shape's geometric center match the center of the bounding box.
You can see that it only happens to shapes with an odd number of sides. Even-numbered ones fill the entire height.
You can see that it only happens to shapes with an odd number of sides. Even-numbered ones fill the entire height.
December 16, 2024 at 7:06 AM
To make the shape's geometric center match the center of the bounding box.
You can see that it only happens to shapes with an odd number of sides. Even-numbered ones fill the entire height.
You can see that it only happens to shapes with an odd number of sides. Even-numbered ones fill the entire height.
The issue lies in pre-multiplied RGBA space. I haven’t found a way to disable it in CSS.
A simple workaround: make a gradient with both ends at 100% opacity and then use a mask to fade one side.
The result is pixel-perfect identical to Figma's.
A simple workaround: make a gradient with both ends at 100% opacity and then use a mask to fade one side.
The result is pixel-perfect identical to Figma's.
November 30, 2024 at 10:52 PM
The issue lies in pre-multiplied RGBA space. I haven’t found a way to disable it in CSS.
A simple workaround: make a gradient with both ends at 100% opacity and then use a mask to fade one side.
The result is pixel-perfect identical to Figma's.
A simple workaround: make a gradient with both ends at 100% opacity and then use a mask to fade one side.
The result is pixel-perfect identical to Figma's.
So the bug would be in how Figma generates CSS for this case.
```css
background: linear-gradient(90deg, #FF0000 0%, rgba(0, 0, 255, 0) 100%);
```
The result is totally different to how Figma renders it. Blue color at the 0% end is ignored, and the entire gradient has the same red hue.
```css
background: linear-gradient(90deg, #FF0000 0%, rgba(0, 0, 255, 0) 100%);
```
The result is totally different to how Figma renders it. Blue color at the 0% end is ignored, and the entire gradient has the same red hue.
November 30, 2024 at 7:44 PM
So the bug would be in how Figma generates CSS for this case.
```css
background: linear-gradient(90deg, #FF0000 0%, rgba(0, 0, 255, 0) 100%);
```
The result is totally different to how Figma renders it. Blue color at the 0% end is ignored, and the entire gradient has the same red hue.
```css
background: linear-gradient(90deg, #FF0000 0%, rgba(0, 0, 255, 0) 100%);
```
The result is totally different to how Figma renders it. Blue color at the 0% end is ignored, and the entire gradient has the same red hue.
There’s a bug in @figma.com, caused entirely by super confusing rendering of gradients in #CSS. I don't really blame Figma.
Imagine you want to show a gradient from red (at 100% opacity) to blue (at 0% opacity). In Figma, the middle is purple at 50% opacity. But CSS completely ignores the 0% color!
Imagine you want to show a gradient from red (at 100% opacity) to blue (at 0% opacity). In Figma, the middle is purple at 50% opacity. But CSS completely ignores the 0% color!
November 30, 2024 at 7:44 PM
There’s a bug in @figma.com, caused entirely by super confusing rendering of gradients in #CSS. I don't really blame Figma.
Imagine you want to show a gradient from red (at 100% opacity) to blue (at 0% opacity). In Figma, the middle is purple at 50% opacity. But CSS completely ignores the 0% color!
Imagine you want to show a gradient from red (at 100% opacity) to blue (at 0% opacity). In Figma, the middle is purple at 50% opacity. But CSS completely ignores the 0% color!
November 30, 2024 at 8:23 AM
Mine said "Forgets to check his own website's accessibility—ironic, right?". Ouch! Hey, I AM working on rewriting my portfolio!
November 29, 2024 at 9:18 AM
Mine said "Forgets to check his own website's accessibility—ironic, right?". Ouch! Hey, I AM working on rewriting my portfolio!
Reminder that you can implement the sieve of Eratosthenes (finding all prime numbers) using regular expressions.
It's free!
It's easy!
It actually works!
```python
print(not re.match(r'^.?$|^(..+?)\1+$', 'x'*n))
```
(Image from @standupmaths.bsky.social's video)
It's free!
It's easy!
It actually works!
```python
print(not re.match(r'^.?$|^(..+?)\1+$', 'x'*n))
```
(Image from @standupmaths.bsky.social's video)
November 26, 2024 at 8:55 AM
Reminder that you can implement the sieve of Eratosthenes (finding all prime numbers) using regular expressions.
It's free!
It's easy!
It actually works!
```python
print(not re.match(r'^.?$|^(..+?)\1+$', 'x'*n))
```
(Image from @standupmaths.bsky.social's video)
It's free!
It's easy!
It actually works!
```python
print(not re.match(r'^.?$|^(..+?)\1+$', 'x'*n))
```
(Image from @standupmaths.bsky.social's video)
November 20, 2024 at 10:44 PM
Friendly reminder: don't use absolute (px, pt, ...) or viewport (vw, vh, ...) units for CSS properties related to text.
When you use px for font-size, you override user's preference. Use rem and em instead.
Josh's article has more details: www.joshwcomeau.com/css/surprisi...
#accessibility #css
When you use px for font-size, you override user's preference. Use rem and em instead.
Josh's article has more details: www.joshwcomeau.com/css/surprisi...
#accessibility #css
November 17, 2024 at 11:13 PM
Friendly reminder: don't use absolute (px, pt, ...) or viewport (vw, vh, ...) units for CSS properties related to text.
When you use px for font-size, you override user's preference. Use rem and em instead.
Josh's article has more details: www.joshwcomeau.com/css/surprisi...
#accessibility #css
When you use px for font-size, you override user's preference. Use rem and em instead.
Josh's article has more details: www.joshwcomeau.com/css/surprisi...
#accessibility #css
Another example can be seen in Josh George's recent video about IGN's review scale (youtu.be/s0h_1uvqi5E).
In the last 10 years, over 80% of IGN's movie reviews were in the 5-10 range. As a result, it's not really clear if their 7 is actually a positive recommendation, or if the movie is just meh.
In the last 10 years, over 80% of IGN's movie reviews were in the 5-10 range. As a result, it's not really clear if their 7 is actually a positive recommendation, or if the movie is just meh.
November 17, 2024 at 9:06 AM
Another example can be seen in Josh George's recent video about IGN's review scale (youtu.be/s0h_1uvqi5E).
In the last 10 years, over 80% of IGN's movie reviews were in the 5-10 range. As a result, it's not really clear if their 7 is actually a positive recommendation, or if the movie is just meh.
In the last 10 years, over 80% of IGN's movie reviews were in the 5-10 range. As a result, it's not really clear if their 7 is actually a positive recommendation, or if the movie is just meh.
A prime example of this is Net Promoter Score. Only 9-10 are considered good for NPS, and anyone that grades the experience 6 or lower is considered a detractor.
November 16, 2024 at 7:11 PM
A prime example of this is Net Promoter Score. Only 9-10 are considered good for NPS, and anyone that grades the experience 6 or lower is considered a detractor.
I'm redesigning my portfolio, which includes recreating this illustration that compares review scales. (Originally for anime reviews, but applies to all media.)
Would you agree with this? Do you think the modern scores are inflated, and we collectively forgot how to use the full scale?
#design
Would you agree with this? Do you think the modern scores are inflated, and we collectively forgot how to use the full scale?
#design
November 16, 2024 at 7:07 PM
I'm redesigning my portfolio, which includes recreating this illustration that compares review scales. (Originally for anime reviews, but applies to all media.)
Would you agree with this? Do you think the modern scores are inflated, and we collectively forgot how to use the full scale?
#design
Would you agree with this? Do you think the modern scores are inflated, and we collectively forgot how to use the full scale?
#design
Those two fellas made me play SO MANY games in the last two years. And that magma skin is just perfect.
#steamdeck #odin2
#steamdeck #odin2
November 15, 2024 at 10:18 PM
Those two fellas made me play SO MANY games in the last two years. And that magma skin is just perfect.
#steamdeck #odin2
#steamdeck #odin2
Gift (a 2000 game by Cryo) had nice mechanics with fire, ice, and light, the last of which was pretty innovative for its time.
A memorable puzzle involved a metal door: you had to heat and freeze it simultaneously, exploiting thermal stress to shatter it from the inside! Mind-blowing for a kid.
A memorable puzzle involved a metal door: you had to heat and freeze it simultaneously, exploiting thermal stress to shatter it from the inside! Mind-blowing for a kid.
November 15, 2024 at 9:33 PM
Gift (a 2000 game by Cryo) had nice mechanics with fire, ice, and light, the last of which was pretty innovative for its time.
A memorable puzzle involved a metal door: you had to heat and freeze it simultaneously, exploiting thermal stress to shatter it from the inside! Mind-blowing for a kid.
A memorable puzzle involved a metal door: you had to heat and freeze it simultaneously, exploiting thermal stress to shatter it from the inside! Mind-blowing for a kid.
