Damian

Damian

@oczki.pl

Product designer, software engineer, accessibility ally. Semantic HTML, CSS that actually cascades, and vanilla JS. Fan of puzzle games and metroidbrainias.

101 followers118 following150 posts

Got it! Can't wait to dig in. I also really appreciate Josh's support for regional pricing.

Josh W. Comeau@joshwcomeau.com

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. 😄

@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.

Defeated by web platform inconsistencies... I made a small web component that glues an element to a physical pixel across fullscreen state changes. For reasons. ...But it only works on Windows, on the primary monitor, and Brave shields break it. If you want to improve it - be my guest. I give up.

gist.github.comCustom web component. Glues an element so hard it doesn't budge when you go fullscreen and back. Pretty much only works on Windows, Brave shields break it, and doesn't play well with multi-monitor set...Custom web component. Glues an element so hard it doesn't budge when you go fullscreen and back. Pretty much only works on Windows, Brave shields break it, and doesn't play well with multi-...

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.

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.

#accessibility / #frontend question: If your website has a sticky header, is there any downside to adding CSS `scroll-margin-top` to EVERY SINGLE element?

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!

View full thread

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.

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!

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.

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)

Recent updates have been focused on accessibility. Keyboard navigation, announcing the new idea set for screen readers, quality of life improvements like copying the entire set. I'm looking into ways to implement internationalization with my vanilla JS approach. And I need to translate 3000+ ideas!

Uppermost's Revolution album rocked my year, and RITUAL by Jon Hopkins came as a close second. And as usual, 65daysofstatic, Shirobon and Meganeko keep releasing total bangers 🎶 #youtube #music #recap

I just got back to Balatro after a few months. Only one round and that soundtrack is already looping in my head, again. #balatro #makeitstop #please

Just had a puzzling issue when testing a new nav button. Worked with mouse, worked with keyboard, but... not when a screen reader was running. Huh? It turned out that my Narrator and NVDA readers started in Scan mode. After pressing Caps Lock + Space to toggle it off, the button worked as expected.

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

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

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.

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

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.

Bluesky hint: It appears that some settings are not synced between web and mobile clients, so make sure you toggle on the Accessibility > Alt text toggles on all your devices!

Those two fellas made me play SO MANY games in the last two years. And that magma skin is just perfect. #steamdeck #odin2

Hey, Bluesky! Looking to connect with: 🖌️ UX/UI designers ⌨️ Frontend developers 🦾 Accessibility allies I'm fluent in Figma, use the cascade part of CSS, write in vanilla JavaScript, and make presentations on digital accessibility. I also play puzzle games and metroidbrainias. #promosky

Reading "Practical Charts" cursed me with knowledge of how bad most charts are. And in the first 20 pages my mind has been blown twice. Like this "obvious" way that I had NEVER thought of and audibly gasped at its brilliance.

Forgot the image alt text! It shows how to deal with long labels under charts with vertical bars. Don't make the labels vertical, and don't make them angled. Instead, rotate the entire chart 90 degrees, so bars are horizontal and labels can be easily read.

You are up to date.