WEBVTT

00:00:00.617 --> 00:00:04.137
Liebe Hörer und Hörerinnen, herzlich willkommen zur Revision.

00:00:04.317 --> 00:00:07.637
Eine kleine Info vorneweg. Eigentlich hatten wir vor,

00:00:07.737 --> 00:00:12.417
heute über Tailwind CSS Version 4 zu sprechen und wir wollten am Anfang auch

00:00:12.417 --> 00:00:17.857
ganz kurz eingehen auf die Neuigkeiten, die es eigentlich in V3 gab und generell

00:00:17.857 --> 00:00:20.257
von unseren Erfahrungen mit Tailwind CSS berichten.

00:00:20.257 --> 00:00:24.877
Jetzt ist das Wort kurz ein bisschen ein Problem geworden, denn wir haben uns

00:00:24.877 --> 00:00:31.117
hier etwas verquatscht und auch dieser Teil dauert bereits ungefähr ein bisschen über eine Stunde.

00:00:32.017 --> 00:00:36.897
Und wir sind bei unserer Gesamtaufnahme bei ungefähr drei Stunden rausgekommen.

00:00:36.977 --> 00:00:41.357
Von daher haben wir uns entschieden, diese Revision auf zwei Wochen zu releasen,

00:00:41.357 --> 00:00:43.957
damit ihr jetzt keinen Drei-Stunden-Blog am Stück anhören müsst.

00:00:43.957 --> 00:00:48.677
Das heißt, diese Woche gibt es erstmal die Neuigkeiten in V3 und die Erfahrungsberichte

00:00:48.677 --> 00:00:55.797
und nächste Woche kommen wir dann mit der Revision 625 über Tailwind CSS V4 heraus.

00:00:56.117 --> 00:01:00.417
Das heißt, heute gibt es vielleicht kein richtiges Outro, weil wir so im Gespräch

00:01:00.417 --> 00:01:01.597
nahtlos übergegangen sind.

00:01:01.697 --> 00:01:04.637
Jetzt aber viel Spaß mit der Tailwind

00:01:04.637 --> 00:01:09.317
CSS Neuigkeiten in V3 und Erfahrungsberichte mit Milan, Shep und mir.

00:01:09.840 --> 00:01:35.280
Music.

00:01:36.997 --> 00:01:39.817
Untertitelung des ZDF, 2020 Diese Revision von Working Draft wird euch präsentiert

00:01:39.817 --> 00:01:42.557
von Midwald. Next Level Hosting für deine Projekte.

00:01:43.117 --> 00:01:45.977
Jetzt fragt ihr euch bestimmt, wie kann sowas langweiliges wie Hosting next

00:01:45.977 --> 00:01:47.517
level sein? Ganz einfach.

00:01:48.217 --> 00:01:51.737
Midvalts hochperformantes Cloud-Hosting ist perfekt abgestimmt auf die Anforderungen

00:01:51.737 --> 00:01:53.257
von Freelancern und Agenturen.

00:01:53.417 --> 00:01:56.837
Es gibt zum Beispiel ein smartes Rollensystem für die Zusammenarbeit mit euren

00:01:56.837 --> 00:02:01.217
Projektpartnern und Midvalt hat mit M-Studio auch eine sehr schöne moderne Verwaltungsoberfläche

00:02:01.217 --> 00:02:02.937
gebaut, mit der das Arbeiten Spaß macht.

00:02:03.077 --> 00:02:07.477
Aber jetzt mal ehrlich unter uns Nerds. Sachen anklicken? In einem User-Interface?

00:02:07.617 --> 00:02:12.117
Muss das sein? Nein, muss es nicht. Denn bei Midwald gibt's die M-Studio CLI.

00:02:12.177 --> 00:02:15.377
Mit der könnt ihr euer Hosting komplett über die Kommandozeile verwalten und

00:02:15.377 --> 00:02:17.037
natürlich auch entsprechend automatisieren.

00:02:17.177 --> 00:02:20.777
Von Nerds für Nerds bringt euch Midwald die optimale Developer-Experience,

00:02:20.817 --> 00:02:21.857
wenn's ums Hosting geht.

00:02:21.997 --> 00:02:25.997
Und deshalb jetzt auf zu midwald.de slash workingdraft.

00:02:26.157 --> 00:02:30.157
Denn da wartet auf euch exklusiv als Hörer von Working Draft das Angebot,

00:02:30.157 --> 00:02:33.137
den Tarif pro Space für 30 Tage kostenlos zu nutzen.

00:02:33.237 --> 00:02:39.497
Das war nochmal mittwald.de slash workingdraft. Wir danken Mittwald für die

00:02:39.497 --> 00:02:41.797
Unterstützung von dieser Revision von Working Draft.

00:02:49.920 --> 00:02:54.560
Wir sind heute zu dritt aus dem Team einmal die Vanessa. Hallo Vanessa. Servus.

00:02:55.580 --> 00:02:58.840
Und ich bin der Shep und das bedeutet, wir haben wieder einen Gast.

00:02:58.980 --> 00:03:02.260
Und zwar den Milan Matul. Hallo. Hi.

00:03:03.060 --> 00:03:10.100
Genau, du bist ein alter Gasthase sozusagen. Hast schon ein paar Mal bei uns vorbeigeschaut.

00:03:11.680 --> 00:03:15.420
Aber weil wir ja immer wieder feststellen, wie lange das dann immer hier ist,

00:03:15.460 --> 00:03:20.280
dass Gäste da waren. und wir vielleicht auch neue Hörerinnen und Hörer gewonnen haben in der Zeit.

00:03:21.080 --> 00:03:25.360
Vielleicht magst du das trotzdem nochmal sagen, was du so tust, wer du bist.

00:03:27.580 --> 00:03:34.360
Ja, sehr gerne. Genau, also ich bin Milan, ich bin Managing Partner bei Factorial.

00:03:34.500 --> 00:03:42.060
Wir sind eine Software- und Web-Development-Agentur aus Hamburg mit einem internationalen Team.

00:03:42.060 --> 00:03:46.160
Wir kümmern uns im weitesten Sinne

00:03:46.160 --> 00:03:50.360
um Business-Probleme und lösen die mit Technologie und Web-Technologie.

00:03:51.440 --> 00:03:59.340
Ich selbst habe mehr als 20 Jahre Web-Development-Erfahrung und erste Webseiten

00:03:59.340 --> 00:04:03.020
so späte 90er gebaut und entwickelt.

00:04:03.720 --> 00:04:11.140
Lange als Content-Engineer und tatsächlich auch eine Zeit als UI-Designer gearbeitet.

00:04:12.060 --> 00:04:19.360
Und jetzt kümmere ich mich bei unserer Firma vor allem um den Aufbau der Firma

00:04:19.360 --> 00:04:24.320
und um die Organisation und die Strategie.

00:04:24.960 --> 00:04:30.220
Aber occasionally auch noch im Frontend-Development und so.

00:04:32.546 --> 00:04:37.846
Deswegen bin ich hier. Genau, du warst insgesamt dreimal, glaube ich, schon zu Gast.

00:04:39.526 --> 00:04:47.406
Einmal zur Organisationsstruktur Unfix, die du uns mal ein bisschen erklärt

00:04:47.406 --> 00:04:48.286
und näher gebracht hast.

00:04:48.666 --> 00:04:54.526
Und zweimal warst du da zum Thema Tailwind, nämlich einmal zum Zweier-Release,

00:04:55.186 --> 00:04:56.946
später nochmal zum Dreier-Release.

00:04:57.906 --> 00:05:01.566
Und unsere Hörerinnen und Hörer haben es ja schon gelesen, denke ich mal.

00:05:02.546 --> 00:05:05.406
Tailwind 4 steht jetzt vor der Tür und da haben wir gedacht,

00:05:05.606 --> 00:05:11.526
da sollten wir doch mal wieder mit dir uns hier einigeln und ein wenig quatschen.

00:05:12.626 --> 00:05:16.146
Genau, und eigentlich habe ich auch zwei Gäste da, denn die Vanessa hat das

00:05:16.146 --> 00:05:18.646
so ein bisschen zusammen mit dir vorbereitet.

00:05:19.186 --> 00:05:23.886
Und da schauen wir mal, was Neues ansteht, aber auch was vielleicht aktuell

00:05:23.886 --> 00:05:25.866
so der Stand der Dinge bei Tailwind ist.

00:05:27.546 --> 00:05:34.526
Und bevor wir das machen, haben wir gedacht, sollten wir einfach nochmal kurz

00:05:34.526 --> 00:05:40.086
erklären, was Tailwind eigentlich ist und warum man das vielleicht benutzen wollen würde.

00:05:40.966 --> 00:05:44.046
Ja, ich kann mich auf jeden Fall mal dran versuchen, glaube ich,

00:05:44.746 --> 00:05:48.666
immer eine gute Idee nochmal einen Satz oder zwei dazu zu sagen,

00:05:49.966 --> 00:05:56.606
auch wenn es mittlerweile eine sehr populäre Lösung ist.

00:05:57.346 --> 00:06:02.446
Es ist trotzdem etwas für jemanden, der da noch nie was von gehört hat oder

00:06:02.446 --> 00:06:06.066
noch nie mitgearbeitet hat, was auch durchaus ein bisschen fremdwirken kann.

00:06:07.106 --> 00:06:13.246
Meine High-Level-Zusammenfassung wäre, also Tailwind CSS ist das.

00:06:14.290 --> 00:06:18.130
Das kann man auf jeden Fall sagen, mit ziemlichem Abstand populärste,

00:06:18.230 --> 00:06:19.750
Achtung, jetzt kommt ein Wort,

00:06:19.890 --> 00:06:28.370
Utility-First-CSS-Framework, das es gibt und ein Utility-First-CSS-Ansatz,

00:06:28.490 --> 00:06:30.770
der zeichnet sich dadurch aus,

00:06:30.950 --> 00:06:40.030
dass man in diesem Framework nicht vorgefertigte Klassen für einzelne Buttons

00:06:40.030 --> 00:06:42.390
oder Komponenten oder sowas bekommt,

00:06:42.390 --> 00:06:49.030
sondern dass das sehr low-level Klassen sind,

00:06:49.110 --> 00:06:52.530
die sich eigentlich immer auf eine bestimmte CSS-Eigenschaft beziehen,

00:06:52.710 --> 00:06:57.390
also sowas wie Margin, Padding, Color,

00:06:57.690 --> 00:06:59.710
was es da eben alles gibt.

00:06:59.710 --> 00:07:04.550
Und entsprechend werden die Klassennamen dann auch abgekürzt.

00:07:04.550 --> 00:07:11.510
Und um dann eine Designlösung in CSS auszudrücken, kombiniert man diese ganz

00:07:11.510 --> 00:07:15.250
vielen Klassennamen im HTML direkt im Markup,

00:07:15.410 --> 00:07:19.610
anstelle selber dann CSS zu schreiben.

00:07:19.610 --> 00:07:22.130
So, das würde ich sagen, ist der allergrößte Unterschied.

00:07:22.790 --> 00:07:26.570
Warum will man das tun? Warum ist das sinnvoll? Ich würde sagen,

00:07:26.690 --> 00:07:32.950
das größte Argument für diesen Ansatz, also wir haben uns ja in diversen Folgen

00:07:32.950 --> 00:07:37.050
auch schon darüber ausgetauscht, aber der größte ist sozusagen,

00:07:37.310 --> 00:07:43.210
dass es in einer Welt, in der es sehr leicht und einfach ist,

00:07:43.210 --> 00:07:44.930
das kommt wieder dieses Wort.

00:07:46.050 --> 00:07:50.690
Komponentenbasiert, sagen wir mal, Websoftware zu entwickeln oder Webseiten

00:07:50.690 --> 00:07:56.970
zu entwickeln, da ergibt das großen Sinn und kann auf jeden Fall die Dinge beschleunigen,

00:07:57.650 --> 00:08:02.110
weil letzten Endes alle Informationen zu einer, sagen wir mal,

00:08:02.170 --> 00:08:05.250
UI-Darstellung an einem Ort gebündelt werden.

00:08:05.730 --> 00:08:11.650
Man kann auch relativ schnell da Geschwindigkeit aufnehmen, weil so ein paar

00:08:11.650 --> 00:08:14.570
Sachen eben schon vorweggenommen worden sind.

00:08:14.670 --> 00:08:18.410
Also man kriegt diesen Baukasten letzten Endes an die Hand, Lego,

00:08:19.230 --> 00:08:24.210
aus dem man ziemlich schnell größere und schönere Dinge bauen kann.

00:08:24.690 --> 00:08:29.870
Und das macht aber meines Erachtens am meisten Sinn in einem komponentenbasierten Ansatz,

00:08:29.910 --> 00:08:37.890
wo man möglichst schnell und möglichst einfach auf HTML oder Template oder Komponentenebene

00:08:37.890 --> 00:08:42.350
diese Struktur dann wegkapseln kann und wiederverwenden kann.

00:08:43.088 --> 00:08:46.928
Genau. So, das wäre mein Versuch von Payment CSS.

00:08:48.328 --> 00:08:52.428
Ich finde es wunderschön, wie diplomatisch du das vorgetragen hast.

00:08:52.728 --> 00:08:56.428
Auch in meinem Verständnis macht es fast,

00:08:56.628 --> 00:09:02.708
bis auf ganz wenige Beispiele, ausschließlich Sinn in komponentenbasierten Frameworks,

00:09:02.888 --> 00:09:07.768
die ja auch gerade schon so aufgebaut sind, dass sie Single-File-Components

00:09:07.768 --> 00:09:09.348
haben, wo du das JavaScript,

00:09:09.548 --> 00:09:12.268
HTML und STYLE sowieso schon gebündelt hast.

00:09:12.268 --> 00:09:17.608
Und anstatt dann irgendwie das CSS noch drunten dran zu klatschen,

00:09:17.688 --> 00:09:21.268
ist es eben sozusagen gleich mit dem Markup drinnen.

00:09:22.348 --> 00:09:27.628
Ich denke, nur mit den aktuellsten Neuerungen, die vielleicht bei Tailwind 3,

00:09:27.748 --> 00:09:33.788
4, 3, 3 oder sowas reingekommen sind, könnte man überlegen, das auch in nicht-Komponenten-basierten,

00:09:33.888 --> 00:09:37.848
also sagen wir mal einfach eine HTML-Seite zu benutzen, weil ich denke,

00:09:37.908 --> 00:09:42.988
dass es jetzt auch sowas so Selektoren gibt wie nth-child für Listen und sowas,

00:09:42.988 --> 00:09:43.908
weil ich habe selber mal,

00:09:44.108 --> 00:09:47.108
ich habe ja auch selber noch normale Webseiten, so HTML und so,

00:09:47.168 --> 00:09:51.248
runtergetippt und da kommt man sich so ein bisschen komisch vor.

00:09:51.268 --> 00:09:56.048
Wenn man manuell zum Beispiel eine Unordered-List benutzt mit List-Items und

00:09:56.048 --> 00:09:59.628
an jedes List-Item irgendwie die gleiche CSS-Klasse dran klatscht.

00:09:59.728 --> 00:10:03.008
Das hat jetzt rein technisch oder performanzmäßig keinen Unterschied,

00:10:03.148 --> 00:10:05.928
weil ein Framework würde ja genau das auch rausputzeln, dass das vielleicht

00:10:05.928 --> 00:10:08.408
an jedem Li dran die Klasse ist.

00:10:08.588 --> 00:10:15.828
Aber das selber zu schreiben, fühlt sich halt Das widerspricht dem Don't-Repeat-Yourself-Ansatz.

00:10:16.408 --> 00:10:19.608
Auch du bei dem Don't-Repeat-Yourself, da bin ich schon drüber weg.

00:10:19.668 --> 00:10:23.808
Das gibt es in meiner Welt nicht mehr so. Ich bin jetzt eher so Hauptsache einfach. Aber.

00:10:25.021 --> 00:10:28.241
Das ist jetzt entgegen dieses Gedanken von, es soll dich ja auch schneller machen

00:10:28.241 --> 00:10:32.221
und dann ist es irgendwie langsamer, wenn du dich vielleicht nochmal umentscheidest,

00:10:32.221 --> 00:10:34.781
diese Klasse, du brauchst doch nicht irgendwie Margin Bottom 4,

00:10:34.941 --> 00:10:38.761
sondern du brauchst Margin Bottom 6 und wenn du das halt dann sechsmal anpassen musst,

00:10:38.941 --> 00:10:42.661
entweder du hast gute VS Code Skills, weißt, wie du das mehrfach markierst oder

00:10:42.661 --> 00:10:46.561
sowas, aber das spielt halt dem entgegen, dass du ja eigentlich auch von der

00:10:46.561 --> 00:10:48.821
Developer Experience schneller werden solltest.

00:10:48.821 --> 00:10:59.501
Ein ganz anderer Punkt ist ja, dass es das Ziel verfolgt, dass dein CSS niemals wächst, sozusagen.

00:11:00.341 --> 00:11:04.701
Also im Sinne von nicht unnötigerweise wächst.

00:11:04.881 --> 00:11:08.761
Sie haben ja da Ihren, bei den allerersten Versionen hat man ja noch,

00:11:08.821 --> 00:11:12.421
glaube ich, Perch CSS verwendet. Allerersten, ich meine, das war drei Jahre halt.

00:11:13.361 --> 00:11:18.521
Erklären wir das Prinzip, also wieso, also warum das dann nicht wächst dadurch?

00:11:19.161 --> 00:11:25.181
Es ist so, bei dem erst mal, wenn du dir das so vorstellst, ist ja die CSS-Datei

00:11:25.181 --> 00:11:26.981
von Tailwind, muss ja riesig sein,

00:11:27.721 --> 00:11:30.621
weil der ist ja Margin-Bottom 1, Margin-Bottom 2, Margin-Bottom 3,

00:11:30.741 --> 00:11:34.301
Margin-Left, Margin-Right, Margin-Top, Text-Color, Background-Color,

00:11:34.401 --> 00:11:37.681
Border-Color, Border, Hover-Color, Border-Focus-Color, da, da, da.

00:11:38.321 --> 00:11:43.781
Und Purge-CSS und auch die Tailwind-Config, ich will jetzt gar nicht so genau

00:11:43.781 --> 00:11:46.941
eingehen, weil das haben wir bestimmt in den Revisionen vorher viel tiefer gehen

00:11:46.941 --> 00:11:51.421
ihn beschrieben, haben die es teilweise schon versucht, klug vorher einzustellen.

00:11:51.501 --> 00:11:54.761
Da musste man wiederum sagen, nee, ich brauche hier schon auch einen Fokus-Style.

00:11:55.201 --> 00:11:59.661
Und Perl CSS hat dann durch dein ganzes HTML durchgeschaut, welche Klassen du

00:11:59.661 --> 00:12:03.921
denn verwendest und die nicht Verwendeten wieder aus dem CSS rauszuschmeißen,

00:12:03.921 --> 00:12:06.381
bevor du das quasi gebildet hast.

00:12:07.461 --> 00:12:10.581
Also der Ansatz, erst mal ist alles drin, dann wird es gecleant,

00:12:10.641 --> 00:12:13.961
dann wird es geshippt. Dann Tailwind 2?

00:12:14.381 --> 00:12:20.681
3? 3, glaube ich. Da hatten sie ihren JIT-Compiler .it und da haben sie das

00:12:20.681 --> 00:12:24.561
just in time gemacht und haben das selber gemacht zu sagen, wir nehmen just

00:12:24.561 --> 00:12:27.441
in time nur die Klassen rein, die du auch tatsächlich verwendest.

00:12:28.781 --> 00:12:32.981
Mit einem Post-CSS Implementierung, die sie da hatten.

00:12:33.261 --> 00:12:38.381
So, jetzt hast du halt dein CSS-Datei gebildet mit all den Klassen,

00:12:38.381 --> 00:12:43.281
die du verwendest und solange du jetzt in dem HTML, was du generierst,

00:12:43.321 --> 00:12:47.881
keine neuen CSS-Klassen verwendest, bleibt dir dein CSS stabil groß.

00:12:48.201 --> 00:12:51.321
Du kannst natürlich mehr HTML reinschreiben, du kannst natürlich,

00:12:51.381 --> 00:12:55.061
wenn du Margin Button 4 schon mal, Margin Button 4 schon verwendest,

00:12:55.141 --> 00:12:59.041
noch ganz viel weiteres HTML schreiben, alles mit Margin Button 4 und dein CSS

00:12:59.041 --> 00:13:01.321
bleibt gleich groß. Während es bei.

00:13:03.252 --> 00:13:08.972
Component-Based CSS oder eben das Pendant zu Utility-First. Zu BEM und Co., oder?

00:13:09.252 --> 00:13:14.112
Nee, BEM meine ich jetzt gar nicht, sondern einfach nur das ursprüngliche CSS.

00:13:14.192 --> 00:13:18.332
Ich weiß nicht, ob ich das jetzt auf das Komponenten-First oder Komponenten-Driven heißt.

00:13:18.492 --> 00:13:19.932
Ich glaube, so habe ich es mal genannt, aber ich weiß nicht,

00:13:19.972 --> 00:13:21.632
ob das noch aktuell wäre.

00:13:22.152 --> 00:13:26.872
Aber einfach dieses egal ob BEM oder sonst was, ich gehe in das CSS-Datei rein

00:13:26.872 --> 00:13:32.032
und ich schreibe einen Namen für mein Ding, Boxcard, sonst was.

00:13:33.012 --> 00:13:37.632
Container 1, 2, 3 und schreibe da das CSS rein. Und dieses CSS,

00:13:37.812 --> 00:13:40.852
wenn du jedes Mal wieder neue Klassen brauchst, wird ja tendenziell wachsen.

00:13:41.492 --> 00:13:45.572
Natürlich ist der Gedanke, dass ich diese Sachen wiederverwenden soll.

00:13:45.832 --> 00:13:49.472
Aber ich denke, wir haben alle schon in der Realität in CSS-Dateien gearbeitet

00:13:49.472 --> 00:13:52.572
und wissen, da kommt halt immer mehr Zeugs dazu.

00:13:53.332 --> 00:13:56.752
Das heißt, es kann halt da wachsen und wachsen, während Tailwind eher so sagt,

00:13:56.892 --> 00:13:59.892
hey, das Ziel wäre, dass eigentlich deine CSS-Datei gar nicht wächst.

00:13:59.892 --> 00:14:03.232
Sondern du hast halt genau eine Datei, musst vielleicht auch nicht unbedingt

00:14:03.232 --> 00:14:10.252
mehrere CSS-Dateien laden, wie es jetzt vielleicht wie bei diesen Scope-Style

00:14:10.252 --> 00:14:11.672
von Vue.js zum Beispiel wäre,

00:14:11.752 --> 00:14:14.432
wenn du das dann irgendwie lazy loadest, splittest und sonst was,

00:14:14.512 --> 00:14:17.952
hast du dir vielleicht 20 CSS-Dateien, die da rauspurzeln.

00:14:18.132 --> 00:14:21.672
Und bei Tailwind hättest du halt tatsächlich nur diese eine Datei,

00:14:22.472 --> 00:14:24.672
wenn du kein weiteres Custom-CSS schreibst.

00:14:27.232 --> 00:14:31.772
Also ich finde also das ist auf jeden Fall ein Aspekt ähm,

00:14:33.565 --> 00:14:36.965
Das kann man natürlich auch gegeneinander laufen lassen und benchmarken und

00:14:36.965 --> 00:14:41.605
gucken, wie viele Millisekunden das dann am Ende halt wirklich ausmacht.

00:14:41.765 --> 00:14:48.525
Ich glaube, der Maintenance-Faktor ist da, glaube ich, wichtiger als der Performance-Faktor.

00:14:48.545 --> 00:14:50.425
Oder ist jetzt so meine Mutmaßung auf jeden Fall.

00:14:50.525 --> 00:14:52.405
Also dieses, ah, jetzt kommt ein

00:14:52.405 --> 00:14:56.705
anderer Dev ein halbes Jahr später und implementiert das Gleiche nochmal,

00:14:56.945 --> 00:15:03.025
weil er oder sie irgendwie nicht weiß, wo in der Code-Biz jetzt irgendwie ein

00:15:03.025 --> 00:15:06.405
sehr ähnliches Design oder sowas zum Beispiel schon entwickelt wurde.

00:15:06.545 --> 00:15:10.585
So das habe ich in der Realität auf jeden Fall schon häufiger eben erlebt.

00:15:11.305 --> 00:15:16.665
Back in the old days, dann schreibst du ganz unten dran in dieses 10.000-Zeilen-Ding halt.

00:15:16.865 --> 00:15:21.065
Also heute hoffentlich nicht mehr so, aber gibt es bestimmt noch.

00:15:22.785 --> 00:15:26.125
Was ich noch ins Spiel bringen wollte ist, und das darf man nicht unterschätzen,

00:15:26.125 --> 00:15:33.905
ist, dass Tailwind den Zugang zu CSS vereinfacht.

00:15:34.065 --> 00:15:39.025
Also damit, das ist ja so eine These, aber ich stelle das mal so ein bisschen in den Raum,

00:15:39.805 --> 00:15:48.645
damit können auch Menschen CSS schreiben oder ein Design für ihre Webseite verwirklichen,

00:15:49.225 --> 00:15:55.345
ohne dass die sich mit der kompletten CSS-API auseinandergesetzt haben,

00:15:55.345 --> 00:15:58.845
sondern sie interagieren quasi nur noch mit der Tailwind-Doku,

00:15:59.705 --> 00:16:04.745
die ja eigentlich verklausuliert die CSS-Oberfläche ist, aber bekommen eben

00:16:04.745 --> 00:16:10.905
eine sehr viel schnellere, sagen wir mal, Handreichung, um da wirklich was zu gestalten.

00:16:11.065 --> 00:16:16.285
Das ist zumindest die Erfahrung, die ich gemacht habe, und das finde ich sehr, sehr spannend dabei.

00:16:16.585 --> 00:16:20.405
Also einfach dadurch, dass die so eine Vorauswahl für dich treffen und du nicht

00:16:20.405 --> 00:16:26.405
die ganze Zeit dann bei MDN irgendwie rumsurfen musst um die noch so Property

00:16:26.405 --> 00:16:27.705
halt irgendwie nachzugucken,

00:16:28.385 --> 00:16:32.845
sondern einfach klassisches Zeug halt in deinem HTML da ran und kommst da.

00:16:34.132 --> 00:16:39.192
Schnell zu Ergebnissen, auch ohne das komplett zu durchdringen.

00:16:40.372 --> 00:16:45.572
Manche Leute finden das auch blöd, aber ich finde es erstmal gut,

00:16:46.372 --> 00:16:48.492
so einen Zugang auch zu vereinfachen.

00:16:49.212 --> 00:16:54.152
Das ist so ein bisschen wie jQuery den Zugang zu JavaScript geebnet hat.

00:16:54.612 --> 00:17:00.892
Also, weil JavaScript an sich einfach, oder die ganze DOM-API, die im Browser war,

00:17:01.052 --> 00:17:08.672
damals zumindest, Zumindest einfach zu schmerzhaft war und man dann über jQuery

00:17:08.672 --> 00:17:12.012
so ein bisschen den Einstieg gefunden hat und Blut gelegt hat und dann irgendwann

00:17:12.012 --> 00:17:14.712
kann man sich dann auch lösen von jQuery,

00:17:14.832 --> 00:17:18.932
wenn man das so anfängt zu durchdringen.

00:17:19.932 --> 00:17:23.132
Ja, also das sehe ich auch so, also ich meine, das ist jetzt wirklich ewig her,

00:17:23.232 --> 00:17:27.152
aber das damals Revolutionäre an Jack Curry war eben genau das,

00:17:27.172 --> 00:17:31.972
dass es so den Zugang zu der eigentlichen Plattform so stark vereinfacht hat,

00:17:32.032 --> 00:17:36.952
dass das auch irgendwie Leute ohne einen Doktor halt irgendwie beherrschen können.

00:17:36.952 --> 00:17:42.572
Ich glaube, spezifisch damals, glaube ich, das Größte, was die eigentlich gemacht haben,

00:17:42.712 --> 00:17:45.692
war, glaube ich, gar nicht von denen selber, sondern die haben damals,

00:17:45.832 --> 00:17:53.292
oh, jetzt ganz alt, glatteis, ich glaube, Sizzle.js haben die damals eingebaut,

00:17:53.372 --> 00:17:56.792
implementiert, was dann so die Selector-Engine war,

00:17:57.052 --> 00:18:04.112
womit du dann dein DOM ergonomisch queryen konntest. ist.

00:18:04.492 --> 00:18:07.372
Ja, also es ist halt kein Query-Selector gab und so.

00:18:08.252 --> 00:18:11.352
Daher kam er erst dann hinterher, weil jQuery das vorgetragen hat.

00:18:11.352 --> 00:18:14.152
Ja, wirklich. Genau. Also ich glaube, damals gab es wirklich nur so...

00:18:15.191 --> 00:18:19.391
GetElement bei ID und bei ClassName und bei TechName oder sowas und dann musstest

00:18:19.391 --> 00:18:22.151
du eigentlich da relativ kompliziert.

00:18:23.391 --> 00:18:26.791
Rekursiv durch den Baum irgendwie wandeln, bis du dein richtiges Zeug gefunden

00:18:26.791 --> 00:18:33.531
hast und durch diese Vereinfachung konnten das plötzlich Millionen von Menschen.

00:18:33.791 --> 00:18:37.751
Und ich glaube, es ist nicht ganz das Gleiche, ich glaube nicht,

00:18:37.751 --> 00:18:42.391
dass Payment, also ich sage niemals nie, aber ich glaube nicht solche Adaptionsraten

00:18:42.391 --> 00:18:47.671
wie Jack Curry schaffen wird, aber Aber trotzdem, wir sind auf dem Weg.

00:18:49.451 --> 00:18:55.391
Ja, ich habe schon das Gefühl, dass es sehr erfolgreich ist und auch eine hohe Adoptionsrate hat.

00:18:55.811 --> 00:19:00.311
Ich weiß gar nicht, wie das jetzt bei dem State of irgendwas rauskam.

00:19:00.411 --> 00:19:02.671
Ich glaube, genau der letzte, da war das nicht drin.

00:19:04.591 --> 00:19:09.491
Genau, aber ich habe schon das Gefühl, dass das ganz gut einschlägt und immer

00:19:09.491 --> 00:19:11.751
noch auf Erfolgskurs ist. Ja.

00:19:40.751 --> 00:19:41.291
Klassenname XY, Margin-Button 8 Pixel. Aber du hast es ja schon gesagt, es hat halt,

00:19:42.955 --> 00:19:47.315
Es filtert so ein bisschen die Möglichkeiten raus, weil du hast halt dann nicht

00:19:47.315 --> 00:19:51.415
Margin-Button, machst du fünf Pixel, machst du ein REM und was ist überhaupt

00:19:51.415 --> 00:19:54.735
RAM und was ist EM und was sind Pixel und wie so sind das Prozente.

00:19:55.175 --> 00:19:59.415
Und du überlegst auch nicht unbedingt, diese Schritte sind auch vorgegeben.

00:19:59.475 --> 00:20:02.555
Zum Beispiel, das ist dann eben in acht Pixel-Schritten und dann weißt du,

00:20:02.635 --> 00:20:04.975
okay, du kümmerst dich gar nicht mehr so. Genau, so ein harmonisierter Rhythmus

00:20:04.975 --> 00:20:07.295
sozusagen, den du dann frei rausbekommst.

00:20:08.995 --> 00:20:13.375
Und jetzt wurde weiter gesagt, dass klar, als ich mal CSS gelernt habe,

00:20:13.535 --> 00:20:17.015
das war glaube ich gar nicht so, Klassenname, Styles fertig,

00:20:17.235 --> 00:20:20.755
sondern ich glaube, ich habe erstmal die ganze Spezifizität gelernt,

00:20:21.115 --> 00:20:24.835
die kann ich bis heute in meinem Kopf leider auswendig, ich versuche sie auch

00:20:24.835 --> 00:20:27.235
teilweise, ich will es gar nicht, sie hat sich reingebrannt,

00:20:27.355 --> 00:20:30.035
weil ich so lange ausländisch werden musste, was, welche,

00:20:30.655 --> 00:20:34.855
Nummer bekommt eine ID, was hat eine Klassenname und da da da und dann,

00:20:34.955 --> 00:20:37.075
ach Gott, Importen-Seiten.

00:20:37.255 --> 00:20:39.315
Aber zurück zum Thema.

00:20:40.015 --> 00:20:44.415
Da habe ich eben auch wirklich so die Sachen gelernt wie in der Liste und wie

00:20:44.415 --> 00:20:49.255
spreche ich das dritte Kind an oder jedes ungerade Kind und was ist ein,

00:20:50.115 --> 00:20:53.995
direktes Kind, was ist ein Kind, was ist ein Sibling, was ist ein Descendant,

00:20:54.115 --> 00:20:57.655
wie bekomme ich zum Parent, geht es überhaupt, was ist Not, was ist Has.

00:20:58.775 --> 00:21:01.235
Und das sind natürlich alles CSS-Features.

00:21:01.335 --> 00:21:05.435
Die gibt es übrigens in Tailwind alle auch, aber so habe ich quasi CSS gelernt

00:21:05.435 --> 00:21:07.715
und wenn ich jetzt erstmal ein Table und denke, ja, dann klatsche ich halt einen

00:21:07.715 --> 00:21:08.775
Margin-Button irgendwo dran.

00:21:08.955 --> 00:21:11.395
Ich kann ja auch in CSS irgendwo einfach einen Margin-Button,

00:21:11.455 --> 00:21:13.795
also eine CSS-Datei einfach dran klatschen.

00:21:14.315 --> 00:21:16.415
Aber vielleicht ist da einfach die Einstiegs-

00:21:17.271 --> 00:21:22.291
lernen, was man macht, einfach anders angesetzt. Das ist also schon tatsächlich ein guter Punkt.

00:21:22.551 --> 00:21:26.171
Ja, man wird halt mehr da durchgeführt. Dann kommt natürlich noch dazu,

00:21:26.291 --> 00:21:30.551
dass du mit Inline-Styles in dem Moment nicht mehr weiterkommst,

00:21:30.631 --> 00:21:35.951
wo du vielleicht irgendwie Media-Query verbauen willst oder States abbilden

00:21:35.951 --> 00:21:37.791
möchtest, wie Focus und Hover.

00:21:38.311 --> 00:21:42.671
Das geht ja dann alles gar nicht. Also da musst du dann früher oder später im

00:21:42.671 --> 00:21:45.711
Grunde auf ein externes Style-Sheet ausweichen.

00:21:45.711 --> 00:21:50.551
Und dann hast du natürlich auch das Problem, oder was heißt Problem,

00:21:50.691 --> 00:21:57.851
aber womit das einhergeht, ist, dass du eben nicht mehr in place alles machen kannst.

00:21:57.951 --> 00:22:01.151
Und du musst schon immer hin- und herspringen zwischen zwei Welten.

00:22:01.291 --> 00:22:07.171
So ein bisschen hat ja Adobe Brackets versucht, das mal aufzuheben vor langer Zeit.

00:22:07.251 --> 00:22:11.211
Also als es diese Adobe Edge Tools gab. die gab.

00:22:12.751 --> 00:22:17.771
Genau, das war ja auch so eine IDE, wo man in Place ein CSS editieren konnte,

00:22:17.911 --> 00:22:21.551
das immer noch in einer anderen Datei war, aber die haben es irgendwie geschafft,

00:22:21.751 --> 00:22:24.351
das so an der richtigen Stelle erscheinen zu lassen.

00:22:24.911 --> 00:22:28.451
Und das hat man halt mit Tailwind einfach frei Haus.

00:22:29.471 --> 00:22:33.211
Und man hat halt ein paar Regeln auch, mit denen das daherkommt,

00:22:33.271 --> 00:22:38.771
die verhindern, dass man eben irgendwie zu viel Mist baut und vielleicht auch

00:22:38.771 --> 00:22:43.051
mit so ein paar Sicherheitsnetzen, die da gezogen sind,

00:22:43.711 --> 00:22:47.691
die vielleicht irgendwelche Browser-Inkompatibilitäten oder so abfangen,

00:22:47.791 --> 00:22:50.891
von denen man aber nichts mitbekommt und auch nicht muss.

00:22:52.131 --> 00:22:57.511
Ja, also ich glaube, da hatten wir auch schon mal in der vorigen Folge gesprochen,

00:22:57.671 --> 00:22:59.811
also für mich ist es wirklich diese.

00:23:03.151 --> 00:23:08.671
Vorauswahl deiner Palette, deiner Scale, deiner Fonts und sowas,

00:23:08.691 --> 00:23:12.451
die in dem Framework halt trotzdem drin ist, die.

00:23:15.120 --> 00:23:18.800
Dir Entscheidungen abnimmt, also die dir Detailentscheidungen abnimmt,

00:23:18.940 --> 00:23:23.700
also du entstelle quasi, um eine unendliche Auswahl zu haben,

00:23:23.920 --> 00:23:25.620
wie groß mache ich das jetzt,

00:23:25.940 --> 00:23:30.480
nehme ich drei Pixel oder sieben Pixel Abstand oder was auch immer sowas,

00:23:30.480 --> 00:23:38.040
hast du dann eben eine sehr abgestufte Skala, die haben sich relativ genau überlegt, okay,

00:23:38.140 --> 00:23:40.620
von wann bis wann, es gibt ja auch Prinzipien für den ganzen Kram,

00:23:40.640 --> 00:23:45.140
es wird ja auch schon ewig gemacht oder sowas, Aber es ist eben sehr gut in

00:23:45.140 --> 00:23:50.180
den Defaults da reingegossen und damit kann man auf jeden Fall was bauen,

00:23:50.340 --> 00:23:55.980
was gescheit ausschaut, ohne sich super viel Gedanken zu machen.

00:23:56.140 --> 00:23:59.860
Nichtsdestotrotz, man muss natürlich die einzelnen Bausteine zusammensetzen

00:23:59.860 --> 00:24:02.800
und auch überprüfen, macht das alles Sinn so.

00:24:03.340 --> 00:24:09.340
Aber die Komplexität bei der Auswahl von diesen ganzen Designkriterien,

00:24:09.380 --> 00:24:11.500
die ist halt immens reduziert. zu.

00:24:11.600 --> 00:24:16.040
Und das, glaube ich, ist das, was es dann am Ende wirklich einfacher macht.

00:24:16.640 --> 00:24:22.140
Und dass die Doku halt wirklich fantastisch ist von denen. Das muss man eben auch sagen.

00:24:22.260 --> 00:24:29.260
Also die ganze Kommunikation darum, das ganze Learning, das ganze Onboarding, Playgrounds, etc.

00:24:29.840 --> 00:24:35.160
Irgendwo Templates sich zusammenklauben, um damit weiterzubasteln und sowas.

00:24:35.180 --> 00:24:41.160
Das geht halt damit total einfach, weil du kopierst dir halt einen HTML-Schnipsel

00:24:41.160 --> 00:24:43.920
und hast was, das aussieht.

00:24:43.980 --> 00:24:46.360
Und das vereinfacht Dinge.

00:24:47.100 --> 00:24:50.520
Ja, das spielt wahrscheinlich auch eine Rolle, dass in deren Team ja nicht nur

00:24:50.520 --> 00:24:54.060
der Adam Wathan ist und noch ein paar andere Entwickler, sondern auch Steve

00:24:54.060 --> 00:24:57.980
Shoger, der ja schon sehr stark ist als Designer.

00:24:58.300 --> 00:25:02.600
Also so die Sachen, die man so von ihm sieht, sind wirklich alle richtig gut.

00:25:04.020 --> 00:25:07.660
Genau, und die arbeiten ja letztlich so ein bisschen Hand in Hand, die zwei.

00:25:11.160 --> 00:25:17.440
Kann zu allem zustimmen. Bevor wir jetzt auch dann direkt mal zu Tailwind der

00:25:17.440 --> 00:25:20.600
Version 4 geht, schon mal der Disclaimer vorneweg.

00:25:21.200 --> 00:25:22.780
Die ist ja noch nicht draußen, also

00:25:22.780 --> 00:25:28.200
bitte jetzt nicht alle, wenn die Folge rauskommt, nicht V4 installieren.

00:25:28.260 --> 00:25:33.480
Man kann, die ist in Alpha released, aber darauf steigen wir später ein.

00:25:33.700 --> 00:25:36.640
Wir haben das letzte Mal gesprochen über die V3.

00:25:37.120 --> 00:25:43.500
Nach, wir sind jetzt bei der V3.4.4 Stand heute und ich habe jetzt nochmal kurz

00:25:43.500 --> 00:25:46.860
geschaut, was haben die, die haben ja auch so hübsche, schöne,

00:25:47.460 --> 00:25:50.240
Blogartikel dann für jede Version und nicht einfach nur so ein Changelog,

00:25:50.240 --> 00:25:52.780
der ist ja ein Blogartikel für jede Änderung.

00:25:53.524 --> 00:25:56.664
Und ich habe mich noch gefragt, ah witzig, jetzt muss ich mich tatsächlich mal

00:25:56.664 --> 00:26:01.124
darüber informieren, was kam denn da, weil ich es irgendwie nicht mitbekommen habe.

00:26:01.344 --> 00:26:04.664
Und ich denke, der Grund, warum ich es auch nicht so mitbekommen habe,

00:26:04.724 --> 00:26:08.004
war, dass tatsächlich sehr viele komplexe Sachen mitkamen,

00:26:08.124 --> 00:26:14.764
die ich weder das Gefühl hatte, mir gewünscht, dass ich das jemals gebraucht

00:26:14.764 --> 00:26:18.044
hätte, Noch wirklich war das so, dass ich dann gesagt habe,

00:26:18.424 --> 00:26:21.264
oh ja, stimmt, jetzt mache ich jetzt auch so, benutze ich jetzt auch so,

00:26:21.304 --> 00:26:23.884
weil ich denke, es ja viele nischige Sachen dann auch waren.

00:26:24.224 --> 00:26:27.544
Und bei vielen von diesen Punkten ist auch tatsächlich angemerkt,

00:26:27.544 --> 00:26:29.124
so nach dem Motto, should you do this?

00:26:30.244 --> 00:26:34.624
Wahrscheinlich nicht gerade oft, aber wenn du es brauchst, dann kannst du es

00:26:34.624 --> 00:26:35.704
halt jetzt so verwenden.

00:26:36.004 --> 00:26:40.544
Und so die eine Hälfte ist, ich fasse das jetzt einfach mal so grob zusammen,

00:26:40.784 --> 00:26:43.684
die eine Hälfte ist, die haben natürlich neue CSS-Features mit reingenommen.

00:26:43.684 --> 00:26:45.224
Klar, dann gibt es auch neue Versionen.

00:26:45.424 --> 00:26:48.044
Ich glaube, Has und Notwanderer, solche Sachen.

00:26:48.604 --> 00:26:56.244
Und sie haben TypeScript-Support ein bisschen erweitert und dann haben sie komplexere

00:26:56.244 --> 00:27:02.164
Schreibweisen auch mit hinzugebracht für die Arbitrary Values.

00:27:02.164 --> 00:27:09.444
Die Arbitrary-Values sind die, die dann noch stärker in die Richtung von Inline-CSS

00:27:09.444 --> 00:27:12.664
gehen, also alle, die das gar nicht mehr sehen können, jetzt bitte abschalten,

00:27:12.764 --> 00:27:17.244
dass du tatsächlich schreiben kannst sowas wie Top-112-Pixel.

00:27:17.404 --> 00:27:21.564
Das ist nichts, was du normalerweise in deine Tailwind-Config mit aufnehmen

00:27:21.564 --> 00:27:28.584
möchtest, diese 112-Pixel. Also bei genau diesem Element brauche ich halt einen Top von 112 Pixel.

00:27:29.104 --> 00:27:33.244
Und deswegen, ich lege es mir gar nicht in der Config an, dass es eine Klasse

00:27:33.244 --> 00:27:37.224
dabei so offiziell rauspurzeln würde, die ich auch wieder entfernen müsste,

00:27:37.284 --> 00:27:40.204
wenn ich sie nicht mehr verwenden will, sondern ich kann das mit den eckigen

00:27:40.204 --> 00:27:42.044
Klammern direkt in mein HTML schreiben,

00:27:42.304 --> 00:27:45.184
Top minus eckige Klammer, 112 Pixel eckige Klammer zu.

00:27:45.989 --> 00:27:50.289
Und dann ist diese CSS-Klasse sozusagen on the fly für mich entstanden.

00:27:50.489 --> 00:27:54.169
Das gab es auf jeden Fall schon seit drei und das haben sie,

00:27:54.189 --> 00:27:58.609
glaube ich, nochmal erweitert für Varianten wie AddSupports und auch wieder

00:27:58.609 --> 00:28:02.469
EnvChild, dass du auch das in ArbitraryValue schreiben kannst.

00:28:02.469 --> 00:28:05.389
Ich habe es halt nie gebraucht und ich kann mir jetzt vorstellen,

00:28:05.569 --> 00:28:08.229
wahrscheinlich brauchen es zehn Leute und sind jetzt mega happy darüber.

00:28:08.969 --> 00:28:14.649
Und dann ist es ja auch eine gute Sache. Natürlich, klar, ist das schwieriger

00:28:14.649 --> 00:28:19.869
zu lesen. Das werde ich jetzt gar nichts dagegen sagen. Das schaut erstmal echt strange aus.

00:28:20.089 --> 00:28:23.669
Diese ganzen eckigen Klammern und dann noch ein Add und dann noch ein Doppelpunkt

00:28:23.669 --> 00:28:29.329
in deiner HTML-Klassenliste drin. Und vor allem, du kannst jetzt kein Space da reinschreiben.

00:28:29.349 --> 00:28:31.609
Ein Space wäre ja sowas wie die Klasse ist beendet.

00:28:31.629 --> 00:28:34.849
Aber wenn du jetzt sowas brauchst wie einen Calculator, ich glaube,

00:28:34.909 --> 00:28:39.529
das habe ich recht oft verwendet, dann machst du halt statt dem Space einen Underscore.

00:28:39.529 --> 00:28:44.929
Dann hast du halt sowas wie Calculate, also C-A-L-C, Klammer auf,

00:28:45.369 --> 00:28:55.349
100%, Underscore, Minus, Underscore, 20 Pixel, ist gewöhnungsbedürftig.

00:28:55.389 --> 00:28:59.749
Ich würde jetzt mal so einen Raum werfen, wenn man das aber das allererste Mal

00:28:59.749 --> 00:29:04.409
vielleicht in der CSS-Datei sehen würde, so eine Calc-Funktion,

00:29:04.509 --> 00:29:07.309
schaut ein bisschen aus wie eine JavaScript-Funktion, ist vielleicht auch mal

00:29:07.309 --> 00:29:08.749
kurz gewöhnungsbedürftig.

00:29:10.389 --> 00:29:11.809
Und dann habe ich mich noch gefragt.

00:29:14.959 --> 00:29:18.579
Adam hat ja nie behauptet, dass alles in Tailwind geschrieben soll.

00:29:18.759 --> 00:29:22.159
Also was das Internet und sonst so draus macht, ist die eine Meinung.

00:29:22.539 --> 00:29:26.599
Aber er hat ja selber mal gesagt, es soll halt genau für diese Utility-Sachen da sein.

00:29:26.839 --> 00:29:30.619
Aber wenn du zum Beispiel eine Font an Body klatschen willst,

00:29:30.759 --> 00:29:35.219
dann geh halt in deine CSS-Datei, schreib da rein HTML von Family Dingsbums,

00:29:35.219 --> 00:29:37.099
fertig. Da brauchst du doch gar nicht mit Tailwind rumtun.

00:29:38.459 --> 00:29:44.399
Aber was sich auch für mich herauskristallisiert hat, ist, es wird nach Monaten,

00:29:44.419 --> 00:29:49.699
Jahren oder vielleicht auch nach Größe der Codebase tatsächlich irgendwann schwieriger,

00:29:49.719 --> 00:29:51.519
in Anführungsstrichen,

00:29:51.939 --> 00:29:56.099
normales HTML wiederzuschreiben, weil es sich irgendwie falsch anfühlt.

00:29:56.139 --> 00:30:00.399
Du hast so das, man fühlt sich so ein bisschen kriminell, da weißt du, darf ich das jetzt noch?

00:30:00.539 --> 00:30:02.679
Ist natürlich ein bisschen Quatsch, weil natürlich darfst du das.

00:30:03.759 --> 00:30:08.259
Hat aber eben dann schon auch die Nachteile, dass dein meistes CSS ist in deinem

00:30:08.259 --> 00:30:13.679
Markup. Aber diese eine Sonderregel, Linear Gradient, Animation oder sowas,

00:30:13.679 --> 00:30:15.819
ist dann aber wieder in deinem Styleblock.

00:30:15.999 --> 00:30:19.219
Und je weiter der entfernt ist, dann hast du fast einen noch größeren Cut,

00:30:19.339 --> 00:30:21.099
als wäre alles in der CSS-Datei.

00:30:21.099 --> 00:30:25.179
Und dann hast du so ein bisschen implizites Wissen, weißt du überhaupt, wo die zu finden ist.

00:30:25.179 --> 00:30:29.959
Und dann finde ich es doch eigentlich ganz nett, dass Tailwind anbietet,

00:30:30.159 --> 00:30:34.839
du kannst das jetzt auch, auch wenn es strange aussieht und vielleicht mal ein

00:30:34.839 --> 00:30:38.519
Breaking-Change gibt, wenn wir die Syntax ändern müssen, auch tatsächlich in

00:30:38.519 --> 00:30:40.019
die Klassenliste reinschreiben.

00:30:40.159 --> 00:30:43.659
Ich sage mal, das ist jetzt jedem selbst überlassen, ob man das jetzt in die

00:30:43.659 --> 00:30:48.959
CSS-Datei schreiben möchte oder in die Klasse, macht ein Linter,

00:30:49.119 --> 00:30:51.839
macht es automatisch und dann einfach dran halten. Ja.

00:30:53.740 --> 00:30:58.080
Ja, also bin ich ganz bei dir, ne? Also das muss man, also wieso sollte man

00:30:58.080 --> 00:31:04.100
Dinge nicht so dogmatisch halt irgendwie sehen und betrachten so und das Leben

00:31:04.100 --> 00:31:05.620
ist nicht schwarz-weiß so,

00:31:05.720 --> 00:31:11.620
aber was ich noch dazu ergänzen wollte, das ist jetzt nicht genau dieses Arbitrary Values Ding.

00:31:13.000 --> 00:31:19.840
Also genau, zum einen wenn du globales CSS selber schreibst und gleichzeitig Tailwind,

00:31:20.620 --> 00:31:25.060
in der Praxis kommt das schon irgendwann an Grenzen, klar mal eben irgendwo

00:31:25.060 --> 00:31:28.960
eine Font-Family reinhacken, so das ist nicht das Problem, aber.

00:31:29.620 --> 00:31:34.640
Ich sag mal so, das ist dann so über die Zeit vermehrt sich der Code in der

00:31:34.640 --> 00:31:40.260
globalen Datei dann doch immer auf magische Weise und irgendwann Irgendwann

00:31:40.260 --> 00:31:45.160
kommt dann auch die Laufzeit von deinem Projekt an oder von deinem Produkt oder sowas.

00:31:45.280 --> 00:31:52.520
Irgendwann kommt der Moment, wo du oder ein neues Teammitglied sich fragt,

00:31:52.540 --> 00:31:55.900
ah, wo muss ich denn jetzt nachgucken, um das zu ändern?

00:31:55.900 --> 00:31:58.980
Dann und du kannst diese Frage nicht mehr sofort beantworten.

00:31:59.600 --> 00:32:02.680
Weil es kann entweder da sein oder da,

00:32:02.860 --> 00:32:07.460
also sprich in deinem lokalen Markup oder in deinen globalen Fronts,

00:32:07.460 --> 00:32:13.240
in deinen globalen Styles und dann wird es natürlich ein bisschen doof.

00:32:13.380 --> 00:32:17.260
Also wie gesagt, man muss nicht immer 100% und alles machen,

00:32:17.340 --> 00:32:22.120
aber da kommt das, finde ich, her und das kann man dann auch beachten und halt überlegen.

00:32:22.640 --> 00:32:29.960
Was ich von den ganzen neuen, kleineren Features tatsächlich ganz interessant

00:32:29.960 --> 00:32:31.500
finde, da wollte ich nochmal eins erwähnen,

00:32:32.060 --> 00:32:39.500
das ist auch aus dieser Fraktion, should you do this probably not very often,

00:32:39.700 --> 00:32:44.480
aber diese Möglichkeit, dass du jetzt quasi auch, ich sag mal,

00:32:44.560 --> 00:32:50.980
komplexe Selektoren an einer CSS-Klasse oder CSS-Property voranstellen kannst,

00:32:51.280 --> 00:32:57.720
da fallen mir zumindest mindestens ein paar Use Cases ein, in denen das Sinn

00:32:57.720 --> 00:32:59.140
ergeben könnte, das zu machen.

00:32:59.420 --> 00:33:02.220
Also hier in den Release Notes gibt es auch so ein Beispiel.

00:33:02.940 --> 00:33:11.000
Warte mal. Over und Direct Descendant List Elf Child, Zweite, Diff, etc.

00:33:11.800 --> 00:33:15.320
Dann mach bitte Text Indigo 500. Sieht konstruiert aus.

00:33:16.880 --> 00:33:23.760
Aber welcher Selektor tatsächlich zumindest uns mal geholfen hätte,

00:33:24.640 --> 00:33:29.640
ist der Descendant Selector und zwar,

00:33:30.280 --> 00:33:34.580
für solche Fälle, nicht so sehr wie das Beispiel, was da jetzt in den Reload-Nodes

00:33:34.580 --> 00:33:38.800
von dem 3.1-Ding drin ist, sondern für solche Fälle, haben wir glaube ich auch

00:33:38.800 --> 00:33:41.420
mal drüber gesprochen, du bindest ein.

00:33:43.703 --> 00:33:49.163
Externe Komponente ein oder installierst dir irgendeinen Third-Party-Service

00:33:49.163 --> 00:33:55.483
und willst den stylen, kommst da aber nicht an dein Template oder HTML ran.

00:33:55.683 --> 00:34:01.663
Das heißt, du kannst dort nicht die Tailwind-Klassen im HTML reinbasteln.

00:34:01.903 --> 00:34:05.403
Da, für den Fall, kann es dann sinnvoll sein, zu sagen, okay,

00:34:05.443 --> 00:34:09.103
ich baue da einen Parent-Container drum und style.

00:34:10.223 --> 00:34:15.303
Klingt erstmal ein bisschen gruselig, aber wäre möglich. Style über diesen Descended

00:34:15.303 --> 00:34:22.083
Selector das Zeug, was da drin ist, ohne zu wissen, welche, oder also ohne das

00:34:22.083 --> 00:34:23.143
direkt daran zu schreiben.

00:34:23.383 --> 00:34:25.583
So, das könnte was sein. So.

00:34:26.883 --> 00:34:30.723
Ich sag's ja, es gibt bestimmt ein paar Leute, die finden das dann ganz super.

00:34:32.203 --> 00:34:37.083
Mein Lieblings, mein Lieblingsupdate kam in 3.2.

00:34:37.203 --> 00:34:41.103
Das ist auch tatsächlich eben Tailwind-spezifisch und jetzt nicht im Sinne von

00:34:41.103 --> 00:34:44.363
wir haben neue CSS, DSS-Features auch unterstützt.

00:34:44.383 --> 00:34:47.263
Und das waren Gruppennamen.

00:34:48.003 --> 00:34:51.963
Also, was ist eine Gruppe? Wir können ja einen Hover machen,

00:34:52.183 --> 00:34:54.403
aber manchmal wollen wir ja einen Gruppenhover.

00:34:54.503 --> 00:35:00.463
Das heißt, wenn ich eine ganze Karte hovere, möchte ich, dass die Headline 2

00:35:00.463 --> 00:35:04.503
in dieser Karte sich auf XY-Art und Weise verändert.

00:35:05.463 --> 00:35:09.263
Und es gab da schon, weiß nicht, relativ früh, wahrscheinlich irgendwann Version

00:35:09.263 --> 00:35:12.703
2, wenn nicht schon 1, eins, eine Group, dass ich sagen kann,

00:35:12.963 --> 00:35:16.363
das ist diese Container da, es ist eigentlich egal, ob es ein Container ist,

00:35:16.423 --> 00:35:19.143
aber dieses HTML-Element ist jetzt eine Gruppe,

00:35:20.063 --> 00:35:25.723
und dann kann ich drei Nestings tiefer im HTML schreiben, okay,

00:35:25.763 --> 00:35:28.243
Group Hover, das passiert jetzt.

00:35:28.683 --> 00:35:34.343
Und seit Tailwind 3.2 gibt es sozusagen Gruppennamen, dass ich die auch nochmal

00:35:34.343 --> 00:35:38.223
schachteln kann, dass ich, wenn ich das hovere und dann nochmal,

00:35:38.223 --> 00:35:42.703
mal, wenn ich noch mal tiefer noch mehr habere, dann habe ich eben da Gruppen.

00:35:42.883 --> 00:35:47.143
Das geht natürlich auch in die Richtung von die Syntax, das schaut erstmal komplizierter

00:35:47.143 --> 00:35:50.543
aus, wenn man das Problem aber hat, dann macht das alles sehr viel Sinn.

00:35:50.803 --> 00:35:54.823
Dann kann ich halt sagen, okay, du bist Gruppe außen, du bist Gruppe innen,

00:35:54.823 --> 00:35:58.043
wenn Gruppe außen gehabert wird, dann passiert das, aber wenn zusätzlich tatsächlich

00:35:58.043 --> 00:36:03.783
auch wirklich die Gruppe innen gehabert wird, dann passiert nochmal das dazu. Das war eins meiner.

00:36:06.263 --> 00:36:09.863
Lieblingsfeatures. Für andere weiß ich, dass ein Lieblingsfeature waren die

00:36:09.863 --> 00:36:16.103
Container-Queries, auch generell im CSS und die kamen da eben auch gleich mit reingeflutscht.

00:36:16.783 --> 00:36:19.323
Ja, das hätte ich uns auch noch erwähnt. Also das...

00:36:21.252 --> 00:36:25.252
Also das ist ja, also bei uns die Devs werden ja auf jeden Fall alle verrückt,

00:36:25.252 --> 00:36:30.372
dass es das jetzt gibt und freuen sich sehr darüber, dass es nun endlich möglich

00:36:30.372 --> 00:36:35.672
ist und also ich habe es quasi nicht mehr erleben dürfen zu aktiven Zeiten,

00:36:36.472 --> 00:36:44.452
aber wollte da noch mitgehen, genau, das war eben vorher als Plugin war das schon möglich,

00:36:44.692 --> 00:36:49.392
Container Queries, also als Tailwind Plugin und da haben sie es dann eben jetzt

00:36:49.392 --> 00:36:55.332
quasi in den Core von dem Framework mit eingebaut und das ist ja,

00:36:55.872 --> 00:36:59.112
also könnten wir eine ganze Folge drüber machen, aber das,

00:37:00.132 --> 00:37:02.472
ist ja quasi revolutionär und,

00:37:03.892 --> 00:37:08.132
ermöglicht ein komplett anderes Verständnis davon, wie man jetzt irgendwie Layout baut.

00:37:09.192 --> 00:37:15.192
Jetzt gibt es ja eine CSS-Klasse in Tailwind auch für, so ohne da jetzt mehr

00:37:15.192 --> 00:37:16.772
in Details zu gehen, aber es ist toll.

00:37:17.392 --> 00:37:18.892
Bei uns freuen sie sich sehr darüber.

00:37:20.412 --> 00:37:25.532
Darf ich kurz fragen, ob ihr Container-Curries auch benutzt, regelmäßig?

00:37:26.952 --> 00:37:34.752
Weil ich war beim CSS-Day und da war eine der Erkenntnisse oder der Gespräche,

00:37:34.772 --> 00:37:38.272
die drehten sich darum, dass jetzt, wo man Container-Curries hat,

00:37:38.972 --> 00:37:40.972
die Leute die trotzdem nicht benutzen.

00:37:42.412 --> 00:37:43.932
Und woran das liegen mag.

00:37:46.452 --> 00:37:48.532
Das ist eine super Frage. Ja.

00:37:50.464 --> 00:37:59.744
Ist einfach noch ungewohnt? Ich glaube, die These war, dass viele sich im Grunde

00:37:59.744 --> 00:38:04.984
zufriedengeben mit den Dingen, die Flex und Grid einem bieten.

00:38:05.804 --> 00:38:13.404
Ja, durch ihr implizites, angepasstes, wie nennt sich das? Da gibt es auch einen Begriff für.

00:38:14.344 --> 00:38:17.904
Also die passen sich ja im Grunde quasi dem verfügbaren Platz an,

00:38:17.964 --> 00:38:20.124
nach den Regeln, die du formulierst.

00:38:21.144 --> 00:38:24.864
Und Container Queries, den Joker musst du ja eigentlich nur ziehen,

00:38:25.144 --> 00:38:35.404
wenn du Dinge verändern möchtest, wie jetzt zum Beispiel irgendwie die Farbe oder so Dinge,

00:38:35.484 --> 00:38:40.984
die man nicht einfach so an Layouts oder Dimensionen koppeln kann.

00:38:42.044 --> 00:38:43.744
Und das wollen gar nicht so viele.

00:38:46.524 --> 00:38:50.524
Also ich kann da nur anekdotisch drauf antworten.

00:38:50.724 --> 00:38:55.364
Also ich kenne Teams von uns, da wird es benutzt, da gibt es auch gute Gründe dafür.

00:38:57.944 --> 00:39:02.824
Jetzt muss ich mir mal kurz eine These überlegen, warum man es nicht macht.

00:39:03.004 --> 00:39:04.444
Also ich glaube, ich würde sagen,

00:39:06.904 --> 00:39:13.924
ja, man kann mit Flex und Grid da schon relativ viel halt irgendwie abdecken.

00:39:14.364 --> 00:39:22.304
Aber das tiefergreifende Problem dahinter ist, glaube ich, also steile These,

00:39:22.544 --> 00:39:25.624
mal gucken, wann wir die Klammer wieder zumachen bekommen, ist,

00:39:25.724 --> 00:39:27.624
glaube ich, ein anderes, weil,

00:39:28.944 --> 00:39:33.004
um das, um Container-Query wirklich sinnvoll einsetzen zu können,

00:39:35.184 --> 00:39:41.144
jetzt mache ich hier Peter Reminiscenz-These, müssten Entwickler und Entwicklerinnen

00:39:41.144 --> 00:39:46.624
sich anstrengen, indem sie versuchen, ihre Designerinnen und Designer von einer

00:39:46.624 --> 00:39:48.064
anderen Arbeitsweise zu überzeugen.

00:39:49.304 --> 00:39:58.104
Also einem anderen Blick darauf, wie man Webseiten im Jahre 2024 gestaltet und wie man.

00:40:01.004 --> 00:40:05.524
Die Komponenten darin auseinander nimmt und was für Konzepte man hat darüber,

00:40:05.644 --> 00:40:10.184
wie fluide sich Inhalte auf einer Webseite jetzt anpassen.

00:40:10.344 --> 00:40:14.444
Also da würde ich sagen, das ist glaube ich eigentlich die größere Hürde.

00:40:16.604 --> 00:40:22.144
Weil technisch ist es glaube ich kein Problem. Aber vielleicht limitieren die

00:40:22.144 --> 00:40:27.324
Design-Werkzeuge dann auch so ein bisschen den Output. Man könnte sagen, wobei,

00:40:29.344 --> 00:40:32.104
andere Episode im.

00:40:34.724 --> 00:40:38.884
Figma-Universum ist ja auch sehr viel möglich heutzutage. Weiß allerdings nicht

00:40:38.884 --> 00:40:40.404
genau, wie man das verteilen kann.

00:40:42.732 --> 00:40:46.252
Genau. Aber wir haben auf jeden Fall Use Cases dafür.

00:40:46.552 --> 00:40:50.552
Also es war ja auch mit so, genau wie du das sagst, mit so Kachel-Layouts,

00:40:50.552 --> 00:40:55.132
die verändern dann nicht die Farbe, aber sagen wir mal den Umbruch oder irgendwelche

00:40:55.132 --> 00:41:00.852
Sachen werden dann in der Größe als Icones und in dem als Schrift und hier beides

00:41:00.852 --> 00:41:01.852
zusammen und so dargestellt,

00:41:01.952 --> 00:41:09.632
die man jetzt nicht nur über jetzt einfache Flexwrap-Verschiebungen jetzt irgendwie lösen könnte.

00:41:10.232 --> 00:41:17.072
Das wäre so mein erster Grund, der mir einfällt, warum man das vielleicht noch

00:41:17.072 --> 00:41:20.872
nicht so stark adaptiert ist in der Praxis, wie es jetzt eigentlich gehen würde

00:41:20.872 --> 00:41:23.852
oder was damit möglich ist. Da muss man ein bisschen auch,

00:41:25.992 --> 00:41:30.532
Explorer-Pioneermäßig auch mal verrückte Sachen machen und zeigen und in den

00:41:30.532 --> 00:41:35.872
Austausch in seinem Work-Kontext halt irgendwie gehen und sich im besten Fall

00:41:35.872 --> 00:41:38.892
halt gegenseitig da befruchten und inspirieren.

00:41:38.892 --> 00:41:42.372
Das, glaube ich, so kommt man da vorwärts.

00:41:43.832 --> 00:41:44.232
Ja.

00:41:46.692 --> 00:41:51.392
Ja, also genau so. Im Endeffekt muss das ja auch keiner nutzen.

00:41:51.572 --> 00:41:55.312
Das sind ja nur neue Werkzeuge. Man hat mehr Optionen.

00:41:55.552 --> 00:41:59.592
Aber man muss natürlich nicht sofort seine gesamte Arbeitsweise umstellen,

00:41:59.712 --> 00:42:02.532
nur weil es das jetzt gibt. So, hey, jetzt musst du aber überall das benutzen.

00:42:04.052 --> 00:42:07.732
Genau. Vielleicht braucht es auch einfach noch eine Weile, bis da irgendwie,

00:42:08.972 --> 00:42:17.752
die ganze Denk- und Tool-Pipeline auf Container-Querys auch so geeicht ist.

00:42:19.252 --> 00:42:23.692
Kann gut sein. Also ein letzter Satz von mir dazu. Ich kenne,

00:42:25.781 --> 00:42:28.521
Also das finde ich sehr, sehr witzig, sehr interessant, dass du das fragst,

00:42:28.521 --> 00:42:37.501
weil ich kenne Gespräche über eine ganze Dekade eigentlich, die sich darüber auslassen,

00:42:38.481 --> 00:42:43.701
oh, meine Designerin, mein Designer fordert jetzt was von mir und die kapieren

00:42:43.701 --> 00:42:47.041
nicht, dass das total kompliziert ist und dass das nicht geht.

00:42:47.261 --> 00:42:54.581
Also die Webplattform da noch nicht so weit ist, dass ich dir das jetzt einfach ermöglichen kann.

00:42:56.521 --> 00:43:00.721
Und jetzt ist es möglich und dann müssten ja eigentlich alle Jubelschreier irgendwie

00:43:00.721 --> 00:43:02.901
ausstoßen. Aber da bin ich sehr gespannt.

00:43:05.081 --> 00:43:08.581
Also bei uns benutzen sie es, aber ob es jetzt in jedem Projekt und in jeder

00:43:08.581 --> 00:43:13.821
Einzelheit, ich glaube, es muss die passende Anforderung geben und das passende

00:43:13.821 --> 00:43:18.841
Design-Team, dass es dann auch Sinn macht, die Technologie einzusetzen.

00:43:21.901 --> 00:43:25.761
Genau, und Tailwind unterstützt das auf jeden Fall auch. Das war jetzt allerdings,

00:43:26.061 --> 00:43:29.321
in welcher Version? 3.2, ne? Da hatten wir das schon.

00:43:30.241 --> 00:43:35.821
3.2. Was bei 3.3 kam,

00:43:36.121 --> 00:43:40.521
nämlich auch etwas ähnlich wie die Container-Querys, wo vorher schon ein Plugin

00:43:40.521 --> 00:43:47.761
war, aber jetzt auch In-House, First-Party, mit ausgeliefert werden, ist LineClamp.

00:43:47.961 --> 00:43:51.081
Das war so ein kleines Update für mich, an das ich mich auch persönlich erinnere,

00:43:51.081 --> 00:43:56.941
weil ich konnte eine Library entfernen aus meinem npm-Packages und Lineclamp direkt verwenden.

00:43:57.811 --> 00:44:03.751
Und ansonsten finde ich es einfach wirklich tatsächlich jetzt,

00:44:03.831 --> 00:44:08.771
wenn ich so genauer drüber nachdenke, extrem spannend, welche Änderungen da so passiert sind.

00:44:09.011 --> 00:44:11.871
Ich habe mir hier gerade noch mal eine Liste mit vier Punkten draufgeschrieben.

00:44:11.931 --> 00:44:12.891
Eins war jetzt Lineclamp.

00:44:13.851 --> 00:44:16.751
Eine andere Sache, die ist gar nicht so spannend, die macht nur Sinn,

00:44:16.871 --> 00:44:22.991
die passiert ist, ist, dass sie generell sehr viel mehr Werte hinzugefügt haben,

00:44:23.151 --> 00:44:29.011
zum Beispiel zu MinWidth, MaxWidth, Opacity oder, beschränken wir uns mal auf

00:44:29.011 --> 00:44:31.931
die, weil vorher, ich weiß jetzt nicht, was es da gab.

00:44:31.931 --> 00:44:37.711
Wahrscheinlich gab es Opacity 10, 20, 30, 50, 100.

00:44:38.431 --> 00:44:42.411
Und jetzt gibt es, glaube ich, auch wirklich Fünfer-Schritte, wie 35, 40, 45.

00:44:43.251 --> 00:44:48.571
Und das macht ja jetzt gerade mit so was wie dem Just-in-Time-Compiler total viel Sinn.

00:44:48.791 --> 00:44:52.071
Denn am Anfang von Tailwind war es ja schon noch ein Gedanke,

00:44:52.091 --> 00:44:55.631
wir halten jetzt generell trotzdem diese CSS-Datei so klein,

00:44:55.731 --> 00:44:58.311
wie sie vielleicht sein muss und perchen da noch was weg.

00:44:58.591 --> 00:45:01.831
Aber da jetzt ja sowieso nur alles in die CSS-Datei reinkommt,

00:45:01.931 --> 00:45:05.231
was überhaupt verwendet wird, gibt es ja jetzt auch gar nicht mehr so viel Grund,

00:45:05.391 --> 00:45:10.171
das generell zu limitieren, außer mit dem Gedanken, den wir ganz am Anfang schon

00:45:10.171 --> 00:45:13.331
mal geäußert haben, nicht allzu viele Möglichkeiten zu geben,

00:45:13.371 --> 00:45:14.571
dann hat man weniger zu entscheiden.

00:45:14.931 --> 00:45:17.511
Aber ich kann mir vorstellen, dass es irgendwie halt blöd ist,

00:45:17.571 --> 00:45:21.991
also umständlich ist, in die Tailwind-Config reingehen zu müssen und zu sagen,

00:45:22.091 --> 00:45:26.511
ja, ich brauche halt eine Opacity von 35%, da muss ich mir das immer erst anlegen.

00:45:26.751 --> 00:45:29.451
Und das macht man so selten, dass man vielleicht irgendwie vergisst,

00:45:29.451 --> 00:45:33.271
warum geht denn jetzt die 45 nicht, die 35 geht doch auch, dann dauert es wieder

00:45:33.271 --> 00:45:36.091
10 Minuten, bis man draufkommt, ach, ich muss die ja erstmal selber schreiben.

00:45:37.431 --> 00:45:41.911
Und bei denen, MinWolf, MaxWolf, Opacity, gibt es jetzt einfach sehr viel mehr Werte.

00:45:42.991 --> 00:45:46.271
Und so ein Feature haben sie hinzugefügt, was ich generell auch cool fand,

00:45:46.411 --> 00:45:48.591
für Gradients mit mehr Color Stubs.

00:45:49.471 --> 00:45:52.411
Ich schätze mal, das war davor auch sonst so ein Blocker, wo man vielleicht

00:45:52.411 --> 00:45:56.711
nochmal Custom CSS schreiben musste, dass du bei einem Gradient nicht nur angeben

00:45:56.711 --> 00:45:57.711
kannst, sondern du kannst es auch von...

00:45:58.792 --> 00:46:04.832
Dunkelblau to hellblau, sondern auch wirklich from dunkelblau über grün bei

00:46:04.832 --> 00:46:09.912
75% nochmal pink und dann wieder zu hellblau. Das kannst du jetzt auch einfach mit Klassen lösen.

00:46:12.392 --> 00:46:16.532
Moment, jetzt habe ich meine Betonung falsch gemacht. Thema aus, mehr Colourstuffs.

00:46:17.952 --> 00:46:24.592
Aber das, was ich jetzt gerade noch meinte, was ich interessant finde an Neuerungen, sind Colourwerte.

00:46:24.712 --> 00:46:28.652
Und das finde ich schon immer irgendwie so ein cooles Ding an Tailwind,

00:46:28.792 --> 00:46:32.492
Und vielleicht ist es genau dieses, was auch vom Steve Sjoga irgendwie damit

00:46:32.492 --> 00:46:34.012
reininfluenziert wird.

00:46:35.032 --> 00:46:41.172
Das hat ja nichts mit Utility CSS in dem Sinne zu tun, aber es gibt halt vorgefertigte

00:46:41.172 --> 00:46:48.332
Color-Werte und es gibt mittlerweile, hier steht alleine New Darker 950 Shades for Every Color.

00:46:48.332 --> 00:46:55.352
Es gibt einfach so viele vorgefertigte Farbwerte, die anscheinend auch echt

00:46:55.352 --> 00:46:56.632
gerne verwendet werden.

00:46:56.732 --> 00:46:59.692
Und natürlich könntest du dir eine Colourpalette selber anlegen,

00:46:59.732 --> 00:47:00.912
da hält dich ja nichts davon ab.

00:47:01.272 --> 00:47:05.272
Aber das scheint so ein Renner zu sein. Vor allem die ganzen Graus, glaube ich.

00:47:08.362 --> 00:47:13.362
Ich verwende es nicht, ich weiß es nicht. Ja, das Tailwind-Teal,

00:47:13.462 --> 00:47:16.902
klar, also gibt es dann, das sind ja schon,

00:47:19.162 --> 00:47:28.082
länger so Kniffe von so UI-Menschen, dass sie dem je nach Stimmung,

00:47:28.082 --> 00:47:31.322
die transportiert werden soll, dem Grau dann entweder,

00:47:32.842 --> 00:47:35.822
Mini-Blau oder Mini-Rot halt irgendwie beimischen.

00:47:36.562 --> 00:47:41.922
Und da hast du auf jeden Fall da auch eine coole Auswahl.

00:47:42.422 --> 00:47:45.842
Das machen die schon richtig gut, finde ich auch.

00:47:47.102 --> 00:47:51.582
Wolltet ihr noch zustimmen mit dem Line-Clamp-Ding?

00:47:53.562 --> 00:47:56.422
Das ist für mich genauso auch so ein Ding. War früher ein Plug-in,

00:47:56.602 --> 00:47:59.762
geht jetzt Browser Support ist jetzt gut.

00:48:00.262 --> 00:48:06.342
War früher auch ein Ding, ging nur total mies und umständlich über JavaScript

00:48:06.342 --> 00:48:11.322
zu implementieren und jetzt geht es halt per vonant, per CSS,

00:48:12.202 --> 00:48:15.282
ohne dass du mit einem One-Liner so, also das ist für mich wirklich so,

00:48:15.902 --> 00:48:23.242
okay, krass, wir leben in der Zukunft, für Menschen, die das jetzt neu als gegeben

00:48:23.242 --> 00:48:27.662
kennenlernen, für die ist das natürlich nicht so, aber ich finde das super.

00:48:29.182 --> 00:48:33.242
Was wir auch im Vorfeld mal kurz mehrfach angesprochen hatten,

00:48:33.322 --> 00:48:39.182
bevor wir diese Aufnahme offiziell starteten, war das Marketing von Tailwind.

00:48:39.782 --> 00:48:43.162
Und wir haben ja gerade zusätzlich, Milano hat es am Anfang noch erwähnt,

00:48:43.162 --> 00:48:46.442
warum vielleicht Tailwind den Einstieg auch leichter machen kann,

00:48:46.542 --> 00:48:48.222
ist ihre gute Dokumentation.

00:48:49.302 --> 00:48:55.382
Was mir durchaus schon auffällt, und das fällt mir bei jedem Framework auf,

00:48:55.462 --> 00:48:58.522
das ist nicht nur bei Tailwind, das fällt mir bei Vue.js, bei React und etc.

00:48:58.782 --> 00:49:02.002
Auf, dass wenn du in deren Dokumentationen,

00:49:03.231 --> 00:49:09.871
eine Browser-API oder CSS-Feature liest, dann fühlt sich das dann so an,

00:49:09.971 --> 00:49:11.711
als käme das halt durch Tailwind.

00:49:11.911 --> 00:49:15.251
Oder das ist ja genauso wie dieser Nuxt-Link. Ich meine, das ist auch nur ein

00:49:15.251 --> 00:49:17.091
Anchor vielleicht mit einem Link-Prefetch.

00:49:18.031 --> 00:49:21.251
Und wie oft habe ich hier, glaube ich, immer schon erwähnt, dass ich das auch

00:49:21.251 --> 00:49:25.251
und das so ein bisschen gefährlicher dran finde, wenn man das dann zu sehr mit

00:49:25.251 --> 00:49:26.351
dem Framework verbindet,

00:49:26.971 --> 00:49:31.191
ohne das Verständnis mehr dafür zu haben, dass es halt vielleicht auch einfach

00:49:31.191 --> 00:49:34.751
nur ein Wrapper ist, was die Browser-API ist.

00:49:36.551 --> 00:49:40.171
Und schon von der Ausdrucksweise her finde ich das total interessant.

00:49:41.751 --> 00:49:46.011
Wenn ich jetzt auf offizielle CSS-Dokumentationen gehe, dann ist das immer so

00:49:46.011 --> 00:49:50.371
ein bisschen trocken, so ein bisschen wie ein Duden geschrieben.

00:49:50.751 --> 00:49:55.411
So, das ist das. Und immerhin sind schon mal Demos dabei, dass ich, ah, darum geht's.

00:49:55.611 --> 00:50:00.731
Wenn ich jetzt durch diesen Blogartikel lese, hier wird zum Beispiel das Hyphens-Manual

00:50:00.731 --> 00:50:03.451
beworben. Das hat ja nicht Tailwind erfunden, das ist halt ein CSS-Feature.

00:50:04.231 --> 00:50:07.531
Aber das wird da einfach so cool beschrieben. Ach, wie toll das doch ist.

00:50:07.711 --> 00:50:10.771
Und da haben es auch die Deutschen reingeschraubt, weil sie schreiben,

00:50:10.971 --> 00:50:16.031
Officially recognized by the Duden, Dictionary is the longest word in German,

00:50:16.251 --> 00:50:18.511
Kraftfahrzeughaftpflichtversicherung.

00:50:19.391 --> 00:50:24.671
Steht da so schon drin. Und das wird dann schön mit einem Hyphen irgendwie getrennt

00:50:24.671 --> 00:50:28.371
und schaut halt dann toll aus. Ist kein Tablin-Feature, aber wie sie dieses

00:50:28.371 --> 00:50:31.471
Feature beschreiben, macht schon Bock drauf, das zu benutzen.

00:50:31.851 --> 00:50:41.451
Das Hyphen zwar ein Beispiel, ich glaube, ich habe dann bei 3.4 habe ich noch ein anderes gesehen.

00:50:43.531 --> 00:50:46.551
Ist nicht mehr so wichtig, aber trotzdem, das war einfach nur geschrieben.

00:50:46.551 --> 00:50:50.911
Ach, wisst ihr noch, wie wir da immer rumtun mussten mit, vielleicht war es

00:50:50.911 --> 00:50:52.271
auch Line-Clamp, wahrscheinlich war es das.

00:50:52.311 --> 00:50:55.411
Wisst ihr noch, wie wir da rumtun mussten mit diesem Line-Clamp und dann hier und da?

00:50:55.671 --> 00:51:01.431
Schaut mal, was es jetzt gibt. Line-Clamp 1, Line-Clamp 2, lasst uns das benutzen, ist doch super.

00:51:03.267 --> 00:51:14.027
Absolut. Also ich finde, die sind halt, also Marketing klingt ja aus Developersicht

00:51:14.027 --> 00:51:16.147
manchmal so ein bisschen wie ein fremdes Territorium,

00:51:16.227 --> 00:51:23.647
aber wenn man das aus einer zugewandten und positiven Perspektive sehen möchte,

00:51:23.847 --> 00:51:28.007
dann ist es ja ein Ausdruck davon, dass die ihre Zielgruppe kennen.

00:51:28.007 --> 00:51:34.927
Also das heißt, die wissen, für wen machen sie dieses Framework und welche Alltagsprobleme haben die.

00:51:35.067 --> 00:51:41.687
Und dann kannst du sowas eben machen wie Kraftfahrzeug, sonst was, Versicherung,

00:51:41.867 --> 00:51:51.327
weil das ist ein Use Case aus der Realität, den jeder Frontend-Developer in

00:51:51.327 --> 00:51:54.267
Deutschland wahrscheinlich schon mal erlebt hat, weil irgendein Layout kaputt

00:51:54.267 --> 00:51:56.067
gegangen ist, weil dann zu langes,

00:51:56.107 --> 00:51:59.347
nicht ungebrochenes Wort halt irgendwie drin steckt.

00:51:59.907 --> 00:52:03.387
Und dann ist hier so, hier ist das Problem, hier ist die Lösung.

00:52:03.607 --> 00:52:06.687
Jetzt geben wir auch noch ein schönes Beispiel dazu. Und das ist natürlich was,

00:52:06.807 --> 00:52:10.847
wovon sich andere Nachschlagewerke auch was abschneiden könnten.

00:52:11.487 --> 00:52:14.347
Aber die sind auch super geworden, so sind sie nicht. Aber die,

00:52:14.467 --> 00:52:20.647
jetzt bei Taven, sind nun besonders gut darin, das zu erklären.

00:52:20.787 --> 00:52:23.627
Wann ist das relevant für mich? Warum sollte ich das benutzen?

00:52:23.627 --> 00:52:26.247
Und guck mal, hier ist auch ein Beispiel, wie das toll aussieht.

00:52:26.327 --> 00:52:28.667
So, das finde ich, das kann man schon betonen.

00:52:29.387 --> 00:52:32.367
Aber ich gebe dir natürlich recht, es ist dann so ein bisschen so, wow,

00:52:32.547 --> 00:52:36.587
Tailwind hat all diese ganzen tollen neuen Sachen, aber das ist ja natürlich

00:52:36.587 --> 00:52:40.087
eigentlich nicht so, sondern die Browser-Vendor haben all diese tollen neuen

00:52:40.087 --> 00:52:44.667
Sachen implementiert und das hat Monate, Jahre gedauert, bis die sich da irgendwie

00:52:44.667 --> 00:52:46.127
standardisiert und geeinigt haben.

00:52:47.007 --> 00:52:50.707
Hooray, herzlichen Glückwunsch, richtig toll, dass ihr das gemacht habt und

00:52:50.707 --> 00:52:57.467
dass es dann zu so einem Punkt kommt, okay, jetzt wird es super accessible in Tailwind.

00:52:57.527 --> 00:53:01.747
Das ist vielleicht nochmal der Added Value, den die dann noch dazu bringen.

00:53:02.867 --> 00:53:09.847
Im Grunde verkaufen die das ja dann. Also die einen machen die harte Drecksarbeit

00:53:09.847 --> 00:53:14.867
und dann ist es fertig und dann kommen die von Tailwind und man kann das ja,

00:53:15.027 --> 00:53:19.927
also man kann das irgendwie als Kapern betrachten oder eben als,

00:53:20.167 --> 00:53:28.427
die erfüllen eben ihren Teil in diesem Gewerk eben, dass sie diese,

00:53:28.627 --> 00:53:33.807
dass eben einer großen, einer breiten Masse an Benutzern nahe bringen,

00:53:33.967 --> 00:53:35.747
dass es das eben gibt und sie das nutzen.

00:53:35.927 --> 00:53:42.787
Und am Ende kann es ja den Standardmachern wurscht sein, auf welchem Wege,

00:53:42.807 --> 00:53:46.827
also hinter wie vielen Fassaden versteckt das genutzt wird.

00:53:47.567 --> 00:53:51.007
Am Ende geht es ja wirklich darum, Probleme zu lösen.

00:53:52.357 --> 00:53:57.377
Und das ist ja hier der Fall. Das Beispiel, was ich hier gerade bei 3.4.

00:53:57.497 --> 00:54:00.417
Nochmal hatte, war Text-Rap-Balance.

00:54:00.657 --> 00:54:05.137
Ja, das ist ein geiles Feature. Also gerade im deutschen Umfeld oder bei längeren

00:54:05.137 --> 00:54:07.237
Texten ist Text-Rap-Balance einfach super.

00:54:07.937 --> 00:54:11.617
Und ich würde es jetzt gerne an dieser Stelle vorlesen, weil es liest sich auch so toll.

00:54:12.037 --> 00:54:17.857
How much time have you spent fiddling with MaxWiff or inserting responsive line breaks to try ...

00:54:18.857 --> 00:54:25.457
Hier ist die Lösung, Text-Rap-Balance. Sie schreiben es tatsächlich als TSS,

00:54:25.657 --> 00:54:28.057
also Text-Rep-Doppelpunkt-Balance.

00:54:28.277 --> 00:54:33.397
Fehlt nur so ein Strichpunkt dahinter. Und dann kommt das Beispiel mit dem HTML,

00:54:33.477 --> 00:54:35.617
mit der Klasse Text-Balance.

00:54:36.357 --> 00:54:39.897
Ich würde es jetzt tatsächlich ein bisschen positiver, also ich meine,

00:54:39.917 --> 00:54:40.637
ich finde es interessant,

00:54:40.957 --> 00:54:44.797
aber ich würde es eher nochmal positiver sehen und ich freue mich einfach schon,

00:54:44.857 --> 00:54:48.617
wenn solche CSS-Features dann vielleicht sogar eher an die Devs kommen,

00:54:48.617 --> 00:54:52.437
weil sonst haben die Browsers irgendwie auch nichts davor, wenn sie das geile

00:54:52.437 --> 00:54:53.617
Zeug da implementieren.

00:54:53.637 --> 00:54:55.917
Und dann weiß keiner davon und benutzt erst recht keiner.

00:54:57.597 --> 00:55:01.517
Shepto meint es hier gerade, das Wort kapern. Ich glaube, da gibt es andere

00:55:01.517 --> 00:55:06.817
Sachen, die man den Personen hinter Table vielleicht eher vorwerfen könnte,

00:55:06.997 --> 00:55:10.817
ist, dass ich denke, diese Idee mit diesem Just-in-Time-Compiler,

00:55:10.897 --> 00:55:12.417
Just-in-Time-Compiler,

00:55:13.944 --> 00:55:18.064
Kam vielleicht auch fast aus der Rindung von Richtung von Windy CSS.

00:55:18.464 --> 00:55:20.284
Ich glaube, die hatten sowas nämlich auch.

00:55:20.724 --> 00:55:24.564
Und da würde ich eher sagen, hätte man vielleicht mal anmerken sollen,

00:55:24.784 --> 00:55:28.644
wir wurden davon inspiriert oder sowas.

00:55:28.684 --> 00:55:31.544
Ob sie jetzt sagen, die müssen für mich nicht sagen, wir wurden von der Browser

00:55:31.544 --> 00:55:34.664
API oder CSS Features inspiriert.

00:55:35.304 --> 00:55:38.784
Aber das ist ja schon was, was jetzt ausschließlich was mit so Utility-Based

00:55:38.784 --> 00:55:41.144
CSS-Frameworks zu tun hatten.

00:55:41.504 --> 00:55:43.984
Und das hätte man durchaus mal erwähnen können.

00:55:45.324 --> 00:55:49.204
Das erinnere ich mich schon, dass zum Beispiel Evan Yu macht das schon auch

00:55:49.204 --> 00:55:53.164
immer so alles, was er sich irgendwie abguckt von den React-Hooks oder von Svelte.

00:55:53.284 --> 00:55:56.604
Da macht er immer seinen Post zu, boah, das war ja eine geile Idee von denen.

00:55:56.644 --> 00:55:57.904
Das habe ich sofort nachgebaut.

00:55:58.324 --> 00:56:00.344
Das finde ich jetzt irgendwie sympathisch.

00:56:02.084 --> 00:56:09.684
Ja, das ist natürlich schon schön, wenn man es macht Also Was ich noch ergänzen

00:56:09.684 --> 00:56:13.484
wollte, ist so wenn man jetzt sagt, okay, die anderen.

00:56:16.444 --> 00:56:21.484
Sagen wir mal Dokumentationen kommen dann eher vielleicht wie ein Nachschlagewerk

00:56:21.484 --> 00:56:23.384
oder ein Duden oder sowas daher,

00:56:24.804 --> 00:56:28.104
dann sollte man natürlich auch nicht vergessen, dass das eine andere Aufgabe

00:56:28.104 --> 00:56:33.124
hat, das ist halt dann so Also, dass halt die Referenz, um dann irgendwie die

00:56:33.124 --> 00:56:34.704
API halt irgendwie nachzugucken,

00:56:36.464 --> 00:56:47.064
würden die davon profitieren, wenn da schönere, mehr am Anwendungsfall orientierte Beispiele drin wären?

00:56:47.524 --> 00:56:50.404
Wahrscheinlich ja, also das darf man nicht vergessen.

00:56:50.904 --> 00:56:54.364
Aber gleichzeitig ist natürlich das auch da, okay, bei Tailwind,

00:56:54.504 --> 00:57:01.224
die verkaufen dir halt eine Lösung, dass du möglichst schnell für ein in der

00:57:01.224 --> 00:57:05.004
Welt existierendes Problem Copy-Paste machen kannst, also,

00:57:06.224 --> 00:57:09.484
literally so da an der Stelle und wenn du jetzt ähm,

00:57:10.983 --> 00:57:16.023
zu MDN gehst, dann ist der Auftrag ja auch noch dabei, dass du auch noch was lernst.

00:57:16.163 --> 00:57:19.663
Also, dass du eigentlich auch, also jetzt kommen wir wieder zu den anderen Farben,

00:57:19.703 --> 00:57:24.563
dass du eigentlich lernst, wie CSS funktioniert und wie man CSS schreibt.

00:57:25.563 --> 00:57:28.723
Tailwind hat ja gar kein Interesse daran, dass du lernst, CSS zu schreiben.

00:57:28.963 --> 00:57:31.623
Die wollen ja, dass du Tailwind schreibst. Also, nur so als,

00:57:33.783 --> 00:57:36.903
vielleicht einfach unterschiedliche Ausrichtungen dabei. Und das ist auch okay.

00:57:37.123 --> 00:57:43.563
Also, aber ich gebe natürlich recht, dass es manchmal so ein bisschen ist denn so klingt, als ob sie die.

00:57:45.763 --> 00:57:50.283
Super-Innovatoren jetzt auf dem ganzen CSS ab, die dazugekommen sind, wären.

00:57:50.463 --> 00:57:53.743
Aber ich finde es wohl, richtig unterstellen muss man denen das auch nicht.

00:57:53.783 --> 00:57:54.943
Die feiern das halt einfach ab.

00:57:55.183 --> 00:57:58.323
Die sind auch begeistert von ihrer Arbeit, das finde ich auch toll.

00:57:59.403 --> 00:58:06.163
Und insofern kann man sich doch darüber freuen, was alles möglich ist mit CSS heutzutage.

00:58:06.543 --> 00:58:11.023
Und dass es dann halt auch in so ein Framework reinkommt, umso besser.

00:58:13.683 --> 00:58:19.063
Ein weiteres Beispiel aus dieser Reihe, cool, dass es vielleicht doch dort erwähnt wird,

00:58:19.943 --> 00:58:25.483
ist der Selektor, nicht Selektor, Entschuldigung, die Variante,

00:58:26.183 --> 00:58:29.943
ich weiß gar nicht, ob es auf Deutsch so heißt, Forced Colors.

00:58:31.220 --> 00:58:33.940
Bin ich auch schon hin und wieder immer wieder drüber gestolpert.

00:58:34.000 --> 00:58:37.180
Ich weiß nicht, ob das einfach nur der Windows High Contrast Mode ist oder was

00:58:37.180 --> 00:58:38.460
das genau alles beinhaltet.

00:58:39.440 --> 00:58:42.380
Aber ich habe es hin und wieder verwendet, dass wenn die User irgendwie eine

00:58:42.380 --> 00:58:45.900
Einstellung haben für Force Colors, dass das dann irgendwie anders gesetzt wird.

00:58:47.540 --> 00:58:52.600
Mein Beispiel ist ja, glaube ich, immer der Box Shadow. Der Box Shadow wird

00:58:52.600 --> 00:58:56.380
eben zumindest beim Windows High Contrast Modus, den kann man da so bei den

00:58:56.380 --> 00:58:57.760
Systemeinstellungen einstellen,

00:58:58.500 --> 00:59:02.480
dieser Modus ignoriert Box Shadows, Weil es das so interpretiert wie,

00:59:02.560 --> 00:59:06.620
ist wahrscheinlich eh nur Deko und so ein Box-Shadow mit Kontrast herzustellen,

00:59:06.620 --> 00:59:10.000
ist irgendwie, wenn das jetzt so ein 10-Pixel-Box-Shadow ist,

00:59:10.080 --> 00:59:12.560
dann hast du halt so ein 10-Pixel-Balken, das ist jetzt nicht so geil.

00:59:12.880 --> 00:59:16.860
Also wird er komplett ignoriert. und wenn man jetzt allerdings Buttons macht

00:59:16.860 --> 00:59:20.040
und dann sagt, ich möchte Border None haben,

00:59:20.780 --> 00:59:25.300
weil eine Border macht halt ein Pixel dran und wenn ich dann Border nur bei

00:59:25.300 --> 00:59:28.880
Hover oder sonst was habe, dann habe ich vielleicht da Textsprünge oder ich

00:59:28.880 --> 00:59:31.960
habe das, dann ist mein Button plötzlich nicht mehr 32 Pixel hoch,

00:59:32.180 --> 00:59:36.540
sondern 34 Pixel hoch oder müsste ich vielleicht meine Leinheit verstellen oder

00:59:36.540 --> 00:59:39.500
ich mache irgendwie negative Margins, das ist ja alles kompliziert,

00:59:39.560 --> 00:59:42.920
also mache ich einfach Border None und stattdessen ein Box Shadow,

00:59:43.000 --> 00:59:46.360
weil ein Box Shadow nicht die Höhe und Breite verändert.

00:59:47.460 --> 00:59:51.900
Allerdings setze ich jetzt nicht Force Colors hinzu, im ganz Standard CSS,

00:59:52.300 --> 00:59:56.900
dann werde ich im Windows High Contrast Mode bei dem Button im schlimmsten Fall

00:59:56.900 --> 00:59:59.820
wirklich nur noch den Text sehen, bei so einem Ghost Button zum Beispiel,

00:59:59.960 --> 01:00:02.960
der nur einen Rand hat, aber keine Background Color.

01:00:04.240 --> 01:00:09.200
Oder bei einem Input Text fällt das ja auch generell keine Background Color, hat so nur eine Border.

01:00:09.500 --> 01:00:13.800
Und dann ist es ein bisschen schwer, das als Input-Feld noch zu erkennen.

01:00:13.960 --> 01:00:17.660
Also kann ich dann sagen, okay, aber Force-Colors, dann macht dann der Border

01:00:17.660 --> 01:00:21.180
bitte dran. Das passt dann schon auch mit der Breite und Höhe.

01:00:21.900 --> 01:00:29.540
Und diese Variante haben sie in 3, 4 auch hinzugefügt.

01:00:29.580 --> 01:00:32.440
Und dann stolpert man vielleicht darüber einfach, wenn man den Blog-Artikel

01:00:32.440 --> 01:00:35.280
liest und hat was Neues über CSS gelernt. Ist ja ganz nett.

01:00:38.683 --> 01:00:46.503
Und mit der Version 3.4 wurde, glaube ich, aber auch erstmals untenrum einiges geändert, richtig?

01:00:51.463 --> 01:00:55.123
Untenrum? Spielst du da was Besonderes an?

01:00:56.663 --> 01:01:01.323
Ich spiele auf diese Oxide, heißt die Oxide?

01:01:01.423 --> 01:01:07.083
Ich glaube, Oxide Engine an. Ich glaube, die spielt ja auch eine große Rolle

01:01:07.083 --> 01:01:11.683
im Release 4, aber in der 3.4 ist die ja auch schon gekommen.

01:01:11.943 --> 01:01:23.403
Also ich glaube, dass die sich von Post-CSS abgewendet haben und Lightning-CSS zugewendet.

01:01:23.403 --> 01:01:29.623
Und das ist quasi ein Bestandteil von diesem Oxide, von der Oxide-Engine.

01:01:29.783 --> 01:01:33.003
Ich glaube, ein anderer Bestandteil ist, glaube ich, ein in Rust geschriebener,

01:01:34.523 --> 01:01:37.503
Parser, glaube ich, wenn ich das richtig verstanden habe.

01:01:39.183 --> 01:01:43.423
Also. Alle, die sich gerade denken, was, stopp, was ist jetzt passiert?

01:01:43.583 --> 01:01:48.343
Das wird der zweite Teil der Folge. Genau, so falsch.

01:01:49.483 --> 01:01:54.063
Ausführlich. Aber du hast alle schon richtig aufgezählt. Ich weiß tatsächlich

01:01:54.063 --> 01:01:55.483
auch nicht, wie man das ausspricht.

01:01:55.563 --> 01:01:59.883
Oxide, Oxide, ein cooler Name, ist eine neue Engine.

01:02:01.483 --> 01:02:04.303
Milan kann bestimmt gleich sagen, wie er das verstanden hat.

01:02:04.383 --> 01:02:09.223
Ich habe das so verstanden, weil das ja auch generell nur under the hood so

01:02:09.223 --> 01:02:13.263
geplant war, hätte das ja keinen Breaking Change ergeben jetzt generell erst

01:02:13.263 --> 01:02:16.563
mal und hätte in die 3.4 oder dann in die 3.5 reingehört.

01:02:17.163 --> 01:02:21.083
Aber dann dachten sie sich, aber das grundlegende Konzept wird für sie so anders,

01:02:21.103 --> 01:02:23.123
dass sie vielleicht doch eine 4 draus machen.

01:02:23.823 --> 01:02:31.183
Und ich weiß nicht, ob jetzt diese Oxide-Engine jetzt in 3.4 schon drin ist

01:02:31.183 --> 01:02:33.643
oder ob sie sie doch nicht rein haben. Mhm.

01:02:35.200 --> 01:02:37.500
Ja, weiß ich eigentlich auch nicht. Also ich glaube, was es da gab,

01:02:38.540 --> 01:02:44.140
das ist aber jetzt mehr so Spekulation als irgendwie was jetzt Belastbares.

01:02:45.180 --> 01:02:52.940
Die Leute lesen halt den Gitlog von Tailwind und da gab es irgendwelche Commits

01:02:52.940 --> 01:02:57.600
zu, ich glaube Oxid, würde ich ausrechnen, aber I don't know,

01:02:58.860 --> 01:03:00.700
bevor das irgendwie announced wurde.

01:03:02.280 --> 01:03:06.740
Und was genau sie davon jetzt in 3.4 jetzt schon untergebracht haben,

01:03:06.840 --> 01:03:08.880
weiß ich ehrlich gesagt nicht.

01:03:09.240 --> 01:03:14.680
Also wenn dann wirklich so, dass es keine direkten Auswirkungen auf die.

01:03:16.960 --> 01:03:20.680
Anwender sozusagen hat da an der Stelle. Aber vielleicht, Chip,

01:03:20.700 --> 01:03:24.980
hast du da noch was anderes gefunden, was wir übersehen haben?

01:03:25.680 --> 01:03:28.580
Genau, ich hab das im Vorfeld, hab ich mich da natürlich ein bisschen schlau

01:03:28.580 --> 01:03:31.720
gelesen, damit ich nicht wie der komplette Depp hier stehe, aber vielleicht

01:03:31.720 --> 01:03:34.920
stehe ich Ich hatte jetzt darum, als der kommende Dev das könnte sein.

01:03:36.440 --> 01:03:41.460
Genau, und da habe ich gesehen, dass sie das wohl schon, also jetzt schon mit

01:03:41.460 --> 01:03:43.100
der 3.4 eingeführt haben.

01:03:43.560 --> 01:03:49.940
Und so wie das, das ist ja so ein allgemeiner Trend in den ganzen Toolchains,

01:03:50.000 --> 01:03:54.160
dass man eben sich von JavaScript hin zu,

01:03:55.060 --> 01:04:00.460
also entweder Go, glaube ich, bewegt, aber so die Tendenz Rust sich zu bewegen,

01:04:00.460 --> 01:04:03.300
ist ja irgendwie noch etwas ausgeprägter mittlerweile, würde ich sagen.

01:04:05.100 --> 01:04:09.300
Genau, mit dem Mehrwert, dass Bildzeiten

01:04:09.300 --> 01:04:16.320
oder Verarbeitungszeiten deutlich sinken, weil Rust eben einfach.

01:04:18.780 --> 01:04:23.260
Deutlich schneller ist als JavaScript in der Regel.

01:04:23.360 --> 01:04:29.920
Genau, also der Marvin Hagemeister, der belehrt uns ja da regelmäßig eines Besseren

01:04:29.920 --> 01:04:34.140
und Und es scheint ja auch viel daran zu liegen, wie das JavaScript geschrieben wird.

01:04:34.300 --> 01:04:40.340
Aber ich sag mal so, im Alltag sind die Rust-Tools ja schon schneller.

01:04:42.100 --> 01:04:47.680
Genau, und dieses Lightning-CSS, das ist ja ein Bestandteil von Parcel.

01:04:48.280 --> 01:04:53.880
Also von diesem Zero-Config-Bundler, kann man sagen,

01:04:54.060 --> 01:04:58.520
den man ja quasi einfach nur, glaube ich, sein HTML als Entry-Point hinwirft

01:04:58.520 --> 01:05:05.580
und dann arbeitet er sich da durch und weiß dann die richtigen Register zu ziehen,

01:05:05.700 --> 01:05:10.560
um die verschiedenen Ressourcentypen zu bundeln. Und...

01:05:12.424 --> 01:05:16.804
Im Grunde arbeitet das wie Post-CSS. Die nutzen einen CSS-Parser,

01:05:16.844 --> 01:05:23.764
der auch in Rust geschrieben ist und in Firefox und in Servo benutzt wird, wohl vom Mozilla-Team.

01:05:24.604 --> 01:05:28.704
Insofern auch immer sozusagen auf dem aktuellsten Stand ist.

01:05:29.904 --> 01:05:34.524
Und ich glaube, so der Nachteil, ein Nachteil entsteht in dem Moment,

01:05:35.424 --> 01:05:40.884
wo man eben dieses Lightning-CSS oder Oxide um seine eigenen Plugins erweitern will.

01:05:41.564 --> 01:05:45.944
Dann, also das kann man dann in JavaScript tun, aber weil das ja eigentlich

01:05:45.944 --> 01:05:47.104
eine Rust-Umgebung ist,

01:05:47.844 --> 01:05:55.784
werden diese Plugins auch JS-Visitors genannt, also sozusagen Besucher aus einer

01:05:55.784 --> 01:06:01.884
anderen Welt, die dann da mit Rust interagieren und wo man eben.

01:06:04.164 --> 01:06:12.684
Definiert, also wenn du Parser auf bestimmte Tokens triffst im CSS,

01:06:12.924 --> 01:06:17.624
dann bitte befrag dieses JavaScript und dadurch wird es dann in dem Moment wieder langsamer.

01:06:18.204 --> 01:06:21.764
Das heißt, wenn man da zu viele von denen hat,

01:06:21.904 --> 01:06:28.084
dann frisst das so ein bisschen den Performance-Vorteil von Rust auf,

01:06:28.184 --> 01:06:34.104
weil dann eben doch wieder das in Anführungszeichen langsamere JavaScript zwischendurch

01:06:34.104 --> 01:06:37.404
konsultiert werden muss und dann geht es erst weiter.

01:06:39.264 --> 01:06:43.284
Genau so habe ich das jetzt rausinterpretiert.

01:06:45.264 --> 01:06:52.264
Und vielleicht ist das auch klug, das auch schon einen Ticken vorher auszurollen

01:06:52.264 --> 01:06:55.144
und nicht alles in einem großen Release zu machen vielleicht,

01:06:55.424 --> 01:06:58.384
weil man dann einfach schon ein bisschen Erfahrung sammelt.

01:06:59.964 --> 01:07:06.864
Also ich habe jetzt kurz durch die ganzen Changelogs von 3.4.4 bis 3.3.3,

01:07:07.144 --> 01:07:10.864
das war jetzt zufällig gelesen, da sehe ich zumindest nichts,

01:07:10.944 --> 01:07:12.084
dass eben Changelogs...

01:07:13.919 --> 01:07:19.059
Jetzt bin ich bei 3.3.2 und da steht tatsächlich was mit Tailwind CSS Oxide.

01:07:20.339 --> 01:07:24.379
Eine Änderung. Bin mir aber hier noch nicht sicher, ob das jetzt schon quasi

01:07:24.379 --> 01:07:27.559
drin ist oder ob sie es nur selber verwenden und ob sie es dann wieder raushaben.

01:07:28.679 --> 01:07:32.319
Ich glaube, für uns macht es wenig Unterschied. Vielleicht ist schon ein Pflitzelchen drinnen.

01:07:33.239 --> 01:07:37.639
Aber der große Rollout soll dann mit Version 4 kommen.

01:07:39.899 --> 01:07:43.739
Und das hätte ich jetzt auch bei Version 2 und Version 3 vielleicht noch nicht so mitbekommen.

01:07:43.919 --> 01:07:46.999
Aber vielleicht ist es auch was Neues. Diese Version 4 scheint jetzt auch so

01:07:46.999 --> 01:07:51.859
wirklich so ein bisschen Open-Source-mäßig sehr publik gemacht zu werden,

01:07:51.959 --> 01:07:53.439
dieses Arbeiten da dran.

01:07:53.499 --> 01:07:57.999
Ansonsten hatte ich eher das Gefühl, es gibt natürlich irgendwelche Threads

01:07:57.999 --> 01:08:01.699
und Issues, wo Sachen besprochen werden, aber dann kommt eben die neue Version

01:08:01.699 --> 01:08:03.319
raus und dann kann sie jeder benutzen.

01:08:03.559 --> 01:08:06.999
Und da scheint mir jetzt hier einfach auch wieder marketingtechnisch einfach

01:08:06.999 --> 01:08:11.819
ein größerer Blick drauf zu sein, während es noch wirklich im Alpha-Alpha-VIP-State ist.

01:08:13.139 --> 01:08:18.099
Also ich gebe dir völlig recht, Vanessa. Also meine Interpretation ist jetzt

01:08:18.099 --> 01:08:20.559
so, das gibt es schon länger,

01:08:20.699 --> 01:08:29.139
es gibt auch schon länger diese Oxid-Pläne und von 3.3 auf 3.4 haben sie wohl

01:08:29.139 --> 01:08:33.079
Teile davon auch schon angekündigt.

01:08:33.079 --> 01:08:36.399
Jetzt nicht in den Release Notes, ist auf Post irgendwie wo,

01:08:36.459 --> 01:08:40.599
aber bei dieser berühmten, jetzt kommt's, Tailwind Connect Conference,

01:08:40.879 --> 01:08:42.999
die stattgefunden hat anscheinend.

01:08:44.199 --> 01:08:48.059
Und da haben sie auf jeden Fall schon mal so ein Preview-Announcement dazu gemacht

01:08:48.059 --> 01:08:53.559
und auch so Benchmarks veröffentlicht, so in den Compile-Zeiten zwischen 3.3 und 3.4.

01:08:54.199 --> 01:08:57.959
Aber... Ja, die Blogposts, die ich gefunden habe, die sind auch aus Juli letzten

01:08:57.959 --> 01:09:01.619
Jahres und vielleicht war das zu dem Zeitpunkt ja noch tatsächlich geplant.

01:09:02.659 --> 01:09:06.979
Das muss ich auch sagen. Ich hatte auch wirklich Probleme, also Stichwort AI.

01:09:09.139 --> 01:09:12.699
Belastbare Blogposts zu dem Thema zu finden.

01:09:12.959 --> 01:09:17.939
Also es gibt mittlerweile echt eine Menge ...

01:09:20.176 --> 01:09:25.396
Zumindest nur meine Mutmaßung, Inhalte, die wirklich teilautomatisiert auch

01:09:25.396 --> 01:09:32.276
zu Tailwind produziert werden, wo du dann in so einer Content Factory halt irgendwie landest.

01:09:33.016 --> 01:09:35.756
Wo dann eben nicht mehr klar ist, ob das jetzt stimmt.

01:09:35.876 --> 01:09:40.076
Also es hört sich super an, aber eben nicht mehr klar ist, ob das jetzt stimmt,

01:09:40.156 --> 01:09:41.216
was da jetzt gerade steht.

01:09:41.316 --> 01:09:45.696
In unserem zukünftigen Podcast, wenn wir uns noch auf sowas stützen,

01:09:45.856 --> 01:09:47.616
dann werden wir auch zu so einer...

01:09:47.616 --> 01:09:56.716
Also deswegen wollte ich sagen, Also ich freue mich über jeden Beitrag,

01:09:56.716 --> 01:09:58.936
den es in der Developer-Community gibt,

01:09:59.076 --> 01:10:04.716
aber ich bin inzwischen echt soweit, jeden Medium-Artikel und jeden Dev2-Beitrag,

01:10:04.816 --> 01:10:08.516
den gucke ich echt aus einer kritischen Linse an.

01:10:08.516 --> 01:10:13.596
Das ist leider wahr so und versuche wirklich erst nochmal so den Origin zu finden,

01:10:13.696 --> 01:10:18.536
von wem kommt es denn jetzt wirklich, bevor es die anderen irgendwie nachplappern

01:10:18.536 --> 01:10:23.176
oder in ihr Large-Language-Model halt irgendwie gebaut haben.

01:10:23.176 --> 01:10:26.296
Also, naja, also, gut.

01:10:26.436 --> 01:10:30.936
Entschuldige, Vanessa, du wolltest uns auf einen gradminigen Pfad zurückbringen

01:10:30.936 --> 01:10:39.756
zum tatsächlichen anstehenden FIRA-Release und zu den Ankündigungen von den

01:10:39.756 --> 01:10:42.276
Tailwind-Menschen selbst,

01:10:42.536 --> 01:10:50.336
wo sie eben beschreiben, wie sie jetzt den Übergang von 3.4 zu 4 gestalten wollen,

01:10:50.556 --> 01:10:53.156
was sie alles auf der Roadmap haben und was da noch zu tun ist.

01:10:53.176 --> 01:10:55.576
An den größten Änderungen tatsächlich dazu kommt.

01:10:56.796 --> 01:11:00.336
Liebe Hörer und Hörerinnen, so an dieser Stelle nun eben das Outro.

01:11:00.416 --> 01:11:04.276
Das war es mit Tape und CSS-Neuigkeiten in V3 und Erfahrungsberichte.

01:11:04.496 --> 01:11:08.996
Wir sind im Gespräch nahtlos übergegangen und wir hören uns dann allerdings

01:11:08.996 --> 01:11:13.076
nächste Woche mit der Tape und CSS V4 mit den gleichen Personen weiter.

01:11:13.516 --> 01:11:15.736
Habt eine schöne Woche. Bis dahin. Ciao, ciao.

01:11:16.720 --> 01:11:39.920
Music.

01:11:23.176 --> 01:11:32.996
Bis zum nächsten Mal.