Datenbanken
Von der Sprache SQL bis zur Seite im B-Baum
VisualSql
SQL datenbankunabhängig: Normalformen, JOINs als Zeilenpaarung, NULL-Logik, GROUP BY, Window Functions, Transaktionen und Indizes. Abfragen laufen in einer echten SQL-Engine im Browser, ein Debugger zeigt die Ausführungsreihenfolge, 24 Übungen prüfen sich selbst.
VisualSqlTipps
35 praxisnahe SQL-Tipps zum Ausprobieren: Upserts ohne Race Condition, Historie per Trigger, Audit-Log, Duplikate sauber entfernen, Gaps & Islands, Keyset-Paginierung. Jeder Tipp läuft editierbar in SQLite und meist auch in echtem PostgreSQL 18 im Browser, mit fünf Dialekten nebeneinander.
VisualDatabase
Die interne Funktionsweise einer dBase-Datenbank: Dateikopf, Feld-Deskriptoren und Datensätze fester Breite, die passenden C-Strukturen und ein B-Tree-Index mit animiertem SELECT, auch Schritt für Schritt.
VisualMariaDb
MariaDB von innen: Handshake, Optimizer, InnoDB-B+-Baum mit Seitensplits, Buffer Pool, Redo/Undo mit simuliertem Stromausfall, MVCC, Gap- und Next-Key-Locks, EXPLAIN mit Leftmost-Prefix, Replikation und Galera.
VisualSqLite
SQLite von innen: das Dateiformat Byte für Byte im Hex-Explorer, B-Baum-Seiten, Records und Varints, das echte EXPLAIN-Programm der VDBE Schritt für Schritt sowie Rollback-Journal und WAL als Zeitleiste.
Daten & Dateiformate
Wie Grafik-, PDF-, Word- und Excel-Dateien aufgebaut sind
VisualImages
Der Dateiaufbau von PNG, JPEG und GIF: Signaturen, Chunks und Marker als Byte-Layout, dazu LZW, CRC32, ZIP/Deflate und die DCT-Pipeline, jeweils mit einfachem C-Code.
VisualPdf
Das PDF-Format Byte für Byte an einer echten Hello-World-PDF mit 690 Bytes: Header, Objekte, xref-Tabelle und Trailer mit berechneten Offsets. Dazu ein Objekt-Parser, der Dokumentenbaum und ein Content-Stream-Debugger mit Live-Vorschau.
VisualWord
Die alte .doc als binäres Mini-Dateisystem (OLE2/CFB) mit Header, FAT-Ketten, FIB und Piece Table im Hex-Visualisierer. Die moderne .docx als ZIP-Paket mit Office Open XML: Paket-Explorer und Absatz-Editor erzeugen live WordprocessingML und eine echte .docx.
VisualExcel
Vom binären BIFF8 im Compound File mit Record-Stream-Debugger und RK-Zahlen über das ZIP-Paket der .xlsx mit Live-Generator für sheet1.xml bis zu .xlsb, CSV-Fallen und Datums-Seriennummern samt Phantomtag 29.02.1900.
KI & Agenten
Modelle beim Rechnen beobachten und Agenten beim Werkzeuggebrauch
VisualLLM-cpp
Vom Öffnen der GGUF-Datei bis zum gezogenen Token: ein echter, sehr kleiner LLaMA-Transformer mit visuellem Debugger, Tokenizer, ggml-Graph, Quantisierung und Rechnern für Speicher und Tempo.
VisualMicroGPT
Ein ganzes GPT in 200 Zeilen, Zeile für Zeile vor und zurück: Tokenizer, Autograd, Attention, Training mit Adam und Inferenz. Im Trainingslabor lernt das Modell live im Browser Namen zu erfinden.
VisualPyTorch
PyTorch wie in einem Debugger: Haltepunkte setzen, Variablen beobachten und zusehen, wie Tensoren entstehen, wie der Rechengraph Gradienten zurückgibt und wie ein Modell Epoche für Epoche lernt.
VisualCoreMl
Ein PyTorch-Modell mit coremltools in ein ML Program (.mlpackage) konvertieren – als Debugger in 11 Schritten mit PyTorch-Ops neben MIL-Ops. Dazu Optimierung mit FP16, Int8/Int4, Palettisierung und Pruning, der Import in Xcode und die Nutzung in Swift mit MLModel, Vision und SwiftUI; alle Graphen aus einer echten Konvertierung.
VisualMCPAgent
Wie KI-Agenten Werkzeuge nutzen: Host, Client und Server, JSON-RPC 2.0 und der Lebenszyklus als klickbare Zustandsmaschine. Ein Nachrichten-Debugger spielt einen Aufruf mit dem offiziellen Referenzserver mcp-fetch durch, ein Baukasten prüft Argumente gegen JSON Schema.
VisualWebMCP
Webseiten stellen KI-Agenten eigene Tools bereit, per JavaScript oder als HTML-Formular. Die Live-Demo registriert echte Tools, ein Simulator hilft Browsern ohne WebMCP, und eine Anleitung zeigt das Testen in Chrome.
Netzwerk & Infrastruktur
Adressen, Container, Tunnel, getrennte Netze, Verzeichnisdienste und Monitoring
VisualIPv4
Bits einer IPv4-Adresse umschalten, Subnetze mit animiertem bitweisem AND berechnen, VLSM planen und Routen zusammenfassen. Der Header mit Einerkomplement-Prüfsumme Schritt für Schritt, dazu eine Paketreise mit ARP, Longest Prefix Match und NAT sowie DHCP und traceroute.
VisualIPv6
IPv6-Adressen nach RFC 5952 kürzen und expandieren, Präfixe von /48 bis /64 planen, Adresstypen bestimmen und per EUI-64 aus einer MAC eine Interface-ID bilden. NDP, SLAAC mit DAD, DHCPv6, Prefix Delegation und NAT64 laufen als animierte Abläufe.
VisualDocker
Docker zum Durchklicken: docker run als Debugger in 17 Schritten, von Registry und OverlayFS bis Namespaces, cgroups und iptables. Dazu ein Build-Cache-Labor und ein Compose-Visualizer mit Startreihenfolge und Fehlerprüfung.
VisualRSync
rsync und rclone zum Ausprobieren: ein Delta-Labor rechnet die rollende Prüfsumme live, Debugger zeigen eine rsync-Sitzung über SSH und rclone sync, ein Filter-Tester ist gegen echtes rsync geprüft. Dazu Snapshots mit --link-dest, Crypt und fertige Praxis-Befehle.
VisualCron
cron zum Ausprobieren: Syntax mit ODER-Regel, ein Editor mit deutscher Erklärung und nächsten Läufen in jeder Zeitzone, ein crond-Debugger Minute für Minute, die Sommerzeit-Falle und ein Umrechner nach systemd OnCalendar.
VisualWireGuard
Curve25519-Schlüssel entstehen im Browser, ein Generator schreibt die wg0.conf. Cryptokey Routing zum Ausprobieren, der Noise_IKpsk2-Handshake als Debugger und eine NAT-Simulation zeigen, wann Tailscale direkt verbindet und wann ein Relay einspringt.
VisualVLan
VLANs vom Tag im Ethernet-Frame bis zur Firewall-Ausnahme, am Beispiel der UniFi Network Application 9.x. Ein Frame-Debugger zeigt Tagging, Routing und Firewall, der Regel-Planer beantwortet „Darf X Y auf Port Z erreichen?“.
VisualLDAP
LDAP zum Durchklicken: Verzeichnisbaum, DN-Zerleger, das Protokoll als Sequenzdiagramm mit echten BER-Bytes und ein Filter-Labor mit dreiwertiger Auswertung. Für OpenLDAP gibt es cn=config, einen ACL-Auswerter, syncrepl, einen Browser über 211 Schema-Definitionen und einen Assistenten für eigene Schemata – abgeglichen mit einem echten slapd.
VisualSNMPD
SNMP und der Agent snmpd zum Durchklicken: OID-Baum, ein PDU-Debugger, der jedes BER-Byte einer GetRequest zeigt, und eine Walk-Simulation mit GetNext gegen GetBulk. SNMPv3 wird im Browser nachgerechnet – Password-to-Key mit den RFC-3414-Testvektoren, Discovery und VACM – dazu ein snmpd.conf-Konfigurator.
Sicherheit & Abläufe
Einmalcodes, Passwort-Tresore und Workflow-Engines
VisualSsl
Schlüsselaustausch zum Nachrechnen: Diffie-Hellman, X25519 live und ein TLS-1.3-Handshake-Debugger, der das offizielle RFC-8448-Beispiel bitgenau nachrechnet. Dazu Zertifikatsketten, Let's Encrypt/ACME, ein PEM-Decoder und nginx-Praxis.
VisualTOTP
Wie aus einem Secret und der Uhrzeit ein sechsstelliger Code wird: Counter, Nachricht, HMAC, Truncation und Modulo als farbige Schritte, mit Byte-Grid, Countdown und den offiziellen Testvektoren.
VisualKeePassDatabase
Eine KeePass-Datenbank Byte für Byte im Hex-Viewer: Signaturen, Header, KDF-Parameter, HMAC-Blöcke und XML. Ein Debugger rechnet das Öffnen in 20 Schritten live nach, vom Passwort über Argon2 bis zum entschleierten Eintrag. Mit Demo-Datenbanken, Passwort „demo“.
VisualWorkflow
Zwei Open-Source-Workflow-Engines im Vergleich: XState als deklarative State Machine und BullMQ als verteilte Redis-Job-Queue, beide live mit React Flow visualisiert, inklusive Fehlern, Retry und Kompensation.
Programmiersprachen
Von JavaScript über Typen bis zum Bytecode im Browser
VisualJavascript
JavaScript von Typen und == gegen === über Scope, Closures, this und Prototypen bis zu einem Event-Loop-Debugger, dessen Ausgabereihenfolge gegen echtes Node geprüft ist. Dazu Promises, fetch, DOM-Events, ein Spielplatz im Web Worker und 25 Übungen.
VisualTypeScript
TypeScript mit dem echten Compiler im Browser: Spielplatz mit JavaScript-Ausgabe, Hover-Typen und deutschen Fehlererklärungen, Narrowing Zeile für Zeile, Union und Intersection als Mengen, Generics, Typ-Labor und 27 Übungen, die der Compiler prüft.
VisualWebAssembly
WebAssembly Byte für Byte: ein Hex-Explorer zerlegt Module und eigene .wasm-Dateien, WAT und Binärcode stehen nebeneinander, und ein Stack-Maschinen-Debugger zeigt Stack, Locals und Speicher im Abgleich mit der echten Engine.
Web & Werkzeuge
APIs, 3D im Browser, Versionsverwaltung und der Editor für die Finger
VisualOpenApi
Aufbau einer OpenAPI-Datei als Baum, $ref-Auflösung Schritt für Schritt und ein Editor mit Live-Dokumentation und deutscher Validierung. Ein Request-Debugger prüft HTTP-Anfragen gegen die Spezifikation, dazu Codegenerierung und Security-Schemes.
Visual3DWeb
Wie ein 3D-Modell in den Browser kommt: Pipeline, Matrizen, Licht, rohes WebGL, three.js in 11 Lektionen mit Live-Code und glTF Byte für Byte. Am Ende steht die Ferienwohnung drehbar im Browser.
VisualGit
Git von innen und in der Anwendung: Objekte mit echten SHA-1-Hashes im Browser, Arbeitsverzeichnis, Index und Repository zum Anklicken und ein eigener Git-Simulator mit animiertem Commit-Graphen und 10 Übungsaufgaben. Dazu Merge gegen Rebase, Konflikte, reflog, stash und bisect.
VisualVim
Die Modi als Zustandsdiagramm, das live dem Tippen folgt, die Grammatik aus Operator, Anzahl und Bewegung zum Zusammenklicken und eine farbige Tastatur mit LazyVim-Leader-Ebene. Geübt wird in einem eigenen Vim-Emulator mit 33 Vim-Golf-Aufgaben.
Hardware & Bussysteme
Grafikkarten programmieren, Fahrzeuge auslesen, Scanner ansteuern und den Fernseher per Skript steuern
VisualGPU
GPU-Programmierung mit CUDA: Streaming Multiprocessor, Warps, Occupancy, Coalescing und Bank-Konflikte bis zum eigenen Kernel. Ein Debugger rechnet Reduktion und Matrixmultiplikation mit und ohne Tiling nach, ein WebGPU-Shader misst live im Browser.
VisualObd
OBD-II und CAN-Bus Schritt für Schritt: CAN-Frame mit echter CRC-15 und Bit-Stuffing, Arbitrierung, Diagnose über ISO-TP, PID- und Fehlercode-Decoder, ELM327-Terminal und eine simulierte Fahrt mit Live-Diagrammen.
VisualScan
Wie Programme unter Linux einen Scanner ansteuern: von scanimage über libsane und das dll-Meta-Backend bis zu USB oder Netzwerk. Ein API-Debugger geht sane_init bis sane_exit durch, ein simulierter Scanner rechnet Pixel, Bytes pro Zeile und Dateigröße nach.
VisualAndroidTV
Android TV und Google TV von innen: Entwicklermodus im klickbaren Einstellungs-Simulator freischalten, das ADB-Protokoll Schritt für Schritt durchklicken und den eigenen Fernseher per Bash-Skript steuern. Eine virtuelle Fernbedienung zeigt zu jedem Klick den input-keyevent-Befehl, ein Generator baut Aufräum-Skripte gegen Werbung und Tracking – immer mit Rückgängig-Skript. Dazu Sprache per Skript setzen und zwölf kommentierte Skripte zum Herunterladen.
Smart Home
Hausautomation mit Home Assistant, ioBroker und HomeMatic – bis in Apple HomeKit
VisualHomeAssistant
Home Assistant von innen: Event Bus, State Machine und Actions, Entitäten mit last_changed und last_updated, ein Ereignisfluss-Debugger vom Tastendruck bis zum Licht, Automationen mit allen vier Modi, ein Template-Tester und ein Simulator für das Musterhaus.
VisualIoBroker
ioBroker an einem erfundenen Musterhaus: js-controller, Adapter und Instanzen, Objektbaum und Datenpunkte, das ack-Konzept als Debugger, Blockly mit Übersetzung nach JavaScript und ein Simulator mit Triggern und Timern.
VisualHomematic
HomeMatic und Homematic IP: Zentralen, Funk auf 868 MHz mit Duty-Cycle-Simulator, Direktverknüpfung gegen Zentralenprogramm, Geräte-Datenmodell, XML-RPC Schritt für Schritt und ein Programm-Simulator für ein Beispielhaus.
VisualHomeMaticHomeKit
Das CCU-Addon hap-homematic bringt HomeMatic- und Homematic-IP-Geräte einer CCU3 oder RaspberryMatic ohne Homebridge und ohne Zusatzhardware in Apple HomeKit. Aufbau, Installation und Konfiguration Schritt für Schritt, dazu ein Ereignis-Debugger von der Home-App bis zum Aktor und zurück, ein Mapping-Labor und ein Port-/Bridge-Planer. Mit klarem Hinweis: Das Projekt ist seit 29.05.2026 archiviert, belegte Alternativen werden genannt.
Finanzen
Kredite, Buchungen und E-Rechnungen verstehen
VisualKreditRechner
Wie eine Monatsrate aus Zins und Tilgung entsteht und die Restschuld sinkt: Tilgungsplan, Diagramme, Raten-Debugger, effektiver Jahreszins nach PAngV und Vergleich zweier Angebote. Unverbindliche Beispielrechnungen, keine Beratung.
VisualBuchführung
Doppelte Buchführung zum Anfassen: von der Inventur zur Bilanz, T-Konten, ein Buchungs-Debugger vom Beleg bis zur GuV, Abschluss, Umsatzsteuer, SKR 03/04, Abschreibung und eine Mini-Buchhaltung mit 26 Übungen. Lehr-App, keine Steuerberatung.
VisualKSeF
Das polnische E-Rechnungssystem Schritt für Schritt: FA(3)-XML, Anmeldung, verschlüsselte Sitzung, KSeF-Nummer und UPO. Der QR-Check liest Fotos von KSeF-QR-Codes im Browser und prüft NIP, Datum und Hash. Deutsch und Polnisch.
Retro-Computing
Mailbox-Software und Heimcomputer-Klassiker, aus den echten Dateien rekonstruiert
VisualZ80
Alle 245 Firmware-Einsprünge des Amstrad/Schneider CPC 6128 mit Registern, Beschreibung und einem lauffähigen Beispielprogramm je Routine. Dazu ein Z80-Emulator, ein Zweipass-Assembler, eine Firmware-Nachbildung und ein Schritt-Debugger mit „Schritt zurück“ – alles im Browser.
VisualCPCSprite
Der klassische CPC hat keine Hardware-Sprites – jede Figur schreibt der Z80 selbst in den Bildschirmspeicher. Pixelkodierung der Modi 0/1/2, ein Sprite-Editor mit Export als db oder BASIC-DATA und sechs Zeichenroutinen im Z80-Emulator mit gemessenen µs; dazu flimmerfreie Animation und die 16 Hardware-Sprites des CPC Plus.
VisualCrossPoint
Die Datenbank des Mailbox-Programms CrossPoint/FreeXP von innen: .DB1-Dateistrukturen, der zugehörige C-Code und der .IX1-B-Tree-Index mit animiertem, schrittweisem Zugriff.
VisualBoulderDash
Boulder Dash auf dem Amstrad CPC, ausgehend vom echten Disk-Image: Sprites aus dem Z80-Binary dekodiert, Mode-0-Grafik, Schwerkraft-Regeln und Speicherkarte. Dazu eine spielbare Portierung in TypeScript.