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.

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

Screenshot from tje linked website:

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

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

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

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

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

A mouse clicking a moon icon. multiple select options with moon phase appear circularly around the original button.

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

Code Screenshot

Replace image content with CSS

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

Code example

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

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

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

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.

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

Sunrise at the ferry port of Amsterdam central

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.

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.

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.

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

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>

Screenshot of a image grid with 4 columns.

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>

Code Screenshot:

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

let mySnapshot = document.captureNodeSnapshot(myBanner);

console.log(mySnapshot.toDataURL())

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>

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

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>

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.

Screenshot of 4 content link cards with individually coloured backgrounds

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

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

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

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.

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

Code screenshot of an inline comment

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

$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;$

Code Screenshot of demo code from style-query article.

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

Screencapture of zooming in and out a penpot document. A distinct lag in performance is visible.

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

Pan to a 1980ies wall mounted radio on a hotel room.

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

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

Code Screenshot. CSS

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

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

:has(:checked){

}

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

}

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)

Code Screenshot

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

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>

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.

Diagram of a the architecture of a scroll. Two examples. One with and one without buttons.
Marked are the elements „track“ „thumb“ and „button“

$module.exports = function(eleventyConfig) { eleventyConfig.addPassthroughCopy({ "node_modules/play-button/dist/play-button.js": "assets/play-button.js" }); };$