iiinova — where your digital self keeps evolving

Michael G @g12n.de · 11/09/2026

Vor 25 Jahren standen wir fassungslos vor den Monitoren. Als um 14:46 Uhr deutscher Zeit die Welt erschütterte.

Vector Illustration der Skyline von Manhattan mit den Twin Towers des World Trade Centers als weiße outline vor dunkelblauem Hintergrund. Darüber das Wort „remember“.

001

Michael G @g12n.de · 24/06/2026

Nice! Motion arrived in @figma.com natively. That‘s gonna make a lot of impact.

010

Michael G @g12n.de · 06/06/2026

Doomsday-Prognosen sind mittlerweile so eine Art Marketing geworden. „Claude Mythos“, ein auf Cybersicherheit ausgerichtetes Modell von Anthropic, ging mit genau diesem Kniff an den Markt: „Zu gefährlich“ für einen offenen Release. (1/3)

Screenshot aus dem Wirtschafts-Ressort der Tagesschau:

Gefahren von Künstlicher Intelligenz
Anthropic fordert Pause bei KI-Entwicklung
Stand: 05.06.2026 • 13:35 Uhr

110

Michael G @g12n.de · 23/05/2026

Reiner Zufall, dass die Daten praktisch identisch sind mit der Population Density. Und damit natürlich in Ballungsräumen auch andere Faktoren wie hohes Alter, Verkehrsbelastund und und und ins Spiel kommen. Oder auch die Nähe zu größeren Solaranlagen 🙄🙄🙄

Map with Mapping the U.S. solar boom
Ground-mounted PV arrays of at least 1 MW as of start of 2022

180

Michael G @g12n.de · 23/05/2026

In the old web forums and other websites pointed to the „Sliding Doors of CSS“ year; even decades; after browsers supported rounded corners and gradients. Keeping it „fresh“ even though outdated. Many people didn’t open the link to get this message. alistapart.com/article/slid...

Screenshot from tje linked website:

A note from the editors: While brilliant for
its time, this article no longer reflects modern best practices.

110

Michael G @g12n.de · 21/05/2026

Not gonna lie: the baseline status of anchor-position always trips me up. It does not really reflect the actual usability of the spec. And especially javascript centric developers use this to argue against usage of existing web platform features. How can we communicate better on this?

Baseline Status widget for Anchor-Positioning. Showing Limited availability and an x in every major browser.

130

Michael G @g12n.de · 19/05/2026

You would be able to combine the border-shape with the inset function to set the desired effect. codepen.io/g12n/pen/ogY...

Code screenshot of combining border-shape with negative inset() to simulate a border-offset property.

.border-offset{
border-shape: inset(-5px round 5px);
}

110

Michael G @g12n.de · 17/05/2026

This kind of misunderstanding modern technology is really concerning. Biometric Data never leaves your device when using passkey. And you don’t even need to use it. People opting for much less secure options because of bad communication and wolf roumors makes the web a less safe space.

A screenshot of a social media post by user "I am the Lord your Dog!" (@anson343.bsky.social).
Text in the post:
"This greets me after I enter my password but before it opens my e mail page, relentless biometric data harvesting with no protections from them sharing it now or in the future. This is why data centers are a threat to our freedom and privacy, just say no!"
Text in the image within the post:
An illustration shows a computer monitor and a smartphone displaying a fingerprint icon. Below it, the text reads: "Sign in with your fingerprint or code. With a passkey, you can sign in quickly using your fingerprint or the code you..."

240

Michael G @g12n.de · 10/05/2026

I made a small circular moon picker experiment over on @codepen.io Featuring customizable select elements, sin(), cos(), sibling-count() and sibling-index() #CSS functions. codepen.io/editor/g12n/...

0132

Michael G @g12n.de · 09/05/2026

How did you extend the background of of the element to with the out facing arc? In my experiments only the border extends beyond the original object box. not the background.

button with the top edge of the border-shape extended over the natural edge. the background of the button is not covering the whole element

110

Michael G @g12n.de · 03/05/2026

Damn, this one blew my mind. How for I not know that?!

Code Screenshot

Replace image content with CSS

img {
content: image-set(
url("image.png") 1x,
url("image-2x.png") 2x
);
}

021

Michael G @g12n.de · 02/05/2026

Yeah. Though I‘d prefer to keep the relationship of the pages in the dom, rather than building a new script every for every change of the slides. Right now I link the files simply with a tags. And use script only for the keyboard commands.

Code example

<a aria-keyshortcuts="ArrowLeft p"
href="slide-03. html">prev</a>
<a aria-keyshortcuts="ArrowRight n"
href="slide-02. html">next</a>

110

Michael G @g12n.de · 02/05/2026

Why is the example code of @developer.mozilla.org setting the `e.viewTransition.types` on `pageswap` AND on `pagereveal`? Am I missing something? The transition type set on pageswap seems not to carry over to the new page, where the actual animation happens. @bram.us, am I stupid?

Code example from MDN:

window.addEventListener("pageswap", async (e) => {
// Grab the old and new navigation entries on the outgoing page from the pageswap event object's
// activation property, pass these to the determineTransitionType() function to determine the type
const transitionType = determineTransitionType(
e.activation.from,
e.activation.entry
);
console.log(`pageSwap: ${transitionType}`);
// Add the type to the active ViewTransition via its types property
e.viewTransition.types.add(transitionType);
});

window.addEventListener("pagereveal", async (e) => {
// Grab the old and new navigation entries on the incoming page from the Navigation.activation
// object, pass these to the determineTransitionType() function to determine the type
const transitionType = determineTransitionType(
navigation.activation.from,
navigation.activation.entry
);

console.log(`pageReveal: ${transitionType}`);
// If the type is undefined, don't add anything to the transition types
if (transitionType !== undefined) {
// Add the type to the active ViewTransition via its types property
e.viewTransition.types.add(transitionType);
}
});

120

Michael G @g12n.de · 29/04/2026

Live Engineering Kiosk Rhine-Ruhr Mestup in Düsseldorf

Slide of Engineering Kiosk Rhine-Ruhr Mestup in Düsseldorf

010

Michael G @g12n.de · 15/04/2026

Amazing Second conference day at @smashingconf.com Great conversations and networking! #smashingConf

Photo of the smashing conference stage with the open slide „Networking“. Showing a cloud of speech bubbles with different emoji style illustrations of different topics of discussion.

041

Michael G @g12n.de · 14/04/2026

Nice question on the #smashingConf board. Not ready yet for the big stage but scoped view transitions will be a blast for that.

Post-it Note: how to use view transitions in micro-animations.

121

Michael G @g12n.de · 14/04/2026

My first evening of #smahingConf already was a blast. I loved the demo by @schepp.dev to bits, it rediculous. Now let’s get started into a new day.

Sunrise at the ferry port of Amsterdam central

120

Michael G @g12n.de · 13/04/2026

German Angst meets German delays.

Digital board for ICE 126 to Amsterdam CS. Scheduled for 12:49, delayed to 12:52. Stops: Düsseldorf, Duisburg, Oberhausen, Arnhem, Utrecht. Bicycle reservation required. Train cars 29-21 located at platform sections A-C, with 1st class (yellow bar) in section A.

000

Michael G @g12n.de · 04/04/2026

Duck tales, whoohuuu.

A top-down, close-up shot of a white desk featuring a handmade espresso cup and saucer set with a spooky theme.
The cup and saucer are glazed in high-contrast black and white, decorated with hand-painted skulls, ghosts, and bones. Inside the saucer, a tiny, three-dimensional black duck with a bright orange beak sits among the painted ghosts.
The set is surrounded by everyday items:
• A pair of black-rimmed glasses to the right.
• A white wireless earbud charging case in the foreground.
The espresso cup appears used, with dark coffee residue visible around the inner rim.

000

Michael G @g12n.de · 27/03/2026

If compilations count: "Ministry of Sound – The Annual – 1999-2000", mixed by Tom Novy und Boy George

Foto of the CD Box of "Ministry of Sound – The Annual – 1999-2000", gemixt von Tom Novy und Boy George

010

Michael G @g12n.de · 12/03/2026

Three explainers from the OpenUI group to study with care. focusgroup: open-ui.org/components/s... openable: open-ui.org/components/o... invokers (future): open-ui.org/components/f... Three powerful building blocks for many UI Elements.

Demo HTML Code for a Tab like UI implanted with focusgroup + openable +invoker

<div focusgroup="inline">
<button focusgroupstart commandfor="panel-1" command="toggle">
Open Panel 1
</button>
<button commandfor="panel-2" command="toggle-openable">
Open Panel 2
</button>
<button commandfor="panel-3" command="toggle-openable">
Open Panel 3
</button>
</div>

<div id="panel-1" openable defaultopen name="tabs">
Panel 1
</div>
<div id="panel-2" openable name="tabs">
Panel 2
</div>
<div id="panel-3" openable name="tabs">
Panel 3
</div>

010

Michael G @g12n.de · 10/03/2026

Here you hit quite close to home for me. As a photo company, a major component for us is the picker. In the DOM, that is typically a list. And the number of columns depends on the device (or soon the container size). In the explainer, the grid sounds like table with fixed rows and cells.

Screenshot of a image grid with 4 columns.

110

Michael G @g12n.de · 09/03/2026

#webcomponents and #invokerCommands are a match made in heaven. With the CommandEvents source property you can easily access the dataset or any other attribute of the element that invoked the command.

Code Screenshot of the Source Dataset Pattern for custom invoker commands:
html-code:

<button commandfor="my-snap"
command="--download" data-filename="my-image" data-format="jpeg">
Download Snapshot as JPEG
</button>

010

Michael G @g12n.de · 28/01/2026

One dream featuere, that would solve a ton of problems for me, would be browsers exposing their node capture feature to js. Or View Transition API Snapshots to be captured with JS manually. Tools like Code Screenshots or libraries like snapDOM would become to much more reliable.

Code Screenshot:

const myBanner = document.getElementById("banner");

let mySnapshot = document.captureNodeSnapshot(myBanner);

console.log(mySnapshot.toDataURL())

330

Michael G @g12n.de · 25/01/2026

@codepen.io is that wonderful place where you can use hotpink and deeppink in the same view transitions demos. codepen.io/g12n/full/MY... #css #JS #animation

0134

Michael G @g12n.de · 14/01/2026

OK Am I just stupid or are really import maps always inlines although they are formatted as JSON rather than JavaScript objects? Tell me if this is a stupid idea or not:

Code screenshot of a hypothetical example of import map tags with a src parameter

<script type="importmap" src="latest.json"></script>
<script type="importmap" merge src="https://examplelib.com/v3-2.json"></script>

000

Michael G @g12n.de · 21/12/2025

Ja schade … müssen alle wohl sehen wo das Geld her kommt.

Screenshot der FR Seite. Mehrere überlappende Werbeanzeigen, keine Möglichkeit den Artikel tatsächlich zu lesen.

000

Michael G @g12n.de · 01/12/2025

I tried to create a scroll button component. I was actually contemplating the use of invoker commands. However, there is an architectural hurdle: the element cannot communicate with the button to tell it about its internal state. Let's deconstruct the details element, for example: (1/2)

details deconstructed
<div>Details Summary<div>

‹button commandfor="details-content"
command="toggle-visibility"
title="open details"›
< button>
<div id="details-content" closed>
lorem ipsum
</div>

100

Michael G @g12n.de · 01/12/2025

And nobody actually did. In over a decade if friendly speaking disastrous results. Form the slightly annoying to the ludicrously stupid (see screenshot, that we already talked about) Maybe it's time to meet css on its terms.

A screenshot of the Bluesky Interface with a paragraph selection and shown in the developer tools. The selected markup shows a tiny text wrapper <div> that’s burdened with an enormous dump of auto-generated inline styles. It’s clearly machine-produced (likely by a design system or React styling engine) and results in a huge, unreadable, unmaintainable block of CSS injected directly into the element instead of being handled by classes or tokens.

200

Michael G @g12n.de · 30/11/2025

But they are in essence two different kinds of cards. With a custom properties based theming mechanism.

Screenshot of 4 content link cards with individually coloured backgrounds

100

Michael G @g12n.de · 30/11/2025

All descendants (of a type). Which is actually pretty useful especially in cases when the detailed structure of the descendants can vary. With child selectors you often end up with spaghetti selectors. `ul.cards>li>a,ul.cards>li>span>a{}` instead of `ul.cards a{}`

Code screenshot of an unordered list links.
One of the a tags is wrapped in a span.

210

Michael G @g12n.de · 30/11/2025

In the end we end up at the same question again: why propose a declarative markup solution for segmented or pages overflows if you wouldn’t even think of is for plain scrolling overflows? Or shall we make scrollbars as markup? (Please don’t.)

Code screenshot of declarative scroll bars

<div id="longtext">
<!-- [images or long text] -->
</div>
<button commandfor="longtext" command="next">
Next Thing
</button>
<input class="scrolbar" type="range" commandfor="longtext" command="scroll-to-position"/>

100

Michael G @g12n.de · 30/11/2025

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

carousel example code:
<carousel>
<carouselprev>Previous Thing</carouselprev>
<carouselnext>Next Thing</carouselnext>
</carousel>

000

Michael G @g12n.de · 28/11/2025

I think there is only one issue there: you don't need shadow Dom to make an html custom elements. Actually using this term instead of `webcomponents` helps a lot to not stumble into this confusion with frameworks. In your hierarchy these are on the same level as semantic html tags.

You want to create a custom element?
follow these steps:
1. type: <hello-world></hello-world>

2. ✅ DONE!

Congratulations ✨.
You just create html custom element.
The only rule you need to follow
is that your tag name contains at
least one - dash.

100

Michael G @g12n.de · 27/11/2025

Sorry, there is a typo in the example in the other post!

Code screenshot of a js doc style comment
/** @essprop {color} [--my-color=#ff6600] - property description */
mark{
text-decoration-color: var(--my-property, #ff6600);
｝

000

Michael G @g12n.de · 27/11/2025

To be honest: I barely register a custom property at all, if I don't have to for animation. Comparing different options this feels like a bot of overhead. And even when registering the property we still need a comment to say "That's the color for attention grabbing decorations. Don't use for copy"

Code screenshot of an inline comment

--my-property: #ff6600; /* property description*/

Code Screenshot of a top comment:
/* property description*/
- -my-property: #ff6600;

Code screenshot of a registered property:

/* property description*/
@property --my-property {
syntax: "<color>";
inherits: true;
initial-value: #ff600;
}

Code Screenshot js doc style comment on an element:

/** @essprop {color} I--my-color=#000000] - property description */
mark{
text-decoration-color: var(--my-property, #ff6600);
｝

100

Michael G @g12n.de · 27/11/2025

Of course this could become tedious 😄

$Code Screenshot /** * @tag button * @summary Default button element used for primary and secondary actions. * * @cssProp --button-radius - Border radius of the button component. * @cssProp --button-block-padding - Vertical (block) padding inside the button. * @cssProp --button-inline-padding - Horizontal (inline) padding inside the button. * * @cssProp --button-stroke-width - Border width of the button. * @cssProp --button-color-stroke - Border color of the button in its default state. * * @cssProp --button-font-size - Font size of the button label. * @cssProp --button-font-weight - Font weight of the button label. * * @cssProp --button-color-fill - Background color of the button in its default state. * @cssProp --button-color-fill--hover - Background color when the button is hovered. * @cssProp --button-color-fill--active - Background color while the button is actively pressed. * @cssProp --button-color-fill--pressed - Background color when the button is in a pressed / selected state (`aria-pressed`, `aria-checked`, `aria-selected`). * * @cssProp --button-color-text - Text color of the button in its default state. * @cssProp --button-color-text--pressed - Text color when the button is in a pressed / selected state. * * @cssProp --icon-size - Logical size used to derive icon width and height. */ button, [class~="button"]{ --_icon-width: var(--icon-size, 24px); --_icon-height: var(--icon-size, 24px); display: inline-flex; gap: 4px;$

100

Michael G @g12n.de · 14/11/2025

Oh yeah! They are! But when I use them I mentally have to make a gear shift because I am tempted to use --custom-properties similar to the way I use class names. @una.im used a card-container element in the dom. 😅 This really bugs me a little. developer.chrome.com/docs/css-ui/...

Code Screenshot of demo code from style-query article.

<ul class="card-list">
<li class="card-container">
<div class="card">
...
</div>
</li>
</ul>

100

Michael G @g12n.de · 12/11/2025

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.

010

Michael G @g12n.de · 10/11/2025

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.

Diagramm:
links: Weihnachtsbeleuchtung an Laternenpfahl mit Stecker.
Rechst: Weihnachtsbeleuchtung and Laternenpfahl mit kleinem Windrad

151

Michael G @g12n.de · 28/10/2025

Woher kommt eigentlich der Drang, Kritik an Grünen Vorstellungen, entweder zu infantilisieren („Heuliheuli“) oder zu pathologischeren?

Screenshot eines Bluesky posts

nete81.bsky.social
@nete81.bsky.social

Das ist doch aber entschieden, insb. bzgl. dieser Anlage. Was soll der Eigentümer dann tun? Weiter sinnlos diskutieren und in der Vergangenheit leben? Wer das nicht akzeptieren kann und ernsthaft wegen der Sprengung emotional angefasst ist, sollte vlt. dringend mal mit einem Therapeuten sprechen.
27. Oktober 2025 um 13:33

110

Michael G @g12n.de · 28/10/2025

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.

Code Screenshot
head{
display: block}
title!
display: block;
}
•••

000

Michael G @g12n.de · 16/10/2025

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.

Code Screenshot. CSS

/* instead of class names */
.checked{
…
}

/* use pseudo-classes */
:checked {
…
}

:has(:checked){

}

/* or semantic attributes */
[aria-checked]{

}

021

Michael G @g12n.de · 02/10/2025

So. How would I add documentation for custom invoker commands in custom elements manifest and jsDoc? #customElements #webcomponents

Code Screenshot:

import { snapdom } from '@zumer/snapdom';
/**
*
* @tag snap-dom
* @tagname snap-dom
*/
* @summary Wrapper around zumerlab/snapdom adding custom
export default class SnapElement extends HTMLElement{
constructor (K{
super ()
}
connectedCallback() {
this.addEventListener ("command"
, (event) =>{
if (event.command === "--save-image") {
let filename = event.source.dataset.filename;
snapdom. download(this, { format: 'jpeg', filename
})
}
})
}
customElements.define("snap-dom", SnapElement)

020

Michael G @g12n.de · 27/09/2025

I am afraid the component is overly complicated. I am thinking of turning this into an invoker command.

Code Screenshot

<button commandfor="mysection" command="--scroll-next-page">
->
</button>

000

Michael G @g12n.de · 26/09/2025

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?

Code Screenshot:
<my-layout>
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
</my-layout>

<style>
my-layout{
--column-count: 4;
display:grid;
…
}
</style>

010

Michael G @g12n.de · 16/09/2025

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.

Diagram that compares 'linear scroll bars' and 'segmented scroll bars'.
It points out the shared elements: the track and the scroll button.
It also shows the individual scroll elements: the 'thumb' for linear scroll bars and the 'scroll-marker' for segmented scroll bars.

000

Michael G @g12n.de · 15/09/2025

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?

001