Michael G
@g12n.de
UI-Designer, using Code to create in CSS, SVG and JS. Technology enthusiast, fan of Smart Home, Humanist and dweller in the marvelous city of Cologne.
Reposted by Michael G
I wrote a little thing for the HTML Hell advent calendar from @matuzo.at — but on a good improvement to HTML rather than a hellish thing 🙂
Improvements to the Speculation Rules API, which allows you to (now more easily) prefetch and prerender HTML pages:
htmhell.dev/adventcalend...
Improvements to the Speculation Rules API, which allows you to (now more easily) prefetch and prerender HTML pages:
htmhell.dev/adventcalend...
Speculation rules improvements - HTMHell
A collection of bad practices in HTML, copied from real websites.
htmhell.dev
December 3, 2025 at 7:39 AM
I wrote a little thing for the HTML Hell advent calendar from @matuzo.at — but on a good improvement to HTML rather than a hellish thing 🙂
Improvements to the Speculation Rules API, which allows you to (now more easily) prefetch and prerender HTML pages:
htmhell.dev/adventcalend...
Improvements to the Speculation Rules API, which allows you to (now more easily) prefetch and prerender HTML pages:
htmhell.dev/adventcalend...
Reposted by Michael G
HTMLHell smashing it out of the park on day one with this article from @5t3ph.bsky.social
Top layer troubles: popover vs. dialog
htmhell.dev/adventcalend...
Top layer troubles: popover vs. dialog
htmhell.dev/adventcalend...
Top layer troubles: popover vs. dialog - HTMHell
A collection of bad practices in HTML, copied from real websites.
htmhell.dev
December 1, 2025 at 9:21 AM
HTMLHell smashing it out of the park on day one with this article from @5t3ph.bsky.social
Top layer troubles: popover vs. dialog
htmhell.dev/adventcalend...
Top layer troubles: popover vs. dialog
htmhell.dev/adventcalend...
Because auf CSS-in-JS we have to reteach developers the basics of #CSS and work against oversimplifications an misconceptions. Especially when introducing stuff like `--css-custom-properies` `@layer` and `:where()` selectors. It's tedious and friendly speaking irritating.
Every paragraph of this article is a banger. “We don’t need to reinvent styling. We just need to respect the boundaries that made the web work in the first place. CSS is not broken; our discipline is. The answer isn’t more abstraction—it’s better understanding.” thenewstack.io/css-in-js-th...
CSS-in-JS: The Great Betrayal of Frontend Sanity
CSS-in-JS promised simplicity but delivered performance issues. Learn why ditching it for native CSS solutions leads to faster, more maintainable web apps.
thenewstack.io
November 30, 2025 at 6:37 PM
Because auf CSS-in-JS we have to reteach developers the basics of #CSS and work against oversimplifications an misconceptions. Especially when introducing stuff like `--css-custom-properies` `@layer` and `:where()` selectors. It's tedious and friendly speaking irritating.
Reposted by Michael G
Every paragraph of this article is a banger. “We don’t need to reinvent styling. We just need to respect the boundaries that made the web work in the first place. CSS is not broken; our discipline is. The answer isn’t more abstraction—it’s better understanding.” thenewstack.io/css-in-js-th...
CSS-in-JS: The Great Betrayal of Frontend Sanity
CSS-in-JS promised simplicity but delivered performance issues. Learn why ditching it for native CSS solutions leads to faster, more maintainable web apps.
thenewstack.io
November 28, 2025 at 8:13 PM
Every paragraph of this article is a banger. “We don’t need to reinvent styling. We just need to respect the boundaries that made the web work in the first place. CSS is not broken; our discipline is. The answer isn’t more abstraction—it’s better understanding.” thenewstack.io/css-in-js-th...
The Scroll Bar Problem: In the ongoing debate about scroll markers and scroll buttons there is one open question: Should we treat linear scroll bars and segmented scroll bars differently?
gehrmann-design.de/blog/2025-11...
gehrmann-design.de/blog/2025-11...
The Scroll Bar Problem
In the ongoing debate about scroll markers and scroll buttons there is one open question.
gehrmann-design.de
November 30, 2025 at 5:56 PM
The Scroll Bar Problem: In the ongoing debate about scroll markers and scroll buttons there is one open question: Should we treat linear scroll bars and segmented scroll bars differently?
gehrmann-design.de/blog/2025-11...
gehrmann-design.de/blog/2025-11...
Re reading @dbushell.com comment on pseudo-elements.
Still wondering how this code example is supposed not to break separation of concerns.
This "content" actually makes layout decisions. Which is supposed to be part of #CSS.
And breaks on paged and static media.
dbushell.com/2025/05/23/p...
Still wondering how this code example is supposed not to break separation of concerns.
This "content" actually makes layout decisions. Which is supposed to be part of #CSS.
And breaks on paged and static media.
dbushell.com/2025/05/23/p...
November 30, 2025 at 2:31 PM
Re reading @dbushell.com comment on pseudo-elements.
Still wondering how this code example is supposed not to break separation of concerns.
This "content" actually makes layout decisions. Which is supposed to be part of #CSS.
And breaks on paged and static media.
dbushell.com/2025/05/23/p...
Still wondering how this code example is supposed not to break separation of concerns.
This "content" actually makes layout decisions. Which is supposed to be part of #CSS.
And breaks on paged and static media.
dbushell.com/2025/05/23/p...
In other words: use the tools that work best for a given task. If that’s Figma. Great! Use that. But if you have design element types* figma can’t handle, use something else.
*3D models, generative voice models, shaders, color fonts, animated pixel art … whatever.
*3D models, generative voice models, shaders, color fonts, animated pixel art … whatever.
November 28, 2025 at 5:50 PM
In other words: use the tools that work best for a given task. If that’s Figma. Great! Use that. But if you have design element types* figma can’t handle, use something else.
*3D models, generative voice models, shaders, color fonts, animated pixel art … whatever.
*3D models, generative voice models, shaders, color fonts, animated pixel art … whatever.
Every time I hear the term “single source of truth” I wanna say that it’s just a set of design **guidelines** not holy scripture.
November 28, 2025 at 5:37 PM
Every time I hear the term “single source of truth” I wanna say that it’s just a set of design **guidelines** not holy scripture.
Reposted by Michael G
I purchased every layout many years ago and I still reference it at least a few times a year. Great time to pick it up!
Oh I forgot to mention on here, Every Layout is doing the annual 50% discount too! every-layout.dev
Relearn CSS layout
every-layout.dev
November 28, 2025 at 2:34 PM
I purchased every layout many years ago and I still reference it at least a few times a year. Great time to pick it up!
Hi @figma.com team.
Is it correct that neither Figma Buzz nor Figma Slides files can be accessed via the REST Api?
The standard /v1/files/ endpoint explicitly returns:
{
"status": 400,
"err": "File type not supported by this endpoint"
}
Or am I doing it wrong?
Is it correct that neither Figma Buzz nor Figma Slides files can be accessed via the REST Api?
The standard /v1/files/ endpoint explicitly returns:
{
"status": 400,
"err": "File type not supported by this endpoint"
}
Or am I doing it wrong?
November 28, 2025 at 9:51 AM
Hi @figma.com team.
Is it correct that neither Figma Buzz nor Figma Slides files can be accessed via the REST Api?
The standard /v1/files/ endpoint explicitly returns:
{
"status": 400,
"err": "File type not supported by this endpoint"
}
Or am I doing it wrong?
Is it correct that neither Figma Buzz nor Figma Slides files can be accessed via the REST Api?
The standard /v1/files/ endpoint explicitly returns:
{
"status": 400,
"err": "File type not supported by this endpoint"
}
Or am I doing it wrong?
Most projects like #KSS or #SASSdoc stopped development 5 to even 10 years ago. A sign of the heavy reliance on JavaScript, even in the design system landscape. A good example is @webawesome.com: while utilizing custom elements manifest for generating the doc of JS components. CSS docs are manual.
November 27, 2025 at 6:32 AM
Most projects like #KSS or #SASSdoc stopped development 5 to even 10 years ago. A sign of the heavy reliance on JavaScript, even in the design system landscape. A good example is @webawesome.com: while utilizing custom elements manifest for generating the doc of JS components. CSS docs are manual.
Reposted by Michael G
`flex-wrap: balance` bsky.app/profile/yisi...
Relying solely on max-width appears insufficient to resolve the issue of “a single image being placed on a single line” in certain scenarios.
We hope Chrome will ship `flex-wrap: balance` as soon as possible.
codepen.io/yisi/full/Wb...
We hope Chrome will ship `flex-wrap: balance` as soon as possible.
codepen.io/yisi/full/Wb...
November 26, 2025 at 1:05 PM
`flex-wrap: balance` bsky.app/profile/yisi...
With #CSS custom properties widely established and native mix-ins as well as functions already on track the use of utility classes seems less useful.
November 22, 2025 at 7:49 AM
With #CSS custom properties widely established and native mix-ins as well as functions already on track the use of utility classes seems less useful.
Setting up a documentation setup for utilizing #customElements manifest and @11ty.dev. Deeply satisfying. Though I wonder how to incorporate CSS only parts of the design system. With modern CSS and HTML many old JavaScript solutions simply became obsolete.
November 21, 2025 at 6:21 AM
Setting up a documentation setup for utilizing #customElements manifest and @11ty.dev. Deeply satisfying. Though I wonder how to incorporate CSS only parts of the design system. With modern CSS and HTML many old JavaScript solutions simply became obsolete.
Reposted by Michael G
Want a fully custom date picker and the native calendar popup?
Build your own UI, then call input.showPicker() to summon the browser’s date picker on demand.
Build your own UI, then call input.showPicker() to summon the browser’s date picker on demand.
November 15, 2025 at 6:58 AM
Want a fully custom date picker and the native calendar popup?
Build your own UI, then call input.showPicker() to summon the browser’s date picker on demand.
Build your own UI, then call input.showPicker() to summon the browser’s date picker on demand.
Should this be an an HTML attribute?
If aria-orientation is to be put into the DOM it only can be done by JavaScript. Because before CSS has done its thing, there is no way to tell beforehand the layout a component untimely has or finds itself in.
developer.mozilla.org/en-US/docs/W...
If aria-orientation is to be put into the DOM it only can be done by JavaScript. Because before CSS has done its thing, there is no way to tell beforehand the layout a component untimely has or finds itself in.
developer.mozilla.org/en-US/docs/W...
ARIA: aria-orientation attribute - ARIA | MDN
The aria-orientation attribute indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
developer.mozilla.org
November 13, 2025 at 7:01 PM
Should this be an an HTML attribute?
If aria-orientation is to be put into the DOM it only can be done by JavaScript. Because before CSS has done its thing, there is no way to tell beforehand the layout a component untimely has or finds itself in.
developer.mozilla.org/en-US/docs/W...
If aria-orientation is to be put into the DOM it only can be done by JavaScript. Because before CSS has done its thing, there is no way to tell beforehand the layout a component untimely has or finds itself in.
developer.mozilla.org/en-US/docs/W...
I think the biggest hurdle with using container queries is the fact that they only can change the behavior of the containers children. Gotta wrap my brain around this for a while.
November 13, 2025 at 6:11 PM
I think the biggest hurdle with using container queries is the fact that they only can change the behavior of the containers children. Gotta wrap my brain around this for a while.
New #CSS features allow a different approach to design systems. Thinking in color relations instead of fixed palettes. 1/2
Over on @zeroheight.com's blog, I wrote about using some of the CSS' modern colour features that you can apply to your design systems.
zeroheight.com/blog/leverag...
#DesignSystems #CSS
zeroheight.com/blog/leverag...
#DesignSystems #CSS
Leveraging modern CSS color features in your design system - zeroheight
Declan Chidlow outlines modern CSS color features including variables, color spaces, and mixing that you can use with your design systems.
zeroheight.com
November 13, 2025 at 10:47 AM
New #CSS features allow a different approach to design systems. Thinking in color relations instead of fixed palettes. 1/2
Reposted by Michael G
Over on @zeroheight.com's blog, I wrote about using some of the CSS' modern colour features that you can apply to your design systems.
zeroheight.com/blog/leverag...
#DesignSystems #CSS
zeroheight.com/blog/leverag...
#DesignSystems #CSS
Leveraging modern CSS color features in your design system - zeroheight
Declan Chidlow outlines modern CSS color features including variables, color spaces, and mixing that you can use with your design systems.
zeroheight.com
November 11, 2025 at 12:06 PM
Over on @zeroheight.com's blog, I wrote about using some of the CSS' modern colour features that you can apply to your design systems.
zeroheight.com/blog/leverag...
#DesignSystems #CSS
zeroheight.com/blog/leverag...
#DesignSystems #CSS
Reposted by Michael G
“GitHub no longer uses toasts because of their accessibility and usability issues.”
Music to my ears!
primer.style/accessibilit...
Music to my ears!
primer.style/accessibilit...
Toasts
GitHub no longer uses toasts because of their accessibility and usability issues.
primer.style
November 12, 2025 at 7:36 AM
“GitHub no longer uses toasts because of their accessibility and usability issues.”
Music to my ears!
primer.style/accessibilit...
Music to my ears!
primer.style/accessibilit...
Thinking about different states of mind guiding the way that we approach #designsystems and #webdwvelopment. What do you think? Are you more of a gardener or a butterfly collector? A taxonomist or a geneticist? Let’s talk.
gehrmann-design.de/blog/buterfl...
gehrmann-design.de/blog/buterfl...
Of Butterflies And Gardens
an exploration of mental models in design system architecture
gehrmann-design.de
November 9, 2025 at 8:13 PM
Thinking about different states of mind guiding the way that we approach #designsystems and #webdwvelopment. What do you think? Are you more of a gardener or a butterfly collector? A taxonomist or a geneticist? Let’s talk.
gehrmann-design.de/blog/buterfl...
gehrmann-design.de/blog/buterfl...
I really really really want to make @penpot.app work for me. I really do. But it’s a challenge.
November 9, 2025 at 7:24 AM
I really really really want to make @penpot.app work for me. I really do. But it’s a challenge.
Hello, TypeScript users! What advantages does using TS offer you that JSdoc doesn't?
What are the points that make it worth the overhead of a build? Would you skip it for certain project types?
What are the points that make it worth the overhead of a build? Would you skip it for certain project types?
November 8, 2025 at 7:10 AM
Hello, TypeScript users! What advantages does using TS offer you that JSdoc doesn't?
What are the points that make it worth the overhead of a build? Would you skip it for certain project types?
What are the points that make it worth the overhead of a build? Would you skip it for certain project types?
I am uncomfortable with our reliance on npm, GitHub, build tools and so on.
We see big infrastructure fail spectacularly. Because we ignored the decentralized nature of the web.
Going Buildless should not be a revolutionary concept.
modern-web.dev/guides/going...
We see big infrastructure fail spectacularly. Because we ignored the decentralized nature of the web.
Going Buildless should not be a revolutionary concept.
modern-web.dev/guides/going...
Going Buildless: Getting Started: Modern Web
Guides, tools and libraries for modern web development.
modern-web.dev
November 8, 2025 at 7:00 AM
I am uncomfortable with our reliance on npm, GitHub, build tools and so on.
We see big infrastructure fail spectacularly. Because we ignored the decentralized nature of the web.
Going Buildless should not be a revolutionary concept.
modern-web.dev/guides/going...
We see big infrastructure fail spectacularly. Because we ignored the decentralized nature of the web.
Going Buildless should not be a revolutionary concept.
modern-web.dev/guides/going...