[{"data":1,"prerenderedAt":4767},["ShallowReactive",2],{"blog-list-de":3},[4,93,177,284,411,495,577,868,927,1027,1078,1127,1177,1227,1296,1366,1436,1618,1690,1763,1812,1860,1909,1954,2003,2052,2115,2163,2214,2264,2313,2586,2634,2827,2880,3080,3169,3245,3324,3400,3545,3611,3773,3911,3972,4108,4159,4296,4417,4548],{"id":5,"title":6,"body":7,"cover":76,"date":77,"description":78,"draft":79,"extension":80,"locale":81,"meta":82,"navigation":83,"path":84,"seo":85,"stem":86,"tags":87,"__hash__":92},"blog\u002Fblog\u002Fde\u002Fworking-digital-without-burning-out.md","Digital arbeiten ohne Burnout",{"type":8,"value":9,"toc":69},"minimark",[10,14,17,22,25,28,31,35,38,41,47,51,54,57,60,63,66],[11,12,13],"p",{},"Meine Arbeit hat keine Kanten. Das ist der ehrliche Ausgangspunkt. Auf dem Laptop, auf dem meine Kundenprojekte liegen, sind auch meine Musik, die Nachrichten meiner Freunde, das Video zum Abschalten und die Rechnung, die ich am Dienstag hätte schicken sollen. Wenn Leute über Work-Life-Balance reden, stellen sie sich meistens zwei Orte vor. Bei mir ist es ein Rechteck, und was darauf Arbeit von Leben trennt, ist nur die Frage, welches Fenster gerade vorne liegt.",[11,15,16],{},"Ich bin jetzt lange genug selbstständig, um zweimal ziemlich knapp an einem Burnout vorbeigeschrammt zu sein. Nicht die dramatische Version, bei der man morgens nicht mehr aus dem Bett kommt. Eher die leise, bei der die Arbeit, die man eigentlich liebt, auf einmal nach Pappe schmeckt und man einer Mail schon böse ist, bevor man sie überhaupt aufgemacht hat. Beide Male habe ich mir erzählt, ich sei halt nur müde. Beide Male hat \"nur müde\" ungefähr sechs Wochen gedauert. Deshalb schreibe ich das hier auf. Hauptsächlich, damit mein Zukunfts-Ich nicht so tun kann, als hätte er es nicht gewusst.",[18,19,21],"h2",{"id":20},"warum-es-digital-so-leicht-passiert","Warum es digital so leicht passiert",[11,23,24],{},"Dass mein Job digital ist, ist dabei kein Nebendetail. Die Werkstatt eines Schreiners ist zu, wenn die Tür zu ist. Meine Werkstatt steckt in meiner Hosentasche, und sie pingt.",[11,26,27],{},"Drei Dinge machen Bildschirmarbeit anfälliger für Burnout, als sie sein müsste. Erstens gibt es kein körperliches Feedback. Ein Körper, der den ganzen Tag Holz geschleppt hat, sagt dir sehr deutlich, dass Feierabend ist. Ein Körper, der ein Trackpad bewegt hat, sagt dir gar nichts. Das einzige Stoppsignal ist dein eigenes Urteilsvermögen, und genau das geht als Erstes kaputt, wenn du überarbeitet bist. Zweitens ist alles messbar und damit vergleichbar. Jedes Projekt liegt neben der besten Arbeit im ganzen Internet, jeder ruhige Monat neben dem Screenshot von irgendjemandes ausgebuchtem Kalender. Und die Vergleichsmaschine hat auch nie zu. Drittens gilt Erreichbarkeit als professionell. Antworte einmal um 23 Uhr, und du hast deinen Vertrag stillschweigend neu verhandelt.",[11,29,30],{},"Keins davon ist für sich eine Krise. Zusammen ergeben sie ein Gefälle, und ein Gefälle spürt man nicht, solange man draufsteht.",[18,32,34],{"id":33},"die-signale-die-ich-inzwischen-ernst-nehme","Die Signale, die ich inzwischen ernst nehme",[11,36,37],{},"Das Fiese an meinen eigenen Frühwarnzeichen ist, wie vernünftig sie aussehen. Ich falle nicht auseinander. Ich optimiere. Ich fange an, mein Leben zu takten wie meinen Posteingang: Freunde kriegen Termine, Essen wird effizient, der Spaziergang fällt aus, weil er ja nichts bringt. Von außen sieht das aus wie Disziplin. Von innen fühlt es sich, wenn ich ehrlich bin, so an, als würde bei allem, was nicht Arbeit ist, langsam die Lautstärke runtergedreht.",[11,39,40],{},"Das klarste Signal, das ich gefunden habe, ist fast schon peinlich konkret: Ich höre auf, Dinge zu bauen, um die niemand gebeten hat. Side Projects sind das Erste, was mein Kopf streicht, wenn die Reserven knapp werden. Und sie sind gleichzeitig genau das, woran ich ablesen kann, dass es überhaupt noch Reserven gibt. Das Jahr, in dem meine Lichtinstallation unangefasst in einer Kiste lag, war kein Zufall. Der Monat, in dem ich sie endlich fertig bekam, war einer, in dem die Kundenarbeit ruhig war und ich ordentlich geschlafen habe. Die Kiste war die ganze Zeit ein Messgerät. Ich habe nur nie draufgeschaut.",[42,43,44],"blockquote",{},[11,45,46],{},"Ein Burnout hat sich bei mir nie als Erschöpfung angekündigt, sondern als Effizienz.",[18,48,50],{"id":49},"was-wirklich-hilft-nichts-davon-ist-beeindruckend","Was wirklich hilft (nichts davon ist beeindruckend)",[11,52,53],{},"Ich bin misstrauisch gegenüber dramatischen Antworten. Das Handy für einen Monat in die Schublade, die Hütte im Wald, der Digital Detox mit eigenem Hashtag. Was bei mir funktioniert, ist kleiner und ehrlich gesagt ziemlich langweilig. Inzwischen glaube ich, genau das ist der Punkt.",[11,55,56],{},"Arbeit kriegt eine Form, auch wenn mir niemand eine vorgibt. Ich schreibe abends die drei Aufgaben für morgen auf, und wenn die erledigt sind, darf ich aufhören. Nicht muss. Darf. Dieses eine Wort hat mehr für mich getan als jedes Produktivitätssystem, weil das Grundproblem in der Selbstständigkeit nicht Faulheit ist, sondern das Gegenteil: Ohne eine Definition von \"fertig\" ist jeder Abend ein offener Tab.",[11,58,59],{},"Irgendwas in meiner Woche muss physisch sein. Hardware-Projekte sind bei mir Selbstverteidigung, die sich als Hobby tarnt. Eine Spiegelhalterung hat keine Benachrichtigungen, Aluminium bittet nicht um eine Revision, und zwei Stunden mit einer Crimpzange machen meinen Kopf leiser als zwei Stunden mit egal was auf einem Bildschirm. Wenn Löten nicht dein Ding ist: Kochen und Laufen funktionieren angeblich genauso. Das Medium ist egal, solange es Widerstand leistet.",[11,61,62],{},"Und ich habe angefangen, Erholung als Teil des Handwerks zu sehen statt als Belohnung fürs Fertigwerden. Die besten Designentscheidungen dieses Jahr sind weg von der Tastatur passiert. Eine davon auf einem Spaziergang, den ich fast hätte ausfallen lassen, weil er ja nichts bringt. Ich traue meinem Kopf da noch nicht ganz, er sortiert Erholung immer noch unter \"später\" ein. Aber ich habe das Muster oft genug gesehen, um ihn an den Tagen zu überstimmen, an denen es drauf ankommt.",[11,64,65],{},"Ich habe vor einer Weile darüber geschrieben, wie ich im Crunch meine Freizeit verspreche, diese zukünftigen Wochenenden, die ich verteile wie Spielgeld. Das hier ist die andere Hälfte von dem Gedanken. Zeit zu schützen bringt nichts, wenn die geschützte Zeit im selben Rechteck stattfindet, mit denselben Feeds und denselben halb beantworteten Nachrichten. Es ging nie um weniger Stunden am Schreibtisch. Es ging darum, ein Leben zu haben, das nicht in den Laptop passt.",[11,67,68],{},"Die Kiste in meinem Abstellraum ist übrigens leer, und ich habe beschlossen, dass das ab jetzt meine Kennzahl ist. Solange ich irgendwas baue, um das niemand gebeten hat, ist der Rest wahrscheinlich in Ordnung.",{"title":70,"searchDepth":71,"depth":71,"links":72},"",2,[73,74,75],{"id":20,"depth":71,"text":21},{"id":33,"depth":71,"text":34},{"id":49,"depth":71,"text":50},null,"2026-07-13","Eine Selbstreflexion über einen Job, der komplett im Bildschirm stattfindet. Warum Burnout im digitalen Alltag so leicht passiert, welche Warnsignale ich inzwischen ernst nehme und welche kleinen, unspektakulären Gewohnheiten mich wirklich stabil halten.",false,"md","de",{},true,"\u002Fblog\u002Fde\u002Fworking-digital-without-burning-out",{"title":6,"description":78},"blog\u002Fde\u002Fworking-digital-without-burning-out",[88,89,90,91],"Personal","Burnout","Prozess","Freelance","AWuiCvny0cIMHMRq5ZYoBD2bSuHNE6Sbzgo_EKAjBfs",{"id":94,"title":95,"body":96,"cover":76,"date":164,"description":165,"draft":79,"extension":80,"locale":81,"meta":166,"navigation":83,"path":167,"seo":168,"stem":169,"tags":170,"__hash__":176},"blog\u002Fblog\u002Fde\u002Fthe-light-installation-finally-worked.md","Die Lichtinstallation hat endlich funktioniert",{"type":8,"value":97,"toc":158},[98,101,104,108,111,114,118,121,124,127,132,136,142,145,148,152,155],[11,99,100],{},"Die Frage kam genau einen Tag vor dem Event: Willst du die Lichtinstallation mit auf den Lieberscholli bringen? Das war der komplette Vorlauf. Keine Monate Planung, keine Checkliste. Ein Abend, an dem ich zuhause alles durchgetestet habe, und am nächsten Morgen ging es von Rosenheim nach München, das ganze Setup im Auto.",[11,102,103],{},"Ich habe über diese Installation schon mal geschrieben, und über ihr Talent, nicht zu funktionieren. Ein Tag Vorlauf für ihr erstes echtes Event fühlte sich also weniger wie ein Plan an und mehr wie eine Mutprobe. Ich habe trotzdem ja gesagt. Natürlich habe ich ja gesagt.",[18,105,107],{"id":106},"morgens-auf-dem-gelände","Morgens auf dem Gelände",[11,109,110],{},"Aufbau war früh, und ehrlich gesagt war der Aufbau einer meiner Lieblingsteile. Halbfertige Bühnen, Leute, die Sachen schleppen, diese ganz bestimmte Energie vor einem Event, wo alle gleichzeitig ein bisschen müde und ein bisschen aufgeregt sind. Ich habe geplaudert, geholfen wo es ging und einfach eine Weile den Ort auf mich wirken lassen. Irgendjemand hatte mit Früchten dekoriert, was ich richtig cool fand. Es war einfach voll nett.",[11,112,113],{},"Die Hauptlampe kam an den Baum. Das war der Plan, und ausnahmsweise hat der Plan gehalten: Der Baum gab ihr Höhe und etwas Organisches zum Drinwohnen, und das Gehäuse sah aus, als wäre es da gewachsen. Die zwei Support-Lampen waren eine andere Geschichte. Die haben nicht funktioniert. Nicht \"braucht kurz einen Fix\", sondern einfach tot. Aus drei Lampen wurde also vor dem ersten Beat eine, und genau diese Quote hatte das Projekt schon immer gern.",[18,115,117],{"id":116},"der-laptop-oder-meine-tour-durch-halb-münchen","Der Laptop, oder meine Tour durch halb München",[11,119,120],{},"Dann fiel mir auf, dass mein Laptop fehlt. Das eine Gerät, von dem aus die ganze Installation programmiert wird. Also bin ich durch halb München gefahren, um ihn zu holen. Genau die Besorgung, die man sich am Tag eines Events wünscht, im Event-Tag-Verkehr, mit laufender Uhr.",[11,122,123],{},"Als ich zurückkam, ging es schon los. Leute waren da, Musik lief, es ging schon richtig ab. Und ich hatte noch Code zu schreiben, denn die Motoren hatten irgendwann die Verbindung verloren, und dieser Verbindungsabbruch hat das Setup-Script komplett eingefroren. Während um mich herum alle anfingen zu feiern, saß ich also da und habe das Ding live neu gecoded, last minute, Party auf allen Seiten.",[11,125,126],{},"Der schnelle Fix: alles runterstrippen, um die Motoren drumherum arbeiten, das Licht zum Laufen bringen. Hat funktioniert. Die Motoren blieben die Nacht über aus, was ein bisschen wehgetan hat, aber eine atmende Lampe im Baum schlägt ein eingefrorenes Script jederzeit. Wo ich schon mal drin war, habe ich alles noch ein Stück schneller gemacht, weil Event-Energie langsame Animationen frisst. Die Positionierung war am Ende etwas klein für den Raum. Fair, das Setup war ursprünglich für ein legales Open-Air dimensioniert, nicht für das hier. Notiert für nächstes Mal.",[42,128,129],{},[11,130,131],{},"Nichts lief so, wie ich es am Abend davor getestet hatte, und es war trotzdem die beste Nacht, die dieses Ding je hatte.",[18,133,135],{"id":134},"zuschauen-wie-es-läuft","Zuschauen, wie es läuft",[137,138],"portrait-image",{"alt":139,"caption":140,"src":141},"Das gelochte Gehäuse einer der Lampen leuchtet nachts warm auf dem Holzdeck am Lieberscholli","Eine der Lampen am Abend. Das Licht vom Scholli ist irgendwie magisch.","\u002Fimages\u002Fblog\u002Flamp.jpeg",[11,143,144],{},"Dann durfte ich endlich einfach da sein. Alle haben gefeiert, und ich habe mich die ganze Nacht bei derselben Schleife erwischt: auf die Lampen schauen, auf meine Freunde schauen, sich über beides freuen, von vorn. Es gibt nichts, was ein Testlauf zuhause dir geben kann, das damit mithält, ein selbstgebautes Ding über einer Menge Leute leuchten zu sehen, die man gern hat.",[11,146,147],{},"Und genau hier war das Format vom Lieberscholli perfekt. Halb draußen, halb drinnen. Draußen wohnte die Hauptlampe in ihrem Baum, solange es warm und laut unter offenem Himmel war. Als der Outdoor-Teil vorbei war und alles nach drinnen zog, habe ich nicht abgebaut. Ich habe die Lampen stattdessen aufs DJ-Deck gestellt. Ihnen dabei zuzuschauen, wie sie da oben atmen, langsame Pulse direkt neben den Decks, fand ich ehrlich gesagt voll cute. Dieselbe Installation, komplett anderer Charakter: draußen ein Wesen im Baum, drinnen ein kleiner leuchtender Begleiter für den DJ. Ein Ort, der nur das eine oder das andere ist, hätte ihr nie beide Leben in einer Nacht geschenkt.",[18,149,151],{"id":150},"der-morgen-danach","Der Morgen danach",[11,153,154],{},"Abbau war am nächsten Tag, was ungefähr erzählt, wie die Nacht gelaufen ist. Vierundzwanzig Stunden feiern ist sehr lang, und ich hatte zwischendurch noch gecoded, und es war jede Minute wert.",[11,156,157],{},"Die Support-Lampen brauchen eine ordentliche Obduktion, die Motorverbindung muss mehr als einen Testlauf überleben, und die Größe braucht eine Version für größere Räume. Aber die Installation hat jetzt das gemacht, wofür sie gebaut wurde: eine ganze Nacht, echte Leute, echte Musik, ein Baum. Vierundzwanzig Stunden. Max out, in jedem Sinn.",{"title":70,"searchDepth":71,"depth":71,"links":159},[160,161,162,163],{"id":106,"depth":71,"text":107},{"id":116,"depth":71,"text":117},{"id":134,"depth":71,"text":135},{"id":150,"depth":71,"text":151},"2026-07-10","Ein Tag Vorwarnung, ein Testabend, dann von Rosenheim nach München. Wie die Lichtinstallation auf dem Lieberscholli endlich ihre Nacht bekommen hat, mit einer Hauptlampe im Baum, zwei toten Support-Lampen, einer Laptop-Rettungsfahrt durch halb München und Lampen, die auf dem DJ-Deck atmen.",{},"\u002Fblog\u002Fde\u002Fthe-light-installation-finally-worked",{"title":95,"description":165},"blog\u002Fde\u002Fthe-light-installation-finally-worked",[171,172,173,174,175],"Hardware","ESP32","Licht","Side Projects","Events","UvbAzLrNiXIg9WlWRDaWnQd2vmnHlQ8KHq9Himu-RSU",{"id":178,"title":179,"body":180,"cover":76,"date":275,"description":276,"draft":79,"extension":80,"locale":81,"meta":277,"navigation":83,"path":278,"seo":279,"stem":280,"tags":281,"__hash__":283},"blog\u002Fblog\u002Fde\u002Fthe-free-time-i-promise-away.md","Die freie Zeit, die ich ständig verspreche",{"type":8,"value":181,"toc":270},[182,185,188,191,195,198,207,210,213,217,220,249,254,257,261,264,267],[11,183,184],{},"Drei Wochen vor einem Launch habe ich einem Freund zugesagt, sonntags wandern zu gehen. Ich hab's ernst gemeint. Und gleichzeitig wusste ich, irgendwo hinter dem Teil von mir, der netten Menschen nette Dinge sagt, dass dieser Sonntag längst weg war. Er gehörte einer Staging-Umgebung, die nicht wollte, und einem Kunden, der um 23 Uhr „nur eine Kleinigkeit\" geschrieben hatte.",[11,186,187],{},"Ich mache das ständig. Wenn die Gegenwart voll ist, bezahle ich sie mit der Zukunft. Ein Kaffee nächste Woche, ein richtiges Wochenende nach der Deadline, „lass uns was machen, wenn das hier durch ist.\" Freizeit wird zur Währung, die ich ausgebe, bevor ich sie verdient habe, und Crunch ist die Kreditkarte.",[11,189,190],{},"Das Dumme am Verschenken von Zukunftszeit: Zukunfts-Ich arbeitet auch. Er ist nicht der ausgeruhte, verfügbare Typ, den ich mir vorstelle, wenn ich zusage. Er ist derselbe Kerl, ein Projekt später, der gerade jemand anderem dasselbe verspricht.",[18,192,194],{"id":193},"die-form-einer-deadline","Die Form einer Deadline",[11,196,197],{},"Ich wollte es sehen statt es nur zu spüren, also habe ich ein einzelnes Projekt so aufgezeichnet, wie es wirklich läuft. Acht Wochen, zwei Linien. Die eine ist, wie viel Arbeit das Ding verlangt. Die andere ist ungefähr, wie stabil ich mich dabei fühle.",[199,200],"stress-chart",{"caption":201,"crunchLabel":202,"shipLabel":203,"stabilityLabel":204,"startLabel":205,"workloadLabel":206},"Ein Projekt, acht Wochen. Nicht gemessen — nur ehrlich.","Crunch","Launch","Emotionale Stabilität","Projektstart","Arbeitslast",[11,208,209],{},"Die Linien kreuzen sich nicht sanft. Die Arbeitslast schleicht einen Monat lang, dann wird sie im letzten Drittel fast senkrecht — das Crunch-Band — genau dann, wenn die Stabilität von der Klippe fällt. Die beiden sind Spiegelbilder mit Verzögerung. Wenn ich merke, dass meine Laune unten ist, hatte die Arbeitslast, die das ausgelöst hat, vor Tagen ihren Höhepunkt. Ich reagiere immer auf den Druck der letzten Woche.",[11,211,212],{},"Und schau dir den rechten Rand an. Die Stabilität erholt sich nach dem Launch, aber nicht ganz und nicht lange, weil die Lücke zwischen den Projekten genau dort liegt, wo ich all die versprochenen Wanderungen eingeplant habe. Die Erholungswoche ist keine Erholung. Da kommt die Rechnung.",[18,214,216],{"id":215},"was-mich-wirklich-kostet","Was mich wirklich kostet",[11,218,219],{},"Wenn ich aufdrösle, woher der Stress kommt, ist fast nichts davon die Arbeit selbst. Die Arbeit mag ich. Der Schaden steckt in der Struktur drumherum:",[221,222,223,231,237,243],"ul",{},[224,225,226,230],"li",{},[227,228,229],"strong",{},"Scope, der nur in eine Richtung atmet."," Projekte wachsen. „Nur noch ein Abschnitt\" zieht nie irgendwo einen Abschnitt ab. Jedes Ja zu einem Kunden ist ein leises Nein zu einem Samstag.",[224,232,233,236],{},[227,234,235],{},"Mein eigener Optimismus."," Ich schätze wie die Version von mir, die acht Stunden schläft und auf keinen Bug trifft. Den Typen gibt es in Woche sechs nicht.",[224,238,239,242],{},[227,240,241],{},"Versprechen-Schulden."," Die sozialen Schuldscheine stapeln sich genau dann, wenn ich am wenigsten Kapazität habe, sie einzulösen — also schleppe ich zur Arbeitslast noch das schlechte Gewissen mit.",[224,244,245,248],{},[227,246,247],{},"Kontextwechsel."," Jemandem zu sagen „geht nicht, ich bin im Stress\" kostet mehr Energie als die Stunde, die ich mit ihm verbracht hätte. Ja sagen ist im Moment billiger und später deutlich teurer.",[42,250,251],{},[11,252,253],{},"Ich bin nicht schlecht im Zeitmanagement. Ich bin schlecht darin, zuzugeben, wie wenig Zeit ich tatsächlich habe.",[11,255,256],{},"An diesem Satz habe ich peinlich lange gesessen, weil die einfache Variante dem Kalender die Schuld gibt. Die ehrliche Variante ist: Ich sage Ja, um eine Beziehung vor der Wahrheit zu schützen, dass ich am Limit bin — und beschädige die Beziehung dann trotzdem, indem ich absage.",[18,258,260],{"id":259},"was-ich-ändere","Was ich ändere",[11,262,263],{},"Ich verspreche im Crunch keine konkrete Zukunftszeit mehr. Nicht „Sonntag\", sondern „wenn das durch ist, schreib ich dir und wir finden einen Tag.\" Klingt kleiner, ist kleiner, und genau das ist der Punkt. Es ist ein Versprechen, das Zukunfts-Ich auch halten kann, weil es nicht so tut, als wäre er frei.",[11,265,266],{},"Außerdem nenne ich Kunden inzwischen die zweite Zahl. Die erste ist die Deadline, die sie wollen. Die zweite ist, was sie in den Wochen drumherum kostet — die Abende, das Wochenende, die Version von mir, die zu allem anderen halb leer erscheint. Die meisten haben über die zweite Zahl nie nachgedacht, weil ich sie nie sichtbar gemacht habe. Manche verschieben die Deadline. Das allein glättet die rote Linie in diesem Diagramm mehr als jeder Produktivitätstrick, den ich je probiert habe.",[11,268,269],{},"Die Wanderung hat übrigens stattgefunden. Zwei Wochen zu spät, nach dem Launch, an einem Dienstag, weil wir beide nichts vorhatten. Sie war besser, als der Sonntag gewesen wäre. Niemand hat aufs Handy geschaut, ob die Staging-URL schon läuft.",{"title":70,"searchDepth":71,"depth":71,"links":271},[272,273,274],{"id":193,"depth":71,"text":194},{"id":215,"depth":71,"text":216},{"id":259,"depth":71,"text":260},"2026-06-24","Über Zeitdruck, verschwundene Wochenenden und die zukünftige Freizeit, die ich in Crunch-Phasen verteile wie Spielgeld — samt ehrlichem Diagramm, was Arbeitslast mit meiner emotionalen Stabilität macht.",{},"\u002Fblog\u002Fde\u002Fthe-free-time-i-promise-away",{"title":179,"description":276},"blog\u002Fde\u002Fthe-free-time-i-promise-away",[282,91,90,89],"Persönlich","i-RVyNIs44twzxBkQbvgGEpL7Vg_tilL7yFdWI2Et4g",{"id":285,"title":286,"body":287,"cover":76,"date":402,"description":403,"draft":79,"extension":80,"locale":81,"meta":404,"navigation":83,"path":405,"seo":406,"stem":407,"tags":408,"__hash__":410},"blog\u002Fblog\u002Fde\u002Fthe-light-installation-i-never-finished.md","Die Lichtinstallation, die ich nie fertig bekommen habe",{"type":8,"value":288,"toc":392},[289,292,295,299,302,305,309,312,315,318,322,325,328,333,337,340,343,346,350,353,356,359,363,366,369,373,376,379,383,386,389],[11,290,291],{},"In meinem Abstellraum steht eine Plastikkiste mit zehn Pinspot-Strahlern, zwei Aluminium-Spiegelhalterungen, einem Knäuel Motorverkabelung und einem ESP32-Board, das immer noch in einem Breadboard steckt, das seit über einem Jahr nicht mehr unter Strom war. Diese Kiste ist das Nächste, was ich an einem Friedhof habe. Das meiste, was ich baue, geht irgendwann raus. Das hier nicht, und ich habe genug Frieden damit geschlossen, um es ordentlich aufzuschreiben.",[11,293,294],{},"Die Idee war leicht zu beschreiben und brutal umzusetzen: Nimm zehn PAR36-Pinspots, richte sie alle auf zwei Spiegel, die auf Motoren sitzen, und lass einen ESP32 diese Spiegel schwenken, damit die Strahlen im Takt der Musik bewegtes Licht durch einen Raum malen. Ein selbstgebautes Lichtinstrument. Kein Produkt, kein Kundenjob, einfach das Ding, das ich existieren sehen wollte und nicht kaufen konnte.",[18,296,298],{"id":297},"woher-es-kam","Woher es kam",[11,300,301],{},"Es fing an, wie das meiste davon, auf einem Mood Board. Ich hatte monatelang Aufnahmen von Beam-Shows gesammelt: enge weiße Lichtstifte, die durch den Dunst schneiden, sich auffächern und wieder zuschnappen, die Art Sache, die man in einem richtigen Club sieht und nie mit Hobby-Budget. Die kommerziellen Geräte, die das können — Moving Heads, Beam-Mover — kosten mehr als mein Auto und wiegen so viel wie ein Mensch. Ich wollte keins besitzen. Ich wollte verstehen, warum sie sich so anfühlen, wie sie sich anfühlen, und der einzige Weg, wie ich etwas verstehen kann, ist, selbst eine schlechtere Version davon zu bauen.",[11,303,304],{},"Die Erkenntnis, an der ich mich festgebissen habe: Du brauchst kein bewegtes Licht. Du brauchst ein stehendes Licht und einen bewegten Spiegel. Ein Motor, der einen Spiegel dreht, kann kleiner, billiger und schneller sein als ein Motor, der ein zwei Kilo schweres Gerät dreht, weil ein Spiegel fast nichts wiegt. Wirf einen festen Strahl auf einen kippenden Spiegel, und der Strahl bewegt sich um den doppelten Winkel des Spiegels, geschenkt. Diese Verdopplung fühlte sich an wie Schummeln, im guten Sinne.",[18,306,308],{"id":307},"warum-par36-pinspots","Warum PAR36-Pinspots",[11,310,311],{},"Der PAR36-Pinspot ist ein unmodischer kleiner Strahler, und genau dafür liebe ich ihn. Es ist eine Sealed-Beam-Lampe, der Typ 4515, sechs Volt und dreißig Watt, mit einem Reflektor direkt im Glas, der einen Strahl von nur wenigen Grad Breite wirft. Keine Linse auszurichten, keine Optik zu justieren. Du gibst ihm Strom, und er produziert einen harten, schmalen Schacht aus warmweißem Licht, der im Dunst fantastisch aussieht.",[11,313,314],{},"Zehn Stück war eine bewusste Zahl. Ein Strahl ist ein Laserpointer. Zehn Strahlen, leicht unterschiedlich aufgefächert und alle auf dasselbe Spiegelpaar gerichtet, werden zu einem bewegten Lichtkamm, einem Fächer, der sich als ein Objekt bewegt. Ich habe sie gebraucht gekauft, paarweise, über Kleinanzeigen über ein paar Monate, bis ich einen zusammenpassenden Satz hatte und eine Stromrechnung, die ich lieber nicht zu genau anschauen wollte.",[11,316,317],{},"Die unglamouröse Wahrheit über Pinspots: Sie sind Glühlampen. Sie werden heiß, sie werden über die Spannung gedimmt und nicht über irgendein digitales Signal, und dreißig Watt pro Stück heißt dreihundert Watt an Lampen, bevor du einen einzigen Motor gedreht hast. Diese Zahl kommt später zurück und beißt mich. Merk sie dir.",[18,319,321],{"id":320},"die-zwei-spiegel-und-die-geometrie","Die zwei Spiegel und die Geometrie",[11,323,324],{},"Der Plan benutzte mit Absicht zwei Spiegel. Ein Spiegel gibt dir eine Bewegungsachse — der Strahl streicht entlang einer Linie. Um irgendwohin in einem Raum zu malen, willst du zwei Achsen, so wie ein Moving Head pant und tiltet. Also: Der erste Spiegel macht den horizontalen Schwenk, der zweite fängt das auf und ergänzt den vertikalen. Pan und Tilt, aufgeteilt auf zwei Flächen, jede von ihrem eigenen Motor getrieben.",[11,326,327],{},"Den optischen Pfad auf Papier hinzubekommen war befriedigend. Ihn in Aluminium hinzubekommen war die Stelle, an der das Projekt mir Dinge beizubringen begann, um die ich nicht gebeten hatte. Ein Spiegel bei fünfundvierzig Grad, geklebt an einen Winkel, geklebt an eine Motorwelle, ist eine Stimmgabel, die nur auf einen Vorwand wartet. Die Schritte des Motors selbst waren der Vorwand. Jedes Mal, wenn er sich bewegte, klang der Spiegel nach, und der Strahl an der gegenüberliegenden Wand landete nicht auf einem Punkt, sondern auf einem nervösen kleinen Schmierfleck, der summte.",[42,329,330],{},[11,331,332],{},"Ein Strahl kann nicht lügen. Jeder Mikrometer Spiel in der Halterung wird zum sichtbaren Zittern an einer Wand zehn Meter weiter, und der Raum ist ein gnadenloses Vergrößerungsglas.",[18,334,336],{"id":335},"der-esp32-der-denkt","Der ESP32, der denkt",[11,338,339],{},"Das Hirn war ein ESP32, und diesen Teil würde ich heute noch verteidigen. Er hat zwei Kerne, was sich sauber auf die zwei Hälften des Problems abbilden ließ. Ein Kern lief die Bewegung: die Motoren takten, die Fahrten glätten, die Choreografie halten. Der andere Kern hörte zu.",[11,341,342],{},"Ich fütterte ihn mit Audio von einem kleinen Elektret-Mikro über den ADC, ließ eine gefensterte FFT laufen und zog ein paar Bänder raus — eine Bassdrum-Schätzung aus dem Tiefen, die Gesamtenergie, ein grobes Gefühl für das Geflirre oben drauf. Das gab mir Zahlen, die sich mit der Musik bewegten, und der Bewegungskern machte aus diesen Zahlen Winkel. Ein Kick ließ den Fächer auf eine neue Position schnappen. Ein langer Aufbau zog die Schwenkgeschwindigkeit hoch bis zum Drop und warf sie dann weit auf. Nichts davon war clevere Signalverarbeitung. Es war gerade genug, damit das Licht sich anfühlte, als würde es zuhören, und das ist die ganze Illusion, die du verkaufst.",[11,344,345],{},"FreeRTOS machte die Aufteilung leicht: Ein Task mit hoher Priorität, fest auf einen Kern gepinnt, erzeugte über einen Timer die Schrittimpulse, und ein Task mit niedrigerer Priorität auf dem anderen Kern machte das Audio und aktualisierte hinter einem Mutex einen gemeinsamen Satz Zielwinkel. Als es lief, dem Serial Plotter zuzuschauen, wie eine Kick-Erkennung durchscrollt, während der Spiegel synchron schnappt, war einer der besseren Abende, die ich je am Schreibtisch hatte.",[18,347,349],{"id":348},"die-motoren-und-der-krieg-mit-dem-spiel","Die Motoren und der Krieg mit dem Spiel",[11,351,352],{},"Ich fing mit Hobby-Servos an, weil sie billig sind und ein einfaches Signal nehmen. Sie waren ein Fehler. Servos sind für „ungefähr hierhin\" gebaut, nicht für den seidigen, durchgehenden Schwenk, den ein Strahl braucht, und das Getriebegeräusch war durch den ganzen Raum hörbar. Schlimmer noch, sie haben eine Totzone, in der kleine Befehle nichts tun, also kamen langsame Fahrten als eine Reihe winziger Rucke raus. Ein Strahl, der winzige Rucke macht, sieht kaputt aus, nicht beabsichtigt.",[11,354,355],{},"Also wechselte ich zu Schrittmotoren mit ordentlichen Treibern. Ich probierte zuerst A4988, dann stieg ich auf TMC2209 um, wegen des leisen Microsteppings, denn ein Schrittmotor im Vollschritt summt wie ein wütendes Insekt, und dieses Summen geht direkt in den Spiegel. Microstepping glättete Geräusch und Bewegung zugleich. Mit sechzehn Microsteps und einer sorgfältigen Beschleunigungsrampe bekam ich endlich einen Schwenk, der wie ein Schwenk aussah und nicht wie ein Stottern.",[11,357,358],{},"Dann tauchte das Spiel auf. Jeder Schlupf zwischen Motorwelle und Spiegel heißt, dass der Spiegel beim Richtungswechsel des Schwenks einen Sekundenbruchteil hängt, bevor er folgt. An der Wand ist dieser Bruchteil eines Grades ein sichtbares Zögern bei jedem Richtungswechsel des Strahls, was bei audioreaktiver Bewegung permanent passiert. Ich kämpfte mit steiferen Kupplungen dagegen und indem ich den Spiegel so direkt wie möglich auf die Welle montierte, und ich bekam es runter, aber ich bekam es nie weg. Die guten Geräte lösen das mit Präzisionsgetrieben und absoluten Encodern. Ich löste es mit einem Inbusschlüssel und Sturheit.",[18,360,362],{"id":361},"strom-und-hitze-der-teil-den-keiner-aufs-mood-board-packt","Strom und Hitze, der Teil, den keiner aufs Mood Board packt",[11,364,365],{},"Erinnerst du dich an die dreihundert Watt. Die Motoren wollten ihre eigene saubere Versorgung, getrennt von allem, was den ESP32 berührt, denn Schrittmotor-Treiber kippen elektrisches Rauschen zurück in die Leitung, und eine verrauschte Schiene bringt einen Mikrocontroller dazu, interessante und nicht reproduzierbare Dinge zu tun. Die Pinspots wollten sechs Volt bei ernsthaftem Strom, durch Transformatoren, die selbst warm wurden. Und das alles erzeugte Hitze in einem Holzrahmen, den ich an einem Nachmittag zusammengebaut hatte, ohne groß über Belüftung nachzudenken.",[11,367,368],{},"Das erste Mal, als ich die ganze Anlage zwanzig Minuten laufen ließ, wurde das Innere des Rahmens heiß genug, dass ich aufhörte, ihm zu trauen. Dreihundert Watt Glühlampen sind, funktional, ein kleiner Heizlüfter, und ich hatte ihn neben Elektronik und ein paar kleinen Motoren eingebaut, denen die Wärme nicht behagte. Die ehrliche Lösung war ein kompletter Neuentwurf des Gehäuses: echter Luftstrom, die Lampen thermisch getrennt von den Hirnen, Lüfter, das ganze Programm. Das ist ein Wochenende sorgfältiger Arbeit, und es ist das unspaßigste Wochenende in jedem Hardware-Projekt, das, an dem du keine Magie hinzufügst, sondern nur die Magie davon abhältst, sich selbst anzuzünden.",[18,370,372],{"id":371},"der-abend-an-dem-es-halb-funktionierte","Der Abend, an dem es halb funktionierte",[11,374,375],{},"Für einen Abend lief es. Ich hatte Dunst im Raum, die Lampen brannten, beide Spiegel tracken, die FFT fütterte die Bewegung. Ich legte einen Track auf, den ich gut kenne, und schaute zu, wie zehn Strahlen sich über meine Decke fächerten und auf den Kick schnappten, und etwa neunzig Sekunden lang war es genau das Ding vom Mood Board. Es war wirklich schön, und es war meins, bis hin zu den summenden Halterungen und dem Spiel-Zögern, das ich sah, wenn ich danach suchte.",[11,377,378],{},"Dann arbeitete sich eine Kupplung locker, ein Spiegel driftete mitten im Schwenk aus der Ausrichtung, und der Fächer spaltete sich in zwei streitende Hälften. Ich zog sie fest, sie hielt ein paar Minuten, sie driftete wieder. Diese neunzig Sekunden sind der ganze Grund, warum ich die Kiste nicht bereue. Ich habe das fertige Ding gesehen, kurz, auch wenn ich es nie wiederholbar gemacht habe.",[18,380,382],{"id":381},"warum-es-liegen-blieb","Warum es liegen blieb",[11,384,385],{},"Kein einzelnes Ding hat es getötet. Es war die Summe aus dreien: Die mechanische Arbeit, um Zittern und Spiel richtig wegzubekommen, war echte Zerspanung, für die ich nicht ausgerüstet war, der thermische Neuentwurf war eine lästige Pflicht, die ich immer wieder nicht anfing, und bezahlte Kundenarbeit kam und fraß still die Abende, die ich dafür gehabt hätte. Side Projects sterben meistens nicht in einem dramatischen Scheitern. Sie sterben in einer langsamen Umpriorisierung, die man erst im Rückblick bemerkt, wenn einem auffällt, dass auf dem Breadboard ein Jahr Staub liegt.",[11,387,388],{},"Ich glaube auch, ich habe das gelernt, was ich eigentlich davon wollte, nämlich warum die teuren Geräte das kosten, was sie kosten. Du bezahlst nicht für das Licht. Du bezahlst für die Abwesenheit von Zittern, den totenstillen Strahl, das Getriebe ohne Spiel und das Gehäuse, das nie überhitzt. Das Licht ist der leichte Teil. Alles um das Licht herum ist das Produkt.",[11,390,391],{},"Die Kiste steht noch da. Auf dem ESP32 ist noch die Firmware drauf. Irgendeinen stillen Winter, wenn die Kundenarbeit dünner wird und ich mich genug über diese Neunzig-Sekunden-Erinnerung ärgere, fräse ich die Halterungen ordentlich, baue einen Rahmen, der atmet, und finde heraus, ob der zweite Versuch länger hält als ein Song. Bis dahin ist es mein Lieblingsfehlschlag, eine Kategorie, von der jeder, der baut, meiner Meinung nach genau einen haben sollte.",{"title":70,"searchDepth":71,"depth":71,"links":393},[394,395,396,397,398,399,400,401],{"id":297,"depth":71,"text":298},{"id":307,"depth":71,"text":308},{"id":320,"depth":71,"text":321},{"id":335,"depth":71,"text":336},{"id":348,"depth":71,"text":349},{"id":361,"depth":71,"text":362},{"id":371,"depth":71,"text":372},{"id":381,"depth":71,"text":382},"2026-06-22","Ein langes, ehrliches Post-mortem über das Projekt, das mich besiegt hat — zwei motorgetriebene Spiegel, die zehn PAR36-Pinspots durch einen Raum werfen sollten, ein ESP32 als Hirn, und alle Arten, wie Physik, Hitze und meine eigenen Deadlines im Weg standen.",{},"\u002Fblog\u002Fde\u002Fthe-light-installation-i-never-finished",{"title":286,"description":403},"blog\u002Fde\u002Fthe-light-installation-i-never-finished",[171,172,173,174,409],"Post-mortem","5OCtnnyOSSiebi9fmO5JmGTkvXKy6ax_b7MOsYMTu6k",{"id":412,"title":413,"body":414,"cover":76,"date":402,"description":485,"draft":79,"extension":80,"locale":81,"meta":486,"navigation":83,"path":487,"seo":488,"stem":489,"tags":490,"__hash__":494},"blog\u002Fblog\u002Fde\u002Fthe-work-behind-the-party.md","Die Arbeit hinter der Party",{"type":8,"value":415,"toc":479},[416,419,422,426,429,432,437,441,444,447,451,454,457,460,464,467,470,473,476],[11,417,418],{},"Ich habe von einer Handvoll Freunde mehr darüber gelernt, wie Events funktionieren, als ich es je als Gast vor der Bühne hätte lernen können. Nicht aus einem Kurs, nicht aus einem YouTube-Video über Festivalproduktion. Von Leuten, die mich während der langweiligen Teile dabei sein ließen, der Teile, die bei eingeschaltetem Saallicht und ohne tanzende Menschen passieren.",[11,420,421],{},"Beim ersten Mal, als mir jemand einen Load-in zeigte, hat es klick gemacht. Der LKW um vier Uhr nachmittags. Die Flightcases, die schwerer sind, als sie es eigentlich sein dürften. Die zwei Stunden Kabel, die abgeklebt werden müssen, damit sich keiner den Knöchel bricht, der Soundcheck, der eigentlich ein Streit mit dem Raum ist, das Gespräch an der Tür darüber, wer reinkommt und wer leise nicht. Wenn der erste Gast um Mitternacht ankommt und „schöne Party\" sagt, sind schon acht Stunden Arbeit passiert, die er nie sehen wird. Das ist der Job. Du baust etwas, dessen ganzer Erfolg davon abhängt, dass keiner sehen kann, wie es gebaut wurde.",[18,423,425],{"id":424},"die-kulissen","Die Kulissen",[11,427,428],{},"Es gibt ein Wort, zu dem ich immer wieder zurückkomme: Kulissen. Die Aufbauten hinter der Bühne, die von vorne wie eine Welt aussehen und von hinten wie Sperrholz und Gaffa. Ich habe inzwischen genug Zeit dahinter verbracht, um meistens das Sperrholz zu sehen, und ich würde das gegen nichts eintauschen.",[11,430,431],{},"Wenn du die Kulissen einmal gesehen hast, kannst du sie nicht mehr nicht sehen, und das verändert, wie du in einem Raum stehst. Ich bemerke den Verlauf an einer angestrahlten Wand, bevor ich den DJ bemerke. Ich höre, wenn eine Anlage von jemandem eingestellt wurde, dem es wichtig war, und wenn sie einfach nur laut ist. Ich sehe die Person am Rand der Tanzfläche mit dem Funkgerät im Ohr, die nicht tanzt, sondern die Menge beobachtet wie das Wetter, und ich weiß, dass sie der Grund ist, warum sich die Nacht sicher genug anfühlt, dass alle anderen die Sicherheit komplett vergessen können.",[42,433,434],{},[11,435,436],{},"Eine gute Party fühlt sich genau in dem Maß mühelos an, in dem sich jemand verausgabt hat, damit sie mühelos aussieht.",[18,438,440],{"id":439},"wo-ich-mich-sehe","Wo ich mich sehe",[11,442,443],{},"Früher dachte ich, ich will der Mensch auf der Bühne sein. Will ich, wie sich herausstellt, nicht. Ich will irgendwo im Handwerk davon sein. Der Mensch, dem es wichtig ist, ob das Licht wirklich da landet, wo es soll, ob der Raum ein Gefühl hat oder nur eine Lautstärke. Ich bin Designer und Entwickler, und ein Abend draußen ist auch nur etwas, das jemand gestaltet hat, mit schlechterer Dokumentation und höherem Einsatz, denn wenn es schiefgeht, steht man um zwei Uhr nachts gemeinsam im Scheitern.",[11,445,446],{},"Das ist der ehrliche Ort, an dem ich gelandet bin. Nicht der Headliner, nicht der Veranstalter, der die Abendkasse zählt. Der Macher, am Rand, der still das Easing eines Lichtcues beurteilt.",[18,448,450],{"id":449},"blitz-und-was-sauber-mit-einer-dreckigen-stadt-gemacht-hat","Blitz, und was sauber mit einer dreckigen Stadt gemacht hat",[11,452,453],{},"Blitz macht zu. Ich wusste, dass es kommt, und ich bin immer noch nicht bereit, in der Vergangenheitsform darüber zu schreiben, also lasse ich das noch.",[11,455,456],{},"Als es aufmachte, tat es etwas, das München leise gebraucht hat. Es brachte eine Art Sauberkeit ins Nachtleben hier — nicht steril, sauber. Handys-in-der-Tasche-sauber. Eine Anlage, die du in der Brust spürtest, statt dass dir die Ohren bluten. Eine Türpolitik, bei der es darum ging, ein Gefühl zu schützen, statt Exklusivität vorzuführen. Ein Raum, in dem das Design bis auf die Toiletten durchdacht war, und der ganze Laden lief auf der Annahme, dass man Feiern ernst nehmen kann, ohne dass es grimmig wird.",[11,458,459],{},"München konnte eine dreckige Stadt zum Ausgehen sein, und ich meine nicht nur klebrige Böden. Ich meine eine gewisse beiläufige Hässlichkeit darin, wie Leute mit der Nacht und miteinander umgingen. Blitz hob den Boden dessen an, was wir noch akzeptierten. Es brachte den Rest der Stadt ein bisschen in Verlegenheit, schlechter zu sein. Das ist ein seltsames Vermächtnis für einen Club, der Maßstab zu sein, der leise dafür sorgte, dass alle anderen sich zusammenrissen, aber es ist ein echtes, und es überlebt den Raum selbst. Der Ort geht, der Standard, den er gesetzt hat, bleibt.",[18,461,463],{"id":462},"die-seltsame-ökonomie-des-raums","Die seltsame Ökonomie des Raums",[11,465,466],{},"Hier kommt der Teil, bei dem mir Ehrlichkeit am schwersten fällt. Eine Szene ist ein kleiner Ort, und am Ende kennst du jeden, und das ist schön und leicht anstrengend zugleich.",[11,468,469],{},"Es ist eine wunderbare Mischung. Die queere Crowd, die die Hälfte von dem aufgebaut hat, was Nachtleben überhaupt erst sehenswert macht, und nie die Anerkennung dafür bekommt. Die Leute, die Montag bis Freitag einen Anzug tragen und am Samstag jemand komplett anderes werden. Enge Freunde. Leute, die es ein bisschen zu sehr lieben und auf die du ein halbes Auge hast. Alle im selben Raum, kurz gleich, was so ziemlich der ganze Sinn ist.",[11,471,472],{},"Und es gibt an einem so kleinen Ort einen Sog, sich mit jedem einzelnen Menschen zu verbinden, dem du begegnest. Nicht um Geschäfte zu machen — ich gehe wirklich nicht rein und denke an Arbeit, und ich wäre ein schlechterer Mensch und ein schlechterer Gast, wenn ich es täte. Aber es rutscht. Ein Gespräch über nichts wird zu „ach, du machst Websites?\", und dann braucht jemand einen Flyer und jemand kennt eine Location, und du hast dem Freund eines Freundes mit seiner Landingpage geholfen und kamst dafür auf eine Gästeliste, und nichts davon war ein Geschäft, außer dass es, aus genug Entfernung betrachtet, alles eines war. Gefallen sind die eigentliche Währung. Keiner stellt für einen Gefallen eine Rechnung, und genau deshalb muss man vorsichtig mit ihnen sein.",[11,474,475],{},"Ich habe damit noch nicht ganz meinen Frieden gemacht. Ich mag die Leute zu sehr, um sie als Netzwerk zu behandeln, und ich weiß zu genau, wie das Netzwerk funktioniert, um so zu tun, als wäre es keins. Also versuche ich, mich an eine einfache Regel zu halten: Tu den Gefallen, weil du ihn für einen Freund tun würdest, und vergiss ihn sofort. In dem Moment, in dem du Buch führst, bist du nicht mehr in der Szene, sondern benutzt sie.",[11,477,478],{},"Ich weiß nicht genau, was ich für das Nachtleben dieser Stadt bin. Nicht unverzichtbar. Auch kein Tourist. Irgendwo in den Kulissen, helfe, wo ich kann, schaue zu, wie das Licht landet, leicht gebrochenen Herzens wegen eines Clubs, der einer ganzen Stadt beigebracht hat, ein bisschen weniger dreckig zu sein, und der gleich seine Anlage zum letzten Mal ausschaltet.",{"title":70,"searchDepth":71,"depth":71,"links":480},[481,482,483,484],{"id":424,"depth":71,"text":425},{"id":439,"depth":71,"text":440},{"id":449,"depth":71,"text":450},{"id":462,"depth":71,"text":463},"Was mir die Freundschaft mit Leuten aus der Münchner Szene wirklich beigebracht hat — wie Events laufen, die Arbeit, die keiner sieht, warum das Aus von Blitz etwas bedeutet, und die seltsame soziale Ökonomie eines Raums, in dem sich alle ständig gegenseitig Gefallen tun.",{},"\u002Fblog\u002Fde\u002Fthe-work-behind-the-party",{"title":413,"description":485},"blog\u002Fde\u002Fthe-work-behind-the-party",[491,492,282,493],"München","Nachtleben","Community","7ARJFsNUkTbRn-W7QwA13UktlPSRWOe9aIMsOGPMyZY",{"id":496,"title":497,"body":498,"cover":76,"date":566,"description":567,"draft":79,"extension":80,"locale":81,"meta":568,"navigation":83,"path":569,"seo":570,"stem":571,"tags":572,"__hash__":576},"blog\u002Fblog\u002Fde\u002Fmood-boards-artists-and-the-munich-scene.md","Mood Boards, Künstler und die Münchner Nacht, die meinen Code gefüttert hat",{"type":8,"value":499,"toc":560},[500,503,506,510,513,516,521,525,528,531,535,538,541,544,548,551,554,557],[11,501,502],{},"Die meisten meiner Projekte fangen weit weg vom Editor an. Sie fangen mit einem Ordner voller Screenshots an, ein paar schlecht geknipsten Fotos von einer Tanzfläche und dem nagenden Gefühl, dass ich etwas gesehen habe, das ich bauen will, aber noch nicht benennen kann. Dieser Ordner ist der eigentliche erste Commit.",[11,504,505],{},"Früher dachte ich, Recherche sei der langweilige Teil, den man vor dem Spaß erledigt. Heute ist es mein Lieblingsteil. Was am Ende aus einem Projekt rauskommt, ist immer nur so interessant wie das, was ich vorher reingesteckt habe, und ein Mood Board ist nichts anderes als ein ehrliches Protokoll dessen, worauf ich gerade geachtet habe.",[18,507,509],{"id":508},"warum-ein-mood-board-besser-ist-als-eine-leere-datei","Warum ein Mood Board besser ist als eine leere Datei",[11,511,512],{},"Ein Mood Board ist die Erlaubnis, es noch nicht zu wissen. Ich werfe Sachen rein, die offensichtlich nicht zusammengehören: ein brutalistisches Betontreppenhaus, ein Standbild aus einem alten Anime, der Verlauf auf einer billigen Energydrink-Dose, ein Plakat von einer Clubnacht, das eigentlich nicht so gut aussehen dürfte. Ich erkläre nicht, warum. Wenn drei zusammenhanglose Bilder ständig nebeneinander landen, ist genau diese Spannung meistens die Idee.",[11,514,515],{},"Der Trick ist, schneller zu sammeln, als man urteilt. In dem Moment, in dem ich frage „passt das zum Briefing\", höre ich auf zu sehen, und ein Board voller sicherer, markenkonformer Referenzen bringt sichere, markenkonforme Arbeit. Da habe ich lieber vierzig Sachen und werfe fünfunddreißig wieder weg.",[42,517,518],{},[11,519,520],{},"Das Board ist kein Plan. Es ist ein Protokoll dessen, wohin mein Auge immer wieder zurückkehrt, wenn keiner zuschaut.",[18,522,524],{"id":523},"die-künstler-zu-denen-ich-immer-wieder-zurückkomme","Die Künstler, zu denen ich immer wieder zurückkomme",[11,526,527],{},"Vieles, was auf dem Board landet, ist gar kein Webdesign. Es ist Licht. Refik Anadol, der Daten in etwas verwandelt, das auf einer Museumswand zu atmen scheint. James Turrell, der aus nichts als einem Farbverlauf und Geduld einen ganzen Raum baut. Alte Demoscene-Mitschnitte aus den Neunzigern, wo jemand ein ganzes Universum in 64 Kilobyte gepackt hat, weil er musste. Ryoji Ikeda, der ein Stroboskop und eine Sinuswelle wie einen Meißel behandelt.",[11,529,530],{},"Keiner davon ist eine „Referenz\" im Sinne von „mach es so wie das hier\". Es ist eher eine Kalibrierung. Sie setzen zurück, was ich für möglich halte, bevor ich die Einschränkungen wieder reinlasse. Du schaust jemanden an, der aus Licht eine Kathedrale gebaut hat, und plötzlich wirkt deine kleine Canvas-Skizze, als würde sie sich nicht genug Mühe geben.",[18,532,534],{"id":533},"münchen-um-2-uhr-ist-eine-recherchereise","München um 2 Uhr ist eine Recherchereise",[11,536,537],{},"Der beste Ort dafür ist nicht das Netz. Es ist die Münchner Musikszene, irgendwann nach Mitternacht, wenn die Visuals übernehmen.",[11,539,540],{},"Harry Klein hat seine ganze Identität darauf gebaut. Da läuft die ganze Nacht eine Wand aus Live-Visuals, echte VJs, die auf den Raum reagieren, und das hat mir mehr über das Timing von Animation zu Sound beigebracht als jedes Tutorial. Bahnwärter Thiel ist die Gegenschule: roh, improvisiert, Licht, das von Containern und Gerüsten abprallt, nichts daran ist heilig. Ich stand in beiden und habe einfach die Projektion angeschaut statt den DJ, was einen leicht durchgeknallt aussehen lässt, aber hervorragende Feldforschung ist.",[11,542,543],{},"Was ich mit nach Hause nehme, ist nie ein konkreter Look. Es ist ein Gefühl für Tempo. Wie lange etwas halten soll, bevor es sich ändert. Wann ein langsamer Aufbau den Drop verdient und wann er einfach nur langweilig wird. Das ist der Teil, den du keinem Standbild entnehmen kannst, und es ist der Teil, der Bewegung lebendig wirken lässt statt dekorativ.",[18,545,547],{"id":546},"wohin-die-recherche-als-nächstes-will","Wohin die Recherche als Nächstes will",[11,549,550],{},"Zwei Ideen liegen seit Monaten auf dem Board, beide zielen auf dasselbe Jucken: Ich will Licht, das ich programmieren kann.",[11,552,553],{},"Die erste sind Shader für Laseranimation. Ein Laserprojektor nimmt einen Pfad — eine Liste von Punkten, die der Strahl schnell genug abfährt, dass dein Auge eine Form sieht. Die meisten Laser-Inhalte werden Bild für Bild in klobiger Software gebaut. Aber ein Fragment-Shader ist schon eine Maschine, um ein Feld aus Werten über Raum und Zeit zu beschreiben, und wenn ich dieses Feld in einen Strahlpfad abtasten kann, bekomme ich generative, reaktive Laser-Visuals aus demselben GLSL, das ich ohnehin fürs Web schreibe. Noise-Funktionen werden zu Rauch. Ein Distance Field wird zu einer sich verformenden Kontur. Es ist wieder der Demoscene-Instinkt: etwas Lebendiges aus reiner Mathematik quetschen.",[11,555,556],{},"Die zweite ist eine kleine Bibliothek, die ich mir seit Ewigkeiten verspreche. Eine Webcam auf einen Raum richten, den Feed als Input-Textur behandeln, ihn durch Shader für Optical Flow und Silhouettenerkennung schicken und die Bewegung einer Person in eine interaktive Projektion verwandeln, die zurück auf die Wand gemappt wird, vor der sie steht. Kamera rein, Licht raus, der Körper in der Mitte als Controller. Nichts daran ist neu in der Welt der Kunstinstallationen. Was fehlt, ist eine Version, die klein und schnell ist und keine Software-Lizenz für 3.000 Euro braucht, um auf einem Laptop auf einer Party zu laufen.",[11,558,559],{},"Keine von beiden ist fertig. Eine ist nicht mal richtig angefangen. Aber beide liegen auf dem Board, neben einem verwackelten Foto von einem Laser, der im Blitz durch Nebel schneidet, und so läuft es meistens: Der Abend wird zum Screenshot, der Screenshot wird zum Jucken, und das Jucken wird irgendwann ein Repo, das ich aus Sturheit nicht mehr aufgebe.",{"title":70,"searchDepth":71,"depth":71,"links":561},[562,563,564,565],{"id":508,"depth":71,"text":509},{"id":523,"depth":71,"text":524},{"id":533,"depth":71,"text":534},{"id":546,"depth":71,"text":547},"2026-06-21","Wie ich ein Projekt recherchiere, bevor ich eine Zeile schreibe — Referenzen sammeln, die Visuals in der Münchner Musikszene anschauen und das Ganze in shadergetriebene Laser-Ideen und eine Webcam-Projektionsbibliothek verwandeln, die ich endlich mal fertig machen will.",{},"\u002Fblog\u002Fde\u002Fmood-boards-artists-and-the-munich-scene",{"title":497,"description":567},"blog\u002Fde\u002Fmood-boards-artists-and-the-munich-scene",[573,574,575,491],"Kreatives Coding","Recherche","Shader","rT1ZtQPQ1mjr7_etea5ZyCHEZ2hbL5SOC_A_AJ_Wwb0",{"id":578,"title":579,"body":580,"cover":76,"date":857,"description":858,"draft":79,"extension":80,"locale":81,"meta":859,"navigation":83,"path":860,"seo":861,"stem":862,"tags":863,"__hash__":867},"blog\u002Fblog\u002Fde\u002Fmeetre-private-meeting-transcripts.md","Meetre — Meeting-Transkripte, die deinen Mac nie verlassen",{"type":8,"value":581,"toc":851},[582,593,596,600,616,631,638,641,646,650,653,712,715,801,808,812,823,826,829,833,836,839,847],[11,583,584,585,592],{},"Ich sitze in vielen Meetings, und wie ich sie dokumentiere, hat mich nie zufrieden gemacht. Halb zuhören und nebenbei Notizen kritzeln heißt, das eigentliche Gespräch zu verpassen. Die Aufnahme einem Cloud-Dienst geben heißt, stillschweigend zu akzeptieren, dass alles aus diesem Raum jetzt auf dem Server von jemand anderem liegt. Also habe ich ",[586,587,591],"a",{"href":588,"rel":589},"https:\u002F\u002Fgithub.com\u002Fmaxlkatze\u002Fmeetre",[590],"nofollow","Meetre"," gebaut.",[11,594,595],{},"Meetre nimmt ein Meeting auf deinem Mac auf und macht daraus ein sauberes, nach Sprechern sortiertes und zusammengefasstes Transkript. Der ganze Sinn steckt in einem Wort: lokal. Nichts verlässt deinen Rechner. Kein Upload, kein Konto, keine Nutzungsbedingungen, die über deine Worte entscheiden.",[18,597,599],{"id":598},"die-modelle-die-arbeiten","Die Modelle, die arbeiten",[11,601,602,603,607,608,611,612,615],{},"Die Transkription läuft auf Whisper ",[604,605,606],"code",{},"large-v3-turbo",", beschleunigt über Apples MLX-Framework, damit es auf Apple Silicon wirklich schnell ist. Wer das große Modell nicht braucht, geht auf ",[604,609,610],{},"small"," oder ",[604,613,614],{},"medium"," runter und spart Platz und Zeit.",[11,617,618,619,622,623,626,627,630],{},"Die Zusammenfassungen kommen von einem lokalen LLM, das das Transkript liest und festhält, was tatsächlich entschieden wurde. Standardmäßig steht das Modell auf ",[604,620,621],{},"auto"," und nimmt einfach das größte, das in deinen RAM passt: ein MacBook mit 8 GB landet bei ",[604,624,625],{},"qwen3.5-4b",", eine 32-GB-Maschine bekommt ",[604,628,629],{},"qwen3.5-35b",", und du musst keinen Gedanken daran verschwenden. Die aktuelle Generation ist Qwen3.5, ein hybrides Reasoning-Modell, das erst durch das Meeting denkt und dann schreibt, plus Gemma 4 für die beste mehrsprachige Ausgabe. Das versteckte Nachdenken wird aus dem aussortiert, was du behältst, übrig bleiben vier saubere Abschnitte: Zusammenfassung, Entscheidungen, Aufgaben, offene Fragen.",[11,632,633,634,637],{},"Auf die Sprechertrennung bin ich still ein bisschen stolz. Meetre nimmt dein Mikrofon und den Systemton als getrennte Spuren auf und kann so dich und alle in deinem Raum schon von den Leuten am anderen Ende unterscheiden, bevor überhaupt ein Modell läuft. Danach läuft ",[604,635,636],{},"pyannote","-Diarisierung auf jeder Spur einzeln und trennt die einzelnen Stimmen pro Seite. Saubere Einzelspuren zu diarisieren ist deutlich zuverlässiger, als hinterher einen Mono-Mix zu entwirren, und das Transkript liest sich wie ein Drehbuch statt wie eine Textwand.",[11,639,640],{},"Jedes dieser Modelle läuft auf deiner eigenen Hardware. Die Cloud kommt nie ins Spiel.",[42,642,643],{},[11,644,645],{},"Das beste Datenschutz-Feature ist das, über das man nie nachdenken muss. Bei Meetre verlassen die Daten den Raum einfach nie.",[18,647,649],{"id":648},"steuerung-über-das-terminal","Steuerung über das Terminal",[11,651,652],{},"Die Installation ist eine Zeile. Sie lädt ein lokales, verschiebbares Python und richtet die Berechtigungen für dich ein:",[654,655,659],"pre",{"className":656,"code":657,"language":658,"meta":70,"style":70},"language-bash shiki shiki-themes github-light github-dark","cd ~ && curl -fsSL https:\u002F\u002Fgithub.com\u002Fmaxlkatze\u002Fmeetre\u002Farchive\u002Frefs\u002Fheads\u002Fmain.tar.gz | tar -xz && cd meetre-main && bash install.sh\n","bash",[604,660,661],{"__ignoreMap":70},[662,663,666,670,674,678,682,685,688,692,695,698,700,702,705,707,709],"span",{"class":664,"line":665},"line",1,[662,667,669],{"class":668},"sj4cs","cd",[662,671,673],{"class":672},"sZZnC"," ~",[662,675,677],{"class":676},"sVt8B"," && ",[662,679,681],{"class":680},"sScJk","curl",[662,683,684],{"class":668}," -fsSL",[662,686,687],{"class":672}," https:\u002F\u002Fgithub.com\u002Fmaxlkatze\u002Fmeetre\u002Farchive\u002Frefs\u002Fheads\u002Fmain.tar.gz",[662,689,691],{"class":690},"szBVR"," |",[662,693,694],{"class":680}," tar",[662,696,697],{"class":668}," -xz",[662,699,677],{"class":676},[662,701,669],{"class":668},[662,703,704],{"class":672}," meetre-main",[662,706,677],{"class":676},[662,708,658],{"class":680},[662,710,711],{"class":672}," install.sh\n",[11,713,714],{},"Danach hält sich das CLI dezent zurück:",[654,716,718],{"className":656,"code":717,"language":658,"meta":70,"style":70},"# Aufnahme mit Namen starten\nmeetre record --name \"Standup\"\n\n# Eine vorhandene Audiodatei neu transkribieren\nmeetre transcribe call.mp3\n\n# Das letzte Transkript in die Notizen schicken\nmeetre summarize\n\n# Einstellungen ansehen oder ändern (Modell, Sprache, Schalter)\nmeetre config\n",[604,719,720,726,740,746,752,763,768,774,782,787,793],{"__ignoreMap":70},[662,721,722],{"class":664,"line":665},[662,723,725],{"class":724},"sJ8bj","# Aufnahme mit Namen starten\n",[662,727,728,731,734,737],{"class":664,"line":71},[662,729,730],{"class":680},"meetre",[662,732,733],{"class":672}," record",[662,735,736],{"class":668}," --name",[662,738,739],{"class":672}," \"Standup\"\n",[662,741,743],{"class":664,"line":742},3,[662,744,745],{"emptyLinePlaceholder":83},"\n",[662,747,749],{"class":664,"line":748},4,[662,750,751],{"class":724},"# Eine vorhandene Audiodatei neu transkribieren\n",[662,753,755,757,760],{"class":664,"line":754},5,[662,756,730],{"class":680},[662,758,759],{"class":672}," transcribe",[662,761,762],{"class":672}," call.mp3\n",[662,764,766],{"class":664,"line":765},6,[662,767,745],{"emptyLinePlaceholder":83},[662,769,771],{"class":664,"line":770},7,[662,772,773],{"class":724},"# Das letzte Transkript in die Notizen schicken\n",[662,775,777,779],{"class":664,"line":776},8,[662,778,730],{"class":680},[662,780,781],{"class":672}," summarize\n",[662,783,785],{"class":664,"line":784},9,[662,786,745],{"emptyLinePlaceholder":83},[662,788,790],{"class":664,"line":789},10,[662,791,792],{"class":724},"# Einstellungen ansehen oder ändern (Modell, Sprache, Schalter)\n",[662,794,796,798],{"class":664,"line":795},11,[662,797,730],{"class":680},[662,799,800],{"class":672}," config\n",[11,802,803,804,807],{},"Wer sich keine Flags merken will, nimmt ",[604,805,806],{},"meetre cli"," und wählt aus einem interaktiven Textmenü.",[18,809,811],{"id":810},"oder-einfach-die-menüleiste","Oder einfach die Menüleiste",[11,813,814,815,818,819,822],{},"Wenn das Terminal nicht dein Ding ist: Das ",[604,816,817],{},"✦","-Symbol sitzt in der Menüleiste und kann alles, was das CLI kann. Ein Klick öffnet ein Einstellungs-Popup für den Meeting-Namen, das Transkriptions- und das Zusammenfassungs-Modell, die Sprache sowie Schalter für Systemton und Sprechererkennung. Die Modellauswahl ist auf deine Maschine zugeschnitten: zu große Modelle sind ausgegraut, geladene bekommen ein Häkchen, und die Reasoning-Modelle ein kleines Hirn. Während es arbeitet, siehst du den Live-Status (Aufnahmezeit, einen Download-Balken, ein drehendes Transkribiere…), und am Ende kommt eine native Benachrichtigung, dass das Meeting fertig ist. Es aktualisiert sich per ",[604,820,821],{},"git pull"," bei jedem Start, startet auf Wunsch beim Anmelden und bleibt sonst unsichtbar, bis du es brauchst.",[11,824,825],{},"Der Systemton wird direkt über ScreenCaptureKit aufgenommen, du brauchst also keinen BlackHole- oder Loopback-Treiber — genau das, was „nimm mal den Call auf\" sonst in eine halbe Stunde Audio-Routing-Gefummel verwandelt.",[11,827,828],{},"Heraus kommt ein Markdown-Transkript mit Zeitstempeln und Sprecher-Labels, ein MP3-Backup der Aufnahme und eine Notiz in der Notizen-App.",[18,830,832],{"id":831},"warum-lokal-und-warum-offen","Warum lokal, und warum offen",[11,834,835],{},"Privatsphäre ist der naheliegende Grund, und er stimmt. Der leisere Grund heißt Besitz. Ein Werkzeug, das auf der eigenen Hardware läuft, ist kein Abo mehr, das man mietet, sondern etwas, das einem bleibt. Es funktioniert im Flugzeug. Es funktioniert, wenn der Dienst, von dem man abhängt, gerade ausfällt. Es funktioniert in fünf Jahren noch, wenn das Startup hinter der Cloud-Alternative längst übernommen und abgeschaltet wurde. Apple Silicon ist heute schnell genug, dass „Audio an einen Server schicken\" eine Entscheidung ist und keine Voraussetzung, und ich treffe lieber die andere.",[11,837,838],{},"Es läuft ab macOS 13 auf Apple Silicon (M1 bis M5), will am unteren Ende 8 GB RAM und etwa 6 GB Plattenplatz für die Modelle und ist standardmäßig auf Deutsch eingestellt, weil die meisten meiner Meetings deutsch sind. Andere Sprachen und automatische Erkennung sind einen Schalter entfernt. Schnell ist es auch: Ein 30-Minuten-Meeting ist auf den meisten M-Macs in zwei bis vier Minuten transkribiert, je neuer der Chip, desto flotter.",[11,840,841,842,846],{},"Das Ganze ist Open Source unter der MIT-Lizenz, du kannst also genau nachlesen, was es mit deinem Audio macht, bevor du ihm ein einziges Meeting anvertraust. ",[586,843,845],{"href":588,"rel":844},[590],"Es liegt auf GitHub."," Ich habe es zuerst für mich selbst gebaut, was meistens der einzig ehrliche Grund ist, überhaupt etwas zu bauen.",[848,849,850],"style",{},"html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":70,"searchDepth":71,"depth":71,"links":852},[853,854,855,856],{"id":598,"depth":71,"text":599},{"id":648,"depth":71,"text":649},{"id":810,"depth":71,"text":811},{"id":831,"depth":71,"text":832},"2026-06-17","Ich habe ein Open-Source-Tool für den Mac gebaut, das ein Meeting aufnimmt, mit Whisper transkribiert, die Sprecher erkennt und mit Qwen zusammenfasst — alles lokal, ohne Cloud, ohne Konto.",{},"\u002Fblog\u002Fde\u002Fmeetre-private-meeting-transcripts",{"title":579,"description":858},"blog\u002Fde\u002Fmeetre-private-meeting-transcripts",[591,864,865,866],"Tools","Privatsphäre","macOS","vSKRaRvoVI4iGC8TPDU-mGFOI-Kva-mq1FTapzBHBU4",{"id":869,"title":870,"body":871,"cover":76,"date":918,"description":919,"draft":79,"extension":80,"locale":81,"meta":920,"navigation":83,"path":921,"seo":922,"stem":923,"tags":924,"__hash__":926},"blog\u002Fblog\u002Fde\u002Fwhen-good-work-isnt-enough.md","Wenn gute Arbeit nicht genügt",{"type":8,"value":872,"toc":913},[873,876,879,882,887,890,894,897,900,904,907,910],[11,874,875],{},"Einige der Menschen, mit denen ich am liebsten arbeite, sind Kreative ohne großes Portemonnaie. Musiker, Illustratorinnen, kleine Ateliers, Leute, die aus dem Nichts etwas aufbauen. Sie haben Geschmack, sie haben eine Vision, und oft haben sie genau die Art von Projekt, für die sich die Arbeit lohnt. Was sie nicht haben, ist Geld.",[18,877,870],{"id":878},"wenn-gute-arbeit-nicht-genügt",[11,880,881],{},"Früher dachte ich, wenn die Arbeit nur gut genug ist, regelt sich der Preis von selbst. Tut er nicht. Eine Website kann das Beste sein, das ich je gemacht habe, und trotzdem abgelehnt werden — nicht, weil jemand an der Qualität zweifelt, sondern weil sie für diese Person gerade schlicht nicht genug Wert hat. Ihr Budget fließt ins Studio, in die nächste Veröffentlichung, in die Miete. Eine schöne Seite ist ein Luxus, den sie sich noch nicht rechtfertigen können.",[42,883,884],{},[11,885,886],{},"Ein „Nein“ ist nicht immer ein Urteil über deine Arbeit. Manchmal heißt es nur, dass Timing und Geldbeutel nicht zusammenpassten — und dagegen lässt sich schwerer argumentieren als gegen Kritik.",[11,888,889],{},"Dieser Unterschied ist wichtig, aber er macht den Moment kein bisschen weniger schmerzhaft.",[18,891,893],{"id":892},"wie-es-sich-anfühlt","Wie es sich anfühlt",[11,895,896],{},"Ich tue nicht so, als ginge es mir nicht nahe. Man steckt echte Sorgfalt in ein Angebot, man sieht das fertige Ding vor sich — und dann scheitert es an der Zahl. Es ist leicht, das als Ablehnung der eigenen Person zu lesen: des eigenen Geschmacks, des Handwerks, des Werts. Eine Zeit lang habe ich genau das getan.",[11,898,899],{},"Geholfen hat, zwei Dinge zu trennen: ob die Arbeit gut ist, und ob sie für diese Person in diesem Moment bezahlbar ist. Das sind verschiedene Fragen mit verschiedenen Antworten, und sie zu verwechseln ist es, was einen auslaugt. Die Arbeit kann hervorragend sein und die Antwort trotzdem Nein.",[18,901,903],{"id":902},"freundschaftsdeals-und-gemeinsame-visionen","Freundschaftsdeals und gemeinsame Visionen",[11,905,906],{},"Mit Freunden wird es komplizierter. Der Freundschaftsdeal — ein niedrigerer Preis, ein Gefallen, gemeinsam etwas bauen, weil ihr beide daran glaubt — gehört zum Erfüllendsten, das es gibt. Aber genau hier zerbricht es auch leise.",[11,908,909],{},"Wenn das Geld klein oder gar nicht da ist, muss die Vision das Gewicht tragen. Wollen nicht beide dasselbe mit derselben Intensität, zeigen sich die Risse schnell: Der Umfang verschiebt sich, die Motivation schwindet, und plötzlich fühlt sich eine großzügige Geste auf der einen Seite wie eine Pflicht an und auf der anderen wie eine Enttäuschung. Ich habe gelernt, dass ein Freundschaftsdeal nur überlebt, wenn die gemeinsame Vision wirklich stark ist — stark genug, um zwei Menschen zusammenzuhalten, wenn keine Rechnung sie dazu zwingt.",[11,911,912],{},"Also jage ich nicht mehr jedem Projekt hinterher, das mich begeistert, und stelle zuerst eine leisere Frage: Ist die Vision hier stark genug, um zu tragen, was das Budget nicht kann? Lautet die Antwort Ja, mache ich gern Platz. Lautet sie Nein, ist ein früher Rückzug das Freundlichste — für die Arbeit, den Geldbeutel und die Freundschaft gleichermaßen.",{"title":70,"searchDepth":71,"depth":71,"links":914},[915,916,917],{"id":878,"depth":71,"text":870},{"id":892,"depth":71,"text":893},{"id":902,"depth":71,"text":903},"2026-06-16","Über die Arbeit mit Kreativen, die mehr Vision als Budget haben — warum gute Arbeit trotzdem abgelehnt wird, wie sich das anfühlt, und warum selbst Freundschaftsdeals eine Vision brauchen, die stark genug trägt.",{},"\u002Fblog\u002Fde\u002Fwhen-good-work-isnt-enough",{"title":870,"description":919},"blog\u002Fde\u002Fwhen-good-work-isnt-enough",[282,925],"Kunden","6X5j6FvIg00jvA1EO5YAkOOj1HHilW0NkyyqVJL9nBM",{"id":928,"title":929,"body":930,"cover":1015,"date":1016,"description":1017,"draft":79,"extension":80,"locale":81,"meta":1018,"navigation":83,"path":1019,"seo":1020,"stem":1021,"tags":1022,"__hash__":1026},"blog\u002Fblog\u002Fde\u002Fthe-courage-to-be-different.md","Mut zur besonderen Website",{"type":8,"value":931,"toc":1010},[932,935,938,942,950,953,960,963,968,972,975,981,984,987,991,998,1004,1007],[11,933,934],{},"Ich könnte den ganzen Tag sichere Websites bauen. Ein bekanntes Template nehmen, die Farben ändern, die Fotos tauschen, bis Mittag fertig. Niemand würde sich beschweren. Der Kunde würde nicken. Und nach einer Woche würde sich niemand mehr erinnern, dass es die Seite je gegeben hat. Das ist der bequeme Weg, und genau den habe ich vor Jahren verlassen, denn eine Website, die sich einfügt, hat schon an der einzigen Aufgabe versagt, die wirklich zählt: aufzufallen.",[11,936,937],{},"Schau dir das Gebäude auf dieser Seite an. Eine ganze Straße aus kompetenten, vernünftigen Türmen, und dein Blick wandert sofort zu dem einen mit Haltung. Das ist kein Zufall der Architektur. Das ist, was Charakter in einer Menge macht. Eine Website funktioniert genauso, nur ist die Menge hier das gesamte Internet und die Konkurrenz einen Tab entfernt.",[18,939,941],{"id":940},"die-vorlage-ist-eine-versuchung","Die Vorlage ist eine Versuchung",[11,943,944,945,949],{},"Vorlagen sind verführerisch, weil sie sich wie Sicherheit anfühlen. Sie haben sich bewährt, sie laden, sie sind schnell, und sie lassen alle im Raum durchatmen. Aber Sicherheit und Erinnerung heben sich meistens gegenseitig auf. Wenn deine Seite aussieht wie tausend andere, dann ",[946,947,948],"em",{},"ist"," sie für den Besucher tausend andere, und austauschbar zu sein ist die leiseste Art, im Netz zu verschwinden.",[11,951,952],{},"Das Internet ist 2026 randvoll mit sauberen, kompetenten, vollkommen vergessbaren Seiten. Sie sind nicht schlecht. Sie sind schlimmer als schlecht. Sie sind unsichtbar, und unsichtbar verliert jedes Mal gegen hässlich, denn das Hässliche hinterlässt wenigstens eine Spur in deinem Kopf.",[11,954,955],{},[956,957],"img",{"alt":958,"src":959},"Ein monochromes Raster aus fast identischen Luftaufnahmen in einer Galerie — austauschbare Einheiten, die zu einer einzigen verschwimmen.","\u002Fimages\u002Fblog\u002Fcourage\u002Fsameness-grid.jpg",[11,961,962],{},"Wenn alles im selben ordentlichen Raster hängt, hört das Auge auf zu schauen. Es überfliegt, es zuckt mit den Schultern, es zieht weiter. Eine Vorlage schenkt dir dieses Raster, und kassiert dann leise das Einzige, das du nicht zurückbekommst: die Chance, das Ding zu sein, von dem jemand einem Freund erzählt.",[42,964,965],{},[11,966,967],{},"Sich einzufügen ist sicher. Aufzufallen ist riskant. Aber nur das Risiko wird erinnert.",[18,969,971],{"id":970},"den-mut-zur-eigenheit-wagen","Den Mut zur Eigenheit wagen",[11,973,974],{},"Etwas Besonderes zu machen heißt immer, eine Entscheidung zu treffen, die man verteidigen muss. Eine Schrift, mit der niemand gerechnet hat. Ein Layout, das jede Regel kennt und eine mit Absicht bricht. Eine einzige Idee, weit genug getrieben, dass man sie mit keiner anderen verwechseln kann. Das ist unbequem, denn eine echte Entscheidung macht angreifbar. Und genau diese Angreifbarkeit ist das Lebenszeichen einer Seite mit Haltung.",[11,976,977],{},[956,978],{"alt":979,"src":980},"Eine einzige knallgelbe Tür in einer Reihe schlichter weißer Fassaden — das Einzige in der Straße, an das man sich wirklich erinnert.","\u002Fimages\u002Fblog\u002Fcourage\u002Fyellow-door.jpg",[11,982,983],{},"Eine gelbe Tür. Das ist die ganze Idee. Alles drumherum ist in Ordnung, und die Tür ist der einzige Teil, den du später jemandem beschreiben wirst. Aufzufallen braucht fast nie mehr — es braucht eine mutige, konsequente Entscheidung und den Nerv, sie laut zu lassen.",[11,985,986],{},"Ich frage mich bei jedem Projekt dasselbe: Was würde diese Seite tun, wenn sie keine Angst hätte? Meistens ist die ehrliche Antwort genau das, was sie am Ende unverwechselbar macht. Mut ist hier kein Lärm. Es ist kein Effekt auf Effekt, bis die Seite schreit. Mut heißt, das zu zeigen, was wirklich dir gehört, auch im Wissen, dass es nicht jedem gefallen wird — gerade weil es nie versucht hat, es jedem recht zu machen.",[18,988,990],{"id":989},"warum-man-sie-sich-merkt","Warum man sie sich merkt",[11,992,993,994,997],{},"Darum geht es bei all dem eigentlich. Aufmerksamkeit ist das Seltenste im Netz, und du verdienst sie dir nicht, indem du korrekt bist. Du verdienst sie dir, indem du ",[946,995,996],{},"jemand"," bist.",[11,999,1000],{},[956,1001],{"alt":1002,"src":1003},"Menschen drängen sich in einer Galerie vor einem einzigen ausdrucksstarken Gemälde dicht zusammen.","\u002Fimages\u002Fblog\u002Fcourage\u002Fbold-work.jpg",[11,1005,1006],{},"Geh durch irgendeine Galerie und schau, wo sich die Leute sammeln. Es ist nie die sichere Wand. Die Menschen drängen sich um die Arbeit, die sich entschieden hat, etwas zu sein, die eine Position bezogen und gehalten hat. Eine Website mit demselben Nerv tut dasselbe — sie bremst die Leute aus, verdient sich einen zweiten Blick, wird mit den Worten „das musst du sehen\" an einen Freund weitergeschickt.",[11,1008,1009],{},"Eine besondere Website ist am Ende eine Haltung, kein Stil. Sie sagt: Hier hat jemand wirklich etwas gewollt. Das Naheliegende lag auf dem Tisch und wurde abgelehnt; stattdessen wurde das Richtige gejagt. Das ist die Art von Arbeit, für die ich mich entschieden habe, und ehrlich gesagt die einzige, die mir die Mühe wert ist. Bau etwas, das man nicht vergisst, und jedes Risiko, das dich dorthin gebracht hat, zahlt sich von selbst aus.",{"title":70,"searchDepth":71,"depth":71,"links":1011},[1012,1013,1014],{"id":940,"depth":71,"text":941},{"id":970,"depth":71,"text":971},{"id":989,"depth":71,"text":990},"\u002Fimages\u002Fblog\u002Fcourage\u002Fred-white-building.jpg","2026-06-14","Ein kleines Manifest — warum Auffallen besser ist als Sich-Einfügen, und warum es Mut braucht, die Vorlage abzulehnen und etwas Einzigartiges zu wagen.",{},"\u002Fblog\u002Fde\u002Fthe-courage-to-be-different",{"title":929,"description":1017},"blog\u002Fde\u002Fthe-courage-to-be-different",[1023,1024,1025],"Design","Haltung","Kreativität","59j073Ttj0QxwK1YEhEWwBmdqFcjiQJzE-eDn_ey7yQ",{"id":1028,"title":1029,"body":1030,"cover":76,"date":1067,"description":1068,"draft":79,"extension":80,"locale":81,"meta":1069,"navigation":83,"path":1070,"seo":1071,"stem":1072,"tags":1073,"__hash__":1077},"blog\u002Fblog\u002Fde\u002Finteraction-that-delights.md","Interaktion, die Freude macht",{"type":8,"value":1031,"toc":1063},[1032,1035,1039,1042,1045,1050,1054,1057,1060],[11,1033,1034],{},"Manche Websites erinnerst du, weil sie funktioniert haben. Wenige erinnerst du, weil sie dich zum Lächeln gebracht haben. Genau diesen Unterschied suche ich. Eine Seite kann tadellos sein und trotzdem vergessen werden. Was bleibt, ist das Gefühl, dass da jemand war — ein Mensch, der sich Mühe gegeben hat, dir eine kleine Freude zu machen.",[18,1036,1038],{"id":1037},"der-moment-der-überrascht","Der Moment, der überrascht",[11,1040,1041],{},"Ich liebe es, irgendwo in einer Seite etwas zu verstecken, das niemand erwartet. Eine Animation, die nur auftaucht, wenn du an einer ungewöhnlichen Stelle klickst. Ein kleines Rätsel im Footer, das sich löst, wenn man genau hinschaut. Ein Cursor, der mit dem Inhalt spielt, statt nur darüberzuhuschen.",[11,1043,1044],{},"Diese Momente haben keinen Geschäftszweck im engen Sinn. Und doch tun sie genau das, was kein Conversion-Funnel kann: Sie machen die Seite menschlich. Sie sagen leise „hier war jemand mit Humor und Liebe zum Detail\".",[42,1046,1047],{},[11,1048,1049],{},"Funktion gewinnt das Vertrauen. Freude gewinnt das Herz. Eine gute Seite braucht beides.",[18,1051,1053],{"id":1052},"verspielt-aber-nie-aufdringlich","Verspielt, aber nie aufdringlich",[11,1055,1056],{},"Der Schlüssel ist Zurückhaltung. Eine Überraschung, die sich aufdrängt, ist keine Freude, sondern ein Hindernis. Deshalb baue ich Delight immer so, dass er belohnt, ohne zu blockieren. Wer ihn nie findet, verliert nichts. Wer ihn entdeckt, bekommt ein kleines Geschenk.",[11,1058,1059],{},"Praktisch heißt das: Mikrointeraktionen, die auf Berührung reagieren, als wären sie lebendig. Übergänge mit Charakter statt Standard-Easing. Ein Hover, der etwas verrät. Und ja, hin und wieder ein verstecktes kleines Spiel für die Neugierigen — ein Augenzwinkern an alle, die genauer hinschauen.",[11,1061,1062],{},"Das Schöne daran ist, dass diese Details geteilt werden. Niemand schickt einem Freund einen Link mit den Worten „schau, wie schnell diese Seite lädt\". Aber „du musst sehen, was passiert, wenn du hier klickst\" — das passiert ständig. Freude ist die einzige Form von Marketing, die sich wie ein Geschenk anfühlt. Und genau deshalb baue ich sie in jede Seite, die mir wichtig ist.",{"title":70,"searchDepth":71,"depth":71,"links":1064},[1065,1066],{"id":1037,"depth":71,"text":1038},{"id":1052,"depth":71,"text":1053},"2026-06-12","Über die kleinen, überraschenden Momente — versteckte Rätsel, verspielte Details — die eine Website menschlich machen und im Gedächtnis bleiben.",{},"\u002Fblog\u002Fde\u002Finteraction-that-delights",{"title":1029,"description":1068},"blog\u002Fde\u002Finteraction-that-delights",[1074,1075,1076],"Interaktion","UX","Freude","PHFKJkj2v3JesKUCEqLX01ZZTAPbZk31lponMeFiwKw",{"id":1079,"title":1080,"body":1081,"cover":76,"date":1118,"description":1119,"draft":79,"extension":80,"locale":81,"meta":1120,"navigation":83,"path":1121,"seo":1122,"stem":1123,"tags":1124,"__hash__":1126},"blog\u002Fblog\u002Fde\u002Ftranslating-a-brands-feeling.md","Das Gefühl einer Marke übersetzen",{"type":8,"value":1082,"toc":1114},[1083,1086,1090,1093,1096,1101,1105,1108,1111],[11,1084,1085],{},"Jede Marke hat ein Gefühl, bevor sie eine Form hat. Du merkst es im Gespräch, in der Art, wie jemand über seine Arbeit spricht — stolz, leise, verspielt, kompromisslos. Meine eigentliche Aufgabe beginnt nicht am Bildschirm. Sie beginnt damit, dieses Gefühl zu hören und dann in etwas Sichtbares zu übersetzen, das genauso schwingt.",[18,1087,1089],{"id":1088},"zuhören-bevor-ich-gestalte","Zuhören, bevor ich gestalte",[11,1091,1092],{},"Bevor ich eine einzige Farbe wähle, frage ich. Nicht nach Wünschen für die Website, sondern nach der Marke selbst. Wie soll sich jemand fühlen, der geht — nicht der ankommt? Welche drei Worte würdest du nie über dich sagen? Welcher Raum, welche Musik, welcher Stoff fühlt sich nach euch an?",[11,1094,1095],{},"Die Antworten sind selten technisch, und das ist gut. Ein Kunde sagt „warm, aber nicht weich\", ein anderer „präzise wie ein Schweizer Uhrwerk\". Das sind keine Briefings — das sind Kompasse. Ich sammle sie, bis sich ein Klang ergibt, bevor ich überhaupt zeichne.",[42,1097,1098],{},[11,1099,1100],{},"Eine Marke gestaltet man nicht von außen. Man hört ihr zu, bis sie einem sagt, wie sie aussehen will.",[18,1102,1104],{"id":1103},"vom-gefühl-zur-form","Vom Gefühl zur Form",[11,1106,1107],{},"Dann beginnt die Übersetzung. „Warm, aber nicht weich\" wird zu einem gedeckten Ton, der nicht ins Pastellige kippt, zu einer Serifenschrift mit Charakter, aber klaren Kanten, zu Übergängen, die ruhig sind, nie zuckrig. „Präzise wie ein Uhrwerk\" wird zu einem strengen Raster, zu Animationen mit exakter, fast mechanischer Taktung, zu viel Weißraum, der Disziplin ausstrahlt.",[11,1109,1110],{},"Jede Entscheidung lässt sich auf das ursprüngliche Gefühl zurückführen. Das ist mein Prüfstein: Wenn ich nicht erklären kann, warum eine Farbe da ist, gehört sie nicht dahin. Bewegung, Typografie, Struktur — sie sind keine Dekoration, sondern Vokabeln einer Sprache, die nur diese eine Marke spricht.",[11,1112,1113],{},"Wenn es gelingt, passiert etwas Schönes. Der Kunde sieht den Entwurf und sagt nicht „schön\", sondern „ja — genau so fühlt es sich an\". Das ist der Moment, auf den ich hinarbeite. Nicht eine Website, die gut aussieht, sondern eine, die sich anfühlt, als hätte sie schon immer so ausgesehen.",{"title":70,"searchDepth":71,"depth":71,"links":1115},[1116,1117],{"id":1088,"depth":71,"text":1089},{"id":1103,"depth":71,"text":1104},"2026-06-10","Wie ich das Ungreifbare einer Marke in Farbe, Schrift, Bewegung und Struktur übersetze — und warum echtes Zuhören vor jedem Entwurf kommt.",{},"\u002Fblog\u002Fde\u002Ftranslating-a-brands-feeling",{"title":1080,"description":1119},"blog\u002Fde\u002Ftranslating-a-brands-feeling",[1125,1023,90],"Branding","w_QKKQGtdM8oRuv7a5uu70vOcpC-Y03bStrEBmaH5TA",{"id":1128,"title":1129,"body":1130,"cover":76,"date":1167,"description":1168,"draft":79,"extension":80,"locale":81,"meta":1169,"navigation":83,"path":1170,"seo":1171,"stem":1172,"tags":1173,"__hash__":1176},"blog\u002Fblog\u002Fde\u002Fai-and-the-future-of-creativity.md","KI und die Zukunft der Kreativität",{"type":8,"value":1131,"toc":1163},[1132,1135,1139,1142,1145,1150,1154,1157,1160],[11,1133,1134],{},"Ich arbeite seit Jahren mit KI im Studio, und ich kann dir sagen: Sie hat meinen Alltag verändert, aber nicht meine Arbeit. Das klingt widersprüchlich, ist es aber nicht. Sie nimmt mir die Reibung — die zwanzigste Variation eines Buttons, das Boilerplate, den ersten groben Entwurf. Was sie mir nicht nimmt, ist die Entscheidung, was davon es wert ist, gebaut zu werden.",[18,1136,1138],{"id":1137},"was-sich-wirklich-verändert","Was sich wirklich verändert",[11,1140,1141],{},"Die Werkzeuge sind schneller geworden, und das ist gut. Ich kann eine Idee in Minuten ausprobieren, für die ich früher einen Tag gebraucht hätte. Ich kann zehn Richtungen skizzieren, bevor der Kaffee kalt ist. Die KI ist ein unermüdlicher Sparringspartner, der nie müde wird und nie eingeschnappt ist.",[11,1143,1144],{},"Aber sie produziert immer den Durchschnitt von allem, was sie gesehen hat. Und der Durchschnitt ist genau das, was eine herausragende Website nicht sein darf. Wenn alle dasselbe Werkzeug benutzen, wird die Vorlage zur neuen Mittelmäßigkeit.",[42,1146,1147],{},[11,1148,1149],{},"KI macht das Gute leichter erreichbar — und das Besondere dadurch seltener und wertvoller.",[18,1151,1153],{"id":1152},"warum-geschmack-teurer-wird","Warum Geschmack teurer wird",[11,1155,1156],{},"Genau hier liegt die gute Nachricht für jeden, der gestaltet. Wenn das Mittelmäßige umsonst und sofort verfügbar ist, steigt der Wert dessen, was eine Maschine nicht hat: Haltung, Geschichte, Absicht. Die Entscheidung, eine Regel zu brechen, weil sie sich falsch anfühlt. Das Wissen, warum genau dieses Blau und kein anderes. Das Gespür für den Moment, in dem weniger mehr ist.",[11,1158,1159],{},"Geschmack ist keine Datenmenge. Er ist die Summe aus allem, was man gesehen, gefühlt und verworfen hat. Eine KI kann mir einen Vorschlag machen, aber sie kann nicht wollen. Sie hat kein Anliegen. Und eine Website ohne Anliegen ist nur Dekoration.",[11,1161,1162],{},"Ich glaube deshalb nicht, dass KI Kreative ersetzt. Sie ersetzt das Austauschbare. Sie zwingt uns, deutlicher zu sein — persönlicher, mutiger, mehr wir selbst. Für mich ist das keine Bedrohung, sondern eine Einladung. Die Maschine darf den ersten Entwurf machen. Den letzten Strich, den Mut zur Eigenheit, das stille „so und nicht anders\" — den behalte ich.",{"title":70,"searchDepth":71,"depth":71,"links":1164},[1165,1166],{"id":1137,"depth":71,"text":1138},{"id":1152,"depth":71,"text":1153},"2026-06-08","Eine Bestandsaufnahme aus 2026 — was Künstliche Intelligenz verändert, was sie nicht kann, und warum menschlicher Geschmack dadurch wertvoller wird.",{},"\u002Fblog\u002Fde\u002Fai-and-the-future-of-creativity",{"title":1129,"description":1168},"blog\u002Fde\u002Fai-and-the-future-of-creativity",[1174,1025,1175],"KI","Zukunft","cRUpIwgML5UslbF2cRw6STxRD0yVGR8pTLDYvfjJo3U",{"id":1178,"title":1179,"body":1180,"cover":76,"date":1217,"description":1218,"draft":79,"extension":80,"locale":81,"meta":1219,"navigation":83,"path":1220,"seo":1221,"stem":1222,"tags":1223,"__hash__":1226},"blog\u002Fblog\u002Fde\u002Fperformance-meets-poetry.md","Wenn Performance auf Poesie trifft",{"type":8,"value":1181,"toc":1213},[1182,1185,1189,1192,1195,1200,1204,1207,1210],[11,1183,1184],{},"Es gibt einen Moment, den ich an meiner Arbeit liebe: wenn eine Seite das erste Mal lädt und sie sich nicht wie ein Bildschirm anfühlt, sondern wie ein Raum, der sich öffnet. Animationen atmen, Typografie sitzt, alles fügt sich. Und dann kommt die unbequeme Frage, der ich nie ausweiche: Wie schnell war das wirklich?",[18,1186,1188],{"id":1187},"schnelligkeit-ist-respekt","Schnelligkeit ist Respekt",[11,1190,1191],{},"Ich glaube nicht an die alte Erzählung, dass schöne Seiten langsam sein müssen. Das Gegenteil stimmt. Geschwindigkeit ist eine Form von Respekt gegenüber den Menschen, die kommen. Niemand wartet drei Sekunden auf eine Eleganz, die er noch nicht gesehen hat. Die erste Sekunde entscheidet, ob jemand überhaupt bleibt, um die Poesie zu spüren.",[11,1193,1194],{},"Deshalb sind Core Web Vitals für mich keine technische Pflichtübung, sondern Teil der Gestaltung. Ein ruhiger Largest Contentful Paint, ein Layout, das nicht springt, eine Interaktion, die sofort antwortet — das ist nichts anderes als gutes Benehmen, in Code gegossen.",[42,1196,1197],{},[11,1198,1199],{},"Eine Seite, die schön ist, aber langsam, ist ein Versprechen, das zu spät eingelöst wird.",[18,1201,1203],{"id":1202},"optimieren-ohne-die-magie-zu-töten","Optimieren, ohne die Magie zu töten",[11,1205,1206],{},"Die eigentliche Kunst liegt darin, Performance zu gewinnen, ohne dass man es merkt. Ich lade kritisches CSS inline und schiebe den Rest nach hinten. Ich serviere Bilder in modernen Formaten und in genau der Größe, die der Viewport braucht — kein Pixel zu viel. Schriften lade ich mit Bedacht, mit einem Fallback, der die Form schon andeutet, bevor das Original ankommt.",[11,1208,1209],{},"Animationen baue ich so, dass sie auf der GPU laufen und nichts blockieren. Das Schwere kommt erst, wenn es gebraucht wird: ein Three.js-Szene, die lädt, sobald sie ins Bild scrollt, nicht eine Sekunde früher. So bleibt der erste Eindruck leicht, und die Tiefe folgt im richtigen Moment.",[11,1211,1212],{},"Das Ziel ist nie die perfekte Zahl im Lighthouse-Report. Das Ziel ist ein Gefühl: dass die Seite mühelos wirkt. Diese Mühelosigkeit ist erarbeitet — sie ist die unsichtbare Hälfte des Handwerks. Wenn jemand am Ende sagt „Das fühlt sich gut an\", dann steckt darin immer beides: die Poesie, die man sieht, und die Performance, die man nicht sieht. Genau an dieser Naht arbeite ich am liebsten.",{"title":70,"searchDepth":71,"depth":71,"links":1214},[1215,1216],{"id":1187,"depth":71,"text":1188},{"id":1202,"depth":71,"text":1203},"2026-06-05","Warum schöne Websites auch schnell sein müssen — und wie Handwerk und Core Web Vitals zusammenfinden, ohne dass die Magie dabei verloren geht.",{},"\u002Fblog\u002Fde\u002Fperformance-meets-poetry",{"title":1179,"description":1218},"blog\u002Fde\u002Fperformance-meets-poetry",[1224,1023,1225],"Performance","Web","XNh9fqyBtkGoXO3yq5-VO0GS2VpGRVjlOEv_qV3sOtM",{"id":1228,"title":1229,"body":1230,"cover":76,"date":1287,"description":1288,"draft":79,"extension":80,"locale":81,"meta":1289,"navigation":83,"path":1290,"seo":1291,"stem":1292,"tags":1293,"__hash__":1295},"blog\u002Fblog\u002Fde\u002Fdesigning-websites-for-ateliers.md","Websites für Ateliers gestalten",{"type":8,"value":1231,"toc":1283},[1232,1235,1239,1242,1245,1250,1254,1257,1260,1280],[11,1233,1234],{},"Eine Website für ein Atelier ist etwas anderes als eine Website für ein Produkt. Hier verkauft niemand ein Feature. Hier soll ein Gefühl überspringen – die Handschrift, die Stimmung, die Art, wie jemand die Welt sieht. Und das lässt sich nicht in eine Vorlage pressen.",[18,1236,1238],{"id":1237},"ein-gefühl-vermitteln-kein-katalog","Ein Gefühl vermitteln, kein Katalog",[11,1240,1241],{},"Wenn ich für eine Künstlerin oder ein Studio gestalte, frage ich zuerst nicht nach Seiten und Funktionen, sondern nach Atmosphäre. Soll sich der Besuch ruhig anfühlen oder elektrisch? Karg oder üppig? Diese eine Empfindung wird zum Kompass für alles Weitere – für Typografie, Tempo, Weißraum, Farbe.",[11,1243,1244],{},"Denn die Arbeit selbst ist die Botschaft. Meine Aufgabe ist es, ihr eine Bühne zu bauen, die nicht mit ihr konkurriert. Das Beste, was eine solche Seite tun kann, ist oft: sich zurücknehmen.",[42,1246,1247],{},[11,1248,1249],{},"Eine gute Atelier-Website ist wie ein gut gehängter Raum. Man bemerkt nicht die Wände – man bemerkt, dass die Arbeiten endlich atmen.",[18,1251,1253],{"id":1252},"die-arbeit-atmen-lassen","Die Arbeit atmen lassen",[11,1255,1256],{},"Templates scheitern hier aus einem einfachen Grund: Sie sind dafür gemacht, austauschbar zu sein. Ein Atelier ist das Gegenteil. Gerade die Eigenheiten – das Unfertige, das Eigensinnige – sind das, was zählt.",[11,1258,1259],{},"Worauf es für mich ankommt:",[221,1261,1262,1268,1274],{},[224,1263,1264,1267],{},[227,1265,1266],{},"Raum geben"," – großzügiger Weißraum ist kein leerer Platz, sondern Aufmerksamkeit.",[224,1269,1270,1273],{},[227,1271,1272],{},"Tempo drosseln"," – Kunst will betrachtet, nicht überflogen werden.",[224,1275,1276,1279],{},[227,1277,1278],{},"Eigene Details statt Standard"," – ein eigener Cursor, ein eigener Übergang, eine eigene Stimme.",[11,1281,1282],{},"Am Ende geht es nicht darum, eine Website zu bauen, die aussieht wie Kunst. Es geht darum, eine zu bauen, die der Kunst dient – diskret, präzise und mit dem Vertrauen, dass das Werk für sich selbst spricht, wenn man es nur lässt.",{"title":70,"searchDepth":71,"depth":71,"links":1284},[1285,1286],{"id":1237,"depth":71,"text":1238},{"id":1252,"depth":71,"text":1253},"2026-06-01","Was Ateliers, Studios und Künstler von einer Website brauchen – ein Gefühl vermitteln, die Arbeit atmen lassen, Templates vermeiden.",{},"\u002Fblog\u002Fde\u002Fdesigning-websites-for-ateliers",{"title":1229,"description":1288},"blog\u002Fde\u002Fdesigning-websites-for-ateliers",[1294,1023,1225],"Ateliers","OCUMAG8CQ1ZL8jhMOyjlel7q8v8tmbBIrVRe8POUUAM",{"id":1297,"title":1298,"body":1299,"cover":76,"date":1356,"description":1357,"draft":79,"extension":80,"locale":81,"meta":1358,"navigation":83,"path":1359,"seo":1360,"stem":1361,"tags":1362,"__hash__":1365},"blog\u002Fblog\u002Fde\u002Fcreative-coding-as-expression.md","Kreatives Coding als Ausdruck",{"type":8,"value":1300,"toc":1352},[1301,1304,1308,1311,1314,1319,1323,1326,1329,1349],[11,1302,1303],{},"Die meisten sehen Code als Werkzeug: ein Mittel, um etwas zu bauen, das funktioniert. Ich sehe ihn auch als Material – wie Farbe, Ton oder Stein. Etwas, mit dem man nicht nur löst, sondern ausdrückt. Genau dort, wo Code aufhört, bloß nützlich zu sein, beginnt für mich das Interessante.",[18,1305,1307],{"id":1306},"code-als-material","Code als Material",[11,1309,1310],{},"Auf einem Canvas wird ein Bildschirm zur Leinwand. Mit Shadern male ich nicht mit dem Pinsel, sondern mit Mathematik – jeder Pixel eine kleine Berechnung, tausendfach parallel. Generative Systeme geben mir Regeln statt Resultate: Ich beschreibe nicht das Bild, sondern die Bedingungen, unter denen es entsteht. Und dann überrascht mich der Computer.",[11,1312,1313],{},"Das ist der Moment, der mich nie loslässt. Ich schreibe eine Schleife, ein bisschen Zufall, eine Kurve – und etwas erscheint, das ich so nicht geplant hatte und trotzdem als meins erkenne.",[42,1315,1316],{},[11,1317,1318],{},"Bauen heißt, ein Ziel zu erreichen. Erschaffen heißt, sich überraschen zu lassen. Kreatives Coding lebt im Raum dazwischen.",[18,1320,1322],{"id":1321},"vom-lösen-zum-erschaffen","Vom Lösen zum Erschaffen",[11,1324,1325],{},"Der Unterschied ist eine Haltung. Beim Bauen frage ich: Erfüllt es die Anforderung? Beim Erschaffen frage ich: Was passiert, wenn ich das hier verändere? Die zweite Frage hat kein definiertes Ende – und genau das ist die Einladung.",[11,1327,1328],{},"Was kreatives Coding für mich besonders macht:",[221,1330,1331,1337,1343],{},[224,1332,1333,1336],{},[227,1334,1335],{},"Iteration ist sichtbar"," – jede Änderung am Code ist sofort ein anderes Bild.",[224,1338,1339,1342],{},[227,1340,1341],{},"Der Zufall ist ein Mitgestalter"," – kontrolliert eingesetzt, wird er zum Pinselstrich.",[224,1344,1345,1348],{},[227,1346,1347],{},"Die Regel ist das Kunstwerk"," – nicht das einzelne Ergebnis, sondern das System dahinter.",[11,1350,1351],{},"Man muss kein Künstler sein, um so zu programmieren. Man muss nur bereit sein, eine Idee laufen zu lassen, ohne genau zu wissen, wo sie ankommt. Code wird dann zu einer Sprache, in der man nicht nur Probleme löst, sondern Dinge sagt, die sonst keine Form hätten.",{"title":70,"searchDepth":71,"depth":71,"links":1353},[1354,1355],{"id":1306,"depth":71,"text":1307},{"id":1321,"depth":71,"text":1322},"2026-05-25","Code als künstlerisches Medium – Canvas, Shader und generative Systeme als Weg, etwas zu erschaffen, nicht nur zu bauen.",{},"\u002Fblog\u002Fde\u002Fcreative-coding-as-expression",{"title":1298,"description":1357},"blog\u002Fde\u002Fcreative-coding-as-expression",[1363,1025,1364],"Creative Coding","Code","J2MbwbJp75ITBrbcr9Godhkx1KCfGA17CNjQ34iimCs",{"id":1367,"title":1368,"body":1369,"cover":76,"date":1426,"description":1427,"draft":79,"extension":80,"locale":81,"meta":1428,"navigation":83,"path":1429,"seo":1430,"stem":1431,"tags":1432,"__hash__":1435},"blog\u002Fblog\u002Fde\u002Fthe-detail-makes-the-difference.md","Das Detail macht den Unterschied",{"type":8,"value":1370,"toc":1422},[1371,1374,1378,1381,1384,1389,1393,1396,1399,1419],[11,1372,1373],{},"Niemand öffnet eine Website und denkt: „Was für ein schönes Easing.“ Und doch entscheidet genau das, ob sich eine Seite teuer anfühlt oder billig, durchdacht oder zusammengeschoben. Das Detail wird selten bewusst gesehen – aber es wird immer gefühlt.",[18,1375,1377],{"id":1376},"das-unsichtbare-das-man-spürt","Das Unsichtbare, das man spürt",[11,1379,1380],{},"Ein Button, der beim Hover nicht einfach die Farbe wechselt, sondern leicht nachgibt. Ein Übergang, der nicht abrupt schaltet, sondern mit der richtigen Kurve ausklingt. Ein Cursor, der auf den Kontext reagiert. Einzeln ist nichts davon spektakulär. Zusammen ergeben sie etwas, das man nur schwer benennen kann: das Gefühl, dass hier jemand war.",[11,1382,1383],{},"Easing ist dabei mein Lieblingsdetail. Lineare Bewegung wirkt mechanisch, weil nichts in der Natur linear beschleunigt. Eine gut gewählte Kurve – ein sanftes Anlaufen, ein weiches Ausklingen – verleiht digitalen Dingen plötzlich Gewicht und Körper.",[42,1385,1386],{},[11,1387,1388],{},"Qualität versteckt sich in den Millisekunden. Genau dort, wo die meisten aufhören hinzusehen, fängt der Unterschied an.",[18,1390,1392],{"id":1391},"warum-sich-die-mühe-lohnt","Warum sich die Mühe lohnt",[11,1394,1395],{},"Der Einwand liegt nahe: Merkt das überhaupt jemand? Direkt benennen kann es kaum jemand. Aber das Vertrauen, das eine durchgearbeitete Oberfläche auslöst, ist real. Wenn schon der Hover-State stimmt, glaubt man auch dem Rest.",[11,1397,1398],{},"Worauf ich besonders achte:",[221,1400,1401,1407,1413],{},[224,1402,1403,1406],{},[227,1404,1405],{},"Hover-States mit Absicht"," – jede Geste verdient eine Antwort, aber eine ruhige.",[224,1408,1409,1412],{},[227,1410,1411],{},"Konsistentes Easing"," – dieselbe Bewegungssprache über die ganze Seite.",[224,1414,1415,1418],{},[227,1416,1417],{},"Übergänge statt Schnitte"," – Zustände sollten ineinander fließen, nicht springen.",[11,1420,1421],{},"Das Detail ist die Stelle, an der Sorgfalt sichtbar wird – auch wenn niemand sie ausspricht. Es ist der Unterschied zwischen einer Seite, die funktioniert, und einer, die man nicht vergisst. Und dieser Unterschied liegt fast immer dort, wo man ihn nicht erwartet.",{"title":70,"searchDepth":71,"depth":71,"links":1423},[1424,1425],{"id":1376,"depth":71,"text":1377},{"id":1391,"depth":71,"text":1392},"2026-05-18","Über Mikrointeraktionen, Hover-States, Übergänge und Easing – die kleinen Berührungen, die Gutes von Unvergesslichem trennen.",{},"\u002Fblog\u002Fde\u002Fthe-detail-makes-the-difference",{"title":1368,"description":1427},"blog\u002Fde\u002Fthe-detail-makes-the-difference",[1433,1075,1434],"Detail","Handwerk","NKgmzFoG0FRM2cmCO1VfKAZR6ZdMy6znRWc0RWvdyPw",{"id":1437,"title":1438,"body":1439,"cover":76,"date":1607,"description":1608,"draft":79,"extension":80,"locale":81,"meta":1609,"navigation":83,"path":1610,"seo":1611,"stem":1612,"tags":1613,"__hash__":1617},"blog\u002Fblog\u002Fde\u002F3d-im-web.md","Warum 3D im Web Marken auffallen lässt",{"type":8,"value":1440,"toc":1598},[1441,1444,1447,1451,1454,1465,1469,1472,1498,1501,1505,1508,1513,1516,1520,1523,1526,1529,1533,1536,1539,1571,1574,1578,1581,1588,1592,1595],[11,1442,1443],{},"3D im Browser ist längst kein Spielzeug mehr. Mit Three.js und WebGL lassen sich heute Erlebnisse bauen, die früher native Software gebraucht hätten — direkt auf der Website, ohne Installation. Jemand landet auf einer Seite, zieht mit der Maus, und ein Produkt dreht sich in Echtzeit unter echtem Licht. Vor zehn Jahren war das ein Download und ein Ladebalken. Heute ist es ein Link, den du jemandem schicken kannst.",[11,1445,1446],{},"Genau dieser Wechsel ist der Grund, warum Marken mich immer wieder darauf ansprechen. Ein flaches Bild sagt „hier ist das Ding\". Eine 3D-Szene sagt „hier ist das Ding, und es verhält sich so, wie es sich in deiner Hand verhalten würde\". Das Zweite vergisst man schwerer, und schwer zu vergessen zu sein ist ziemlich genau das, wofür eine Marke bezahlt.",[18,1448,1450],{"id":1449},"von-der-tech-demo-zum-werkzeug","Von der Tech-Demo zum Werkzeug",[11,1452,1453],{},"Jahrelang war 3D im Web ein Partytrick. Pro Saison fand man eine beeindruckende Seite, meistens ein Auto oder ein Sneaker-Launch, alle in der Branche teilten sie und bauten danach wieder normale Seiten. Es war teuer, fragil und langsam, und auf der Hälfte der Handys, die Leute tatsächlich benutzten, ging es kaputt.",[11,1455,1456,1457,1460,1461,1464],{},"Das ist leise vorbei. WebGL ist heute überall, die Tools sind reif geworden, und React Three Fiber hat komplexe Szenen wartbar gemacht statt zur einmaligen Heldentat. Die Lücke zwischen „wir könnten 3D machen\" und „wir können an einem Dienstag 3D ausliefern\" hat sich geschlossen, während viele nicht hingeschaut haben. Die interessante Frage ist nicht mehr ",[946,1458,1459],{},"können wir",", sondern ",[946,1462,1463],{},"sollten wir"," — und über die lässt sich viel besser streiten.",[18,1466,1468],{"id":1467},"wann-sich-3d-lohnt","Wann sich 3D lohnt",[11,1470,1471],{},"Nicht jedes Projekt braucht 3D. Aber wenn ein Produkt, ein Raum oder eine Idee schwer in Worten zu fassen ist, kann eine interaktive Szene mehr sagen als zehn Bilder.",[221,1473,1474,1480,1486,1492],{},[224,1475,1476,1479],{},[227,1477,1478],{},"Produkte",", die man drehen und aus jeder Perspektive sehen will. Möbel, Hardware, alles, wo die Form das Verkaufsargument ist und der gewählte Winkel eines Fotografen genauso viel versteckt wie er zeigt.",[224,1481,1482,1485],{},[227,1483,1484],{},"Ateliers und Räume",", die ein Gefühl transportieren sollen. Ein Raum, durch den du dich bewegen kannst, sagt mehr darüber, wie es ist, dort zu sein, als es eine Galerie aus Standbildern je kann.",[224,1487,1488,1491],{},[227,1489,1490],{},"Konfigurierbares",", wo der Kunde ein Material, eine Farbe, ein Layout ändern und das Ergebnis sofort sehen will, statt es sich vorzustellen.",[224,1493,1494,1497],{},[227,1495,1496],{},"Marken",", die zeigen wollen, dass sie anders denken. Manchmal ist das Medium die Botschaft, und ein Studio, das ein durchdachtes 3D-Erlebnis baut, sagt dir etwas darüber, wie es arbeitet, bevor du ein Wort gelesen hast.",[11,1499,1500],{},"Der rote Faden: 3D verdient sich seinen Platz, wenn die dritte Dimension Information trägt. Wenn ein Standbild alles sagt, nimm das Foto. Es lädt schneller, es rankt besser, und niemandes Laptop-Lüfter dreht auf.",[18,1502,1504],{"id":1503},"wann-nicht","Wann nicht",[11,1506,1507],{},"Ich sage den unbeliebten Teil laut. Das meiste 3D auf Marketing-Seiten ist da, weil jemand es bei einem Wettbewerber gesehen hat, nicht weil der Inhalt Tiefe gebraucht hätte. Ein sich drehendes Logo im Hero ist das moderne Äquivalent zum Flash-Intro: technisch beeindruckend, emotional tot, und das Erste, von dem dir die Analytics sagen, dass die Leute es überspringen.",[42,1509,1510],{},[11,1511,1512],{},"Gutes 3D fällt nicht durch Effekte auf, sondern durch das Gefühl, das es hinterlässt.",[11,1514,1515],{},"3D, das existiert, um zu beweisen, dass das Team 3D kann, liest sich immer genau so. Es kostet dich Ladezeit, Akku und Zugänglichkeit, und es gibt ein paar Sekunden „aha, nett\" zurück, bevor jemand weiterscrollt. Wenn du nicht beantworten kannst, „was versteht der Nutzer jetzt, was er aus einem Foto nicht verstanden hätte\", dann dekorierst du, und Deko in dieser Preisklasse ist schwer zu rechtfertigen.",[18,1517,1519],{"id":1518},"das-handwerk-das-keiner-sieht","Das Handwerk, das keiner sieht",[11,1521,1522],{},"Die Sache mit einer guten 3D-Szene: Wenn sie funktioniert, denkt niemand an das 3D. Man denkt an das Produkt, den Raum, die Stimmung. Die Technik verschwindet, und Technik zum Verschwinden zu bringen ist echte Arbeit.",[11,1524,1525],{},"Das meiste davon ist Licht. Ein Modell mit schlechtem Licht sieht aus wie ein Videospiel von 2008; dasselbe Modell mit durchdachtem Licht, weichen Schatten und einer ehrlichen Reflexion sieht aus wie ein Foto, das sich zufällig bewegt. Ich verbringe mehr Zeit mit dem Lichtaufbau und der Environment Map als mit der Geometrie, denn da entscheidet sich im Bauch des Betrachters, ob etwas „billig\" oder „teuer\" wirkt, auch wenn er nicht sagen könnte, warum.",[11,1527,1528],{},"Die Kamera zählt genauso viel. Eine frei kreisende Kamera, mit der man das Modell herumschleudern kann, fühlt sich nach Tech-Demo an. Eine Kamera mit sanften Grenzen, ein bisschen Dämpfung, einem Gespür dafür, wo sie ruhen will, fühlt sich gestaltet an. Zurückhaltung liest sich als Souveränität. Die Szene, die dich weniger tun lässt, das Wenige aber gut anfühlen lässt, schlägt fast immer die, die dir jede Steuerung an den Kopf wirft.",[18,1530,1532],{"id":1531},"performance-ist-das-ganze-spiel","Performance ist das ganze Spiel",[11,1534,1535],{},"Eine schöne Szene, die acht Sekunden zum Erscheinen braucht, ist ein schöner Reinfall. Im Web ist Performance kein letzter Schliff, sondern die Einschränkung, in der du vom ersten Tag an gestaltest.",[11,1537,1538],{},"Die Zahlen, auf die es wirklich ankommt, sind nicht die Polygonzahl, auf die sich alle fixieren. Es sind Draw Calls, Texturspeicher und wie viel du ausliefert, bevor das erste Bild steht. Ein paar praktische Dinge, die ich in jedem Projekt mache:",[221,1540,1541,1547,1553,1559,1565],{},[224,1542,1543,1546],{},[227,1544,1545],{},"Die Geometrie komprimieren."," Draco oder meshopt machen aus einem klobigen Modell etwas, das über eine normale Verbindung ankommt, ohne einen Fortschrittsbalken, über den sich die Leute ärgern.",[224,1548,1549,1552],{},[227,1550,1551],{},"Die Texturen richtig komprimieren."," KTX2 mit Basis heißt, die GPU bekommt ein Format, das sie mag, statt eines riesigen PNGs, das sie in den Speicher entpacken muss und daran erstickt. Texturspeicher, nicht Dreiecke, killt Handys.",[224,1554,1555,1558],{},[227,1556,1557],{},"Mobil zuerst budgetieren."," Die Szene muss auf einem Mittelklasse-Handy in der Bahn gut sein, nicht nur auf meinem Desktop mit dedizierter GPU. Wenn es nur auf meiner Maschine läuft, läuft es nicht.",[224,1560,1561,1564],{},[227,1562,1563],{},"In Etappen laden."," Sofort etwas zeigen, es schärfen, während die Assets ankommen. Ein erst unscharfes, dann scharfes Modell schlägt jedes Mal eine leere Fläche mit Spinner.",[224,1566,1567,1570],{},[227,1568,1569],{},"Aufhören zu rendern, wenn sich nichts bewegt."," Eine Szene, die 60 Bilder pro Sekunde rendert, während sie völlig stillsteht, heizt nur grundlos jemandem den Schoß. Render on Demand, und der Akku bedankt sich.",[11,1572,1573],{},"Nichts davon ist glamourös, und alles davon ist der Unterschied zwischen einer Szene, die begeistert, und einer, die nur lädt.",[18,1575,1577],{"id":1576},"zugänglichkeit-ist-nicht-optional","Zugänglichkeit ist nicht optional",[11,1579,1580],{},"Ein 3D-Erlebnis, das nur für jemanden mit schneller Verbindung, guter GPU, Maus und ohne Bewegungsempfindlichkeit funktioniert, ist nicht fertig. Es ist eine Demo für Leute, die genau so sind wie der, der es gebaut hat.",[11,1582,1583,1584,1587],{},"Also: ein echter Fallback für Browser und Geräte, die es nicht ausführen können oder sollten. ",[604,1585,1586],{},"prefers-reduced-motion"," respektieren und das Ganze für Leute, denen schlecht wird, deutlich beruhigen. Dafür sorgen, dass die eigentliche Information — Produktname, Preis, Beschreibung — in echtem HTML lebt, das eine Suchmaschine und ein Screenreader lesen können, und nicht in einem Canvas gefangen ist, das für beide unsichtbar ist. Das 3D ist die Erlebnisschicht obendrauf. Darunter muss die Seite trotzdem eine Seite sein.",[18,1589,1591],{"id":1590},"was-es-für-eine-marke-wirklich-tut","Was es für eine Marke wirklich tut",[11,1593,1594],{},"Wenn das alles sitzt, ist der Lohn nicht „es sieht cool aus\". Es ist Zeit und Vertrauen. Leute bleiben länger, weil das Ding Aufmerksamkeit belohnt. Sie verstehen das Produkt besser, weil sie es selbst gedreht haben, statt einen gewählten Winkel gezeigt zu bekommen. Und sie gehen mit dem leisen Gefühl, dass dem, der das gemacht hat, die Details wichtig waren — genau der Eindruck, den eine Marke ihr ganzes Budget lang woanders zu kaufen versucht.",[11,1596,1597],{},"Performance, Zugänglichkeit und ein klares Konzept entscheiden, ob eine 3D-Szene begeistert oder nur lädt. Genau da setzt meine Arbeit an. Der WebGL-Teil ist, ehrlich gesagt, der leichte. Zu wissen, ob das Projekt es überhaupt braucht, ist der Teil, für den es sich zu zahlen lohnt.",{"title":70,"searchDepth":71,"depth":71,"links":1599},[1600,1601,1602,1603,1604,1605,1606],{"id":1449,"depth":71,"text":1450},{"id":1467,"depth":71,"text":1468},{"id":1503,"depth":71,"text":1504},{"id":1518,"depth":71,"text":1519},{"id":1531,"depth":71,"text":1532},{"id":1576,"depth":71,"text":1577},{"id":1590,"depth":71,"text":1591},"2026-05-12","Wie interaktive 3D-Erlebnisse im Browser Aufmerksamkeit erzeugen — wann sie sich wirklich lohnen, was sie leicht statt schwer wirken lässt, und das Handwerk, das eine Szene, die man sich merkt, von einer trennt, die nur lädt.",{},"\u002Fblog\u002Fde\u002F3d-im-web",{"title":1438,"description":1608},"blog\u002Fde\u002F3d-im-web",[1614,1615,1616,1023,1224],"3D","WebGL","Three.js","OaUVvqf6PdkU2ciHqDWq1i9-n2kZFSTmsNh0uHplaEI",{"id":1619,"title":1620,"body":1621,"cover":76,"date":1681,"description":1682,"draft":79,"extension":80,"locale":81,"meta":1683,"navigation":83,"path":1684,"seo":1685,"stem":1686,"tags":1687,"__hash__":1689},"blog\u002Fblog\u002Fde\u002Fscroll-experiences-that-captivate.md","Scroll-Erlebnisse, die fesseln",{"type":8,"value":1622,"toc":1677},[1623,1626,1630,1633,1636,1641,1645,1648,1651,1674],[11,1624,1625],{},"Scrollen ist die selbstverständlichste Geste im Web – und genau deshalb die unterschätzteste. Wir behandeln sie meist als reines Vorwärtskommen. Dabei ist sie ein Tempo, das der Nutzer selbst bestimmt. Wer das versteht, hat ein erzählerisches Instrument in der Hand.",[18,1627,1629],{"id":1628},"scrollen-als-erzählung","Scrollen als Erzählung",[11,1631,1632],{},"Eine gute Seite liest sich wie ein gut geschnittener Film. Das Scrollen wird zur Zeitachse: Hier hält die Kamera kurz an, dort gleitet etwas heran, dann öffnet sich der Raum. Pinning friert einen Moment ein, damit er wirken kann. Parallax gibt Tiefe, ohne dass man sie benennen muss. Reveals setzen Akzente – aber nur, wenn sie sparsam bleiben.",[11,1634,1635],{},"Der Fehler liegt fast nie in der Technik. Er liegt im Rhythmus. Wenn jedes Element animiert wird, animiert sich nichts mehr. Bewegung braucht Stille drumherum, damit sie atmen kann.",[42,1637,1638],{},[11,1639,1640],{},"Die beste Scroll-Animation ist die, die niemand bewusst bemerkt – und ohne die sich die Seite plötzlich tot anfühlen würde.",[18,1642,1644],{"id":1643},"zurückhaltung-schlägt-spektakel","Zurückhaltung schlägt Spektakel",[11,1646,1647],{},"Ich frage mich bei jeder Bewegung dasselbe: Trägt sie die Geschichte, oder nur sich selbst? Effekte, die nur beeindrucken wollen, ermüden beim zweiten Besuch. Bewegung, die etwas erklärt, betont oder offenbart, bleibt.",[11,1649,1650],{},"Drei Dinge, an die ich mich halte:",[221,1652,1653,1659,1665],{},[224,1654,1655,1658],{},[227,1656,1657],{},"Tempo respektieren"," – der Nutzer scrollt, nicht die Seite. Animation darf nie gegen seinen Daumen arbeiten.",[224,1660,1661,1664],{},[227,1662,1663],{},"Eine Hauptgeste pro Abschnitt"," – nicht fünf gleichzeitig. Klarheit entsteht durch Auswahl.",[224,1666,1667,1670,1671,1673],{},[227,1668,1669],{},"Reduziert bei Bedarf"," – ",[604,1672,1586],{}," ist kein Sonderfall, sondern Respekt.",[11,1675,1676],{},"Ein Scroll-Erlebnis fesselt nicht durch Lautstärke. Es fesselt, weil es den Betrachter führt, ohne ihn zu schubsen – wie eine gute Hand am Rücken, die nur andeutet, wohin es weitergeht. Das Spektakel beeindruckt für einen Moment. Die Führung bleibt im Gedächtnis.",{"title":70,"searchDepth":71,"depth":71,"links":1678},[1679,1680],{"id":1628,"depth":71,"text":1629},{"id":1643,"depth":71,"text":1644},"2026-05-11","Wie das Scrollen zum erzählerischen Werkzeug wird – mit Pinning, Parallax und Reveal-Timing, getragen von Zurückhaltung statt Spektakel.",{},"\u002Fblog\u002Fde\u002Fscroll-experiences-that-captivate",{"title":1620,"description":1682},"blog\u002Fde\u002Fscroll-experiences-that-captivate",[1688,1075,1225],"Motion","xJa24oCpYdhzsawmAzb4AgUkzyDtWtOnzaPsj-sQJKI",{"id":1691,"title":1692,"body":1693,"cover":76,"date":1753,"description":1754,"draft":79,"extension":80,"locale":81,"meta":1755,"navigation":83,"path":1756,"seo":1757,"stem":1758,"tags":1759,"__hash__":1762},"blog\u002Fblog\u002Fde\u002Fai-assisted-prototyping.md","KI-gestütztes Prototyping",{"type":8,"value":1694,"toc":1749},[1695,1698,1702,1705,1708,1713,1717,1720,1723,1743,1746],[11,1696,1697],{},"Die ehrlichste Phase eines jeden Projekts ist die erste. Bevor irgendetwas schön ist, ist alles noch unscharf: zu viele Richtungen, zu wenig Gewissheit. Genau hier hat KI für mich am meisten verändert – nicht am Ende, wo der Feinschliff sitzt, sondern am Anfang, wo das Suchen passiert.",[18,1699,1701],{"id":1700},"schneller-durch-das-ungewisse","Schneller durch das Ungewisse",[11,1703,1704],{},"Früher habe ich Tage damit verbracht, drei oder vier Richtungen so weit auszuarbeiten, dass man sie überhaupt vergleichen konnte. Heute lasse ich mir Varianten skizzieren, Platzhaltertexte erzeugen, ein erstes Grundgerüst aufstellen – in Minuten statt in Stunden. Das ist kein Ersatz für Gestaltung. Es ist ein Beschleuniger für das Verwerfen.",[11,1706,1707],{},"Denn das ist der eigentliche Wert: Ich sehe schneller, was nicht funktioniert. Eine Idee, die auf dem Bildschirm steht, lässt sich beurteilen. Eine Idee im Kopf bleibt verführerisch lange gut.",[42,1709,1710],{},[11,1711,1712],{},"KI macht mich nicht kreativer. Sie macht das Falsche schneller sichtbar – und gibt mir die Zeit zurück, das Richtige wirklich zu bauen.",[18,1714,1716],{"id":1715},"wo-das-handwerk-beginnt","Wo das Handwerk beginnt",[11,1718,1719],{},"Sobald die Richtung steht, lege ich die Werkzeuge zur Seite. Das Scaffold, das mir die KI gegeben hat, ist nie das Ergebnis – es ist die Leinwand. Die Übergänge, das Timing, die eine Hover-Geste, die sich richtig anfühlt: Das entsteht von Hand, und das soll es auch.",[11,1721,1722],{},"Mein Workflow sieht heute so aus:",[221,1724,1725,1731,1737],{},[224,1726,1727,1730],{},[227,1728,1729],{},"Erkunden"," – mehrere Richtungen grob anlegen, ohne mich zu verlieben.",[224,1732,1733,1736],{},[227,1734,1735],{},"Aussortieren"," – das Schwache früh erkennen und gehen lassen.",[224,1738,1739,1742],{},[227,1740,1741],{},"Vertiefen"," – die eine überlebende Idee mit voller Aufmerksamkeit bauen.",[11,1744,1745],{},"Die ersten beiden Schritte sind heute halb so lang. Der dritte ist länger geworden – und das ist genau der Punkt. Die gewonnene Zeit fließt nicht in mehr Projekte, sondern in mehr Tiefe pro Projekt.",[11,1747,1748],{},"KI ist für mich kein Designer und kein Entwickler. Sie ist ein ungeduldiger Skizzenblock, der nie müde wird. Was daraus etwas Eigenes macht, kommt immer noch von der Hand, die entscheidet, was bleibt.",{"title":70,"searchDepth":71,"depth":71,"links":1750},[1751,1752],{"id":1700,"depth":71,"text":1701},{"id":1715,"depth":71,"text":1716},"2026-05-04","Wie KI die chaotische Anfangsphase eines Projekts beschleunigt, damit mehr Zeit für das eigentliche Handwerk bleibt – das, was zählt.",{},"\u002Fblog\u002Fde\u002Fai-assisted-prototyping",{"title":1692,"description":1754},"blog\u002Fde\u002Fai-assisted-prototyping",[1174,1760,1761],"Prototyping","Workflow","L5Dq_RgRADmwleq3IJxuCewWv8UTSrm2bs7kBkqXwc8",{"id":1764,"title":1765,"body":1766,"cover":76,"date":1803,"description":1804,"draft":79,"extension":80,"locale":81,"meta":1805,"navigation":83,"path":1806,"seo":1807,"stem":1808,"tags":1809,"__hash__":1811},"blog\u002Fblog\u002Fde\u002Fcolor-that-creates-memory.md","Farbe, die in Erinnerung bleibt",{"type":8,"value":1767,"toc":1799},[1768,1771,1775,1778,1781,1786,1790,1793,1796],[11,1769,1770],{},"Manche Marken kannst du an einer einzigen Farbe erkennen, noch bevor du ein Wort liest. Ein bestimmtes Türkis, ein sattes Rot, ein unmögliches Orange. Das ist kein Zufall, sondern Disziplin. Farbe ist das Schnellste, was eine Website kommuniziert — schneller als Schrift, schneller als Bild. Sie trifft dich, bevor du verstehst, warum.",[18,1772,1774],{"id":1773},"zurückhaltung-erzeugt-identität","Zurückhaltung erzeugt Identität",[11,1776,1777],{},"Der Reflex vieler ist, möglichst viele Farben zu nutzen, um lebendig zu wirken. Das Gegenteil stimmt. Eine Palette wird einprägsam durch das, was sie weglässt. Ich arbeite meist mit einem ruhigen Fundament — Tönen, die kaum auffallen, viel Weißraum, eine Basis, die atmet — und genau einem Akzent, der trägt. Diese eine Signaturfarbe bekommt die ganze Aufmerksamkeit, weil sie nicht mit zehn anderen konkurriert.",[11,1779,1780],{},"Ein Akzent funktioniert nur, wenn er selten ist. Wenn alles bunt ist, sticht nichts heraus. Tauchst du dieselbe kräftige Farbe in jeden Button, jede Überschrift, jeden Rahmen, verliert sie ihre Kraft. Sparsam gesetzt — auf dem einen Button, der zählt — wird sie zum visuellen Echo, das man mit der Marke verbindet.",[42,1782,1783],{},[11,1784,1785],{},"Eine Marke wird nicht durch viele Farben erinnert, sondern durch eine, die sie konsequent besitzt.",[18,1787,1789],{"id":1788},"kontrast-und-stimmung","Kontrast und Stimmung",[11,1791,1792],{},"Farbe ist nie nur Dekoration, sie ist Emotion. Warme Töne ziehen heran, kühle schaffen Distanz und Klarheit, ein gedämpfter Verlauf wirkt anders als ein gesättigter Block. Ich wähle eine Palette nicht danach, was hübsch aussieht, sondern danach, wie sie sich anfühlen soll — souverän, verspielt, ernst, zart. Die Stimmung ist die eigentliche Botschaft.",[11,1794,1795],{},"Und Kontrast ist dabei kein bloßes technisches Detail, sondern ein Gestaltungsmittel. Genug Kontrast, damit jeder Text mühelos lesbar bleibt — das ist Respekt vor dem Menschen davor. Aber auch der bewusste Kontrast zwischen Ruhe und Akzent, der dem Auge zeigt, wohin es schauen soll. Gut gesetzte Farbe führt, ohne zu schreien.",[11,1797,1798],{},"Am Ende bleibt Farbe der direkteste Weg ins Gedächtnis. Wähle eine, besitze sie, setze sie mit Disziplin — und Wochen später erinnert sich jemand an deine Marke, ohne genau sagen zu können, warum. Genau das ist das Ziel.",{"title":70,"searchDepth":71,"depth":71,"links":1800},[1801,1802],{"id":1773,"depth":71,"text":1774},{"id":1788,"depth":71,"text":1789},"2026-04-27","Farbe als Identität und Emotion — über Zurückhaltung, einen unverwechselbaren Akzent, Kontrast und die Stimmung, die haften bleibt.",{},"\u002Fblog\u002Fde\u002Fcolor-that-creates-memory",{"title":1765,"description":1804},"blog\u002Fde\u002Fcolor-that-creates-memory",[1810,1023,1125],"Farbe","Y-yuAFgzeYEmLm-Y81o7XUEysmPlEDoi-GlXvxbO7mM",{"id":1813,"title":1814,"body":1815,"cover":76,"date":1852,"description":1853,"draft":79,"extension":80,"locale":81,"meta":1854,"navigation":83,"path":1855,"seo":1856,"stem":1857,"tags":1858,"__hash__":1859},"blog\u002Fblog\u002Fde\u002Ffirst-impressions-hero-sections.md","Der erste Eindruck: Hero-Sektionen",{"type":8,"value":1816,"toc":1848},[1817,1820,1824,1827,1830,1835,1839,1842,1845],[11,1818,1819],{},"Du hast ungefähr drei Sekunden. So lange dauert es, bis jemand entscheidet, ob er bleibt oder weiterzieht. Die Hero-Sektion — der erste Bildschirm, den man sieht — trägt diese ganze Last. Sie ist der Händedruck deiner Website, und einen schlechten ersten Eindruck korrigiert kein noch so gutes Untermenü.",[18,1821,1823],{"id":1822},"eine-idee-klar-gesagt","Eine Idee, klar gesagt",[11,1825,1826],{},"Der häufigste Fehler ist, alles auf einmal sagen zu wollen. Drei Botschaften, fünf Buttons, ein Slider, der vier Versprechen durchblättert. Das Ergebnis: Der Blick findet keinen Halt und gleitet ab. Eine starke Hero-Sektion behauptet eine einzige Sache — und behauptet sie deutlich. Was bist du, für wen, und warum sollte es mich kümmern? Wenn ich das in einem Satz nicht lesen kann, ist der Entwurf noch nicht fertig.",[11,1828,1829],{},"Klarheit heißt nicht Nüchternheit. Es heißt Mut zur Reduktion. Eine große, selbstbewusste Überschrift, ein ruhiger Untertitel, ein einziger klarer nächster Schritt. Alles andere darf warten. Was du weglässt, ist genauso gestaltet wie das, was du zeigst.",[42,1831,1832],{},[11,1833,1834],{},"Eine Hero-Sektion, die alles sagt, sagt nichts. Eine, die eine Sache sagt, bleibt hängen.",[18,1836,1838],{"id":1837},"atmosphäre-die-trägt","Atmosphäre, die trägt",[11,1840,1841],{},"Klarheit zieht den Blick an, Atmosphäre hält ihn fest. Hier entscheidet sich, ob eine Seite generisch oder unverwechselbar wirkt: in der Bildwahl, im Raum zwischen den Elementen, in einer Bewegung, die sich beim Laden sanft entfaltet, in einer Farbe, die sofort eine Stimmung setzt. Das ist der Unterschied zwischen einer Seite, die funktioniert, und einer, die man fühlt.",[11,1843,1844],{},"Bewegung setze ich dabei sparsam ein. Ein langsames Erscheinen, eine kaum merkliche Tiefe beim Scrollen — Dinge, die Lebendigkeit andeuten, ohne sich aufzudrängen. Und so verführerisch ein Effekt auch ist: Wenn er die Botschaft verdeckt oder das Laden verzögert, fliegt er raus. Atmosphäre dient der Idee, nie umgekehrt.",[11,1846,1847],{},"Eine gute Hero-Sektion ist am Ende ein Versprechen, das der Rest der Seite einlöst. Sie sagt in Sekunden, wer du bist und wie es sich anfühlt, mit dir zu arbeiten. Wenn dieser erste Bildschirm sitzt, hast du dir die nächsten dreißig verdient.",{"title":70,"searchDepth":71,"depth":71,"links":1849},[1850,1851],{"id":1822,"depth":71,"text":1823},{"id":1837,"depth":71,"text":1838},"2026-04-15","Wie ich Hero-Sektionen gestalte, die in Sekunden fesseln — Klarheit, Atmosphäre und eine einzige starke Idee statt überladener Versprechen.",{},"\u002Fblog\u002Fde\u002Ffirst-impressions-hero-sections",{"title":1814,"description":1853},"blog\u002Fde\u002Ffirst-impressions-hero-sections",[1023,1075,1225],"9h3-W8ER3e-hecmFKWOjVKIgZRtBdBA4V-1R147Fjdw",{"id":1861,"title":1862,"body":1863,"cover":76,"date":1900,"description":1901,"draft":79,"extension":80,"locale":81,"meta":1902,"navigation":83,"path":1903,"seo":1904,"stem":1905,"tags":1906,"__hash__":1908},"blog\u002Fblog\u002Fde\u002Fgenerative-design.md","Generative Gestaltung",{"type":8,"value":1864,"toc":1896},[1865,1868,1872,1875,1878,1883,1887,1890,1893],[11,1866,1867],{},"Es gibt einen Moment in der generativen Gestaltung, den ich liebe: Ich schreibe eine Regel, lasse sie laufen — und sehe etwas, das ich selbst nie von Hand entworfen hätte. Nicht weil die Maschine klüger ist, sondern weil ich ihr erlaubt habe, mich zu überraschen. Generatives Arbeiten heißt für mich, nicht das Bild zu zeichnen, sondern das System, das Bilder zeichnet.",[18,1869,1871],{"id":1870},"regeln-statt-pinselstriche","Regeln statt Pinselstriche",[11,1873,1874],{},"Ich gestalte hier kein einzelnes Ergebnis, sondern einen Raum von Möglichkeiten. Ein paar Linien Code beschreiben, wie Formen wachsen, wie Farben sich verteilen, wie Linien sich überlagern. Das eigentliche Handwerk steckt im Formulieren dieser Regeln — präzise genug, dass ein Ergebnis Bestand hat, offen genug, dass jeder Durchlauf eigen bleibt.",[11,1876,1877],{},"Der Zufall ist dabei kein Chaos, sondern ein dosierter Mitspieler. Ein wenig Rauschen auf einer Position, eine zufällige Wahl aus einer kuratierten Palette, eine Variation der Strichstärke. Zu viel Zufall wird Matsch, zu wenig wird mechanisch. Die Kunst liegt in der Spanne dazwischen — dort, wo das Ergebnis lebendig wirkt, ohne beliebig zu sein.",[42,1879,1880],{},[11,1881,1882],{},"Ich entwerfe nicht das Bild. Ich entwerfe die Bedingungen, unter denen schöne Bilder entstehen können.",[18,1884,1886],{"id":1885},"den-zufall-kuratieren","Den Zufall kuratieren",[11,1888,1889],{},"Ein System zu bauen ist die eine Hälfte. Die andere ist, hartnäckig auszusortieren. Ich lasse Hunderte Varianten laufen und betrachte sie wie ein Fotograf seine Kontaktabzüge — die meisten verwerfe ich, einige wenige treffen genau den Nerv. Das Urteil bleibt menschlich. Der Generator schlägt vor; ich entscheide, was Kunst wird und was Ausschuss.",[11,1891,1892],{},"Für meine Kunden bedeutet das etwas sehr Konkretes: eine Identität, die nicht aus einem starren Logo besteht, sondern aus einem lebendigen System. Ein Muster, das auf jeder Karte anders aussieht und doch immer dieselbe Handschrift trägt. Ein Heldenbild, das sich bei jedem Laden neu erfindet. Unverwechselbar, weil unendlich, und doch eindeutig, weil von denselben Regeln geboren.",[11,1894,1895],{},"Generative Gestaltung ist für mich die schönste Form der Zusammenarbeit mit der Maschine. Sie verlangt, dass ich loslasse, ohne die Kontrolle aufzugeben — dass ich Absicht in Regeln übersetze und dann staunen darf über das, was zurückkommt.",{"title":70,"searchDepth":71,"depth":71,"links":1897},[1898,1899],{"id":1870,"depth":71,"text":1871},{"id":1885,"depth":71,"text":1886},"2026-04-06","Wie ich Code und Zufall als Gestaltungspartner einsetze — Regeln, die überraschende, organische und unverwechselbare Bilder hervorbringen.",{},"\u002Fblog\u002Fde\u002Fgenerative-design",{"title":1862,"description":1901},"blog\u002Fde\u002Fgenerative-design",[1907,1025,1364],"Generativ","ccqiFFo-U8lcJAo3Fxbk04FTsTC-EMSJd07xllyfAAg",{"id":1910,"title":1911,"body":1912,"cover":76,"date":1946,"description":1947,"draft":79,"extension":80,"locale":81,"meta":1948,"navigation":83,"path":1949,"seo":1950,"stem":1951,"tags":1952,"__hash__":1953},"blog\u002Fblog\u002Fde\u002Fdesign-fuer-ateliers.md","Websites für Ateliers, die auffallen wollen",{"type":8,"value":1913,"toc":1942},[1914,1917,1921,1924,1935,1939],[11,1915,1916],{},"Ateliers, Studios und kreative Marken haben ein Problem mit Standard-Baukästen: Sie sehen aus\nwie alle anderen. Dabei ist das Besondere genau das, was verkauft.",[18,1918,1920],{"id":1919},"haltung-vor-funktionen","Haltung vor Funktionen",[11,1922,1923],{},"Eine gute Website beginnt nicht mit einer Feature-Liste, sondern mit einer Frage: Was soll\njemand fühlen, wenn er ankommt?",[221,1925,1926,1929,1932],{},[224,1927,1928],{},"Großzügiger Raum statt vollgestopfter Seiten",[224,1930,1931],{},"Eine klare, eigene Designsprache",[224,1933,1934],{},"Inhalte, die für sich sprechen",[18,1936,1938],{"id":1937},"schnell-verlässlich-fair","Schnell, verlässlich, fair",[11,1940,1941],{},"Besonderes Design heißt nicht teuer oder langsam. Mit klaren Stufen und transparenter\nKommunikation weißt du von Anfang an, woran du bist — und bekommst trotzdem etwas, das\nsich nicht nach Vorlage anfühlt.",{"title":70,"searchDepth":71,"depth":71,"links":1943},[1944,1945],{"id":1919,"depth":71,"text":1920},{"id":1937,"depth":71,"text":1938},"2026-04-03","Was eine Atelier-Website von einer Vorlage unterscheidet — und warum Haltung wichtiger ist als Funktionen.",{},"\u002Fblog\u002Fde\u002Fdesign-fuer-ateliers",{"title":1911,"description":1947},"blog\u002Fde\u002Fdesign-fuer-ateliers",[1023,1294,1125],"nPz72ESstt7mS45Q0v2brFOr8bWBmldIFIZvPnE2q4k",{"id":1955,"title":1956,"body":1957,"cover":76,"date":1994,"description":1995,"draft":79,"extension":80,"locale":81,"meta":1996,"navigation":83,"path":1997,"seo":1998,"stem":1999,"tags":2000,"__hash__":2002},"blog\u002Fblog\u002Fde\u002Fai-as-a-tool-not-a-replacement.md","KI als Werkzeug, nicht als Ersatz",{"type":8,"value":1958,"toc":1990},[1959,1962,1966,1969,1972,1977,1981,1984,1987],[11,1960,1961],{},"2026 ist KI kein Versprechen mehr und auch kein Schreckgespenst. Sie ist einfach Teil meines Werkzeugkastens — wie der Editor, das Terminal, das Skizzenbuch. Und wie bei jedem Werkzeug entscheidet nicht das Werkzeug über das Ergebnis, sondern die Hand, die es führt. Genau darüber möchte ich ehrlich sprechen.",[18,1963,1965],{"id":1964},"wofür-sie-mir-wirklich-hilft","Wofür sie mir wirklich hilft",[11,1967,1968],{},"KI ist großartig im Anfangen. Der leere Bildschirm, der so oft lähmt, ist mit ihr kein Problem mehr. Ich lasse mir zwanzig Richtungen für ein Konzept umreißen, generiere Boilerplate, den ich sonst gedankenlos abtippe, und kläre eine fremde API in Minuten statt Stunden. Sie schreibt mir den Test, an den ich nicht denken wollte, und benennt mir das Pattern, das mir auf der Zunge lag.",[11,1970,1971],{},"Das ist echte Zeit, die ich gewinne. Aber es ist immer nur der erste Entwurf — Rohmaterial, kein Ergebnis. Die KI gibt mir den Durchschnitt aus allem, was es schon gibt. Und Durchschnitt ist das genaue Gegenteil von dem, wofür man mich bucht.",[42,1973,1974],{},[11,1975,1976],{},"KI bringt dich schneller zur ersten Version. Zur richtigen bringt dich nur dein Urteil.",[18,1978,1980],{"id":1979},"was-menschlich-bleibt","Was menschlich bleibt",[11,1982,1983],{},"Geschmack lässt sich nicht prompten. Die Entscheidung, dass ein Layout zu brav ist, dass eine Farbe eine Spur zu freundlich wirkt, dass dieser eine Satz besser gestrichen gehört — das ist Urteil, gewachsen aus Jahren des Hinschauens. Die KI hat keine Absicht. Sie weiß nicht, was diese eine Marke einzigartig macht oder warum dieser Kunde nachts wach liegt. Ich weiß es.",[11,1985,1986],{},"Deshalb hat sich meine Rolle verschoben, aber nicht verkleinert. Ich bin weniger der, der jede Zeile von Hand setzt, und mehr der Kurator, der Regisseur, der die Richtung vorgibt und gnadenlos aussortiert. Die KI verzehnfacht meine Optionen — und macht damit meinen Geschmack wichtiger, nicht überflüssig.",[11,1988,1989],{},"Wer KI als Ersatz für Können benutzt, produziert glatte, vergessliche Arbeit. Wer sie als Verstärker des eigenen Handwerks begreift, baut schneller und mutiger als je zuvor. Das Werkzeug ist neu. Die eigentliche Arbeit — verstehen, entscheiden, verantworten — ist es nicht. Und genau das bleibt unsere.",{"title":70,"searchDepth":71,"depth":71,"links":1991},[1992,1993],{"id":1964,"depth":71,"text":1965},{"id":1979,"depth":71,"text":1980},"2026-03-30","Ein ehrlicher Blick auf KI im Design- und Entwicklungsalltag 2026 — schnelle Assistenz für Entwürfe und Boilerplate, aber Geschmack und Absicht bleiben menschlich.",{},"\u002Fblog\u002Fde\u002Fai-as-a-tool-not-a-replacement",{"title":1956,"description":1995},"blog\u002Fde\u002Fai-as-a-tool-not-a-replacement",[1174,2001,1025],"Werkzeuge","1b4FNzYp2gI-Jx2bxS9AVbzIdforqmIqDhlZZFphI74",{"id":2004,"title":2005,"body":2006,"cover":76,"date":2043,"description":2044,"draft":79,"extension":80,"locale":81,"meta":2045,"navigation":83,"path":2046,"seo":2047,"stem":2048,"tags":2049,"__hash__":2051},"blog\u002Fblog\u002Fde\u002Ftypography-that-stands-out.md","Typografie, die auffällt",{"type":8,"value":2007,"toc":2039},[2008,2011,2015,2018,2021,2026,2030,2033,2036],[11,2009,2010],{},"Wenn du dich an eine Website erinnerst, erinnerst du dich fast immer zuerst an ihre Schrift. Nicht an das Logo, nicht an die Farbe — an die Stimme, mit der die Seite zu dir gesprochen hat. Schrift ist für mich die lauteste Entscheidung im ganzen Entwurf, auch wenn sie sich leise gibt. Sie legt den Ton fest, bevor das erste Wort gelesen ist.",[18,2012,2014],{"id":2013},"eine-schrift-mit-haltung-wählen","Eine Schrift mit Haltung wählen",[11,2016,2017],{},"Die meisten Seiten wirken austauschbar, weil ihre Typografie austauschbar ist. Eine sichere Sans, eine sichere Größe, fertig. Ich gehe anders heran: Ich suche zuerst eine Display-Schrift, die etwas behauptet. Eine kantige Grotesk, eine eigenwillige Serif, eine Schrift mit einem Buchstaben, der hängenbleibt. Sie darf Charakter haben, sie darf sogar ein wenig unbequem sein — denn auffallen heißt, eine Entscheidung zu treffen, die nicht jeder treffen würde.",[11,2019,2020],{},"Der Fließtext spielt die Gegenrolle. Hier zählt Ruhe, Lesbarkeit, eine Schrift, die sich zurücknimmt und stundenlang trägt. Das Spannungsverhältnis aus mutigem Display und sachlichem Body ist das eigentliche Geheimnis: Der eine Teil schreit, der andere flüstert, und genau dadurch hört man beiden zu.",[42,2022,2023],{},[11,2024,2025],{},"Eine Schrift, die nichts riskiert, wird auch nichts in Erinnerung lassen.",[18,2027,2029],{"id":2028},"paaren-kontrastieren-atmen-lassen","Paaren, kontrastieren, atmen lassen",[11,2031,2032],{},"Beim Kombinieren suche ich nicht nach Harmonie, sondern nach produktivem Kontrast. Zwei Schriften, die sich zu ähnlich sind, wirken wie ein Fehler. Zwei, die sich klar unterscheiden — in Bauweise, Strichstärke, Temperament —, ergänzen sich. Eine geometrische Display über einer humanistischen Sans. Eine fette Serif über einer schmalen Grotesk. Der Unterschied muss eindeutig sein, nicht zaghaft.",[11,2034,2035],{},"Dann gebe ich der Schrift Raum. Eine große Überschrift mit viel Weißraum drumherum wirkt teurer und selbstbewusster als jeder Effekt. Ich arbeite mit dramatischen Größensprüngen statt mit drei Abstufungen, die sich kaum unterscheiden. Ich justiere Laufweite, Zeilenhöhe und optische Ausrichtung, bis jede Zeile sitzt. Das sind Stunden, die niemand bewusst sieht — und die jeder spürt.",[11,2037,2038],{},"Auffallende Typografie ist kein Trick und kein Trend. Sie ist eine Form von Mut, gestützt durch Handwerk. Du wählst eine Stimme, statt dich hinter dem Naheliegenden zu verstecken, und du beherrschst die Details so genau, dass dieser Mut nicht laut, sondern überzeugend klingt. Genau dort beginnt für mich eine Seite, die sich von tausend anderen abhebt.",{"title":70,"searchDepth":71,"depth":71,"links":2040},[2041,2042],{"id":2013,"depth":71,"text":2014},{"id":2028,"depth":71,"text":2029},"2026-03-16","Wie ich ausdrucksstarke Schriften wähle und kombiniere — Display gegen Fließtext, Schrift als die lauteste Gestaltungsentscheidung einer Seite.",{},"\u002Fblog\u002Fde\u002Ftypography-that-stands-out",{"title":2005,"description":2044},"blog\u002Fde\u002Ftypography-that-stands-out",[2050,1023,1225],"Typografie","6PeExV-QcBRkeqc2WutNF8VwwAj1rCl1Gqsb3PSnAvo",{"id":2053,"title":2054,"body":2055,"cover":76,"date":2107,"description":2108,"draft":79,"extension":80,"locale":81,"meta":2109,"navigation":83,"path":2110,"seo":2111,"stem":2112,"tags":2113,"__hash__":2114},"blog\u002Fblog\u002Fde\u002Fshader-poetry-in-the-browser.md","Shader-Poesie im Browser",{"type":8,"value":2056,"toc":2103},[2057,2060,2064,2067,2081,2086,2090,2097,2100],[11,2058,2059],{},"Ein Fragment-Shader ist das vielleicht poetischste Stück Code, das ich kenne. Er läuft für jeden einzelnen Pixel gleichzeitig, weiß nichts von seinen Nachbarn und doch entsteht aus dieser radikalen Einsamkeit ein zusammenhängendes Bild. Eine kleine Funktion, ein paar Variablen — und plötzlich fließt eine ganze Welt über den Bildschirm.",[18,2061,2063],{"id":2062},"wenig-code-unendliche-welten","Wenig Code, unendliche Welten",[11,2065,2066],{},"Das Faszinierende an Shadern ist ihr Verhältnis von Aufwand zu Ergebnis. Mit einer Handvoll Zeilen Noise-Funktion, einem Farbverlauf und der Zeit als Variable lässt sich Nebel erzeugen, der nie zweimal gleich aussieht. Kein Asset, kein Video, kein Megabyte — nur Mathematik, die sich Bild für Bild neu berechnet.",[11,2068,2069,2070,2073,2074,2073,2077,2080],{},"Genau das meine ich mit Poesie. Ein Gedicht sagt mit wenigen Worten mehr, als eine Seite Prosa je könnte. Ein Shader tut dasselbe mit Code. ",[604,2071,2072],{},"sin",", ",[604,2075,2076],{},"fract",[604,2078,2079],{},"mix",", ein bisschen Perlin-Noise — das ist das Vokabular, und die Kombinationen sind grenzenlos.",[42,2082,2083],{},[11,2084,2085],{},"Ein Shader ist kein Bild, das man speichert. Er ist eine Regel, nach der Schönheit immer wieder neu geboren wird.",[18,2087,2089],{"id":2088},"zeit-als-material","Zeit als Material",[11,2091,2092,2093,2096],{},"Was Shader lebendig macht, ist die Zeit. Sobald ich ",[604,2094,2095],{},"u_time"," in eine Funktion gebe, hört das Bild auf, ein Standbild zu sein, und wird zu einem Fluss. Verläufe wandern, Noise verschiebt sich, Farben atmen. Diese sanfte, endlose Veränderung wirkt organisch — sie erinnert an Wasser, an Rauch, an Licht, das durch Blätter fällt.",[11,2098,2099],{},"In der Praxis nutze ich Shader behutsam: als ruhigen, lebenden Hintergrund, als Übergang zwischen Bildern, als Textur, die einer Fläche Tiefe gibt. Sie sollen nie schreien. Ihre Stärke ist das Unterschwellige — dieses kaum merkliche Wabern, das eine Seite warm und lebendig wirken lässt, ohne dass man sagen könnte, warum.",[11,2101,2102],{},"Shader zu schreiben fühlt sich für mich weniger nach Programmieren an und mehr nach Malen mit Mathematik. Man stellt eine Gleichung auf und schaut, welche Welt aus ihr hervorkommt. Manchmal ist es Chaos. Und manchmal, wenn die Zahlen stimmen, entsteht etwas, das man nicht geplant hatte und das trotzdem genau richtig ist.",{"title":70,"searchDepth":71,"depth":71,"links":2104},[2105,2106],{"id":2062,"depth":71,"text":2063},{"id":2088,"depth":71,"text":2089},"2026-03-03","Fragment-Shader als Medium für generative Schönheit — über Noise, Verläufe, Zeit und wie wenige Zeilen Code unendliche Welten öffnen.",{},"\u002Fblog\u002Fde\u002Fshader-poetry-in-the-browser",{"title":2054,"description":2108},"blog\u002Fde\u002Fshader-poetry-in-the-browser",[575,1615,1025],"HnxjQ7cxdApkOxHs3PllWLqQ5EVLcagQmuVHr-Qx01g",{"id":2116,"title":2117,"body":2118,"cover":76,"date":2155,"description":2156,"draft":79,"extension":80,"locale":81,"meta":2157,"navigation":83,"path":2158,"seo":2159,"stem":2160,"tags":2161,"__hash__":2162},"blog\u002Fblog\u002Fde\u002Fthreejs-as-an-artistic-tool.md","Three.js als künstlerisches Werkzeug",{"type":8,"value":2119,"toc":2151},[2120,2123,2127,2130,2133,2138,2142,2145,2148],[11,2121,2122],{},"Die meisten Three.js-Demos, die ich sehe, leiden am selben Problem: Sie wollen beweisen, was möglich ist, statt etwas zu fühlen. Rotierende Würfel, glänzende Kugeln, ein Partikelsturm — technisch beeindruckend, emotional leer. Ich sehe Three.js anders. Für mich ist es ein Pinsel, kein Feuerwerk.",[18,2124,2126],{"id":2125},"licht-macht-die-stimmung","Licht macht die Stimmung",[11,2128,2129],{},"Bevor ich eine einzige Geometrie platziere, denke ich über Licht nach. Ein einzelnes weiches Licht, das von der Seite fällt, erzählt eine völlig andere Geschichte als ein flaches, gleichmäßiges Setup. Licht ist im 3D-Raum dasselbe wie in der Fotografie — es entscheidet über Atmosphäre, über Dramatik, über das Gefühl. Eine matte Oberfläche, die das Licht weich verschluckt, wirkt ruhig und teuer. Eine spiegelnde, die es zurückwirft, wirkt scharf und wach.",[11,2131,2132],{},"Material ist die zweite Hälfte dieser Sprache. Ein physikalisch basiertes Material mit der richtigen Rauheit fühlt sich wie ein echtes Objekt an, auch wenn die Form abstrakt bleibt. Diese Glaubwürdigkeit ist es, die Tiefe emotional macht statt bloß räumlich.",[42,2134,2135],{},[11,2136,2137],{},"3D im Web ist nicht beeindruckend, weil es dreidimensional ist. Es ist beeindruckend, wenn es etwas in mir auslöst, das flache Pixel nicht können.",[18,2139,2141],{"id":2140},"tiefe-im-dienst-der-emotion","Tiefe im Dienst der Emotion",[11,2143,2144],{},"Der Mehrwert von Three.js ist nicht der dritte Dimension um ihrer selbst willen, sondern das Gefühl von Präsenz. Ein Objekt, das sich beim Scrollen langsam dreht und dabei sein Licht verändert, zieht den Blick anders an als jedes statische Bild. Es lebt. Es reagiert. Diese stille Reaktivität schafft eine Beziehung zwischen Besucher und Seite.",[11,2146,2147],{},"Praktisch halte ich es schlicht: wenige Objekte, sorgfältige Komposition, eine begrenzte Palette, dezente Bewegung. Performance ist Teil der Ästhetik — ein ruckelndes Erlebnis zerstört jede Stimmung, also optimiere ich Geometrie, Schatten und Pixelratio kompromisslos.",[11,2149,2150],{},"Am Ende frage ich mich immer dasselbe: Würde diese Szene auch als stillstehendes Standbild berühren? Wenn ja, ist die Komposition richtig. Die Bewegung und Interaktivität sind dann nicht der Trick, sondern die letzte Schicht — der Moment, in dem ein Bild zu atmen beginnt.",{"title":70,"searchDepth":71,"depth":71,"links":2152},[2153,2154],{"id":2125,"depth":71,"text":2126},{"id":2140,"depth":71,"text":2141},"2026-02-20","Three.js nicht als Spielerei, sondern als Pinsel — wie Licht, Material und Tiefe im Dienst der Emotion stehen können.",{},"\u002Fblog\u002Fde\u002Fthreejs-as-an-artistic-tool",{"title":2117,"description":2156},"blog\u002Fde\u002Fthreejs-as-an-artistic-tool",[1616,1614,1025],"8VzTfAZR4ZcN5sesGK5f7nN9OsinKnYQLDVieC-O7x0",{"id":2164,"title":2165,"body":2166,"cover":76,"date":2206,"description":2207,"draft":79,"extension":80,"locale":81,"meta":2208,"navigation":83,"path":2209,"seo":2210,"stem":2211,"tags":2212,"__hash__":2213},"blog\u002Fblog\u002Fde\u002Fmotion-that-carries-meaning.md","Bewegung, die Bedeutung trägt",{"type":8,"value":2167,"toc":2202},[2168,2171,2175,2178,2181,2186,2190,2193,2199],[11,2169,2170],{},"Es gibt zwei Arten von Animation im Web. Die eine will gesehen werden — sie hüpft, blinkt und schreit „schau mich an\". Die andere will verstanden werden. Sie erklärt, beruhigt und führt, ohne dass man sie als Effekt wahrnimmt. Ich interessiere mich fast ausschließlich für die zweite.",[18,2172,2174],{"id":2173},"bewegung-ist-sprache","Bewegung ist Sprache",[11,2176,2177],{},"Wenn ein Menü aufklappt, sagt mir die Art, wie es sich öffnet, woher es kommt und wohin es gehört. Ein Element, das aus dem Button hervorwächst, in dem ich gerade geklickt habe, schafft eine räumliche Logik, die mein Gehirn sofort versteht. Bewegung kann Kausalität zeigen: Das hier führte zu jenem. Genau das ist gute Choreografie — nicht Dekoration, sondern Erklärung.",[11,2179,2180],{},"Das Geheimnis liegt im Easing. Lineare Bewegung gibt es in der echten Welt nicht; alles beschleunigt und bremst. Eine sanfte Ease-out-Kurve fühlt sich an wie etwas, das natürlich zur Ruhe kommt. Diese eine Kurve entscheidet darüber, ob eine Animation billig oder edel wirkt.",[42,2182,2183],{},[11,2184,2185],{},"Die beste Animation bemerkt niemand. Man fühlt nur, dass sich etwas richtig angefühlt hat.",[18,2187,2189],{"id":2188},"zurückhaltung-als-stil","Zurückhaltung als Stil",[11,2191,2192],{},"Mehr Bewegung ist fast nie besser. Ich frage mich bei jeder Animation: Was tut sie für den Nutzer? Hilft sie, etwas zu verstehen? Überbrückt sie eine Wartezeit? Lenkt sie sanft den Blick? Wenn die Antwort „sie sieht cool aus\" lautet, fliegt sie meistens raus.",[11,2194,2195,2196,2198],{},"Praktisch heißt das: kurze Dauern, oft zwischen 200 und 400 Millisekunden. Gestaffeltes Timing, damit Listen wie ein geordneter Atemzug erscheinen statt wie ein Schwarm. Und immer ein ",[604,2197,1586],{},"-Pfad, denn Eleganz schließt Rücksicht ein.",[11,2200,2201],{},"Choreografie ist das Wort, das ich am liebsten benutze. Eine Seite ist eine kleine Bühne, und jedes Element hat einen Einsatz. Wenn alles im richtigen Moment erscheint, in der richtigen Reihenfolge, mit der richtigen Kurve, dann entsteht etwas, das sich lebendig anfühlt — ohne unruhig zu sein. Bewegung, die Bedeutung trägt, ist Bewegung, die dient.",{"title":70,"searchDepth":71,"depth":71,"links":2203},[2204,2205],{"id":2173,"depth":71,"text":2174},{"id":2188,"depth":71,"text":2189},"2026-02-09","Animation mit Absicht — über Easing, Choreografie und Zurückhaltung, und wie Bewegung führt, statt abzulenken.",{},"\u002Fblog\u002Fde\u002Fmotion-that-carries-meaning",{"title":2165,"description":2207},"blog\u002Fde\u002Fmotion-that-carries-meaning",[1688,1075,1023],"Nb88pg8vrScOP8fsM9cu8fsFWe7nePS6uJ8MBo0hmV4",{"id":2215,"title":2216,"body":2217,"cover":76,"date":2254,"description":2255,"draft":79,"extension":80,"locale":81,"meta":2256,"navigation":83,"path":2257,"seo":2258,"stem":2259,"tags":2260,"__hash__":2263},"blog\u002Fblog\u002Fde\u002Fwhitespace-as-a-design-tool.md","Weißraum als Gestaltungsmittel",{"type":8,"value":2218,"toc":2250},[2219,2222,2226,2229,2232,2237,2241,2244,2247],[11,2220,2221],{},"Anfänger fragen, wie sie eine Seite füllen. Gestalter fragen, was sie weglassen können. Weißraum — oder besser: Negativraum, denn er muss nicht weiß sein — ist für mich kein Rest, der übrig bleibt. Er ist ein eigenes Material, so präsent wie Typografie oder Farbe.",[18,2223,2225],{"id":2224},"raum-ist-nicht-leer","Raum ist nicht leer",[11,2227,2228],{},"Wenn ich um ein einzelnes Bild herum großzügig Luft lasse, sage ich dem Auge: Das hier ist wichtig. Schau hin. Negativraum ist Aufmerksamkeitslenkung in ihrer reinsten Form. Er erzeugt Pausen, und Pausen erzeugen Bedeutung. Ein Wort allein auf einer Seite wiegt schwerer als zehn Worte im Gedränge.",[11,2230,2231],{},"Es gibt einen Grund, warum Luxusmarken so viel Raum verschwenden. Raum signalisiert Selbstbewusstsein. Wer nicht jeden Pixel füllen muss, hat nichts zu beweisen. Diese stille Souveränität überträgt sich auf die Marke — und auf das Gefühl des Besuchers.",[42,2233,2234],{},[11,2235,2236],{},"Weißraum ist nicht der Hintergrund der Gestaltung. Er ist die Gestaltung, die atmet.",[18,2238,2240],{"id":2239},"die-disziplin-des-weglassens","Die Disziplin des Weglassens",[11,2242,2243],{},"In der Praxis ist Zurückhaltung das Schwerste. Es gibt immer einen Stakeholder, der noch ein Element unterbringen will, noch einen Button, noch einen Hinweis. Mein Job ist es, zu schützen, was ich schon gebaut habe — den Raum zu verteidigen wie eine inhaltliche Entscheidung.",[11,2245,2246],{},"Ich arbeite mit großzügigen Außenabständen, die mit der Bildschirmgröße mitwachsen, mit Innenabständen, die immer eine Spur größer sind, als sich „nötig\" anfühlt, und mit einem konsequenten Spacing-System, das Ruhe rhythmisch macht. Weißraum funktioniert nur, wenn er bewusst und wiederholbar ist — willkürliche Lücken wirken wie Fehler, geplante Lücken wirken wie Luxus.",[11,2248,2249],{},"Und das Schöne: Ruhe ist anstrengungslos erlebbar. Eine Seite mit Raum lädt zum Verweilen ein, statt zu überfordern. Sie respektiert die Aufmerksamkeit des Besuchers, statt sie zu zerreiben. Wenn ich eine Website verlasse und mich entspannter fühle als vorher, dann hat der Negativraum seine Arbeit getan — leise, unsichtbar und genau deshalb so wirkungsvoll.",{"title":70,"searchDepth":71,"depth":71,"links":2251},[2252,2253],{"id":2224,"depth":71,"text":2225},{"id":2239,"depth":71,"text":2240},"2026-01-26","Negativer Raum ist kein Leerstand, sondern ein aktives Element — wie Zurückhaltung Fokus, Luxus und Ruhe in eine Website bringt.",{},"\u002Fblog\u002Fde\u002Fwhitespace-as-a-design-tool",{"title":2216,"description":2255},"blog\u002Fde\u002Fwhitespace-as-a-design-tool",[1023,2261,2262],"Layout","Ästhetik","0xlt7yBxKRRgkYCiqF9Wa51AEpMgaI-IaM5ET7tACN4",{"id":2265,"title":2266,"body":2267,"cover":76,"date":2304,"description":2305,"draft":79,"extension":80,"locale":81,"meta":2306,"navigation":83,"path":2307,"seo":2308,"stem":2309,"tags":2310,"__hash__":2312},"blog\u002Fblog\u002Fde\u002Fthe-art-of-the-editorial-website.md","Die Kunst der editorialen Website",{"type":8,"value":2268,"toc":2300},[2269,2272,2276,2279,2282,2287,2291,2294,2297],[11,2270,2271],{},"Wenn ich eine neue Website beginne, schlage ich zuerst kein Wireframe-Tool auf. Ich blättere durch Magazine. Durch die Art, wie ein Vogue-Spread atmet, wie eine Doppelseite eine Geschichte über drei Spalten hinweg führt, wie ein einzelnes großes Wort eine ganze Seite tragen kann. Editoriales Denken ist für mich kein Stil — es ist eine Haltung gegenüber Aufmerksamkeit.",[18,2273,2275],{"id":2274},"eine-seite-ist-ein-versprechen","Eine Seite ist ein Versprechen",[11,2277,2278],{},"Ein gutes Magazin behandelt deine Zeit als kostbar. Es entscheidet für dich, was zuerst wichtig ist, was danach kommt, wo du verweilen darfst. Genau das tue ich mit Typografie und Raum. Eine Überschrift in 96 Pixeln ist keine Dekoration — sie ist eine Ansage. Eine Bildunterschrift in zarter Kursive ist ein Flüstern. Zwischen beiden liegt eine Hierarchie, die das Auge führt, ohne dass jemand es merkt.",[11,2280,2281],{},"Die meisten Websites scheitern nicht an fehlenden Inhalten, sondern an fehlender Reihenfolge. Alles schreit gleich laut. Editoriales Layout heißt: Mut zur Dominanz. Ein Element gewinnt, der Rest dient.",[42,2283,2284],{},[11,2285,2286],{},"Eine Seite, die alles betont, betont nichts. Gestaltung ist die Kunst, das Wichtige laut und das Übrige leise zu machen.",[18,2288,2290],{"id":2289},"rhythmus-statt-raster","Rhythmus statt Raster",[11,2292,2293],{},"Raster sind ein Werkzeug, kein Gefängnis. Ich liebe ein strenges Baseline-Grid — und dann breche ich es bewusst, lasse ein Bild über den Rand laufen, ziehe eine Zeile in den Weißraum hinein. Dieser kontrollierte Bruch erzeugt Rhythmus. So wie ein Musikstück Pausen braucht, braucht eine Seite Momente der Spannung und der Ruhe.",[11,2295,2296],{},"Praktisch heißt das bei mir: großzügige Zeilenhöhe, ein modularer Type-Scale mit klaren Sprüngen, Spalten, die sich beim Scrollen verschieben. Ich denke in Spreads, nicht in Sektionen. Jeder Abschnitt soll sich anfühlen, als hätte ihn jemand gesetzt — nicht als wäre er in ein Template gefallen.",[11,2298,2299],{},"Das Schönste daran: Editoriale Websites altern langsamer. Trends kommen und gehen, aber eine klare Hierarchie, eine selbstbewusste Typografie und ehrlicher Raum wirken in zehn Jahren noch. Es ist Handwerk, das man sieht, ohne es benennen zu können — und genau dieses leise „Das ist gut gemacht\" ist das Ziel jeder Seite, die ich baue.",{"title":70,"searchDepth":71,"depth":71,"links":2301},[2302,2303],{"id":2274,"depth":71,"text":2275},{"id":2289,"depth":71,"text":2290},"2026-01-12","Warum ich Websites wie Magazinseiten denke — mit Hierarchie, Rhythmus, großer Typografie und bewusstem Raum, der echtes Handwerk spürbar macht.",{},"\u002Fblog\u002Fde\u002Fthe-art-of-the-editorial-website",{"title":2266,"description":2305},"blog\u002Fde\u002Fthe-art-of-the-editorial-website",[1023,2311,1225],"Editorial","4h53XMAi5bU3VDfpMeREQh9h2kk7wQMIownMf1TplCQ",{"id":2314,"title":2315,"body":2316,"cover":76,"date":2576,"description":2577,"draft":79,"extension":80,"locale":81,"meta":2578,"navigation":83,"path":2579,"seo":2580,"stem":2581,"tags":2582,"__hash__":2585},"blog\u002Fblog\u002Fde\u002Fnextjs-14-server-actions.md","Next.js 14: Server Actions in der Praxis",{"type":8,"value":2317,"toc":2572},[2318,2321,2325,2332,2532,2543,2548,2552,2563,2566,2569],[11,2319,2320],{},"Vor einem Jahr habe ich über den App Router geschrieben und vieles als spannend, aber unfertig bezeichnet. Mit Next.js 14 ist ein Stück davon erwachsen geworden: Server Actions sind nun stabil. Ich habe sie in den letzten Wochen in echten Projekten eingesetzt, und sie verändern, wie ich über Datenmutationen denke.",[18,2322,2324],{"id":2323},"mutationen-ohne-umweg","Mutationen ohne Umweg",[11,2326,2327,2328,2331],{},"Bisher lief jede schreibende Operation über eine API-Route. Ein Formular schickte seine Daten an einen Endpunkt, dieser validierte, schrieb in die Datenbank und antwortete — und ich pflegte am Ende zwei getrennte Welten: das Frontend und die API dazwischen. Server Actions schließen diese Lücke. Ich schreibe eine Funktion, markiere sie mit ",[604,2329,2330],{},"\"use server\"",", und sie läuft garantiert auf dem Server.",[654,2333,2337],{"className":2334,"code":2335,"language":2336,"meta":70,"style":70},"language-jsx shiki shiki-themes github-light github-dark","async function speichern(formData) {\n  \"use server\";\n  const name = formData.get(\"name\");\n  await db.kontakt.create({ data: { name } });\n  revalidatePath(\"\u002Fkontakte\");\n}\n\nexport default function Formular() {\n  return (\n    \u003Cform action={speichern}>\n      \u003Cinput name=\"name\" \u002F>\n      \u003Cbutton type=\"submit\">Speichern\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  );\n}\n","jsx",[604,2338,2339,2360,2368,2393,2407,2419,2424,2428,2444,2452,2470,2487,2511,2521,2527],{"__ignoreMap":70},[662,2340,2341,2344,2347,2350,2353,2357],{"class":664,"line":665},[662,2342,2343],{"class":690},"async",[662,2345,2346],{"class":690}," function",[662,2348,2349],{"class":680}," speichern",[662,2351,2352],{"class":676},"(",[662,2354,2356],{"class":2355},"s4XuR","formData",[662,2358,2359],{"class":676},") {\n",[662,2361,2362,2365],{"class":664,"line":71},[662,2363,2364],{"class":672},"  \"use server\"",[662,2366,2367],{"class":676},";\n",[662,2369,2370,2373,2376,2379,2382,2385,2387,2390],{"class":664,"line":742},[662,2371,2372],{"class":690},"  const",[662,2374,2375],{"class":668}," name",[662,2377,2378],{"class":690}," =",[662,2380,2381],{"class":676}," formData.",[662,2383,2384],{"class":680},"get",[662,2386,2352],{"class":676},[662,2388,2389],{"class":672},"\"name\"",[662,2391,2392],{"class":676},");\n",[662,2394,2395,2398,2401,2404],{"class":664,"line":748},[662,2396,2397],{"class":690},"  await",[662,2399,2400],{"class":676}," db.kontakt.",[662,2402,2403],{"class":680},"create",[662,2405,2406],{"class":676},"({ data: { name } });\n",[662,2408,2409,2412,2414,2417],{"class":664,"line":754},[662,2410,2411],{"class":680},"  revalidatePath",[662,2413,2352],{"class":676},[662,2415,2416],{"class":672},"\"\u002Fkontakte\"",[662,2418,2392],{"class":676},[662,2420,2421],{"class":664,"line":765},[662,2422,2423],{"class":676},"}\n",[662,2425,2426],{"class":664,"line":770},[662,2427,745],{"emptyLinePlaceholder":83},[662,2429,2430,2433,2436,2438,2441],{"class":664,"line":776},[662,2431,2432],{"class":690},"export",[662,2434,2435],{"class":690}," default",[662,2437,2346],{"class":690},[662,2439,2440],{"class":680}," Formular",[662,2442,2443],{"class":676},"() {\n",[662,2445,2446,2449],{"class":664,"line":784},[662,2447,2448],{"class":690},"  return",[662,2450,2451],{"class":676}," (\n",[662,2453,2454,2457,2461,2464,2467],{"class":664,"line":789},[662,2455,2456],{"class":676},"    \u003C",[662,2458,2460],{"class":2459},"s9eBZ","form",[662,2462,2463],{"class":680}," action",[662,2465,2466],{"class":690},"=",[662,2468,2469],{"class":676},"{speichern}>\n",[662,2471,2472,2475,2478,2480,2482,2484],{"class":664,"line":795},[662,2473,2474],{"class":676},"      \u003C",[662,2476,2477],{"class":2459},"input",[662,2479,2375],{"class":680},[662,2481,2466],{"class":690},[662,2483,2389],{"class":672},[662,2485,2486],{"class":676}," \u002F>\n",[662,2488,2490,2492,2495,2498,2500,2503,2506,2508],{"class":664,"line":2489},12,[662,2491,2474],{"class":676},[662,2493,2494],{"class":2459},"button",[662,2496,2497],{"class":680}," type",[662,2499,2466],{"class":690},[662,2501,2502],{"class":672},"\"submit\"",[662,2504,2505],{"class":676},">Speichern\u003C\u002F",[662,2507,2494],{"class":2459},[662,2509,2510],{"class":676},">\n",[662,2512,2514,2517,2519],{"class":664,"line":2513},13,[662,2515,2516],{"class":676},"    \u003C\u002F",[662,2518,2460],{"class":2459},[662,2520,2510],{"class":676},[662,2522,2524],{"class":664,"line":2523},14,[662,2525,2526],{"class":676},"  );\n",[662,2528,2530],{"class":664,"line":2529},15,[662,2531,2423],{"class":676},[11,2533,2534,2535,2538,2539,2542],{},"Das ",[604,2536,2537],{},"action","-Attribut des Formulars nimmt die Funktion direkt entgegen. Kein ",[604,2540,2541],{},"fetch",", kein Endpunkt, kein manuelles Serialisieren. Und das Schöne: Es funktioniert auch ohne JavaScript im Browser, weil es auf dem Web-Standard der Formulare aufbaut. Progressive Enhancement, ohne dass ich extra dafür arbeite.",[42,2544,2545],{},[11,2546,2547],{},"Die beste Abstraktion ist die, die eine ganze Schicht überflüssig macht — nicht die, die noch eine hinzufügt.",[18,2549,2551],{"id":2550},"was-sich-in-der-praxis-bewährt","Was sich in der Praxis bewährt",[11,2553,2554,2555,2558,2559,2562],{},"In echten Projekten schätze ich vor allem ",[604,2556,2557],{},"revalidatePath"," und ",[604,2560,2561],{},"revalidateTag",". Nach einer Mutation sage ich Next.js gezielt, welche Daten veraltet sind, und der Cache erneuert sich von selbst. Kein manuelles Nachladen, kein verwaister Zustand im Client.",[11,2564,2565],{},"Ehrlich gesagt brauchte es etwas Disziplin, die Grenze sauber zu ziehen. Server Actions sind kein Allheilmittel — für komplexe, mehrstufige Flows oder öffentliche Schnittstellen greife ich weiter zu echten Endpunkten. Und Validierung gehört zwingend auf den Server, denn der Client lügt grundsätzlich.",[11,2567,2568],{},"Aber für das, was ich am häufigsten baue — Formulare, kleine Mutationen, der ganz normale Alltag einer Anwendung —, fühlen sich Server Actions richtig an. Sie entfernen eine Schicht, die ich nie geliebt habe. Das ist die Art von Fortschritt, die ich mag: weniger Code, der mehr sagt.",[848,2570,2571],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":70,"searchDepth":71,"depth":71,"links":2573},[2574,2575],{"id":2323,"depth":71,"text":2324},{"id":2550,"depth":71,"text":2551},"2023-10-26","Mit Next.js 14 sind Server Actions stabil — und ich kann Mutationen endlich ohne separate API-Routen schreiben, direkt dort, wo sie gebraucht werden.",{},"\u002Fblog\u002Fde\u002Fnextjs-14-server-actions",{"title":2315,"description":2577},"blog\u002Fde\u002Fnextjs-14-server-actions",[2583,2584,1225],"Next.js","React","6xTq5JV5hrpJK01KpqqFJbf7hC7EApy9nitsuDHRZ4M",{"id":2587,"title":2588,"body":2589,"cover":76,"date":2626,"description":2627,"draft":79,"extension":80,"locale":81,"meta":2628,"navigation":83,"path":2629,"seo":2630,"stem":2631,"tags":2632,"__hash__":2633},"blog\u002Fblog\u002Fde\u002Fthe-craft-of-typography.md","Das Handwerk der Typografie",{"type":8,"value":2590,"toc":2622},[2591,2594,2598,2601,2604,2609,2613,2616,2619],[11,2592,2593],{},"Wenn ich ein Layout öffne und es wirkt ruhig, selbstverständlich, fast unsichtbar gut — dann steckt fast immer durchdachte Typografie dahinter. Sie ist die unscheinbarste Disziplin im Design und zugleich die folgenreichste. Denn am Ende lesen Menschen Text, nicht Farbflächen. Die Schrift ist die Stimme, in der eine Marke spricht.",[18,2595,2597],{"id":2596},"skala-und-rhythmus-geben-halt","Skala und Rhythmus geben Halt",[11,2599,2600],{},"Ein editoriales Design lebt von seiner Hierarchie. Was lese ich zuerst, was danach, was nur, wenn ich tiefer eintauche? Diese Reihenfolge baue ich mit einer typografischen Skala — einer überschaubaren Auswahl an Größen, die in einem klaren Verhältnis zueinander stehen. Nicht beliebig gewählt, sondern aus einem Verhältnis abgeleitet, das sich durch das ganze Werk zieht.",[11,2602,2603],{},"Genauso wichtig ist der vertikale Rhythmus. Zeilenabstand, Absatzabstände, die Luft über und unter einer Überschrift — all das bildet ein unsichtbares Raster, das den Blick führt. Stimmt der Rhythmus, fühlt sich eine Seite an wie Atmen. Stimmt er nicht, spürt der Leser eine Unruhe, die er selten benennen kann.",[42,2605,2606],{},[11,2607,2608],{},"Gute Typografie merkt man nicht. Man merkt nur, dass das Lesen leicht fällt.",[18,2610,2612],{"id":2611},"kontrast-und-absicht","Kontrast und Absicht",[11,2614,2615],{},"Kontrast ist mein wichtigstes Werkzeug, um Bedeutung zu zeigen. Nicht nur hell gegen dunkel, sondern groß gegen klein, fett gegen mager, eine schmale Versalzeile gegen einen ruhigen Mengentext. Kontrast schafft Spannung, und Spannung schafft Aufmerksamkeit. Doch er funktioniert nur, wenn er sparsam und bewusst gesetzt wird — wo alles laut ist, hört niemand mehr zu.",[11,2617,2618],{},"Bei der Wahl der Schriften lasse ich mich nicht von Moden treiben, sondern von Absicht. Welche Stimmung soll der Text tragen? Eine humanistische Serife wirkt anders als eine geometrische Grotesk, eine alte Antiqua trägt Jahrhunderte mit sich. Oft genügen ein, zwei Schriften, wenn ich ihre Schnitte wirklich ausreize. Mehr Vielfalt bedeutet selten mehr Qualität.",[11,2620,2621],{},"Typografie ist für mich am Ende kein Effekt, sondern Respekt — vor dem Inhalt und vor dem Menschen, der ihn liest. Sie ist das Handwerk, das man am wenigsten sieht und am stärksten spürt. Und genau deshalb verbringe ich so viel Zeit mit ihr.",{"title":70,"searchDepth":71,"depth":71,"links":2623},[2624,2625],{"id":2596,"depth":71,"text":2597},{"id":2611,"depth":71,"text":2612},"2023-08-09","Typografie ist für mich das Rückgrat jedes editorialen Designs — eine Frage von Skala, Rhythmus und Kontrast, die man mit Absicht setzt, nicht zufällig.",{},"\u002Fblog\u002Fde\u002Fthe-craft-of-typography",{"title":2588,"description":2627},"blog\u002Fde\u002Fthe-craft-of-typography",[2050,1023,1434],"TSYta4081sg56v_31-aVJ0jcdqp-QSyU8MSxCfKQK5w",{"id":2635,"title":2636,"body":2637,"cover":76,"date":2819,"description":2820,"draft":79,"extension":80,"locale":81,"meta":2821,"navigation":83,"path":2822,"seo":2823,"stem":2824,"tags":2825,"__hash__":2826},"blog\u002Fblog\u002Fde\u002Fthreejs-performance.md","Three.js-Performance: flüssig auf jedem Gerät",{"type":8,"value":2638,"toc":2815},[2639,2642,2646,2649,2654,2661,2780,2791,2795,2802,2809,2812],[11,2640,2641],{},"Eine 3D-Szene, die auf meinem Entwicklungsrechner mit 120 Bildern pro Sekunde läuft, sagt mir wenig. Die ehrliche Frage lautet: Wie verhält sie sich auf dem drei Jahre alten Smartphone eines Kunden? Aus den Projekten der letzten Jahre habe ich gelernt, dass Performance in Three.js selten eine Frage roher Rechenkraft ist — sondern eine des Maßhaltens.",[18,2643,2645],{"id":2644},"weniger-draw-calls-mehr-ruhe","Weniger Draw Calls, mehr Ruhe",[11,2647,2648],{},"Der größte Hebel sind fast immer die Draw Calls. Jedes Mesh, das einzeln gezeichnet wird, kostet die CPU einen Gesprächsgang zur GPU. Tausend einzelne Objekte bedeuten tausend dieser Gespräche pro Bild — und genau hier brechen mobile Geräte ein.",[42,2650,2651],{},[11,2652,2653],{},"Performance ist selten ein einzelner Trick. Sie ist die Summe vieler kleiner Entscheidungen, die man von Anfang an mitdenkt.",[11,2655,2656,2657,2660],{},"Wenn ich dieselbe Geometrie hundertfach brauche — Bäume, Partikel, Bausteine — greife ich zu ",[604,2658,2659],{},"InstancedMesh",". Aus hundert Draw Calls wird einer.",[654,2662,2666],{"className":2663,"code":2664,"language":2665,"meta":70,"style":70},"language-js shiki shiki-themes github-light github-dark","const mesh = new THREE.InstancedMesh(geometry, material, 1000);\nconst matrix = new THREE.Matrix4();\nfor (let i = 0; i \u003C 1000; i++) {\n  matrix.setPosition(positions[i]);\n  mesh.setMatrixAt(i, matrix);\n}\n","js",[604,2667,2668,2697,2718,2754,2765,2776],{"__ignoreMap":70},[662,2669,2670,2673,2676,2678,2681,2684,2687,2689,2692,2695],{"class":664,"line":665},[662,2671,2672],{"class":690},"const",[662,2674,2675],{"class":668}," mesh",[662,2677,2378],{"class":690},[662,2679,2680],{"class":690}," new",[662,2682,2683],{"class":668}," THREE",[662,2685,2686],{"class":676},".",[662,2688,2659],{"class":680},[662,2690,2691],{"class":676},"(geometry, material, ",[662,2693,2694],{"class":668},"1000",[662,2696,2392],{"class":676},[662,2698,2699,2701,2704,2706,2708,2710,2712,2715],{"class":664,"line":71},[662,2700,2672],{"class":690},[662,2702,2703],{"class":668}," matrix",[662,2705,2378],{"class":690},[662,2707,2680],{"class":690},[662,2709,2683],{"class":668},[662,2711,2686],{"class":676},[662,2713,2714],{"class":680},"Matrix4",[662,2716,2717],{"class":676},"();\n",[662,2719,2720,2723,2726,2729,2732,2734,2737,2740,2743,2746,2749,2752],{"class":664,"line":742},[662,2721,2722],{"class":690},"for",[662,2724,2725],{"class":676}," (",[662,2727,2728],{"class":690},"let",[662,2730,2731],{"class":676}," i ",[662,2733,2466],{"class":690},[662,2735,2736],{"class":668}," 0",[662,2738,2739],{"class":676},"; i ",[662,2741,2742],{"class":690},"\u003C",[662,2744,2745],{"class":668}," 1000",[662,2747,2748],{"class":676},"; i",[662,2750,2751],{"class":690},"++",[662,2753,2359],{"class":676},[662,2755,2756,2759,2762],{"class":664,"line":748},[662,2757,2758],{"class":676},"  matrix.",[662,2760,2761],{"class":680},"setPosition",[662,2763,2764],{"class":676},"(positions[i]);\n",[662,2766,2767,2770,2773],{"class":664,"line":754},[662,2768,2769],{"class":676},"  mesh.",[662,2771,2772],{"class":680},"setMatrixAt",[662,2774,2775],{"class":676},"(i, matrix);\n",[662,2777,2778],{"class":664,"line":765},[662,2779,2423],{"class":676},[11,2781,2782,2783,2786,2787,2790],{},"Wo Objekte statisch sind und nicht einzeln bewegt werden müssen, führe ich Geometrien stattdessen zusammen — mit ",[604,2784,2785],{},"mergeGeometries"," aus den ",[604,2788,2789],{},"BufferGeometryUtils"," wird aus vielen Meshes ein einziges. Auch das Teilen von Material-Instanzen statt ständiger Neuanlage spart spürbar.",[18,2792,2794],{"id":2793},"aufräumen-ist-teil-der-arbeit","Aufräumen ist Teil der Arbeit",[11,2796,2797,2798,2801],{},"Was viele unterschätzen: Three.js räumt nicht von allein auf. Geometrien, Materialien und Texturen leben im GPU-Speicher weiter, bis ich sie explizit mit ",[604,2799,2800],{},".dispose()"," entlasse. Bei Single-Page-Apps, die Szenen wechseln, habe ich so schon Speicherlecks gesehen, die nach Minuten zum Absturz führten. Seitdem ist Aufräumen für mich kein nachträglicher Gedanke, sondern Teil jeder Komponente.",[11,2803,2804,2805,2808],{},"Für mobile Geräte gehe ich noch einen Schritt weiter. Ich begrenze die ",[604,2806,2807],{},"pixelRatio"," auf maximal 2, denn ein Retina-Display mit Faktor 3 zu bedienen kostet enorm viele Pixel. Ich erkenne schwächere Geräte und reduziere dort Schatten, Postprocessing und Polygonzahl. Eine Szene muss nicht überall gleich aussehen — sie muss überall flüssig laufen.",[11,2810,2811],{},"Am Ende geht es nicht um die maximale Szene, die irgendwo läuft. Es geht um die richtige Szene, die überall läuft.",[848,2813,2814],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":70,"searchDepth":71,"depth":71,"links":2816},[2817,2818],{"id":2644,"depth":71,"text":2645},{"id":2793,"depth":71,"text":2794},"2023-05-18","Aus Jahren mit Three.js habe ich gelernt, dass flüssige 3D-Szenen keine Frage roher Leistung sind, sondern von Draw Calls, Instancing und sauberem Aufräumen.",{},"\u002Fblog\u002Fde\u002Fthreejs-performance",{"title":2636,"description":2820},"blog\u002Fde\u002Fthreejs-performance",[1616,1224,1614],"3JDGwtEGOSgyyUHe72m8y9RaJ6OnUktD-n-l1LHjgrY",{"id":2828,"title":2829,"body":2830,"cover":76,"date":2870,"description":2871,"draft":79,"extension":80,"locale":81,"meta":2872,"navigation":83,"path":2873,"seo":2874,"stem":2875,"tags":2876,"__hash__":2879},"blog\u002Fblog\u002Fde\u002Fwebgpu-the-future.md","WebGPU: ein Ausblick auf die nächste Grafik-Ära",{"type":8,"value":2831,"toc":2866},[2832,2835,2839,2842,2847,2850,2854,2857,2860,2863],[11,2833,2834],{},"Ich arbeite seit Jahren mit WebGL, und ich schulde ihm viel. Doch WebGL trägt das Erbe von OpenGL ES mit sich — eine API aus einer anderen Zeit, gebaut für Hardware, die es so nicht mehr gibt. WebGPU bricht damit. Es spricht die Sprache moderner Grafikkarten, und das merkt man in jeder Zeile.",[18,2836,2838],{"id":2837},"eine-api-die-mit-der-hardware-spricht","Eine API, die mit der Hardware spricht",[11,2840,2841],{},"WebGPU lehnt sich an Vulkan, Metal und Direct3D 12 an — die APIs, die heute auf dem Desktop und auf Mobilgeräten arbeiten. Statt eines globalen Zustands, den man mühsam vor jedem Draw Call umschaltet, denkt WebGPU in expliziten Objekten: Pipelines, Bind Groups, Command Buffer. Das wirkt zunächst sperriger, aber es ist ehrlicher. Ich sehe, was passiert, und der Treiber muss weniger raten.",[42,2843,2844],{},[11,2845,2846],{},"Eine gute Grafik-API versteckt die Hardware nicht — sie übersetzt sie in eine Sprache, die ich denken kann.",[11,2848,2849],{},"Der Aufbau ist mehr Zeremonie als bei WebGL. Doch sobald die Pipeline steht, ist der eigentliche Render-Loop schlank und vorhersehbar. Gerade bei vielen Objekten zahlt sich das aus, weil der Overhead pro Draw Call spürbar sinkt.",[18,2851,2853],{"id":2852},"compute-shader-öffnen-türen","Compute-Shader öffnen Türen",[11,2855,2856],{},"Was mich am meisten reizt, sind die Compute-Shader. WebGL kannte im Grunde nur den Weg über Vertex- und Fragment-Shader — wer Berechnungen auf der GPU machen wollte, musste sie als Rendering tarnen. WebGPU erlaubt echte Berechnung auf der Grafikkarte, abseits des Bildschirms.",[11,2858,2859],{},"Plötzlich werden Partikelsysteme mit Hunderttausenden Elementen denkbar, Physik direkt auf der GPU, prozedurale Generierung in Echtzeit. Für die kreativen Arbeiten, die ich am liebsten mache, ist das ein neuer Spielplatz.",[11,2861,2862],{},"Ich bleibe trotzdem vorsichtig. WebGPU ist Ende 2022 noch nicht überall stabil verfügbar, der Browser-Support ist im Aufbau, und für Produktionsprojekte ist WebGL weiterhin meine sichere Bank. Was ich heute für Kunden baue, läuft auf der bewährten Schiene.",[11,2864,2865],{},"Aber ich richte meinen Blick nach vorn. Ich baue erste Prototypen, ich lese die Spezifikation, ich sammle Gefühl für das neue Modell. Wenn WebGPU reif ist — und das wird es —, möchte ich nicht bei null anfangen. Die nächste Grafik-Ära im Web hat begonnen, und ich will von Anfang an dabei sein.",{"title":70,"searchDepth":71,"depth":71,"links":2867},[2868,2869],{"id":2837,"depth":71,"text":2838},{"id":2852,"depth":71,"text":2853},"2022-11-12","WebGPU zeichnet sich als Nachfolger von WebGL ab — mit moderner Architektur, Compute-Shadern und einem Versprechen, das mich vorsichtig begeistert.",{},"\u002Fblog\u002Fde\u002Fwebgpu-the-future",{"title":2829,"description":2871},"blog\u002Fde\u002Fwebgpu-the-future",[2877,2878,1175],"WebGPU","Grafik","8RF4sV1vZRpBq-eApr36YAy3MTf-DcxPqyFLmhqxKM4",{"id":2881,"title":2882,"body":2883,"cover":76,"date":3072,"description":3073,"draft":79,"extension":80,"locale":81,"meta":3074,"navigation":83,"path":3075,"seo":3076,"stem":3077,"tags":3078,"__hash__":3079},"blog\u002Fblog\u002Fde\u002Fnextjs-13-app-router.md","Next.js 13: der App Router verändert alles",{"type":8,"value":2884,"toc":3068},[2885,2892,2896,2925,2930,2933,2937,2943,3056,3059,3062,3065],[11,2886,2887,2888,2891],{},"Next.js 13 ist da, und das neue ",[604,2889,2890],{},"app","-Verzeichnis ist mehr als nur ein weiteres Feature. Es ist ein Bruch mit Gewohnheiten, die ich jahrelang gepflegt habe. Noch ist vieles Beta, und ich gehe behutsam damit um — aber die Richtung ist unverkennbar.",[18,2893,2895],{"id":2894},"ein-neues-mentales-modell","Ein neues mentales Modell",[11,2897,2898,2899,2902,2903,611,2906,2909,2910,2913,2914,2917,2918,2558,2921,2924],{},"Jahrelang war ",[604,2900,2901],{},"pages\u002F"," mein Zuhause. Eine Datei, eine Route, dazu ",[604,2904,2905],{},"getServerSideProps",[604,2907,2908],{},"getStaticProps"," als Datenschicht. Das funktionierte, aber es trennte Dinge, die eigentlich zusammengehören. Der App Router denkt anders. Routen werden zu Ordnern, und in jedem davon leben Bausteine mit klaren Aufgaben: ",[604,2911,2912],{},"page"," für den Inhalt, ",[604,2915,2916],{},"layout"," für den Rahmen, ",[604,2919,2920],{},"loading",[604,2922,2923],{},"error"," für die Zustände dazwischen.",[42,2926,2927],{},[11,2928,2929],{},"Verschachtelte Layouts sind die stille Revolution: Was umschließt, bleibt bestehen, während sich der Inhalt darin bewegt.",[11,2931,2932],{},"Diese verschachtelten Layouts sind für mich der eigentliche Gewinn. Eine Navigation, ein Sidebar-Zustand, ein Scrollkontext — all das bleibt erhalten, während der Nutzer zwischen Unterseiten wechselt. Kein Neuaufbau, kein Flackern. Das fühlt sich endlich nach der App an, die ich immer bauen wollte.",[18,2934,2936],{"id":2935},"server-components-ändern-die-statik","Server Components ändern die Statik",[11,2938,2939,2940,2686],{},"Der größere Sprung sind die React Server Components. Komponenten rendern standardmäßig auf dem Server, holen ihre Daten direkt dort und schicken nur das Ergebnis ans Frontend. Erst wenn ich Interaktivität brauche, markiere ich eine Komponente mit ",[604,2941,2942],{},"\"use client\"",[654,2944,2946],{"className":2334,"code":2945,"language":2336,"meta":70,"style":70},"\u002F\u002F app\u002Fprojekte\u002Fpage.js — läuft auf dem Server\nasync function Projekte() {\n  const projekte = await getProjekte();\n  return (\n    \u003Cul>\n      {projekte.map((p) => (\n        \u003Cli key={p.id}>{p.titel}\u003C\u002Fli>\n      ))}\n    \u003C\u002Ful>\n  );\n}\n",[604,2947,2948,2953,2964,2981,2987,2995,3016,3035,3040,3048,3052],{"__ignoreMap":70},[662,2949,2950],{"class":664,"line":665},[662,2951,2952],{"class":724},"\u002F\u002F app\u002Fprojekte\u002Fpage.js — läuft auf dem Server\n",[662,2954,2955,2957,2959,2962],{"class":664,"line":71},[662,2956,2343],{"class":690},[662,2958,2346],{"class":690},[662,2960,2961],{"class":680}," Projekte",[662,2963,2443],{"class":676},[662,2965,2966,2968,2971,2973,2976,2979],{"class":664,"line":742},[662,2967,2372],{"class":690},[662,2969,2970],{"class":668}," projekte",[662,2972,2378],{"class":690},[662,2974,2975],{"class":690}," await",[662,2977,2978],{"class":680}," getProjekte",[662,2980,2717],{"class":676},[662,2982,2983,2985],{"class":664,"line":748},[662,2984,2448],{"class":690},[662,2986,2451],{"class":676},[662,2988,2989,2991,2993],{"class":664,"line":754},[662,2990,2456],{"class":676},[662,2992,221],{"class":2459},[662,2994,2510],{"class":676},[662,2996,2997,3000,3003,3006,3008,3011,3014],{"class":664,"line":765},[662,2998,2999],{"class":676},"      {projekte.",[662,3001,3002],{"class":680},"map",[662,3004,3005],{"class":676},"((",[662,3007,11],{"class":2355},[662,3009,3010],{"class":676},") ",[662,3012,3013],{"class":690},"=>",[662,3015,2451],{"class":676},[662,3017,3018,3021,3023,3026,3028,3031,3033],{"class":664,"line":770},[662,3019,3020],{"class":676},"        \u003C",[662,3022,224],{"class":2459},[662,3024,3025],{"class":680}," key",[662,3027,2466],{"class":690},[662,3029,3030],{"class":676},"{p.id}>{p.titel}\u003C\u002F",[662,3032,224],{"class":2459},[662,3034,2510],{"class":676},[662,3036,3037],{"class":664,"line":776},[662,3038,3039],{"class":676},"      ))}\n",[662,3041,3042,3044,3046],{"class":664,"line":784},[662,3043,2516],{"class":676},[662,3045,221],{"class":2459},[662,3047,2510],{"class":676},[662,3049,3050],{"class":664,"line":789},[662,3051,2526],{"class":676},[662,3053,3054],{"class":664,"line":795},[662,3055,2423],{"class":676},[11,3057,3058],{},"Kein separater Data-Fetching-Mechanismus, kein API-Umweg für etwas, das ohnehin auf dem Server lebt. Das Datenholen wandert dorthin, wo die Daten sind. Das weniger JavaScript beim Client ankommt, ist ein angenehmer Nebeneffekt — für die animationslastigen Seiten, die ich gern baue, zählt jedes Kilobyte.",[11,3060,3061],{},"Ehrlich gesagt sortiere ich meinen Kopf gerade neu. Wann Server, wann Client? Wo verläuft die Grenze? Das braucht Übung, und manche Bibliotheken hinken noch hinterher. Ich würde heute keinen kritischen Kundenrelaunch blind darauf setzen.",[11,3063,3064],{},"Aber als Ausblick ist das überzeugend. Next.js 13 fragt nicht, wie ich Seiten anders organisiere — es fragt, wo Code eigentlich laufen sollte. Diese Frage wird uns die nächsten Jahre begleiten.",[848,3066,3067],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":70,"searchDepth":71,"depth":71,"links":3069},[3070,3071],{"id":2894,"depth":71,"text":2895},{"id":2935,"depth":71,"text":2936},"2022-10-25","Mit Next.js 13 kommt der App Router und mit ihm React Server Components — ein neues mentales Modell, das meine Sicht auf Routing und Rendering verschiebt.",{},"\u002Fblog\u002Fde\u002Fnextjs-13-app-router",{"title":2882,"description":3073},"blog\u002Fde\u002Fnextjs-13-app-router",[2583,2584,1225],"9mn6LgkWEPKlKGGZUy4ycS2KDe3HYNQi1YmEbFMOq_I",{"id":3081,"title":3082,"body":3083,"cover":76,"date":3160,"description":3161,"draft":79,"extension":80,"locale":81,"meta":3162,"navigation":83,"path":3163,"seo":3164,"stem":3165,"tags":3166,"__hash__":3168},"blog\u002Fblog\u002Fde\u002Fdesign-systems-that-work.md","Designsysteme, die wirklich funktionieren",{"type":8,"value":3084,"toc":3156},[3085,3088,3092,3095,3100,3115,3119,3126,3133,3153],[11,3086,3087],{},"Designsysteme haben einen zwiespältigen Ruf. Für die einen sind sie Ordnung und Tempo, für die\nanderen ein Korsett, das jede Idee glattbügelt. Nach einigen Projekten bin ich überzeugt: Der\nUnterschied liegt nicht im System selbst, sondern in der Haltung, mit der man es baut.",[18,3089,3091],{"id":3090},"ein-system-soll-tragen-nicht-fesseln","Ein System soll tragen, nicht fesseln",[11,3093,3094],{},"Das beste Designsystem nimmt mir die immer gleichen Entscheidungen ab, damit ich Kraft für die\nbesonderen habe. Abstände, Farben, Schriftgrößen — das muss nicht jedes Mal neu erfunden werden.",[42,3096,3097],{},[11,3098,3099],{},"Ein gutes System macht das Naheliegende einfach und das Außergewöhnliche möglich.",[11,3101,3102,3103,3106,3107,3110,3111,3114],{},"Die Grundlage sind ",[227,3104,3105],{},"Tokens",": benannte Werte für Farbe, Typografie, Abstand und Radius. Sie sind\ndie Sprache, in der das ganze Produkt spricht. Ändert sich ein Token, ändert sich alles, was ihn\nnutzt — konsistent und an einer Stelle. Wichtig ist, dass Tokens Bedeutung tragen, nicht nur\nWerte: ",[604,3108,3109],{},"color-surface"," statt ",[604,3112,3113],{},"grau-100",". So bleibt das System verständlich, auch wenn die Werte\nsich später verschieben.",[18,3116,3118],{"id":3117},"komponenten-und-dokumentation","Komponenten und Dokumentation",[11,3120,3121,3122,3125],{},"Auf den Tokens stehen ",[227,3123,3124],{},"Komponenten",". Hier achte ich darauf, dass sie genug Spielraum lassen:\nsinnvolle Standardwerte, aber Türen für den Sonderfall. Eine Komponente, die nur exakt einen\nLook erlaubt, wird umgangen — und dann zerfällt das System leise von innen.",[11,3127,3128,3129,3132],{},"Was am häufigsten unterschätzt wird, ist die ",[227,3130,3131],{},"Dokumentation",". Ein System, das niemand versteht,\nexistiert praktisch nicht. Für mich gehört dazu:",[221,3134,3135,3141,3147],{},[224,3136,3137,3140],{},[227,3138,3139],{},"Warum",", nicht nur Wie — die Absicht hinter einer Entscheidung",[224,3142,3143,3146],{},[227,3144,3145],{},"Beispiele in echtem Kontext",", keine isolierten Knöpfe",[224,3148,3149,3152],{},[227,3150,3151],{},"Klare Grenzen"," — wann man eine Komponente nutzt und wann bewusst nicht",[11,3154,3155],{},"Ein Designsystem ist nie fertig. Es lebt mit dem Produkt, wächst, lässt manchmal auch los. Genau\ndieser Pflegegedanke macht den Unterschied zwischen einem System, das Staub ansetzt, und einem,\ndas ein Team trägt. Wenn es funktioniert, merkt man es nicht — man baut einfach schneller, ruhiger\nund kohärenter. Und genau das ist das Ziel.",{"title":70,"searchDepth":71,"depth":71,"links":3157},[3158,3159],{"id":3090,"depth":71,"text":3091},{"id":3117,"depth":71,"text":3118},"2022-07-20","Wie ein Designsystem Kreativität trägt statt einschränkt — durch Tokens, Komponenten und eine Dokumentation, die man tatsächlich nutzt.",{},"\u002Fblog\u002Fde\u002Fdesign-systems-that-work",{"title":3082,"description":3161},"blog\u002Fde\u002Fdesign-systems-that-work",[1023,3167,1761],"Systeme","Ze1cQgXc76v2rA0JZVUp_wVfgTewSd-0OroH9kekexY",{"id":3170,"title":3171,"body":3172,"cover":76,"date":3236,"description":3237,"draft":79,"extension":80,"locale":81,"meta":3238,"navigation":83,"path":3239,"seo":3240,"stem":3241,"tags":3242,"__hash__":3244},"blog\u002Fblog\u002Fde\u002Freact-18-concurrent.md","React 18: nebenläufig und flüssig",{"type":8,"value":3173,"toc":3232},[3174,3177,3181,3184,3189,3196,3200,3203,3222,3229],[11,3175,3176],{},"React 18 ist gerade erschienen, und es ist eines dieser Releases, das man erst beim Bauen\nrichtig versteht. Auf den ersten Blick ändert sich wenig — die meisten Apps laufen einfach\nweiter. Auf den zweiten Blick verschiebt sich, wie React über Zeit denkt.",[18,3178,3180],{"id":3179},"nebenläufiges-rendering","Nebenläufiges Rendering",[11,3182,3183],{},"Das Fundament ist die Concurrent-Architektur. React kann das Rendern jetzt unterbrechen,\npausieren und wieder aufnehmen, statt eine Aktualisierung in einem Stück durchzuziehen. Das\nheißt: Eine teure Aktualisierung blockiert nicht mehr zwingend das, was gerade dringender ist —\netwa Tippen oder Klicken.",[42,3185,3186],{},[11,3187,3188],{},"Flüssigkeit entsteht nicht dadurch, dass alles schneller ist, sondern dadurch, dass das Wichtige zuerst kommt.",[11,3190,3191,3192,3195],{},"Spürbar wird das über ",[604,3193,3194],{},"startTransition",". Damit markiere ich eine Aktualisierung als nicht\ndringend — etwa das Filtern einer langen Liste — während die Eingabe selbst sofort reagiert.\nDie Oberfläche bleibt ansprechbar, auch wenn im Hintergrund viel passiert.",[18,3197,3199],{"id":3198},"was-sich-im-alltag-ändert","Was sich im Alltag ändert",[11,3201,3202],{},"Zwei kleinere Neuerungen mag ich besonders, weil sie reibungslos wirken:",[221,3204,3205,3211],{},[224,3206,3207,3210],{},[227,3208,3209],{},"Automatisches Batching"," fasst nun auch Zustandsänderungen in Promises, Timeouts und Events\nzu einem Re-Render zusammen — weniger unnötige Durchläufe, ganz ohne mein Zutun.",[224,3212,3213,3221],{},[227,3214,3215,2558,3218],{},[604,3216,3217],{},"useTransition",[604,3219,3220],{},"useDeferredValue"," geben mir feine Kontrolle darüber, was warten darf.",[11,3223,3224,3225,3228],{},"Der Einstieg ist sanft: Mit ",[604,3226,3227],{},"createRoot"," aktiviere ich die neuen Fähigkeiten, und vieles\nfunktioniert sofort besser, ohne dass ich Code umschreiben muss. Die wirklich interessanten\nMuster kommen dann nach und nach dazu.",[11,3230,3231],{},"Für mich ist React 18 kein lautes Update. Es ist eines, das die Verantwortung verschiebt: Statt\nselbst zu jonglieren, wann was gerendert wird, sage ich React nur noch, was Priorität hat — und\nüberlasse ihm das Timing. Genau das macht Oberflächen flüssig, ohne dass man die Mechanik sieht.",{"title":70,"searchDepth":71,"depth":71,"links":3233},[3234,3235],{"id":3179,"depth":71,"text":3180},{"id":3198,"depth":71,"text":3199},"2022-03-29","React 18 bringt nebenläufiges Rendering, automatisches Batching und Transitions — was das für wirklich flüssige Oberflächen bedeutet.",{},"\u002Fblog\u002Fde\u002Freact-18-concurrent",{"title":3171,"description":3237},"blog\u002Fde\u002Freact-18-concurrent",[2584,3243,1224],"Frontend","T_cSHBl13K1xnwviUAjxNwlwRZCs2s2U3e-O8GAYsF8",{"id":3246,"title":3247,"body":3248,"cover":76,"date":3316,"description":3317,"draft":79,"extension":80,"locale":81,"meta":3318,"navigation":83,"path":3319,"seo":3320,"stem":3321,"tags":3322,"__hash__":3323},"blog\u002Fblog\u002Fde\u002Fnextjs-12-middleware.md","Next.js 12: schneller dank Rust",{"type":8,"value":3249,"toc":3312},[3250,3253,3257,3260,3265,3268,3272,3283,3286,3306,3309],[11,3251,3252],{},"Manche Updates ändern Features, andere ändern das Gefühl beim Arbeiten. Next.js 12 gehört für\nmich klar zur zweiten Sorte. Der Sprung steckt nicht in einer neuen Schaltfläche, sondern unter\nder Haube — und genau da, wo man als Entwickler:in jeden Tag wartet.",[18,3254,3256],{"id":3255},"rust-statt-babel","Rust statt Babel",[11,3258,3259],{},"Das Herzstück ist der Wechsel von Babel und Terser zu SWC, einem Compiler in Rust. Das klingt\nnach Innereien, ist aber spürbar: Builds und Hot Reloads laufen deutlich schneller, weil\nTranspilieren und Minifizieren nicht mehr im selben Tempo wie zuvor durch JavaScript-Werkzeuge\nmüssen.",[42,3261,3262],{},[11,3263,3264],{},"Geschwindigkeit beim Entwickeln ist kein Luxus. Sie ist der Unterschied zwischen Im-Fluss-Bleiben und Warten.",[11,3266,3267],{},"Für meine Arbeit heißt das vor allem eines: kürzere Schleifen. Eine Änderung speichern und fast\nsofort das Ergebnis sehen, hält die kreative Spannung aufrecht. Je weniger ich auf das Tooling\nwarte, desto mehr Aufmerksamkeit bleibt für das eigentliche Gestalten.",[18,3269,3271],{"id":3270},"middleware-logik-an-die-edge","Middleware: Logik an die Edge",[11,3273,3274,3275,3278,3279,3282],{},"Die zweite große Neuerung ist Middleware. Damit kann ich Code ausführen, ",[227,3276,3277],{},"bevor"," eine Anfrage\nfertig bearbeitet wird — auf der Edge, nah an den Nutzer:innen. Eine Datei, eine ",[604,3280,3281],{},"middleware","-Funktion,\nund ich kann umleiten, umschreiben, Header setzen oder Anfragen je nach Kontext lenken.",[11,3284,3285],{},"Das eröffnet Dinge, die vorher umständlich waren:",[221,3287,3288,3294,3300],{},[224,3289,3290,3293],{},[227,3291,3292],{},"Lokalisierung"," anhand von Region oder Sprache, bevor die Seite gerendert wird",[224,3295,3296,3299],{},[227,3297,3298],{},"A\u002FB-Tests"," und Feature-Flags ohne Flackern",[224,3301,3302,3305],{},[227,3303,3304],{},"Auth-Checks"," früh im Lebenszyklus, statt im Client nachzubessern",[11,3307,3308],{},"Wichtig bleibt das richtige Maß: Middleware läuft bei jeder passenden Anfrage, also gehört nur\ndorthin, was wirklich schlank und früh entschieden werden muss. Schwere Logik bleibt\nwoanders.",[11,3310,3311],{},"Zusammen ergeben SWC und Middleware ein stimmiges Bild: Next.js 12 macht die Entwicklung\nschneller und die Auslieferung klüger. Genau diese Kombination aus Tempo und Kontrolle ist es,\ndie mir die Plattform sympathisch macht.",{"title":70,"searchDepth":71,"depth":71,"links":3313},[3314,3315],{"id":3255,"depth":71,"text":3256},{"id":3270,"depth":71,"text":3271},"2021-10-26","Next.js 12 bringt den SWC-Compiler und Middleware — wie das meine Builds beschleunigt und Logik näher an die Edge bringt.",{},"\u002Fblog\u002Fde\u002Fnextjs-12-middleware",{"title":3247,"description":3317},"blog\u002Fde\u002Fnextjs-12-middleware",[2583,1224,1225],"2dtBEdRHy052bcXzZFOEdt8nFZTPu5cfjB4RtbKz9fs",{"id":3325,"title":3326,"body":3327,"cover":76,"date":3392,"description":3393,"draft":79,"extension":80,"locale":81,"meta":3394,"navigation":83,"path":3395,"seo":3396,"stem":3397,"tags":3398,"__hash__":3399},"blog\u002Fblog\u002Fde\u002Fscrollytelling-and-motion.md","Scrollytelling: Geschichten, die sich entfalten",{"type":8,"value":3328,"toc":3388},[3329,3332,3336,3339,3344,3347,3351,3354,3357,3385],[11,3330,3331],{},"Scrollen ist die natürlichste Geste im Web. Genau deshalb mag ich Scrollytelling so sehr: Es\nnimmt etwas, das ohnehin jede:r tut, und macht daraus den Takt einer Geschichte. Wenn es gut\ngemacht ist, fühlt sich Scrollen nicht wie Navigation an, sondern wie Umblättern.",[18,3333,3335],{"id":3334},"bewegung-gehört-dem-inhalt","Bewegung gehört dem Inhalt",[11,3337,3338],{},"Der häufigste Fehler ist, mit Animation anzufangen. Ich fange mit der Geschichte an. Erst wenn\nich weiß, was gesagt werden soll und in welcher Reihenfolge, frage ich, welche Bewegung das\nunterstützt. Eine Grafik, die beim Scrollen Schicht für Schicht aufbaut, erklärt von selbst.\nEin Text, der ein Bild langsam freigibt, lenkt den Blick genau dorthin, wo er hingehört.",[42,3340,3341],{},[11,3342,3343],{},"Animation, die nichts erzählt, ist Dekoration. Animation, die etwas erzählt, ist Sprache.",[11,3345,3346],{},"Bewegung sollte eine Frage beantworten, die der Inhalt gerade aufwirft — nicht eine, die ihn\nablenkt. Sobald der Effekt lauter ist als die Aussage, habe ich zu viel gewollt.",[18,3348,3350],{"id":3349},"rhythmus-und-zurückhaltung","Rhythmus und Zurückhaltung",[11,3352,3353],{},"Eine gute Scroll-Erzählung lebt vom Tempo. Es braucht ruhige Passagen, in denen nichts\npassiert, damit die bewegten Momente Gewicht bekommen. Ich denke das wie Musik: Pausen sind\nTeil der Komposition.",[11,3355,3356],{},"Technisch hilft mir dabei ein paar Disziplin:",[221,3358,3359,3365,3371,3379],{},[224,3360,3361,3364],{},[227,3362,3363],{},"An den Scroll-Fortschritt binden, nicht an Zeit"," — so behält der Mensch die Kontrolle",[224,3366,3367,3370],{},[227,3368,3369],{},"Sparsam mit gleichzeitiger Bewegung"," — eine Sache zur Zeit liest sich klarer",[224,3372,3373,3378],{},[227,3374,3375,3377],{},[604,3376,1586],{}," respektieren"," — die Geschichte muss auch ohne Animation funktionieren",[224,3380,3381,3384],{},[227,3382,3383],{},"Beim Zurückscrollen umkehrbar bleiben",", damit nichts kaputt wirkt",[11,3386,3387],{},"Am Ende ist Scrollytelling für mich eine Frage der Haltung: Ich vertraue darauf, dass weniger\nBewegung, dafür die richtige, mehr bewegt. Die elegantesten Projekte sind die, bei denen am\nSchluss niemand über die Animation spricht — sondern über das, was sie verstanden haben.",{"title":70,"searchDepth":71,"depth":71,"links":3389},[3390,3391],{"id":3334,"depth":71,"text":3335},{"id":3349,"depth":71,"text":3350},"2021-09-01","Wie scrollgesteuertes Erzählen Bewegung an Inhalt bindet — mit Rhythmus, Zurückhaltung und dem Mut, auch mal stillzustehen.",{},"\u002Fblog\u002Fde\u002Fscrollytelling-and-motion",{"title":3326,"description":3393},"blog\u002Fde\u002Fscrollytelling-and-motion",[1688,1023,1075],"xkd703EAA5weoRmDIQJEUcBX-eHjA8XWZalqvFw-7xw",{"id":3401,"title":3402,"body":3403,"cover":76,"date":3537,"description":3538,"draft":79,"extension":80,"locale":81,"meta":3539,"navigation":83,"path":3540,"seo":3541,"stem":3542,"tags":3543,"__hash__":3544},"blog\u002Fblog\u002Fde\u002Freact-three-fiber.md","React Three Fiber: 3D, deklarativ gedacht",{"type":8,"value":3404,"toc":3533},[3405,3408,3412,3415,3504,3507,3511,3516,3527,3530],[11,3406,3407],{},"Lange habe ich Three.js so geschrieben, wie es die Bibliothek vorgibt: imperativ. Szene\nerstellen, Kamera positionieren, Mesh hinzufügen, in der Render-Schleife alles von Hand\naktualisieren. Es funktioniert — aber jedes größere Projekt wurde zu einem Knäuel aus\nZustand, das niemand mehr entwirren wollte. Mit React Three Fiber hat sich das gedreht.",[18,3409,3411],{"id":3410},"von-befehlen-zu-beschreibung","Von Befehlen zu Beschreibung",[11,3413,3414],{},"React Three Fiber, kurz R3F, lässt mich eine 3D-Szene so ausdrücken, wie ich sonst eine\nBenutzeroberfläche baue: als Baum aus Komponenten. Statt ein Mesh zu instanziieren und\nmanuell an die Szene zu hängen, schreibe ich einfach, was da sein soll.",[654,3416,3418],{"className":2334,"code":3417,"language":2336,"meta":70,"style":70},"\u003Cmesh position={[0, 1, 0]}>\n  \u003CboxGeometry args={[1, 1, 1]} \u002F>\n  \u003CmeshStandardMaterial color=\"hotpink\" \u002F>\n\u003C\u002Fmesh>\n",[604,3419,3420,3450,3478,3495],{"__ignoreMap":70},[662,3421,3422,3424,3427,3430,3432,3435,3438,3440,3443,3445,3447],{"class":664,"line":665},[662,3423,2742],{"class":676},[662,3425,3426],{"class":2459},"mesh",[662,3428,3429],{"class":680}," position",[662,3431,2466],{"class":690},[662,3433,3434],{"class":676},"{[",[662,3436,3437],{"class":668},"0",[662,3439,2073],{"class":676},[662,3441,3442],{"class":668},"1",[662,3444,2073],{"class":676},[662,3446,3437],{"class":668},[662,3448,3449],{"class":676},"]}>\n",[662,3451,3452,3455,3458,3461,3463,3465,3467,3469,3471,3473,3475],{"class":664,"line":71},[662,3453,3454],{"class":676},"  \u003C",[662,3456,3457],{"class":668},"boxGeometry",[662,3459,3460],{"class":680}," args",[662,3462,2466],{"class":690},[662,3464,3434],{"class":676},[662,3466,3442],{"class":668},[662,3468,2073],{"class":676},[662,3470,3442],{"class":668},[662,3472,2073],{"class":676},[662,3474,3442],{"class":668},[662,3476,3477],{"class":676},"]} \u002F>\n",[662,3479,3480,3482,3485,3488,3490,3493],{"class":664,"line":742},[662,3481,3454],{"class":676},[662,3483,3484],{"class":668},"meshStandardMaterial",[662,3486,3487],{"class":680}," color",[662,3489,2466],{"class":690},[662,3491,3492],{"class":672},"\"hotpink\"",[662,3494,2486],{"class":676},[662,3496,3497,3500,3502],{"class":664,"line":748},[662,3498,3499],{"class":676},"\u003C\u002F",[662,3501,3426],{"class":2459},[662,3503,2510],{"class":676},[11,3505,3506],{},"Das ist kein Spielzeug-Layer über Three.js — es ist Three.js, nur deklarativ. Jede Three-Klasse\nwird zur Komponente, jede Eigenschaft zur Prop. Der entscheidende Unterschied: Ich beschreibe\nden Zustand, den ich haben will, und R3F gleicht die Szene dafür ab. Genau das Prinzip, das\nReact im DOM so stark gemacht hat, gilt nun für den Canvas.",[18,3508,3510],{"id":3509},"warum-das-kreative-arbeit-verändert","Warum das kreative Arbeit verändert",[42,3512,3513],{},[11,3514,3515],{},"Wartbarkeit ist kein Gegensatz zu Kreativität — sie ist die Voraussetzung dafür, mutig zu bleiben.",[11,3517,3518,3519,3522,3523,3526],{},"Der eigentliche Gewinn ist nicht weniger Code, sondern weniger Angst vor Veränderung. Wenn\neine Szene aus klar benannten Komponenten besteht, kann ich eine Idee austauschen, ohne den\nRest zu fürchten. Das Ökosystem hilft enorm: Mit ",[604,3520,3521],{},"@react-three\u002Fdrei"," habe ich Kameras,\nSteuerungen und Loader griffbereit, und Hooks wie ",[604,3524,3525],{},"useFrame"," binden Animationen sauber an den\nRender-Zyklus — ohne globale Schleife, die alles kennt.",[11,3528,3529],{},"Für mich heißt das: Ich kann eine 3D-Idee schnell skizzieren, im Team teilen und Wochen später\nweiterbauen, ohne erst zu archäologieren, was ich mir damals gedacht habe. Three.js gibt mir\ndie Tiefe, R3F gibt mir die Struktur. Deklaratives 3D ist für mich kein Trend, sondern die Art,\nwie kreative Webarbeit endlich auch über die erste Demo hinaus trägt.",[848,3531,3532],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":70,"searchDepth":71,"depth":71,"links":3534},[3535,3536],{"id":3410,"depth":71,"text":3411},{"id":3509,"depth":71,"text":3510},"2021-06-08","Wie React Three Fiber Three.js-Szenen in Komponenten verwandelt — und warum deklaratives 3D meine kreative Arbeit endlich wartbar gemacht hat.",{},"\u002Fblog\u002Fde\u002Freact-three-fiber",{"title":3402,"description":3538},"blog\u002Fde\u002Freact-three-fiber",[1616,2584,1614],"EKvq94X0aEyELHCJPBSiP9UMNnvvKIDCQ9wntBTgZIw",{"id":3546,"title":3547,"body":3548,"cover":76,"date":3601,"description":3602,"draft":79,"extension":80,"locale":81,"meta":3603,"navigation":83,"path":3604,"seo":3605,"stem":3606,"tags":3607,"__hash__":3610},"blog\u002Fblog\u002Fde\u002Fvite-the-new-speed.md","Vite: Geschwindigkeit, die Spaß macht",{"type":8,"value":3549,"toc":3596},[3550,3553,3557,3564,3567,3572,3576,3579,3582,3586,3589],[11,3551,3552],{},"Es gibt diesen Moment, in dem ein Werkzeug nicht nur schneller ist, sondern das Gefühl der\nArbeit verändert. Für mich war das Vite. Mit Version 2, die gerade erschienen ist, startet\nder Entwicklungsserver praktisch sofort — und plötzlich macht das Bauen wieder Spaß.",[18,3554,3556],{"id":3555},"warum-es-so-schnell-ist","Warum es so schnell ist",[11,3558,3559,3560,3563],{},"Klassische Bundler wie Webpack packen vor jedem Start die gesamte Anwendung zusammen. Bei\ngroßen Projekten sitzt man dann erst einmal und wartet. Vite dreht das Prinzip um: Es\nliefert deinen Quellcode über ",[227,3561,3562],{},"natives ES-Modul-Importieren"," direkt an den Browser aus.",[11,3565,3566],{},"Der Browser lädt nur die Module, die er für die aktuelle Seite gerade braucht. Kein\nVorab-Bundling, kein Warten. Abhängigkeiten wie React werden einmalig mit esbuild\nvorbereitet — und esbuild ist in Go geschrieben, was es um Größenordnungen schneller macht\nals Bundler in JavaScript.",[42,3568,3569],{},[11,3570,3571],{},"Wenn der Server in Millisekunden startet, denkt man nicht mehr in „Build und Test\", sondern\neinfach im Tun.",[18,3573,3575],{"id":3574},"feedback-in-echtzeit","Feedback in Echtzeit",[11,3577,3578],{},"Der eigentliche Gewinn liegt im Hot Module Replacement. Ich ändere eine Farbe in einem\nShader oder den Abstand in einem Layout — und sehe das Ergebnis, bevor ich den Blick vom\nCode zur Vorschau gehoben habe. Diese Unmittelbarkeit ist mehr als Komfort.",[11,3580,3581],{},"Für kreatives Arbeiten ist die Länge der Feedback-Schleife entscheidend. Jede Sekunde\nWartezeit ist eine kleine Unterbrechung, in der die Idee verblasst. Wenn das Feedback sofort\nkommt, kann ich experimentieren, verwerfen und neu probieren, ohne den Faden zu verlieren.\nAus zähem Iterieren wird ein Gespräch mit dem Material.",[18,3583,3585],{"id":3584},"mein-fazit","Mein Fazit",[11,3587,3588],{},"Vite löst kein Problem, das vorher unlösbar war — Webpack baut am Ende dieselben\nAnwendungen. Aber es nimmt die Reibung aus dem Alltag, und Reibung ist der stille Feind der\nKreativität. Wenn das Werkzeug aufhört, sich bemerkbar zu machen, bleibt mehr Aufmerksamkeit\nfür das, was wirklich zählt: die Gestaltung selbst.",[11,3590,3591,3592,3595],{},"Ich habe in den letzten Wochen mehrere kleinere Projekte umgezogen, und die ersten\nSekunden nach ",[604,3593,3594],{},"npm run dev"," waren jedes Mal ein kleines Aufatmen. Geschwindigkeit ist kein\nSelbstzweck — aber wenn sie sich so anfühlt, wird sie zum Teil des Vergnügens.",{"title":70,"searchDepth":71,"depth":71,"links":3597},[3598,3599,3600],{"id":3555,"depth":71,"text":3556},{"id":3574,"depth":71,"text":3575},{"id":3584,"depth":71,"text":3585},"2021-02-16","Vite 2 brachte Anfang 2021 sofort startende Dev-Server über natives ESM — warum schnelle Feedback-Schleifen für kreatives Arbeiten alles verändern.",{},"\u002Fblog\u002Fde\u002Fvite-the-new-speed",{"title":3547,"description":3602},"blog\u002Fde\u002Fvite-the-new-speed",[3608,3609,1224],"Vite","Tooling","lPb6-ru8W5wwgYIZf-4nlDEenTNMTgkyXp-C4fwLovw",{"id":3612,"title":3613,"body":3614,"cover":76,"date":3763,"description":3764,"draft":79,"extension":80,"locale":81,"meta":3765,"navigation":83,"path":3766,"seo":3767,"stem":3768,"tags":3769,"__hash__":3772},"blog\u002Fblog\u002Fde\u002Ftailwind-utility-first.md","Utility-First: Wie Tailwind meinen Workflow veränderte",{"type":8,"value":3615,"toc":3758},[3616,3623,3627,3634,3637,3642,3646,3660,3738,3741,3745,3752,3755],[11,3617,3618,3619,3622],{},"Ich habe Tailwind lange skeptisch beäugt. Klassennamen wie ",[604,3620,3621],{},"flex items-center px-4"," direkt\nins HTML zu schreiben, fühlte sich an wie ein Rückschritt in die Zeit von Inline-Styles.\nHeute, mit der frisch erschienenen Version 2.0, gehört es zu den Werkzeugen, die meinen\nArbeitstag spürbar verändert haben. Manchmal muss man eine Idee erst benutzen, um sie zu\nverstehen.",[18,3624,3626],{"id":3625},"das-ende-des-namens-erfindens","Das Ende des Namens-Erfindens",[11,3628,3629,3630,3633],{},"Der größte Gewinn ist unerwartet banal: Ich muss keine Klassennamen mehr erfinden. Kein\n",[604,3631,3632],{},".card__header--highlighted"," mehr, kein Grübeln über BEM-Konventionen, kein Hin- und\nHerspringen zwischen HTML und Stylesheet. Ich gestalte dort, wo das Markup steht.",[11,3635,3636],{},"Das klingt klein, ist aber befreiend. Der mentale Kontextwechsel zwischen Struktur und\nStil fällt weg, und ich bleibe im Fluss. Eine Idee landet in Sekunden auf dem Bildschirm,\nstatt erst durch zwei Dateien zu wandern.",[42,3638,3639],{},[11,3640,3641],{},"Utility-First heißt nicht, kein System zu haben. Es heißt, das System in Einschränkungen\nzu gießen statt in Namen.",[18,3643,3645],{"id":3644},"konsistenz-durch-tokens","Konsistenz durch Tokens",[11,3647,3648,3649,3652,3653,611,3656,3659],{},"Was mich wirklich überzeugt hat, ist die ",[604,3650,3651],{},"tailwind.config.js",". Dort definiere ich einmal\nmeine Farbpalette, meine Abstände, meine Schriftgrößen — und ab dann gibt es keine\nwillkürlichen ",[604,3654,3655],{},"13px",[604,3657,3658],{},"#3a3a3c"," mehr im Projekt.",[654,3661,3663],{"className":2663,"code":3662,"language":2665,"meta":70,"style":70},"module.exports = {\n  theme: {\n    extend: {\n      colors: { ink: \"#1a1a1a\", sand: \"#e8e2d8\" },\n      spacing: { 18: \"4.5rem\" },\n    },\n  },\n};\n",[604,3664,3665,3680,3685,3690,3707,3723,3728,3733],{"__ignoreMap":70},[662,3666,3667,3670,3672,3675,3677],{"class":664,"line":665},[662,3668,3669],{"class":668},"module",[662,3671,2686],{"class":676},[662,3673,3674],{"class":668},"exports",[662,3676,2378],{"class":690},[662,3678,3679],{"class":676}," {\n",[662,3681,3682],{"class":664,"line":71},[662,3683,3684],{"class":676},"  theme: {\n",[662,3686,3687],{"class":664,"line":742},[662,3688,3689],{"class":676},"    extend: {\n",[662,3691,3692,3695,3698,3701,3704],{"class":664,"line":748},[662,3693,3694],{"class":676},"      colors: { ink: ",[662,3696,3697],{"class":672},"\"#1a1a1a\"",[662,3699,3700],{"class":676},", sand: ",[662,3702,3703],{"class":672},"\"#e8e2d8\"",[662,3705,3706],{"class":676}," },\n",[662,3708,3709,3712,3715,3718,3721],{"class":664,"line":754},[662,3710,3711],{"class":676},"      spacing: { ",[662,3713,3714],{"class":668},"18",[662,3716,3717],{"class":676},": ",[662,3719,3720],{"class":672},"\"4.5rem\"",[662,3722,3706],{"class":676},[662,3724,3725],{"class":664,"line":765},[662,3726,3727],{"class":676},"    },\n",[662,3729,3730],{"class":664,"line":770},[662,3731,3732],{"class":676},"  },\n",[662,3734,3735],{"class":664,"line":776},[662,3736,3737],{"class":676},"};\n",[11,3739,3740],{},"Die Einschränkung auf eine feste Skala ist kein Korsett, sondern ein Geländer. Designs\nwerden automatisch stimmiger, weil das System schlechte Entscheidungen schwerer macht.\nGenau diese eingebaute Disziplin schätze ich als Gestalter am meisten.",[18,3742,3744],{"id":3743},"wo-ich-aufpasse","Wo ich aufpasse",[11,3746,3747,3748,3751],{},"Verdichtetes Markup kann unübersichtlich werden. Wiederholt sich ein Muster, ziehe ich es\nin eine echte Komponente — in React, Vue oder per ",[604,3749,3750],{},"@apply",". Tailwind ersetzt nicht das\nDenken in Komponenten, es beschleunigt nur den Weg dorthin.",[11,3753,3754],{},"Skeptisch bin ich geblieben, was Dogmatismus angeht: Utility-First ist ein Werkzeug, keine\nReligion. Aber für die schnelle, präzise Iteration zwischen erstem Entwurf und fertigem\nInterface kenne ich aktuell nichts Besseres. Tailwind hat mir die Freude am direkten\nGestalten im Browser zurückgegeben.",[848,3756,3757],{},"html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":70,"searchDepth":71,"depth":71,"links":3759},[3760,3761,3762],{"id":3625,"depth":71,"text":3626},{"id":3644,"depth":71,"text":3645},{"id":3743,"depth":71,"text":3744},"2020-11-19","Im Zeitalter von Tailwind 2.0 — über das Utility-First-Denken, schnellere Iteration und konsistente Design-Tokens direkt im Markup.",{},"\u002Fblog\u002Fde\u002Ftailwind-utility-first",{"title":3613,"description":3764},"blog\u002Fde\u002Ftailwind-utility-first",[3770,3771,1761],"Tailwind","CSS","eLqEm7W7J5RqvdOMpqCb24ZcNUO1wENkecwzb0pCqOw",{"id":3774,"title":3775,"body":3776,"cover":76,"date":3903,"description":3904,"draft":79,"extension":80,"locale":81,"meta":3905,"navigation":83,"path":3906,"seo":3907,"stem":3908,"tags":3909,"__hash__":3910},"blog\u002Fblog\u002Fde\u002Fnextjs-incremental-static-regeneration.md","Incremental Static Regeneration: das Beste aus beiden Welten",{"type":8,"value":3777,"toc":3898},[3778,3781,3785,3788,3856,3863,3872,3876,3879,3882,3886,3892,3895],[11,3779,3780],{},"Lange Zeit musste ich mich entscheiden: statisch oder dynamisch. Statische Seiten sind\nblitzschnell, aber bei jeder Inhaltsänderung muss die ganze Seite neu gebaut werden.\nDynamische Seiten sind frisch, aber jeder Aufruf kostet Rechenzeit auf dem Server. Mit\nNext.js 9.5 ist diese Entscheidung im Sommer 2020 endlich vom Tisch.",[18,3782,3784],{"id":3783},"was-isr-eigentlich-tut","Was ISR eigentlich tut",[11,3786,3787],{},"Incremental Static Regeneration baut eine Seite einmal statisch und liefert sie aus dem\nCache aus — schnell wie eine reine HTML-Datei. Der Clou: Nach einem festgelegten Intervall\nbaut Next.js die Seite im Hintergrund neu, sobald wieder jemand sie aufruft. Die ersten\nBesucher:innen sehen noch die alte Version, alle danach die frische.",[654,3789,3791],{"className":2663,"code":3790,"language":2665,"meta":70,"style":70},"export async function getStaticProps() {\n  const posts = await fetchPosts();\n  return {\n    props: { posts },\n    revalidate: 60, \u002F\u002F höchstens alle 60 Sekunden neu bauen\n  };\n}\n",[604,3792,3793,3807,3823,3829,3834,3847,3852],{"__ignoreMap":70},[662,3794,3795,3797,3800,3802,3805],{"class":664,"line":665},[662,3796,2432],{"class":690},[662,3798,3799],{"class":690}," async",[662,3801,2346],{"class":690},[662,3803,3804],{"class":680}," getStaticProps",[662,3806,2443],{"class":676},[662,3808,3809,3811,3814,3816,3818,3821],{"class":664,"line":71},[662,3810,2372],{"class":690},[662,3812,3813],{"class":668}," posts",[662,3815,2378],{"class":690},[662,3817,2975],{"class":690},[662,3819,3820],{"class":680}," fetchPosts",[662,3822,2717],{"class":676},[662,3824,3825,3827],{"class":664,"line":742},[662,3826,2448],{"class":690},[662,3828,3679],{"class":676},[662,3830,3831],{"class":664,"line":748},[662,3832,3833],{"class":676},"    props: { posts },\n",[662,3835,3836,3839,3842,3844],{"class":664,"line":754},[662,3837,3838],{"class":676},"    revalidate: ",[662,3840,3841],{"class":668},"60",[662,3843,2073],{"class":676},[662,3845,3846],{"class":724},"\u002F\u002F höchstens alle 60 Sekunden neu bauen\n",[662,3848,3849],{"class":664,"line":765},[662,3850,3851],{"class":676},"  };\n",[662,3853,3854],{"class":664,"line":770},[662,3855,2423],{"class":676},[11,3857,3858,3859,3862],{},"Diese eine Zeile, ",[604,3860,3861],{},"revalidate",", ist der ganze Zauber. Du musst nicht mehr die komplette\nSeite neu deployen, nur weil sich ein Blogeintrag geändert hat.",[42,3864,3865],{},[11,3866,3867,3868,3871],{},"Schnell ",[946,3869,3870],{},"und"," aktuell war früher ein Widerspruch. ISR macht daraus eine Konfiguration.",[18,3873,3875],{"id":3874},"warum-mich-das-überzeugt","Warum mich das überzeugt",[11,3877,3878],{},"Ich baue viel für Ateliers, kleine Studios und Portfolios — Seiten, die selten, aber doch\nregelmäßig aktualisiert werden. Bisher hieß das: bei jeder Änderung ein voller Rebuild, der\nbei vielen Seiten Minuten dauern kann. Mit ISR aktualisiert sich nur die betroffene Seite,\nund das ohne, dass ich überhaupt etwas anstoße.",[11,3880,3881],{},"Für die Besucher:innen bedeutet das Ladezeiten wie bei einer reinen Static Site, für meine\nKund:innen bedeutet es, dass ihre Inhalte ohne technische Hürde aktuell bleiben. Niemand\nmuss auf einen Deploy warten.",[18,3883,3885],{"id":3884},"worauf-ich-achte","Worauf ich achte",[11,3887,3888,3889,3891],{},"ISR ist kein Allheilmittel. Für hochdynamische Daten — Warenkörbe, Live-Preise — bleibt\nserverseitiges Rendern die bessere Wahl. Und das ",[604,3890,3861],{},"-Intervall will mit Bedacht\ngewählt sein: zu kurz, und du verschenkst den Cache-Vorteil; zu lang, und die Inhalte\nfühlen sich abgestanden an.",[11,3893,3894],{},"Für die allermeisten Content-Seiten aber hat ISR meine Standardarchitektur verändert. Es\nist eine dieser seltenen Funktionen, die ein altes Dilemma nicht umgeht, sondern auflöst —\nund das ist für mich die eleganteste Form von Fortschritt.",[848,3896,3897],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":70,"searchDepth":71,"depth":71,"links":3899},[3900,3901,3902],{"id":3783,"depth":71,"text":3784},{"id":3874,"depth":71,"text":3875},{"id":3884,"depth":71,"text":3885},"2020-07-27","Next.js 9.5 brachte ISR — statische Geschwindigkeit mit frischen Inhalten. Warum das verändert hat, wie ich Content-Seiten ausliefere.",{},"\u002Fblog\u002Fde\u002Fnextjs-incremental-static-regeneration",{"title":3775,"description":3904},"blog\u002Fde\u002Fnextjs-incremental-static-regeneration",[2583,1224,1225],"2KE-O3F-jgZoIJl2rdMM7L44N7R7Yomos_O7ayI9ZMo",{"id":3912,"title":3913,"body":3914,"cover":76,"date":3962,"description":3963,"draft":79,"extension":80,"locale":81,"meta":3964,"navigation":83,"path":3965,"seo":3966,"stem":3967,"tags":3968,"__hash__":3971},"blog\u002Fblog\u002Fde\u002Fworking-remotely-2020.md","Aus der Ferne: Arbeiten im Jahr 2020",{"type":8,"value":3915,"toc":3957},[3916,3919,3923,3926,3929,3934,3938,3941,3944,3948,3951,3954],[11,3917,3918],{},"Vor ein paar Monaten war Remote-Arbeit für viele noch ein nettes Extra. Heute, im Frühjahr\n2020, ist sie für die meisten von uns plötzlich der Alltag. Ich arbeite seit Jahren von\nRosenheim aus mit Kund:innen in ganz Deutschland zusammen — und doch fühlt sich dieser\nMoment anders an. Es ist, als hätte die ganze Branche über Nacht denselben Sprung gewagt.",[18,3920,3922],{"id":3921},"fokus-ist-kein-zufall","Fokus ist kein Zufall",[11,3924,3925],{},"Das Schöne an der Distanz: Niemand klopft mir auf die Schulter, während ich mitten in einem\nShader oder einem Layout stecke. Tiefe Arbeit braucht ungestörte Stunden, und die finde ich\nzu Hause leichter als in jedem Großraumbüro.",[11,3927,3928],{},"Aber Fokus passiert nicht von allein. Ich habe gelernt, meinen Tag zu rahmen: klare\nBlöcke für gestalterisches Arbeiten am Vormittag, Abstimmungen am Nachmittag. Ohne diese\nStruktur zerfließt der Tag — und mit ihm die Energie für die wirklich kreativen Aufgaben.",[42,3930,3931],{},[11,3932,3933],{},"Distanz zwingt zu Klarheit. Was nicht aufgeschrieben ist, existiert für das Team nicht.",[18,3935,3937],{"id":3936},"asynchron-denken","Asynchron denken",[11,3939,3940],{},"Die größte Umstellung ist nicht das Werkzeug, sondern die Haltung. Asynchrone\nZusammenarbeit heißt: Ich beantworte nicht jede Nachricht sofort, sondern schreibe Dinge so\nauf, dass die andere Person auch in drei Stunden noch alles versteht.",[11,3942,3943],{},"Ein guter Screenshot mit zwei Sätzen Kontext spart eine halbe Stunde Videocall. Ein\nsauber dokumentierter Branch erklärt sich selbst. Diese Sorgfalt im Schreiben hat meine\nArbeit insgesamt geschärft — auch dort, wo niemand mitliest.",[18,3945,3947],{"id":3946},"kreativität-braucht-reibung","Kreativität braucht Reibung",[11,3949,3950],{},"Was mir fehlt, ist die zufällige Begegnung. Das schnelle Skizzieren auf einem Blatt\nPapier, das jemand über den Tisch schiebt. Ideen entstehen oft im Dazwischen, und genau\ndieses Dazwischen ist online schwerer herzustellen.",[11,3952,3953],{},"Ich versuche, es bewusst zu ersetzen: ein offener Videocall ohne Agenda, in dem wir einfach\nlaut nachdenken. Ein geteiltes Moodboard, an dem über Tage hinweg gewachsen wird. Es ist\nnicht dasselbe, aber es funktioniert — wenn man es ernst nimmt.",[11,3955,3956],{},"Ob diese Phase vorübergeht oder bleibt, weiß ich nicht. Aber ich merke, dass sie mich zu\neinem disziplinierteren und zugleich rücksichtsvolleren Mitarbeiter macht. Vielleicht ist\ndas die eigentliche Lehre von 2020: dass gute Arbeit nicht vom Ort abhängt, sondern von der\nAufmerksamkeit, die wir ihr und einander schenken.",{"title":70,"searchDepth":71,"depth":71,"links":3958},[3959,3960,3961],{"id":3921,"depth":71,"text":3922},{"id":3936,"depth":71,"text":3937},{"id":3946,"depth":71,"text":3947},"2020-04-15","Eine persönliche Reflexion darüber, wie Remote-Arbeit 2020 zur Norm wurde — über Fokus, asynchrone Zusammenarbeit und Kreativität auf Distanz.",{},"\u002Fblog\u002Fde\u002Fworking-remotely-2020",{"title":3913,"description":3963},"blog\u002Fde\u002Fworking-remotely-2020",[282,3969,3970],"Remote","Arbeit","BEyZNhf3EDf-c0NVEnNKRX_X6xhhtel3MYiejmFlcik",{"id":3973,"title":3974,"body":3975,"cover":76,"date":4100,"description":4101,"draft":79,"extension":80,"locale":81,"meta":4102,"navigation":83,"path":4103,"seo":4104,"stem":4105,"tags":4106,"__hash__":4107},"blog\u002Fblog\u002Fde\u002Fwebgl-shader-basics.md","Shader verstehen: GLSL für Gestalter",{"type":8,"value":3976,"toc":4095},[3977,3980,3984,3995,3998,4007,4011,4022,4067,4074,4078,4081,4092],[11,3978,3979],{},"Als ich das erste Mal einen Shader geschrieben habe, fühlte sich das an wie Malen mit\nMathematik. Kein Layer, kein Pinsel — nur eine kleine Funktion, die für jeden einzelnen\nPixel entscheidet, welche Farbe er bekommt. Für mich als Gestalter war das ein\nAugenöffner, und genau deshalb möchte ich dir die Angst davor nehmen.",[18,3981,3983],{"id":3982},"vertex-und-fragment-zwei-schritte-eine-bühne","Vertex und Fragment: zwei Schritte, eine Bühne",[11,3985,3986,3987,3990,3991,3994],{},"Ein Shader-Programm läuft in zwei Etappen. Der ",[227,3988,3989],{},"Vertex-Shader"," kümmert sich um\nPositionen — er verschiebt die Eckpunkte deiner Geometrie im Raum. Der ",[227,3992,3993],{},"Fragment-Shader","\nläuft danach und entscheidet für jedes Pixel auf der Oberfläche, welche Farbe es trägt.",[11,3996,3997],{},"Für visuelle Effekte ist meistens der Fragment-Shader der spannende Teil. Stell ihn dir\nals eine Funktion vor, die millionenfach parallel auf der Grafikkarte ausgeführt wird —\neinmal pro Pixel, alle gleichzeitig. Diese Parallelität ist der Grund, warum Shader so\nflüssig laufen.",[42,3999,4000],{},[11,4001,4002,4003,4006],{},"Ein Shader denkt nicht in Formen, sondern in Koordinaten. Du beschreibst nicht ",[946,4004,4005],{},"was","\ngezeichnet wird, sondern wie sich Farbe über die Fläche verteilt.",[18,4008,4010],{"id":4009},"uniforms-der-draht-zwischen-welt-und-gpu","Uniforms: der Draht zwischen Welt und GPU",[11,4012,4013,4014,4017,4018,4021],{},"Shader leben isoliert auf der GPU. Damit sie von außen etwas mitbekommen, gibt es\n",[227,4015,4016],{},"Uniforms"," — Werte, die du aus deinem JavaScript hineinreichst und die für alle Pixel\ngleich sind. Klassiker sind ",[604,4019,4020],{},"time"," für Animationen, die Mauskoordinaten oder die Auflösung\ndes Canvas.",[654,4023,4027],{"className":4024,"code":4025,"language":4026,"meta":70,"style":70},"language-glsl shiki shiki-themes github-light github-dark","uniform float time;\nuniform vec2 resolution;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy \u002F resolution;\n  float wave = sin(uv.x * 10.0 + time);\n  gl_FragColor = vec4(uv.x, uv.y, wave, 1.0);\n}\n","glsl",[604,4028,4029,4034,4039,4043,4048,4053,4058,4063],{"__ignoreMap":70},[662,4030,4031],{"class":664,"line":665},[662,4032,4033],{},"uniform float time;\n",[662,4035,4036],{"class":664,"line":71},[662,4037,4038],{},"uniform vec2 resolution;\n",[662,4040,4041],{"class":664,"line":742},[662,4042,745],{"emptyLinePlaceholder":83},[662,4044,4045],{"class":664,"line":748},[662,4046,4047],{},"void main() {\n",[662,4049,4050],{"class":664,"line":754},[662,4051,4052],{},"  vec2 uv = gl_FragCoord.xy \u002F resolution;\n",[662,4054,4055],{"class":664,"line":765},[662,4056,4057],{},"  float wave = sin(uv.x * 10.0 + time);\n",[662,4059,4060],{"class":664,"line":770},[662,4061,4062],{},"  gl_FragColor = vec4(uv.x, uv.y, wave, 1.0);\n",[662,4064,4065],{"class":664,"line":776},[662,4066,2423],{},[11,4068,4069,4070,4073],{},"Diese paar Zeilen erzeugen bereits einen lebendigen Farbverlauf, der sich über die Zeit\nbewegt. ",[604,4071,4072],{},"uv"," normalisiert die Pixelposition auf einen Bereich von 0 bis 1 — dein\nKoordinatensystem, in dem du denkst.",[18,4075,4077],{"id":4076},"warum-sich-der-aufwand-lohnt","Warum sich der Aufwand lohnt",[11,4079,4080],{},"Mit CSS und SVG kommst du weit, aber irgendwann stößt du an eine Wand: organische\nVerläufe, flüssige Verzerrungen, generative Muster, die in keiner Bilddatei stecken.\nShader laufen direkt auf der Grafikkarte und rechnen Effekte in Echtzeit, die als Video\noder GIF zu schwer und zu starr wären.",[11,4082,4083,4084,4087,4088,4091],{},"Für mich sind Shader das Werkzeug, mit dem eine Website nicht mehr nur ",[946,4085,4086],{},"aussieht",", sondern\n",[946,4089,4090],{},"atmet",". Du musst kein Mathematiker sein, um anzufangen — ein bisschen Trigonometrie, viel\nAusprobieren und die Bereitschaft, in Koordinaten statt in Ebenen zu denken. Fang klein an,\nverändere eine Zahl, beobachte was passiert. Genau dieses Spiel ist der Kern der Sache.",[848,4093,4094],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":70,"searchDepth":71,"depth":71,"links":4096},[4097,4098,4099],{"id":3982,"depth":71,"text":3983},{"id":4009,"depth":71,"text":4010},{"id":4076,"depth":71,"text":4077},"2020-03-10","Eine sanfte Einführung in GLSL-Fragment-Shader für Gestalter — was Vertex und Fragment unterscheidet und warum Shader einzigartige Visuals ermöglichen.",{},"\u002Fblog\u002Fde\u002Fwebgl-shader-basics",{"title":3974,"description":4101},"blog\u002Fde\u002Fwebgl-shader-basics",[1616,1615,575],"q3mln_zjwzs5gNNq6oUdoi0RLsuTTVa2KapbgAK5Ung",{"id":4109,"title":4110,"body":4111,"cover":76,"date":4151,"description":4152,"draft":79,"extension":80,"locale":81,"meta":4153,"navigation":83,"path":4154,"seo":4155,"stem":4156,"tags":4157,"__hash__":4158},"blog\u002Fblog\u002Fde\u002Fwhy-i-went-freelance.md","Warum ich selbstständig wurde",{"type":8,"value":4112,"toc":4147},[4113,4116,4120,4123,4128,4131,4135,4138,4141,4144],[11,4114,4115],{},"Es gibt keinen einzelnen Moment, an dem ich beschlossen habe, selbstständig zu werden. Es war eher ein leises, beharrliches Gefühl, das über Monate gewachsen ist — das Gefühl, dass ich Arbeit machen wollte, die nach jemandem aussieht. Nach einem Menschen, nicht nach einer Vorlage.",[18,4117,4119],{"id":4118},"gegen-die-schablone","Gegen die Schablone",[11,4121,4122],{},"Ich habe in meinen Jahren als Entwickler und Designer viele Websites gesehen, die austauschbar waren. Dasselbe Raster, dieselbe Heldensektion, dieselbe nichtssagende Glätte. Technisch sauber, aber ohne Seele. Und ich habe gemerkt, dass mich genau diese Beliebigkeit unruhig macht.",[42,4124,4125],{},[11,4126,4127],{},"Eine Website darf ruhig anecken, solange sie etwas zu sagen hat. Was mich stört, ist nicht der Fehler, sondern die Gleichgültigkeit.",[11,4129,4130],{},"In festen Strukturen ist Besonderheit oft das Erste, was wegoptimiert wird. Zu teuer, zu riskant, zu eigenwillig. Ich wollte einen Rahmen, in dem das Besondere nicht die Ausnahme ist, sondern der Ausgangspunkt. Diesen Rahmen musste ich mir selbst bauen.",[18,4132,4134],{"id":4133},"was-unabhängigkeit-für-mich-bedeutet","Was Unabhängigkeit für mich bedeutet",[11,4136,4137],{},"Selbstständigkeit ist für mich kein Lifestyle und kein Statussymbol. Sie ist eine Methode. Sie erlaubt mir, direkt mit den Menschen zu arbeiten, für die ich gestalte — ohne dass die Idee durch fünf Abstimmungsschleifen gefiltert wird, bis nichts Mutiges mehr übrig ist.",[11,4139,4140],{},"Sie bedeutet auch, dass ich für meine Entscheidungen geradestehe. Wenn ich vorschlage, ein Detail noch einmal zu überarbeiten, weil es besser sein kann, dann trage ich die Folgen selbst. Diese Ehrlichkeit mir selbst gegenüber ist mir mehr wert als jede Sicherheit.",[11,4142,4143],{},"Natürlich ist es nicht nur romantisch. Selbstständig heißt auch Buchhaltung, Akquise und Tage, an denen ich mehr Unternehmer als Gestalter bin. Aber selbst an diesen Tagen weiß ich, wofür. Jedes Projekt ist meines. Jeder Erfolg gehört mir und meinen Kunden gemeinsam.",[11,4145,4146],{},"Ich bin seit 2018 in diesem Handwerk unterwegs, und dieser Schritt fühlt sich nicht wie ein Risiko an, sondern wie eine Konsequenz. Ich baue lieber wenige Websites, an die man sich erinnert, als viele, die man sofort vergisst. Genau dafür wollte ich frei sein.",{"title":70,"searchDepth":71,"depth":71,"links":4148},[4149,4150],{"id":4118,"depth":71,"text":4119},{"id":4133,"depth":71,"text":4134},"2019-11-02","Eine persönliche Reflexion darüber, warum ich die Unabhängigkeit gewählt habe — um besondere Websites zu bauen statt Schablonen von der Stange.",{},"\u002Fblog\u002Fde\u002Fwhy-i-went-freelance",{"title":4110,"description":4152},"blog\u002Fde\u002Fwhy-i-went-freelance",[282,91],"DVS7giex4-r7svIOUrPxer4WXFjbM4PJO0d-WDY1bcY",{"id":4160,"title":4161,"body":4162,"cover":76,"date":4288,"description":4289,"draft":79,"extension":80,"locale":81,"meta":4290,"navigation":83,"path":4291,"seo":4292,"stem":4293,"tags":4294,"__hash__":4295},"blog\u002Fblog\u002Fde\u002Fthreejs-in-the-browser-2019.md","Three.js 2019: 3D wird alltagstauglich",{"type":8,"value":4163,"toc":4284},[4164,4167,4171,4174,4261,4264,4268,4271,4276,4279,4282],[11,4165,4166],{},"Es gab eine Zeit, da war 3D im Browser ein Versprechen für die Zukunft. Beeindruckend in Demos, aber zu schwer, zu instabil, zu wählerisch bei der Hardware, um es einem echten Kunden zuzumuten. Dieses Jahr habe ich gemerkt, dass sich das Blatt gewendet hat. WebGL läuft heute zuverlässig, Mobilgeräte sind erstaunlich potent geworden, und Three.js hat sich von einer Spielwiese zu einem ernsthaften Werkzeug entwickelt.",[18,4168,4170],{"id":4169},"von-der-tech-demo-zur-echten-seite","Von der Tech-Demo zur echten Seite",[11,4172,4173],{},"Was sich verändert hat, ist nicht eine einzelne Technologie, sondern ihr Reifegrad. Three.js abstrahiert die rohe WebGL-Komplexität so weit, dass ich mich auf die Idee konzentrieren kann statt auf Shader-Mathematik.",[654,4175,4177],{"className":2663,"code":4176,"language":2665,"meta":70,"style":70},"const scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(75, ratio, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\n",[604,4178,4179,4199,4234],{"__ignoreMap":70},[662,4180,4181,4183,4186,4188,4190,4192,4194,4197],{"class":664,"line":665},[662,4182,2672],{"class":690},[662,4184,4185],{"class":668}," scene",[662,4187,2378],{"class":690},[662,4189,2680],{"class":690},[662,4191,2683],{"class":668},[662,4193,2686],{"class":676},[662,4195,4196],{"class":680},"Scene",[662,4198,2717],{"class":676},[662,4200,4201,4203,4206,4208,4210,4212,4214,4217,4219,4222,4225,4228,4230,4232],{"class":664,"line":71},[662,4202,2672],{"class":690},[662,4204,4205],{"class":668}," camera",[662,4207,2378],{"class":690},[662,4209,2680],{"class":690},[662,4211,2683],{"class":668},[662,4213,2686],{"class":676},[662,4215,4216],{"class":680},"PerspectiveCamera",[662,4218,2352],{"class":676},[662,4220,4221],{"class":668},"75",[662,4223,4224],{"class":676},", ratio, ",[662,4226,4227],{"class":668},"0.1",[662,4229,2073],{"class":676},[662,4231,2694],{"class":668},[662,4233,2392],{"class":676},[662,4235,4236,4238,4241,4243,4245,4247,4249,4252,4255,4258],{"class":664,"line":742},[662,4237,2672],{"class":690},[662,4239,4240],{"class":668}," renderer",[662,4242,2378],{"class":690},[662,4244,2680],{"class":690},[662,4246,2683],{"class":668},[662,4248,2686],{"class":676},[662,4250,4251],{"class":680},"WebGLRenderer",[662,4253,4254],{"class":676},"({ antialias: ",[662,4256,4257],{"class":668},"true",[662,4259,4260],{"class":676}," });\n",[11,4262,4263],{},"Drei Zeilen, und ich habe eine Bühne, eine Kamera und einen Renderer. Der Rest ist Gestaltung. Genau das macht den Unterschied: Die Technik tritt zurück, und das Kreative tritt nach vorn.",[18,4265,4267],{"id":4266},"wo-3d-heute-wirklich-glänzt","Wo 3D heute wirklich glänzt",[11,4269,4270],{},"Ich sehe die spannendsten Möglichkeiten nicht in vollflächigen 3D-Welten, sondern in gezielten Momenten. Ein Produkt, das man mit dem Mauszeiger drehen kann. Eine Heldensektion, in der sich Geometrie sanft mit dem Scrollen bewegt. Ein Material, das im Licht wirklich nach Material aussieht.",[42,4272,4273],{},[11,4274,4275],{},"3D ist dann am stärksten, wenn der Besucher nicht „3D“ denkt, sondern einfach das Gefühl hat, dass diese Seite lebt.",[11,4277,4278],{},"Natürlich bleibt Verantwortung gefragt. Eine 3D-Szene darf eine Seite nicht in die Knie zwingen. Ich achte auf Polygonbudgets, lade Assets verzögert, und ich frage immer zuerst: Trägt das die Idee — oder ist es nur Effekt? Wenn 3D nur glänzt, ohne etwas zu sagen, lasse ich es weg.",[11,4280,4281],{},"Für mich ist 2019 das Jahr, in dem 3D im Web vom Risiko zur Option geworden ist. Es ist kein Argument mehr, das ich gegen Skepsis verteidigen muss, sondern ein Pinsel mehr in meinem Werkzeugkasten. Und ehrlich gesagt: einer der schönsten.",[848,4283,2814],{},{"title":70,"searchDepth":71,"depth":71,"links":4285},[4286,4287],{"id":4169,"depth":71,"text":4170},{"id":4266,"depth":71,"text":4267},"2019-09-24","WebGL und Three.js sind reif geworden — interaktives 3D ist 2019 auch auf ganz normalen Marketing-Seiten endlich realistisch.",{},"\u002Fblog\u002Fde\u002Fthreejs-in-the-browser-2019",{"title":4161,"description":4289},"blog\u002Fde\u002Fthreejs-in-the-browser-2019",[1616,1615,1614],"P_IVi1iosB8ZYidpUs1OAkbxvWMh52aTNv1o1sAv4PY",{"id":4297,"title":4298,"body":4299,"cover":76,"date":4409,"description":4410,"draft":79,"extension":80,"locale":81,"meta":4411,"navigation":83,"path":4412,"seo":4413,"stem":4414,"tags":4415,"__hash__":4416},"blog\u002Fblog\u002Fde\u002Fnextjs-9-static-optimization.md","Next.js 9: statisch, schnell, durchdacht",{"type":8,"value":4300,"toc":4405},[4301,4304,4308,4315,4320,4323,4327,4334,4393,4396,4399,4402],[11,4302,4303],{},"Mit React arbeite ich gerne, aber die nackte Frage „Wie kommt das eigentlich performant auf den Server?“ hat mich lange begleitet. Next.js war schon davor meine Antwort. Doch Version 9, die diesen Sommer erschien, fühlt sich an wie der Moment, in dem das Framework wirklich erwachsen wird.",[18,4305,4307],{"id":4306},"automatische-statische-optimierung","Automatische statische Optimierung",[11,4309,4310,4311,4314],{},"Der für mich wichtigste Schritt: Next.js erkennt nun selbstständig, welche Seiten keine serverseitigen Daten brauchen, und rendert sie automatisch als statisches HTML. Ich muss nichts konfigurieren. Eine Seite ohne ",[604,4312,4313],{},"getInitialProps"," wird statisch ausgeliefert — blitzschnell, cachebar, ohne laufenden Server-Render.",[42,4316,4317],{},[11,4318,4319],{},"Die beste Performance-Optimierung ist die, über die ich nicht nachdenken muss.",[11,4321,4322],{},"Und das Schöne: Es ist kein Entweder-oder. Auf derselben Seite kann eine statische Landingpage neben einer datengetriebenen, serverseitig gerenderten Route stehen. Diese Hybridität ist genau das, was echte Projekte brauchen — denn fast nie ist eine Website komplett statisch oder komplett dynamisch.",[18,4324,4326],{"id":4325},"api-routen-ohne-extra-backend","API-Routen, ohne extra Backend",[11,4328,4329,4330,4333],{},"Der zweite große Gewinn sind die API-Routen. Eine Datei unter ",[604,4331,4332],{},"pages\u002Fapi\u002F"," wird zum Endpunkt:",[654,4335,4337],{"className":2663,"code":4336,"language":2665,"meta":70,"style":70},"export default function handler(req, res) {\n  res.status(200).json({ name: \"Max\" });\n}\n",[604,4338,4339,4362,4389],{"__ignoreMap":70},[662,4340,4341,4343,4345,4347,4350,4352,4355,4357,4360],{"class":664,"line":665},[662,4342,2432],{"class":690},[662,4344,2435],{"class":690},[662,4346,2346],{"class":690},[662,4348,4349],{"class":680}," handler",[662,4351,2352],{"class":676},[662,4353,4354],{"class":2355},"req",[662,4356,2073],{"class":676},[662,4358,4359],{"class":2355},"res",[662,4361,2359],{"class":676},[662,4363,4364,4367,4370,4372,4375,4378,4381,4384,4387],{"class":664,"line":71},[662,4365,4366],{"class":676},"  res.",[662,4368,4369],{"class":680},"status",[662,4371,2352],{"class":676},[662,4373,4374],{"class":668},"200",[662,4376,4377],{"class":676},").",[662,4379,4380],{"class":680},"json",[662,4382,4383],{"class":676},"({ name: ",[662,4385,4386],{"class":672},"\"Max\"",[662,4388,4260],{"class":676},[662,4390,4391],{"class":664,"line":742},[662,4392,2423],{"class":676},[11,4394,4395],{},"Für ein Kontaktformular, einen Newsletter-Handler oder eine kleine Datenabfrage brauche ich kein separates Backend mehr. Front- und Backend leben im selben Projekt, in derselben Sprache, mit demselben Deployment. Für kleinere Marken- und Portfolio-Seiten, wie ich sie oft baue, ist das eine enorme Vereinfachung.",[11,4397,4398],{},"Was mich an Next.js 9 begeistert, ist nicht eine einzelne Funktion, sondern die Haltung dahinter. Das Framework trifft sinnvolle Standardentscheidungen, lässt mir aber jederzeit die Kontrolle, wenn ich sie brauche. Es nimmt mir die langweilige Arbeit ab und überlässt mir die interessante.",[11,4400,4401],{},"Schnelle Seiten sind kein Luxus, sondern Respekt vor den Menschen, die sie besuchen. Next.js 9 macht es leichter, diesen Respekt einzulösen — und genau deshalb wird es zu meinem Standardwerkzeug für React-Projekte.",[848,4403,4404],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":70,"searchDepth":71,"depth":71,"links":4406},[4407,4408],{"id":4306,"depth":71,"text":4307},{"id":4325,"depth":71,"text":4326},"2019-07-09","Next.js 9 brachte API-Routen und automatische statische Optimierung — und macht hybride Seiten aus statisch und serverseitig endlich mühelos.",{},"\u002Fblog\u002Fde\u002Fnextjs-9-static-optimization",{"title":4298,"description":4410},"blog\u002Fde\u002Fnextjs-9-static-optimization",[2583,2584,1225],"drWlwj7TZZSn1PQ74N8TC_rsCw4p2y5m_2Ct_bAUAJ8",{"id":4418,"title":4419,"body":4420,"cover":76,"date":4540,"description":4541,"draft":79,"extension":80,"locale":81,"meta":4542,"navigation":83,"path":4543,"seo":4544,"stem":4545,"tags":4546,"__hash__":4547},"blog\u002Fblog\u002Fde\u002Fcss-grid-modern-layout.md","CSS Grid und das Ende der Layout-Hacks",{"type":8,"value":4421,"toc":4536},[4422,4429,4433,4439,4508,4515,4519,4522,4527,4530,4533],[11,4423,4424,4425,4428],{},"Ich habe Jahre damit verbracht, Layouts zu bauen, die eigentlich gar keine Layouts waren — sondern clevere Notlösungen. Floats, die geräumt werden mussten. Clearfix-Hacks. Spalten, die mit ",[604,4426,4427],{},"display: table"," so taten, als wären sie ein Raster. Heute kann ich sagen: Diese Zeit ist vorbei. CSS Grid ist in allen großen Browsern zuverlässig nutzbar, und es verändert, wie ich über Gestaltung im Web nachdenke.",[18,4430,4432],{"id":4431},"vom-workaround-zum-echten-werkzeug","Vom Workaround zum echten Werkzeug",[11,4434,4435,4436,4438],{},"Flexbox war ein Segen — aber Flexbox ist eindimensional. Es ordnet Dinge in einer Reihe oder einer Spalte. Sobald ich zwei Dimensionen gleichzeitig brauchte, begann das Schachteln und Tricksen. Grid denkt von Anfang an in Zeilen ",[946,4437,3870],{}," Spalten.",[654,4440,4444],{"className":4441,"code":4442,"language":4443,"meta":70,"style":70},"language-css shiki shiki-themes github-light github-dark",".layout {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  gap: 1.5rem;\n}\n","css",[604,4445,4446,4453,4465,4489,4504],{"__ignoreMap":70},[662,4447,4448,4451],{"class":664,"line":665},[662,4449,4450],{"class":680},".layout",[662,4452,3679],{"class":676},[662,4454,4455,4458,4460,4463],{"class":664,"line":71},[662,4456,4457],{"class":668},"  display",[662,4459,3717],{"class":676},[662,4461,4462],{"class":668},"grid",[662,4464,2367],{"class":676},[662,4466,4467,4470,4472,4475,4477,4480,4482,4484,4487],{"class":664,"line":742},[662,4468,4469],{"class":668},"  grid-template-columns",[662,4471,3717],{"class":676},[662,4473,4474],{"class":668},"repeat",[662,4476,2352],{"class":676},[662,4478,4479],{"class":668},"12",[662,4481,2073],{"class":676},[662,4483,3442],{"class":668},[662,4485,4486],{"class":690},"fr",[662,4488,2392],{"class":676},[662,4490,4491,4494,4496,4499,4502],{"class":664,"line":748},[662,4492,4493],{"class":668},"  gap",[662,4495,3717],{"class":676},[662,4497,4498],{"class":668},"1.5",[662,4500,4501],{"class":690},"rem",[662,4503,2367],{"class":676},[662,4505,4506],{"class":664,"line":754},[662,4507,2423],{"class":676},[11,4509,4510,4511,4514],{},"Plötzlich kann ich ein Raster beschreiben, statt es zu erschummeln. Und mit ",[604,4512,4513],{},"grid-template-areas"," lese ich mein Layout fast wie eine kleine Karte des Designs.",[18,4516,4518],{"id":4517},"editorial-denken-nicht-in-boxen","Editorial denken, nicht in Boxen",[11,4520,4521],{},"Was mich wirklich begeistert, ist die gestalterische Freiheit. Endlich lassen sich Layouts bauen, die sich nach Magazin anfühlen — überlappende Elemente, asymmetrische Raster, Inhalte, die bewusst aus der Reihe tanzen. Dinge, die im Print selbstverständlich waren und im Web jahrelang mühsam blieben.",[42,4523,4524],{},[11,4525,4526],{},"Layout ist kein technisches Problem mehr, das es zu lösen gilt. Es ist wieder eine gestalterische Entscheidung.",[11,4528,4529],{},"Für mich als jemand, der zwischen Design und Entwicklung lebt, ist das der eigentliche Gewinn. Ich muss meine Ideen nicht mehr an dem ausrichten, was technisch gerade so geht. Ich kann das Layout entwerfen, das die Inhalte verdienen, und Grid trägt es.",[11,4531,4532],{},"Ein letzter Gedanke: Grid ersetzt Flexbox nicht, es ergänzt es. Grid für das große Ganze, Flexbox für die Feinheiten innerhalb der Komponenten. Zusammen geben sie mir endlich das Werkzeug, von dem ich seit Jahren geträumt habe — und ich merke, wie meine Entwürfe wieder mutiger werden.",[848,4534,4535],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":70,"searchDepth":71,"depth":71,"links":4537},[4538,4539],{"id":4431,"depth":71,"text":4432},{"id":4517,"depth":71,"text":4518},"2019-05-12","CSS Grid ist endlich zuverlässig in allen Browsern angekommen — und befreit das Web-Layout von Float-Tricks und Flexbox-Verrenkungen.",{},"\u002Fblog\u002Fde\u002Fcss-grid-modern-layout",{"title":4419,"description":4541},"blog\u002Fde\u002Fcss-grid-modern-layout",[3771,2261,1023],"SqE1kWsrJ8tV3z_pHDFBOwKJyp9XWfWPLvJKoTtp9sE",{"id":4549,"title":4550,"body":4551,"cover":76,"date":4758,"description":4759,"draft":79,"extension":80,"locale":81,"meta":4760,"navigation":83,"path":4761,"seo":4762,"stem":4763,"tags":4764,"__hash__":4766},"blog\u002Fblog\u002Fde\u002Freact-hooks-change-everything.md","Wie React Hooks alles veränderten",{"type":8,"value":4552,"toc":4754},[4553,4563,4567,4581,4586,4589,4719,4722,4726,4739,4742,4748,4751],[11,4554,4555,4556,2558,4559,4562],{},"Als React 16.8 im Februar dieses Jahres die Hooks brachte, hatte ich ehrlich gesagt erst Skepsis. Class-Komponenten waren mein Alltag, und ich hatte gelernt, mit ihren Eigenheiten zu leben. Doch nach wenigen Tagen mit ",[604,4557,4558],{},"useState",[604,4560,4561],{},"useEffect"," war klar: Das ist kein neues Feature. Das ist eine neue Art zu denken.",[18,4564,4566],{"id":4565},"weniger-gerüst-mehr-logik","Weniger Gerüst, mehr Logik",[11,4568,4569,4570,4573,4574,2558,4577,4580],{},"Was mich am meisten überrascht hat, war wie viel Ballast plötzlich verschwand. Kein ",[604,4571,4572],{},"this",", keine Bindings im Konstruktor, kein verstreutes ",[604,4575,4576],{},"componentDidMount",[604,4578,4579],{},"componentWillUnmount",", die eigentlich zusammengehören. Mit Hooks lebt zusammenhängende Logik endlich auch zusammen.",[42,4582,4583],{},[11,4584,4585],{},"Eine Komponente sollte sich wie ein klarer Gedanke lesen lassen, nicht wie ein Protokoll von Lebenszyklus-Ereignissen.",[11,4587,4588],{},"Ein Beispiel aus meiner täglichen Arbeit:",[654,4590,4592],{"className":2334,"code":4591,"language":2336,"meta":70,"style":70},"function ProfileCard({ userId }) {\n  const [user, setUser] = useState(null);\n\n  useEffect(() => {\n    fetchUser(userId).then(setUser);\n  }, [userId]);\n\n  return user ? \u003CCard data={user} \u002F> : \u003CSpinner \u002F>;\n}\n",[604,4593,4594,4611,4641,4645,4657,4671,4676,4680,4715],{"__ignoreMap":70},[662,4595,4596,4599,4602,4605,4608],{"class":664,"line":665},[662,4597,4598],{"class":690},"function",[662,4600,4601],{"class":680}," ProfileCard",[662,4603,4604],{"class":676},"({ ",[662,4606,4607],{"class":2355},"userId",[662,4609,4610],{"class":676}," }) {\n",[662,4612,4613,4615,4618,4621,4623,4626,4629,4631,4634,4636,4639],{"class":664,"line":71},[662,4614,2372],{"class":690},[662,4616,4617],{"class":676}," [",[662,4619,4620],{"class":668},"user",[662,4622,2073],{"class":676},[662,4624,4625],{"class":668},"setUser",[662,4627,4628],{"class":676},"] ",[662,4630,2466],{"class":690},[662,4632,4633],{"class":680}," useState",[662,4635,2352],{"class":676},[662,4637,4638],{"class":668},"null",[662,4640,2392],{"class":676},[662,4642,4643],{"class":664,"line":742},[662,4644,745],{"emptyLinePlaceholder":83},[662,4646,4647,4650,4653,4655],{"class":664,"line":748},[662,4648,4649],{"class":680},"  useEffect",[662,4651,4652],{"class":676},"(() ",[662,4654,3013],{"class":690},[662,4656,3679],{"class":676},[662,4658,4659,4662,4665,4668],{"class":664,"line":754},[662,4660,4661],{"class":680},"    fetchUser",[662,4663,4664],{"class":676},"(userId).",[662,4666,4667],{"class":680},"then",[662,4669,4670],{"class":676},"(setUser);\n",[662,4672,4673],{"class":664,"line":765},[662,4674,4675],{"class":676},"  }, [userId]);\n",[662,4677,4678],{"class":664,"line":770},[662,4679,745],{"emptyLinePlaceholder":83},[662,4681,4682,4684,4687,4690,4693,4696,4699,4701,4704,4707,4709,4712],{"class":664,"line":776},[662,4683,2448],{"class":690},[662,4685,4686],{"class":676}," user ",[662,4688,4689],{"class":690},"?",[662,4691,4692],{"class":676}," \u003C",[662,4694,4695],{"class":668},"Card",[662,4697,4698],{"class":680}," data",[662,4700,2466],{"class":690},[662,4702,4703],{"class":676},"{user} \u002F> ",[662,4705,4706],{"class":690},":",[662,4708,4692],{"class":676},[662,4710,4711],{"class":668},"Spinner",[662,4713,4714],{"class":676}," \u002F>;\n",[662,4716,4717],{"class":664,"line":784},[662,4718,2423],{"class":676},[11,4720,4721],{},"Früher hätte das eine Class-Komponente mit State, Konstruktor und zwei Lifecycle-Methoden gebraucht. Jetzt ist es ein paar Zeilen, die genau das sagen, was sie tun.",[18,4723,4725],{"id":4724},"wiederverwendung-die-sich-richtig-anfühlt","Wiederverwendung, die sich richtig anfühlt",[11,4727,4728,4729,2073,4732,2073,4735,4738],{},"Der eigentliche Durchbruch sind für mich aber Custom Hooks. Logik, die ich vorher mühsam über Higher-Order-Components oder Render-Props geteilt habe, lässt sich nun in eine eigene Funktion auslagern — ",[604,4730,4731],{},"useScrollPosition",[604,4733,4734],{},"useMediaQuery",[604,4736,4737],{},"useFetch",". Das fühlt sich nicht nach einem Trick an, sondern nach der natürlichen Sprache von React.",[11,4740,4741],{},"Genau das macht für mich gute Werkzeuge aus: Sie nehmen dir nicht Komplexität ab, indem sie etwas verstecken, sondern indem sie dich klarer denken lassen. Hooks haben meine Komponenten kleiner, ehrlicher und besser testbar gemacht.",[11,4743,4744,4745,4747],{},"Natürlich gibt es auch Stolpersteine. Das Dependency-Array von ",[604,4746,4561],{}," will verstanden werden, und die Regeln — Hooks nur auf oberster Ebene, nur in Komponenten — sind nicht verhandelbar. Doch das sind kleine Preise für einen großen Gewinn.",[11,4749,4750],{},"Ich bin überzeugt, dass wir in einem Jahr zurückblicken und Class-Komponenten als das sehen werden, was sie waren: ein guter Zwischenschritt. Die Zukunft schreibt sich mit Funktionen.",[848,4752,4753],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":70,"searchDepth":71,"depth":71,"links":4755},[4756,4757],{"id":4565,"depth":71,"text":4566},{"id":4724,"depth":71,"text":4725},"2019-03-18","React 16.8 brachte Anfang 2019 die Hooks — und veränderte für mich grundlegend, wie ich Komponenten denke, schreibe und pflege.",{},"\u002Fblog\u002Fde\u002Freact-hooks-change-everything",{"title":4550,"description":4759},"blog\u002Fde\u002Freact-hooks-change-everything",[2584,3243,4765],"Entwicklung","q_BSPtJTBdFkl3UlcvJYlrqXrsl-rOG1Dqj83HvL0Ro",1787633287025]