NoteTheCode - Web-Entwicklung Blog

CSS Container Queries – Responsive Komponenten statt Viewport

info@notetheco.de (Bünyamin Goldfarb-Tunc) — Wed, 29 Jan 2025 00:00:00 +0000

Seit Jahren kämpfen wir mit dem gleichen Problem: Media Queries reagieren nur auf die Viewport-Größe. Aber was, wenn eine Komponente in der Sidebar anders aussehen soll als im Hauptbereich – obwohl der Viewport gleich bleibt? Mit Container Queries können Komponenten endlich auf ihre eigene Größe reagieren.

Das Problem mit Media Queries

/* Klassische Media Query – reagiert auf Viewport */
@media (min-width: 768px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

Das funktioniert, solange die Karte immer die volle Breite nutzt. Aber:

Event Loop & Call Stack – So funktioniert JavaScript wirklich

info@notetheco.de (Bünyamin Goldfarb-Tunc) — Wed, 29 Jan 2025 00:00:00 +0000

JavaScript ist Single-Threaded – es gibt nur einen einzigen Thread, der Code ausführt. Trotzdem können wir asynchrone Operationen wie API-Calls, Timer und Event-Handler parallel verarbeiten, ohne dass die Seite einfriert. Das Geheimnis: der Event Loop. Wer den Event Loop versteht, versteht wie JavaScript tickt.

Die Architektur im Überblick

┌─────────────────────────────────────────────────────────────────┐
│                         JavaScript Runtime                       │
├─────────────────┬───────────────────────────────────────────────┤
│                 │                                               │
│   ┌─────────┐   │   ┌─────────────────────────────────────────┐ │
│   │  Heap   │   │   │              Web APIs                   │ │
│   │(Objekte)│   │   │  setTimeout, fetch, DOM Events, etc.   │ │
│   └─────────┘   │   └─────────────────────────────────────────┘ │
│                 │                    │                          │
│   ┌─────────┐   │                    ▼                          │
│   │  Call   │   │   ┌─────────────────────────────────────────┐ │
│   │  Stack  │◄──┼───│           Callback Queues               │ │
│   │         │   │   │  ┌─────────────┐  ┌──────────────────┐  │ │
│   └─────────┘   │   │  │ Microtasks  │  │   Task Queue     │  │ │
│        ▲        │   │  │ (Promises)  │  │   (setTimeout)   │  │ │
│        │        │   │  └─────────────┘  └──────────────────┘  │ │
│        │        │   └─────────────────────────────────────────┘ │
│        │        │                    ▲                          │
│   ┌────┴────┐   │                    │                          │
│   │  Event  │───┼────────────────────┘                          │
│   │  Loop   │   │                                               │
│   └─────────┘   │                                               │
│                 │                                               │
└─────────────────┴───────────────────────────────────────────────┘

Der Call Stack

Der Call Stack ist der Dreh- und Angelpunkt. Hier werden Funktionen gestapelt und abgearbeitet – nach dem LIFO-Prinzip (Last In, First Out).

Hugo Shortcodes selbst bauen – Interaktive Komponenten für Markdown

info@notetheco.de (Bünyamin Goldfarb-Tunc) — Wed, 29 Jan 2025 00:00:00 +0000

Markdown ist simpel – und genau das ist seine Stärke. Aber manchmal braucht man mehr: eine Info-Box, einen eingebetteten CodePen, Tabs oder eine Bildergalerie. Genau dafür gibt es Hugo Shortcodes. Sie erweitern Markdown um wiederverwendbare Komponenten, ohne dass man HTML direkt in Artikel schreiben muss.

Was sind Shortcodes?

Shortcodes sind kleine Template-Snippets, die man in Markdown-Dateien aufruft:

Normaler Markdown-Text...

{{< info >}}
Das hier ist eine Info-Box!
{{< /info >}}

Und weiter gehts mit Text.

Hugo ersetzt den Shortcode-Aufruf durch das gerenderte HTML. Die Shortcode-Dateien liegen in layouts/shortcodes/.

CSS-Architekturen im modernen Web – BEM, Modules, Tailwind & Co.

info@notetheco.de (Bünyamin Goldfarb-Tunc) — Thu, 01 Aug 2024 00:00:00 +0000

CSS ist mächtig, aber ohne Struktur schnell chaotisch. Bei wachsenden Projekten werden globale Styles, Spezifitätskonflikte und toter Code zum Problem. Jeder Frontend-Entwickler kennt den Moment: Man ändert eine CSS-Klasse und plötzlich sieht eine komplett andere Seite anders aus. Dieser Artikel zeigt, warum das passiert und welche modernen Lösungsansätze es gibt.

Das Problem mit CSS

Spezifität – Die Wurzel allen Übels

CSS hat ein Spezifitäts-System, das bestimmt, welche Regel gewinnt wenn mehrere auf dasselbe Element zutreffen:

JavaScript Laufzeitumgebungen – Browser, Node, Deno & Bun

info@notetheco.de (Bünyamin Goldfarb-Tunc) — Sat, 01 Jun 2024 00:00:00 +0000

JavaScript wurde 1995 als kleine Skriptsprache für den Browser erfunden. Heute läuft es auf Servern, in der Cloud, auf IoT-Geräten und sogar in Datenbanken. Was all diese Umgebungen gemeinsam haben: eine Laufzeitumgebung (Runtime Environment), die den JavaScript-Code ausführt und bestimmte APIs bereitstellt. Die Runtime bestimmt, was man mit JavaScript machen kann – DOM manipulieren, Dateien lesen oder HTTP-Server starten.

Heute gibt es vier relevante JavaScript-Runtimes:

Browser – Die Heimat von JavaScript
Node.js – Der Klassiker für Backend
Deno – Die sichere Alternative
Bun – Der schnelle Newcomer

Wie eine JavaScript-Runtime funktioniert

Bevor wir die einzelnen Runtimes vergleichen, lohnt ein Blick unter die Haube. Jede Runtime besteht aus mehreren Komponenten:

Web-Fonts 2024 – Performance, Variable Fonts & Self-Hosting

info@notetheco.de (Bünyamin Goldfarb-Tunc) — Wed, 15 May 2024 00:00:00 +0000

Typografie ist ein zentrales Element guten Webdesigns – und gleichzeitig einer der größten Performance-Killer. Eine einzige schlecht eingebundene Schrift kann die Ladezeit um mehrere Sekunden erhöhen, Layout-Shifts verursachen und sogar rechtliche Probleme auslösen (DSGVO). Dieser Artikel zeigt, wie man Web-Fonts richtig einsetzt: von der Auswahl über die Optimierung bis zum DSGVO-konformen Self-Hosting.

Was passiert wenn ein Font lädt?

Bevor wir über Strategien sprechen, müssen wir verstehen, was beim Laden einer Web-Font passiert:

Promises & Async/Await – Asynchrones JavaScript meistern

info@notetheco.de (Bünyamin Goldfarb-Tunc) — Fri, 15 Mar 2024 00:00:00 +0000

JavaScript ist Single-Threaded – es kann nur eine Aufgabe gleichzeitig ausführen. Trotzdem können wir asynchrone Operationen wie API-Calls, Datei-Zugriffe oder Timer parallel verarbeiten. Das Geheimnis: Promises und der Event Loop. Wer Promises versteht, versteht einen der fundamentalsten Bausteine moderner Web-Entwicklung.

Bevor es Promises gab: Callback Hell

Vor ES6 (2015) war die einzige Möglichkeit für asynchronen Code: Callbacks.

// "Callback Hell" – verschachtelte Callbacks
getUser(1, function(user) {
  getPostsByUser(user.id, function(posts) {
    getCommentsForPosts(posts, function(comments) {
      renderPage(user, posts, comments, function() {
        console.log('Seite geladen!');
      });
    });
  });
});

Der Code wächst nach rechts, Fehlerbehandlung ist schwierig, und die Lesbarkeit leidet massiv. Promises lösen genau dieses Problem.

Hugo Development Server – Lokal und im Netzwerk testen

info@notetheco.de (Bünyamin Goldfarb-Tunc) — Mon, 15 Jan 2024 00:00:00 +0000

Hugo bietet mit dem integrierten Development Server eine schnelle und effiziente Möglichkeit, Webseiten während der Entwicklung zu testen. Der Befehl hugo server startet einen lokalen Server mit Live Reload – Änderungen werden sofort im Browser sichtbar. In diesem Artikel schauen wir uns an, wie man den Hugo-Server optimal nutzt.

Warum Hugo?

Hugo ist einer der schnellsten Static Site Generators überhaupt. Während andere Frameworks bei jedem Build mehrere Sekunden brauchen, liefert Hugo Rebuild-Zeiten im Millisekundenbereich.