Michael G

@g12n

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.

361 Folgt282 Follower2.539 Posts

Instagram Bluesky

Ist das dein Profil?Übernimm es — dann gehört dir g12n.dirty.social.Profil übernehmen

Michael G@g12n· Jun 24

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

Michael G@g12n· Jun 6

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

Michael G@g12n· May 23

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

Michael G@g12n· May 23

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.

Michael G@g12n· May 21

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.

Michael G@g12n· May 19

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);
}

Michael G@g12n· May 17

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

Michael G@g12n· May 10

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

Michael G@g12n· May 9

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

Michael G@g12n· May 3

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
);
}

Michael G@g12n· May 2

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>

Michael G@g12n· May 2

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);
}
});

Michael G@g12n· Apr 29

Live Engineering Kiosk Rhine-Ruhr Mestup in Düsseldorf

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

Michael G@g12n· Apr 15

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.

Michael G@g12n· Apr 14

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.

Michael G@g12n· Apr 14

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

Michael G@g12n· Apr 13

Hello #amsterdam Hello #smashingConf

Close-up of a white, curved building corner. Large, 3D dark blue letters spell "PANC" against the wall. To prevent perching, thin metal bird spikes line the roof edge and the tops of the letters. A black floodlight on a metal arm extends to the right. The sky is a flat, overcast grey.

Michael G@g12n· Apr 13

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.

Michael G@g12n· Apr 4

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.

Michael G@g12n· Mar 27

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

Michael G@g12n· Mar 12

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>

Michael G@g12n· Mar 10

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.

Michael G@g12n· Mar 9

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

Michael G@g12n· Jan 28

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())

Michael G@g12n· Jan 25

@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

Michael G@g12n· Jan 14

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>

Michael G@g12n· Dec 21

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.

Michael G@g12n· Dec 1

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>

Michael G@g12n· Dec 1

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.

Michael G@g12n· Nov 30

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