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.
Here you go: on Safari zooming in and out is basically grinding the ui to a hold. On Chrome this effect is less pronounced but still noticeable on bigger documents. The cause of this is in essence the page being an inline svg. We have similar problems with our out editor on our site.
November 12, 2025 at 6:58 PM
Here you go: on Safari zooming in and out is basically grinding the ui to a hold. On Chrome this effect is less pronounced but still noticeable on bigger documents. The cause of this is in essence the page being an inline svg. We have similar problems with our out editor on our site.
Das wäre als Installation interessant. Es wäre super, das modular zu bekommen. Bei uns ist die Weihnachtsbeleuchtung modular. Sie wird einfach an die Laternenpfähle geklemmt. Wenn man über den Tag die Turbine genug Energie für eine Nacht LED-Licht zusammenbekommt, wäre das ne Alternative.
November 10, 2025 at 10:14 AM
Das wäre als Installation interessant. Es wäre super, das modular zu bekommen. Bei uns ist die Weihnachtsbeleuchtung modular. Sie wird einfach an die Laternenpfähle geklemmt. Wenn man über den Tag die Turbine genug Energie für eine Nacht LED-Licht zusammenbekommt, wäre das ne Alternative.
Woher kommt eigentlich der Drang, Kritik an Grünen Vorstellungen, entweder zu infantilisieren („Heuliheuli“) oder zu pathologischeren?
October 28, 2025 at 4:10 PM
Woher kommt eigentlich der Drang, Kritik an Grünen Vorstellungen, entweder zu infantilisieren („Heuliheuli“) oder zu pathologischeren?
Remind me to try that one next time I am on a laptop 😅
I see the point. But often the contents of a social media teaser and the ones on the DOM of the site have different ways to talk.
I see the point. But often the contents of a social media teaser and the ones on the DOM of the site have different ways to talk.
October 28, 2025 at 3:07 PM
Remind me to try that one next time I am on a laptop 😅
I see the point. But often the contents of a social media teaser and the ones on the DOM of the site have different ways to talk.
I see the point. But often the contents of a social media teaser and the ones on the DOM of the site have different ways to talk.
Should we go in o a class diet?
In #CSS Devs use way to often class names. Patterns like BEM have encouraged an explosion of class names, that often rely on Javascript to be updated.
Using pseudo classes, and semantic attributes helps us to work closer with the DOM.
In #CSS Devs use way to often class names. Patterns like BEM have encouraged an explosion of class names, that often rely on Javascript to be updated.
Using pseudo classes, and semantic attributes helps us to work closer with the DOM.
![Code Screenshot. CSS
/* instead of class names */
.checked{
…
}
/* use pseudo-classes */
:checked {
…
}
:has(:checked){
}
/* or semantic attributes */
[aria-checked]{
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:gilu7o4lu2uhhh2sztjeo47i/bafkreibgzg4pqocyvug6dns3azcnmyzgncxe6pmfkobp6gxco3jpmfeylm@jpeg)
October 16, 2025 at 5:56 AM
Should we go in o a class diet?
In #CSS Devs use way to often class names. Patterns like BEM have encouraged an explosion of class names, that often rely on Javascript to be updated.
Using pseudo classes, and semantic attributes helps us to work closer with the DOM.
In #CSS Devs use way to often class names. Patterns like BEM have encouraged an explosion of class names, that often rely on Javascript to be updated.
Using pseudo classes, and semantic attributes helps us to work closer with the DOM.
So. How would I add documentation for custom invoker commands in custom elements manifest and jsDoc?
#customElements #webcomponents
#customElements #webcomponents
October 2, 2025 at 3:29 PM
So. How would I add documentation for custom invoker commands in custom elements manifest and jsDoc?
#customElements #webcomponents
#customElements #webcomponents
While Custom Elements Manifest (CEM) seems to be a really powerful tool for documenting javascript based elements. For my current design System Work I am a little bit lost for options to documents #CSS Custom Properties and plain class names that reside outside of javascript pipelines. Any tipps?
September 26, 2025 at 1:53 PM
While Custom Elements Manifest (CEM) seems to be a really powerful tool for documenting javascript based elements. For my current design System Work I am a little bit lost for options to documents #CSS Custom Properties and plain class names that reside outside of javascript pipelines. Any tipps?
Exactly. Every argument you make for segmented scroll controls and indicators you got to make for linear scroll controls and indicators as well.
There isn’t any reason to not treat them consistently. Including their focus behaviors, keyboard and voice controls.
There isn’t any reason to not treat them consistently. Including their focus behaviors, keyboard and voice controls.
September 15, 2025 at 11:17 PM
Exactly. Every argument you make for segmented scroll controls and indicators you got to make for linear scroll controls and indicators as well.
There isn’t any reason to not treat them consistently. Including their focus behaviors, keyboard and voice controls.
There isn’t any reason to not treat them consistently. Including their focus behaviors, keyboard and voice controls.
Why and how should the lower element be in the html while the upper isn't. Why and how would we treat indicators for continuous scroll differently to indicators for segmented (snapping or paginated) scroll?
September 15, 2025 at 2:26 PM
Why and how should the lower element be in the html while the upper isn't. Why and how would we treat indicators for continuous scroll differently to indicators for segmented (snapping or paginated) scroll?
I don't understand why we should treat linear and segmented scroll indicators and controls differently. The only real difference is that we call the part that indicates the position and approximate size of the overflow the 'scroll-thumb', and the other the 'scroll-marker'.
September 15, 2025 at 1:53 PM
I don't understand why we should treat linear and segmented scroll indicators and controls differently. The only real difference is that we call the part that indicates the position and approximate size of the overflow the 'scroll-thumb', and the other the 'scroll-marker'.
Scroll markers serve the same role as scroll bars. Just for pages scroll. Scroll buttons are the same elements that were placed at the ends of scroll bars. The only difference is that they can now have other positions. Of course they should be controllable by assisistive technology. But not as html
September 15, 2025 at 1:04 PM
Scroll markers serve the same role as scroll bars. Just for pages scroll. Scroll buttons are the same elements that were placed at the ends of scroll bars. The only difference is that they can now have other positions. Of course they should be controllable by assisistive technology. But not as html
I am really, REALLY uncomfortable to clutter static DOM with elements that only work if javascript is present. Accessible and sustainable Code must as well be prepared for bad bandwidth, missing Javascript support and even dramatic layout changes based on device size or preferred UI settings.
September 11, 2025 at 6:07 AM
I am really, REALLY uncomfortable to clutter static DOM with elements that only work if javascript is present. Accessible and sustainable Code must as well be prepared for bad bandwidth, missing Javascript support and even dramatic layout changes based on device size or preferred UI settings.
Yeah.
event.source.dataset.fileFormat
is just a little longer. As soon as you start handling multiple values this seems to be a robust pattern.
event.source.dataset.fileFormat
is just a little longer. As soon as you start handling multiple values this seems to be a robust pattern.
August 30, 2025 at 3:55 PM
Yeah.
event.source.dataset.fileFormat
is just a little longer. As soon as you start handling multiple values this seems to be a robust pattern.
event.source.dataset.fileFormat
is just a little longer. As soon as you start handling multiple values this seems to be a robust pattern.
I wrote for our internal tools a download button for the current view of the <model-viewer> component.
Since I didn’t find a way to pass arguments in the docs I use data attributes and read them with the events source. A really handy technique.
Since I didn’t find a way to pass arguments in the docs I use data attributes and read them with the events source. A really handy technique.
August 30, 2025 at 2:38 PM
I wrote for our internal tools a download button for the current view of the <model-viewer> component.
Since I didn’t find a way to pass arguments in the docs I use data attributes and read them with the events source. A really handy technique.
Since I didn’t find a way to pass arguments in the docs I use data attributes and read them with the events source. A really handy technique.
My favorite little utility html custom elements is one that wraps a bunch of input fields and uses them to control other elements properties.
How would you call it?
#webcomponents #html
How would you call it?
#webcomponents #html
August 16, 2025 at 6:56 AM
My favorite little utility html custom elements is one that wraps a bunch of input fields and uses them to control other elements properties.
How would you call it?
#webcomponents #html
How would you call it?
#webcomponents #html
Und frei mal dürft ihr raten wer dieses Jahr in Köln 100 Meter von den Ständen des Cologne Pride sein Zelt aufgeschlagen hatte.
Nein! Doch! ooooh!
www.queer.de/detail.php?a...
Nein! Doch! ooooh!
www.queer.de/detail.php?a...
August 11, 2025 at 5:45 PM
Und frei mal dürft ihr raten wer dieses Jahr in Köln 100 Meter von den Ständen des Cologne Pride sein Zelt aufgeschlagen hatte.
Nein! Doch! ooooh!
www.queer.de/detail.php?a...
Nein! Doch! ooooh!
www.queer.de/detail.php?a...
So … if we go for a DOM-Version of this:
How would that look like?
An invoker command jumps to mind.
Though I am not sure if there is a way to hide/disable a button in case the command is impossible.
How would that look like?
An invoker command jumps to mind.
Though I am not sure if there is a way to hide/disable a button in case the command is impossible.
August 11, 2025 at 8:40 AM
So … if we go for a DOM-Version of this:
How would that look like?
An invoker command jumps to mind.
Though I am not sure if there is a way to hide/disable a button in case the command is impossible.
How would that look like?
An invoker command jumps to mind.
Though I am not sure if there is a way to hide/disable a button in case the command is impossible.
Not that novel at all. Even the first visual the scrollbar-styling spec point them out clearly as a part of the traditional anatomy of the scroll-bar. You can only threat them differently because of many (questionable) OS designs ignoring them for a while.
developer.chrome.com/docs/css-ui/...
developer.chrome.com/docs/css-ui/...
August 10, 2025 at 6:53 PM
Not that novel at all. Even the first visual the scrollbar-styling spec point them out clearly as a part of the traditional anatomy of the scroll-bar. You can only threat them differently because of many (questionable) OS designs ignoring them for a while.
developer.chrome.com/docs/css-ui/...
developer.chrome.com/docs/css-ui/...
Here's a summary of my thoughts on that: gehrmann-design.de/blog/my-case...
TLDR: For me scroll-button are elements provided by the browser similar to the thumb and track of the scrollbar. With stylesheets we just help the browser to integrate them smoothly into our UI.
TLDR: For me scroll-button are elements provided by the browser similar to the thumb and track of the scrollbar. With stylesheets we just help the browser to integrate them smoothly into our UI.
August 10, 2025 at 3:51 PM
Here's a summary of my thoughts on that: gehrmann-design.de/blog/my-case...
TLDR: For me scroll-button are elements provided by the browser similar to the thumb and track of the scrollbar. With stylesheets we just help the browser to integrate them smoothly into our UI.
TLDR: For me scroll-button are elements provided by the browser similar to the thumb and track of the scrollbar. With stylesheets we just help the browser to integrate them smoothly into our UI.
A typical case that I had hoped to solve with popovers were this kind of shopable image elements. But the established behavior on pointer and touch devises differ so strongly that JavaScript is still needed. Feels like the option with the opt in „info“ button would cover that with a bit css magic.
August 8, 2025 at 7:52 AM
A typical case that I had hoped to solve with popovers were this kind of shopable image elements. But the established behavior on pointer and touch devises differ so strongly that JavaScript is still needed. Feels like the option with the opt in „info“ button would cover that with a bit css magic.
