Die Idee war sofort nachvollziehbar. Die Initiative benennt strukturelle Probleme des heutigen, stark JavaScript-getriebenen Webs und zeigt auf sachliche, praxisnahe Weise, wie sich JavaScript standardmäßig deaktivieren lässt – um es anschließend gezielt dort zu aktivieren, wo tatsächlich Vertrauen besteht.

Die Reaktionen auf die Einführung des Tab-Verhaltens waren aufschlussreich. Neben einigen humorvollen Kommentaren zeigte sich auch deutliche Kritik, vor allem aus Entwicklerkreisen. Der Ansatz wurde als unnötig, feindselig oder sogar extrem dargestellt. Häufig ging es dabei weniger um den konkreten Vorschlag als um die grundsätzliche Frage, ob es überhaupt sinnvoll oder praktikabel sei, JavaScript zu deaktivieren.

Damit wird der eigentliche Punkt verfehlt. Und hier stimme ich Marius ausdrücklich zu: Es geht nicht darum, JavaScript grundsätzlich abzulehnen. Es geht darum, nicht blind beliebigen Code auszuführen – insbesondere nicht aus unbekannten Quellen. Etablierte Plattformen mögen ein gewisses Maß an Vertrauen verdienen. Zufällige, unbekannte Seiten tun das nicht. Beides gleichzubehandeln ist kein Komfortmerkmal, sondern ein Sicherheitsproblem.

Was mich dabei besonders irritiert, ist, wie viele Einwände offenbar daraus entstehen, dass der Text schlicht nicht gelesen wird. Die Empfehlung ist klar formuliert: JavaScript standardmäßig deaktivieren und dann selektiv dort aktivieren, wo eine Vertrauensbasis besteht. Dennoch wird häufig gegen eine Haltung argumentiert, die so nie vertreten wurde. Das wirkt weniger wie eine fachliche Debatte und mehr wie ein Symptom eines zunehmend oberflächlichen Diskurses.

Zur Klarstellung: Ich nutze selbst JavaScript. Auf Seiten mit Code aktiviere ich es bewusst, etwa um Kopierfunktionen oder kleine Komfortverbesserungen bereitzustellen. Genau dieses Verständnis steht hier im Mittelpunkt: JavaScript als gezielte Erweiterung – nicht als Voraussetzung, um Inhalte überhaupt konsumieren zu können.

Der Vorwurf eines „militanten Techno-Minimalismus“ greift daher ins Leere. Diese Haltung ist weder nostalgisch noch fortschrittsfeindlich. Sie stellt vielmehr die Frage nach sinnvollen Standards. Inhalte sollten möglichst ohne JavaScript zugänglich bleiben, mit Skripten als bewusster Ergänzung – nicht als verpflichtender Ausführungsschicht, die einfache Seiten in fragile Laufzeitumgebungen verwandelt.

Eine solche Position als radikal zu bezeichnen, sagt letztlich mehr über den Zustand des heutigen Webs aus als über das Argument selbst. Skepsis gegenüber der standardmäßigen Ausführung unvertrauenswürdigen Codes sollte keine Provokation sein. Sie sollte selbstverständlich sein.

Genau deshalb halte ich disable-javascript.org für relevant. Die Seite bleibt nicht bei abstrakter Kritik stehen, sondern macht konkrete Vorschläge: Sie benennt reale Risiken, zeigt praktikable Wege auf und wirbt für ein ausgewogenes Verhältnis zwischen Sicherheit, Nutzbarkeit und Selbstbestimmung.

This guide gives you:

• 6 types: tip, warning, danger, note, info, caution
• Custom titles via [Your Title] syntax
• Soft stone-themed colors (pale, desaturated, readable)
• Zero JavaScript, fully static
• No icons, minimal & elegant

Step 1: Install Required Package

1npm install remark-directive

Step 2: Create the Remark Plugin

Create remark-admonition.js in your project root:

 1import { visit } from 'unist-util-visit';
 2
 3/** Admonition Plugin – compatible with Astro + ESM + remark-directive */
 4function remarkAdmonitionCompatible() {
 5  return (tree) => {
 6    visit(tree, (node) => {
 7      if (
 8        node.type === 'containerDirective' &&
 9        ['tip', 'warning', 'danger', 'note', 'info', 'caution'].includes(node.name)
10      ) {
11        const data = node.data || (node.data = {});
12        const type = node.name;
13        const titleText = type.charAt(0).toUpperCase() + type.slice(1);
14
15        // Main element: <div class="admonition admonition-tip">
16        data.hName = 'div';
17        data.hProperties = {
18          className: [`admonition`, `admonition-${type}`],
19        };
20
21        // Check if the first child is a paragraph (often contains the title)
22        const firstChild = node.children[0];
23        let titleContent = [];
24
25        if (firstChild?.type === 'paragraph') {
26          const textContent = firstChild.children
27            .filter((child) => child.type === 'text')
28            .map((child) => child.value)
29            .join('')
30            .trim();
31
32          if (textContent && !textContent.includes('\n')) {
33            titleContent = firstChild.children;
34            // Remove the first paragraph, as it is now the title
35            node.children.shift();
36          }
37        }
38
39        // If no title from content → default title
40        if (titleContent.length === 0) {
41          titleContent = [{ type: 'text', value: titleText }];
42        }
43
44        // Create title element: <p class="admonition-title">TIP</p>
45        const titleNode = {
46          type: 'paragraph',
47          data: {
48            hName: 'p',
49            hProperties: {
50              className: 'admonition-title',
51            },
52          },
53          children: titleContent,
54        };
55
56        // Insert title at the front
57        node.children.unshift(titleNode);
58      }
59    });
60  };
61}

Step 3: Update astro.config.mjs

 1// astro.config.mjs
 2import { defineConfig } from 'astro/config';
 3import remarkDirective from 'remark-directive';
 4import remarkAdmonitionCompatible from './remark-admonition.js';
 5
 6export default defineConfig({
 7  markdown: {
 8    remarkPlugins: [
 9      remarkDirective,
10      remarkAdmonitionCompatible,
11    ],
12  },
13});

Step 4: Add Global Styles

Either add the styles to your global.css file or create src/styles/admonitions.css and import it into your layout.

 1/* src/styles/admonitions.css */
 2.admonition {
 3  margin: 1.5rem 0;
 4  padding: 0.75rem 1rem;
 5  border-left: 4px solid;
 6  border-radius: 0.375rem;
 7  background-color: var(--color-stone-50);
 8  font-size: 0.9375rem;
 9  line-height: 1.6;
10}
11
12.admonition > :first-child {
13  margin-top: 0;
14}
15
16.admonition > :last-child {
17  margin-bottom: 0;
18}
19
20.admonition p {
21  margin: 0.5rem 0;
22  color: var(--color-stone-700);
23}
24
25.admonition p:first-of-type {
26  margin-top: 0;
27}
28
29.admonition p:last-of-type {
30  margin-bottom: 0;
31}
32
33/* Title */
34.admonition-title {
35  margin: 0 0 0.5rem 0;
36  font-weight: 600;
37  font-size: 0.8125rem;
38  text-transform: uppercase;
39  letter-spacing: 0.05em;
40  color: var(--color-stone-800);
41}
42
43/* Tip – Green */
44.admonition-tip {
45  background-color: var(--color-green-100);
46  border-color: var(--color-green-300);
47  color: var(--color-green-800);
48}
49
50/* Warning – Yellow */
51.admonition-warning {
52  background-color: var(--color-yellow-100);
53  border-color: var(--color-yellow-300);
54  color: var(--color-yellow-800);
55}
56
57/* Danger – Red */
58.admonition-danger {
59  background-color: var(--color-red-100);
60  border-color: var(--color-red-300);
61  color: var(--color-red-800);
62}
63
64/* Note – Blue */
65.admonition-note {
66  background-color: var(--color-blue-100);
67  border-color: var(--color-blue-300);
68  color: var(--color-blue-800);
69}
70
71/* Info – Cyan */
72.admonition-info {
73  background-color: var(--color-cyan-100);
74  border-color: var(--color-cyan-300);
75  color: var(--color-cyan-800);
76}
77
78/* Caution – Orange */
79.admonition-caution {
80  background-color: var(--color-orange-100);
81  border-color: var(--color-orange-300);
82  color: var(--color-orange-800);
83}

Import in your layout:

---
// src/layouts/BlogPost.astro
import '../styles/admonitions.css';
---

Step 5: Define Color Variables (Optional but Recommended)

If you are not using Tailwind.css as I am, add these color variables to your global CSS or :root:

 1:root {
 2  /* Stone */
 3  --color-stone-50: #fafaf9;
 4  --color-stone-700: #44403c;
 5  --color-stone-800: #292524;
 6
 7  /* Green */
 8  --color-green-100: #f0fdf4;
 9  --color-green-300: #86efac;
10  --color-green-800: #166534;
11
12  /* Yellow */
13  --color-yellow-100: #fefce8;
14  --color-yellow-300: #fde047;
15  --color-yellow-800: #9a3412;
16
17  /* Red */
18  --color-red-100: #fef2f2;
19  --color-red-300: #fca5a5;
20  --color-red-800: #991b1b;
21
22  /* Blue */
23  --color-blue-100: #eff6ff;
24  --color-blue-300: #93c5fd;
25  --color-blue-800: #1e40af;
26
27  /* Cyan */
28  --color-cyan-100: #ecfeff;
29  --color-cyan-300: #67e8f9;
30  --color-cyan-800: #0e7490;
31
32  /* Orange */
33  --color-orange-100: #fff7ed;
34  --color-orange-300: #fdba74;
35  --color-orange-800: #9c4221;
36}

Example Usage in Markdown

 1:::tip[Pro Tip]
 2Use `Cmd + K` to open the command palette.
 3:::
 4
 5:::warning
 6Never commit your `.env` file.
 7:::
 8
 9:::danger
10This action **cannot be undone**.
11:::
12
13:::note
14Astro compiles to static HTML by default.
15:::
16
17:::info[Did You Know?]
18You can use `.astro` files inside Markdown with MDX.
19:::
20
21:::caution
22This feature is experimental — test thoroughly.
23:::

Result

:::tip[Pro Tip] Use Cmd + K to open the command palette. :::

:::warning Never commit your .env file. :::

:::danger This action cannot be undone. :::

:::note Astro compiles to static HTML by default. :::

:::info[Did You Know?] You can use .astro files inside Markdown with MDX. :::

:::caution This feature is experimental — test thoroughly. :::

Done

You now have:

• 6 flexible admonition types
• Custom titles with [Title] syntax
• Clean, stone-themed design
• Full Astro + ESM compatibility
• Zero runtime overhead

Pro tip: Want success or example later? Just add the name to the array in the plugin and a CSS rule — done.

Clean. Simple. Powerful.

Den Blog habe ich heute umfassend überarbeitet und das dunkle Design komplett verworfen. Stattdessen ist jetzt alles hell mit blauen Akzenten – einfach, weil es die Lesbarkeit spürbar verbessert.

Es hat eine Weile gedauert, bis ich mich zu diesem Umbau durchringen konnte. Aber ich bin ehrlich gesagt froh, dass ich nicht schon wieder das ganze System gewechselt habe. Astro gefällt mir nach wie vor richtig gut; ich komme damit wesentlich besser zurecht als mit Hugo.

Fokus auf den Inhalt

Neben dem Design habe ich auch inhaltlich aufgeräumt. Ein alter Blogbeitrag ist nun endlich überarbeitet – unpassende Passagen sind rausgeflogen, andere habe ich so umgeschrieben, dass sie nun einen klaren roten Faden haben und nicht mehr wie eine lose Sammlung von Notizen wirken.

Das hat mich schon von Anfang an gestört, doch jetzt fühlt es sich endlich richtig an. Das ist allerdings erst der Anfang: Ich werde nach und nach weitere Abschnitte glätten. Inhalte, die nicht mehr in das große Ganze passen, wandern demnächst in den Microblog. An dessen Umsetzung arbeite ich aktuell noch.

Ein Blick zurück

Ich habe mir außerdem vorgenommen, alte Beiträge aus früheren Zeiten wieder aufzunehmen. Dazu bin ich bisher zwar noch nicht gekommen, aber es steht fest auf meinem Plan. Bis dahin schraube ich einfach weiter an den Details, bis alles nahtlos ineinandergreift.

Ich habe einige Zeit damit verbracht, meine Blog-Software komplett zu überarbeiten. Anstelle von Python-Flask und Hugo verwende ich jetzt Astro- und ich könnte nicht zufriedener mit diesem Wechsel sein.

Warum die Änderung?

Mein altes Python-Flask-Setup hat lange zuverlässig funktioniert, bis es irgendwann an seine Grenzen stieß. Ich will mich für meinen zukünftigen Job mehr mit moderner Webentwicklung beschäftigen und nehme deshalb gerade am Full-Stack Web Development Bootcamp teil. Es schien der perfekte Moment zu sein, etwas Neues auszuprobieren und vielleicht auch die unzähligen Stunden zu rechtfertigen, die ich bisher in JavaScript-Tutorials investiert habe.

Neu anfangen mit Astro

Also habe ich beschlossen, nochmal bei Null anzufangen, auch weil es mir einfach Spaß macht, Dinge einzustampfen und immer mal wieder etwas Neues auszuprobieren. Ich startete mit der Minimalvorlage von Astro und fügte dann Baustein für Baustein hinzu, fast so, als würde ich etwas aus LEGO zusammenbauen. Die Einrichtung war überraschend einfach. Innerhalb weniger Minuten lief eine kleine Website. Ich entdecke immer noch neue Möglichkeiten mit Astro und bin jetzt schon begeistert, was damit alles machbar ist.

Warum Astro?

Was mich an Astro begeistert, ist die starke Performance und die Art, wie alles modular aufgebaut ist. Dank der sogenannten „partiellen Hydrierung“ lädt der Blog jetzt schneller als je zuvor. Markdown-Unterstützung ist direkt mit an Bord, super praktisch fürs Schreiben, und die vielen Community-Integrations haben mir echt viel Zeit gespart (auch wenn ich diese Zeit sofort wieder damit verbracht habe, ewig über Farbschemata zu grübeln).

Lernkurve

Bis vor Kurzem endeten meine JavaScript-Kenntnisse bei alert('Hello World'). Der Umstieg auf dieses neue System war also… sagen wir mal: ziemlich spannend. Gerade das Thema asynchrone Programmierung hat mich am Anfang ganz schön ins Schwitzen gebracht. Aber jeden Tag verstehe ich ein bisschen mehr und ja, mein Suchverlauf besteht inzwischen zu 90 % aus Einträgen wie „JavaScript Promises einfach erklärt für Fünfjährige“.

Migration im Gange

Ich bin gerade dabei, meine alten Blogbeiträge nach und nach ins neue System zu übertragen. Einen festen Zeitplan habe ich nicht (ehrlich gesagt: das wird dauern, so lange es eben dauert), aber ich nehme mir vor, den Großteil bis Sommer 2025 fertig zu haben, oder eben, sobald die Motivation wieder vorbeischaut.

Kurz gesagt

Der Wechsel zu Astro bedeutet für mich mehr als nur ein technisches Update. Es fühlt sich auch wie ein kleiner Schritt nach vorne auf meinem beruflichen Weg an. Vom selbstgebauten Python-Tool (ja, das lief viel zu lange) über Hugo bis hin zu einem modernen JavaScript-Framework. Das passt perfekt zu dem, wo ich als Fullstack-Entwickler hinmöchte.

Und ja, ich gebe zu: Ich neige dazu, Dinge komplizierter zu machen, als sie sein müssten.

Auch wenn das Ganze seine Zeit braucht, macht der Umstieg die Pflege und Weiterentwicklung des Blogs einfach viel angenehmer. Ich werde regelmäßig neue Inhalte hinzufügen und die Seite Stück für Stück verbessern. Schaue also gerne wieder vorbei und wenn du Feedback hast, immer her damit! (Konstruktive Kritik nehme ich mit offenen Armen an, harsches Urteil wird still registriert.)

Dieser Blog wächst mit meinen Erfahrungen mit, dokumentiert neue Ideen und technische Entwicklungen. In der schnelllebigen Welt der Webentwicklung ist ein kompletter Neustart manchmal einfach die beste Lösung oder zumindest die beste Ausrede für nächtelanges Coden.

Eine solche Transparenzsuchmaschine kam uns beim Mittagessen in den Sinn.

Die Möglichkeit, einen kompletten Datensatz über eine Person abzufragen und Informationen zu jedem beliebigen Thema zu erhalten, wäre wohl die wahre Stärke dieser Technologie. Man könnte die Entwicklung der politischen Ansichten einer Person während ihrer gesamten Online-Karriere verfolgen und die Genauigkeit ihrer Vorhersagen im Laufe ihrer Karriere bewerten.

Die Technologie wird jedoch auch für Angriffe auf Personen, für die Untersuchung ihrer Beiträge und für die Erstellung bemerkenswerter Darstellungen ihrer Entwicklung als Person im Laufe der Zeit genutzt werden. Vor allem aber wird es - zumindest anfangs - dazu dienen, Menschen bloßzustellen.

“The growth of the Internet will slow drastically, as the flaw in ‘Metcalfe’s law’—which states that the number of potential connections in a network is proportional to the square of the number of participants—becomes apparent: most people have nothing to say to each other! By 2005 or so, it will become clear that the Internet’s impact on the economy has been no greater than the fax machine’s.”

// Paul Krugman, 1998

Wie falsch diese Einschätzung war und wie rasant sich das Internet entwickelt hat. Man kann sagen, dass das Internet revolutionäre Auswirkungen auf Wirtschaft, Gesellschaft und Kultur hatte. Die meisten Menschen haben heute Zugang zu mehr Informationen als je zuvor und zu Möglichkeiten der Zusammenarbeit, die vor wenigen Jahren noch undenkbar waren.

Hätten wir damals schon eine solche Transparenz-Suchmaschine gehabt, hätten wir die Wirksamkeit solcher Aussagen in Bezug auf Vertrauen und Genauigkeit bewerten können.

Aber die eigentliche Bedeutung dieser Technologie liegt nicht in einer bestimmten Anwendung, sondern in der Schaffung von Transparenz. KI ermöglicht es, alle Informationen zu einem Thema abzurufen und dann gezielte Fragen zu stellen. Dies führt zu bisher nicht möglichen Einblicken und Erkenntnissen.

Daraus ergibt sich natürlich auch die Sorge, dass KI als Instrument für Mobbing und öffentliche Demütigung eingesetzt werden könnte. Es ist wichtig, mit den Informationen, die durch KI gewonnen werden, verantwortungsvoll umzugehen. Es geht nicht darum, Antworten blind zu akzeptieren und Entscheidungen nur auf der Grundlage der gelieferten Daten zu treffen. Leider geschieht dies teilweise bereits. Es ist sehr wahrscheinlich, dass viel Dreck ausgegraben wird, auch wenn sich die Täter bereits entschuldigt oder längst von ihren Taten distanziert haben.

Wir müssen uns der potenziellen Voreingenommenheit und der Grenzen der Technologie bewusst sein. Wir müssen sie als Werkzeug zur Verbesserung unseres Verständnisses nutzen und nicht als Ersatz für kritisches Denken und Analyse.

Insgesamt birgt die Technologie der Transparenz-Suchmaschine ein enormes Potenzial für den Zugang zu Informationen und das Verständnis von Persönlichkeiten des öffentlichen Lebens. Es ist jedoch wichtig, dass wir diese Technologie mit Bedacht einsetzen und uns ihrer Chancen und Risiken bewusst sind. Wir sollten uns bemühen, ihre Vorteile zu nutzen und gleichzeitig dafür zu sorgen, dass sie im Einklang mit den Werten der Privatsphäre, der Fairness und den ethischen Standards eingesetzt wird. Nur so können wir sicherstellen, dass die KI-Technologie unsere Gesellschaft und Kultur auch in Zukunft weiter verbessert.