WEBVTT

00:00:00.017 --> 00:00:04.527
Tailwind war ja oder ist vor allem meiner Meinung nach so erfolgreich im Vergleich

00:00:04.527 --> 00:00:09.264
zu allen anderen, weil sie halt geschafft haben, eine saubere Dokumentation rauszuhauen.

00:00:10.140 --> 00:00:13.677
Man kann irgendwelche globalen Variablen setzen und überschreiben aus jeder

00:00:13.677 --> 00:00:15.034
beliebigen Zeile Code heraus.

00:00:15.336 --> 00:00:19.067
Nur das ist so weit entfernt von allem, was wir auch nur entfernt in Betracht

00:00:19.067 --> 00:00:21.797
ziehen, dass es aus unserer Realität so weit rausdefiniert ist.

00:00:22.749 --> 00:00:26.617
Sollten wir unseren Code optimieren, damit Agents ihn gut lösen können,

00:00:26.617 --> 00:00:29.517
das können dann eher Projekte und Firmen für sich selber klären.

00:00:29.517 --> 00:00:32.582
Aber ich würde es auch gerne hier mal in den Raum werfen.

00:00:35.526 --> 00:00:38.574
Diese Revision von Working Draft wird euch präsentiert von Midwald.

00:00:38.830 --> 00:00:41.285
Next Level Container Hosting für eure Projekte.

00:00:41.773 --> 00:00:45.497
Wie euch bestimmt nicht entgangen ist, reden alle überall und ständig über Automatisierung

00:00:45.497 --> 00:00:48.071
und Self-Hosting. Und das klingt auch immer alles voll super,

00:00:48.356 --> 00:00:51.207
wenn es denn mal eingerichtet ist und läuft. Nur über diesen Schritt redet fast

00:00:51.207 --> 00:00:53.528
keiner, weil er meist kompliziert und anstrengend ist.

00:00:53.754 --> 00:00:56.907
Aber es gibt eine Ausnahme und das ist Midwald's Container Hosting.

00:00:56.907 --> 00:00:58.248
Und das funktioniert so.

00:00:58.770 --> 00:01:02.973
Erster Schritt, in Midwald's M-Studio einloggen. Ganz einfach und bequem direkt im Browser.

00:01:03.391 --> 00:01:06.891
Zweitens, fünf Minuten für die Konfiguration eures Containers aufwenden.

00:01:07.147 --> 00:01:10.087
Mehr Zeit braucht ihr nicht, denn ihr könnt die meisten Vorschläge für Entry-Points

00:01:10.087 --> 00:01:12.441
und Umgebungsvariablen einfach direkt übernehmen.

00:01:12.946 --> 00:01:16.313
Dritter Schritt, äh, euer Container läuft. Ihr seid fertig. Das war's.

00:01:16.667 --> 00:01:19.807
Von Nerds für Nerds bringt euch Midwald das Beste, was Container-Hosting zu

00:01:19.807 --> 00:01:23.296
bieten hat. Nämlich eure Eintrittskarte ins Automatisierungs-Wunderland.

00:01:23.522 --> 00:01:27.757
Deployt ganz einfach, was ihr wollt, wie ihr wollt. Und alles dazu findet ihr

00:01:27.757 --> 00:01:31.446
auf. mittwald.de slash workingdraft.

00:01:31.661 --> 00:01:36.780
Das war nochmal mittwald.de slash workingdraft.

00:01:37.198 --> 00:01:40.640
Wir danken Mittwald für die Unterstützung von dieser Revision von Working Draft.

00:01:45.360 --> 00:01:50.943
Revision 722. Wir sind heute zu viert.

00:01:51.523 --> 00:01:54.373
Richtig viele Leute aus dem Team haben wir dabei. Die Vanessa.

00:01:54.373 --> 00:01:58.963
Hallo Vanessa. Hallo. Dann haben wir den Peter. Hallo Peter. Moin Moin.

00:01:59.582 --> 00:02:02.955
Ich bin der Shep und wir haben einen Gast und zwar den John Ullmann. Hallo John.

00:02:03.716 --> 00:02:06.932
Hallo. Du bist schon ganz, ganz oft bei uns Gast gewesen.

00:02:07.543 --> 00:02:10.751
Mindestens viermal haben wir gesehen. Ich glaube, du musst dich,

00:02:10.943 --> 00:02:12.673
also willst du dich nochmal kurz vorstellen?

00:02:12.951 --> 00:02:15.709
Mach mal. Aber eigentlich ist es nicht nötig, glaube ich.

00:02:16.521 --> 00:02:21.305
Ja, ich mache halt seit mehreren Jahrzehnten, schiebe ich Pixel umher mit CSS.

00:02:22.503 --> 00:02:24.623
Und noch andere Sachen. Ja, gut.

00:02:26.274 --> 00:02:29.960
Perfekt. Das ist eine schöne Beschreibung. Die hätte ich auch gerne.

00:02:30.970 --> 00:02:35.103
Genau, und es geht auch um CSS. Und zwar hast du uns kontaktiert,

00:02:35.423 --> 00:02:39.695
weil du die Revision 715 dir angehört hast, irgendwann,

00:02:40.606 --> 00:02:46.643
wo wir Hörerfragen beantwortet haben und eine der Hörerfragen, da ging es darum,

00:02:47.333 --> 00:02:52.093
was unsere Meinung zu Tailwind ist und dass die fragende Person rausgehört hat,

00:02:52.093 --> 00:02:55.936
dass wir vielleicht Tailwind nicht ganz so super duper finden,

00:02:56.969 --> 00:03:02.423
und genau, der Peter und ich haben darüber diskutiert und haben uns möglicherweise

00:03:02.423 --> 00:03:04.313
auch ein bisschen in Rage geredet, ich weiß es nicht.

00:03:05.346 --> 00:03:09.893
Du hast uns angeschrieben und gesagt, ja, Moment, ich sehe das so ein bisschen

00:03:09.893 --> 00:03:16.023
anders oder differenziert als ihr das wiedergegeben habt und genau darum bist du da und,

00:03:16.805 --> 00:03:20.979
die vanessa sieht das auch anders als wir glaube ich,

00:03:21.890 --> 00:03:27.723
und genau jetzt wollen wir wollen wir das ganze noch mal also quasi tailwind versus.

00:03:29.603 --> 00:03:36.043
Weiß wie man es nennt klassisches css das thema könnten wir jetzt noch mal aufmachen zusammen.

00:03:37.738 --> 00:03:43.627
Um das nochmal so zusammenzufassen, ich bin Tailwind gegenüber so relativ neutral

00:03:43.627 --> 00:03:48.267
eingestellt, würde ich sagen, Peter fragt sich ein bisschen eher,

00:03:49.587 --> 00:03:52.470
was Tailwinds Daseinsberechtigung ist. Kann man das so sagen?

00:03:53.727 --> 00:03:56.317
Wenn ich jetzt natürlich wüsste, was ich in der angesprochenen Sendung gesagt

00:03:56.317 --> 00:03:57.527
hätte, wäre das von Vorteil.

00:03:58.007 --> 00:04:01.457
Einiges. Aber grundsätzlich kann ich jetzt erstmal gegen diese Aussage jetzt

00:04:01.457 --> 00:04:03.627
nicht erheblichen Einspruch einheben.

00:04:04.287 --> 00:04:06.976
Also lassen wir das mal so durchgehen fürs Erste als Arbeitsgrundlage.

00:04:08.335 --> 00:04:11.357
Ich habe mir in der letzten halben Stunde nochmal die Minuten,

00:04:11.357 --> 00:04:15.504
ich glaube die letzten 30 Minuten waren das von der Aufnahme angehört.

00:04:16.166 --> 00:04:22.317
Und was gesagt wurde, dass Tailwind dafür auch hilfreich ist,

00:04:22.317 --> 00:04:24.078
wenn es an Skills mangelt.

00:04:24.647 --> 00:04:28.637
Und es wurde auch positiv hervorgehoben, dass es jetzt mal zumindest das unterste

00:04:28.637 --> 00:04:32.487
Level auch schon so ein bisschen anhebt, sodass es nicht mehr ganz so gerattelig

00:04:32.487 --> 00:04:35.107
wird, aber zumindest dann auf Tailwind-Niveau.

00:04:35.984 --> 00:04:39.747
Und ich denke, die Perspektive, die ein bisschen gefehlt hat,

00:04:39.747 --> 00:04:45.417
wofür wir heute wahrscheinlich dann da sind, ist nochmal herauszukristallisieren,

00:04:45.417 --> 00:04:48.550
ob Tailwind dabei auch tatsächlich Vorteile mit sich bringt,

00:04:49.542 --> 00:04:52.695
mehr als nur Skillmangel zu ersetzen.

00:04:53.502 --> 00:05:00.027
Und was ihr beiden sehr hoch gelobt habt, war Bäm und dass man ja Bäm schon

00:05:00.027 --> 00:05:04.176
eigentlich in drei Minuten beibringen könnte und damit läuft es immer ganz gut.

00:05:05.887 --> 00:05:10.057
Während Talvin vielleicht auch doch ein bisschen komplexer sein könnte.

00:05:10.719 --> 00:05:14.997
Das wurde mehr gesagt, aber das war der Kern, den ich so rausgenommen habe,

00:05:14.997 --> 00:05:19.517
aber dann leite ich vielleicht gleich mal an schon weiter, was du denn da gedacht

00:05:19.517 --> 00:05:21.173
hast, als du zugehört hattest.

00:05:23.003 --> 00:05:27.251
Genau, wenn ich ganz kurz ausholen darf. Ich habe vor ein paar Jahren durfte

00:05:27.251 --> 00:05:31.421
ich an einer Konferenz oder an mehreren Konferenzen, das war einer der Talks,

00:05:31.421 --> 00:05:35.921
wo ich mehrmals halten durfte, über Tailwind und Alpine Jazz gehalten.

00:05:35.921 --> 00:05:38.811
Gut, Alpine Jazz war dann in den letzten fünf Minuten. So quasi,

00:05:38.811 --> 00:05:40.295
schau hier, reaktiv, ist geil.

00:05:42.448 --> 00:05:47.615
Aber voran habe ich da ein bisschen rausgearbeitet, wie ist das auch entstanden und,

00:05:50.065 --> 00:05:52.358
was sind die Vorteile davon, auch gegenüber BEM.

00:05:54.494 --> 00:05:59.509
Und ich sehe halt Tailwind jetzt nicht so als BEM-Ersatz, sondern,

00:05:59.834 --> 00:06:04.061
also sage jetzt nicht, BEM ist grundsätzlich schlecht, sondern ich verwende

00:06:04.061 --> 00:06:08.408
es auch immer noch für gewisse Sachen, wo halt Tailwind dann auch zu mühsam wäre.

00:06:08.791 --> 00:06:11.346
Ich glaube, das muss man ein bisschen lernen, wo setze ich jetzt was ein.

00:06:14.353 --> 00:06:18.625
Tailwind ist halt für mich so ein, ist halt das Tool, was jetzt die meisten kennen.

00:06:19.502 --> 00:06:24.610
Aber es gibt natürlich ganz, ganz viele andere Utility-First-Frameworks.

00:06:25.289 --> 00:06:28.091
Mein Bootstrap ist jetzt auch ein bisschen auf die Schiene aufgesprungen.

00:06:28.091 --> 00:06:32.824
Meiner Meinung nach ist es ein bisschen halbherzig. Aber ja,

00:06:32.969 --> 00:06:37.090
wo ich vor allem nicht so einverstanden war, war für mich so, dass ja,

00:06:37.769 --> 00:06:41.049
es ist jetzt für Anfänger leichter, weil,

00:06:41.710 --> 00:06:46.791
ich ja mit Tailwind, jetzt unabhängig, ob ich die Klassen im Markup schreibe

00:06:46.791 --> 00:06:52.321
oder im CSS, Ich muss quasi wissen, was macht jetzt diese eine CSS-Eigenschaft,

00:06:52.321 --> 00:06:53.971
also was macht jetzt dieses Marching.

00:06:53.971 --> 00:06:58.671
Was es sicher hilft, ist, einen gewissen vertikalen Rhythmus hinzukriegen mit

00:06:58.671 --> 00:07:02.431
Abständen, wenn man da diese ein bisschen einhält. Oder ich schreibe halt sehr

00:07:02.431 --> 00:07:08.501
viel auch eigene Tailwind-Plugins für meine Systeme, weil es ein bisschen advancer ist noch. Aber.

00:07:10.875 --> 00:07:14.967
Das hilft sicher dort, diesen vertikalen Rhythmus einzuhalten.

00:07:16.511 --> 00:07:22.341
Aber ich muss ehrlich gestehen, ich habe durch Tailwind viele Sachen gelernt,

00:07:22.341 --> 00:07:26.415
so okay, das ist jetzt schon stable, das kann man jetzt wirklich schon verwenden, cool,

00:07:27.378 --> 00:07:33.061
und ich habe auch, obwohl ich schon diverse Buckle auf dem Rücken habe mit CSS

00:07:33.061 --> 00:07:35.961
auch gemerkt, okay, dieses Property das kannte ich noch gar nicht,

00:07:35.961 --> 00:07:40.581
zum Beispiel diese Isolation, Isolate Geschichte, wo man nicht immer Positionen

00:07:40.581 --> 00:07:42.081
relativ verwenden muss und,

00:07:43.056 --> 00:07:47.224
das ein neues Fass aufmacht, dass andere Probleme bewirken kann.

00:07:48.025 --> 00:07:51.831
Es war zwar ein Beispiel, also ich habe da schon auch neue Properties kennengelernt,

00:07:51.831 --> 00:07:53.081
was ich eigentlich ganz cool fand.

00:07:55.315 --> 00:07:59.954
Aber so der Punkt, dass es jetzt hilft, weniger hässliche Webseiten zu machen,

00:08:01.533 --> 00:08:05.280
in Sachen Farben vielleicht, okay, weil man da gewisse Abstände hat und die,

00:08:05.800 --> 00:08:08.156
leicht einhalten kann wegen Lesbarkeit, okay.

00:08:09.242 --> 00:08:13.430
Aber es ist natürlich auch sehr leicht möglich, mit Tailwind ganz hässliche

00:08:13.430 --> 00:08:17.804
Seiten zu machen, wie mit jedem anderen System.

00:08:19.865 --> 00:08:23.487
Und um das so ein bisschen zu vergleichen.

00:08:25.844 --> 00:08:31.833
Kann man ja sagen, wenn wir jetzt mit Kochen als Vergleich ist so Bäm vielleicht,

00:08:32.234 --> 00:08:34.300
ja du musst alles selber einkaufen,

00:08:34.910 --> 00:08:39.450
du musst dir alles selber deine Mengen zurechtsuchen und das dann zurechtschnippeln

00:08:39.450 --> 00:08:43.269
und machen und tun und dann kochst du dein Essen und hoffst, es ist gut.

00:08:44.146 --> 00:08:47.640
Auch dort kann es natürlich schlecht werden. Tailwind ist dann für mich so ein

00:08:47.640 --> 00:08:52.500
bisschen wie HelloFresh, heißt das, glaube ich.

00:08:52.500 --> 00:08:57.450
Ich kriege eine Box geliefert, es ist alles schon von den Mengen her ready.

00:08:57.450 --> 00:09:01.212
Ich muss auch immer noch schnippeln, ich muss immer noch alles bereit machen.

00:09:01.479 --> 00:09:05.970
Und natürlich gibt es danach noch so andere Frameworks, so Daisy UI und wie

00:09:05.970 --> 00:09:09.390
sie auch alle heißen, wo ich dann sagen kann, ja gut, ich schmeiße es einfach

00:09:09.390 --> 00:09:10.690
in die Mikrowelle und gut ist.

00:09:10.690 --> 00:09:14.230
Also dann prep my meal, dann muss ich dann gar nicht mehr viel können und das

00:09:14.230 --> 00:09:17.205
ist eigentlich mal grundsätzlich mal gut. Das ist super für,

00:09:17.774 --> 00:09:21.500
wenn Backend-Entwickler ein Frontend entwickeln müssen, dass es wenigstens einigermaßen

00:09:21.500 --> 00:09:24.450
gescheit ausschaut und Accessibility und alles eingehalten wird.

00:09:26.220 --> 00:09:32.006
Also Daisy UI wäre dann so eine Komponentenbibliothek, die Tailwind nutzt.

00:09:32.845 --> 00:09:35.705
Ja, oder es gibt ja Shadow CNN oder wie sie auch alle heißen.

00:09:35.705 --> 00:09:37.091
Es gibt ja ganz viele verschiedene.

00:09:38.585 --> 00:09:41.990
Daisy UI ist mir eingefallen, weil mir heute das über die Leber gelaufen ist,

00:09:42.565 --> 00:09:44.823
weil es jemand verwendet, wo ich das gesehen habe.

00:09:46.286 --> 00:09:51.685
Aber so ein bisschen das als Vergleich. Also für mich war so ein bisschen der Punkt, ja.

00:09:53.693 --> 00:09:58.605
Die wirklichen Vorzüge von Tailwind liegen für mich eigentlich noch in einem

00:09:58.605 --> 00:10:04.299
ganz anderen Bereich, wo vielleicht vielmals auch unterschätzt wird.

00:10:05.059 --> 00:10:08.365
Weil, wenn man ein bisschen weiß, Tailwind ist ja wirklich aus dem entstanden,

00:10:08.365 --> 00:10:14.295
ein bisschen so von der Developer Experience her, das Problem zu lösen,

00:10:14.492 --> 00:10:19.270
ja, eine HTML-Seite ist lokal und CSS ist global, wie fixen wir das Problem?

00:10:19.955 --> 00:10:23.435
Dass wenn ich jetzt eine Hard-Termal-Seite wegschmeiße, dass auch das zugehörige

00:10:23.435 --> 00:10:25.539
CSS, wenn es nicht mehr braucht, auch wegkommt.

00:10:26.892 --> 00:10:32.440
Aber es gibt zum Beispiel andere Systeme wie Techion, wo auch ein Utility-First-Framework ist.

00:10:33.299 --> 00:10:37.125
Und der hat einfach recherchiert, was ist für den Browser am leichtesten zum,

00:10:38.396 --> 00:10:40.451
Durchgehen und zum Style.

00:10:41.252 --> 00:10:44.485
Und der ist auch eigentlich auf die genau gleiche Lösung spannenderweise gekommen.

00:10:44.485 --> 00:10:48.875
Der hat dann gesagt, ja, okay, der Browser ist natürlich jetzt bei einer kleinen

00:10:48.875 --> 00:10:52.531
Seite im Minisekunden- oder Mikro-Nanosekunden-Bereich.

00:10:53.013 --> 00:10:56.575
Aber dann herausgefunden, ja, eigentlich rendert eine Seite auch schneller,

00:10:56.575 --> 00:11:01.308
wenn du viele TSS-Klassen hast, wo immer nur eine Klasse eine Sache macht.

00:11:03.045 --> 00:11:10.062
Fand ich sehr spannend, auch noch von der Seite quasi die DNG-Entstehungsgeschichte anzuschauen.

00:11:10.514 --> 00:11:13.424
Aber kannst du das mal kurz quantifizieren? Also das ist ja,

00:11:13.424 --> 00:11:18.654
was ich immer, wenn Chaps sagt, ich verfolge hier folgende absurde CSS-Syntax,

00:11:18.654 --> 00:11:19.514
weil es ist ja schneller.

00:11:19.834 --> 00:11:22.201
Und dann nehme ich den Chaps und dann drehe ich den Grillspieß so ein bisschen

00:11:22.492 --> 00:11:25.267
und dann kommt halt eben raus, dass unter irgendwelchen Edge-Case-Bedingungen

00:11:25.452 --> 00:11:27.727
vielleicht eine halbe Millisekunde an Benefit rauskommt.

00:11:28.435 --> 00:11:30.426
Ist es bei dir genauso schlimm oder ist das irgendwie mehr?

00:11:32.092 --> 00:11:35.624
Ja, ich kann dir jetzt, ehrlich gesagt, die genauen Zahlen, die müsste ich jetzt

00:11:35.624 --> 00:11:41.223
selber auch googeln oder in meinen Slides sogar nachschauen.

00:11:42.831 --> 00:11:45.904
Es ist jetzt natürlich, die Browser werden natürlich auch immer schneller.

00:11:45.904 --> 00:11:49.559
Also ich glaube, das ist inzwischen, würde ich jetzt so sagen, vernachlässigbar.

00:11:50.041 --> 00:11:56.572
Aber ist natürlich auch gut zu wissen, wenn ich jetzt ein CSS habe vollgestopft mit TAS,

00:11:57.181 --> 00:12:03.234
dass das dann schon langsamer wird, weil es natürlich von der Denkweise vom

00:12:03.234 --> 00:12:06.844
TSZ her massiv aufwendiger ist, wenn es da noch zuerst reinschauen muss,

00:12:06.844 --> 00:12:08.658
hat es das jetzt, hat es das nicht und dann,

00:12:09.694 --> 00:12:12.724
appliziere ich diese Styles oder Custom Properties.

00:12:12.724 --> 00:12:15.386
Aber so größer- und August-mäßig hast du da irgendwas, woran ich mich festhalten kann?

00:12:16.587 --> 00:12:20.064
Das müsste wahrscheinlich dann uns irgendwie... Ich meine, schneller ist ja

00:12:20.064 --> 00:12:23.114
vieles, man muss ja zum einen irgendwie quantifizieren, in welchen Bereichen

00:12:23.114 --> 00:12:25.642
bewegt man sich da grob und dann halt eben auch die Gegenprobe machen,

00:12:25.973 --> 00:12:29.740
welche Mittel muss man zu Felde führen, um diesen Benefit dann einzufahren tatsächlich.

00:12:32.027 --> 00:12:37.472
Ja, hat vielleicht keinen Tag. Also ich würde ja vermuten, dass der Unterschied

00:12:37.472 --> 00:12:39.132
wahrscheinlich gar nicht so riesig ist.

00:12:39.512 --> 00:12:45.782
Also ich glaube, die Aussage ist einfach, es schadet nicht, viele Klassen auf

00:12:45.782 --> 00:12:47.660
HTML-Elemente zu stecken.

00:12:47.863 --> 00:12:51.108
So würde ich das vielleicht eher sehen. Es gibt keinen Slowdown dadurch.

00:12:51.683 --> 00:12:56.092
Wenn man Parallelman wie BAM anwendet, nutzt man ja auch CSS-Klassen.

00:12:56.092 --> 00:13:01.462
Und das sind ja so zusammen mit Elementen und ID-Selektoren so die schnellsten

00:13:01.462 --> 00:13:03.868
Selektoren, die man in CSS haben kann.

00:13:04.866 --> 00:13:09.282
Ich glaube, das ist wahrscheinlich eher so ein, hey, auch wenn es vielleicht

00:13:09.282 --> 00:13:13.463
gewöhnungsbedürftig aussieht, so viele Klassen in ein Element zu stecken,

00:13:15.321 --> 00:13:18.632
schlägt sich das jetzt irgendwie nicht negativ auf die Performance nieder.

00:13:18.632 --> 00:13:20.783
Ich glaube, so rum würde ich das wohl eher formulieren.

00:13:21.178 --> 00:13:23.182
Ich meine, das wäre ja auch eine Größenordnung, wenn man sagt,

00:13:23.182 --> 00:13:23.836
es wird nicht schlimmer.

00:13:26.767 --> 00:13:28.985
Es ist halt vor allem der Punkt, wenn du eben einzelne Klassen hast,

00:13:28.985 --> 00:13:31.405
die ist natürlich immer schneller, was auch logisch ist,

00:13:32.021 --> 00:13:35.495
als wenn du jetzt da für diesen Verschachtelung bist und der war der,

00:13:35.495 --> 00:13:40.065
wie ist der, Adam Morse, hat dann quasi sogar noch herausgefunden, dass die,

00:13:40.641 --> 00:13:44.365
Browser ein bisschen, also noch besser performen, wenn ich dann eine Klasse

00:13:44.365 --> 00:13:49.945
habe und die macht nur eine Sache, weil es einfach weniger Abhängigkeiten zwischen

00:13:49.945 --> 00:13:51.955
den verschiedenen CSS-Klassen gibt.

00:13:51.955 --> 00:13:55.945
Was muss ich jetzt überschreiben, was ist jetzt weiter unten und so weiter und so fort.

00:13:55.945 --> 00:13:59.135
Also das ist eigentlich so die Überlegung.

00:13:59.135 --> 00:14:02.255
Und wenn man sich das so ganz klar überlegt und denkt, okay,

00:14:02.255 --> 00:14:05.755
dann habe ich jetzt BAM und dann habe ich Modifier und der ändert dann irgendein

00:14:05.755 --> 00:14:11.732
Padding durch das und so weiter und so fort, dann ist er quasi wie logisch, dass man,

00:14:12.679 --> 00:14:15.955
wenn ich auch länger zum Code lesen brauche, okay, jetzt wird es überschrieben,

00:14:15.955 --> 00:14:18.118
hat der Rechner quasi auch länger.

00:14:18.414 --> 00:14:22.095
Ja, aber ich wollte das jetzt sogar sehr gar nicht gegen BEM vergleichen,

00:14:22.095 --> 00:14:26.405
sondern mehr so überhaupt fragen, ob diese Domäne, über die wir da jetzt spezifisch

00:14:26.405 --> 00:14:28.054
sprechen, eine ist, die was wert ist.

00:14:28.385 --> 00:14:30.927
Weil auch da nehme ich halt wieder den Chat mal als Vergleichsmaßstab her.

00:14:31.310 --> 00:14:34.065
Der sagt auch immer, da kriege ich irgendwie eine halbe Millisekunde rausgekratzt,

00:14:34.065 --> 00:14:38.035
aber seine Baseline ist halt eine Web-Applikation, an der ein gewisser Chat

00:14:38.035 --> 00:14:41.785
seit Ewigkeiten arbeitet und wo halt alles, was auch nur in der Nähe von Low-Hanging

00:14:41.785 --> 00:14:43.820
Fruit ist, längst gepflückt worden ist.

00:14:45.135 --> 00:14:48.085
Die Frage stellt sich also jetzt mehr so, sind diese Optimierungen bezüglich,

00:14:48.085 --> 00:14:53.184
ist jetzt das CSS-Electoral-Matching schneller oder nicht, bezüglich der Größenordnung,

00:14:54.217 --> 00:14:58.246
gegenüber, wo kann ich meine Zeit, wenn ich irgendwie was optimieren möchte, noch reinstecken?

00:14:58.606 --> 00:15:03.505
Also mehr so, nicht wie verhält sich Tailwind zu BAM bezüglich Geschwindigkeitsbenefit,

00:15:03.673 --> 00:15:06.558
sondern wie verhält sich der Einsatz von Tailwind im Vergleich zu,

00:15:06.814 --> 00:15:10.030
ich nehme mal meine ganzen PNGs und jagge die mal nochmal eine Runde durch den Optimizer.

00:15:13.594 --> 00:15:19.816
Also ich würde ja sagen, diese Performance-Fragestellung ist ja gar kein Motivator,

00:15:20.196 --> 00:15:24.436
irgendwie zu Tailwind oder Tachyon und Co. zu greifen, oder? Aber Moment, Moment.

00:15:25.056 --> 00:15:27.287
Gerade war doch der Punkt, dass sich die Leute, die das gebaut haben,

00:15:27.409 --> 00:15:30.116
explizit angeschaut haben, wie funktioniert der Browser, was macht es dem am

00:15:30.116 --> 00:15:33.356
leichtesten und den Ansatz wählen wir. Oder? Habe ich das falsch verstanden?

00:15:34.038 --> 00:15:37.026
Das war Tachyon. Also Tachyon ist auf die Seite hergekommen,

00:15:37.026 --> 00:15:39.228
sind halt auf die gleiche Lösung gekommen wie Tailwind.

00:15:40.191 --> 00:15:45.677
Das sollte einfach mal das Einschub noch reinbringen, weil ich fand das ein spannender Gedanke.

00:15:45.961 --> 00:15:48.316
Du wirst ja schnell konfrontiert mit diesen Fragestellungen,

00:15:48.316 --> 00:15:51.896
wenn du so ein Framework rausbringst und die Leute sehen dann so ein ungewöhnliches

00:15:51.896 --> 00:15:55.946
Konstrukt, dann gibt es ja diverse, sagen wir mal, Bauchgefühle,

00:15:55.946 --> 00:15:57.876
die dann da ausgesprochen werden,

00:15:58.610 --> 00:16:03.028
und ich denke einfach, dass man dem das dann irgendwie nachgemessen hat,

00:16:03.910 --> 00:16:07.656
und dann gesagt hat, so Leute, also daran, also an der Performance wird es jetzt nicht scheitern.

00:16:09.516 --> 00:16:13.466
Ja, okay, das kann ich ja, das sehe ich ja sofort und die ganzen Klassen komprimieren

00:16:13.466 --> 00:16:17.737
ja auch gut weg im HTML und alles so einverstanden, macht es nicht schlimmer.

00:16:18.126 --> 00:16:20.476
Ich versuche halt mal irgendwie noch zu greifen, was jetzt so der...

00:16:21.463 --> 00:16:24.767
Naja, zwei Vorteile hat der John ja schon gesagt. Also das eine ist,

00:16:25.063 --> 00:16:32.036
dass sozusagen du dank der Arbeit, die der Adam Wathen und Team in dieses Framework

00:16:32.036 --> 00:16:35.856
stecken, das sozusagen immer auf Stand zu halten.

00:16:35.856 --> 00:16:40.246
Wenn du, ja, vielleicht so ein bisschen wie das früher mit jQuery war,

00:16:40.246 --> 00:16:42.636
wo man auch angefangen hat, JavaScript zu lernen, auch vor allem,

00:16:42.636 --> 00:16:44.950
wenn man dann ins jQuery reingeschaut hat, wie die das machen,

00:16:45.421 --> 00:16:48.576
dass man irgendwie sich, dass man dann irgendwann irgendwie so merkt,

00:16:48.576 --> 00:16:50.476
okay, cool, Isolation und Co,

00:16:51.236 --> 00:16:53.571
coole Features, wird überall supported,

00:16:55.590 --> 00:16:58.420
Wusste ich nicht, habe ich jetzt dazugelernt, also sozusagen.

00:17:00.751 --> 00:17:07.170
Als Anlass, als Räuberleiter irgendwie so ein paar neue CSS-Features irgendwie sich drauf zu tun.

00:17:07.170 --> 00:17:12.256
Und das andere war, was du gesagt hast, dass man eben auch leicht,

00:17:13.040 --> 00:17:18.130
Komponenten wieder loswerden kann, weil es im Grunde kein CSS gibt,

00:17:18.130 --> 00:17:23.140
was an eine Komponente gebunden ist, weil es ja im Grunde alles primitive Bausteine

00:17:23.140 --> 00:17:26.082
sind, an denen sich alle Komponenten bedienen,

00:17:26.976 --> 00:17:32.050
und es kein dediziertes, kein CSS gibt, das spezifisch für eine Komponente gebaut wurde.

00:17:32.288 --> 00:17:36.317
Sofern du, das hast du ja am Anfang gesagt, nicht dann doch eben manchmal zu,

00:17:37.588 --> 00:17:40.630
custom CSS greifst. Das kann natürlich immer passieren.

00:17:41.239 --> 00:17:46.540
Dann verlierst du da so ein bisschen den Benefit. Aber bei Tailwind gibt es ja keinen.

00:17:46.540 --> 00:17:49.880
Du kannst ja nicht in Tailwind auf die CSS-Datei zeigen in irgendeine Zeile

00:17:49.880 --> 00:17:54.540
und sagen, die Zeile gibt es im Grunde nur, oder die nächsten 100 Zeilen,

00:17:54.540 --> 00:17:58.886
die gibt es nur, weil ich diese Komponente stylen will. Das gibt es halt nicht. Mhm.

00:18:00.281 --> 00:18:03.112
Aber warte mal, das ist jetzt ja was anderes, wenn ich richtig verstehe.

00:18:03.112 --> 00:18:05.546
Also klar, das hilft ja sozusagen, dein Kram unter Kontrolle zu halten,

00:18:05.865 --> 00:18:09.272
aber jetzt sind wir ja schon bei der Ergonomie-Frage und nicht mehr bei der

00:18:09.272 --> 00:18:12.512
Performance-Frage, weil wir jetzt die Performance-Frage sozusagen abschließen

00:18:12.512 --> 00:18:15.712
mit, die ist es nicht wirklich wert, das ist zumindest jetzt nicht schlimmer,

00:18:15.712 --> 00:18:16.753
das ist ein Nicht-Faktor.

00:18:18.022 --> 00:18:25.272
Spannend war einfach, dass Techion nicht nach der Frage recherchiert hat, sondern davor.

00:18:25.272 --> 00:18:29.952
Wir haben geschaut, oder der Typ hat geschaut, was kann der Browser am schnellsten

00:18:29.952 --> 00:18:34.342
und dann ist er auf diese Lösung gekommen und dann hat er das Framework gebaut,

00:18:35.567 --> 00:18:37.779
und das fand ich halt spannend auch mal, dass so,

00:18:38.493 --> 00:18:42.692
ich meine, auf die Idee muss man kommen, ich mache ein CSS-Framework auf Basis,

00:18:42.692 --> 00:18:44.106
was der Browser am schnellsten kann.

00:18:45.104 --> 00:18:49.452
Fand ich eh schon crazy, aber fand ich jedenfalls sehr spannend,

00:18:49.452 --> 00:18:51.182
mal so zu hören oder so zu lesen.

00:18:51.420 --> 00:18:55.739
Ich glaube, der war auch sogar vor Tailwind, hat er das rausgeschmissen, dieses Ding.

00:18:56.315 --> 00:19:01.752
Tailwind ist vor allem meiner Meinung nach so erfolgreich im Vergleich zu allen

00:19:01.752 --> 00:19:06.879
anderen, weil sie halt geschafft haben, eine saubere Dokumentation rauszuhauen.

00:19:08.156 --> 00:19:13.352
Ja, und auch das bisschen das amerikanische Bam, hier sind wir und Wir haben

00:19:13.352 --> 00:19:16.872
da Trailers und wir haben, wenn wir ein neues Release machen,

00:19:16.872 --> 00:19:19.254
machen wir ein Video und alle Sachen, wie sie das machen.

00:19:19.800 --> 00:19:21.831
Aber es hat halt recht gut funktioniert.

00:19:23.352 --> 00:19:27.405
Lustigerweise war er ja auch der Typ, wo die Tailwind-Videos gemacht hat,

00:19:27.405 --> 00:19:32.698
das ist ein in Australien lebender Schweizer,

00:19:34.004 --> 00:19:39.755
wo die Videos dann immer so rausgehauen hat und er war natürlich sehr euphorisch

00:19:39.755 --> 00:19:42.935
und empathisch und hat es voller Motivation erklärt.

00:19:42.935 --> 00:19:47.255
Und ich glaube, der Typ hat Tailwind auch sehr viel geholfen,

00:19:47.255 --> 00:19:51.575
diesen Lärm zu erzeugen und die Erfolgsquote quasi zu steigern,

00:19:51.575 --> 00:19:55.445
weil ich weiß jetzt natürlich selber von meinen Open-Source-Projekten,

00:19:55.445 --> 00:19:57.735
es steht und fällt mit der Dokumentation,

00:19:58.461 --> 00:20:02.095
und es braucht arschviel Arbeit und wenn die nicht gescheit ist, dann,

00:20:03.738 --> 00:20:08.365
passiert halt nicht viel, weil wenn du da nicht weißt, wie man das auch so geniale

00:20:08.365 --> 00:20:11.649
Tool anwendet, das natürlich bringt auch nichts. Also das.

00:20:13.981 --> 00:20:18.741
Ist natürlich, war auch bei Bootstrap so, sage ich mal, die waren auch erfolgreich,

00:20:19.200 --> 00:20:22.108
aus dem Grund, weil sie eine anständige Dokumentation hatten.

00:20:23.397 --> 00:20:27.553
Und das hilft natürlich jedem, gerade Frontend-Tooling hilft es enorm,

00:20:27.553 --> 00:20:29.875
wenn das gut aufgebaut ist. Versuche.

00:20:31.379 --> 00:20:34.303
Okay, aber kann man das jetzt, also ich stimme dir erstmal grundsätzlich zu,

00:20:34.303 --> 00:20:38.173
dass die Projekte, die tatsächlich ihren Output und seien sie noch so Open Source

00:20:38.173 --> 00:20:42.463
und MRT lizenziert so quasi als Produkt behandelt. Also was du ja gerade so

00:20:42.463 --> 00:20:44.202
als den amerikanischen Ansatz bezeichnet hast.

00:20:44.556 --> 00:20:47.952
Ich bin da ja, das erwähne ich ja im Prinzip jede Folge, die ich mit Stefan aufnehme.

00:20:48.347 --> 00:20:51.203
TS Reset ist ja super, das sind irgendwie drei Zeilen Typescript,

00:20:51.203 --> 00:20:52.453
aber die Webseite sieht halt wirklich

00:20:52.453 --> 00:20:55.678
aus, als wollten sie mir ein MacBook verkaufen. Ist eine feine Sache.

00:20:56.683 --> 00:21:01.423
Das hilft halt. Aber kann man diesen Appeal-Faktor, der jetzt dadurch und durch

00:21:01.423 --> 00:21:03.132
eine gute Dokumentation ausgelöst wird,

00:21:03.843 --> 00:21:09.592
wirklich sauber davon trennen, dass zumindest sich bei mir, wenn ich durch Hacker News scrolle,

00:21:10.114 --> 00:21:13.733
oder das war zumindest bevor KI losgegangen ist, sich mir der Eindruck aufdrängt,

00:21:13.733 --> 00:21:19.774
dass die Leute nichts lieber wollen, als dass sie CSS in den Vulkan aus Herr der Ringe reinwerfen.

00:21:21.173 --> 00:21:24.104
Weil das ist ja, glaube ich, wirklich so ein Ding, das ist irgendwie so.

00:21:24.249 --> 00:21:26.933
Das ist mühsam, man kann da viel falsch machen und ich verstehe nicht so richtig,

00:21:26.933 --> 00:21:28.934
warum meine Webseite blöder aussieht als die andere.

00:21:29.189 --> 00:21:32.394
Das ist irgendwie so ein Design-Vibes-Kram. Das hätte ich lieber am liebsten alles gelöst.

00:21:32.864 --> 00:21:36.313
Und guck her, da gibt es einfach ein Produkt. Das kaufe ich mir ein,

00:21:36.313 --> 00:21:37.578
indem ich NPM-Install mache.

00:21:37.926 --> 00:21:40.373
Und dann habe ich das. Und dann kann ich Sachen schreiben, die irgendwie das

00:21:40.373 --> 00:21:43.028
Design kontrollieren. Aber ich muss mich halt eben nicht mit dem Ding befassen,

00:21:43.835 --> 00:21:47.173
von dem ich eh keine hohe Meinung habe, wie informiert oder uninformiert die

00:21:47.173 --> 00:21:48.909
auch sein mag. Aber so ist das halt eben.

00:21:49.251 --> 00:21:52.553
Ich glaube halt wirklich, es ist immer ein guter Pitch, wenn du den Leuten sagen

00:21:52.553 --> 00:21:54.290
kannst, guck mal, da ist so ein Ding, das geht ja auf den Keks.

00:21:54.528 --> 00:21:57.558
Kauf mein Produkt ein. Und dann musst du dich mit diesem Ding nicht mehr befassen.

00:21:58.174 --> 00:22:02.103
Und CSS mit seinen ganzen Nachteilen und dem Legacy und dem ganzen Globalen

00:22:02.103 --> 00:22:04.385
und man kann es schlecht warten und langsam und hast du nicht gesehen.

00:22:04.826 --> 00:22:08.372
Und dieser ganzen Komplexität ist einfach ja auch ein wunderbares Ziel,

00:22:08.685 --> 00:22:11.779
um zu sagen, ich habe hier was gebaut, guck her, das da geht damit weg.

00:22:13.416 --> 00:22:18.795
Ja, das hat ja Tailwind so zwei, oder Utility, wir benutzen Tailwind hier einfach

00:22:18.795 --> 00:22:23.585
wie Tempo, also wir reden einfach von Utility-based CSS und das quasi fast ausschließlich

00:22:23.585 --> 00:22:27.145
benutzt, wobei es ja tatsächlich manchmal sinnvoll ist, so ein bisschen Sachen zu mischen.

00:22:27.145 --> 00:22:30.235
Wobei, da würde ich noch sagen, also ich glaube, Tailwind hat ja tatsächlich

00:22:30.235 --> 00:22:33.615
so gute Serviervorschläge, also es ist ja wirklich nicht nur primitive,

00:22:33.615 --> 00:22:37.125
sondern die haben das Ganze auch noch irgendwie zusammengeschnürt zu was Schönem.

00:22:37.125 --> 00:22:40.752
Also ich glaube, dass schon ein Mehrwert da ist gegenüber vielleicht anderen,

00:22:41.286 --> 00:22:46.470
Utility-Based Frameworks. Absolut. Also Tailwind hat halt seine Standarddesigns

00:22:46.847 --> 00:22:49.924
und halt das, was ich so als den Way of Doing Things bezeichnen würde.

00:22:50.353 --> 00:22:53.105
Und wenn wir jetzt darüber diskutieren, müsste man das halt,

00:22:53.105 --> 00:22:55.705
glaube ich, entweder irgendwie explizit machen, dass man die beiden zusammen

00:22:55.705 --> 00:22:57.737
meint oder man müsste sie halt tatsächlich trennen.

00:22:57.958 --> 00:23:01.535
Der Vergleich mit Ben hinkt ja allein schon damit, dass halt Notationen dafür,

00:23:01.535 --> 00:23:04.510
wie Klassen zu schreiben sind, Und nicht mit einer eingebauten,

00:23:05.735 --> 00:23:07.885
wie hätten wir das, glaube ich, bezeichnet, Schep als irgendwie so ein unteres

00:23:07.885 --> 00:23:11.435
Limit, das man designtechnisch nicht unterschreiten kann. Das bringt halt Tailwind mit.

00:23:12.465 --> 00:23:14.837
Und das wäre halt einfach nur, wenn, schreib deine Klassen halt so,

00:23:14.976 --> 00:23:15.965
das ist da halt nicht mit drin.

00:23:16.345 --> 00:23:18.349
Schon ein Faktor, würde ich sagen, weil da muss man sich ja,

00:23:18.598 --> 00:23:21.240
das ist meine Theorie ja, noch weniger mit diesem Kram befassen.

00:23:21.634 --> 00:23:25.199
Weil, düpp, düpp, düpp, Legosteine, sieht einigermaßen aus, just ship it.

00:23:28.699 --> 00:23:34.682
Genau, aber die Vanessa wollte noch was erzählen. Tailwind CSS ist ja weiterhin CSS.

00:23:34.982 --> 00:23:39.672
Ich muss ja eigentlich weiterhin CSS können, um damit ein gutes Design machen

00:23:39.672 --> 00:23:43.525
zu können. Ich habe ein bisschen eine andere Denkweise jetzt erst mal.

00:23:43.879 --> 00:23:47.472
Ich lasse das jetzt mal kurz ausgeklammert, dass Tailwind mit Bausteinen kommt

00:23:47.472 --> 00:23:49.262
und mit vorgegebenen Spacings.

00:23:49.262 --> 00:23:53.562
Und was wahrscheinlich auch mitkommt, ist wahrscheinlich arbeitet man in einem

00:23:53.562 --> 00:23:57.016
komponentenbasierten Framework und Copy-Paste da auch gerne mal rum und hat

00:23:57.184 --> 00:24:00.481
dementsprechend automatisch schon ein bisschen ähnliches Seils in den Komponenten.

00:24:02.302 --> 00:24:10.389
Ich denke, mein größter Punkt mit den großen CSS-Dateien war tatsächlich die Wartbarkeit.

00:24:11.283 --> 00:24:13.129
Das habe ich bei Tailwind auch ein bisschen anders, denke ich.

00:24:14.742 --> 00:24:20.130
Und die Namensfindung habt ihr beim letzten Mal so angesprochen.

00:24:20.867 --> 00:24:24.262
Und ihr habt das so ein bisschen runtergespielt. Wenn einem da die Skills fehlen,

00:24:25.981 --> 00:24:28.385
dann ist das, keine Ahnung, dann kann man sich so beibringen.

00:24:28.681 --> 00:24:33.642
Ich finde aber tatsächlich auch die Wartbarkeit recht umständlich,

00:24:33.642 --> 00:24:40.842
mir jedes Mal zu überlegen, ist das jetzt der gleiche CSS-Block oder brauche

00:24:40.842 --> 00:24:42.624
ich da eine neue CSS-Klasse?

00:24:43.048 --> 00:24:48.302
Und die CSS-Klassen sind aber schon sehr ähnlich. Also ich brauche zwei CSS-Klassen,

00:24:48.302 --> 00:24:51.721
Display-Flags, Flex-Direction-Whatever, da, da, da, da, da, da.

00:24:52.115 --> 00:24:54.101
Aber so ein bisschen unterschiedlich ist es halt.

00:24:54.728 --> 00:25:00.642
Und in so großen CSS-Dateien habe ich schon das Gefühl, dass man bei jeder neuen

00:25:00.642 --> 00:25:02.168
Komponente, die man hinzufügt,

00:25:02.755 --> 00:25:08.055
sich jedes Mal die Frage stellen muss, schreibe ich dafür eine neue CSS-Klasse,

00:25:09.007 --> 00:25:11.770
oder versuche ich eine wiederzuverwenden?

00:25:14.029 --> 00:25:17.708
Ist die Frage nicht durch das Designsystem zu beantworten und ist nicht sozusagen

00:25:17.708 --> 00:25:21.756
die Strukturierung einer Datei in einer bestimmten Sprache der falsche Ort dafür?

00:25:23.236 --> 00:25:27.348
Wenn man ein Designsystem hat, wie viele Projekte erarbeitet?

00:25:27.348 --> 00:25:28.344
Haben die alle Design...

00:25:29.738 --> 00:25:32.958
Die haben alle eins, die wissen nicht alle, dass sie eins haben und die machen

00:25:32.958 --> 00:25:35.148
es selten explizit und die meisten würden davon profitieren,

00:25:35.148 --> 00:25:36.436
wenn sie es täten, aber die haben eins.

00:25:38.787 --> 00:25:40.233
Sie machen halt Designsystem falsch.

00:25:41.545 --> 00:25:47.499
Aber was du sagen willst, Vanessa, ist, dass wenn man eben den herkömmlichen

00:25:47.499 --> 00:25:56.269
Weg geht, man möglicherweise mehr als nötig dupliziert, was so CSS-Styling angeht.

00:25:56.269 --> 00:25:59.986
Oder weniger als nötig. Bei Tailwind bist du da so,

00:26:02.869 --> 00:26:06.899
ein bisschen reingezwungen, dass du mehr duplizierst, als du vielleicht mal

00:26:06.899 --> 00:26:11.799
üblicherweise als Softwareentwicklerin gelernt hast. Weil wir waren ja normalerweise,

00:26:11.799 --> 00:26:13.604
das wurden wir ja alles sehr dry erzogen.

00:26:15.491 --> 00:26:19.029
Mit Tailwind hast du schon ähnliche Fragen. Du musst schon auch überlegen,

00:26:19.469 --> 00:26:23.309
stecke ich das jetzt in die gleiche React-Vue.js-Komponente oder schreibe ich

00:26:23.309 --> 00:26:24.901
eine neue Komponente dafür.

00:26:25.389 --> 00:26:29.179
Je älter ich werde, desto mehr werde ich ungefähr von einfach duplizieren und

00:26:29.179 --> 00:26:31.118
nicht so versuchen, alles generisch zu machen.

00:26:32.509 --> 00:26:35.399
Aber dadurch, dass ich dann vielleicht schon zwei, drei Komponenten habe,

00:26:35.399 --> 00:26:39.379
die eben leicht unterschiedlich sind, dann haue ich halt wieder meinen Flex,

00:26:39.570 --> 00:26:41.629
Flex, Justify, Between etc.

00:26:42.069 --> 00:26:45.369
Ran. Und ja, ich fühle mich dabei auch mal so ein bisschen, ja,

00:26:45.369 --> 00:26:49.125
es sind wieder die gleichen 15 gleichen Tailwind-Klassen hier wieder dran, keine Ahnung.

00:26:49.869 --> 00:26:51.807
Aber ich habe die Entscheidung einfach schon dadurch getroffen.

00:26:52.312 --> 00:26:54.588
Und damit fahre ich auch ein bisschen leichter.

00:26:54.907 --> 00:26:58.229
Als in der Vergangenheit von noch, keine Ahnung, vor sieben,

00:26:58.229 --> 00:27:03.579
acht Jahren, wo ich wirklich größere Webseiten versucht habe zu maintainen und

00:27:03.579 --> 00:27:07.264
ich habe mir gern diesen UI-Kopfhut aufgezogen, aber,

00:27:07.856 --> 00:27:10.799
ich hatte wirklich viele Stunden, wo ich mir auch den Kopf zerbrochen habe,

00:27:11.263 --> 00:27:15.029
gehört das jetzt zusammen in eine BEM-Klasse, wie nenne ich die jetzt wirklich,

00:27:15.029 --> 00:27:18.119
damit die generisch genug funktioniert oder mache ich eine neue und ist das

00:27:18.119 --> 00:27:21.399
jetzt ein Blog oder ist das jetzt was anderes und dann komme ich an den Punkt,

00:27:21.399 --> 00:27:23.739
ja eigentlich würde ich es gerne wiederverwenden, Aber das hätte jetzt einen

00:27:23.739 --> 00:27:25.178
ganzen neuen Namen verdient.

00:27:25.503 --> 00:27:29.172
Und dann muss ich relativ viel refactoren und umschreiben.

00:27:29.531 --> 00:27:35.429
Und sobald mein CSS getrennt ist vom HTML, habe ich gefühlt da immer so ein

00:27:35.429 --> 00:27:38.639
Risiko dabei. Weil ich hatte zumindest damals nicht, vielleicht fehlen mir da

00:27:38.639 --> 00:27:39.899
jetzt vielleicht ein paar Skills.

00:27:40.683 --> 00:27:44.475
War mir nie sicher, wenn ich das jetzt hier ändere, hat es wirklich nur Effekt

00:27:44.475 --> 00:27:47.376
auf diesen einen Bereich. Ich musste sehr viel manuell testen.

00:27:47.922 --> 00:27:50.865
Bei Tailwind habe ich das nicht, weil da klebt es an dem HTML dran.

00:27:50.865 --> 00:27:57.075
Das kann nichts anderes beeinflussen und ist leichter zu handhaben.

00:27:57.075 --> 00:27:59.652
Könnte man jetzt argumentieren, dass dann Skills fehlen?

00:28:00.018 --> 00:28:05.782
Vielleicht, aber nach doch relativ vielen Jahren Erfahrung in Teams.

00:28:07.988 --> 00:28:13.097
Habe ich positivere Erfahrungen da mit weniger Komplexität,

00:28:15.285 --> 00:28:18.971
gefunden, wenn man halt tatsächlich einfach die Utility-based Klassen,

00:28:19.082 --> 00:28:22.625
das hat andere Nachteile, die können wir vielleicht auch nochmal durchgehen, wenn wir möchten.

00:28:22.625 --> 00:28:26.935
Mit Tailwind kommt andere Nachteile, aber irgendwie haben den Vorteil,

00:28:26.935 --> 00:28:32.694
dass ich nicht mehr diese großen Blöcke maintainen muss, haben bei mir doch überwiegt. Mhm.

00:28:35.550 --> 00:28:40.354
Meine Erfahrung, wo ich hatte mit verschiedenen Leuten im Team,

00:28:40.354 --> 00:28:46.664
war, dass du nicht schaffst, dass jeder das gleiche Level oder die gleiche Liebe

00:28:46.664 --> 00:28:50.202
zu CSS hat. Ich bezeichne mich gerne als CSS-Nerd.

00:28:50.974 --> 00:28:55.234
Ich liebe CSS. Ich weiß nicht, wo das rausgekommen ist. Da habe ich gedacht,

00:28:55.234 --> 00:28:57.283
das werde ich nie schaffen, das werde ich nie verstehen.

00:28:57.707 --> 00:29:00.324
Dann habe ich es doch immer mal verstanden und am Schluss habe ich an einer

00:29:00.324 --> 00:29:01.956
Fachhochschule das Zeug unterrichtet.

00:29:05.811 --> 00:29:10.534
Aber du hast halt in einem Team immer verschiedene Levels und da hat jetzt Tailwind

00:29:10.534 --> 00:29:16.027
auch bei uns enorm geholfen. Also ich habe auch ein eigenes Projekt,

00:29:16.248 --> 00:29:19.383
wo ich aus Versehen quasi entwickelt habe.

00:29:20.422 --> 00:29:24.224
Und das besteht dann aus ganz vielen Komponenten, Inhaltselementen,

00:29:24.224 --> 00:29:25.983
wo man sich dann auswählen kann.

00:29:26.645 --> 00:29:30.244
Und je nachdem, welche Installation man hat, wird dann halt die CS-Datei kleiner

00:29:30.244 --> 00:29:34.744
oder größer, weil wenn sie nicht da ist, findet Tailwind CSS die Klassen nicht

00:29:34.744 --> 00:29:37.444
und schreibt es nicht, wenn nicht nötig. Das heißt, jeder hat immer nur das,

00:29:37.444 --> 00:29:41.273
was er braucht. Das ist der Riesenvorteil. Eine Art Tree-Shaking, ne?

00:29:42.069 --> 00:29:47.054
Genau, dieses Tree-Shaking. Das ist ja auch erst bei den neueren Tailwind-Versionen,

00:29:47.054 --> 00:29:52.168
ab Version 3 war das dann in Anständigkeit, aber war es immer ein bisschen mühsam. und,

00:29:54.374 --> 00:29:59.014
auch der Visionssprung auf Tailwind 4 war dann für mich nochmal ein großer Benefit,

00:29:59.014 --> 00:30:02.954
weil man es dann endlich so schreibt, wie man es auch in der CSS-Datei schreibt

00:30:02.954 --> 00:30:05.223
und nicht so, wie es liest, weil das wissen ja viele nicht,

00:30:05.659 --> 00:30:10.523
CSS liest sich von rechts nach links, aber du schreibst es von links nach rechts, jedenfalls wir.

00:30:13.181 --> 00:30:16.995
Und das wurde dann auch angeglichen, das hat es dann auch einfacher gemacht zu schreiben.

00:30:17.633 --> 00:30:23.143
Aber ich glaube, das Problem, wo für mich Tailwind CS es wirklich größtenteils

00:30:23.143 --> 00:30:27.883
gelöst hat, ist, dass wenn ich jetzt ein Projekt habe, egal ob Vue,

00:30:28.183 --> 00:30:32.529
React oder andere Sprachen, Twig, was es alles gibt,

00:30:33.359 --> 00:30:40.823
und mir ist es Fusion, wo ich arbeite ja mit Neos, ist das ja quasi ein HTML immer lokal ist.

00:30:40.823 --> 00:30:45.300
Also ich habe eine Ansicht, das ist ein HTML und da sind die Klassen drauf,

00:30:45.625 --> 00:30:49.810
aber CSS ist in der Regel global. Das heißt, du hast über die ganze Seite,

00:30:50.191 --> 00:30:53.844
vielleicht über mehrere Dateien, natürlich, wo du es dynamisch reinlädst,

00:30:54.237 --> 00:30:55.358
macht man halt ja alles auch.

00:30:56.530 --> 00:31:01.493
Trotzdem ist CSS per se immer global, das heißt, wenn ich jetzt eine neue CSS-Datei

00:31:01.493 --> 00:31:08.384
lade dann kann die andere CSS von mir überschreiben und wir haben ein Projekt gehabt.

00:31:09.957 --> 00:31:14.553
Von einem Verlag die haben einerseits Redakteure gehabt, wo ihre 50 Artikel

00:31:14.553 --> 00:31:18.357
pro Tag produzieren und da war ein anderer Typ, das war so ein bisschen ein,

00:31:18.997 --> 00:31:20.605
früher hat man eben gesagt, Webmaster,

00:31:21.300 --> 00:31:27.413
der konnte auf HTML und der musste dann halt so gewisse Layout-Seiten speziell gestalten.

00:31:28.174 --> 00:31:30.483
Und der musste so viele verschiedene Inhalts-Elemente bauen,

00:31:30.483 --> 00:31:33.997
dass wir gesagt haben, wir können nicht jedes Inhalts-Element den bauen,

00:31:35.111 --> 00:31:36.613
weil das sieht jedes anders aus.

00:31:36.613 --> 00:31:44.703
Und dann haben wir den Monaco-Editor bei uns im Becken integriert mit Tailwind,

00:31:45.083 --> 00:31:47.040
Autocompletion und allem Möglichen drin,

00:31:47.575 --> 00:31:52.896
mit einer Vorschau, wo er dann auch die anderen Prototypes oder Komponenten verwenden konnte.

00:31:55.161 --> 00:32:00.670
Und das hat dann bei ihm enorm geholfen, weil er auf einmal nicht mehr CSS schreiben

00:32:00.670 --> 00:32:03.420
musste, sondern sich quasi Bilder an dem orientieren konnte,

00:32:03.420 --> 00:32:06.631
was eh schon da war und das wiederverwenden konnte.

00:32:07.955 --> 00:32:10.560
Und dann haben wir es einfach so gemacht, okay, jetzt hat er ein neues Inhalts-Element

00:32:10.560 --> 00:32:13.790
gebaut und hat gesagt, jetzt will ich das live publizieren.

00:32:13.790 --> 00:32:17.250
Und dann ist im Hintergrund schnell der Check durchgerannt und hat geschaut,

00:32:17.250 --> 00:32:20.691
oh, habe ich neue CSS-Klassen? Wenn ja, schreibe ich das CSS-File neu,

00:32:21.208 --> 00:32:26.571
lösche die Caches vom Hash-Wert hintendran, dass das auch wirklich live geht. Und das Ding war live.

00:32:27.761 --> 00:32:34.100
Und das hat enorm geholfen, die Qualität vom visuellen Markup oder von der visuellen

00:32:34.100 --> 00:32:37.690
Darstellung zu steigern, weil wir auf einmal eine Farbkonsistenz drin hatten,

00:32:37.690 --> 00:32:41.868
weil wir eine Konsistenz drin hatten von den Abständen, alle Geschichten.

00:32:42.523 --> 00:32:46.950
Und das ist ein bisschen der Punkt, dass ich halt in keinem Team bis jetzt erlebt

00:32:46.950 --> 00:32:51.700
habe, dass jeder sagt, ja CSS, ich liebe das. Viele schlagen ja das mit JavaScript.

00:32:53.029 --> 00:32:56.950
Aber CSS kann halt inzwischen so viel, dass ich eigentlich schon sagen kann,

00:32:56.950 --> 00:33:00.837
ja, wenn du ein bisschen HTML-Markup kannst und mit CSS kombinierst,

00:33:01.238 --> 00:33:05.870
kannst du sehr viele JavaScript-Frameworks mal gleich wegkicken, sprich,

00:33:07.118 --> 00:33:09.710
Modals, also Dialogboxen, Pop-Ups,

00:33:10.290 --> 00:33:11.808
Anchors, all die Geschichten.

00:33:12.342 --> 00:33:14.902
Da kannst du heute wirklich sehr, sehr geile Geschichten machen.

00:33:17.579 --> 00:33:22.596
Und deswegen finde ich ja das Thema CSS generell spannend, weil es ja meiner

00:33:22.596 --> 00:33:28.106
Meinung nach mehr wächst sogar als JavaScript, weil gut, JavaScript,

00:33:28.106 --> 00:33:31.917
da kommt manchmal eine neue Array-Funktion hinzu und,

00:33:32.602 --> 00:33:36.706
noch blablabla, aber so im Großen und Ganzen ist es ein bisschen ruhiger geworden.

00:33:36.706 --> 00:33:40.508
Fühlt sich das schon relativ, ist ruhiger geworden, fühlt sich auch ein bisschen

00:33:40.793 --> 00:33:43.167
fertig an, so was, okay, was wollen wir noch?

00:33:43.951 --> 00:33:48.876
Wird noch irgendwie eine API angebunden, wo dann wieder abgestellt wird wegen

00:33:48.876 --> 00:33:53.185
Sicherheitsbedenken oder wegen Fingerprinting, so fühlt sich jedenfalls immer ein bisschen an.

00:33:54.840 --> 00:34:00.674
Aber bei CSS passiert halt schon momentan extrem viel also gerade eben,

00:34:01.597 --> 00:34:08.566
auch von der von dieser UI Open UI Initiative wo dann immer wieder neue Sachen

00:34:08.566 --> 00:34:10.229
reinkommen was auch extrem geil ist,

00:34:11.744 --> 00:34:19.266
und finde ich bei Tailwind ja bei jedem Tailwind Projekt wäre es halt gut wenn

00:34:19.266 --> 00:34:23.636
jedem Tailwind Projekt ein CSS Nerd hätte und ein bisschen das Auge drauf hätte,

00:34:23.636 --> 00:34:26.523
hat auch bei den Pull-Requests oder auch eigene,

00:34:27.127 --> 00:34:32.696
Tailwind-Plugins schreiben kann, was ja auch sehr viel einfacher geworden ist mit der Version 4.

00:34:32.696 --> 00:34:36.171
Also jedenfalls ist es auch besser lesbar und verständlicher für alle.

00:34:36.786 --> 00:34:41.210
Davor war das ja JavaScript pur und das war manchmal schon ein Pain in the Ass.

00:34:42.499 --> 00:34:45.616
War bei mir jedenfalls so, wenn ich dann nach einem halben Jahr wieder drauf

00:34:45.616 --> 00:34:49.132
geschaut habe, dass ich gedacht habe, meine Güte, was mache ich da eigentlich genau?

00:34:51.024 --> 00:34:56.999
Und ist jetzt schon einfacher geworden. Aber genau weil das halt jetzt so einfacher

00:34:56.999 --> 00:35:00.787
weiterbar ist mit den eigenen Funktionen, wo du dann dazu schmeißen kannst,

00:35:01.270 --> 00:35:03.185
kannst du auch im Tailwind sagen,

00:35:03.690 --> 00:35:07.644
ja egal ob die das jetzt schon unterstützen, dieses neue Anchor-Feature oder,

00:35:08.444 --> 00:35:10.516
Pop-Up-Modal-Dialog-Feature,

00:35:11.306 --> 00:35:16.206
ich kann es sehr schnell verwenden und mir eigentlich dann auch sehr viel JavaScript ersparen,

00:35:17.146 --> 00:35:22.539
was wiederum dann auch performance-mäßig spannend ist, weil wenn es der Browser

00:35:22.539 --> 00:35:27.246
einfach so kann und ich das dänisch beibringen muss, ist es für mich halt ein riesen Benefit.

00:35:28.274 --> 00:35:33.470
Klar, kann man mit BEM auch machen oder mit anderen Notationen.

00:35:35.728 --> 00:35:40.739
Nur wenn ich jetzt eben ein Editor habe, wo dann auch diese Automoblition drin

00:35:40.739 --> 00:35:47.115
habe und jetzt kommt jemand, wo das vielleicht noch nicht so auf Lunge geraucht hat, das ganze System,

00:35:47.626 --> 00:35:50.539
wird dem quasi auch vorgeschlagen, hey, du hast noch die Klasse,

00:35:50.539 --> 00:35:54.673
wenn Pop-Over-Open oder Starting-Style und all die Geschichten.

00:35:55.422 --> 00:35:58.119
Das macht es dann halt auch ein bisschen angenehmer für diese Leute,

00:35:58.119 --> 00:36:02.989
wo jetzt nicht so oberfit sind im CSS und sie quasi kann sie auch,

00:36:02.989 --> 00:36:06.411
so jedenfalls wie es erlebt, kann sie dann auch motivieren,

00:36:06.980 --> 00:36:11.659
die CSS-Only-Lösung zu fahren und nicht unbedingt, ich schmeiße jetzt da wieder

00:36:11.659 --> 00:36:14.079
ein JavaScript-Framework drauf,

00:36:14.822 --> 00:36:19.319
wo mir eine Klasse er draufsetzt, wenn jetzt dieses Form-Input invalid ist,

00:36:19.319 --> 00:36:21.341
sondern ich kann es einfach per CSS lösen.

00:36:22.334 --> 00:36:27.768
Und das ist so ein bisschen meine Erfahrung, wo ich hatte, wo es wieder dem beistimmt,

00:36:28.493 --> 00:36:32.449
wo er sagt, ja, es hilft halt schon, wenn ich jetzt nicht so fit bin in jedem

00:36:32.449 --> 00:36:37.039
Bereich, im CSS-Bereich, durch die Autocompletion Sachen zu verwenden,

00:36:37.039 --> 00:36:38.878
wo ich sonst vielleicht nicht verwenden würde.

00:36:39.829 --> 00:36:44.349
Aber es steigert für mich ein bisschen die Qualität dann, wenn jetzt jemand

00:36:44.349 --> 00:36:47.875
vom Team halt eine Komponente entwickelt, wo nicht so fit ist in dem Bereich.

00:36:50.464 --> 00:36:53.511
Der Peter, der schart schon hier, der ist schon ganz...

00:36:53.671 --> 00:36:56.698
Nein, nein, nein, nein, nein, nein, pass auf, pass auf, pass auf,

00:36:56.965 --> 00:36:58.801
ich mache nur gerade einen Fact-Check, weil ich mir gerade nicht sicher war,

00:36:58.801 --> 00:37:01.241
ob ich spinne, aber ich gucke gerade hier, ich habe gerade Visual Studio Code

00:37:01.241 --> 00:37:05.151
aufgemacht, habe eine random HTML-Datei aufgemacht und dann ein Style-Tag reingemacht

00:37:05.151 --> 00:37:06.248
und ich kriege ja irgendwie auch,

00:37:07.525 --> 00:37:09.789
CSS-Auto-Completion sehe ich da jetzt gerade.

00:37:11.763 --> 00:37:15.291
Ja, genau, wahrscheinlich ist es, aber es ist einfach sozusagen nicht,

00:37:15.791 --> 00:37:21.941
also ich glaube, bei Tailwind kriegst du halt so Tokens, die halt mehrere Dinge

00:37:21.941 --> 00:37:25.417
zusammen kombinieren und vielleicht auch irgendwelche Fallbacks integrieren.

00:37:26.235 --> 00:37:29.791
Also das hast du halt wahrscheinlich, hast du halt einfach nicht,

00:37:29.791 --> 00:37:34.571
wenn du, also es macht es so ein bisschen, bringt so ein bisschen mehr Convenience, würde ich sagen.

00:37:35.047 --> 00:37:39.791
Ich würde den anderen Laptop rausholen, wo ich Cloud installiert habe und gucken,

00:37:39.791 --> 00:37:44.450
ob das da nicht zufälligerweise auch kommt mit CSS. Müssen wir mal gucken.

00:37:44.839 --> 00:37:49.883
Ja, ich finde so ein klassisches Beispiel, wo man auch Schüler fragen kann,

00:37:51.277 --> 00:37:55.067
wo es noch nicht so lange geht, aber ich ein voll geiles Ding finde,

00:37:55.456 --> 00:37:59.961
sind ja diese Color Functions, wo ich sagen kann, hey, nimm die Current Color

00:37:59.961 --> 00:38:02.173
und mach sie 50% transparent.

00:38:02.933 --> 00:38:09.141
Ist halt in Tailwind schon sehr einfach, da sage ich Text Current Slash 50 und

00:38:09.141 --> 00:38:16.180
dann ist das die Current Call auf 50%, das kann ich einem CSS-Newbie sehr leicht beibringen, klar.

00:38:17.045 --> 00:38:20.381
Und das Coole ist, wenn er die Maus rüberfährt und er sieht das dann,

00:38:20.381 --> 00:38:24.591
okay, das schreibt die und die Klasse, so funktioniert das, der lernt dann quasi

00:38:24.591 --> 00:38:28.451
automatisch Learning by Doing, aber so aus dem Stehgreif.

00:38:30.617 --> 00:38:37.081
Zu sagen, ja okay, in OKCH, Current Color und jetzt nimm die Farbe und 50% Alpha

00:38:37.081 --> 00:38:38.522
transparent dazuschmeißen,

00:38:39.358 --> 00:38:43.551
das kann da nicht jeder, also ich glaube, wenn ich jetzt überlege,

00:38:43.551 --> 00:38:46.331
könntest du auch nicht direkt aus dem Stehgreif einfach so aufschreiben,

00:38:46.331 --> 00:38:48.727
müsst auch überlegen, okay, wie geht das jetzt nochmal genau,

00:38:49.314 --> 00:38:53.711
weil du ja ganz viel hast in die Geschichte und das sind dann so Sachen,

00:38:53.711 --> 00:38:56.744
wo ich schon recht cool finde, wo auch den Leuten halt hilft,

00:38:57.650 --> 00:39:02.381
Sachen zu verwenden und nicht hundertmal die gleiche Farbe definieren zu müssen,

00:39:02.381 --> 00:39:07.210
sondern quasi mit diesen komponentenbasierten Sachen zu arbeiten.

00:39:08.968 --> 00:39:12.671
Und ja, ich habe für mich Tailwind ein bisschen so erweitert,

00:39:12.671 --> 00:39:18.051
dass ich so ein Data-Theme habe, wo ich dann Main, Minor oder Primary,

00:39:18.051 --> 00:39:20.981
Secondary nennen sie es, wie es willst, anhängen kann.

00:39:20.981 --> 00:39:25.361
Und dann färbt sich der Button je nachdem in der verschiedenen Farben und hat

00:39:25.361 --> 00:39:27.875
dann eben diese verschiedenen Farben Auszeichnungen.

00:39:28.671 --> 00:39:33.731
Und wenn man dann eben mit diesen Kniffs arbeiten kann, wird es dann schon relativ

00:39:33.731 --> 00:39:38.661
einfach und leicht auch zu handeln und auch im Frontend leicht zu beprüfen,

00:39:38.661 --> 00:39:40.145
okay, jetzt hat der Button diese,

00:39:40.999 --> 00:39:47.161
Data-Theme dran und dann schalten quasi die Custom-Properties um und dann ändern

00:39:47.161 --> 00:39:50.471
sich die komplette Erscheinungsbild, egal ob es ein Hero ist oder ob es ein

00:39:50.471 --> 00:39:51.779
Button ist oder was auch immer.

00:39:52.226 --> 00:39:55.354
Das ist schon, eigentlich finde ich, extrem angenehm zu arbeiten.

00:39:56.028 --> 00:40:01.253
Und logisch, alles, was wir besprechen, ist ja nicht ein Tailwind-only-Feature,

00:40:02.309 --> 00:40:06.991
weil Tailwind ist ja unterm Strich auch nur einfach CSS. Also man kann jetzt

00:40:06.991 --> 00:40:10.999
nicht sagen, du kannst mit Tailwind-Sachen machen, was du mit CSS nicht kannst.

00:40:12.392 --> 00:40:20.111
Eher andersrum, aber es hilft halt diese, dem Editor wird halt wirklich geholfen,

00:40:20.111 --> 00:40:23.218
diesen Pain herauszunehmen aus.

00:40:24.891 --> 00:40:30.616
Ich habe das globale CSS und das lokale HTML und das war meiner Meinung nach

00:40:30.616 --> 00:40:38.234
auch dieser Haupterfindungsgrund von Tailwind, diesen Schmerz quasi zu beseitigen.

00:40:39.465 --> 00:40:44.036
Und für mich jetzt auch in meiner Entwicklungsumgebung finde ich es angenehm,

00:40:44.036 --> 00:40:48.695
weil ich mische dann manchmal auch ein paar Svelte-Komponenten dazu,

00:40:49.194 --> 00:40:53.246
wo ein bisschen komplexere Sachen machen. also Widget-mäßig.

00:40:54.500 --> 00:40:57.808
Und wenn ich dort dann auch wieder Tailwind verwenden kann und ich muss nicht

00:40:57.988 --> 00:41:01.158
nochmal Styles generieren, wo ich dann nochmal reinziehen muss, sondern,

00:41:01.680 --> 00:41:04.931
die Klassen sind eh schon vorhanden und entspricht eh so ein bisschen dem Stil

00:41:05.326 --> 00:41:10.506
vom Design, wie ich es aufbaue, dann wird die Svelte-Komponente gar nicht grösser,

00:41:10.506 --> 00:41:13.650
sondern hat eh schon diese Tailwind-Klassen drin und fertig und gut ist.

00:41:14.538 --> 00:41:20.158
Und wenn die Komponente des Widgets nicht verwendet ist, dann ist es halt nicht da und es passt auch.

00:41:20.552 --> 00:41:24.526
Und das ist für mich halt so das auch Coole, wenn du jetzt eben ein Projekt

00:41:24.526 --> 00:41:29.076
hast, wo du nicht nur React oder Vue oder Svelte oder was auch immer verwendest,

00:41:29.076 --> 00:41:35.418
sondern auch vielleicht so ein gemixtes Umfeld hast mit Widgets,

00:41:35.975 --> 00:41:38.494
wie Svelte zum Beispiel halt ein bisschen auch entstanden ist.

00:41:39.487 --> 00:41:44.076
Du hast eigentlich ein klassisches Templating und dann kommen da noch diese

00:41:44.076 --> 00:41:45.617
dynamischen Komponenten hinzu.

00:41:46.064 --> 00:41:51.346
Das ist halt dann für mich ein Riesenvorteil, weil auf einmal die CSS-Datei

00:41:51.346 --> 00:41:55.326
dann massiv geschwumpft ist und ich wusste, dass wo eine CSS-Datei drin ist,

00:41:55.326 --> 00:41:58.469
das benötige ich wirklich und sonst nichts mehr.

00:41:59.125 --> 00:42:01.320
Das ist halt dann schon sehr, sehr nice.

00:42:02.962 --> 00:42:08.466
Und Frank, das ist dann aber auch wieder ein bisschen natürlich die Obhut des

00:42:08.466 --> 00:42:11.583
CSS-Nerds, sage ich mal, wenn du es ein bisschen clever aufbaust mit,

00:42:12.837 --> 00:42:16.848
Custom Properties und nur noch Custom Properties steuerst durch gewisse Klassen,

00:42:17.127 --> 00:42:18.601
wo dann sehr viel umstellen,

00:42:19.489 --> 00:42:25.828
farbtechnisch oder abständetechnisch kannst du dann diese Tailwind-Klassen nochmal reduzieren.

00:42:28.057 --> 00:42:35.135
Was es dann auch wieder ganz angenehm macht zu bearbeiten und du das Zeug auch

00:42:35.135 --> 00:42:36.625
sehr dynamisch aufbauen kannst.

00:42:36.625 --> 00:42:39.955
Du kannst dir sagen, der Redakteur kann wählen, ja, ich habe jetzt fünf Spalten,

00:42:39.955 --> 00:42:43.645
ich habe vier Spalten, Bento Box und wie und egal.

00:42:43.965 --> 00:42:47.975
Ich setze nur noch ein Custom Property aufs Element als Teil und fertig und

00:42:47.975 --> 00:42:49.349
der Rest sind die Klassen.

00:42:50.051 --> 00:42:53.627
Das wächst dann nicht immer mit jeder Variante, wo ich dann erstellen muss.

00:42:54.115 --> 00:42:55.682
Das ist halt dann schon sehr, sehr nice.

00:42:58.975 --> 00:43:04.240
Wenn jetzt kurz Stille ist, eröffne ich jetzt gleich mal noch das nächste gefährliche Thema.

00:43:06.190 --> 00:43:11.264
Und zwar haben wir, denke ich, ich unterstelle uns das jetzt einmal,

00:43:11.618 --> 00:43:15.629
dass wir alle wahrscheinlich eher schlechte Erfahrungen damit gemacht haben,

00:43:15.629 --> 00:43:18.159
Frontends mit AI zu generieren.

00:43:18.159 --> 00:43:23.570
Und ich meine jetzt tatsächlich das CSS-lastige Frontend und nicht den JavaScript-Gedöns dazu.

00:43:24.818 --> 00:43:29.659
Und am Anfang dachte ich noch, das liegt dran, dass die Agents können das halt

00:43:29.659 --> 00:43:34.869
nicht ausprobieren, also installiere ich mir Playrate-MCPs, damit verbratet

00:43:34.869 --> 00:43:36.061
man auch gerne ein bisschen

00:43:36.468 --> 00:43:39.859
Tokens, damit die Screenshots erstellen und sich das noch irgendwie anschauen

00:43:39.859 --> 00:43:43.059
können, dann stolpert man über Probleme wie, aber dafür muss ich erstmal das

00:43:43.059 --> 00:43:45.109
Mutter, um Gottes willen, jetzt muss ich mich erstmal einloggen,

00:43:45.109 --> 00:43:46.435
jetzt schreibe ich ihr irgendwie schon,

00:43:47.010 --> 00:43:50.771
Integration-Specs und End-to-End-Tests, nur damit der Agent sich was anschauen kann.

00:43:52.147 --> 00:43:56.524
Gleichzeitig habe ich aber aus der Community gehört, so schöne Sitzige,

00:43:56.750 --> 00:43:59.979
man braucht jetzt keine Frontend-Developer mehr, das kann mir ja alles in Agents

00:43:59.979 --> 00:44:03.909
geben, wo ich mir dachte, Frontend ist doch das Schwerste für AI,

00:44:03.909 --> 00:44:06.404
das ist ja der Teil, den ich noch selber machen muss.

00:44:07.519 --> 00:44:10.979
Und da ist mir aufgefallen, klar, erstmal Greenfield ist natürlich immer alles

00:44:10.979 --> 00:44:12.981
super simpel, da braucht man nicht drüber reden.

00:44:13.504 --> 00:44:18.461
Aber ein großer Unterschied ist, dass dann die Agents schon sowas wie Tailwind verwenden.

00:44:18.763 --> 00:44:21.809
Ah, ist gut dokumentiert, aber ist das jetzt wirklich der Kronen,

00:44:21.809 --> 00:44:23.720
gibt halt viele Beispiele, keine Ahnung.

00:44:24.400 --> 00:44:32.182
Ich denke aber, dass da vielleicht die AI sehr menschlich ist und ebenfalls die Probleme hat,

00:44:33.267 --> 00:44:41.911
solche CSS-Klassen zu verstehen, wie Card, Wrapper, Inner, Container, Bordered-Variant.

00:44:42.779 --> 00:44:47.609
Und da ist es dann doch irgendwie einfacher zu lesen, ist eine Karte,

00:44:47.609 --> 00:44:51.679
hat einen Border, ist egal, ist halt irgendwie sowas. Und ja.

00:44:53.457 --> 00:45:00.139
Die Frage, die ich jetzt so im Raum stelle, ist es vielleicht halt dann tatsächlich sinnvoller,

00:45:00.842 --> 00:45:07.801
was zu benutzen, was für eine größere Masse an Menschen und Agents einfacher

00:45:07.801 --> 00:45:10.942
ist, zu lesen und zu warten und zu benutzen,

00:45:11.541 --> 00:45:14.761
als irgendwas, was mir die Möglichkeiten gibt, wirklich schöne,

00:45:14.761 --> 00:45:21.041
elegante Lösungen zu schreiben, wo sowas wie CSS Grid ganz einfach verwendbar

00:45:21.041 --> 00:45:24.091
ist, was ich bei Tailwind immer noch so ein bisschen Hickey-Hackey finde und

00:45:24.091 --> 00:45:25.343
dann nimmt man halt doch wieder Flex.

00:45:27.432 --> 00:45:30.851
Und ja, ich folge halt hier, wie ich das schon rausbringe, immer so ein bisschen

00:45:30.851 --> 00:45:33.571
eher den Weg von, ich will das einfach einfach nur lesen können und einfach

00:45:33.571 --> 00:45:37.171
nur warten können und brauche nicht unbedingt die eleganteste,

00:45:37.171 --> 00:45:40.941
beste CSS-Lösung, auch wenn ich weiß, dass es da wahrscheinlich schönere Lösungen gäbe.

00:45:41.771 --> 00:45:45.251
Zusammen mit der zweiten Frage, sollten wir unseren Code optimieren,

00:45:45.251 --> 00:45:48.941
damit Agents ihn gut lösen können? Das können dann eher Projekte und Firmen

00:45:48.941 --> 00:45:52.981
für sich selber klären, Aber ich würde es auch gerne hier mal in den Raum werfen

00:45:52.981 --> 00:45:55.668
und ducke mich jetzt mal gleich vor.

00:45:57.041 --> 00:46:00.081
Es schaut keiner böse, aber ich bin gespannt, was ihr darüber denkt.

00:46:03.545 --> 00:46:08.467
Naja, ich kann ja mal den Aufschlag einer Antwort geben, der bei mir halt eigentlich immer nur der ist.

00:46:10.429 --> 00:46:13.095
Ich würde halt die Auswahl meiner Werkzeuge davon abhängig machen,

00:46:13.095 --> 00:46:16.809
welches Problem ich zu lösen habe und von relativ wenig anderem.

00:46:18.701 --> 00:46:22.735
Ich will einen Nagel in die Wand treiben, dann, okay, ja, liegt die Bohrmaschine

00:46:22.735 --> 00:46:25.785
näher und ich könnte mit der das theoretisch auch machen, aber vielleicht greife

00:46:25.785 --> 00:46:28.855
ich dann doch zum Hammer, wenn es jetzt nicht komplett unmöglich ist,

00:46:28.855 --> 00:46:30.896
einen irgendwie in den nächsten fünf Minuten aufzutreiben.

00:46:32.858 --> 00:46:37.925
Und in diesem Statement sind ja sehr viele Sachen drin, die ja so unmittelbar

00:46:37.925 --> 00:46:41.630
jetzt gar nicht zu beantworten sind mit, trifft diese Annahme zu oder nicht.

00:46:42.512 --> 00:46:47.510
Also ist das jetzt irgendwie für einen Agent oder Menschen irgendwie besser lesbar?

00:46:48.125 --> 00:46:51.625
Schwierig zu beantworten, wenn das der Fall ist. Woran liegt das?

00:46:52.005 --> 00:46:54.168
Bleibt das so oder ist das eine Momenteaufnahme?

00:46:55.045 --> 00:46:59.161
Das halte ich halt irgendwie für relativ schwer zu antizipieren,

00:47:00.623 --> 00:47:06.005
und ich habe viel zu wenig Einsicht in die Details der Implementierung von all diesen Systemen,

00:47:06.846 --> 00:47:10.735
um mir jetzt zuzutrauen, dass ich da irgendwie eine definierte Aussage zu treffe

00:47:10.735 --> 00:47:14.944
oder irgendwas Aussage auf der Basis von, ich glaube, dass das so ist weil,

00:47:15.095 --> 00:47:17.565
sagen wir mal ehrlich, ich habe keine Ahnung ich habe keine Ahnung,

00:47:17.565 --> 00:47:21.149
wie das zustande kommt, dass die Dinger per Default React und BAM machen,

00:47:21.700 --> 00:47:23.778
vielleicht ist das einfach, was sie am meisten gescrapt haben,

00:47:23.958 --> 00:47:25.685
vielleicht ist das objektiv das Sinnvollste.

00:47:25.685 --> 00:47:28.672
Vielleicht wurde die persönlich vom Facebook-Team bezahlt, ich habe keine Ahnung,

00:47:29.425 --> 00:47:32.755
aber irgendwas davon wird sein und es gibt für mich, also nicht nur weiß ich

00:47:32.755 --> 00:47:37.234
das nicht, sondern ich sehe nicht mal die Möglichkeit, wie ich ermitteln kann, was wahr ist.

00:47:37.913 --> 00:47:40.711
Und von daher definiere ich das als Not My Department.

00:47:42.941 --> 00:47:47.329
Ja, also ich muss schon sagen, AYA hat die letzten paar Monate schon sehr viel dazugelernt.

00:47:48.183 --> 00:47:51.642
Ich kann es inzwischen auch ganz anständig mit's Welt verwenden.

00:47:53.332 --> 00:47:58.161
Ohne dass irgendwelcher Objektzeug reinkommt. Das war am Anfang ja immer gern da drin.

00:48:01.052 --> 00:48:06.259
Ich habe so einen Kollegen, einen Kumpel von mir, der ist jetzt nicht Frontendler

00:48:06.561 --> 00:48:09.309
direkt, würde ich sagen. Er kann so ein bisschen, hat ein bisschen Verständnis

00:48:09.309 --> 00:48:11.803
dafür. Er kann auch gut beschreiben, was er will.

00:48:12.453 --> 00:48:16.119
Und der baut dann immer gern manchmal mit Tailwind sich die Sachen,

00:48:16.639 --> 00:48:18.252
Tailwind und AI zusammen.

00:48:20.585 --> 00:48:24.201
Und ich nehme es dann meistens als Starting Point und überarbeite es dann nochmal.

00:48:27.081 --> 00:48:36.287
Aber jetzt in dem Punkt kommt er halt weiter mit dieser Hilfe als er ohne das schaffen würde,

00:48:37.640 --> 00:48:42.309
weil der wusste zum Beispiel gar nicht dass man jetzt Aspect Trade Show dass

00:48:42.309 --> 00:48:43.555
man das irgendwie setzen kann,

00:48:45.157 --> 00:48:48.983
ich weiß nicht ob er diesen Padding Trick so gekannt hat, weiß ich jetzt nicht nehme ich mich nicht an,

00:48:50.823 --> 00:48:55.499
aber er hat halt jetzt in dem Punkt bei ihm einen Vorsprung,

00:48:55.499 --> 00:48:57.795
weil ich schon ein bisschen mehr weiß, was alles möglich ist.

00:48:59.797 --> 00:49:06.862
Und natürlich die Sachen, wo jetzt on the edge sind, oder wo ganz neu sind,

00:49:07.315 --> 00:49:11.553
und wo man auch verwenden kann, weiß ja AI auch nicht wirklich.

00:49:12.214 --> 00:49:14.832
Ich habe jetzt vor ein paar Monaten, oder letzten Monat war das,

00:49:15.442 --> 00:49:19.119
an der Neos-Konferenz ein Talk gehalten, so, your browser ist ja Superhero,

00:49:19.559 --> 00:49:25.054
schmeiß mal dieses Plugin und dieses Ding weg, weil dein Browser kann es inzwischen nativ.

00:49:26.000 --> 00:49:30.249
Und da war auch so mein Anekdote am Fluss, ja, AI kann man schlecht fragen,

00:49:30.249 --> 00:49:35.349
du kannst einfach eine Dokumentation lesen oder gewissen Leuten auf YouTube

00:49:35.349 --> 00:49:38.283
folgen, wo immer wieder so Shorts machen, wie der Kevin,

00:49:38.783 --> 00:49:41.929
wo sich jetzt inzwischen schon relativ viele Leute kennen.

00:49:41.929 --> 00:49:45.888
Kevin Povel heißt er, glaube ich, Povel, irgendwie so, aus Kanada.

00:49:46.850 --> 00:49:48.412
Der macht auch ganz nice Sachen.

00:49:49.962 --> 00:49:53.359
Ist auch nicht so ein Tailwind-Fan, habe ich gemerkt, aber ist ja völlig egal.

00:49:53.359 --> 00:49:54.641
Ich finde es cool, was er macht.

00:49:56.941 --> 00:50:00.205
Und ich glaube, das ist immer so ein bisschen das bei AI, wo man sich halt im

00:50:00.205 --> 00:50:04.085
Hinterkopf halten kann. Ja, es hat so einen gewissen Wissensstand,

00:50:04.085 --> 00:50:06.397
aber nicht jetzt so das Allerneueste.

00:50:07.894 --> 00:50:11.365
Aber vielen Leuten, wo halt zwischendurch was machen müssen,

00:50:11.365 --> 00:50:14.691
weil Not am Mann ist oder er will jetzt einfach was fertig kriegen,

00:50:15.468 --> 00:50:19.255
kann es dann halt schon auch helfen, dass sie da ein bisschen ein anständiges

00:50:19.255 --> 00:50:24.505
CSS generieren, als wenn sie jetzt da selber anfangen würden, CSS-Dateien,

00:50:25.238 --> 00:50:29.995
rumzuschieben und ganz lustige BEM-Klassen zu schreiben, wo sie dann vielleicht

00:50:29.995 --> 00:50:33.235
auch nicht wissen, oh, das wurde im Projekt schon mal verwendet und in anderen

00:50:33.235 --> 00:50:36.627
Ecken vom System fällt das Regal um.

00:50:37.968 --> 00:50:44.957
Und das wird halt durch das Vermienen. Also das ist für mich nach wie vor eines der Hauptbenefite,

00:50:45.509 --> 00:50:49.090
wenn man in Teams arbeitet, in grösseren Teams dann umso mehr,

00:50:49.549 --> 00:50:53.258
dass halt diese Konsistenz dann einfach gegeben ist und das nicht ein aus Versehen,

00:50:53.839 --> 00:50:59.005
eine BEM-Klasse nimmt, wo dann gleich heißt, die hundertste BTN-Klasse oder

00:50:59.005 --> 00:51:00.480
Button oder weiß nicht was,

00:51:01.739 --> 00:51:03.887
weil er jetzt nicht gerade gewusst hat, dass es eh schon gibt,

00:51:04.741 --> 00:51:06.558
oder die hundertste Card-Komponente.

00:51:08.241 --> 00:51:13.433
Das wird halt durch das ein bisschen vermindert. Und ja, also mein Kumpel,

00:51:13.433 --> 00:51:17.841
der würde sagen, der will jetzt nicht mehr ohne AI seine Frontend-Sachen bauen.

00:51:18.573 --> 00:51:21.863
Klar, er braucht dann jemanden, wo es dann noch sagt, ich bügel da nochmal drüber

00:51:21.863 --> 00:51:26.193
und nehme da ein bisschen unnötige Diffs weg und unnötige Klassen,

00:51:26.193 --> 00:51:27.594
wo es überhaupt keinen Sinn machen.

00:51:28.720 --> 00:51:34.493
Aber das hilft schon recht. Und was ich aber cool finde, das machen auch CSS

00:51:34.493 --> 00:51:36.406
Auto-Completion zum Teil auch schon.

00:51:37.630 --> 00:51:42.763
Aber wenn ich jetzt eine Klasse setze, wie zum Beispiel Absolut und hinten dann

00:51:42.763 --> 00:51:47.753
Relative sagt mir mein Editor, hey du das ist das gleiche Property das ist ein

00:51:47.753 --> 00:51:50.463
Fehler, schau das mal bitte an oder,

00:51:52.886 --> 00:51:56.520
du überschreibst da was, was du vorhin da gesetzt hast, bitte pass da auf,

00:51:56.862 --> 00:52:02.679
das ist schon sehr nice, dass du da ein bisschen mit dem arbeiten kannst und ja,

00:52:04.374 --> 00:52:08.233
Ja und das könnte man eigentlich noch viel weiter treiben, weil ja CSS in letzter

00:52:08.233 --> 00:52:10.324
Konsequenz eine statisch typisierte Sprache ist,

00:52:10.963 --> 00:52:14.853
und man theoretisch das ja nicht nur so inselmäßig analysieren könnte,

00:52:14.853 --> 00:52:17.993
von wegen Relative nach Absolut macht keinen Sinn, weil das kollidiert,

00:52:17.993 --> 00:52:19.833
das könnte man ja theoretisch auf alles anwenden.

00:52:19.833 --> 00:52:24.193
Man könnte das ja in einen Baum aus Typinformationen gießen und einfach irgendwie

00:52:24.193 --> 00:52:28.713
alles immer so anzeigen, wenn man da entsprechende Energie reinballern würde.

00:52:30.751 --> 00:52:34.692
Wenn man es halt mal ernst nehmen würde, tut ja keiner. Ist ja CSS, kann ja weg.

00:52:36.980 --> 00:52:42.098
Ja, aber die Browser-Hersteller, also gerade Apple, was die in den letzten Jahren

00:52:42.098 --> 00:52:47.968
aufgeholt haben in CSS, muss ich sogar sagen, die haben CSS in den letzten paar

00:52:47.968 --> 00:52:49.638
Jahren ernster genommen als JavaScript.

00:52:49.638 --> 00:52:53.308
Also die sind ja, das Safari ist ja beim JavaScript noch ein paar,

00:52:53.308 --> 00:52:56.990
viele Sachen im Hintertreffen im Vergleich zu Chrome und anderen.

00:52:59.242 --> 00:53:04.068
Und bei CSS haben die aber richtig viel investiert und auch viel beigesteuert,

00:53:04.068 --> 00:53:07.131
wo ich sagen muss, wo dann allen geholfen hat.

00:53:07.677 --> 00:53:11.208
Ja, im Kern, aber nicht in dem amerikanischen Gesamtpaket, das du vorhin ja

00:53:11.208 --> 00:53:12.401
so eloquent beschrieben hast.

00:53:14.218 --> 00:53:18.978
Was halt eben fehlt, ist das Ganze drumherum. Was halt irgendwie fehlt,

00:53:18.978 --> 00:53:21.598
ist tatsächlich, also okay, die gibt es da auf YouTube vereinzelt,

00:53:21.598 --> 00:53:23.210
die CSS-Vorreiter, die irgendwie,

00:53:23.948 --> 00:53:26.130
damit auch sagen, guck mal, was du Krasses bauen kannst oder so,

00:53:26.478 --> 00:53:28.858
Aber gerade so im Bereich von Tooling ist da, glaube ich, noch wirklich sehr

00:53:28.858 --> 00:53:30.263
viel ungehobenes Potenzial.

00:53:30.681 --> 00:53:34.888
Denn wie gesagt, du könntest einen CSS-Type-Checker haben, der halt auf einer

00:53:34.888 --> 00:53:37.738
Stufe mit TypeScript steht und dir genau sagen kann, das, was du da schreibst,

00:53:37.738 --> 00:53:39.592
kann so nicht funktionieren und hier ist der Grund dafür.

00:53:41.763 --> 00:53:44.868
Das drumherum fehlt, das Tooling fehlt. Stattdessen erfinden wir Tools,

00:53:44.868 --> 00:53:49.170
die zum Beispiel theoretisch CSS-Klassen umschreiben, weil es halt ein bisschen bequemer.

00:53:49.669 --> 00:53:52.688
Wenn man da mal an der fundamentaleren Ebene ansetzen würde,

00:53:52.688 --> 00:53:55.486
könnte man halt irgendwie statisch typisiertes CSS haben.

00:53:55.602 --> 00:53:58.737
Das fände ich persönlich viel krasser, weil dann könnte man das Original schreiben,

00:53:58.940 --> 00:54:03.352
bräuchte keine extra Libraries, um das zu supporten, wird mit allem funktionieren

00:54:03.729 --> 00:54:07.958
und man könnte halt Fehler vermeiden und müsste sich die nicht hinterher aus HTML rauskompilieren.

00:54:08.481 --> 00:54:09.915
Das könnte gut sein, wie es ist.

00:54:13.862 --> 00:54:19.290
Ich wollte eigentlich nur nochmal reingehen und sagen, dass eigentlich,

00:54:20.910 --> 00:54:24.280
also das, was wir letztes Mal gesagt haben, dem, was wir jetzt gerade diskutieren,

00:54:24.280 --> 00:54:26.380
ja auch gar nicht so wahnsinnig widerspricht.

00:54:26.380 --> 00:54:31.776
Also ich glaube, dass wir letztes Mal auch gesagt haben, dass Tailwind,

00:54:33.390 --> 00:54:38.950
vielen Leuten die Arbeit mit CSS leichter macht, weil man eben einfach so Serviervorschläge

00:54:38.950 --> 00:54:42.710
hat, die man fix und fertig einsetzen kann, wo man eben auch einfach weiß,

00:54:43.560 --> 00:54:45.410
die laufen Cross-Browser.

00:54:45.910 --> 00:54:50.393
Da wird quasi hintenrum abgesichert, dass das auch robust ist.

00:54:51.650 --> 00:54:57.530
Und ich glaube, Peters Argumentation letztes Mal war, dass er eben dafür plädiert

00:54:57.530 --> 00:55:00.244
hat, dass man in seinen Projekten,

00:55:01.723 --> 00:55:08.746
ein CSS-Spezialisten haben sollte, damit, also weil Tailwind im Prinzip sozusagen

00:55:09.166 --> 00:55:12.978
eine Lösung ist, für wenn man solche Leute nicht hat.

00:55:14.886 --> 00:55:18.296
Würde ich differenzierter beschreiben wollen. Also nicht diesen einen CSS-Spezialisten,

00:55:18.296 --> 00:55:19.626
weil CSS ist mir zu technisch.

00:55:19.926 --> 00:55:25.086
Es geht mir halt wirklich mehr so darum, dass jemand nicht bei CSS oder UI-Spezialist,

00:55:26.155 --> 00:55:28.776
sondern tatsächlich nicht mal ein Spezialist sein muss, aber jemand,

00:55:28.776 --> 00:55:29.807
der dafür zuständig ist.

00:55:30.108 --> 00:55:33.336
Du kannst auch für was zuständig sein ohne die Maximalkompetenz zu haben.

00:55:33.574 --> 00:55:35.995
Aber du kannst halt eben sagen, das ist meine Aufgabe, die nehme ich ernst.

00:55:36.372 --> 00:55:39.026
Und wenn hier eine Entscheidung getroffen wird, für wegen führen wir jetzt noch

00:55:39.026 --> 00:55:42.966
eine siebte Button-Variante ein, dann geht die über meinen Schreibtisch und,

00:55:43.446 --> 00:55:44.714
passiert nicht irgendwie so.

00:55:45.596 --> 00:55:49.926
Das ist ja vielleicht mit Tailwind auch der Fall. Also das eine schließt das andere nicht aus.

00:55:50.306 --> 00:55:53.626
Wahrscheinlich gibt es in den Projekten Leute, die dafür zuständig sind und.

00:55:55.639 --> 00:55:58.436
Die entscheiden sich dann vielleicht für Tailwind. Das kann durchaus sein.

00:55:58.436 --> 00:56:02.976
Nur ich habe ja vorhin Jon so verstanden, dass er sagte, Und der Einsatz von

00:56:02.976 --> 00:56:07.106
Tailwind hat spezifisch Probleme gelöst, die entstehen, weil halt nicht alles

00:56:07.106 --> 00:56:08.171
über einen Schreibtisch geht.

00:56:08.658 --> 00:56:12.636
Das war dieser, glaube ich, dieser Wettmaster mit seinen etwas größeren Ambitionen

00:56:12.636 --> 00:56:13.749
bezüglich der Gestaltung.

00:56:15.084 --> 00:56:19.226
Also das ist ja tatsächlich wieder meine Idee von wegen, du hast auf jeden Fall

00:56:19.226 --> 00:56:23.256
ein Designsystem. Die Frage ist halt, ob du das implizit hast oder ob du es

00:56:23.256 --> 00:56:24.848
explizit oder irgendwo dazwischen hast.

00:56:26.955 --> 00:56:30.439
Also das ist halt eben eine vielschichtige Kiste. Es ist halt einerseits die

00:56:30.439 --> 00:56:33.969
Syntax und die Sachen zu schreiben mit halt irgendwie, das kann man dann irgendwie

00:56:33.969 --> 00:56:35.111
cooler finden oder nicht.

00:56:35.460 --> 00:56:38.409
Und es gibt halt diese Serviervorschläge, die man entweder so nehmen kann,

00:56:38.409 --> 00:56:41.735
wie sie sind oder sich was anderes hernehmen kann, was in die ähnliche Richtung geht.

00:56:42.083 --> 00:56:45.044
Aber das sind grundsätzlich erstmal zwei Concerns, die zusammengemanscht sind

00:56:45.410 --> 00:56:47.900
in eins, was ja irgendwie auch okay ist. Machst ein schönes Paket,

00:56:48.225 --> 00:56:51.290
buchst du halt Flug und Hotel in einem Schritt. Ist ja grundsätzlich alles fein.

00:56:51.638 --> 00:56:57.299
Aber was halt eben man gucken muss, ist, wie vergleicht sich das zu eben der

00:56:57.299 --> 00:57:03.183
Nulllösung, die halt eben daraus besteht, wie ich arrangiere mich halt mit dem, was schon da ist.

00:57:03.677 --> 00:57:07.259
Wo ich halt einfach sagen muss, ich habe halt so immer einen sehr lustigen Disconnect,

00:57:07.259 --> 00:57:10.637
wenn ich mit Menschen die ehrliche Arbeit verrichten, also mit euch so rede

00:57:10.915 --> 00:57:12.399
und das mit meiner Realität vergleiche,

00:57:12.399 --> 00:57:16.419
wo halt so Sachen wie die große CSS-Datei, in der alles drin ist.

00:57:17.949 --> 00:57:21.519
Die sehe ich halt persönlich mittlerweile eher selten, weil das halt auf die

00:57:21.519 --> 00:57:25.329
eine oder andere Weise in Komponenten gekapselt wird mit halt irgendwelchen

00:57:25.329 --> 00:57:26.902
Mechanismen, die da sein können.

00:57:27.251 --> 00:57:30.779
Ich mache halt irgendwie Oldschool-CSS in JavaScript, weil ich irgendwie ein

00:57:30.779 --> 00:57:34.414
React-Projekt von 1804 habe oder ich mache irgendwie was anderes.

00:57:35.289 --> 00:57:37.613
Ich mache vielleicht Up-Components mit Shadow DOM, keine Ahnung.

00:57:38.245 --> 00:57:41.792
Aber so, das ist dieser ganz große Klassiker von früher.

00:57:42.106 --> 00:57:44.769
Ich schreibe an die CSS-Datei hinten, was haben und plötzlich wird im Header

00:57:44.769 --> 00:57:46.767
was grün, was ich gar nicht grün haben wollte.

00:57:47.835 --> 00:57:50.749
Das sehe ich sehr selten und das höre ich mittlerweile auch sehr selten.

00:57:50.970 --> 00:57:53.289
Und ich frage mich halt immer, wenn auch das bei mir in meinem Hinterkopf noch

00:57:53.289 --> 00:57:55.889
so rumklappert, ob das einfach nur daran liegt, dass ich halt einfach nicht

00:57:55.889 --> 00:57:58.539
von früher loslassen kann und mal mit der Zeit gehen sollte,

00:57:58.539 --> 00:58:02.223
wo das einfach immer seltener passiert. Ist so mein Eindruck, meine Frage.

00:58:04.081 --> 00:58:06.759
Ich denke halt immer meine Nulllösung ist so schön, ich habe CSS Variable und

00:58:06.759 --> 00:58:09.812
den ganzen Kram und der ist halt schon da ich muss dafür nichts installieren,

00:58:10.118 --> 00:58:14.099
das wird sich auch niemals updaten, da gibt es keine Version 4 Gehirnausab dafür,

00:58:14.099 --> 00:58:17.968
ach da ist schon was nehme ich jetzt, setze ich ein Gehirnausab dafür funktioniert,

00:58:19.215 --> 00:58:20.771
super, kein Tooling, keine Updates,

00:58:22.890 --> 00:58:30.870
Und spannend, man muss ja immer noch bedenken, dass 90% der Webseiten mit einem

00:58:30.870 --> 00:58:35.034
System arbeiten, wo ja sehr gern und sehr einfach gehackt wird, wie WordPress.

00:58:37.397 --> 00:58:41.513
Und dort hast du halt zum Beispiel diese sehr viele Komponenten,

00:58:41.652 --> 00:58:45.690
Denken oder so, wie wir jetzt auch arbeiten können. Also ich möchte es ja auch

00:58:45.690 --> 00:58:50.017
nicht missen, aber sehr viele Systeme können das halt auch nicht.

00:58:51.063 --> 00:58:58.330
Oder auch bei Kunden, wo ältere Projekte da sind, wo halt riesige Monolithen

00:58:58.330 --> 00:59:04.157
sind und tausende von Geschichten reinfließen.

00:59:06.223 --> 00:59:12.498
Klar, widerspreche ich dir gar nicht, Peter, klar könnte man das auch mit BAM lösen.

00:59:13.381 --> 00:59:17.238
Wurde auch sehr viel gelöst, aber da war das Problem, dass CSS gewachsen ist,

00:59:17.238 --> 00:59:20.738
gewachsen ist und dann hat man Komponenten entfernt und man hat sich dann nicht

00:59:20.738 --> 00:59:23.738
getraut, CSS-Teile davon zu entfernen, weil man gemerkt hat,

00:59:23.738 --> 00:59:25.182
oh, da geht woanders was kaputt.

00:59:25.896 --> 00:59:27.841
Und das ist für mich so.

00:59:30.424 --> 00:59:36.891
Der Hauptbenefit für mich zu sagen, ja, okay, wenn ich die Komponente wegschmeiße,

00:59:37.413 --> 00:59:40.827
dann geht alles unnötige CSS automatisch auch weg.

00:59:41.512 --> 00:59:43.120
Und ich muss mich nicht darum kümmern.

00:59:43.822 --> 00:59:47.630
Ich muss nicht daran denken, ich muss nicht überlegen, okay, was ist jetzt da genau.

00:59:48.414 --> 00:59:53.148
Aber ist das nicht ein Problem, das tatsächlich durch ein System beim Definieren

00:59:53.148 --> 00:59:56.512
der visuellen Komponenten erschlagen gehört?

00:59:56.679 --> 00:59:59.999
Ist es nicht so, dass irgendwo definiert sein müsste, Beaudit ist ein Button

01:00:00.348 --> 01:00:03.648
mit den drei Varianten und den sieben Variablen und,

01:00:04.336 --> 01:00:07.337
der ist dann mehr oder minder, wenn man aus High-Level-Sicht arbeitet,

01:00:07.610 --> 01:00:10.978
ein Self-Contained-Ding, das man irgendwo reinplanken kann, vielleicht irgendwie

01:00:10.978 --> 01:00:13.763
ein bisschen themen kann, aber auch OnBlock auch wieder entfernen kann.

01:00:15.098 --> 01:00:19.748
Ja, oder weißt du, ich habe so mal ein Beispiel gebracht, ich habe ein Hero

01:00:19.748 --> 01:00:22.865
und das hat die Klasse Hero und jetzt.

01:00:24.229 --> 01:00:28.699
Hat das Hero ein Margin nach oben von,

01:00:29.913 --> 01:00:34.138
so und so viel Pixeln oder RAM oder was auch immer, völlig egal und jetzt kommt

01:00:34.138 --> 01:00:38.289
das Hero Element auf einmal tiefer unten auf der Seite und da brauche ich jetzt,

01:00:39.264 --> 01:00:44.928
null, also ich muss es resetten quasi und dann okay, jetzt kommt hero minus

01:00:44.928 --> 01:00:48.384
minus after text, dann bitte auf null,

01:00:48.994 --> 01:00:52.168
dann arbeitet man weiter und dann merkt man, oh, jetzt kommt das hero-element,

01:00:52.928 --> 01:00:56.838
auf einmal nach einem Bild und jetzt muss ich das auch auf null setzen,

01:00:56.838 --> 01:00:58.948
weil ich ja da nicht diesen weißen Streifen drin habe.

01:00:59.824 --> 01:01:03.348
Okay, jetzt habe ich wieder minus minus after image und jetzt habe ich after

01:01:03.348 --> 01:01:05.949
image und after text, was eigentlich das gleiche machen.

01:01:07.445 --> 01:01:10.652
Da weiß ich ja die Lösung. Also ich wüsste auch eine Lösung.

01:01:11.092 --> 01:01:15.834
Shep, du zuerst. Ja, also ich baue alle meine Komponenten ohne Margins.

01:01:16.019 --> 01:01:20.332
Und immer, immer, immer, immer. Und auch ohne Breitenbegrenzung und so.

01:01:20.954 --> 01:01:24.852
Und das, was eben dann die Margins setzt und die Breiten begrenzt,

01:01:24.852 --> 01:01:27.258
das ist dann die Komponente.

01:01:27.397 --> 01:01:32.331
Bei mir sind alles Komponenten, selbst wenn es quasi ein Page-Layout oder ein Teil-Layout ist.

01:01:32.680 --> 01:01:37.237
Also dieses Layout, was dann die Komponenten benutzt, das macht das.

01:01:38.932 --> 01:01:42.092
Ich hätte genau das geraten, dass das deine Lösung ist. Ich hätte es gewusst,

01:01:42.092 --> 01:01:43.367
errate kurz meine Lösung.

01:01:45.817 --> 01:01:50.430
Puh, du, wie würdest du das machen? Du würdest, ich weiß es nicht,

01:01:50.430 --> 01:01:52.390
ich gebe ja tausend Möglichkeiten. Die dümmstmögliche Lösung,

01:01:52.390 --> 01:01:55.701
Chef, was ist die dümmstmögliche maximale Low-Tech-Lösung?

01:01:56.247 --> 01:01:58.778
Du würdest wahrscheinlich den Sibling-Selektor nutzen.

01:01:59.399 --> 01:02:03.980
Ich würde halt, wenn ich in diese Sonderfälle reingerate, erstmal anfangen zu

01:02:03.980 --> 01:02:07.700
sagen, das ist ein Ad-Hoc-Problem, das kommt bestimmt nur einmal vor und dann

01:02:07.700 --> 01:02:09.708
male ich da ein fucking Style-Attribut rein.

01:02:10.360 --> 01:02:12.982
Und dann wiederhole ich das, wie Vanessa schon gesagt hat, einfach,

01:02:13.517 --> 01:02:15.450
dann machen wir das hier auch noch und hier auch noch und hier auch noch,

01:02:15.810 --> 01:02:19.280
so lange, bis es irgendwen stört und dann entwickeln wir eine Lösung auf der

01:02:19.280 --> 01:02:23.600
Basis von dem Ganzen und bis dahin nutzen wir halt die Werkzeuge,

01:02:23.600 --> 01:02:24.412
die halt schon rumliegen.

01:02:25.510 --> 01:02:28.410
Da muss man nicht direkt anfangen, nur weil man irgendwie einen Edge Case hat,

01:02:28.410 --> 01:02:31.548
dann da Klassen und BEM irgendwie länger zu machen und so.

01:02:31.745 --> 01:02:36.400
Nee, Ausnahmefällen benötigen halt eben auch Ausnahmelösungen und da macht man

01:02:36.400 --> 01:02:40.295
das so lange, bis es knirscht und dann baut man auf der Basis dessen weiter.

01:02:40.556 --> 01:02:42.995
Alles andere ist doch hier so Klassiges, you ain't gonna need it.

01:02:44.097 --> 01:02:47.220
Ja, aber es geht nicht, weil wir ja alle Content Security Policies nutzen,

01:02:47.220 --> 01:02:52.113
wo wir keine Inline-Styles nutzen können und darum bricht dein Kartenhaus gerade zusammen, Peter.

01:02:58.736 --> 01:03:03.800
Ja, wer kennt sie nicht, die CSP-Regeln? Ich wollte aber vorhin zu Peters Punkt

01:03:03.800 --> 01:03:07.590
noch sagen, den habe ich dann bei der letzten, bei der zweiten Juni-Episode

01:03:07.590 --> 01:03:10.532
auch gar nicht so wahrgenommen. Die würde ich jetzt aber auch unterstützen.

01:03:11.670 --> 01:03:14.235
Ich finde es bei Code Reviews,

01:03:15.755 --> 01:03:21.781
schwieriger und das ist aktuell auch durch AI nochmal größer geworden,

01:03:21.781 --> 01:03:29.165
weil es auch mehr zu Reviewen gibt, mich wirklich zu fokussieren auf die einzelnen Bestandteile.

01:03:29.520 --> 01:03:34.141
Ich muss mir wirklich merken, du überprüfst jetzt das HTML, du überprüfst jetzt

01:03:34.141 --> 01:03:37.530
das JavaScript, du überprüfst auch jetzt wirklich das CSS.

01:03:37.861 --> 01:03:42.671
Ich finde es schon irgendwie einfacher, über Tailwind-Klassen so ein bisschen

01:03:42.671 --> 01:03:45.146
hinwegzulesen und so, das wird schon passen.

01:03:45.866 --> 01:03:49.273
Versus, da ist jetzt ein Blog an CSS.

01:03:50.346 --> 01:03:54.641
Das ist jetzt, dafür kann jetzt Taylorin CSS auch so wenig. Das ist schon auch

01:03:54.641 --> 01:03:55.890
so eine mentale Einstellung.

01:03:56.145 --> 01:03:58.851
Und deswegen sage ich ja, ich denke jetzt nochmal spezifisch dran,

01:03:58.851 --> 01:04:01.735
okay, jetzt schau dir nochmal wirklich das CSS im Detail an.

01:04:02.120 --> 01:04:05.141
Denn was wirklich bei komponentenbasierten Sachen passieren kann,

01:04:05.141 --> 01:04:08.501
ist, dass du es halt copy-pasted hast und dann Frage nach, was macht denn die

01:04:08.501 --> 01:04:10.315
Klasse hier eigentlich? Ja, ach so, hups.

01:04:11.048 --> 01:04:13.971
Das kann jetzt bei klassischen CSS natürlich ganz genauso passieren.

01:04:13.971 --> 01:04:17.381
Wenn du sagst, okay, du hast eine BEM-Klasse, oder wenn man das so nennt,

01:04:17.381 --> 01:04:20.921
Entschuldigung, und die hast du halt auch copy-pasted und da war da halt auch

01:04:20.921 --> 01:04:24.641
nochmal so ein Position Relative drin, das macht ja jetzt erstmal nichts Schlechtes,

01:04:24.641 --> 01:04:26.761
aber hat vielleicht auch keinen Sinister drin gehabt.

01:04:28.230 --> 01:04:31.156
Und, ähm, dieses,

01:04:31.934 --> 01:04:36.859
was ich als Problem bei sowas wie BEM sehe, diese ganzen Entscheidungen zu treffen

01:04:36.859 --> 01:04:41.704
und wie nenne ich jetzt das Ding genau und für was ist das alles verwendbar, wenn es global ist,

01:04:42.319 --> 01:04:46.809
ähm, das kann natürlich auch bei einem Tailwind zu einem Problem werden,

01:04:46.809 --> 01:04:49.729
wenn mir diese Entscheidung abgenommen wird und es ist einfach die Single Source

01:04:49.729 --> 01:04:51.559
of Truth von so manchen Styles.

01:04:51.559 --> 01:04:56.499
Als man sollte seine Base-UI-Components haben. Man sollte sie verwenden.

01:04:58.160 --> 01:05:02.959
Aber ja, dazu können auch wieder unrhythmische Webseiten entstehen,

01:05:02.959 --> 01:05:07.210
weil hier mache ich mal einen Margin von vier ran, hier mache ich mal einen Margin von sechs ran.

01:05:07.477 --> 01:05:12.149
Und es ist eine sehr günstige Möglichkeit, das zu tun, weil ich mich eben nicht

01:05:12.149 --> 01:05:18.558
entscheiden muss, ist das jetzt meine BEM-Klasse XY oder die XYZ-Klasse.

01:05:18.959 --> 01:05:21.499
Sowas wie Inline-Style, das geht ja gar nicht. Das wurde ja schon wahrscheinlich

01:05:21.499 --> 01:05:23.075
durch Linter verboten oder sowas.

01:05:25.767 --> 01:05:30.522
Naja, aber so dieses Problem, dass man vielleicht, also ich meine,

01:05:30.522 --> 01:05:33.082
so Sachen wie Buttons oder sonst sind ja dann auch Komponenten,

01:05:33.082 --> 01:05:36.602
die man einmal stylt und dann eben Varianten davon hat.

01:05:36.602 --> 01:05:41.792
Und ich glaube, dann hat man Konsistenz. Und das würde ja genauso in einem BAM-Umfeld

01:05:41.792 --> 01:05:46.262
wie in einem Tailwind-Umfeld würde man das, würde ich jetzt hoffen,

01:05:46.262 --> 01:05:51.029
machen, dass man eben solche Primitiven, die immer mal wieder benutzt werden, irgendwo,

01:05:53.224 --> 01:05:56.462
in Form von Komponenten. Diese ganz primitiven Fassungen, da habe ich glaube

01:05:56.462 --> 01:05:59.332
ich bei beiden Frameworks nie so wirkliche Probleme gesehen.

01:05:59.992 --> 01:06:02.632
Bei mir sind es wirklich immer wieder diese Karten, diese Listen,

01:06:02.972 --> 01:06:06.076
die irgendwie aber immer so ein bisschen besonders sein müssen.

01:06:07.312 --> 01:06:11.622
Und alles, was ein Container ist. Es gibt so viele Container und die haben so

01:06:11.622 --> 01:06:14.332
viele Borders und das hat den Background und das hat keinen Background und das

01:06:14.332 --> 01:06:16.026
hat den Border und das ist ein Border and Hover.

01:06:16.757 --> 01:06:20.952
Ja, das sind halt so Sachen, so Sachen wie Container oder Cards sind halt einfach

01:06:20.952 --> 01:06:21.982
auch zu unterspezifiziert.

01:06:22.823 --> 01:06:26.452
Das kannst du nicht richtig machen, weil die Dinger einfach einen Job haben,

01:06:26.452 --> 01:06:31.409
der so offen ist, dass du da nicht irgendwie eine Lösung haben kannst. Geht halt nicht.

01:06:33.789 --> 01:06:36.932
Und generell so die Sache von wegen, nehme ich da jetzt Komponente X oder mache

01:06:36.932 --> 01:06:38.560
ich eine Variante von X und sowas allem,

01:06:40.632 --> 01:06:44.308
Tailwind vs. Spam wisst ihr, in welchem Bereich keiner damit ein Problem zu haben scheint,

01:06:46.132 --> 01:06:49.952
in allem anderen, also irgendwie JavaScript oder so, schreibe ich jetzt eine

01:06:49.952 --> 01:06:52.798
neue Klasse oder mache ich irgendwie eine Subklasse von meiner bestehenden,

01:06:53.036 --> 01:06:55.892
schreibe ich eine neue Funktion die die andere aufruft oder,

01:06:56.815 --> 01:06:59.292
wird die komplett from scratch geschrieben und ist der anderen halt ein bisschen

01:06:59.292 --> 01:07:02.232
ähnlich Irgendwie kriegen die das alle irgendwie super hin, egal ob sie PHP,

01:07:02.232 --> 01:07:03.967
JavaScript, Ruby oder sonst was schreiben,

01:07:05.052 --> 01:07:07.241
ohne eine neue Syntax zu erfinden. Wie machen die das?

01:07:08.322 --> 01:07:12.336
Ich finde es auch bei offensichtlicher im JavaScript oder im Vue.js-Komponentenbereich.

01:07:12.336 --> 01:07:16.496
Ich finde es da einfacher eben zu sagen, hier mache ich eine klare Trennung,

01:07:16.496 --> 01:07:19.236
weil ich gelernt habe, das Versuchen zu generisch zu machen,

01:07:19.236 --> 01:07:20.586
ist einfach zu schmerzhaft.

01:07:21.156 --> 01:07:24.646
Und irgendwie habe ich halt in meiner persönlichen Bubble das Gefühl,

01:07:24.646 --> 01:07:28.690
bei CSS hat man noch mehr versucht, es generischer zu machen,

01:07:29.826 --> 01:07:34.726
während man JavaScript-Komponenten irgendwie als günstiger und kann nicht mehr

01:07:34.726 --> 01:07:35.791
duplizieren angesehen hat.

01:07:36.533 --> 01:07:40.306
Das ist jetzt eine sehr, sehr spezifische, meine persönliche Erfahrung.

01:07:40.306 --> 01:07:44.726
Und wahrscheinlich hat hier jeder andere irgendwie andere Erfahrungen damit gemacht.

01:07:46.266 --> 01:07:50.946
Aber das ist genau das, was ich meinte in der Folge, die du da ansprachst,

01:07:50.946 --> 01:07:52.722
wo ich da mit Shep so drüber gerantet habe.

01:07:53.105 --> 01:07:57.326
Wo ich halt gesagt habe, wenn die ganzen Programmiererinnen und Programmierer einfach nur,

01:07:58.283 --> 01:08:03.432
die gleiche Logik, die sie halt eben auf ihr JavaScript oder PHP anwenden, auf ihr CSS anwenden,

01:08:03.896 --> 01:08:07.327
ergibt sich automatisch sowas wie ein BAM weil man denkt sich dann halt eben,

01:08:07.768 --> 01:08:10.398
man denkt halt drüber nach, was für eine Klasse gebe ich dem Teil,

01:08:10.659 --> 01:08:13.966
statt einfach irgendwie zu sagen, okay, ich gehe jetzt nach so irgendwie offensichtlichen

01:08:13.966 --> 01:08:18.368
Kategorien wie halt Container, Card und dem, was man halt eben als so,

01:08:18.862 --> 01:08:22.896
offensichtliche erste Wahlen annimmt, was halt immer diese unterdefinierten,

01:08:23.668 --> 01:08:27.134
Dinger sind, die halt einfach nicht hilfreiche Kategorien darstellen.

01:08:27.447 --> 01:08:30.686
Das ist halt in der Programmierung ist das dann so der Abstract Service Provider.

01:08:30.686 --> 01:08:34.314
Aber das klingt erstmal gut und das kann auch alles irgendwie lösen,

01:08:34.657 --> 01:08:37.506
aber ist halt so unspezifiziert, dass es halt einfach so einen Rattenschwanz

01:08:37.506 --> 01:08:40.294
an Problemen nach sich zieht, dass man einfach durch Schmerzen gelernt hat.

01:08:40.420 --> 01:08:44.756
Okay, das muss halt irgendwie alles getrennt, gekapselt, gesondert gebaut werden,

01:08:45.035 --> 01:08:48.056
auch wenn es der reinen Theorie nicht entspricht, weil man halt eben da ein

01:08:48.056 --> 01:08:50.712
paar implizite Verbindungen hat, ein bisschen Wiederholung drin hat.

01:08:51.258 --> 01:08:54.352
Und wenn man das gleiche einfach auf CSS anwendet, dann läuft das viel besser.

01:08:55.432 --> 01:09:02.125
Aber was ich auch noch so glaube, es war vielleicht für mich so ein Unterschied

01:09:02.125 --> 01:09:07.187
zwischen, ich nenne es jetzt mal semantischen Klassennamen und Presentational-Klassennamen,

01:09:08.087 --> 01:09:09.811
also zwischen BAM, Tailwind.

01:09:10.954 --> 01:09:15.265
Ist halt, also die HTML und CSS haben ja quasi immer.

01:09:18.118 --> 01:09:21.065
Eine Kupplung oder eine Verbindung zueinander. da. Und wenn ich jetzt sage,

01:09:21.065 --> 01:09:24.615
ich habe eben so manche Klassnamen, BEM zum Beispiel, dann sage ich,

01:09:24.615 --> 01:09:31.086
ja, das HTML kann man restylen, wie man will, das ist unabhängig vom CSS und,

01:09:33.275 --> 01:09:42.365
Das CSS ist quasi dann gebunden ans HTML und ist nicht neu verwendbar quasi.

01:09:43.445 --> 01:09:48.391
Und bei Tailwind oder bei Crosstational Class Namen ist es halt genau umgedreht.

01:09:48.391 --> 01:09:57.911
Da sage ich ja, das HTML ist verbunden zum CSS und kann nicht einfach so umgestylt werden.

01:09:57.911 --> 01:10:03.025
Das heißt, dort ist es nicht entbunden, aber das CSS kann man verwenden oder

01:10:03.152 --> 01:10:04.511
wiederverwenden, wie man will.

01:10:04.511 --> 01:10:13.191
Also eigentlich ist es ja nur eine andere Dependency, wo die zwei Paradigmen quasi haben.

01:10:13.191 --> 01:10:19.761
Einmal ist das HTML decoupled und das CSS ist gebunden ans HTML und einmal umgedreht.

01:10:20.260 --> 01:10:25.211
Und das ist für mich eigentlich der Hauptunterschied zwischen eben BAM und Tailwind

01:10:25.211 --> 01:10:29.351
und ich für mich, wo ich jetzt schon sehr viel TSS schreibe,

01:10:29.351 --> 01:10:31.231
täglich, mein täglich Brot ist quasi.

01:10:33.251 --> 01:10:36.310
Fun für mich so herausgefunden, ja.

01:10:37.144 --> 01:10:41.991
Tailwind hilft mir da schon sehr, quasi diese Qualität hochzuhalten und klar,

01:10:41.991 --> 01:10:47.854
ich könnte es auch mit BEM, aber es würde mich halt sehr viel mehr Rechenpower im Hirn kosten.

01:10:49.347 --> 01:10:53.549
Und da ja der Mensch immer geneigt ist, die möglichst faule Lösung herzubauen,

01:10:53.979 --> 01:10:56.649
wo für ihn am besten passt, das kann für jemand anderes eben BAM sein,

01:10:57.120 --> 01:11:01.973
habe ich es für mich gemerkt, hey, Tailwind ist da schon eine Riesenhilfe gewesen, quasi,

01:11:03.127 --> 01:11:04.747
diesen Ansatz quasi umzudenken.

01:11:05.037 --> 01:11:09.671
Klar, wenn ich jetzt, wo du vor allem die Grids erwähnt hast von Tailwind,

01:11:09.671 --> 01:11:14.616
die verwende ich jetzt auch nicht so gerne für komplexe Grids-Geschichten,

01:11:15.480 --> 01:11:19.661
da nehme ich dann lieber eben mein, da nehme ich Custom CSS,

01:11:19.857 --> 01:11:23.451
weil ich da mit Grid-Templates schöne Sachen bauen kann, wo dann auch schön

01:11:23.451 --> 01:11:27.521
dynamisch sind, wo dann auch gut funktionieren und das ist, finde ich,

01:11:27.521 --> 01:11:28.756
auch völlig in Ordnung, also ich.

01:11:30.945 --> 01:11:34.590
Ich warne davor, quasi Tailwind zu sagen, ja nur noch Tailwind und du darfst

01:11:34.910 --> 01:11:37.631
keine einzige Klasse mehr schreiben, weil das ist dann böse.

01:11:38.316 --> 01:11:42.229
Ja nicht. Ich glaube, das ist so ein bisschen manchmal, wo es dann auch wieder

01:11:42.670 --> 01:11:45.520
ausschlägt von gewissen Tailwind-Jüngern, wo du sagst, ja nein,

01:11:45.520 --> 01:11:47.488
das darfst man gar nicht mehr verwenden.

01:11:47.964 --> 01:11:51.020
Und ich glaube, da muss man einfach einen sehr guten Mittelweg finden.

01:11:51.020 --> 01:11:53.811
Aber für mich jetzt persönlich,

01:11:54.990 --> 01:11:57.560
fand ich es viel einfacher, diesen Mittelweg zu gehen, wenn ich sage,

01:11:57.560 --> 01:12:01.230
ja gut, ich habe hier zwei, drei Komponenten oder lass es zehn sein bei einem

01:12:01.230 --> 01:12:06.700
größeren Projekt, wo jetzt Customs sind und der Rest sind quasi Tailwind-Klassen,

01:12:06.700 --> 01:12:09.408
also so BAM an gewissen Orten.

01:12:09.640 --> 01:12:16.470
Aber das Große dann Tailwind hat für mich schon sehr die Wartbarkeit erhöht

01:12:16.470 --> 01:12:18.196
von Code und ohne, dass ich halt.

01:12:19.970 --> 01:12:23.770
So andauernd überlegen muss, oh, mache ich jetzt da woanders kaputt oder habe

01:12:23.770 --> 01:12:27.740
ich jetzt dieses schon so verwendet, weil wenn ich nur 10 BAM Komponenten habe,

01:12:27.740 --> 01:12:31.890
die kann ich quasi im Arbeitsspeicher halten, wenn ich 100 BAM Komponenten habe,

01:12:31.890 --> 01:12:34.176
kann ich mir das Naming nicht im Arbeitsspeicher halten,

01:12:34.791 --> 01:12:37.508
macht es für mich dann schon schwieriger, muss ich jedes Mal schauen und oh,

01:12:37.978 --> 01:12:45.386
ja, wie nenne ich das jetzt, Naming is hard und das war für mich so von meiner Seite her,

01:12:46.129 --> 01:12:51.310
Developer Experience schon sehr viel angenehmer und muss auch sagen,

01:12:51.310 --> 01:12:54.064
hat mich auch massiv produktiver gemacht,

01:12:54.685 --> 01:12:59.590
weil ich dann bei BEM manchmal so den Anspruch hatte, es perfekt zu machen und

01:12:59.590 --> 01:13:02.417
BEM und perfekt machen ist dann halt auch schwierig manchmal,

01:13:03.497 --> 01:13:07.874
weil du sagst, ja eben, ich will jetzt nicht Inline-Styles verwenden oder ich will das nicht,

01:13:09.592 --> 01:13:10.806
war da manchmal schon tricky.

01:13:12.906 --> 01:13:18.029
Und da war für mich das Tailwind, hat es ein bisschen vereinfacht.

01:13:18.029 --> 01:13:23.349
Klar, es gibt dann auch hässliche Geschichten, wenn du dann irgendwelche CSS-Klassen-Maps

01:13:23.349 --> 01:13:28.169
schreiben musst, weil ein Property sie ändert und du musst zehn Klassen ändern

01:13:28.169 --> 01:13:30.199
und nicht nur eine Variante.

01:13:30.356 --> 01:13:32.810
Klar, das ist auch nicht immer geil.

01:13:34.139 --> 01:13:37.553
Das ist dann halt so quasi die Kehrseite der Medaille. Aber so im,

01:13:38.342 --> 01:13:42.389
Großen und Ganzen fand ich das eigentlich schon, diese Auflösung oder diese

01:13:42.389 --> 01:13:49.199
Abhängigkeit vom HTML zu CSS oder CSS zu HTML fand ich beim oder finde ich beim

01:13:49.199 --> 01:13:52.390
Tailwind einfach angenehmer zum Arbeiten, weil mir halt,

01:13:53.395 --> 01:13:56.622
weniger um die es fliegt mir schon ein bisschen weniger um die Ohren,

01:13:57.748 --> 01:13:59.949
als wenn ich es klassischerweise mache.

01:13:59.949 --> 01:14:04.599
Ich muss bei einem Projekt, wo ich die Übersicht habe, muss ich weniger testen,

01:14:04.599 --> 01:14:07.639
weil ich weiß ja, es ist ja eh nur dieses Property, ich kann diese Komponente

01:14:07.639 --> 01:14:11.320
isoliert betrachten und ich weiß, Also ich haue da nichts irgendwo anders was um.

01:14:11.611 --> 01:14:17.271
So dieser klassische CSS-Witz, wo man ja kennt mit den drei Bären, dieses Meme.

01:14:20.591 --> 01:14:24.309
Klar, wir können das auch wieder diskutieren, das haben wir gar nicht noch nicht

01:14:24.309 --> 01:14:28.950
angesprochen, mit diesem Scoping von CSS, was auch wieder sehr hilft,

01:14:29.757 --> 01:14:30.939
was da möglich sein wird.

01:14:30.939 --> 01:14:34.349
Und deswegen sage ich auch immer, auch wenn man Tailwind verwendet,

01:14:34.729 --> 01:14:37.674
Augen und Ohren offen halten, auch mal das andere ausprobieren,

01:14:38.074 --> 01:14:39.869
vielleicht löst das ein Problem, wo ich mit,

01:14:40.549 --> 01:14:43.179
Tailwind mit 100.000 Klassen anschlage

01:14:43.179 --> 01:14:46.352
und ich könnte einfach eine kleine Komponente bauen, wo gescoped ist.

01:14:46.822 --> 01:14:50.349
Ein extrem gutes Thema. Weil ich wollte gerade nämlich sagen...

01:14:50.449 --> 01:14:51.118
Finde ich auch spannend.

01:14:52.009 --> 01:14:56.069
Ich wollte nämlich sagen, wir haben ja, glaube ich, mittlerweile aus dem Metatext

01:14:56.069 --> 01:14:59.629
rausführen können, in meinem Alltag, okay, in meinen Alltag,

01:14:59.629 --> 01:15:03.227
in meinen Projekten, wo man mich machen lässt, da verwende ich ja kein Tailwind.

01:15:03.338 --> 01:15:06.414
Ich glaube, das ist klar geworden. Weißt du, was ich auch nicht verwende? Ja.

01:15:10.999 --> 01:15:16.200
Weißt du, warum nicht? Weil tatsächlich die richtige Lösung für der Code ist

01:15:16.200 --> 01:15:19.011
zu lang und ich blicke nicht mehr durch, welche Namen miteinander kollidieren,

01:15:19.771 --> 01:15:22.471
ist die älteste Programmiertechnik der Welt.

01:15:22.651 --> 01:15:26.220
Und ich würde sagen, die Kollegen Julius Cäsar und Konsorten haben das auch

01:15:26.220 --> 01:15:29.545
schon vor dem Programmieren erfolgreich eingesetzt, Teile und Herrsche.

01:15:31.165 --> 01:15:34.885
In meinen meisten Komponenten sieht das halt so aus, dass ich da ein Scoping-Mechanismus

01:15:34.885 --> 01:15:38.155
auf die eine oder andere Weise am Start habe, dass ich halt einfach einen feuchten

01:15:38.155 --> 01:15:42.868
Kehrig darauf gebe, wie die Klassennamen heißen und darüber exakte 0,5 Sekunden nachdenke.

01:15:43.239 --> 01:15:47.165
Weil in dem Fall, wenn das Universum so klein ist, dass es halt wirklich irgendwie

01:15:47.165 --> 01:15:50.515
ein so ein Widget in der Seitenspalte ist, dann ist eine Card tatsächlich eine

01:15:50.515 --> 01:15:52.771
Card. Dann ist eine Liste tatsächlich eine Liste.

01:15:52.980 --> 01:15:56.305
Dann gehen 90 Prozent von diesen ganzen bescheuerten Problemen hin und ich führe

01:15:56.305 --> 01:15:58.808
mich einfach auf, wie die letzte CSS-Drecksau.

01:15:59.011 --> 01:16:01.798
Lauter Regeln schreibe ich, die sich gegenseitig widersprechen und überschreiben,

01:16:02.070 --> 01:16:05.145
aber weil das Gesamtprojekt, der Scope, der Arbeitsspeicher,

01:16:05.145 --> 01:16:08.351
den du angesprochen hast, 50 Zeilen lang ist, ist mir das völlig egal.

01:16:09.618 --> 01:16:12.365
Ich brauche das auch nicht perfekt zu machen. Diese Computer sind meine Sklaven,

01:16:12.365 --> 01:16:14.121
die haben für mich zu arbeiten und ich nicht für die.

01:16:14.319 --> 01:16:17.265
Die sollen gefälligst spuren und sich damit abfinden, dass sich da jetzt nach

01:16:17.265 --> 01:16:20.344
Position absolut direkt zwei Zeilen später Relative zu stehen haben.

01:16:20.449 --> 01:16:22.336
Ich habe das so geschrieben, deal with it.

01:16:23.671 --> 01:16:27.825
Du hast ja vorhin gemeint, du hast ja gar nicht mehr so ganz lange globale CSS-Dateien

01:16:27.825 --> 01:16:31.115
in deinem Ökosystem. Da habe ich mich dann auch gefragt, ja, aber wozu dann?

01:16:32.835 --> 01:16:36.685
Ich wäre jetzt auch vollkommen fein damit zu sagen, die Vorteile,

01:16:36.685 --> 01:16:40.945
die da mit Tablen kommen, hast du genauso gut, wenn du nur deinen Scoped CSS,

01:16:41.520 --> 01:16:44.602
in deiner React-Komponente, der Vue.js-Komponente schreibst.

01:16:45.072 --> 01:16:48.325
Ich finde es immer noch ein bisschen angenehmer, wenn es so direkt im HTML steht

01:16:48.325 --> 01:16:50.500
und nicht da unten und ich muss nicht scrollen und so weiter.

01:16:50.848 --> 01:16:54.785
Aber da habe ich zumindest schon mal nicht mal diese ganzen Überlegungen eben

01:16:54.785 --> 01:16:57.663
auch, soll ich es jetzt hier irgendwie wiederverwenden oder,

01:16:58.348 --> 01:17:02.725
folge ich noch diesem Ansatz von wegen CSS und HTML sind so getrennt,

01:17:02.725 --> 01:17:05.415
dass ich immer das komplette CSS irgendwie austauschen könnte oder das ganze

01:17:05.415 --> 01:17:07.898
HTML austauschen könnte und das CSS wird immer noch funktionieren,

01:17:08.875 --> 01:17:10.823
und erledige mir dieses Problem halt weg.

01:17:11.535 --> 01:17:14.063
Ich kann dir sagen, wo Web herkommt tatsächlich in unserer Diskussion.

01:17:15.154 --> 01:17:18.695
Das kommt halt daher, dass wenn du Entscheidungen darüber gestalten möchtest,

01:17:19.255 --> 01:17:21.875
wie baust du dein CSS auf, hast du eigentlich nur einen Hebel,

01:17:21.875 --> 01:17:25.428
an dem du wirklich ziehen kannst und das ist, was mache ich mit dem Selektor.

01:17:27.298 --> 01:17:29.585
Das ist ja das Einzige, wo du wirklich eine Gestaltungsfreiheit hast.

01:17:29.858 --> 01:17:31.994
Okay, du kannst dich entscheiden, mache ich es mit Grid oder mache ich es mit

01:17:31.994 --> 01:17:34.764
irgendwie Flex, aber das ändert ja operativ nicht wirklich viel.

01:17:34.764 --> 01:17:38.031
Das große wirklich Organisationsprinzip ist einzig und allein,

01:17:38.252 --> 01:17:41.084
wie genau sieht am Ende des Tages dieser Klassenname aus, wie kommt der zustande,

01:17:41.084 --> 01:17:41.979
wie wird der eingesetzt.

01:17:42.824 --> 01:17:47.764
Und deswegen ist dann halt dieses Konzept extrem überladen und so Dinge wie

01:17:47.764 --> 01:17:51.964
halt zum Beispiel die Syntax von Tailwind oder die Syntax von BEM sind inhärent

01:17:51.964 --> 01:17:53.716
Dinge, die mehrere Sachen auf einmal lösen.

01:17:54.349 --> 01:17:57.444
Und speziell in der Diskussion, die Shep und ich in der vergangenen Folge hatten,

01:17:57.444 --> 01:17:58.912
war das halt eben mein Beispiel für,

01:17:59.764 --> 01:18:02.614
dass das so ein Erweckungserlebnis sein kann für Menschen, die halt CSS immer

01:18:02.614 --> 01:18:03.846
nur als Zumutung betrachtet haben,

01:18:04.519 --> 01:18:06.714
weil man denen nämlich sagen kann, hey, guck mal, das Ding ist einfach eine

01:18:06.714 --> 01:18:10.342
Benamung und wenn du anfängst, dieses simpel erscheinende Konzept,

01:18:10.882 --> 01:18:14.354
so zu begreifen, dass da all diese ganzen konzeptionellen Ebenen drin sind,

01:18:14.354 --> 01:18:17.364
diese ganze Lasagne an Möglichkeiten, an diesem einen einzigen Hebel,

01:18:17.364 --> 01:18:20.564
an dem du ziehen kannst und nimm das ernst und behandle es wie das,

01:18:20.564 --> 01:18:24.894
was es ist, dass dann da sehr viel Verständnis rausfällt für, ah, okay,

01:18:25.573 --> 01:18:28.124
das ist also dieser eine Hebel, den ich habe und mit dem kann ich diesen ganzen

01:18:28.124 --> 01:18:30.089
Zug steuern und einigermaßen gut fahren.

01:18:30.646 --> 01:18:33.584
Das ist so das Problem da drin und das ist, warum wir auch immer wieder zu BAM

01:18:33.584 --> 01:18:36.266
zurückkommen, weil wir da halt ursprünglich drüber geredet haben,

01:18:36.463 --> 01:18:39.203
aber weil das halt eben auch so ein wunderbar simples Konzept ist,

01:18:39.447 --> 01:18:42.274
drei Regeln, in denen so viel am Ende drinnen landet.

01:18:43.620 --> 01:18:47.574
Wie immer ist die beste Lösung, Probleme nicht zu lösen, sondern gar nicht erst zu haben.

01:18:48.572 --> 01:18:52.564
Wenn du auf deinem Betriebsgelände ein Bottich mit kochender Säure stehen hast,

01:18:52.564 --> 01:18:55.149
ist die beste Lösung nicht, da einen Zaun drum herum zu bauen,

01:18:55.347 --> 01:18:58.359
sondern eine Möglichkeit zu finden, dieses Ding nicht auf deinem Gelände stehen zu haben.

01:19:02.891 --> 01:19:06.739
Und deswegen sage ich, hey, mach einfach dein Designsystem, das du hast,

01:19:06.739 --> 01:19:10.536
ob du willst oder nicht. Mach es explizit. Das löst viele Probleme.

01:19:11.083 --> 01:19:14.599
Wenn du etwas hast, was zu groß ist, um das zu klarkommst, dann hack es halt

01:19:14.599 --> 01:19:17.429
in kleine Stücke. Hast du das Problem nicht mehr, dass da ein so ein großer

01:19:17.429 --> 01:19:18.670
Monolith irgendwie rumschwirrt.

01:19:19.865 --> 01:19:22.836
Und dann kann man natürlich da, wo das nicht geht, über Lösungen nachdenken.

01:19:23.207 --> 01:19:27.561
Aber Probleme lösen ist halt der zweite Schritt. Das ist die Implementierung.

01:19:27.759 --> 01:19:32.119
Der erste Schritt, das Design eines Systems, sollte Probleme erstmal aus dem

01:19:32.119 --> 01:19:34.086
Weg schaffen, vermeiden, unmöglich machen.

01:19:36.060 --> 01:19:38.451
Und das sind die Werkzeuge, die ich ganz gerne hätte. Weißt du?

01:19:38.776 --> 01:19:40.825
Da musst du über nichts nachdenken, weil du nimmst das, was schon da ist.

01:19:41.063 --> 01:19:43.509
Du brauchst das Problem nicht zu lösen, dass das Ding viel zu groß ist,

01:19:43.509 --> 01:19:44.639
weil es halt nicht zu groß ist.

01:19:45.017 --> 01:19:49.010
Inherent. Du machst dein Designsystem explizit im Rahmen deiner Möglichkeiten

01:19:49.376 --> 01:19:52.888
und dann ist das Problem zu einem gewissen Grad gelöst und über den Rest,

01:19:53.260 --> 01:19:54.577
da baut man dann Lösungen dran.

01:19:54.891 --> 01:19:58.316
Aber eine große Lösung für ein großes Problem ist immer falsch.

01:19:59.280 --> 01:20:03.529
Du brauchst immer für ein großes Problem einen Designansatz und nicht eine technische

01:20:03.529 --> 01:20:05.010
Lösung, eine Implementierung.

01:20:05.485 --> 01:20:08.109
Edge Cases wie Raumfahrt ausgenommen. Ihr wisst, was ich meine.

01:20:12.011 --> 01:20:18.578
Zu der Geschichte mit der, man hat ja keine große Datei und deswegen braucht

01:20:18.578 --> 01:20:19.498
man ja vielleicht keinen BAM.

01:20:19.978 --> 01:20:25.998
Ich glaube, das ist eher so zu verstehen, dass Leute, die das CSS eben nicht

01:20:25.998 --> 01:20:31.682
mehr in Form, also so wie das halt vor 15, 20 Jahren war, in Form einer langen CSS-Datei,

01:20:32.461 --> 01:20:36.648
zusammenschreiben, sondern dass tatsächlich eben die CSS-Teile,

01:20:36.648 --> 01:20:39.920
die zu einer Komponente gehören, mit in dem Ordner oder in der,

01:20:40.898 --> 01:20:46.118
Datei, in der eben auch der Rest definiert wird, dieser Komponente mit geparkt

01:20:46.118 --> 01:20:51.398
ist, aber am Ende natürlich ein Bundler trotzdem hingeht und in der Regel, also außer,

01:20:52.618 --> 01:20:54.995
bei SPAs, die sozusagen,

01:20:56.378 --> 01:20:58.158
route-abhängig gebundelt werden,

01:20:59.298 --> 01:21:02.438
die dann in dieser einen großen Datei zusammengemanscht werden.

01:21:02.438 --> 01:21:08.027
Und dann brauchst du natürlich immer noch BAM oder eben AdScope.

01:21:10.378 --> 01:21:14.618
Um eben kein Style-Leaking zu haben. Aber du weißt halt eben auch,

01:21:14.958 --> 01:21:18.108
wenn du diese Datei löscht oder wenn du diesen Ordner löscht,

01:21:18.108 --> 01:21:20.971
in dem eben die anderen Teile der Komponente definiert sind,

01:21:21.534 --> 01:21:26.398
dann löscht du auch das CSS mit und dann hast du es später auch nicht mehr als

01:21:26.398 --> 01:21:30.538
gleiche in deinem ausgelieferten CSS mit drin.

01:21:31.878 --> 01:21:35.228
Und vor allem, man kann ja davon ausgehen, dass die Style States in diesen Ordner

01:21:35.228 --> 01:21:39.058
sind, nicht plötzlich in dem Überordner XY auch noch verwendet wird.

01:21:39.058 --> 01:21:42.118
Und dass ich jetzt auch was kaputt mache, wenn ich da was ändere.

01:21:42.978 --> 01:21:46.558
Und wenn doch, hast du ein Designproblem, für das du eine technische Lösung entwickeln kannst?

01:21:47.038 --> 01:21:51.162
Ja klar, aber das ist genau das, wo ich halt schon in Teams erlebt habe, dass dann.

01:21:54.227 --> 01:21:57.856
Eine Komponente quasi an Orten verwendet wurde, wo es jetzt nicht gedacht war.

01:22:00.370 --> 01:22:04.881
Passiert halt. Und das ist ja, also wir haben bei uns eine Community,

01:22:05.554 --> 01:22:12.437
bei uns so ein Credo, wo wir sagen, wenn wir was entdecken, wo halt wirklich

01:22:12.437 --> 01:22:14.691
irgendwie, wo man sagt, wie kann man sowas machen?

01:22:16.135 --> 01:22:19.347
Dass wir sagen, hey, zu diesem Zeitpunkt, wo die Person das geschrieben hat,

01:22:19.347 --> 01:22:22.517
hat dieses ja am besten Wissen und Gewissen gemacht. Also es ist ja nicht so,

01:22:22.517 --> 01:22:25.837
dass es niemandem unterstellen, dass das böswillig passiert ist,

01:22:25.837 --> 01:22:28.871
sondern einfach aus dem Mangel von Witzen.

01:22:29.481 --> 01:22:31.826
Und da passieren dann halt genau solche Geschichten.

01:22:32.987 --> 01:22:38.947
Und das ist für mich der riesen Vorteil von Tailwind, dass dieses Problem halt

01:22:38.947 --> 01:22:44.627
schon vielleicht nicht komplett dezimiert wird, aber es wird schon sehr stark reduziert.

01:22:44.627 --> 01:22:48.039
Dieses Problem, dass halt irgendjemand dir was abschießt,

01:22:48.962 --> 01:22:52.657
und du entfernst jetzt eine Komponente und die zu ihrer EGC-Datei und der hat

01:22:52.657 --> 01:22:57.227
halt irgendwie noch die Klasse verwendet und, aber nicht die Komponente dazu,

01:22:57.227 --> 01:23:00.102
das heisst, du würdest das gar nicht finden per Suchen.

01:23:01.008 --> 01:23:06.006
Gut, wenn du jetzt den Code durchsuchst nach der Klasse und so, dann vielleicht schon.

01:23:07.573 --> 01:23:11.706
Aber ja, das passiert halt dann trotzdem.

01:23:13.395 --> 01:23:18.908
Und das dann schon erlebt halt in größeren Projekten, dass das halt weniger Probleme gemacht hat.

01:23:19.460 --> 01:23:21.986
Gebe ich auch an Peter vollkommen recht. Das würde nicht passieren,

01:23:21.986 --> 01:23:26.356
wenn man es anständig und gescheit machen würde von Anfang an.

01:23:27.238 --> 01:23:32.776
Aber eben dieses Level von Knowledge hat halt nicht jeder oder will nicht jeder.

01:23:33.537 --> 01:23:39.794
Die AI hat es ja sowieso schon mal nicht, weil er schon der nächste Angestellte ist, wenn man so will.

01:23:40.688 --> 01:23:42.816
Hat sie das nicht? Ich bin nämlich absolut nicht informiert.

01:23:42.816 --> 01:23:50.133
Ich habe keinen Cloud jemals auf irgendwie CSS losgeschmissen und das dann ernsthaft bewertet.

01:23:50.528 --> 01:23:53.703
Ist das Zeug schlecht in CSS? Weil es gibt ja genug CSS da draußen.

01:23:54.597 --> 01:23:57.216
Ich habe ja vorhin schon gesagt, dass es ein bisschen besser ist in Tailwind

01:23:57.216 --> 01:24:01.636
CSS als in einem getrennten CSS und das liegt auch einfach dran,

01:24:01.636 --> 01:24:05.052
wie die LLMs Texte schreiben und die schreiben deshalb auch erstmal gern,

01:24:05.673 --> 01:24:09.686
die Brocken am Stück und sie wollen jetzt nicht, vor allem nicht zwischen verschiedenen

01:24:09.686 --> 01:24:13.346
Dateien hin und her springen, aber sie wollen eigentlich auch nicht in einer

01:24:13.346 --> 01:24:16.436
Datei, da schreibe ich was oben, da schreibe ich was unten, da schreibe ich

01:24:16.436 --> 01:24:20.340
was oben, da schreibe ich was unten, weil sie ja schon eigentlich zusammenhängende,

01:24:21.479 --> 01:24:23.576
Textbausteine liefern.

01:24:24.132 --> 01:24:27.423
Okay, weil sie sozusagen wegen Autoregressiven, ich baue den nächsten Token,

01:24:27.590 --> 01:24:29.536
am Ende vergessen haben, was sie am Anfang gemacht haben.

01:24:30.982 --> 01:24:33.786
So tief bin ich auch nicht drin, aber ich kann jetzt nur wiederholen,

01:24:33.786 --> 01:24:38.356
die schreiben gerne Textbausteine am Stück und nicht so viel in verschiedenen Zeilen umher.

01:24:38.356 --> 01:24:41.146
Und ich glaube, das ist auch das, was Menschen auch da ein bisschen schwerer

01:24:41.146 --> 01:24:44.576
fällt, dieses Umherspringen, das im Arbeitsspeicher zu halten,

01:24:44.576 --> 01:24:46.075
wie das schon vorhin gemeint hatte.

01:24:46.690 --> 01:24:51.126
Aber ich habe riesige Vibe-Coded-Projekte in TypeScript gesehen und bildlich

01:24:51.126 --> 01:24:52.959
gründlich durchgelesen, einfach so aus Jux.

01:24:53.580 --> 01:24:57.476
Und da ist auch alles irgendwie extrem verteilt und da werden irgendwie Module

01:24:57.476 --> 01:25:01.667
von ganz weit da hinten importiert. Wieso kriegen die das mit TypeScript und mit CSS nicht?

01:25:03.791 --> 01:25:05.654
Ich glaube, weil CSS ist halt...

01:25:08.105 --> 01:25:11.035
Es gibt ja Leute, die sagen, ja, CSS ist keine Programmiersprache.

01:25:12.527 --> 01:25:15.752
Kann man jetzt drüber streiten? Nein. Inzwischen würde ich mit den Funktionen...

01:25:16.372 --> 01:25:16.562
Die Leute, die das sagen, sind nämlich

01:25:16.562 --> 01:25:19.255
Idioten. Da kann man nicht drüber streiten. Die haben keine Ahnung.

01:25:20.392 --> 01:25:26.842
Ja, ja, eben. Es ist natürlich schon so, also wenn ich eine JavaScript-Funktion

01:25:26.842 --> 01:25:29.721
habe, dann kann ich ja sehr gut isoliert testen, was passiert jetzt.

01:25:30.714 --> 01:25:33.942
Was ist denn ein Unit-Test, die Sie machen können? Shit in, shit out,

01:25:33.942 --> 01:25:36.192
irgendwas kommt rein. Du musst es kompilieren, es muss überhaupt mal lauffähig

01:25:36.192 --> 01:25:38.928
sein. und CSS erlaubt halt auch schon eh schon so viel.

01:25:39.305 --> 01:25:43.874
Eben, ich kann ja irgendwie fünfmal Positionen neu setzen im CSS.

01:25:44.384 --> 01:25:46.526
Der Browser sagt ja, nehme ich halt das Letzte.

01:25:47.892 --> 01:25:52.738
Die Klassen können sich gegenseitig überschreiben. Jetzt kommen noch die Layers hinzu.

01:25:54.449 --> 01:25:57.906
Es ist halt schon eine Komplexität, finde ich.

01:25:57.906 --> 01:26:05.146
Also du findest ja auch leichter, einen guten TypeScript oder JavaScript-Developer

01:26:05.146 --> 01:26:08.050
zu finden, finde ich, ehrlich gesagt, ist sehr viel leichter,

01:26:08.682 --> 01:26:12.716
als jemanden zu finden, der sagt, hey, ich kann CSS und habe da ein bisschen

01:26:12.716 --> 01:26:14.644
ein Händchen dafür, weil du da,

01:26:15.578 --> 01:26:16.879
du musst ja neben dem,

01:26:17.993 --> 01:26:21.046
dass du jetzt weißt, welche Klassen du verwenden sollst und welche nicht,

01:26:21.046 --> 01:26:24.076
welche Sinn machen, musst du dann eigentlich auch noch sagen,

01:26:24.076 --> 01:26:26.259
Und wenn du wirklich vorumfänglich sagen willst,

01:26:26.701 --> 01:26:30.496
muss ich da auch noch ein Verständnis haben von UX und UI und Geschichten und

01:26:30.496 --> 01:26:35.002
Abständen und typografisches Know-how und all diese Geschichten.

01:26:36.407 --> 01:26:41.576
Von dem her finde ich eigentlich, ist das Spannungsfeld von CSS für mich viel

01:26:41.576 --> 01:26:43.024
breiter als bei JavaScript.

01:26:43.343 --> 01:26:49.916
JavaScript, finde ich, kann man so sehr schnell, weil wenn du sagst,

01:26:50.236 --> 01:26:52.115
du bringst einem Jugendlichen,

01:26:52.719 --> 01:26:56.161
hast einen Vortrag über, wie entwickle ich eine Webseite, da erklärt,

01:26:56.387 --> 01:26:59.133
zeigst du ein JavaScript, schau, da machst du das und dann machst du das.

01:26:59.510 --> 01:27:02.116
Ist sehr viel schneller erklärt, als wenn ich dann jemandem erklären muss,

01:27:02.116 --> 01:27:05.310
ja, okay, jetzt CSS. Würde damit einer nie gesehenen Vehemenz widersprechen.

01:27:06.887 --> 01:27:11.061
Weil ich gucke mal, nimmst du dir halt irgendwie so einen modernen Full-Stack-Java-Skript-Ansatz,

01:27:11.369 --> 01:27:13.966
dann musst du halt irgendwie JavaScript die Sprache kennen, dann musst du irgendwie

01:27:13.966 --> 01:27:17.081
React auf dem Kasten haben, das muss irgendwie in Next.js reingeknuppert werden

01:27:17.394 --> 01:27:20.496
und weil das irgendwie Backend-mäßig noch arbeitet, musst du entweder REST sprechen

01:27:20.496 --> 01:27:21.928
oder mit der Datenbank auch noch reden

01:27:22.271 --> 01:27:25.426
und das sind alles irgendwie Libraries um Libraries um Libraries mit ihren eigenen

01:27:25.426 --> 01:27:28.016
Komplexitäten, permanenten Updates und.

01:27:31.564 --> 01:27:34.056
Node.js, Docker? Node.js, Docker, ja, wenn du Pech hast, musst du den Kram auch

01:27:34.056 --> 01:27:37.366
noch deployen, Gott bewahre oder gar Tests schreiben, ne, musst dann auch noch

01:27:37.366 --> 01:27:38.524
Qualitätssicherung machen,

01:27:38.942 --> 01:27:44.566
also Also ich glaube nicht, dass die Komplexität von CSS massiv unterschätzt

01:27:44.566 --> 01:27:47.650
wird von so den Feld-, Wald- und Wiesen-Menschen da draußen.

01:27:48.521 --> 01:27:53.046
Ich glaube aber nicht, dass irgendwie so, ich bin einigermaßen kompetent in

01:27:53.046 --> 01:27:56.236
JavaScript und allem, was da dran hängt.

01:27:57.716 --> 01:28:00.462
Eine andere Komplexitätsstufe ist. Das ist schon alles auf einem Niveau.

01:28:02.604 --> 01:28:05.544
Ich habe Docker schon ganz verdrängt. Guck, ich habe nicht mal daran gedacht,

01:28:05.544 --> 01:28:09.452
das aufzulisten, weil das so viel Scheiße ist, der in meinen beschränkten Schädel nicht reingeht.

01:28:10.729 --> 01:28:16.274
Ja, aber ich finde, ehrlich gesagt, klar, wenn du jetzt Libraries erwähnst und

01:28:16.274 --> 01:28:21.619
React mit den Lifecycle und all den Geschichten, ja, es ist ein Brainfuck.

01:28:21.945 --> 01:28:25.393
Deswegen verwende ich es ja nicht so gerne. Aber.

01:28:27.697 --> 01:28:32.684
So in sich, wenn ich jetzt sage, ich mache eine Miniseite und habe ein paar

01:28:32.684 --> 01:28:36.814
Effekte drauf, weißt du, ganz klassisch nur statisch, jetzt nichts,

01:28:36.814 --> 01:28:42.564
irgendwie externe Library, auch kein Tailwind, kein nichts, irgendwas. Da ist,

01:28:44.787 --> 01:28:48.484
eben JavaScript auch für dich selber, kannst du sehr gut isoliert testen.

01:28:48.484 --> 01:28:52.414
Da hast du einen kleinen, ich habe so ein kleines App, das heißt RunJS,

01:28:52.414 --> 01:28:55.964
da kannst du JavaScript-Funktionen schreiben, das kann auch TypeScript sein

01:28:55.964 --> 01:29:00.944
und dann kompiliert du das und du siehst rechts, was dann quasi rauskommt,

01:29:00.944 --> 01:29:03.328
ganz praktisch, wenn du mal was ausprobieren willst.

01:29:05.991 --> 01:29:11.624
Und CSS ist halt, weil es dieser globale Ansatz hat, finde ich schon manchmal

01:29:11.624 --> 01:29:16.334
komplexer oder halt habe ich jetzt auch, wo ich dann an der Fachhochschule unterrichtet

01:29:16.334 --> 01:29:17.384
habe, habe ich Jungs gehabt.

01:29:17.384 --> 01:29:19.984
Sekunde kurz, wir kommen gleich zu deiner Fachhochschule zurück,

01:29:19.984 --> 01:29:23.124
aber du hast jetzt ja gerade das JavaScript-Projekt auf seine Basics runtergebrochen

01:29:23.124 --> 01:29:27.094
und ich komme nicht umhin, dann auch darauf hinzuweisen, dass dieser ganze Rattenschwanz

01:29:27.094 --> 01:29:30.074
an Technologien, die an CSS dranhängen, unter gleichen Bedingungen dann ja auch

01:29:30.074 --> 01:29:31.347
keine Anwendung finden würden.

01:29:31.789 --> 01:29:34.924
Hast du einfach nur ein statisches Projekt, das halt mit ein bisschen JavaScript

01:29:34.924 --> 01:29:39.224
und HTML relativ einfach gebaut ist, hast du ja auch keine nennenswerten UX-Überlegungen,

01:29:39.224 --> 01:29:43.770
die du da anstellen müsstest, abgesehen von verstehe ich, was da vor sich ist und kann ich das lesen.

01:29:44.489 --> 01:29:48.751
Also wenn wir den Scope reduzieren, dann werden aber auch beide Welten gleichzeitig weniger kompliziert.

01:29:49.534 --> 01:29:52.768
Inherent halte ich das beides für definitiv in einer Liga spielend.

01:29:55.369 --> 01:30:01.115
Ja, das, wo ich viel Erfahrung habe mit den Leuten, wenn ich ihnen was beibringen

01:30:01.115 --> 01:30:05.215
muss, merke ich schon eher, dass sie vielleicht, weil sie auch mehr JavaScript

01:30:05.215 --> 01:30:06.531
schreiben, das kann natürlich auch sein,

01:30:07.593 --> 01:30:11.402
merke ich schon irgendwie, ja, JavaScript ist schneller verstanden.

01:30:11.778 --> 01:30:16.324
Klar, wenn du jetzt Bibliothek React tippst oder Bibliothek B oder C,

01:30:16.927 --> 01:30:20.021
muss man dann die Sonderheiten und die Eigenheiten lernen.

01:30:20.190 --> 01:30:22.765
Das ist klar, aber das ist für mich dann, man kann auch sagen,

01:30:22.765 --> 01:30:24.166
wie eine eigene Sprache zum Teil.

01:30:26.180 --> 01:30:32.009
Aber bei CSS tun sich halt schon sehr, sehr viel Entwickler schwer und kämpfen damit.

01:30:32.363 --> 01:30:38.385
Nur wenn du sagst, wie hier Formularfelder, bitte machst du es so,

01:30:38.385 --> 01:30:42.735
dass das Label jetzt rot wird, wenn das Formularfeld invalid ist und bitte ohne

01:30:42.735 --> 01:30:46.022
JavaScript, hängen halt schon viele dran.

01:30:47.590 --> 01:30:52.555
Weil du halt durch die ganzen Selektoren, eben Invalid und all die Geschichten

01:30:52.555 --> 01:30:58.654
oder wir haben auch das Transparent, wenn es Disabled ist und so all diese Geschichten.

01:31:01.844 --> 01:31:07.291
Ja, per se gebe ich dir recht, es ist eigentlich nicht schwieriger als JavaScript,

01:31:07.291 --> 01:31:10.302
nur es wird halt häufig sehr stiefmütterlich behandelt.

01:31:14.424 --> 01:31:21.641
Und auch unterbewertet, deswegen habe ich ja auch den Talk rausgeschmissen dieses

01:31:21.641 --> 01:31:24.768
Jahr, weil ich gesagt habe, hey, das will ich mal ein bisschen updaten oder mal versuchen,

01:31:25.784 --> 01:31:28.611
den Leuten ein bisschen auf die Sprünge zu helfen, was man jetzt da nicht,

01:31:28.611 --> 01:31:31.107
was man alles wegschmeißen kann. Ja, ja.

01:31:32.106 --> 01:31:35.731
Es ist halt auch so, JavaScript ist halt dem, was andere Entwicklerinnen und

01:31:35.731 --> 01:31:40.993
Entwickler kennen, ähnlicher als CSS irgendwas ähnlicher ist. Vollkommen korrekt.

01:31:41.811 --> 01:31:46.711
Aber das ist ja inhärent keine Aussage über die Komplexität oder Schwerverständlichbarkeit.

01:31:46.978 --> 01:31:51.701
Es ist halt nur, ah, okay, ich bin gewohnt, Class A Extents B zu schreiben aus

01:31:51.701 --> 01:31:52.667
meinem C-Sharp-Projekt.

01:31:52.986 --> 01:31:56.736
Das funktioniert in JavaScript komplett anders, aber hat halt einen vergleichbaren Effekt.

01:31:57.218 --> 01:32:00.371
Also habe ich da eine ganz andere Haltung für, wenn ich damit zum ersten Mal

01:32:00.371 --> 01:32:04.728
konfrontiert bin, weil es extrem dem ähnlich aussieht, was ich halt schon kenne.

01:32:04.990 --> 01:32:07.688
Das ist wie wenn wir Urlaub in Frankreich machen. Das sieht da genauso aus wie hier.

01:32:07.985 --> 01:32:11.131
Also gehen wir da irgendwie ohne nachzudenken hin, aber irgendwie reist du zum

01:32:11.131 --> 01:32:14.591
ersten Mal in eine andere Ecke der Welt, wo irgendwie alles komplett anders

01:32:14.591 --> 01:32:17.412
ist, dann denkst du dir auch, hoppla, da mache ich nicht mal vorher schlau.

01:32:18.898 --> 01:32:24.645
Ja, gut. JavaScript-Klassen habe ich eine ähnliche Meinung wie der Stefan.

01:32:28.539 --> 01:32:31.471
Aber dann will man auch ein anderes Fass aufmachen. Das kann man auch.

01:32:33.776 --> 01:32:37.108
Ich finde schon, dass TSS einfach eine komplett andere Disziplin ist,

01:32:37.108 --> 01:32:41.048
weil ich schon fast auch eine Art räumliches Denken dabei brauche.

01:32:41.048 --> 01:32:45.282
Ja, genau. Ein ganz anderes Verständnis, wie ich was aufbaue.

01:32:46.948 --> 01:32:49.738
Ob das jetzt typisiert ist oder nicht, ist eigentlich auch schon egal.

01:32:49.738 --> 01:32:53.278
Aber die Skriptsprachen, die laufen halt schon irgendwie nach einem Schema ab.

01:32:53.278 --> 01:32:56.078
Ich rufe eine Funktion auf, die Funktion ist fertig. Vielleicht kann ich noch

01:32:56.078 --> 01:32:59.048
ein bisschen asynchron machen, dann wird es ein bisschen komplizierter und dann

01:32:59.048 --> 01:33:00.692
können auch Sachen schief gehen.

01:33:01.272 --> 01:33:05.608
Aber bei CSS, da kann ich auch einfach hier mal so eine Position Relative hinknallen

01:33:05.608 --> 01:33:09.550
und wer weiß schon, was das drunter irgendwie alles beeinflussen wird.

01:33:10.160 --> 01:33:15.123
Oder ich habe vielleicht jetzt hier schon mal eine Fixed Header Bar.

01:33:15.634 --> 01:33:21.398
Jetzt will ich noch eine Fixed Header Bar und jetzt will ich noch Sticky Table Headers. Und generell,

01:33:22.765 --> 01:33:25.679
Und ich glaube auch wirklich, dass es das einfach ist, was LLMs auch einfach

01:33:25.679 --> 01:33:30.629
einfach nicht gut können. Das ist irgendwie zu räumlich, zu malerisch und dann

01:33:30.629 --> 01:33:32.232
kann man es nicht mehr richtig testen.

01:33:32.412 --> 01:33:35.367
Man kann ja jetzt keine Unit- oder Component-Tester für schreiben.

01:33:36.689 --> 01:33:41.990
Da gibt es weniger, in dem Sinne Linting und Überprüfungsformate.

01:33:44.626 --> 01:33:49.537
Und dann, ich weiß nicht, ob das stimmt, das habe ich immer so in den Raum reingeworfen,

01:33:50.360 --> 01:33:53.919
ich persönlich finde, es gibt bessere Dokumentationen, Beispiele,

01:33:53.919 --> 01:33:58.161
Tutorials über JavaScript, TypeScript, egal, jetzt online,

01:33:58.772 --> 01:34:06.049
aber weniger viele gute über CSS im Verhältnis mit wie vielen falschen Lösungen

01:34:06.049 --> 01:34:07.432
ich online schon gesehen habe.

01:34:07.768 --> 01:34:11.779
Es gibt so ein paar Seiten, die sind brillant, Aber ich hatte auch schon das

01:34:11.779 --> 01:34:15.749
Gefühl, dass, ja, das ist jetzt vielleicht auch ein bisschen länger her und

01:34:15.749 --> 01:34:17.056
es entwickelt sich alles weiter.

01:34:17.504 --> 01:34:21.102
Aber dass es schon eine ziemliche Zeit lang so war und vielleicht noch so ist,

01:34:21.457 --> 01:34:25.749
die AI gibt dir halt die wahrscheinlichste Antwort zurück. Und die wahrscheinlichste

01:34:25.749 --> 01:34:30.930
Antwort war halt, ja, da machst du noch einen MinWolf Null dran und dann klappt das schon. Nee.

01:34:32.985 --> 01:34:37.629
Ja, ja. Ja, das ist halt, also, ich glaube, es gibt ja niemand,

01:34:37.629 --> 01:34:41.472
wo noch nie gegoogelt hat, warum funktioniert mein Positionsdecki nicht?

01:34:42.976 --> 01:34:47.169
So ein der Klasse, dieses Teilspiel. Ja, und das ist halt, wir müssen jetzt

01:34:47.169 --> 01:34:50.009
erst beantworten, warum das nicht funktioniert. Das kannst du genauso gut fragen,

01:34:50.009 --> 01:34:53.795
warum wird meine Klasse nicht aufgerufen, meine Funktion nicht aufgerufen?

01:34:54.739 --> 01:34:57.330
Irgendwie werden solche Fragen aber vielleicht doch weniger gestellt.

01:34:57.649 --> 01:35:03.289
Ich glaube, die werden gestellt. Ich glaube halt nur, es ist halt relativ schwierig,

01:35:03.289 --> 01:35:06.334
aus unseren Köpfen rauszutreten. Und tatsächlich irgendwie.

01:35:08.383 --> 01:35:11.199
Weil ich jetzt uns allen mal unterstelle, dass wir irgendwie seit Dekaden schon

01:35:11.199 --> 01:35:14.289
irgendwie JavaScript und ähnliche Dinge schreiben, dass wir,

01:35:14.289 --> 01:35:17.886
glaube ich, Wissen angesammelt haben, von dem wir nicht mal wissen, dass es da ist.

01:35:19.179 --> 01:35:22.099
So dieser globale Charakter von CSS und dann schreibe ich hier noch eine Klasse

01:35:22.099 --> 01:35:25.577
hin und dann ändere ich das da, schreibe in den Futter was rein, was den Header umstylt.

01:35:25.949 --> 01:35:29.501
Das sind ja alles Dinge, die man machen kann, nur das kann man ja theoretisch

01:35:29.803 --> 01:35:32.799
in einem JavaScript-Programm ganz genauso machen.

01:35:33.159 --> 01:35:36.491
Man kann ja in irgendein Modul was reinschreiben, was irgendwelches DOM anfasst,

01:35:36.914 --> 01:35:40.403
das mit dem Modul eigentlich inhärent nichts zu tun hat.

01:35:40.688 --> 01:35:44.209
Man kann irgendwelche globalen Variablen setzen und überschreiben aus jeder

01:35:44.209 --> 01:35:45.564
beliebigen Zeile Code heraus.

01:35:45.866 --> 01:35:49.589
Nur das ist so weit entfernt von allem, was wir auch nur entfernt in Betracht

01:35:49.589 --> 01:35:52.581
ziehen, dass es aus unserer Realität so weit rausdefiniert ist.

01:35:53.080 --> 01:35:55.739
Und in CSS ist das halt irgendwie nicht so, weil wir die ganze Zeit darüber

01:35:55.739 --> 01:35:58.966
reden irgendwie, ja, das könnte ja global wirken und irgendwas kaputt machen.

01:35:59.233 --> 01:36:02.869
Da kann jede Zeile JavaScript auch. Nur wir haben unsere Gehirne in eine Form

01:36:02.869 --> 01:36:05.932
gebracht, wo diese Möglichkeit gar nicht mehr vorkommt.

01:36:06.385 --> 01:36:10.460
Das ist eine gefühlte Unmöglichkeit, sowas zu machen.

01:36:12.573 --> 01:36:15.772
Das hat extrem viel mit Köpfen zu tun und extrem wenig damit zu tun,

01:36:16.719 --> 01:36:19.870
wie man sich jetzt entscheidet, irgendwie einen Klassennamen zu schreiben.

01:36:21.374 --> 01:36:24.089
Ich bleibe bei meinem Punkt von ganz zu Beginn. Man muss halt gucken,

01:36:24.089 --> 01:36:26.383
was für ein Problem habe ich und welche Lösung schmeiße ich da drauf.

01:36:26.807 --> 01:36:30.499
Und im Idealfall gilt es, Lösungen zu vermeiden und stattdessen Designers so

01:36:30.499 --> 01:36:32.775
zu systemen, dass Lösungen nicht nötig werden.

01:36:35.032 --> 01:36:37.619
Und man sollte sich, glaube ich, immer gewahr sein, dass man nicht notwendigerweise

01:36:37.619 --> 01:36:39.089
immer weiß, was man alles weiß,

01:36:40.117 --> 01:36:44.269
und was man alles so aus seiner Realität rausdefiniert, was man mit JavaScript

01:36:44.269 --> 01:36:48.109
alles anstellen könnte, wenn man einfach mal mit dem gleichen leeren Gehirn

01:36:48.109 --> 01:36:51.371
da rangehen würde im Vergleich, wie man es zu CSS hat.

01:36:51.906 --> 01:36:55.632
Dann tun sich da plötzlich Möglichkeiten auf. Sachen, die man schreiben kann.

01:36:57.211 --> 01:37:00.613
Wie schreibt sonst keiner? Auch aus gutem Grund. Sie sind halt da.

01:37:00.805 --> 01:37:03.859
Sie sind nicht in unseren Köpfen und dadurch weniger real. Aber existieren tun

01:37:03.859 --> 01:37:05.658
sie. Und wenn man die heraufbeschwört, dann sind die da.

01:37:06.157 --> 01:37:09.390
Und dann kann man genauso viel Mist machen wie mit CSS. Mit nacktem CSS.

01:37:09.802 --> 01:37:12.084
Und dann hilft auch kein Framework. Das kann ich auch mit React-Komponenten machen.

01:37:13.814 --> 01:37:17.059
Am Ende nützt halt eben alles nichts, wenn man nicht weiß, was vor sich geht.

01:37:18.370 --> 01:37:20.889
Und zu einem gewissen Grad weiß man nie, was vor sich geht, weil das alles zu

01:37:20.889 --> 01:37:21.906
kompliziert ist für ein Hirn.

01:37:22.701 --> 01:37:24.769
Und da muss man dann halt irgendwie wirklich so arbeiten, dass man,

01:37:24.769 --> 01:37:29.139
wie gesagt, das Design so baut, dass es den mentalen Load runterfährt und nicht

01:37:29.139 --> 01:37:30.410
auf alles Code draufschmeißt.

01:37:30.602 --> 01:37:32.680
Ja, das ist jetzt besonders leicht geworden, dieser Tage.

01:37:33.144 --> 01:37:35.965
Nett, das heißt nicht, dass es immer das richtige Werkzeug ist.

01:37:37.782 --> 01:37:38.293
Nein, nein.

01:37:41.283 --> 01:37:48.727
Ja, und für mich ist halt Tailwind genauso ein Tool, wo ich genau das erreiche,

01:37:48.727 --> 01:37:52.049
was du sagst. Also für mich ist das schon so eine Riesenhilfe,

01:37:52.774 --> 01:37:55.218
genau in dem Bereich das halt so zu lösen.

01:37:56.606 --> 01:38:02.937
Weil ja, gewisses Frontend-Tooling hat man ja quasi immer.

01:38:02.937 --> 01:38:09.807
Du willst ja deine JavaScript-Dateien bilden und vielleicht splitten und das

01:38:09.807 --> 01:38:13.928
willst du nicht jetzt manuell machen mit diesen Chunks.

01:38:15.293 --> 01:38:18.235
Also ich weiß, dass ich das will, aber ich weiß nicht, ob ich damit recht habe.

01:38:18.602 --> 01:38:19.715
Ich zweifle ja so ein bisschen.

01:38:20.743 --> 01:38:25.237
Und du willst ja auch natürlich deine CSS-Datei ein bisschen minimieren und

01:38:25.237 --> 01:38:29.877
nicht das ganze Zeug auch bundeln und machen und tun und das verteilt haben.

01:38:29.877 --> 01:38:35.151
Schluss soll eine Datei rausfallen oder mehrere und das ein bisschen so handeln.

01:38:35.773 --> 01:38:39.127
Und da fand ich jetzt dieses ganze Terminsystem geben.

01:38:41.353 --> 01:38:45.901
Hat mir schon sehr viele Problemchen von der Schulter weggenommen,

01:38:46.668 --> 01:38:51.788
genau auch im Tooling-Bereich zu sagen, ja gut, ich habe meine Build-Pipeline, die funktioniert,

01:38:52.978 --> 01:38:57.900
habe ich nie große Probleme damit, kann ich regelmäßig die Dependencies hochfahren,

01:38:58.109 --> 01:39:01.470
das Zeug funktioniert weiterhin, ist ganz angenehm.

01:39:02.672 --> 01:39:06.943
Aber ja, das war natürlich nicht immer so noch vor ein paar Jahren hast du natürlich

01:39:06.943 --> 01:39:11.194
oh, jetzt habe ich Build Pipeline abgedatet jetzt läuft gar nichts mehr das

01:39:11.496 --> 01:39:14.537
erlebe ich jetzt auch immer wie weniger dass es gar nicht mehr funktioniert,

01:39:16.029 --> 01:39:19.583
aber für mich hat genau eigentlich das Problem wo du beschrieben hast,

01:39:19.583 --> 01:39:25.503
Peter sehe ich eigentlich ähnlich und Tailwind löst halt genau für mich dieses

01:39:25.503 --> 01:39:30.786
Problem zu sagen ja eben, wieder dieser Global Local Aspekt vom CSS, weil halt,

01:39:32.373 --> 01:39:36.133
CSS per Definition global ist, klar, JavaScript ja in dem Sinne,

01:39:36.153 --> 01:39:38.576
den man es jetzt ohne Type-Modul laufen lässt, auch,

01:39:39.899 --> 01:39:47.747
aber dann bauen halt dir deine Tools diesen IFFE rundherum, dass es nicht mehr global ist.

01:39:50.353 --> 01:39:54.434
Kann man halt beim CSS nicht einfach so out of the box oder konnte man lang nicht.

01:39:55.688 --> 01:39:58.608
Und ja, deswegen. Also für mich wäre eine spannende Überlegung,

01:39:59.403 --> 01:40:05.156
würde Tailwind CSS geben, wenn es CSS-Coping von Anfang an gegeben hätte?

01:40:05.862 --> 01:40:11.172
Das finde ich eine spannende Frage. Das ist 100% pro, weil du musst halt immer

01:40:11.172 --> 01:40:15.972
gucken, was ist dein Total Addressable Market am Ende? Und dein Total Addressable

01:40:15.972 --> 01:40:19.715
Market sind Leute, die mit einem Problem nicht konfrontiert sein wollen.

01:40:20.086 --> 01:40:22.780
Und nicht vergessen, das gab es ja früher auch für JavaScript,

01:40:23.157 --> 01:40:24.846
als das irgendwie als uncool galt.

01:40:25.845 --> 01:40:28.062
Einige von uns sind hier sicherlich alt genug, um sich zu erinnern,

01:40:28.062 --> 01:40:31.069
als man nicht gefragt hat, ob CSS eine Programmiersprache ist,

01:40:31.365 --> 01:40:33.602
sondern ob irgendwie JavaScript richtig ernst zu nehmen ist.

01:40:33.602 --> 01:40:38.152
Und da mussten erst irgendwie so Leute wie Douglas Crockford aus dem Keller

01:40:38.152 --> 01:40:40.352
gekrochen kommen und irgendwie sagen, ja, guck mal, man kann das,

01:40:40.352 --> 01:40:42.986
wenn man da anfängt, drüber nachzudenken, auch ein vernünftig machen.

01:40:43.282 --> 01:40:47.142
Das ist nicht ein Feature, das CSS exklusiv hat, sondern das hatten wir in JavaScript

01:40:47.142 --> 01:40:49.592
früher auch und dann hattest du Google Web Toolkit und ähnliches.

01:40:50.142 --> 01:40:53.312
Und das wohnt alles in Köpfen und das sind alles Meinungen von Menschen.

01:40:53.312 --> 01:40:57.082
Und wenn die halt irgendwie sagen, ich habe keinen Bock auf CSS,

01:40:57.082 --> 01:40:59.807
aus welchen Gründen auch immer, wo auch immer das durchmotiviert ist,

01:41:00.134 --> 01:41:02.812
dann hast du dann Markten, dann findest du dafür jemanden, der sagt,

01:41:02.812 --> 01:41:04.910
wunderbar, für die brauche ich jetzt mal eine schöne Lösung,

01:41:05.084 --> 01:41:07.499
mit der die glücklich werden. Ist ja auch erstmal nichts verkehrt dran.

01:41:08.062 --> 01:41:10.982
Ich glaube halt wirklich, dass das mit Funktionsumfängen, die objektiv bemessbar

01:41:10.982 --> 01:41:15.732
sind, sehr wenig zu tun hat. Das ist sehr viel Meinung und Einstellung und Haltung.

01:41:20.805 --> 01:41:24.342
Du konntest auch schon immer sauberes JavaScript schreiben. Hat früher keinen

01:41:24.342 --> 01:41:27.504
interessiert, weil die Backendler sind die einzig richtigen.

01:41:27.759 --> 01:41:31.520
Hier, gib mir Google Web Toolkit. Ist viel besser, als sich mit JavaScript auseinanderzusetzen.

01:41:33.563 --> 01:41:42.933
Aber das Fazit ist jetzt, welches? Alle Tools und alle Paradigmen haben vielleicht

01:41:42.933 --> 01:41:46.130
so ihre Abnehmer und Daseinsberechtigung.

01:41:46.920 --> 01:41:51.691
Und im Endeffekt ist es wahrscheinlich einfach so, womit fühlt man sich bei der Entwicklung wohl?

01:41:53.513 --> 01:41:58.106
Und viele Argumente für und wieder kann man im Grunde relativieren.

01:41:58.756 --> 01:42:02.867
Ich würde sagen, ich glaube auf mein Eingangsstatement, das da war,

01:42:03.905 --> 01:42:08.793
nimm halt das, was für das, was deine Herausforderung ist, das angemessene Werkzeug

01:42:08.793 --> 01:42:12.218
ist und setze das nach Kräften korrekt ein.

01:42:12.788 --> 01:42:15.193
Glaube ich korrekt. Ich glaube, darauf können wir uns einigen.

01:42:15.193 --> 01:42:17.924
Worauf wir uns nicht werden einigen können im Rahmen des heutigen Abends ist,

01:42:18.208 --> 01:42:23.413
wo die Grenzen liegen, anhand derer man sich entscheidet, A oder B zu wählen. Aber das ist.

01:42:28.373 --> 01:42:28.653
Ja auch okay. Ja.

01:42:54.059 --> 01:42:59.248
Oder eben Probleme hatten, das CSS dann quasi sauber zu schreiben.

01:43:00.392 --> 01:43:05.833
Und da fand ich halt eben so, diese Ansätze von Tailwind hat dann schon bei

01:43:05.833 --> 01:43:07.735
vielen Projekten geholfen, um,

01:43:08.891 --> 01:43:12.433
den Leuten so ein bisschen das zu helfen oder können sie dann in die Komponente

01:43:12.433 --> 01:43:15.444
schauen, wie wurde es da gelöst und haben sie es ähnlich gelöst und,

01:43:16.977 --> 01:43:21.563
dann eben auch gesehen, dass sie durch dieses Verwenden von diesen Geschichten,

01:43:22.555 --> 01:43:26.273
weil sie dann nicht nur Komponentennamen und Klassen verwendet haben,

01:43:26.273 --> 01:43:30.203
auch gelernt haben, okay, was macht jetzt dieses Einzelne, wenn sie dann eine

01:43:30.203 --> 01:43:32.772
kleine Modifikation machen mussten, wie mit,

01:43:33.933 --> 01:43:38.117
Gap erhöhen oder Padding anpassen und so weiter und so fort, weil,

01:43:40.468 --> 01:43:44.228
Das ist ja das Problem bei CSS. Sehr viele denken immer, ja,

01:43:44.228 --> 01:43:47.898
man definiert Breiten und Höhen und dann passt es schon irgendwie.

01:43:47.898 --> 01:43:51.978
Aber meistens ist es ja vielmehr so, dass man die Abstände anpasst und nicht

01:43:51.978 --> 01:43:53.803
die Größen von einem Element.

01:43:54.818 --> 01:43:59.038
Und gerade in komponentenbasierten Geschichten, wo du dann vielleicht auch nicht

01:43:59.038 --> 01:44:02.882
Breakpoints hast im klassischen Sinne, sondern eben Container-Querys verwendest,

01:44:03.456 --> 01:44:07.018
da umso mehr arbeitest du ja noch vielmehr nur mit den Abständen,

01:44:07.018 --> 01:44:08.228
dass du die richtig setzt.

01:44:09.273 --> 01:44:14.584
Und da habe ich dann schon gemerkt, dass da Tailwinds ja eine große Hilfe sein kann.

01:44:17.638 --> 01:44:24.338
Das ist auch so mein Punkt. Wo ich entscheide, von was nehmen wir jetzt halt?

01:44:24.338 --> 01:44:27.438
Ja, bitte denkt es auch an die, wo vielleicht noch nicht so dieses Level haben.

01:44:27.438 --> 01:44:30.362
Wie können sie auch dann aufholen und das dazulernen?

01:44:31.848 --> 01:44:34.798
Und gleichzeitig auch bei der Entscheidung auch schon erlebt,

01:44:34.798 --> 01:44:38.338
wo dann alle einbezogen wurden und alle hatten das gleiche Stimmrecht,

01:44:38.338 --> 01:44:39.661
das war dann auch eher schwierig,

01:44:40.479 --> 01:44:45.148
weil wenn dann irgendein völliger Neuling sagt, ja, bei Wilsitz so und so machen

01:44:45.148 --> 01:44:49.048
und jeder weiß, das wird aber nicht funktionieren, ist natürlich dann auch doof.

01:44:49.048 --> 01:44:53.178
Also es ist auch nicht leicht, also diese Entscheidung quasi zu setzen,

01:44:54.162 --> 01:44:55.718
welchen Ansatz fahren wir jetzt.

01:44:55.718 --> 01:45:00.808
Aber ich finde es schon wichtig, immer daran zu denken, dass es für alle dann

01:45:00.808 --> 01:45:04.888
einen Weg gibt, wo man auch sagen kann, hey, die Leute, wo das dann verwenden

01:45:04.888 --> 01:45:06.996
können, sich durchs Verwenden auch weiterbilden.

01:45:08.633 --> 01:45:18.130
Ja. Also, da haben wir ein paar schöne Argumente für die verschiedenen Ansätze,

01:45:18.281 --> 01:45:20.766
CSS zu schreiben, ausgetauscht, fand ich super.

01:45:21.998 --> 01:45:26.528
Ich glaube, irgendwie haben wir auch gar nicht so alle zusammen so furchtbar

01:45:26.528 --> 01:45:29.003
divergierende Meinungen. Oder habe ich zumindest den Eindruck.

01:45:29.415 --> 01:45:32.588
Außer Peter natürlich. Ich glaube nicht mal, dass ich divergierende Meinungen

01:45:32.588 --> 01:45:36.908
habe. Ich habe sie auf einem Koordinatensystem an anderen Orten platziert. So.

01:45:38.551 --> 01:45:44.430
Genau, auf jeden Fall vielen Dank, John, dass du dich angeklingt hast und uns

01:45:44.430 --> 01:45:50.544
angeschrieben hast und ja, auch Vanessa, die dadurch sozusagen nochmal so.

01:45:53.660 --> 01:45:56.500
Aufgeschreckt ist und gedacht hat, was haben die denn da eigentlich,

01:45:56.500 --> 01:45:58.790
was haben die denn da wohl, also wenn der John das schreibt,

01:45:58.790 --> 01:46:02.677
was haben die denn da erzählt und genau. Tailwind, mein Bettsignal. Ja.

01:46:04.820 --> 01:46:07.780
Genau. Genau, also vielen Dank.

01:46:09.460 --> 01:46:14.090
Wer von den Hörenden auch nochmal divergierende Meinung hat,

01:46:14.090 --> 01:46:16.986
sehr gerne her damit oder zustimmende Meinung.

01:46:18.286 --> 01:46:22.370
Genau, wie ihr uns erreichen könnt, inklusive dem John, wisst ihr,

01:46:22.370 --> 01:46:23.929
das wird immer in den Shownotes hinterlegt.

01:46:24.410 --> 01:46:28.020
Und auch die Dinge, die wir alle genannt haben, habe ich hier alle geöffnet,

01:46:28.020 --> 01:46:29.623
um dann die Links zu extrahieren.

01:46:31.108 --> 01:46:38.400
Genau und würde ich sagen hören wir uns nächste Woche wieder und da geht es

01:46:38.400 --> 01:46:42.510
um ich weiß es eigentlich aber natürlich jetzt weiß ich es wieder nicht,

01:46:42.510 --> 01:46:46.000
egal es wird was Tolles oder?

01:46:46.640 --> 01:46:54.671
Cross-Origin-Storage-API genau, Cross-Origin-Storage-API mit Thomas Steiner oder?

01:46:56.441 --> 01:46:57.276
Ja genau.

01:46:59.325 --> 01:47:04.780
Alles klar, Ru. Dann liebe Grüße an euch alle und vielen Dank für den schönen

01:47:05.140 --> 01:47:06.756
Abend hier am virtuellen Kamin.

01:47:07.291 --> 01:47:10.570
Und dann sehen und hören wir uns bald wieder.

01:47:11.557 --> 01:47:12.862
Bis dahin. Danke. Tschüss.