Egor Kloos

@dutchcelt
309 Followers
293 Following
2.6K Posts

Design Systems, CSS, Web Components, Photography, Food, HiFi. All the good things in life should be cherished and savoured. Toots are my own - he/him - Gen X - 🇳🇱🇮🇪

Blog: https://dutchcelt.nl

Work stuff: As a Design System Engineer/Architect, I always look at how web stacks implement a design.
Design is never an add-on; it's an integral part of the solution.

Websitehttps://dutchcelt.nl
Codepenhttps://codepen.io/dutchcelt
Linkedinhttps://www.linkedin.com/in/dutchcelt/
GitHubhttps://github.com/dutchcelt
Pfft. What is it with Typescript and Class mixins?

CSS has just added an image form of light-dark(). So as well as choosing between a pair of colors based on light or dark mode, you can also choose between a pair of images.
No you can't mix them because parsing would be hard.
#CSS

https://www.w3.org/TR/css-color-5/#light-dark

CSS Color Module Level 5

I spent too much time looking at too many colo(u)rs to try and optimise them for csskit. Here are some interesting findings.

https://www.keithcirkel.co.uk/too-much-color/

Too Much Color

I spent too much time looking at too many colo(u)rs to try and optimise them for csskit. Here are some interesting findings.

Keith Cirkel

Somehow I never got around to trying out `box-decoration-break` and now there is a new Codepen Editor mode. Good moment as any to play with both.

#css

https://codepen.io/editor/dutchcelt/pen/019cd223-cec0-7eaa-8a52-ffdc2254c059

Rotated text marker

A code demo by Egor Kloos created on CodePen

CodePen
People are not static, we are dynamic. In order to meet our needs at any point in our lives or day, the UIs we create must be able to adapt to us — not the other way around. https://www.linkedin.com/posts/derekfeatherstone_accessibility-disability-activity-7434648295420870656-mH3o
Accessibility varies by context and tool usage | Derek Featherstone posted on the topic | LinkedIn

I know someone that uses her screen reader on her mobile phone, but when she's on her desktop computer, she uses a mangifier. Different contexts, different tools, same person. I know someone that uses voice controls on his computer. He uses direct commands like "Click Contact Us" when he's near the start of his day, and commands like "Click link, twelve" when he's near the end of his day with lower energy and less clear speech and a dry mouth. Different energy/capacity, same tools, same person. I know someone that uses a switch on his computer. He also uses the onscreen keyboard on his computer. The one that he chooses reflects the task he's trying to accomplish and how he can minimize switching between the tools. Different task, same context, same tools, same person. Disability is not black and white... it's every shade of every colour. #Accessibility #Disability

People got upset when GitHub (rightfully) called out usability/accessibility issues with toasts.

And now, I have to deal with some thought leaders’ anti take on it to my teams because they wanted to get attention for playing devils advocate.

Tech “thought leaders” tend to make my job harder 🙃

🚩✊️️ TGIF, because Friday is Dependency Deletion Day! It has come to my attention that some folks STILL use lodash because of… cloneDeep?! I see about 150,000,000 weekly downloads for this ancient function on NPM, but come on—we've had structuredClone for some time, and it's better in every way.

👉️ https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone

Can you guess which one is a valid syntax for style queries?

Think about it, then read my last post to find the correct answer (and understand why you got it wrong)

https://css-tip.com/if-trick/

#CSS #HTML

When you don't put `aria-hidden="true"` on decorative SVGs, they'll be announced by some screen readers.

#WebAccessibilityFails

https://matuzo.at/blog/2026/put-aria-hidden-on-presentational-svgs

Put aria-hidden=

I'm a frontend developer in Graz, specialized in HTML, accessibility, and CSS layout and architecture.

Manuel Matuzovic
You can throw away innerHTML and replace it with the new setHTML(), which has a built-in sanitizer. Here's how it works: