WEBVTT

00:00:00.162 --> 00:00:05.563
Aber die Nächste, die für mich grundlegend meinen CSS-Schreibstil geändert hat, waren eben die Custom Properties.

00:00:06.022 --> 00:00:10.017
Oh Gott, ist das verwirrend, wenn man das versucht zu sagen, als zu schreiben.

00:00:10.017 --> 00:00:19.017
Nimm ein Element, das auf ein Element folgt, das auf ein anderes Element folgt, das auf ein anderes Element folgt. Und so kannst du eigentlich unendlich im Dom davor und zurückgehen.

00:00:19.017 --> 00:00:24.702
Wobei man das auch ganz gut mit deinem Cursortrick von deiner Lighthouse-Seite machen könnte.

00:00:25.017 --> 00:00:29.590
Das stimmt. Der Böck Offset, der berühmte. Ja, genau.

00:00:30.160 --> 00:00:54.320
Music.

00:00:54.580 --> 00:00:55.976
Revision 568,

00:00:59.757 --> 00:01:02.718
Diese Revision von Working Draft wird euch präsentiert von Midwald.

00:01:03.799 --> 00:01:05.697
Midwald ist der Hoster für Agenturen und Freelancer.

00:01:06.112 --> 00:01:08.577
Solltet ihr mehr als ein einzelnes Webprojekt zu betreuen haben,

00:01:08.577 --> 00:01:14.097
dann könnte Midwald euer Gamechanger sein. Ich erinnere mich am mit Grausen an meine eigene Freelancer-Vergangenheit,

00:01:14.097 --> 00:01:18.257
als ich für 10 Kunden bei 20 verschiedenen Hostern mit 30 Logins zu jonglieren hatte.

00:01:18.571 --> 00:01:21.677
Bei Midwald hingegen ein Login für alle Projekte.

00:01:23.514 --> 00:01:28.177
Wahlweise für den besucherbasierten Agenturserver oder den nerdig selbstkonfigurierten Spaceserver.

00:01:28.618 --> 00:01:32.669
Mit allen Features, die ihr euch nur wünschen könnt. Vom Shop-System-Installer über SSL-Zertifikate,

00:01:33.254 --> 00:01:36.937
bis hin zum ausgefuchsten Rechte- und Rollensystem. Ihr wisst schon, für das Management eurer

00:01:37.062 --> 00:01:42.202
zahllosen Projekte unter einem Dach. CO2-neutral und DSGVO-konform. Und sollte es mal haken und,

00:01:42.777 --> 00:01:48.777
ihr den Support anrufen, dann kriegt ihr echte Nerds ans Rohr. 24-7 an 365 Tagen im Jahr.

00:01:49.359 --> 00:01:54.391
Das alles könnt ihr haben, wenn ihr auf mitwald.de.workingdraft vorbeischaut.

00:01:54.832 --> 00:01:59.523
Das schreibt sich mittwald.de.workingdraft.

00:02:00.063 --> 00:02:03.385
Alle Infos zu mitwald findet ihr natürlich auch in den Shownotes zu dieser Revision.

00:02:03.934 --> 00:02:07.337
Wir danken mitwald für die Unterstützung von dieser Revision von Working Draft.

00:02:07.337 --> 00:02:15.970
Wir sind heute zu dritt. Aus dem Team hätten wir da einmal die Vanessa. Hallo!

00:02:16.817 --> 00:02:24.817
Ich bin der Chep und das bedeutet, dass wir mal wieder einen Gast haben und zwar den Manuel, den Manuel Matusowitsch. Hallo!

00:02:24.817 --> 00:02:26.718
Manuel Matusowitsch Hallo! Servus!

00:02:27.088 --> 00:02:32.817
Ja, du warst schon mindestens einmal bei uns zu Gast, eventuell sogar öfter. Das letzte Mal war ungefähr vor einem Jahr.

00:02:32.817 --> 00:02:41.817
Genau, ich denke mal, unsere Hörerinnen und Hörer erinnern sich womöglich an dich, aber für die, die jetzt irgendwie neu eingestiegen sind,

00:02:41.817 --> 00:02:47.817
Vielleicht magst du nochmal sagen, wer du bist und was dich so umtreibt und vielleicht auch, was sich seit letztem Jahr geändert hat.

00:02:49.359 --> 00:02:57.074
Ja, mein Name ist Manuel Matusowitsch und ich bin Frontend-Developer, Accessibility-Auditor und Consultant.

00:02:57.209 --> 00:03:02.209
Das ist ein fürchterliches Wort, aber Unternehmensberater ist noch viel schlimmer.

00:03:02.493 --> 00:03:11.209
Aber sowas mache ich halt ein bisschen. Und ich bin ursprünglich aus Wien, lebe in Graz und beim letzten Mal, weil ich bin schon das dritte Mal zu Gast,

00:03:11.379 --> 00:03:16.209
beim letzten Mal habe ich gesagt, das ist so lang her, dass ich nicht mehr weiß, was ich damals erzählt habe

00:03:16.209 --> 00:03:18.878
und mich auch nicht trau, nachzuhören,

00:03:19.292 --> 00:03:20.417
weil es sicher ganz fürchterlich ist.

00:03:21.009 --> 00:03:26.899
Die letzte Folge habe ich jetzt teilweise nachgehört. Da haben hauptsächlich die Vanessa und ich über

00:03:27.009 --> 00:03:32.651
HTML und HTML-Validierung gesprochen, weil das war nämlich kurz nach der Beyond-Telerant letztes Jahr.

00:03:34.704 --> 00:03:38.509
Ja. Genau. Was mache ich so? Ich bin, ja, Frontend-Developer hauptsächlich,

00:03:38.509 --> 00:03:42.509
aber mache auch so Kunden-Workshops und eben auch Beratung,

00:03:42.509 --> 00:03:49.269
Hauptsächlich rund um das Thema Barrierefreiheit und manchmal auch rund um das Thema CSS und

00:03:49.269 --> 00:03:51.241
CSS-Architektur und solche Dinge.

00:03:51.835 --> 00:03:56.229
Aber hauptsächlich sitze ich seit fünf, sechs Jahren circa auf der Barrierefreiheit.

00:03:57.218 --> 00:04:02.899
Ja, das ist ja auch nicht schlecht. Also da kann man ja auch nicht genug Experten haben eigentlich.

00:04:03.628 --> 00:04:10.064
Da hatte die EIC kürzlich eine sehr schöne Folge mit Svenja von Accenture.

00:04:10.398 --> 00:04:12.873
Ja, stimmt. Genau, vor sechs Wochen.

00:04:13.764 --> 00:04:18.269
Nee, die war auch super. Genau. Da konnte man auch noch mal ein paar Sachen so fragen,

00:04:18.309 --> 00:04:21.349
die man immer mal wissen wollte.

00:04:22.434 --> 00:04:28.465
Voll. Genau, also die verlinken wir natürlich auch und geben noch mal eine Höherempfehlung ab.

00:04:29.617 --> 00:04:35.429
Genau, ich wollte nur sagen zu dem Consultant, genau, ich heiß ja auch so, also ich nenn mich ja auch so,

00:04:35.586 --> 00:04:37.098
das ist immer so ein bisschen nebulös.

00:04:37.469 --> 00:04:44.229
Das hilft auch hier beim Finanzamt, um sozusagen weiter Freiberufler sein zu können, weil

00:04:44.229 --> 00:04:50.980
du ja im Prinzip als Consultant, dann bist du ja jemand, der sagt, was man machen muss,

00:04:51.149 --> 00:04:52.429
so fühlt sich das auf jeden Fall an.

00:04:52.429 --> 00:04:56.669
So, das und das und das ist falsch, das müssen wir so machen und so.

00:04:56.840 --> 00:05:01.429
Und ah, okay, das ist freie Arbeit, das ist nicht fremdbestimmt, so, alles klar, du bist

00:05:01.429 --> 00:05:03.475
Freiberufler, passt. Passt. So.

00:05:03.862 --> 00:05:10.029
Ja, das Problem, das ich noch hab mit dem Begriff, ist, wenn man vorher Developerin war oder ist, noch immer irgendwie,

00:05:10.089 --> 00:05:17.889
und dann sagt, ich bin jetzt Konsultant, dann ist es so, als hätt ich das T-Shirt gegen das Hemd ausgetauscht.

00:05:18.086 --> 00:05:25.089
So, als würd ich jetzt irgendwie, keine Ahnung, mit dem Koffer irgendwo hingehen und sagen, so, jetzt reden wir über Code.

00:05:25.359 --> 00:05:29.068
Also McKenzie-mäßig kommst du dann zur Tür rein, ne? Ja, genau, genau.

00:05:29.861 --> 00:05:36.657
Ja. Ja ich meine das andere wäre Experte, das klingt irgendwie auch ein bisschen komisch, also auch wenn es irgendwie stimmt.

00:05:36.869 --> 00:05:39.869
Schönen guten Tag Manuel Matusowitsch, Experte.

00:05:39.869 --> 00:05:47.622
Und was natürlich auch immer geht, so werde ich ja manchmal geschimpft, du könntest auch der Accessibility-Papst sein.

00:05:48.738 --> 00:05:53.546
Uh, Papst, ja, das ist mir ein bisschen zu nah am PHP-Ninja.

00:05:54.095 --> 00:05:56.388
Ja, okay. Ja, points given.

00:05:56.428 --> 00:05:59.948
Oder Frontend-Ninja-PHP-Artisan hat man ja eine Zeit lang gesagt,

00:05:59.988 --> 00:06:02.323
so wie Lavelle großgeworden ist.

00:06:02.755 --> 00:06:06.356
Ja. Vielleicht auch ein Accessibility-Affinitiado.

00:06:06.977 --> 00:06:13.988
Wäre ja auch eine Möglichkeit. Mhm. Sehr gut. Genau, aber heute wollen wir gar nicht so viel, glaub ich,

00:06:14.028 --> 00:06:15.508
da über Accessibility reden.

00:06:15.548 --> 00:06:17.582
Also machen wir natürlich auch, wo sich's anbietet.

00:06:18.482 --> 00:06:42.671
Unser aufhänger ist eine blog post serie die du irgendwann letztes jahr mal sozusagen losgetreten hast und dich selbst glaube ich damit auch ein bisschen gefoltert hast nämlich du hast gesagt hey ich blogge jetzt jeden tag und schreibe jeweils ein post zu irgendwas coolen in css.

00:06:43.139 --> 00:06:48.748
Genau, noch ein bisschen konkreter, nicht nur irgendwas coolen, sondern irgendwas neuem coolen.

00:06:49.090 --> 00:06:56.748
Also, oder fast. Also ich würde sagen so 95% sind, oder 90% sind der heißeste neue Scheiß

00:06:56.748 --> 00:07:04.024
und die restlichen 10% sind nicht so heiß, aber halt Dinge, die ich dann nicht gewusst habe oder nicht so richtig gewusst habe.

00:07:04.789 --> 00:07:10.748
Und der Hintergrund ist der, dass ich damals, als ich noch nicht suspended war auf Twitter,

00:07:10.748 --> 00:07:17.375
noch Zugang hatte, als man mich nicht wegen meiner unglaublichen, kritischen Hot-Takes gesperrt hat.

00:07:17.588 --> 00:07:23.108
Da habe ich irgendwie so durch die Timeline gescrollt und habe dauernd so Leute wie den

00:07:23.108 --> 00:07:29.268
Brahmus gesehen und die Stephanie Eccles und den Ahmad Jadid und die Michelle Barker und

00:07:29.268 --> 00:07:35.228
die Youna und mehr noch immer, die ständig irgendwie so CSS posten, dass ich nicht kannte.

00:07:35.228 --> 00:07:37.988
Also ich habe das angeschaut und habe gedacht, was zur Hölle, wovon redet ihr da?

00:07:38.260 --> 00:07:42.948
Also ich schreibe diese Sprache seit 15 Jahren und ich kenne mich echt gut aus, würde ich sagen,

00:07:42.948 --> 00:07:47.468
aber ich habe keine scheiß Ahnung von, worüber ich spreche. Da habe ich einfach draufgekommen,

00:07:47.468 --> 00:07:52.068
dass ich das ganze neue Zeug voll verpasst habe. Und deswegen habe ich gedacht, okay gut,

00:07:52.068 --> 00:07:56.588
damit ich das irgendwie ein bisschen forciere und mich selber unter Druck setze, mache ich das

00:07:56.588 --> 00:08:04.748
öffentlich und der große fehler oder weiß nichts oder die

00:08:03.835 --> 00:08:09.905
Der große Gewinn beides irgendwie, so in der Richtung, war einfach die Idee, dann einen Blogpost zu schreiben jeden Tag,

00:08:09.945 --> 00:08:11.305
was halt relativ viel ist.

00:08:11.345 --> 00:08:16.087
Wenn ich mir nur so einen Kod-Schnipsel raushau, dann geht's, oder wenn ich mich, weiß nicht,

00:08:16.245 --> 00:08:20.205
in einer halben Stunde hinsetze und was durchles, dann ist es nicht so wild.

00:08:20.245 --> 00:08:22.884
Aber der Blogpost, der dauert dann schon ein bisschen.

00:08:23.065 --> 00:08:27.905
Gleichzeitig ist aber der Output dann halt extrem gut. Einerseits für die Leute, die das lesen,

00:08:27.945 --> 00:08:30.302
und andererseits aber auch für mich der Input und Output, ja.

00:08:31.105 --> 00:08:37.525
Du gibt ja viele, die bloggen ja auch, um selber nochmal nachzulesen in der Zukunft.

00:08:37.525 --> 00:08:40.376
Also sozusagen für das zukünftige Selbst.

00:08:42.665 --> 00:08:46.305
Ja, total gut. Ich blogge meistens nur, wenn ich irgendwas nicht kann.

00:08:47.265 --> 00:08:49.432
Okay. Also ich blogge meistens nur, wenn ich irgendwas nicht weiß.

00:08:49.657 --> 00:08:54.105
Das ist meistens wirklich Lernen. Also ich tu dann so, ich bin ja Konsultant, ich bin Experte.

00:08:54.105 --> 00:08:59.190
Ich tu dann so, als wüsste ich die Dinge. Aber tatsächlich lerne ich einfach beim Schreiben.

00:08:59.568 --> 00:09:02.098
Aber natürlich halt mit sehr viel Recherche, Eigenrecherche.

00:09:03.034 --> 00:09:13.305
Ja. Ja, super. Also, ich wollte sagen, ich blogge ja total wenig. Also, ich könnte theoretisch, ich habe ja auch eine Webseite und tralala, aber ey, bloggen oder…

00:09:13.305 --> 00:09:20.305
Ja, aber wenn, dann ist es so ein Lesedauer-45-Minuten-Ding wie dieses… Was war das letzte Mal über die Browser, über den EA irgendwas? Was war das?

00:09:20.305 --> 00:09:22.281
Ja, deswegen mache ich das ja nur alle zehn Jahre dann.

00:09:22.677 --> 00:09:25.305
Ja, genau. Also, es muss immer ein Browser dafür kaputt gemacht werden.

00:09:25.305 --> 00:09:35.305
Ja, aber es fällt mir halt nicht so leicht, darum bin ich auch wahrscheinlich mehr hier in diesem Audio-Medium unterwegs.

00:09:35.305 --> 00:09:44.305
Genauso die Schreiberei, das ist anstrengend. Ja, ganz viel. Ich tu mir auch schwer. Ich tu mir vor allem mit dem Englischen schwer.

00:09:44.305 --> 00:09:48.305
Und es hat nur deswegen funktioniert, weil ich es einfach kurz gehalten habe.

00:09:48.305 --> 00:09:53.305
Also einfach jeder Post ist jetzt nicht irgendwie, also keine Ahnung, ein Artikel über Container-Querys,

00:09:53.305 --> 00:09:58.805
sondern ein Artikel über, weiß nichts, was sind Container-Querys, fertig, ohne jetzt

00:09:58.805 --> 00:10:02.805
irgendwie im Detail darauf einzugehen, wie sich der Browser verhält oder, keine Ahnung,

00:10:02.805 --> 00:10:05.663
nur eine einzelne Eigenschaft und nicht gleich alle Eigenschaften, weil sonst hätte es eh nicht funktioniert.

00:10:06.005 --> 00:10:09.228
Ich habe das Gefühl, ich muss euch daran erinnern, dass es Chachipiti gibt.

00:10:10.857 --> 00:10:33.267
Was kann man damit machen? Ach so. Naja, du kannst da durchaus, das ist ja die große eine Frage, die hatten wir ja auch mit Hans und Peter besprochen, wie gefährlich das jetzt sein kann, was jetzt gerade auch Plagiate und sowas angeht, also jetzt nicht unbedingt nur in die Code-Richtung, sondern auch irgendwie eine Thesis zu schreiben, die Masterarbeit, Bachelorarbeit,

00:10:33.489 --> 00:10:37.107
eine Doktorarbeit abzugeben und aber vor allem auch Blogartikel.

00:10:37.107 --> 00:10:40.707
Weil, was ich schon ausprobiert hab, ist, dass ich Stichpunkte reingeschrieben hab

00:10:40.707 --> 00:10:45.417
und gesagt hab, mach mal das zu einem professionell klingenden Artikel draus.

00:10:45.633 --> 00:10:47.467
Der ist nirgends veröffentlicht, ich hab's nur so ausprobiert.

00:10:47.467 --> 00:10:51.377
Ich hab ziemlich schnell festgestellt, welche Schwächen es durchaus alles gibt.

00:10:51.627 --> 00:10:55.827
Also, gerade das Hauptmerkmal, worauf ich richtig hinaus wollte,

00:10:55.827 --> 00:11:02.067
kam nicht so ganz raus. Das war viel Lagi-Fari-Text, so wie ungefähr, wenn ich halt auch durch zehn Stack-Overflow-Artikel

00:11:02.067 --> 00:11:06.095
oder, keine Ahnung, DevTO-Artikel klicken würde, wo ich mir auch denke, das kommt noch nicht richtig raus.

00:11:06.176 --> 00:11:11.147
Aber man hat ja schon, das ist ja gerade das Ding von ChattyPetitee, mit dem Dialogverfahren,

00:11:11.147 --> 00:11:14.227
dass ich sagen kann, nee, mach das mal klarer, stell das mal mehr raus.

00:11:14.227 --> 00:11:16.934
Das ganze Vorgedöns brauchst du nicht, das weiß eh schon jeder.

00:11:17.618 --> 00:11:23.787
Und dann kann was Gutes rauskommen. Allerdings kann man natürlich auch sagen, hier ist mein Text, schreib das mal in schönes Englisch,

00:11:23.787 --> 00:11:25.267
so machst du dich zumindest für E-Mails.

00:11:25.267 --> 00:11:31.627
Also, wenn ich jetzt auch eine E-Mail bekomme, keine Ahnung, bewirbt sich jemand bei uns auf iOS.

00:11:31.627 --> 00:11:34.947
Ich so, wir haben gar keine iOS-Stelle, da schreibe ich nicht mehr selber drauf.

00:11:34.947 --> 00:11:38.067
Da sage ich, Chativity, schreibt mal kurz, dass wir die Stelle gar nicht erst haben,

00:11:38.067 --> 00:11:42.752
in schönem Englisch. Dankeschön, kopiere ich, schreibe meinen Namen drunter, dann fertig.

00:11:44.094 --> 00:11:52.387
Ja. Gegenargument wäre, dass jemand, der auf eine Website geht,

00:11:52.387 --> 00:11:59.107
jemand, der RSS liest, also der so, oder auf Social Media ist,

00:11:59.107 --> 00:12:04.133
dort zu einem Link kommt, der so Inhalte konsumiert, der will von der Person das lesen, würde ich vermuten.

00:12:04.227 --> 00:12:09.307
Weil wenn das jetzt nicht so der Fall wäre, wenn ich jetzt nur die Information haben möchte, dann könnte ich einfach auch,

00:12:09.831 --> 00:12:13.947
Chat, GPT oder was auch immer, irgendeine ERA-Geschichte fragen, wie funktioniert das?

00:12:13.947 --> 00:12:15.027
Und der sagt mir das dann.

00:12:16.427 --> 00:12:21.987
Also ich glaube, dass diese, dass die weitere Entwicklung des Menschlichen noch mehr

00:12:21.987 --> 00:12:27.107
herausstreichen wird, dass es eher in die andere Richtung geht, dass man noch bewusster, vielleicht ohne die Maschinen schreibt,

00:12:27.107 --> 00:12:35.254
Damit es halt einfach irgendwie klar ist, es kommt jetzt von den Menschen und nicht eben so ein Mischmasch aus, wie du sagst, Stack Overflow und sonstigen was.

00:12:36.586 --> 00:12:45.867
Aber natürlich, es würde natürlich funktionieren und ich glaube, dass so AI relativ viel von dem geschafft hätte.

00:12:46.155 --> 00:12:48.658
Nur wozu dann das Ganze? Also wozu mache ich das dann?

00:12:48.820 --> 00:12:53.067
Also es geht nicht darum, dass ich publiziere, weil ich habe keine Werbung auf meiner Website, also ich generiere damit keine Kohle.

00:12:53.067 --> 00:12:57.723
Ganz im Gegenteil, ich habe jetzt Netlify Geld überweisen müssen, weil ich zu viele Anfragen hatte.

00:12:57.840 --> 00:13:03.947
Dann ist halt die Frage, wozu das Ganze?

00:13:06.528 --> 00:13:08.985
Also der Lerneffekt ist größer beim Schreiben, das wollte ich damit sagen.

00:13:09.118 --> 00:13:11.658
Das ist korrekt, das wollte ich gerade noch dazu einwerfen.

00:13:11.658 --> 00:13:15.170
Wenn es jetzt aber natürlich darum geht, man schreibt die Sachen auf, um sich

00:13:15.530 --> 00:13:20.178
vielleicht gar nicht für andere, sondern um das für sich selber dann festzuhalten und nachzulesen,

00:13:20.364 --> 00:13:23.425
das geht natürlich wahrscheinlich verloren, wenn man es nicht selber schreibt.

00:13:24.109 --> 00:13:27.755
Klar, ich denke, dieses Englische, check mal kurz das Englische ab,

00:13:28.214 --> 00:13:30.807
hat man jetzt gut, das hat man auch mit Grammarly und anderen Tools.

00:13:31.590 --> 00:13:36.498
Aber ist vielleicht noch ganz nett. Ich würde aber gleich mal zu deinem Tag 1 einsteigen jetzt.

00:13:36.811 --> 00:13:41.312
Das war Custom Properties und ihre Fallbacks.

00:13:41.942 --> 00:13:53.321
Und die Syntax, die du da auch schön vorstellst. Und ich glaube, Chachi Pitti hatte übrigens diese Seite überhaupt nicht so schön hinbekommen mit diesen Code-Beispielen und Vorschau-Demos.

00:13:53.889 --> 00:13:57.258
Aber dein Beispiel ist hier, du hast die Background-Color.

00:13:57.588 --> 00:14:05.758
Bestimmt mit dem VAR war für die Custom Property und eine Custom Property, die dann nicht gesetzt ist

00:14:05.758 --> 00:14:10.534
und hat als Fallback einen Hexcode für eine schwarze Farbe.

00:14:11.218 --> 00:14:16.079
Ich würde gerne mal kurz nachfragen nach einem, ob du einen Use Case für uns hast,

00:14:16.258 --> 00:14:21.922
wann ich zum Beispiel Fallbacks hätte. Wann kann es denn passieren, dass diese Custom Property jetzt tatsächlich fehlt?

00:14:23.542 --> 00:14:31.778
Also, ich würde es nicht unbedingt empfehlen, aber ich werde ganz kurz nochmal wiederholen,

00:14:31.778 --> 00:14:34.978
was da im ersten Beispiel zu sehen ist, also es ist einfach ein Div und da ist seine Background

00:14:34.978 --> 00:14:38.938
Color und da ist diese var Function, der erste Parameter ist eben eine Custom Property, die

00:14:38.938 --> 00:14:40.979
es nicht gibt und der zweite ist die schwarze Hintergrundfarbe.

00:14:41.105 --> 00:14:44.698
Und es kann sein, dass du das genau dasselbe gerade gesagt hast, nur ich habe schon begonnen

00:14:44.698 --> 00:14:47.875
nachzudenken, deswegen habe ich nicht fertig zugehört, sorry.

00:14:48.138 --> 00:14:51.178
Und die Möglichkeit wäre jetzt, ich könnte jetzt ein Media Query haben oder ein Container

00:14:51.178 --> 00:14:56.098
oder was auch immer und dann könnte ich sagen, ab einer Mindestbreite von 400 Pixel wird die

00:14:56.098 --> 00:15:01.298
Variable gesetzt mit dem Wert rot. Das heißt, wenn ich unter 400 Pixel bin,

00:15:01.298 --> 00:15:05.376
nimmt also das schwarze und wenn ich über 400 Pixel bilden, dann würde ich sozusagen die Variable befüllen.

00:15:06.564 --> 00:15:10.588
Das wäre eine Möglichkeit und ich habe das teilweise auch schon, ich habe das mal in einem Artikel gemacht,

00:15:10.642 --> 00:15:18.906
weil ich klug wirken wollte, weil ich das eben für WebDev geschrieben habe und da bin ich draufgekommen, dass das irgendwie gar nicht so lesbar ist.

00:15:19.302 --> 00:15:24.820
Also im Nachhinein würde ich das wieder ändern. So wie ich es jetzt meistens mache, ist es, dass ich einfach sage, BackgroundColor ist,

00:15:25.712 --> 00:15:31.814
var minus minus bg zum Beispiel und dann setze ich die Variable einmal und dann im Image Query überschreibe ich sie nochmal.

00:15:31.814 --> 00:15:37.631
Also es ist einfach wirklich einmal explizit Sets, also es ist mehr Geschriebenes irgendwie, also eine Zeile mehr, aber es ist für mich viel lesbarer.

00:15:38.270 --> 00:15:41.628
Ja, also ich dachte, das wäre für mich hier niemals gekommen.

00:15:41.814 --> 00:15:43.752
Es schaut sehr smart aus.

00:15:43.814 --> 00:15:55.032
Ich glaube, was ich bei uns gemacht habe, ist, dass wir vorgearbeitet haben, falls Kunden Kundinnen, das ihren eigenen Farbstil haben möchten.

00:15:55.814 --> 00:16:00.614
Sozusagen dann auch über Custom Properties gesetzt, und wenn die Custom Property halt nicht gesetzt ist,

00:16:00.614 --> 00:16:05.114
das fällt mir aber jetzt erst auf, wäre das smart gewesen, dass man das so hätte machen können,

00:16:05.114 --> 00:16:09.754
aber ich hab natürlich alle Fallback Colors, hatte ich ja eh schon da stehen,

00:16:09.754 --> 00:16:13.914
weil die hatte ich ja schon mal alle definiert, und die habe ich natürlich auch irgendwie mit einer,

00:16:13.914 --> 00:16:21.054
mit einem Custom Property Namen, ich hoffe, ich habe mir die richtigen Begriffe genannt,

00:16:21.054 --> 00:16:24.854
aber, stimmt, hätte ich damit auch machen können, weil man kann die auch verschachteln,

00:16:24.854 --> 00:16:29.134
wie du auch in dem Blog-Artikel beschrieben hast, also ich kann irgendwie die erste var-Funktion

00:16:29.439 --> 00:16:33.769
und der fallback ist auch wieder eine var-Funktion mit Dungeon in dem fallback.

00:16:35.074 --> 00:16:37.374
Genau. Also, das hätte ich jetzt auch das Beispiel gebracht,

00:16:37.374 --> 00:16:41.734
theming wäre eben genauso ein Beispiel und es könnte auch sein, dass die Variable über JavaScript gesetzt wird

00:16:41.734 --> 00:16:44.334
oder sonst irgendwie, das könnte auch mal eine andere Demo sein.

00:16:44.334 --> 00:16:48.974
Ja, gut, dann weiß man nie, was passiert. Voll. Oder es kann genauso auch sein,

00:16:48.974 --> 00:16:53.529
dass du zum Beispiel, du hast eine, weiß ich nicht, zum Beispiel einen Web-Component

00:16:53.781 --> 00:16:59.155
Und die hat ihre eigenen Styles und das ist alles im Shadowdom und du kannst nichts ändern und bla bla.

00:16:59.274 --> 00:17:07.419
Aber was halt schon geht, ist, dass du von außen hin die Variablen, die Custom-Properties innerhalb einer Web-Component veränderst.

00:17:07.563 --> 00:17:12.470
Und so könntest du sozusagen einen Platzhalter schaffen für eine Custom-Property, die dann von außen befüllt werden kann oder verändert werden kann.

00:17:12.605 --> 00:17:18.618
Das habe ich jetzt relativ viel gemacht, weil wir bei einem alten Arbeitgeber, bei einer alten Arbeitgeberin, bei der Stadt Wien,

00:17:19.491 --> 00:17:24.848
setzen wir jetzt auf Web Components und machen eine White Label Lösung,

00:17:26.180 --> 00:17:28.774
die dann einfach gestylt werden kann über Custom Properties.

00:17:28.774 --> 00:17:33.652
Das heißt, wir geben eine CSS API frei.

00:17:33.967 --> 00:17:37.174
Das ist einfach nur ein fancy Ausdruck für ein paar Custom Properties,

00:17:37.174 --> 00:17:43.536
die man verändern kann, aber verkauft sich besser. Und so erlauben wir es dann, diese White Label Lösung zu themen.

00:17:45.040 --> 00:17:48.290
Das ist wahrscheinlich der Unterschied zwischen Developer und Consultant.

00:17:48.434 --> 00:17:51.800
Richtig. Ich hatte irgendwelche Begrifflichkeiten rumgestutzt.

00:17:51.909 --> 00:17:55.870
Wir waren da so Custom Properties, ganz einfach, so kann man ändern.

00:17:55.932 --> 00:17:59.209
Ich werde mir jetzt merken, die CSS-API.

00:18:00.389 --> 00:18:06.579
Genau, genau, genau, genau. Wobei, ähm, ja, eigentlich müssten wir jetzt irgendwas mit AI machen.

00:18:06.619 --> 00:18:10.279
Also, es ist eigentlich, ähm, CSS-AI.

00:18:10.426 --> 00:18:13.279
Nicht mehr eine API. API ist veraltet.

00:18:13.640 --> 00:18:18.279
Immer AI, so wie damals bei TurboPack, wo man alles in Turbo geprefixed hat.

00:18:18.528 --> 00:18:20.779
Einfach pauschal jetzt AI hinten ranhängen.

00:18:21.904 --> 00:18:29.079
Sehr gut, ja. API-AI. Wie schreibst du es selber? Mal schauen, was passiert.

00:18:29.079 --> 00:18:38.979
Ja, also mir fällt zu dem Thema Custom Properties so einfach noch ein,

00:18:38.979 --> 00:18:43.779
dass die Lea Verou da auch einen schönen Talk irgendwann mal rausgehauen hat.

00:18:43.779 --> 00:18:48.339
Also wer da Lust hat, auch richtig steil zu gehen, gedanklich.

00:18:48.339 --> 00:18:53.019
Also das ist das nicht steil gehen, das ist einfach nur verzweifeln.

00:18:53.019 --> 00:18:59.318
Ja, Wahnsinn. Also das ist der Talk vom letzten CSSD, den findet man auch auf YouTube. Also,

00:18:59.579 --> 00:19:04.499
es ist... die sind Wahnsinn. Ich hab wirklich... ich hab einfach ein paar Sekunden geschaut,

00:19:04.499 --> 00:19:07.379
dann hab ich auf Pause drücken müssen, um zu verstehen, was er da gerade gesagt hat,

00:19:07.379 --> 00:19:10.579
dann nochmal und das geht die ganze Zeit. Also, diesen 45-Minuten-Talk, da hab ich,

00:19:10.579 --> 00:19:15.089
glaub ich, drei Stunden gebraucht, um mich daran zu schauen. Die ist ganz abgefahren.

00:19:15.684 --> 00:19:20.459
Dieses Jahr macht er immer so super coole Talks, genau. Und der ist halt dann eben wirklich nur

00:19:20.459 --> 00:19:23.272
nur rumnerden über Custom-Properties.

00:19:24.218 --> 00:19:27.954
Genau, und sie hat auch beklagt, dass die wenigsten Leute eben ...

00:19:28.107 --> 00:19:33.699
Oder viel zu wenig Custom-Properties in Custom-Properties hineinverschachtelt würden.

00:19:33.769 --> 00:19:38.306
Und man da irgendwie noch viel mehr rausholen könnte, wenn man das tut.

00:19:38.559 --> 00:19:44.770
Genau, dann hat man's halt mit so Konstrukten zu tun, wie du sie da in deinem Post beschrieben hast.

00:19:45.759 --> 00:19:50.159
Mhm, das ist ja voll spannend auch. Also, ich denke da grad ganz viel drüber nach,

00:19:50.159 --> 00:19:53.519
weil ich jetzt auch dieses Jahr beim CSS Day einen Talk halten darf,

00:19:53.519 --> 00:19:56.999
was ich unglaublich furchteinflößend finde.

00:19:57.058 --> 00:19:59.199
Man muss sich nur das Line-Up anschauen, weil da alles spricht,

00:19:59.199 --> 00:20:05.399
das ist ganz, ganz abgefahren. Und bei mir geht es irgendwie, also der Titel von meinem Talk ist,

00:20:05.898 --> 00:20:08.919
That's not how I wrote CSS three years ago.

00:20:08.919 --> 00:20:14.319
Und da geht es darum, dass sich einfach die Art und Weise, wie ich CSS schreibe, grundlegend verändert hat

00:20:14.396 --> 00:20:17.039
und wie es sich noch verändern wird.

00:20:17.039 --> 00:20:20.559
Und eben darauf bin ich draufgekommen, durch das Schreiben von diesem Blogpost.

00:20:20.559 --> 00:20:23.559
Also, es gibt ein paar Dinge, die jetzt neu sind oder kommen werden,

00:20:23.559 --> 00:20:27.414
die die Art und Weise, wie wir CSS schreiben, grundlegend verändern.

00:20:27.648 --> 00:20:33.059
Also, wenn ich dir ein paar Beispiele geben darf, so in meiner Karriere, also die ersten Websites, die ich gemacht habe,

00:20:33.059 --> 00:20:34.059
die waren auch ohne CSS.

00:20:34.059 --> 00:20:39.059
Also, da gab es den Font-Tag zum Beispiel oder das BG-Color-Attribut auf dem Body

00:20:39.059 --> 00:20:41.359
oder das Link-Attribut und ALink und so weiter.

00:20:41.359 --> 00:20:54.959
Also, so sehr visuelle Attribute und Elemente. Und dann kam CSS, dann habe ich mir CSS geschrieben und halt irgendwas, irgendwelche Selektoren irgendwie geschachtelt und auf gar nichts geschaut und.

00:20:56.194 --> 00:21:03.684
Dann kamen dann die Media Theories und das war das erste Mal, dass sich bei mir was grundlegend verändert hat.

00:21:03.918 --> 00:21:10.644
Also wenn man dann plötzlich doppelt deklariert hat, beziehungsweise dann auch darauf achten musste, dass man irgendwie nicht zu spezifisch wird,

00:21:10.644 --> 00:21:15.765
dass man mit den Selektoren ein bisschen besser umgeht, weil es einfach sehr, sehr kompliziert wird, wenn man dann Property-Werte überschreiben muss.

00:21:16.026 --> 00:21:21.844
Und dann ist dann irgendwie BAM gekommen und mit BAM hat sich dann wieder alles grundlegend verändert.

00:21:22.021 --> 00:21:29.144
Und das war eine super Überleitung von dir, weil ich glaube, die nächste Sache, also ich habe jetzt an ein paar Sachen gesprungen, also es gibt noch mehr Sachen,

00:21:29.144 --> 00:21:35.336
aber die nächste, die für mich grundlegend meinen CSS-Schreibstil geändert hat, waren eben die Custom Properties.

00:21:36.272 --> 00:21:47.644
Also, das CSS schaut jetzt einfach ganz, ganz anders aus. Ich habe es eh vorher erwähnt, dieses Deklarationen von Eigenschaften wiederholen, mache ich eigentlich relativ selten nur noch.

00:21:47.644 --> 00:21:51.468
Also, es gibt einmal die Deklaration und dann ändere ich auch nicht nur noch den Variablenwert

00:21:51.612 --> 00:21:57.644
in einem Media Query oder als Container Query oder wie auch immer und eben auch viel mit

00:21:57.644 --> 00:22:01.244
diesen, oder nicht viel, aber halt auch teilweise dieser Fallback-Geschichten und das, was ich

00:22:01.244 --> 00:22:04.764
eben vorher angesprochen habe mit der CSS API, also das CSS schaut bei mir jetzt wirklich

00:22:04.764 --> 00:22:05.764
sehr, sehr anders aus.

00:22:05.764 --> 00:22:10.404
Ist bei vielen Leuten wahrscheinlich schon früher passiert, nur aufgrund der Tatsache,

00:22:10.404 --> 00:22:13.684
dass ich einfach bei der Stadt gearbeitet habe und wir bis vor, weiß nicht, drei Jahren

00:22:13.684 --> 00:22:18.404
noch 10% IRL-Fuser hatten, haben wir einfach noch nicht so viel mit Custom Properties gearbeitet

00:22:18.404 --> 00:22:20.404
und ich habe erst vor kurzem damit angefangen, so richtig.

00:22:22.102 --> 00:22:27.288
Ja, aber ist bei mir auch tatsächlich so, dass ich die eher spärlich einsetze.

00:22:27.441 --> 00:22:32.914
Also, genau, also, ich hatte, hatte, war ja davor auch bei der Rheinischen Post.

00:22:33.184 --> 00:22:37.592
Die haben auch noch so, sagen wir mal so, viele Bürgermeister und Ämter,

00:22:37.592 --> 00:22:42.492
die dann die Zeitung lesen und die dann eben entsprechend auch mit IE noch unterwegs waren.

00:22:42.492 --> 00:22:49.001
Genau, mittlerweile ist das nicht mehr der Fall. Also, die haben auch wieder einen Relaunch gemacht und da gibt's keinen IE-Support mehr.

00:22:49.109 --> 00:22:55.532
Aber ansonsten ist es, ich bin eigentlich immer relativ konservativ und ich benutze

00:22:55.532 --> 00:22:58.994
ja auch weiterhin sehr gerne SCSS.

00:22:59.291 --> 00:23:07.932
Und dann fackele ich darüber relativ viel ab. Da gibt es ja auch die Möglichkeit, Variablen mit diesem Ausruhrzeichen default zu versehen,

00:23:07.932 --> 00:23:14.379
also ähnlich wie das bei important ist, nur dass es im SCSS-Umfeld eben bedeutet, also

00:23:14.732 --> 00:23:16.251
Das ist im Prinzip der Fallback,

00:23:16.732 --> 00:23:20.122
den du auch bei den Custom-Properties beschrieben hast.

00:23:20.232 --> 00:23:22.976
Mhm. Nur eben in SCSS-Land.

00:23:24.326 --> 00:23:31.232
Ja. Ja, was, ähm ... Wo es halt voll praktisch ist, hab ich gemerkt, weil bei Farb ...

00:23:31.232 --> 00:23:35.957
Wenn ich Farben definier, bei Farbdefinitionen, also, wenn ich jetzt nicht grad Text verwende,

00:23:36.232 --> 00:23:43.402
sondern vielleicht HSL, H-S-L, oder Ähnliches, oder vielleicht irgendwas von dem neueren Scheiß,

00:23:44.041 --> 00:23:53.132
LAB und LCH, LARP und LCH, dann ist es schon praktisch, wenn ich mit Custom Properties arbeite,

00:23:53.132 --> 00:23:56.532
weil dann kann ich für jeden einzelnen Wert, für jeden einzelnen Parameter eine eigene Custom Property verwenden

00:23:56.532 --> 00:24:01.398
und die dann z.B. bei HSL könnte ich dann nur die Leitnisse irgendwie dann verändern.

00:24:02.955 --> 00:24:15.918
Ich würde kurz gerne einspringen, weil für Freunde frage ich mal kurz nach, was dieses LCH, für die Hörer und Hörer, dann frage ich doch jetzt Vorsichtshörer nach, was ist LCH, was habe ich verpasst?

00:24:16.764 --> 00:24:22.305
Das sind so neue Farbfunktionen, ich, das wäre taktisch.

00:24:22.305 --> 00:24:24.389
Aber ist HSL nicht mehr das neue coole?

00:24:25.073 --> 00:24:31.555
Nein, überhaupt nicht. Das ist sowas von alt veraltet. Also das ist, dass wir jetzt niemand mehr, buh.

00:24:32.770 --> 00:24:39.085
Nein, also ich verwende Heizer auf jeden Fall aktuell noch, nur das Problem ist bei LCH oder,

00:24:39.685 --> 00:24:41.467
LAB oder OK LCH oder OK LAB.

00:24:45.885 --> 00:24:50.765
Dass die, die sind so heiß, dass sie noch nicht in allen Browsern unterstützt werden.

00:24:50.765 --> 00:24:56.045
Und da ist der Schmäh, dass sie nicht den sRGB-Farbraum verwenden, sondern einen, der

00:24:56.045 --> 00:24:59.489
alle Farben, die irgendwie das menschliche Auge wahrnehmen kann, abbilden.

00:24:59.669 --> 00:25:04.325
Und die Bildschirme, die wir haben, die können das jetzt auch schon langsam, deswegen werden

00:25:04.325 --> 00:25:05.062
die jetzt interessant.

00:25:05.575 --> 00:25:08.405
Das heißt, die haben einfach noch mehr Farben, noch sattere Farben.

00:25:08.405 --> 00:25:14.925
Aber das ist alles sehr schön beschrieben eben in Tag 93 und in Tag 98.

00:25:14.925 --> 00:25:21.725
Der Grund, warum es nicht nur LCH gibt und LAB, sondern dasselbe mit OK davor, ist, dass

00:25:21.725 --> 00:25:26.109
die anderen beiden nicht OK sind. Also es gibt irgendeinen Fehler beim Blau.

00:25:26.730 --> 00:25:38.397
Das Blau driftet ab ins Lila, an einem bestimmten Punkt. Und das OK Lab und das OK LCH, die sind einfach nur eine gefixte Variante davon.

00:25:38.910 --> 00:25:56.023
Genau, da heißt es, dass es dann keine Abkürzung, sondern das das meint wirklich dann okay sozusagen. Ja, nicht broken. Das ist großartig, ja, ja, aber dann Tag 98 ist hast du ja ein super Beispiel davon drin von LCH und LCH.

00:25:57.176 --> 00:26:03.954
Genau, das habe ich von André Sidnik gestohlen, von evilmartians.com, der hat einen sehr, sehr guten Artikel darüber geschrieben.

00:26:04.126 --> 00:26:12.795
Es ist noch viel tiefer ins Detail gehend, da habe ich auch die Hälfte wieder nicht verstanden, aber ich glaube, die Grafik war schön, die habe ich kopiert und das Wichtigste rausgenommen.

00:26:13.497 --> 00:26:18.556
Und genau, also eben immer beim Blau trifft es ein bisschen ins Lilane ab oder in dieses Violette.

00:26:19.771 --> 00:26:23.026
Und das ist die okaye Variante. Aber wie gesagt, Browser Support ist jetzt noch nicht so wirklich da,

00:26:23.026 --> 00:26:26.433
deswegen ist HSL immer noch cool.

00:26:27.026 --> 00:26:31.026
Wenn der Browser Support nicht da ist, was passiert denn dann, wenn ich LCH benutze

00:26:31.026 --> 00:26:38.026
und kann ich dann vielleicht auch einen Fallback angeben? Also, dass ich die dann zuerst oder als zweites benenne,

00:26:38.026 --> 00:26:39.378
dann die HSL-Lösung?

00:26:41.026 --> 00:26:46.026
Ja, so wie man es, weiß nicht, früher bei RGBA auch gemacht hat.

00:26:46.026 --> 00:26:51.726
Ich glaube, oder? War das so? Ja. Ja, dass man einfach die Eigenschaft zweimal definiert.

00:26:51.873 --> 00:26:55.105
Und das, was man nicht kann, das lasst man einfach und nimmt das Erste.

00:26:56.906 --> 00:27:03.366
Okay. Ich glaube, die neuen Farbräume, die sind jetzt entweder mit dem aktuellen Chrome

00:27:03.406 --> 00:27:06.322
oder mit dem, der jetzt Beta ist, kommende Jahr.

00:27:06.727 --> 00:27:11.826
Also ... Ja, sehr gut. Genau, Apple kann ja schon seit 2016 hier diesen P3-Farbraum.

00:27:11.866 --> 00:27:14.019
Aber der ist auf jeden Fall noch nicht so ...

00:27:14.253 --> 00:27:20.060
Der ist noch nicht ganz so krass. Also der ist schon krass, aber nicht so krass wie die eben beschriebenen, genau.

00:27:21.006 --> 00:27:25.886
Und was da eben zum einen der Fall ist, ist die Farbmodelle, die die sind dann

00:27:25.886 --> 00:27:29.486
meistens irgendwie auf eine gewisse Art und Weise gemappt und,

00:27:30.961 --> 00:27:51.126
Gerade wenn man dann so Farbverläufe macht, dann sieht man die Unzulänglichkeiten der Mappings teilweise, je nachdem, von welcher Farbe zu welcher Farbe man geht, zum Beispiel der HSL-Farbraum, der ist ja so quasi in einem, das ist ja ein Rad oder ein Zylinder und RGB ist ein Würfel.

00:27:51.505 --> 00:28:05.800
Und wenn man je nachdem also wenn man die gleichen Farben nimmt und Farbverläufe macht, dann dann laufen die halt durch eine farblose Zone teilweise in der Mitte, weil eben das einen Zylinder ist und das andere ein Kugel.

00:28:06.637 --> 00:28:15.964
Und da hilft es auch manchmal tatsächlich beim Farbverlauf den Farbraum zu wechseln, um zu schauen, ob der Farbverlauf nicht vielleicht cooler aussieht in dem anderen Farbraum.

00:28:16.153 --> 00:28:27.531
Und das hast du bei den Dingern dann einfach nicht mehr, also die haben dann nicht mehr solche doofen Mappings, sondern gute.

00:28:27.531 --> 00:28:33.831
Und was halt auch cool ist, ist, dass die quasi nicht nur die Farben mathematisch versuchen zu berechnen,

00:28:33.831 --> 00:28:38.649
sondern die sagen halt, Gelb wirkt immer viel zu hell.

00:28:39.010 --> 00:28:43.131
Und wenn man aber eigentlich auf einem mittleren Helligkeitslevel ist,

00:28:43.131 --> 00:28:47.688
dann müsste das Gelb eigentlich auch, dürfte das nicht so rausknallen.

00:28:47.913 --> 00:28:51.514
Und dann korrigieren die das so ein bisschen für unser menschliches Auge.

00:28:51.731 --> 00:28:56.663
Sodass du dann quasi, wenn du durch den ganzen Regenbogen durchgehen würdest,

00:28:56.897 --> 00:29:01.731
würdest du bei einem Farbverlauf in RGB zum Beispiel,

00:29:02.028 --> 00:29:04.531
da werden bestimmte Farben relativ dunkel, so blau,

00:29:05.026 --> 00:29:08.231
und andere wie Pink und Gelb knallen halt total raus.

00:29:08.330 --> 00:29:16.511
Und in diesen neuen Farbräumen wäre das quasi alles gleichermaßen entweder hell oder eben

00:29:16.511 --> 00:29:21.031
dunkel oder eben so mittelmäßig hell.

00:29:21.986 --> 00:29:29.231
Mir kommt vor, dass du jetzt gerade ein bisschen erklärt hast, den Effekt in Tag 95, wenn

00:29:29.231 --> 00:29:36.129
ihr mitschauen möchtet. Da gibt es nämlich die Color Mix Function, die es einem erlaubt, zwei Farben zu mischen.

00:29:36.516 --> 00:29:42.591
Also ich kann sagen in dieser Color Mix Function 95 kann ich sagen, nimm bitte blau und weiß und

00:29:42.591 --> 00:29:51.631
vermisch die im sRGB Farbraum oder im HSL oder in Lab. Jetzt habe ich es auf drei verschiedene

00:29:51.631 --> 00:29:56.111
Varianten ausgesprochen. Sehr gut, vielleicht schaffe ich noch zwei andere. Aber man muss sich das so

00:29:56.111 --> 00:30:01.711
anschauen, was am Ende rauskommt. Ich habe in jeder Variante, also einmal sRGB, dann eben HWB

00:30:01.711 --> 00:30:07.271
oder HSL habe ich diese Farben vermischt und schon eigentlich fast immer komplett anders aus.

00:30:09.707 --> 00:30:14.587
Ja, genau, das müsste eigentlich, genau, das ist ein Effekt des Mappings, ja.

00:30:14.965 --> 00:30:19.648
Da sollte sich mal einer auskennen. Ich habe mir gedacht, passt, also das war so ein Beispiel,

00:30:19.648 --> 00:30:23.968
wo ich mir gedacht habe, okay, ich habe das jetzt gelesen, da hat Adam Argyle so ein Artikel geschrieben,

00:30:23.968 --> 00:30:30.768
okay, passt, Color Mix, ich sage in welcher Funktion, zwei Farben, zack, habe ich es sofort

00:30:30.768 --> 00:30:35.168
erklärt, halbe Stunde, perfekt. Und dann bin ich da gesessen und habe mir gedacht, warum schauen

00:30:35.168 --> 00:30:38.128
die so unterschiedlich aus, die Farben? Ich checke es irgendwie nicht, dann habe ich das gelesen und

00:30:38.128 --> 00:30:43.128
habe es nicht verstanden, habe es nochmal gelesen und dann habe ich es einfach gelassen und habe das Bild von ihm kopiert und gesagt, passt.

00:30:43.128 --> 00:30:48.128
Aber das erklärt es schon ein bisschen genauer, warum das so ist. Aber das ist ein super Beispiel für ein Artikel, wo ich mir gedacht habe,

00:30:48.381 --> 00:30:57.014
ja, ich habe eigentlich verstanden grundsätzlich, worum es geht und was am Ende rauskommt, war einfach zu komplex, weil dieses Farbthema ist echt nicht so easy.

00:30:57.128 --> 00:30:59.128
Super schwierig.

00:30:59.589 --> 00:31:06.128
Ganz. Also ich hab immer gesagt, die Typografen und Typografinnen sind die ärgsten Nerds.

00:31:06.128 --> 00:31:10.128
Also wenn man sich mal so einen Talk anschaut, so einen Typografie-Talk, die sind ja extrem heftig.

00:31:10.128 --> 00:31:13.407
Aber ich glaube, ich würde jetzt eher sagen, dass die Farbmenschen noch ärger sind.

00:31:14.389 --> 00:31:21.128
Ja, auf jeden Fall. Da gibt es auch einen Talk, ich glaube auch vom CSS Day wahrscheinlich,

00:31:21.356 --> 00:31:25.227
von dem Chris Lilley über Farbe. Ja, den würde ich aber empfehlen.

00:31:26.128 --> 00:31:29.035
Und da haut's dir auch echt die Socken weg.

00:31:30.052 --> 00:31:34.688
Ja, da hab ich auch was von ihm gesehen, nicht vom CSSD. Der ist zu Hause gesessen, aber der war super.

00:31:34.748 --> 00:31:36.012
Da hab ich wirklich jetzt ...

00:31:36.348 --> 00:31:41.228
Da hab ich auch die Geschichte mit Lab und OKLab verstanden.

00:31:41.288 --> 00:31:43.588
Dann immer besser verstanden, worum's geht.

00:31:44.186 --> 00:31:49.728
Sehr viele Formeln und so was hab ich nicht verstanden, aber zumindest das Grundlegende, warum's das jetzt braucht

00:31:49.728 --> 00:31:52.108
und was es macht, also der ist super.

00:31:53.611 --> 00:31:58.113
Ist kein Zufall, dass die beiden verheiratet sind. Lea Verou und Chris Liddy, ja.

00:31:58.527 --> 00:32:02.117
Stimmt. Oder zusammen, weil sie nicht mehr verheiratet sind.

00:32:02.157 --> 00:32:05.237
Die haben auch zusammen an dieser Color Spec gearbeitet.

00:32:05.277 --> 00:32:10.491
Dann zusammen mit dem Adam Argyle, den du schon erwähnt hattest, und der Una. Ja.

00:32:11.058 --> 00:32:14.817
Sehr cool. Ich würd noch gern, wenn wir schon beim Thema sind ...

00:32:14.857 --> 00:32:19.397
Ihr habt sicher echt das schwierigste Thema ausgesucht, wo ich am meisten imitiere.

00:32:19.437 --> 00:32:22.397
Aber was mir extrem gut gefällt, ist Tag 92.

00:32:22.743 --> 00:32:27.568
Der Relative Color Syntax. Das ist super cool, darauf freue ich mich wirklich sehr, weil das,

00:32:27.797 --> 00:32:32.677
was ich vorher erwähnt habe, man könnte diese HSL Function irgendwie nehmen und dann einzelne

00:32:32.677 --> 00:32:35.917
Werte in Variablen speichern und dann kann man schön damit arbeiten. Das ist dann nicht mehr

00:32:35.917 --> 00:32:42.037
notwendig, weil da kann ich einfach hergehen und sagen, nimm dir einen Hexwert und da nimm dir

00:32:42.037 --> 00:32:47.677
bitte aus dem Hexwert dann den RGB-Wert und dividier den durch 50 oder nur den B-Wert durch 50

00:32:47.677 --> 00:32:53.997
oder nimm dir bitte aus diesem hexwert und mach draus lab oder keine ahnung also das ist wirklich

00:32:53.997 --> 00:33:03.677
sehr cool oder ich könnte sagen nimm diesen srgb, nein rgb wert und mach draus hsl und beim l

00:33:03.677 --> 00:33:11.677
zieh bitte zehn prozent ab oder statt dem h verwend zehn oder was auch immer also ich kann

00:33:11.677 --> 00:33:16.477
wirklich jeden ich kann sozusagen einen wert nehmen den einen anderen umwandeln und dann auch

00:33:16.477 --> 00:33:20.843
nochmal abändern. Das ist schon sehr, sehr cool.

00:33:21.465 --> 00:33:27.377
Das sind ja auch so, also diese Farben und die Farbfunktionen, das erschließt ja so

00:33:27.377 --> 00:33:33.177
eine ganz neue Welt, weil eigentlich haben sich ja die Farben, also bis auf den Alpha

00:33:33.177 --> 00:33:38.083
Channel, so, uh, Alpha Channel, wir haben Transparenz. Das war ja so eigentlich das

00:33:38.173 --> 00:33:44.137
Einzige, wo wir, was so als Neuerung kam. Ich meine, irgendwann ganz früh gab es mal

00:33:44.137 --> 00:33:49.831
Ich glaube, das lag aber einfach, ich weiß nicht mehr, woran das lag, lag es an den Bildschirmen, lag es an den Browsern, man weiß es nicht.

00:33:50.137 --> 00:33:53.099
Beides vermutlich.

00:33:53.441 --> 00:33:57.137
Ja genau, und jetzt, also was da abgeht, also es ist auch total spannend.

00:33:57.137 --> 00:34:02.137
Also wie kannst du das überhaupt testen?

00:34:02.533 --> 00:34:12.137
Also was macht man da? Also du brauchst ja theoretisch verschiedene HDR-Monitore, dann brauchst du vielleicht noch einen Monitor, der nicht HDR hat, damit du irgendwie gucken kannst.

00:34:12.372 --> 00:34:17.225
Sieht's dann irgendwie ganz schlimm aus bei Leuten, die keinen High Dynamic Range haben.

00:34:17.441 --> 00:34:24.937
Und auch so Accessibility-Geschichten wie Vordergrund, Hintergrund, Kontrast und sowas,

00:34:24.937 --> 00:34:29.900
Die müssten ja dann eigentlich auch alle wieder neu infrage gestellt sein, theoretisch.

00:34:30.899 --> 00:34:35.526
Das stimmt, ja. Also, wie testet man das? Also, in Wien würde man sagen, wird schon passen.

00:34:35.769 --> 00:34:42.980
Nein, du hast schon recht, es ist schwer zu testen, ja. Aber es ist super spannend, weil ich habe, ganz ehrlich,

00:34:43.070 --> 00:34:47.260
ich habe bis jetzt einfach immer HEX oder RGB verwendet, weil, keine Ahnung,

00:34:47.260 --> 00:34:49.940
habe mich einfach nicht interessiert, warum soll ich dieses andere Zeug verwenden.

00:34:50.092 --> 00:34:55.250
Und jetzt, wo ich drüber geschrieben habe, merke ich einfach, es ist schon wirklich einfach intuitiver,

00:34:55.619 --> 00:34:58.660
mit diesen Funktionen zu arbeiten, wenn man sich ein bisschen damit beschäftigt hat

00:34:58.660 --> 00:35:02.092
Und je öfter man's verwendet hat, desto mehr Sinn macht's irgendwie auch.

00:35:02.200 --> 00:35:03.965
Also, das ist schon sehr cool.

00:35:04.694 --> 00:35:12.922
Ja. Genau, also ich glaub, dieses LCH ist ja im Grunde genommen ein ähnliches Setup wie HSL.

00:35:14.120 --> 00:35:18.998
Nur dass die Komponenten gedreht sind. Deswegen ist das L halt nicht hinten, sondern vorne.

00:35:19.187 --> 00:35:25.700
Genau, so Lightness und dann Chroma sozusagen, die Vibrance, die quasi Sättigung der Farbe.

00:35:25.700 --> 00:35:30.233
Und dann H, so wo auf dem Farbrad ist jetzt diese Farbe.

00:35:31.268 --> 00:35:40.300
Und bei dem Lab ist es so, dass L wieder Lightness ist. Und dann scheint, also ist es wohl so, dass wir Menschen,

00:35:40.460 --> 00:35:45.888
also wir können quasi entweder blau wahrnehmen oder gelb.

00:35:46.203 --> 00:35:53.500
Und dann grün oder rot. Und genau, das sind halt quasi die A, B-Achsen, wo man sagen kann,

00:35:53.500 --> 00:35:56.772
entweder eine Farbe hat Rotanteil, dann hat die aber keine grünen Teile.

00:35:57.492 --> 00:36:02.002
Oder umgekehrt. Und dann das Gleiche noch mal mit der blau-gelben Achse.

00:36:03.055 --> 00:36:08.840
Ich glaube, wenn man sich diese Sachen merkt, dann kann man irgendwann wirklich aus dem Kopf

00:36:08.880 --> 00:36:15.118
wahrscheinlich Farben, also nicht hundertprozentig genau, aber so einigermaßen gut auch runterschreiben.

00:36:15.317 --> 00:36:18.980
Zumindest viel besser als mit Hex.

00:36:20.196 --> 00:36:27.317
Also, schwarz kann ich, weiß kann ich, rot, grün, blau kann ich auch, hellgrau kann ich auch, das war's.

00:36:28.118 --> 00:36:34.046
Und ich weiß, dass 1, 2, 3, 4, 5, 6 ist so ein dunkelblau, aber das war's auch schon.

00:36:34.266 --> 00:36:42.323
Und ich glaube, bei diesen neuen Funktionen, die man sich ein bisschen damit beschäftigt hat und dann mal eine Weile verwendet hat, wenn es so weit geht, dann geht es auf jeden Fall deutlich besser.

00:36:43.917 --> 00:36:48.139
Sehe ich auch so von. Auf jeden Fall juckt es mich da schon, mit zu spielen.

00:36:49.046 --> 00:36:51.646
Ja, ihr merkt mir schon, das ist sehr, sehr viel Ahnung.

00:36:51.646 --> 00:36:56.726
Wenn man einfach einen sanften Einstieg will, dann kann ich eben die Tage empfehlen,

00:36:56.726 --> 00:37:03.926
die 98, 93 und ich habe sogar auch, eben weil ich gesagt habe,

00:37:03.926 --> 00:37:09.726
gewisse Sachen weiß ich aber gar nicht, habe ich auch so Dinge wie die Tage 30,

00:37:09.726 --> 00:37:21.006
die Hue, Whiteness, Blackness, glaube ich, oder? HWB-Funktion und LabColorFunction ist 23. Ja,

00:37:22.383 --> 00:37:29.046
genau. Ja, ich bin gespannt. Wir können ja auch mal hier direkt die Frage an die Zuhörenden

00:37:29.046 --> 00:37:34.006
platzieren, ob ihr diese neuen Farben schon benutzt und ob ihr irgendwelche coolen Sachen

00:37:34.006 --> 00:37:37.264
und damit gebaut habt, die ihr uns vielleicht mal schicken könnt.

00:37:38.812 --> 00:37:42.506
Genau. Das ist ein super Punkt, weil das, was wir jetzt noch haben,

00:37:42.546 --> 00:37:48.266
oder ganz viel haben mit all diesen neuen Sachen, nicht nur mit den Farben, sondern auch mit den Cascade-Layers

00:37:48.306 --> 00:37:52.506
oder mit den Container-Queries, ist, dass momentan noch sehr viel theoretisch ist.

00:37:52.546 --> 00:37:56.266
Es gibt schon ein paar Leute, die schon aus der Praxis berichten können,

00:37:56.306 --> 00:37:58.306
aber es ist alles noch sehr, sehr neu.

00:37:58.743 --> 00:38:02.006
Alles, was irgendwie so ein bisschen Praxishintergrund hat, ist spannend.

00:38:02.006 --> 00:38:02.272
Vielen Dank für's Zuschauen.

00:38:04.280 --> 00:38:08.007
Ja, genau, also alles, was ihr mit neuem, modernen CSS macht,

00:38:08.214 --> 00:38:10.239
bitte schickt's uns gerne zu.

00:38:11.734 --> 00:38:17.171
Ähm, genau bei den Cascade-Layers, da ist es bei mir so, die rühre ich erst mal noch nicht an.

00:38:17.396 --> 00:38:22.671
Das muss erst mal überall supported sein, bevor ich mich damit beschäftigen möchte.

00:38:24.470 --> 00:38:30.870
Ich schon. Und zwar versuche ich jetzt ... Ich mach's eh noch nicht so lang.

00:38:30.930 --> 00:38:37.850
Ich versuch's erst seit drei oder vier Jahren, Und jetzt habe ich beschlossen, jetzt ziehe ich es durch.

00:38:37.850 --> 00:38:41.882
Ich bin jetzt auf Kirby umgestiegen, auf ein PHP-basiertes CMS.

00:38:41.981 --> 00:38:44.770
Schon eine Weile her, dass ich mit PHP gearbeitet habe, aber es geht ganz gut.

00:38:44.770 --> 00:38:48.630
Und da werde ich all diese neuen Sachen verwenden, weil da ist es mir egal.

00:38:48.630 --> 00:38:55.170
Da weiß ich, dass die Zielgruppe ist hauptsächlich Leute, die relativ freshe Browser haben.

00:38:55.170 --> 00:38:58.730
Und wenn nicht, dann habe ich sehr schönes HTML geschrieben,

00:38:58.730 --> 00:39:01.723
und dann wird die Seite halt einfach nur mit HTML dargestellt und wird trotzdem funktionieren.

00:39:03.830 --> 00:39:11.410
Ja, das geht natürlich immer beim eigenen Projekt. Genau, beim eigenen Projekt, ja. Soll ich dir noch was Cooles erzählen?

00:39:11.410 --> 00:39:13.050
Gerne.

00:39:13.050 --> 00:39:18.810
Weil du, Vanessa, hast ja gesagt, du bist da nicht so voll drinnen bei dem neuen heißen Scheiß

00:39:18.810 --> 00:39:23.930
und CSS. Dann zeig ich dir was ganz, ganz Cooles. Und zwar 75.

00:39:28.568 --> 00:39:38.090
Ja! Was ist das? Font Palettes. Und zwar ist es so, also das ist das Erste, was ich nicht gewusst

00:39:38.090 --> 00:39:43.290
habe. Es gibt Color Fonts, das heißt Fonts, die von Haus aus schon mal mehrere Farben darstellen

00:39:43.290 --> 00:39:47.130
können. Das heißt, du gehst jetzt nicht mit der Color Eigenschaft her und färbst die ein,

00:39:47.130 --> 00:39:52.570
sondern die können halt drei, vier, fünf, sechs, sieben Farben. Das ist schon mal ganz cool. Und

00:39:52.570 --> 00:39:56.410
was die auch noch können ist, dass sie mit verschiedenen Farbpaletten daherkommen können,

00:39:56.410 --> 00:40:00.450
also zum Beispiel das, was man da sieht, dieses Beispiel, das sind so in einem orange,

00:40:00.679 --> 00:40:06.890
gelb und braun Tönen gehalten, aber es gibt dann auch noch versteckt in der Schrift,

00:40:07.764 --> 00:40:12.130
unterschiedliche Farbpaletten, zum Beispiel in pink Tönen oder in grün Tönen oder in grau Tönen

00:40:12.130 --> 00:40:18.330
und da gibt es die Base Palette Eigenschaft beziehungsweise auch noch mal die Font Palette

00:40:18.330 --> 00:40:24.562
Eigenschaft oder die Font-Palette-Values-Add-Rule, mit der ich sagen kann, bitte verwend nicht

00:40:24.679 --> 00:40:28.379
Die erste Farbe, die Standfarbe, die dritte, vierte, fünfte oder wie auch immer.

00:40:30.594 --> 00:40:36.444
Das ist unglaublich. Und ich glaube, das Wort War, das du dafür gewählt hast,

00:40:36.444 --> 00:40:42.444
für die Demo, ich muss mal kurz alle Möglichkeiten in meinem Kopf durchgehen,

00:40:42.444 --> 00:40:44.444
was ich jetzt alles damit machen kann.

00:40:44.772 --> 00:40:45.951
Was ich damit alles anstellen kann.

00:40:46.915 --> 00:40:52.444
Da macht das Web ja wieder richtig Spaß. Ja, vor allem, du kannst auf Tag 76 weiterschauen.

00:40:52.739 --> 00:40:58.444
Also einfach unten weiterklicken. Da geht's nämlich weiter. Man kann nämlich diese Paletten

00:40:58.444 --> 00:41:02.524
überschreiben. Es gibt nämlich die Eigenschaft, die heißt Override Colors. Und da kann ich mit

00:41:02.524 --> 00:41:11.964
Null-Index basierend sagen, verändere Farbe 0 oder verändere Farbe 3, wie auch immer. Das heißt,

00:41:11.964 --> 00:41:16.124
du kannst einzelne Farben aus dieser Palette dann überschreiben oder einfach alle überschreiben.

00:41:16.124 --> 00:41:21.564
Das heißt, du kannst auch deine eigene Farbpalette definieren. Also mir wäre überhaupt nicht

00:41:21.564 --> 00:41:25.684
eingefallen, wie man diesen Effekt bekommen könnte, außer man bastelt halt ein SVG,

00:41:25.684 --> 00:41:29.164
man vielleicht ein Canvas. Aber das ist ja mega.

00:41:29.164 --> 00:41:34.684
Ja, oder so wie früher, wie hat denn das geheißen? SFR oder LSFR oder sowas?

00:41:34.684 --> 00:41:40.204
Ja. Wo man irgendwie einfach Text hingeschrieben hat und dann gab es irgendein PHP-Skript,

00:41:40.204 --> 00:41:43.124
das dann daraus ein Bild generiert hat. Oder wie ist denn das? Das funktioniert

00:41:43.124 --> 00:41:43.644
eigentlich schon eine Weile her.

00:41:43.926 --> 00:41:49.884
Ziemlich eklig, ja. Genau, es gab doch erst die Flash-Variante.

00:41:49.884 --> 00:41:55.804
Ja, genau. Dann später gab's eine Variante, die hat das mit SVG, glaub ich,

00:41:55.864 --> 00:41:57.764
so dynamisch dann ...

00:41:59.212 --> 00:42:07.332
Genau. Aber war natürlich ... hat furchtbar CPU gefressen. Und ... wir sind froh, dass wir das nicht mehr machen müssen.

00:42:07.566 --> 00:42:08.007
Ja.

00:42:09.088 --> 00:42:12.844
Eine Sache muss ich nur sagen, das ist auch alles relativ neu.

00:42:12.904 --> 00:42:20.164
Und was mir und auch LeserInnen aufgefallen ist, ist, dass der Safari manchmal abstürzt bei den Blockartikeln.

00:42:20.164 --> 00:42:26.525
Also irgendwie ganz so geil funktioniert's nicht. Dann nimmt man halt was anderes her.

00:42:27.164 --> 00:42:32.164
Kurze Frage, ist das der Safari, ist das nur der iOS-Safari, der abstutzt?

00:42:32.164 --> 00:42:34.501
Oder ist das auch der Mac-Safari?

00:42:35.428 --> 00:42:38.164
Mac. MacOS. Ich hab's auf iOS gar nicht probiert, ich hab kein iPhone.

00:42:38.164 --> 00:42:42.164
Da war's irgendwie so, sobald ich versucht hab, den Text zu markieren,

00:42:42.164 --> 00:42:45.790
irgendwie zu selektieren, genau.

00:42:46.204 --> 00:42:48.959
Abgestützt hat's dann.

00:42:49.454 --> 00:42:51.164
Bei mir hält's.

00:42:52.091 --> 00:42:57.164
Okay. Kann sein, dass es einfach... Also, ich hab das... Man hab ihn geschrieben im Jänner.

00:42:57.164 --> 00:43:01.164
Vielleicht gibt's schon eine neue Version, wo es im Jänner nicht passiert, aber

00:43:01.164 --> 00:43:03.029
manchmal ist es passiert.

00:43:03.614 --> 00:43:04.820
Ich komme auch bald zur Fireweiss.

00:43:06.972 --> 00:43:13.822
Ach so, vielleicht kannst du uns in der Zwischenzeit was anderes über Farben erzählen, was nicht speziell mit Farben zu tun hat, aber mit Hintergrundfarben.

00:43:13.822 --> 00:43:18.504
Ich habe gesehen, den Backdrop für Dialoge hilfreich.

00:43:19.494 --> 00:43:20.962
In irgendeinem Talk.

00:43:22.348 --> 00:43:27.822
Im Tag 22. Ja, Backdrop-Soldo-Element.

00:43:27.822 --> 00:43:39.822
Das ist ganz cool, weil, also, es ist immer super cool, dass ich überhaupt, dass wir jetzt dieses Dialog-Element haben, mit dem man einfach Model-Windows machen kann und das funktioniert super.

00:43:39.822 --> 00:43:51.822
Also ich hab das jetzt auch zufälligerweise hart dran gearbeitet. Geht alles tip-top und mit dem Backdrop-Pseudo-Element kann ich steuern, wie die Hintergrundfarbe oder der Hintergrund sozusagen hinter dem Model dargestellt wird.

00:43:51.983 --> 00:43:55.942
Also oft ist es ein klassisches transparentes, schwarz-transparentes, wie auch immer,

00:43:56.890 --> 00:44:00.622
aber ich könnte auch eine deckende Farbe verwenden oder vielleicht irgendein Gradient oder ähnliches.

00:44:00.622 --> 00:44:04.782
Was aber ganz spannend ist, und das steht da jetzt nicht drinnen,

00:44:04.782 --> 00:44:13.102
aber Kilian Walkoff hat einen Artikel geschrieben, Backdrop erbt keine Custom-Properties,

00:44:13.490 --> 00:44:17.542
das heißt, wenn ich auf dem HTML-Element oder wenn ich Root verwende und dort eine

00:44:17.542 --> 00:44:23.302
Custom Property definiere, dann existiert sie im Backdrop nicht. Oder wenn ich sie im Dialog

00:44:23.302 --> 00:44:27.362
oder sonst irgendeinem Elternelement definiert, dann wird die da nicht weitergegeben.

00:44:29.568 --> 00:44:36.112
Das ist spannend für Design-Systeme und so, also wenn ich Design-Tokens habe und ich definiere die nur vom Root, dann sind die da nicht drin.

00:44:37.130 --> 00:44:39.254
Und ich hab natürlich vergessen, warum.

00:44:40.100 --> 00:44:55.373
Aber der Shep weiß das wahrscheinlich. Nee, den eigentlichen Grund weiß ich nicht, also ich hab da nur so Theorien, genau, aber es steht glaube ich in der Spectrum, also es ist kein Bug oder sowas, also es scheint eine Implementations-Hürde zu sein, dass das irgendwie nicht geht.

00:44:55.918 --> 00:44:57.873
Ich glaube, aber ich bin mir nicht sicher,

00:44:57.933 --> 00:45:01.873
dass dieses Backdrop-Element oder dieser Dialog,

00:45:01.933 --> 00:45:03.065
die wandern ...

00:45:04.353 --> 00:45:09.073
Die wandern ja ... Nee, das kann er nicht. Aber der steht quasi parallel zum Dokument.

00:45:09.133 --> 00:45:11.433
Auch in deinem DOM-Inspektor, glaub ich.

00:45:12.572 --> 00:45:19.233
Und der ist nicht in das HTML reinverschachtelt. Und da macht das dann irgendwie Sinn.

00:45:20.373 --> 00:45:29.313
Aber was dagegen spricht, ist, dass andere Elemente Ähnliches tun und da das, also das da funktioniert, glaube ich,

00:45:29.313 --> 00:45:33.073
und darum ist das irgendwie tatsächlich merkwürdig. Ja, aber es wäre mal ganz cool,

00:45:33.073 --> 00:45:37.833
das so aus reiner Nördigkeit heraus mal rauszufinden.

00:45:38.606 --> 00:45:43.193
Wie gesagt, Kilian Varkov hat in seinem persönlichen Blog oder was,

00:45:43.193 --> 00:45:45.433
der Polypain, nein, ich glaube, in seinem persönlichen Blog hat er drüber geschrieben,

00:45:45.433 --> 00:45:48.553
oder Polypain, bin mir grad nicht sicher, man wird's finden.

00:45:48.986 --> 00:45:50.313
Ja, wir packen das für die Show Notes.

00:45:51.219 --> 00:45:55.913
Ah ja, super. Was ich auch nicht gewusst habe, ist, dass man Backdrop auch bei Elementen im

00:45:55.913 --> 00:46:00.673
Fullscreen-Mode verwenden kann. Das heißt, wenn ich ein Bild in Fullscreen, sorry, ein Video

00:46:00.673 --> 00:46:05.113
zum Beispiel in Fullscreen setze, kann ich dort auch mit Backdrop den Hintergrund ändern.

00:46:06.252 --> 00:46:10.873
Aber auch da sehe ich bei Can I Use, es dürfte das Backdrop-Dialog-Element sein,

00:46:10.873 --> 00:46:14.813
bei Safari wieder erst ab 15.04.

00:46:16.533 --> 00:46:22.843
Ja, weil bei Chromium-Browsers sieht das ungefähr aus wie fast schon seit immer.

00:46:24.122 --> 00:46:26.507
Aber nicht beim Safari. Wenn ich jetzt das Richtige angeschaut ...

00:46:26.507 --> 00:46:28.605
Moment, den CSS-Selector gibt's noch.

00:46:29.055 --> 00:46:30.441
Aber der ist auch 15.4.

00:46:31.225 --> 00:46:37.827
Ja, ja, das ist alles relativ neu. Voll. Obwohl Safari hat ja letztens ein Update, glaub ich, rausgebracht,

00:46:37.827 --> 00:46:40.667
wo eigentlich so eine lange Liste war, wo ich total begeistert war.

00:46:40.667 --> 00:46:43.467
Aber jetzt bräuchte ich das auch.

00:46:43.756 --> 00:46:45.151
Bisschen Backdrop hier.

00:46:45.467 --> 00:46:50.767
Ja, also seit einem Jahr, zirka. Ziemlich genau seit einem Jahr gibt es Dialog-Element

00:46:50.767 --> 00:46:58.027
im Safari und dementsprechend auch Backdrop. Aber wie Backdrop... Achso, nein, okay. Wir

00:46:58.027 --> 00:47:01.867
haben ein bisschen weiter runter scrollt. Okay, ich nehme alles zurück. Backdrop für

00:47:01.867 --> 00:47:12.587
Fullscreen geht nur im Firefox und im IE11. Echt? Hm. Okay, also anscheinend wäre es

00:47:12.587 --> 00:47:15.750
theoretisch möglich, praktisch wahrscheinlich nicht so.

00:47:16.038 --> 00:47:24.947
Aber es geht ja mittlerweile mit Has, könnte man dann sagen, wenn du ein Element im Fullscreen-Mode

00:47:24.947 --> 00:47:31.707
hast, was man ja über diese Pseudoklasse Fullscreen rauskriegt, dann könntest du quasi dir einen

00:47:31.707 --> 00:47:37.346
Backdrop per Pseudo-Element am Body oder so bauen, das dann quasi automatisch über der Seite liegt.

00:47:38.363 --> 00:47:41.424
Ja, nur dass das Video schon mit dem Backdrop-Comp da ist.

00:47:42.955 --> 00:47:48.887
Okay. Ja, es wär also technisch nicht das Gleiche, aber wenn's dir nur darum geht, tatsächlich irgendwas zu haben,

00:47:48.947 --> 00:47:49.947
womit du ...

00:47:50.007 --> 00:47:52.020
Ja, stimmt, wir müssen uns zusammenhacken, ja.

00:47:52.527 --> 00:47:57.727
Genau. Ja, aber schon ein bisschen fies, muss man sagen. Also, Hacken ist schon der richtige Begriff.

00:47:58.700 --> 00:48:04.707
Ja. Was hast du bei Haze noch rausgekriegt? Also, Haze hast du einmal an Tag 36.

00:48:04.794 --> 00:48:11.753
Und dann hast du aber später, an Tag 50, noch Has mit Not verschachtelt und Not mit Has verschachtelt.

00:48:12.059 --> 00:48:16.027
Das sieht auf jeden Fall interessant aus.

00:48:15.651 --> 00:48:22.655
Ja, und zwar war es so, dass ich dann drauf gekommen bin, dass has not und not has nicht dasselbe ist.

00:48:24.032 --> 00:48:25.901
Ja, dass irgendwie einen Unterschied macht.

00:48:25.901 --> 00:48:31.501
Und ich habe es mir natürlich nicht gemerkt, aber man kann es sich durchlesen.

00:48:31.501 --> 00:48:34.286
Okay, aber es war ein guter Teaser auf jeden Fall.

00:48:34.547 --> 00:48:35.060
Genau.

00:48:36.833 --> 00:48:44.215
Genau, und zwar ist es so, wenn ich jetzt sagen würde, nimm ein Element und da has not image,

00:48:44.467 --> 00:48:50.661
Dann würde es heißen, nimm ein Element, das irgendein Element hat, das kein Image ist.

00:48:50.904 --> 00:48:58.821
Und wenn ich aber hingegen sagen würde, nimm... Nein, ich werde das jetzt nicht einfach weitermachen, das ist einfach fürchterlich, über diese Sektoren zu sprechen.

00:48:58.821 --> 00:49:01.701
Das muss ich nicht durchlesen, das bringt einfach nichts, wenn ich da jetzt not hase.

00:49:01.701 --> 00:49:05.581
Also, es ist schon mal nicht leserlich, aber dann das Ganze auch noch zu hören, vergiss das.

00:49:05.581 --> 00:49:13.076
Also, lest euch durch, durch Tag 50. Da habe ich, glaube ich, ganz gut den Unterschied zwischen hase, not und not hase erklärt.

00:49:13.725 --> 00:49:16.861
In Wahrheit, das eine spricht einfach nur an, sagt, nimm alle Elemente, die nicht ein

00:49:16.861 --> 00:49:24.167
bestimmtes sind und das andere sagt, nimm das Element, wenn es ein bestimmtes nicht hat.

00:49:24.275 --> 00:49:27.261
Was ja viel spannender ist.

00:49:27.687 --> 00:49:31.781
Ich wäre bei beiden Cases, ich wäre bei beiden vom letzten ausgegangen.

00:49:31.781 --> 00:49:33.661
Nimm das, was nicht das noch mit hat.

00:49:35.096 --> 00:49:38.490
Voll. Das könnte man Che Che Petit fragen, ob er das erklären kann.

00:49:38.751 --> 00:49:41.661
Vielleicht hat er es gehofft, wäre spannend.

00:49:41.661 --> 00:49:49.461
Was ich auch viel, viel spannender finde, ist Tag 91. Da geht es auch um Heiß. Und zwar ist da das

00:49:49.461 --> 00:49:54.781
Thema, dass Heiß, ja, also man sagt ja, Heiß ist ja der Parent Selector. Also ich kann sagen,

00:49:54.781 --> 00:49:58.701
nimm ein Element und wenn das ein bestimmtes Kindelement hat, dann macht dies das bei dem

00:49:58.701 --> 00:50:04.181
Kindelement oder beim Elterntelement. Aber es ist ja mehr als das. Ich kann mit Heiß auch sagen,

00:50:04.181 --> 00:50:12.421
Selektier bitte ein Element, wenn es ein Folge-Element hat, auf derselben Ebene, also es ist kein

00:50:12.421 --> 00:50:16.740
Kind-Element, sondern sie sind beide auf derselben Ebene und es ist gefolgt von einem anderen Element.

00:50:17.785 --> 00:50:22.880
Und da sind wir jetzt auch wieder bei Herumhäckerei, aber theoretisch könnt ihr dann einfach sagen,

00:50:23.141 --> 00:50:28.362
nimm ein Element und wenn ich da zum Beispiel drüber habe, dann nimm das, das auf dieses Element folgt.

00:50:28.506 --> 00:50:36.701
Oder, wenn ich spannende Selektoren verwende, könnte ich sagen, nimm ein Element, das davor

00:50:36.701 --> 00:50:38.319
ist, also ein Element, das...

00:50:39.255 --> 00:50:46.781
Warte mal, wie war das nochmal? Ja, du kannst quasi was mit dem vorangegangenen Element machen.

00:50:46.781 --> 00:50:47.456
Genau, genau.

00:50:47.781 --> 00:50:50.292
Ja. unmöglich wahrzumachen.

00:50:51.750 --> 00:50:57.600
Super cool. Genau, das heißt, nimm ein Element, das folgt auf ein anderes Element oder du kannst

00:50:57.600 --> 00:51:01.040
so weit gehen und sagen, nimm ein Element, das auf ein Element folgt, das auf ein anderes Element

00:51:01.040 --> 00:51:05.480
folgt, das auf ein anderes Element folgt und so kannst du eigentlich unendlich im DOM nach

00:51:05.480 --> 00:51:10.720
vor und zurück gehen und da sind ein paar Demos, also zum Beispiel habe ich da so ein Grid mit 20

00:51:10.720 --> 00:51:16.360
Buttons und ich fahre über einen drüber und der wird skaliert und gleichzeitig wird der drüber,

00:51:16.360 --> 00:51:20.480
der drunter, der links und der rechts auch nochmal mit skaliert. Oder viel spannender,

00:51:20.480 --> 00:51:23.195
Da gibt's noch eine Demo, ich weiß leider nicht von wem gerade,

00:51:23.480 --> 00:51:27.480
so eine klassische Paginierung, man sieht jetzt irgendwie die Seiten 1 bis 12.

00:51:27.534 --> 00:51:33.480
Und ich habe über eine Zahl, die wird größer und verfärbt sich,

00:51:33.773 --> 00:51:36.480
und die vorherige und die nächste, die werden ein bisschen kleiner,

00:51:36.480 --> 00:51:39.480
aber auch größer als der Rest und haben auch eine andere Farbe.

00:51:39.480 --> 00:51:40.840
Also das ist schon ganz spannend.

00:51:41.480 --> 00:51:47.636
Wobei man das auch ganz gut mit deinem Cursor-Trick von deiner Lighthouse-Seite machen könnte.

00:51:48.743 --> 00:52:14.769
Da hast du doch den hast du doch der berühmte max der berg aufsetzt genau weil der der berg aufsetzt ist quasi das man den cursor den kann man nicht per css auch austauschen durch ein bild und dieses bild in diesem bild ist halt der pfeil einfach versetzt und dadurch ist quasi die klickzone nicht da wo der pfeil über die pfeilspitze ist Genau.

00:52:15.012 --> 00:52:18.620
Da find ich das mit Haze dann tatsächlich ein bisschen eleganter,

00:52:18.892 --> 00:52:20.117
so zwei Prozent eleganter.

00:52:20.251 --> 00:52:26.660
Ja. Wobei ich sagen muss, ich hab das gepostet, und, ähm, wer ist der, der Alex Russell,

00:52:26.720 --> 00:52:33.460
der bei Chrome war, ganz lang, der hat gesagt, ja, eh cool, aber bitte Performance, Performance, Performance.

00:52:33.520 --> 00:52:35.700
Also, man muss da ein bisschen aufpassen.

00:52:35.760 --> 00:52:41.940
Es kann sein, wenn man da zu smart wird, dass es dann von der Performance her ein bisschen problematisch werden könnte.

00:52:41.940 --> 00:52:48.740
So easy sein für den Browser. Muss man dann testen. Also man darf da glaube ich nicht zu crazy werden.

00:52:51.129 --> 00:53:06.865
Genau das da hatten wir ich glaube das hatten wir eventuell schon mal in einem der letzten podcast das und das passt ja auch dass der edge der legte ist das jetzt quasi offen in seinen dev tools da kannst du so ein selector profiling machen.

00:53:07.684 --> 00:53:12.979
Und wirklich ja ja das ganz cool genau dann sieht man auch tatsächlich als das

00:53:13.266 --> 00:53:20.779
Has einfach länger braucht, weil die eben, also die haben schon, also der Knoten ist ja geplatzt,

00:53:20.779 --> 00:53:24.779
also warum wir das haben, ist ja schon, weil die einen Weg gefunden haben,

00:53:24.779 --> 00:53:28.779
das performant zu machen. Es ist aber halt eben näher an dem,

00:53:28.779 --> 00:53:32.779
wie andere Selektoren arbeiten, aber eben einfach trotzdem nicht so performant.

00:53:32.779 --> 00:53:40.779
Ist auch nicht schlimm, also man kann es benutzen, nur wenn man halt einen riesen Dombaum hat, weil der quasi ja jedes Element dagegen

00:53:40.779 --> 00:53:44.657
dann fällt das dann doch vielleicht ins Gewicht.

00:53:44.864 --> 00:53:49.770
Das kann man mit diesen Edge-Dev-Tools ganz gut profilen mittlerweile.

00:53:51.192 --> 00:53:52.057
Coole Sache.

00:53:53.677 --> 00:54:02.779
Ja, und ansonsten, Tag 99, natives Nesting. Find ich jetzt ein bisschen langweilig, aber ist eh cool.

00:54:02.976 --> 00:54:06.779
Ich glaub, sehr viele Leute freuen sich drüber, dass man jetzt so ähnlich wie bei Sass oder Less

00:54:06.779 --> 00:54:15.419
oder für die Hipster bei Stylus nesten kann. Ich weiß gar nicht, ob man es schon im normalen Safari,

00:54:15.419 --> 00:54:17.419
aber zumindest im Technology Preview kann man schon mal testen.

00:54:19.000 --> 00:54:25.878
Und ich glaube, in Chrome auch mittlerweile. Die Frage ist nur, wenn man jetzt schon irgendwo SASS drin hat und vor allem fürs Nesting,

00:54:26.850 --> 00:54:29.815
lohnt sich das dann, SASS rauszuwerfen?

00:54:30.145 --> 00:54:37.815
Muss man für sich selber entscheiden. Also so wie ich SASS verwendet habe, also das ist wirklich nur ganz persönlich, war

00:54:37.815 --> 00:54:46.718
einfach hauptsächlich Variablen, Nesting teilweise, aber ich wäre auch ohne ausgekommen und Mixins.

00:54:47.286 --> 00:54:50.275
Das war so schon. Das meiste habe ich eigentlich sonst wirklich nicht verwendet.

00:54:50.275 --> 00:54:52.615
Also für mich ist Sass jetzt nicht tot.

00:54:52.615 --> 00:54:56.815
Also wenn ich Sinn sehe dahinter, würde ich es nochmal verwenden.

00:54:56.815 --> 00:54:59.415
Oder wenn es irgendein bestehendes Projekt gibt, würde ich jetzt nicht sagen,

00:54:59.415 --> 00:55:06.280
nein, bitte lass mal Sass. Aber tatsächlich jetzt beim neuen Projekt verwende ich es eigentlich nicht mehr.

00:55:07.063 --> 00:55:10.815
Ja, ich habe zum Beispiel seit jetzt wirklich langer, langer, langer, langer Zeit

00:55:10.815 --> 00:55:16.815
keine Variablen mehr im Einsatz und keine Mixins, sondern eigentlich, wenn überhaupt, nur fürs Nesting.

00:55:17.839 --> 00:55:20.995
Dann mache ich es aber auch oft so, dass ich mich zwar mal frage,

00:55:20.995 --> 00:55:24.695
ob ich das jetzt wirklich nesten muss, also ich weiß, manchmal ist es noch so von früher gewohnt,

00:55:24.695 --> 00:55:27.275
war es bei mir noch so default, ich neste das jetzt, weil ich kann.

00:55:27.275 --> 00:55:31.895
Mittlerweile ist es so, ja, was bringt es mir eigentlich, dass ich es gerne auch manchmal flach halte.

00:55:31.895 --> 00:55:35.975
Ist dann teilweise immer ein bisschen nervig, finde ich, zum Beispiel,

00:55:35.975 --> 00:55:40.735
wenn man von Codes Handbox oder von irgendwo Codeschnipsel übernehmen möchte,

00:55:40.735 --> 00:55:43.855
die von Haus aus das benutzen, und ich habe es bei mir nicht drin,

00:55:43.855 --> 00:55:47.855
Da muss ich das wieder alles umschreiben. Wahrscheinlich gäb's irgendwelche coolen Tools, die das automatisch machen.

00:55:47.855 --> 00:55:53.355
Ähm, mal kurz selber. Und deswegen, ähm, ich hab nämlich von, auch von Native Nesting vor einiger Zeit schon mal gehört

00:55:53.355 --> 00:55:59.555
und mich gefragt, ob's jetzt gerade so bei nem Vue-Projekt, wo man ja eh seinen Scope CSS hat,

00:55:59.555 --> 00:56:04.435
das ist da sowieso nicht viel genestet, ob sich das da irgendwie rentieren würde für

00:56:04.858 --> 00:56:10.795
irgendeine Performance, irgendwie Kilobyte-Größen von irgendwas, irgendeinen Bildprozess schneller machen,

00:56:10.795 --> 00:56:15.003
wenn man das jetzt refactoren würde oder rausrefactoren würde.

00:56:16.570 --> 00:56:20.195
Wie gesagt, du hast einen ganz wichtigen Punkt angesprochen.

00:56:20.195 --> 00:56:23.695
Also, sobald man in diesem Komponentending arbeitet

00:56:23.826 --> 00:56:30.795
und das CSS lebt dann auch bei den Komponenten und irgendwie sehr nah am HTML und am JavaScript von eben der Komponente dran,

00:56:30.795 --> 00:56:33.495
dann macht es immer weniger Sinn, weil ich habe es auch sehr gern verwendet,

00:56:33.495 --> 00:56:37.795
einfach nur, um Komponenten abzukapseln in einem großen CSS-Dokument.

00:56:37.795 --> 00:56:43.235
Und das fällt dann damit auch ein bisschen weg. Und ansonsten, ob sich das wirklich auszahlt, ich weiß nicht.

00:56:43.235 --> 00:56:46.944
Ich hab an Projekten gearbeitet, wo der Build irgendwie 15 Minuten dauert.

00:56:47.007 --> 00:56:50.590
Also da macht alles Sinn, was man wegoptimieren kann.

00:56:50.680 --> 00:56:54.795
Und ich glaube, es kommt auch darauf an, welche Version von Sass,

00:56:54.795 --> 00:56:57.675
ob es jetzt Start, Sass, Not Sass oder Deletier-Hits oder wieder.

00:56:57.675 --> 00:57:03.675
Es gibt ja auch Performance-Unterschiede. Also ich hätte es jetzt nicht gespürt bei den Sachen, an denen ich gearbeitet habe.

00:57:04.219 --> 00:57:08.995
Aber die sind auch meistens sehr nah an Standards dran, da passiert nicht so richtig viel.

00:57:10.755 --> 00:57:15.605
Ich würde da jetzt kurz noch mal gerne einhaken, weil du hast gerade Dartsas und Notesas erwähnt.

00:57:15.605 --> 00:57:21.179
Könntest du beschreiben, was das eine, was das andere ist, was sollte man verwenden?

00:57:22.791 --> 00:57:24.605
Nein, das war so schreibsicher. Ich habe es mir nicht gemerkt.

00:57:24.605 --> 00:57:29.425
Ich habe es mir vor kurzem nicht mehr gehört. Nein, die Frage war natürlich an dich gerichtet. Du hast schon so lange nicht mehr gesprochen.

00:57:29.821 --> 00:57:33.605
Es ist nur die Technologie dahinter. Das eine ist, glaube ich, in Not geschrieben, das andere in Dart.

00:57:33.605 --> 00:57:39.605
Und eins von beiden ist schneller. Ich glaube, die Dart-Variante, weil die ist wiederum geschrieben in irgendwas anderes.

00:57:39.605 --> 00:57:41.965
Ich bin kein Chef, weißt du das hier?

00:57:42.137 --> 00:57:49.805
Also, ob die schneller ist, weiß ich nicht. Aber die ist halt grade so die Geschmacksrichtung du jour.

00:57:49.845 --> 00:57:52.660
Also, die entwickeln das halt in Dart.

00:57:52.939 --> 00:57:58.085
Genau, vielleicht, weil sie es dann auch nach JavaScript irgendwie kompilieren können.

00:58:00.141 --> 00:58:07.064
Genau, also, Sass oder Dart-Sass ist jetzt so das Hauptding von den Sass-Leuten.

00:58:08.171 --> 00:58:11.085
Ja, also ich hab ungefähr genau das gleiche Wissen wie ihr dann.

00:58:11.085 --> 00:58:14.085
Bei mir war es dann irgendwann, ich wollte was mixen.

00:58:14.085 --> 00:58:19.085
Ich bin mir nicht mehr hundertprozentig sicher, was es war. Also nagelt mich bitte nicht auf das Beispiel fest.

00:58:19.085 --> 00:58:22.085
Aber es war so in die Richtung, dass ich sowas machen wollte wie Max.

00:58:22.085 --> 00:58:25.085
So in die Richtung von Marv Max.

00:58:25.131 --> 00:58:30.056
Und das eine war halt sowas wie 100% und das andere war was wie 30VH View Height.

00:58:30.614 --> 00:58:35.085
Irgendwie sowas. Und das war in Node.js nicht möglich, weil ich das nicht mixen durfte.

00:58:35.085 --> 00:58:39.005
Durfte und dann musste ich doch mal einfach schnell auf Dartslass umstellen.

00:58:39.005 --> 00:58:42.405
Dann habe ich auch kurz gelesen, worum geht es hier eigentlich und so, achso, ist ein

00:58:42.405 --> 00:58:44.805
Dart geschrieben, ist irgendein Performant, das sollte man eh verwenden.

00:58:44.805 --> 00:58:49.325
Das war dann auch meine Research wieder und dann war ich auch fertig und das Mixen von

00:58:49.325 --> 00:58:51.625
irgendwelchen Einheiten hat dann funktioniert.

00:58:53.939 --> 00:59:01.789
Ja, ich glaube auch an einer gewissen Größe spürt man es, aber ich habe nie so komplexe Konstrukte gehabt,

00:59:01.789 --> 00:59:04.967
dass ich da jetzt wirklich irgendwelche Performance-Unterschiede großartig gemerkt habe.

00:59:06.821 --> 00:59:11.789
Ja, ich glaube, wichtig ist einfach nur nicht mehr das, aber das geht wahrscheinlich gar nicht mehr,

00:59:11.789 --> 00:59:16.705
das Ursaß, das, glaube ich, in RWBY geschrieben war, das war halt einfach langsam.

00:59:17.822 --> 00:59:23.229
Ja, bei mir ging's auch nicht um Performance, sondern einfach, dass ich quasi da up-to-date sein will,

00:59:23.556 --> 00:59:27.429
weil ich dann befürchte, vielleicht ist NoteSass dann tatsächlich mal deprecated.

00:59:27.489 --> 00:59:31.589
Und ich will das halt nicht mal in fünf bis zehn Jahren alles umändern müssen,

00:59:31.649 --> 00:59:34.773
sondern das versuch ich dann schon immer recht zügig up-to-daten.

00:59:36.646 --> 00:59:42.389
Wir hatten jetzt bei den, ähm, One Hundred Days eine Rubrik grad noch gar nicht benannt,

00:59:42.449 --> 00:59:45.332
die ich aber eigentlich sehr viel gehört habe.

00:59:46.197 --> 00:59:51.373
Ähm, und das sind ganz viele Margin-Sachen. Und ich pick mir da gleich mal jetzt einfach,

00:59:51.580 --> 00:59:55.469
obwohl das ist ja eigentlich gar kein Margin, aber so im Sinne von Stadtmargin,

00:59:55.469 --> 01:00:01.189
ähm, pick mir jetzt gleich mal Day 2 wieder raus, den Tag Nummer 2 mit Logical Properties.

01:00:01.189 --> 01:00:02.914
Ich hab sehr viel davon gehört.

01:00:03.553 --> 01:00:08.766
Und vielleicht könntest du mir noch mal erklären, was dieses Right to Left, Left to Right.

01:00:10.035 --> 01:00:12.942
Macht und warum man's verwenden sollte.

01:00:14.032 --> 01:00:20.189
Oder auch nicht. Ja, auf jeden Fall. Also, wir haben hier Sprachen, die von links nach rechts gelesen werden,

01:00:20.189 --> 01:00:25.189
und welche, die von rechts, also von links nach rechts, und andere, die von rechts nach links gelesen werden.

01:00:25.189 --> 01:00:34.089
Und wenn wir in CSS irgendwo margin-right verwenden, dann ist es immer margin-right, ganz unabhängig von der Leserichtung.

01:00:34.269 --> 01:00:44.189
Und ich hab da ein Beispiel, wo ich einfach so quasi wie, also eh gleich unter der ersten Überschrift Physical Properties, wenn man jetzt sowas nimmt,

01:00:44.189 --> 01:00:48.149
wie zum Beispiel eine horizontale Navigation und sagen wir mal, ich verwende da kein Gap,

01:00:48.149 --> 01:00:50.669
sondern ich verwende da Margin zwischen den einzelnen Elementen und ich sage,

01:00:50.669 --> 01:00:59.309
jedes Li in meiner Liste hat eine Margin Right, dann wäre das bei beiden Leserichtungen gleich,

01:00:59.309 --> 01:01:04.669
nur man sieht bei der Right to Left, dass da eben der Margin nach rechts geht und nicht nach links

01:01:04.669 --> 01:01:08.309
geht in die andere Richtung, also müsste sozusagen gespiegelt sein und das funktioniert eben mit

01:01:08.309 --> 01:01:15.149
diesen physikalischen Eigenschaften nicht mit Left und Right. Und so ähnlich ist es auch bei

01:01:15.149 --> 01:01:19.109
Flexbox zum Beispiel, da hast du ja auch Flex End und Flex Start, also da wurde bewusst drauf

01:01:19.109 --> 01:01:23.549
verzichtet, Left und Right zu verwenden, sondern sozusagen Start und End. Und die reagieren aber

01:01:23.549 --> 01:01:29.909
auf die Leserichtung, das heißt, die können das schon. Und weil es eben diese alten Eigenschaften

01:01:29.909 --> 01:01:36.069
wie eben Margin, aber auch die Höhe und die Breite oder Border, alles, wo es irgendwo um

01:01:36.069 --> 01:01:41.156
Umrichtungen geht um Seiten, weil die das nicht können, gibt es die neuen Varianten davon, die Logical Properties.

01:01:44.208 --> 01:01:50.392
Left ist margin-inline-start und right ist margin-inline-end.

01:01:50.482 --> 01:01:54.632
Das heißt, inline ist die horizontale Achse und die vertikale ist block.

01:01:54.776 --> 01:01:58.296
Das heißt, wenn ich sagen möchte margin-top, würde ich sagen margin-block-start.

01:01:58.737 --> 01:02:07.640
Oder wenn ich sagen möchte position-absolut-top, dann würde ich nicht top verwenden, sondern insert-block-start.

01:02:08.351 --> 01:02:12.250
Gibt es denn überhaupt noch einen Grund, top und bottom zu verwenden?

01:02:13.024 --> 01:02:13.852
Wahrscheinlich schon.

01:02:14.761 --> 01:02:18.551
Aber wenn ich jetzt immer nur an Fleece-Text denke oder an Navigationen?

01:02:20.208 --> 01:02:25.018
Vermutlich gibt es den Grund schon und da sind wir jetzt wieder an diesem praktischen Nutzen, an diesem praktischen Beispiel.

01:02:25.018 --> 01:02:32.018
Die gibt es noch nicht so viel und es macht auch wirklich tatsächlich nur dann Sinn, wenn ich auch eben eine Website habe,

01:02:32.018 --> 01:02:39.018
die auch diese Sprachen dann irgendwie kann, diese unterschiedlichen Sprachen, die von rechts nach links oder da mal von oben nach unten oder sonst irgendwie gelesen werden.

01:02:39.310 --> 01:02:42.218
Und ähm, das heißt aber nicht, dass man es nicht verwenden kann.

01:02:42.218 --> 01:02:46.998
Also man kann es einfach so, wie es ist, ab jetzt verwenden. Und passt auch.

01:02:47.124 --> 01:02:50.018
Man muss sich ein bisschen umdenken, man muss sich das einfach merken mit Inline und Block.

01:02:50.018 --> 01:02:53.018
Und ich mach das jetzt schon seit ein paar Wochen und ich tu mir immer noch schwer,

01:02:53.018 --> 01:02:55.018
weil es einfach so anders ist.

01:02:55.326 --> 01:03:02.218
Ähm, wo es noch so ein bisschen Schwierigkeiten gibt, ich glaub Transform, also Translate X, Translate Y,

01:03:02.218 --> 01:03:04.218
kann das noch nicht so richtig.

01:03:04.454 --> 01:03:07.718
Und bei Gradients, weil bei Gradients habe ich ja auch diese Schreibweisen,

01:03:07.718 --> 01:03:11.398
wo ich sagen kann, from left to right, so in die Richtung.

01:03:11.592 --> 01:03:14.678
Und die sind, glaube ich, auch noch nicht, die gibt es auch noch nicht, das Logical Variante,

01:03:14.678 --> 01:03:16.508
oder zumindest nicht zu dem Zeitpunkt, wo ich geschrieben habe.

01:03:16.678 --> 01:03:22.737
Genau. Tatsächlich warte ich jetzt noch ein bisschen, bis so die,

01:03:22.962 --> 01:03:27.038
bis jetzt so wirklich einige Artikel kommen, die auch wirklich echte Hands-on-Beispiele haben,

01:03:27.038 --> 01:03:31.029
weil ich persönlich habe sie nicht. Also ich habe einfach diese Rechts-nach-Links-Sprachen nicht gehabt.

01:03:31.146 --> 01:03:34.999
Also wenn sie jemand von euch hatte oder in Ihrem Artikel hat, dann gern.

01:03:35.118 --> 01:03:39.428
Ich weiß, der Ahmad Jadid, der hat eine eigene Website, wo es genau um das Thema geht.

01:03:39.896 --> 01:03:41.138
RightLeftLanguages.

01:03:41.948 --> 01:03:43.569
Blättert er noch ein bisschen was.

01:03:45.441 --> 01:03:50.356
Ich weiß gar nicht, wie die gerade heißt. Die heißt wahrscheinlich so was wie righttoleft.dev oder so in der Richtung.

01:03:51.531 --> 01:03:52.490
Genau.

01:03:52.940 --> 01:03:56.910
Ist das beschränkt auf Margin oder gäbe es die gleiche Logik dann auch bei Padding?

01:03:57.945 --> 01:04:02.731
Oh, also Margin, Padding, Border, Height, Width, Max Height.

01:04:02.771 --> 01:04:05.372
Also alles, was so Top-Right-Blablabla hat?

01:04:05.975 --> 01:04:12.025
Ja, ja. Ah, ja. Ja, auch eben die Top-Left, Bottom-Right. Mhm. Ähm ...

01:04:13.690 --> 01:04:21.931
Ja, bei den Farben genauso. Alles, was irgendwie irgendwas mit Dimensionen zu tun hat. Und

01:04:21.931 --> 01:04:28.851
Wave von Height eben auch, weil es nicht nur um die X-Achse geht, sondern auch um die Y-Achse,

01:04:28.851 --> 01:04:32.771
also beide Achsen. Und eben nicht nur um die Leserichtung von links nach rechts oder rechts

01:04:32.771 --> 01:04:36.811
nach links, sondern oben nach unten und nach oben. Und da steige ich ein bisschen aus,

01:04:36.811 --> 01:04:40.091
weil ich einfach diese Website nicht gemacht habe. Meine Websites sind eigentlich immer

01:04:40.091 --> 01:04:43.211
Deutsch oder Englisch. Da habe ich einfach weniger Erfahrung, deswegen weiß ich nicht,

01:04:43.211 --> 01:04:47.251
wie es wirklich auswirkt und ob ich dann wirklich Punkte habe, wo ich dann sage,

01:04:47.251 --> 01:04:53.211
na, ich verwende dann doch lieber die physical properties, weil ich dann nicht möchte,

01:04:53.211 --> 01:04:54.821
dass sich etwas ändert, sondern es soll fix bleiben.

01:04:55.947 --> 01:05:01.457
Das ist wahrscheinlich so ein ähnliches Thema wie, was ich ganz oft gefragt werde, soll ich RAM verwenden,

01:05:01.636 --> 01:05:06.281
wenn ich Border definier oder Boxshader oder ähnlich, oder soll ich da Pixel verwenden lieber?

01:05:07.398 --> 01:05:12.097
Ja, kommt halt drauf an, muss man sich anschauen. Also einfach mal hochskalieren und schauen, was passiert.

01:05:12.157 --> 01:05:17.977
Wenn's zu dick wird und zu unübersichtlich, verwende ich doch lieber Pixel, vielleicht funktioniert das besser.

01:05:18.037 --> 01:05:23.137
Vielleicht will ich, dass ich was mitskaliert, und da wird's wahrscheinlich auch so ähnlich sein.

01:05:24.025 --> 01:05:31.461
Das ist doch nicht etwa eine Überleitung, oder? Überleitung? Worauf? Tag 4 und 5.

01:05:31.637 --> 01:05:38.137
4 und 5. Achso, ich wollte eigentlich danach noch zum March & Trim springen, aber dann schauen wir mal zu Tag 4.

01:05:38.137 --> 01:05:47.137
Bevor wir die Logical Properties verpassen, ich wollte nur sagen, also ich finde halt, die kann man halt, oder die können wir nicht so gut testen.

01:05:47.137 --> 01:06:16.677
Also so REM kannst du ja noch testen, da gehst du halt einfach hin und skalierst so deine US-Font hoch oder so und dann funktioniert das oder funktioniert das nicht, aber wenn ich mir, also wenn ich jetzt meine Seite auf Arabisch übersetze und Google Translate, dann weiß ich ja, also weil ich halt kein Arabisch kann und auch kein Hebräisch und Chinesisch und Japanisch, ich weiß ja überhaupt gar nicht, also technisch sehe ich dann, dass sich Dinge ändern, aber ob das so richtig ist,

01:06:16.677 --> 01:06:17.706
das weiß ich halt auch nicht.

01:06:19.119 --> 01:06:27.217
Also, ob ich jemandem dann einen Gefallen getan hab oder halt irgendwie so ein bisschen wie mit ARIA-Roles überall drankleben,

01:06:27.257 --> 01:06:28.895
ob man dann nicht irgendwie sogar ...

01:06:30.197 --> 01:06:33.333
Das für die schwieriger gemacht hat. Keine Ahnung, weiß ich nicht.

01:06:34.317 --> 01:06:40.517
Ja, also, da würd ich halt sagen, wenn du an einer Website arbeitest, wo diese Sprachen supported werden,

01:06:40.557 --> 01:06:42.263
dann musst du das sowieso testen.

01:06:42.337 --> 01:06:48.957
Wenn du an einer Website arbeitest, wo sie nicht supported werden merken, weil es einfach die Sprache nicht gibt für die Seite dementsprechend.

01:06:49.997 --> 01:06:55.847
Ja, wobei wir haben im aktuellen, also bei meinem aktuellen Kunden, da haben wir Content Security Policy ausgerollt.

01:06:56.001 --> 01:07:02.847
Auch ein mega anstrengendes Thema, aber also hat sehr lange gebraucht und Sentry war immer voll.

01:07:02.847 --> 01:07:08.208
Aber mittlerweile haben wir dann sozusagen alle Verstöße und alle Sachen so, die haben wir im Griff.

01:07:08.847 --> 01:07:15.847
Und man kriegt halt immer so die Errors angezeigt, die Verstöße gegen Content Security Policy.

01:07:15.847 --> 01:07:21.347
Man findet total häufig, dass Leute eben was mit Google Translate,

01:07:21.347 --> 01:07:24.115
also quasi Skripte und so Zeugs injekten.

01:07:24.347 --> 01:07:32.347
Das heißt also, es gibt Leute, die eben Seiten besuchen und die, die dann, wo der Browser die vielleicht vollautomatisch immer übersetzt,

01:07:32.460 --> 01:07:34.847
wenn's gibt's ja bei Chrome, glaub ich, der fragt ja dann so,

01:07:34.847 --> 01:07:38.347
diese Seite ist auf Englisch, möchtest du englische Seiten immer auf Deutsch übersetzen?

01:07:38.347 --> 01:07:43.347
Und das sind halt wirklich teilweise viel mehr Leute, als man denkt,

01:07:43.347 --> 01:07:47.782
Und dann, die profitieren halt schon davon, wenn man Logical Properties verwendet hat.

01:07:47.907 --> 01:07:55.092
Auch wenn man selber eigentlich nie die Absicht hatte, seine Seite zu lokalisieren.

01:07:55.875 --> 01:08:02.647
Aber ist es so, dass Google Translate und sonstige Tools, dass die auch die Direction ändern,

01:08:02.647 --> 01:08:05.247
beziehungsweise den Writing Mode, dann entsprechend die Sprache anpassen?

01:08:05.796 --> 01:08:11.269
Also ich hatte es jetzt gerade mal mit unserer Seite getestet und da haben die es tatsächlich nicht gemacht.

01:08:11.386 --> 01:08:14.474
Ich weiß nicht, ob es da andere Tools gibt, die das anders machen.

01:08:15.077 --> 01:08:18.187
Ja. Weil das muss man sich ja nicht anschauen, weil das sind ja nämlich zwei Sachen.

01:08:18.187 --> 01:08:22.126
Das eine ist ja die Sprache und die Zeichen, die verwendet werden, und dann die Übersetzung davon.

01:08:22.387 --> 01:08:25.187
Und das andere ist wirklich auch, dass man sozusagen sagt, die Leserichtung ist anders

01:08:25.187 --> 01:08:26.879
oder halt eben diese Writing Mode Eigenschaft.

01:08:28.139 --> 01:08:56.989
Aber ja, eh sicher, das ist eh, du bestätigst ja nicht immer das, was ich vorher gesagt habe, dass man einfach ein bisschen diese Erfahrungswerte hat, braucht und es gibt auch ganz viele Leute, die sagen, ja, dann lieber nicht verwenden, weil wer weiß, was man damit anrichtet oder es bringt eh nichts, weil mir ist es eigentlich eh wurscht, ich sehe alles nur auf Englisch, das sehe ich nicht ganz so, aber ja, man muss, ich glaube, man muss noch ein bisschen Erfahrungswerte abwarten, es ist auch alles noch relativ neu, zwar nicht so ganz neu wie jetzt Nesting oder ähnliches oder die Farbgeschichten,

01:08:57.199 --> 01:08:59.827
Aber ja, ich glaube, da ist noch viel zu kommen.

01:09:00.305 --> 01:09:06.989
Ich glaube, was halt so vielleicht ein Goodie ist, das zu benutzen ist, dass du ja manche so Shorthands dazu bekommst,

01:09:06.989 --> 01:09:11.989
die man früher eben nicht hatte, so wie Margin, Inline oder sowas.

01:09:11.989 --> 01:09:19.989
Also da gibt's ja keine quasi Oldschool, keine Physical Repräsentation davon.

01:09:20.317 --> 01:09:23.989
Also wo man quasi mit einem Wert sowohl links als auch rechts setzen kann.

01:09:24.133 --> 01:09:28.320
Kann. Also jetzt zumindest in unserer Sprache. Oder bei Inset.

01:09:29.139 --> 01:09:36.098
War's Inset? Ja, genau. Das ist ja dann quasi, alle top right, bottom left auf einmal zu setzen. Das ist auch cool.

01:09:36.673 --> 01:09:44.349
Genau. Also MarginInline vielleicht zur Erklärung macht Left und Right gleichzeitig und das wäre quasi ein Ersatz für dieses klassische

01:09:44.349 --> 01:09:48.052
MarginNullAuto. Da könnte man nur noch sagen MarginInlineAuto.

01:09:49.115 --> 01:09:56.109
Oder bei so Utility CSS Frameworks wie jetzt Y und X. Also, da verwechsel ich es immer, gell?

01:09:56.343 --> 01:10:03.629
Ich weiß immer, was X und Y ist, aber ich weiß auch immer nicht, was horizontal und

01:10:03.629 --> 01:10:11.332
vertikal ist. Ich weiß auch immer nicht, was eine Spalte und eine Zeile ist, Row und Column.

01:10:11.890 --> 01:10:16.069
Ich habe gesehen, dass es tatsächlich eine geniale Überleitung zu Tag 4 und 5 mit Min

01:10:16.069 --> 01:10:17.829
und Max gewesen wäre.

01:10:18.066 --> 01:10:24.610
Aber kurz zu dem, was ich jetzt auch gerade Callum und Raul gesagt hatten, das March and Trim.

01:10:26.150 --> 01:10:33.000
Wofür ist das da? Was mache ich damit? Wir sind hier gerade bei Tag 96.

01:10:33.955 --> 01:10:39.680
Ja, da ist es so, dass ich das am Anfang Februar geschrieben habe und da konnte es tatsächlich

01:10:39.680 --> 01:10:45.800
nur der Safari Technology Preview hinter einer Flag oder so. Also es war so richtig super neu,

01:10:45.800 --> 01:10:52.520
quasi frisch aus dem Ofen. Und zwar geht es darum, ganz klassisches Beispiel,

01:10:52.520 --> 01:10:58.240
eine Liste und da sind ein paar LIs und jedes Li hat Margin Block End, also Margin Bottom quasi,

01:10:58.432 --> 01:11:02.600
ein Margin nach unten, weil ich Abstand zwischen denen haben möchte. Jetzt könnte es aber sein,

01:11:02.600 --> 01:11:06.960
dass ich den Margin nicht bei allen LIs haben möchte, sondern nur bei allen außer dem letzten,

01:11:06.960 --> 01:11:11.840
weil ich will nur zwischen LIs einen Margin haben, aber nicht beim allerletzten. Und was

01:11:12.278 --> 01:11:17.720
wir bis jetzt gemacht haben, war, dass man dann sagt Li Last Child Margin Block End 0 oder dass

01:11:17.720 --> 01:11:23.297
man gesagt hat, le not last child margin block end, was ich ein bisschen schwierig finde,

01:11:23.600 --> 01:11:32.460
oder man hat vom Hayden Pickering geprägte lobotomized owl verwendet, wo man sagt, selektiere

01:11:32.875 --> 01:11:38.080
alle direkten Kind-Elemente, die auf ein anderes folgen, und nur die bekommen einen Margin

01:11:38.080 --> 01:11:39.069
Block Start in dem Fall.

01:11:39.400 --> 01:11:43.760
Das heißt, so unterschiedliche Workarounds, mehr oder weniger Workarounds, dafür, dass

01:11:43.760 --> 01:11:46.630
man einfach allen Elementen außer dem letzten immer einen Margin gibt.

01:11:47.431 --> 01:11:52.080
Das ist jetzt quasi standardisiert mit margin-trim, d.h. ich kann einfach sagen, alle LIs haben eine Margin nach unten.

01:11:52.905 --> 01:12:01.080
Und auf dem Eltern-Element, also auf der UL, sage ich margin-trim block end, dann schneidet die einfach am Ende den Margin weg.

01:12:01.511 --> 01:12:06.080
Oder ich kann sagen margin-trim block, dann schneidet sie es oben und unten weg, den Margin.

01:12:06.080 --> 01:12:12.240
Margin. Oder Inline, dann schneidet ihr das ältere Element einfach links und rechts den Margin weg.

01:12:13.178 --> 01:12:18.080
Bei deinem Blogartikel fehlt ein Workaround, da fehlt mein Workaround.

01:12:18.534 --> 01:12:20.320
Welcher? Ja, pass auf.

01:12:20.320 --> 01:12:26.720
Ich hab mal gehört, dass man sowas wie Margins heutzutage eigentlich gar nicht mehr braucht.

01:12:26.720 --> 01:12:32.830
Und mein Workaround ist, dass ich der ul ein Display flex gebe.

01:12:33.577 --> 01:12:37.480
Und zwar mit der flex direction, und deswegen bin ich grad draufgekommen,

01:12:37.480 --> 01:12:42.800
die andere flex direction als die normale. Das ist jetzt entweder Row oder Column, halt die Unnormale.

01:12:42.800 --> 01:12:48.080
Und dann kann ich der ganzen Sache nämlich einen Gap geben.

01:12:48.458 --> 01:12:52.000
Gap dachte ich vor 5, 3 Jahren noch, das wäre eigentlich nur bei Grid CSS,

01:12:52.000 --> 01:12:53.440
aber Gap geht ja auch bei Flexbox.

01:12:53.440 --> 01:12:59.040
Und kann quasi dann den List-Items einen Gap geben von einem RAM.

01:12:59.040 --> 01:13:03.680
Und dann habe ich dieses ganze Margin-Button oder Margin-Start oder vielleicht auch Margin-Collapse,

01:13:03.680 --> 01:13:05.880
sind diese ganzen Problemchen nicht mehr.

01:13:05.880 --> 01:13:09.560
Und ich frage mich die ganze Zeit, ob ich einen Anti-Pattern mache,

01:13:09.721 --> 01:13:17.643
dass ich da einfach einen Display-Flex mache und die Reihenfolge oder die Direction auf quasi das Andere erstelle,

01:13:18.157 --> 01:13:20.660
aber es läuft hervorragend.

01:13:20.660 --> 01:13:26.213
Also, gerade auch, wenn ich an Dinge denke, wie die sich dann responsive vielleicht umstellen.

01:13:26.835 --> 01:13:34.380
Diese typische Situation, wie ich hab zwei Buttons nebeneinander und hab damals naiverweise dem Linken den Margin Right gegeben

01:13:34.380 --> 01:13:39.212
oder dem Rechten, andersrum, oh Gott, ist das verwirrend, wenn man das versucht zu sagen als zu schreiben,

01:13:39.771 --> 01:13:43.580
Auf jeden Fall so, dass eine Lücke dazwischen entsteht, aber dann bricht sie es um auf dem

01:13:43.580 --> 01:13:46.960
Responsive und hast du plötzlich den einen Button, der da irgendwie so ein komisches

01:13:46.960 --> 01:13:50.340
Pseudomargin hat, das du jetzt bei zwei Zähler gar nicht brauchst.

01:13:50.340 --> 01:13:54.740
Und da ist natürlich auch der Scap ziemlich hervorragend und man kann den Scap auch hier

01:13:54.740 --> 01:14:00.260
auf horizontale und vertikal verschieden setzen.

01:13:59.521 --> 01:14:04.291
Ja, funktioniert ganz oft, aber man muss sich einfach bewusst sein, was das Flex macht.

01:14:04.291 --> 01:14:08.651
Das Flex macht jetzt nicht nur, störe die beiden nebeneinander oder untereinander und

01:14:08.651 --> 01:14:10.251
dann kann ich halt ein bisschen Gap verwenden.

01:14:10.251 --> 01:14:16.171
E, so verwende ich es auch, nur muss einfach klar sein, dass dann auch noch JustifyContent

01:14:16.410 --> 01:14:20.411
mitspielt und AlignItems und AlignContent, dass dann auch noch passieren kann, dass

01:14:20.411 --> 01:14:24.091
ich vielleicht sehr viel Inhalt habe in einem Kindelement, dass das dann vielleicht das

01:14:24.091 --> 01:14:27.771
ältere Element streckt und so weiter, also das ältere Element und die Kindelemente,

01:14:27.771 --> 01:14:30.571
Die verhalten sich einfach ganz anders, wenn sie in diesem Flex-Kontext sind.

01:14:30.571 --> 01:14:37.571
Das ist so das Einzige, was mir auf die Schnelle einfällt, was irgendwie wichtig ist.

01:14:37.571 --> 01:14:41.823
Dass man sich einfach bewusst ist, dass man jetzt in der Flex-Welt ist und da gehen Dinge

01:14:42.192 --> 01:14:49.211
einfacher kaputt, wenn der Inhalt nicht erwartet ist oder wenn er nicht sehr standardisiert ist.

01:14:49.211 --> 01:14:51.371
Wenn es nicht einfach jetzt nur ein Wort ist, sondern wenn es vielleicht mal ein Satz werden

01:14:51.371 --> 01:14:53.823
könnte oder dann vielleicht mal ein Bild reinfliegt oder sonst irgendwas.

01:14:54.787 --> 01:14:57.749
Ja, ich denke, Flexbox-Probleme haben wir alle schon mal durcherlebt.

01:14:57.991 --> 01:15:01.467
Ich glaube, grad, wenn sich's Flex auch noch selber verschachtelt, wird's merkwürdig.

01:15:02.411 --> 01:15:07.791
Ich kenn ja auch noch meinen berühmten Hacker, nicht meinen, aber einen, den ich so oft verwenden musste,

01:15:07.851 --> 01:15:12.557
und ich weiß schon gar nicht mehr, warum eigentlich, irgendwie den Min-Width auf null setzen,

01:15:12.719 --> 01:15:14.852
damit die Width dann richtig berechnet wird.

01:15:14.951 --> 01:15:19.751
Das hatte ich bei diesem ganzen Truncating mit Ellipsis und Pünktchen, Pünktchen, Pünktchen,

01:15:19.811 --> 01:15:26.591
bis ich dann irgendwann einfach gesagt hab, Pünktchen, ist doch für die User Experience eh schlecht, wenn wir da was nicht anzeigen.

01:15:26.591 --> 01:15:36.251
Das war dann mein nicht-technischer Workaround-Solution für, ich konnte diesen CSS-Bug gerade nicht

01:15:36.251 --> 01:15:39.171
fixen, habe stattdessen gesagt, Pünktchen, Pünktchen, Pünktchen, eh eine schlechte

01:15:39.171 --> 01:15:40.171
Idee, wir haben doch Platz.

01:15:41.968 --> 01:15:46.611
Ja genau, darauf wollte ich raus, auf dieses MinWidth, weil standardmäßig ist die MinWidth

01:15:46.611 --> 01:15:49.611
auf Auto, wenn es irgendwie ein Flex-Container ist.

01:15:49.611 --> 01:15:54.611
Und ähm, äh, steppe es nämlich auf, falls ich etwas Falsches sage.

01:15:54.611 --> 01:16:00.611
Aber sobald das der Fall ist, kann das Eltern-Element vom Kind-Element gestreckt werden und dann schauen Dinge seltsam aus.

01:16:00.611 --> 01:16:03.555
Und wenn ich es auf Minimum-Zero setze, dann wird es halt nicht mehr gestreckt.

01:16:04.726 --> 01:16:06.166
Ich glaube, so war das, so circa.

01:16:07.381 --> 01:16:11.611
Oder ist das? Ja, und das, äh, du kannst, wenn du jetzt, äh,

01:16:11.855 --> 01:16:19.351
drei oder zwei Elemente in diesem Flex drin hast, die unterschiedlich viel Content haben,

01:16:19.351 --> 01:16:25.611
dann schrumpfen die nicht quasi im gleichen Maße, wenn du nicht Min-Width null setzt.

01:16:25.611 --> 01:16:35.611
Weil die quasi in die Welt starten mit einer Min-Width, die, glaub ich, Fit-Content-Breite hat. Ah ja, okay.

01:16:35.828 --> 01:16:41.611
Genau, und dann, das will man halt oft eben nicht, auch wenn's eigentlich ganz cool ist, dass es so ist,

01:16:41.611 --> 01:16:47.331
aber oft will man dann wirklich so, Hey, linke Box soll immer so breit sein wie die rechte Box, auch wenn links vielleicht

01:16:47.331 --> 01:16:49.440
viel mehr Text von uns.

01:16:50.466 --> 01:16:55.316
Ja, aber wir können uns einig sein, dass Margin Trim, weiß ich nicht,

01:16:55.606 --> 01:16:57.316
zehn Jahre zu spät kommt.

01:16:57.316 --> 01:17:02.316
Also, wenn's jetzt wirklich vor, ich sag jetzt, zehn Jahre ist eh realistisch, weil, wenn das Grid,

01:17:02.316 --> 01:17:06.316
Grid ist vor sechs Jahren rausgekommen, also Flex ist auch schon ein bisschen älter.

01:17:06.316 --> 01:17:09.316
Wenn's jetzt vor zehn Jahren rausgekommen wäre, wär's wahrscheinlich ein Game Changer gewesen.

01:17:09.316 --> 01:17:13.316
Für viele, also nicht Game Changer, vielleicht nicht, aber schon eine große Hilfe.

01:17:13.316 --> 01:17:14.790
Jetzt ist es so, oh ja, Leo, eh nicht.

01:17:15.316 --> 01:17:19.840
Nee, doch, wirklich, auch bei dem, Ich bring jetzt mal wieder die Utility-CSS-Beispiele,

01:17:20.356 --> 01:17:24.316
weil hier kommen dann doch die Probleme von ...

01:17:25.313 --> 01:17:28.056
Ich sag es einfach, weil ich nicht die ganze Zeit Utility-CSS sagen will,

01:17:28.572 --> 01:17:31.534
aber die Probleme von Tailwind, die dann aufkommen. Ähm ...

01:17:31.936 --> 01:17:34.568
Ähm ... Ähm ... Ähm ...

01:17:35.288 --> 01:17:39.141
Das ... Entweder ist es von den Frameworks vielleicht noch nicht unterstützt,

01:17:39.636 --> 01:17:43.921
oder die Developer wissen nicht genug darüber, wie man's am besten schreibt.

01:17:44.983 --> 01:17:49.536
Dieses Not Last Child oder bei dem Last Child, dann aber wieder auf Null,

01:17:49.800 --> 01:17:52.996
ist im Standard-CSS, ist vielleicht so ein kleiner Workaround,

01:17:52.996 --> 01:17:56.507
aber ich finde, man kann das in Standard-CSS ziemlich gut lesen.

01:17:56.596 --> 01:18:01.596
Bin tatsächlich auch in ein Fair- Ne, wir werden alle alt, wir sind alle Fans von dem Lesbaren,

01:18:01.596 --> 01:18:04.676
also ich mag auch eher so LI, das hier,

01:18:05.004 --> 01:18:11.882
aber LI Last Child, dann das hier, anstatt dieses LI Not Last Child, weil das irgendwie so eine umgedrehte Lesereihenfolge ist.

01:18:12.953 --> 01:18:25.151
Bei Table CSS geht das ganz genauso. Ich weiß ehrlich gesagt nicht seit welcher Version, aber es geht seit langem ganz genauso, dass du genauso auch die Prefixes dafür hast, für Not und Last Child, sodass du kein extra CSS mehr dafür schreiben musst.

01:18:25.236 --> 01:18:37.485
Es ist aber ungewohnt, und dann beginnt das wieder, dass man anstatt jetzt eine Table-Klasse im HTML zu verwenden, zum Style-Block geht und sagt, okay, schreibe ich doch wieder meinen eigenen Standard-CSS.

01:18:38.016 --> 01:18:44.156
Und dann hat man dieses, aber es gibt ja eine Table-In-Klasse dafür, also sollte ich konsistent bleiben?

01:18:45.064 --> 01:18:51.970
Oder mache ich jetzt hier doch das Leserliche? Also, das ist sowas Banales eigentlich, und dann stolpert er und wird dann irgendwie ein bisschen verlangsamt beim Programmieren.

01:18:54.265 --> 01:19:00.890
Ja, am besten einfach nicht Table-In-In verwenden. Nein, starten wir jetzt nicht mit dem, das macht zu viel auf.

01:19:01.136 --> 01:19:02.925
Ja, eh, schwierig.

01:19:04.087 --> 01:19:12.360
Ja, also vor zehn Jahren wäre Smartroom schon super gewesen. Mal schauen. Ich versuche mich so ein bisschen zu wehren, weil ich so sauer bin, dass es das jetzt erst gibt.

01:19:12.890 --> 01:19:23.297
Bist du noch vor 20 Jahren, wo die CMS dann bei den Items ein Class First und ein Class Last dann für einen noch bereinigt haben?

01:19:23.297 --> 01:19:23.783
Ja, freilich.

01:19:25.350 --> 01:19:29.680
Stimmt. Das waren noch gute Zeiten. Wir sind alle alt.

01:19:30.319 --> 01:19:57.777
Ja, das war es so, würde ich sagen. Also es gibt aber noch sehr coole Dinge, also ich möchte es nicht noch mehr erzählen, wir reden hier schon sehr lang, aber wenn ich einen Tipp geben darf, was ich empfehlen würde, was sehr interessant ist, was jetzt nicht super neu ist, aber trotzdem höchst interessant, wäre Tag 82, Value Processing.

01:19:58.136 --> 01:20:03.897
Da geht es jetzt wirklich gar nicht eigentlich um modernes CSS, sondern vielmehr darum, dass

01:20:03.897 --> 01:20:07.917
ich irgendwas mit Container-Style-Queries probiert habe und nicht verstanden habe, warum das

01:20:07.917 --> 01:20:08.917
funktioniert, wie es funktioniert.

01:20:08.917 --> 01:20:12.177
Dann habe ich Miriam Sosaing geschrieben, habe gesagt, hey, sorry, dass du jetzt schon

01:20:12.177 --> 01:20:14.377
wieder auf die Nerven gehen musst, aber du musst mir was erklären, bitte.

01:20:14.619 --> 01:20:18.017
Dann hat sie es mir erklärt und hat gesagt, ja, das funktioniert deswegen so, weil wir

01:20:18.017 --> 01:20:19.256
den computed value verwenden.

01:20:19.508 --> 01:20:22.177
Und dann habe ich so getan, als würde ich verstehen, was sie meint.

01:20:22.177 --> 01:20:24.097
Und sie hat gesagt, ah, okay, super cool, danke.

01:20:24.341 --> 01:20:36.097
Und dann hab ich in die Spec reingeschaut und hab dann gesehen, okay, es gibt nicht nur einen computed value, sondern es gibt einen declared value, einen cascaded value, einen specified value, einen used value, einen actual value, genau, Punkt.

01:20:36.097 --> 01:20:52.097
Und sozusagen ein Wert, der definiert wird, der kann unterschiedliche Phasen durchgehen, also vor allem, wenn ich jetzt hier einen relativen Wert verwende, so was wie current color, der muss ja dann irgendwann auf eine echte Farbe gemappt werden, die dann vom älteren Element kommt oder vom eigenen Farbwert

01:20:52.097 --> 01:20:56.480
und der könnte genauso dann wieder irgendein relativer Wert sein.

01:20:57.416 --> 01:21:05.833
Und genau, das ist irgendwie sehr, sehr spannend, sich das mal durchzulesen, welche unterschiedlichen Phasen so ein Wert durchnimmt.

01:21:06.518 --> 01:21:10.442
Das ist ein Tipp, dann würde ich euch noch empfehlen,

01:21:11.882 --> 01:21:12.927
Takt 63,

01:21:14.484 --> 01:21:19.120
der Unterschied zwischen Inherit, Initial, Unset und Revert.

01:21:19.337 --> 01:21:23.221
Ich habe es sicher vergessen wieder, also vielleicht könnte es jetzt wieder geben, wahrscheinlich nicht,

01:21:23.221 --> 01:21:26.221
Aber das ist auch sehr spannend, mal zu wissen, woher überhaupt.

01:21:26.221 --> 01:21:28.221
Also, Inherit kann ich.

01:21:28.789 --> 01:21:32.221
Unset, glaube ich, weiß ich jetzt. Und Initial habe ich tatsächlich nicht gewusst, was es bedeutet.

01:21:32.221 --> 01:21:34.221
Und das ist auch so.

01:21:36.261 --> 01:21:42.221
CSS 101, mehr oder weniger. Auch ganz spannend. Bei dem Inherit würde ich kurz einspringen.

01:21:42.221 --> 01:21:46.221
Ich glaube, du hattest da schon vor Jahren einen meiner Lieblingsartikel,

01:21:46.221 --> 01:21:51.221
in dem du beschrieben hast, mit diesem Reset-CSS, wie einfach es doch auch eigentlich ist,

01:21:51.221 --> 01:21:54.941
ist so ein Button oder ein Link mit Inherit oder irgendwas,

01:21:55.148 --> 01:21:57.341
weiß ich gerade nicht mehr, zurückzusetzen.

01:21:57.341 --> 01:22:00.941
Auf jeden Fall war das auch eine Sache, die ich dann oft gerne verwendet habe,

01:22:00.941 --> 01:22:07.261
weil ich war auch teilweise so, ah, das ist zu viel Arbeit, das zurückzusetzen in dem Kontext und etc.

01:22:07.261 --> 01:22:10.661
Und festgestellt habe, nein, es ist sehr, sehr einfach, das zurückzusetzen.

01:22:11.316 --> 01:22:17.421
Ja, eine Kombination, es war, glaube ich, All Initial, dass du sozusagen alle Eigenschaften auf den Initialwert setzt,

01:22:17.421 --> 01:22:20.541
wie in das Pack definiert ist, und dass du dann hergehst und sagst,

01:22:20.541 --> 01:22:26.241
Font-Family-Inherit zum Beispiel. Also, dass du sozusagen alles nullst, so wie es in Aspect definiert ist.

01:22:26.241 --> 01:22:33.141
Das heißt, die Browser, die User-Agent-Style-Shields umgehst, aber dann gewisse Dinge, die du aus dem älteren Element rausholst.

01:22:33.141 --> 01:22:36.747
Also eine Kombination aus Initial und Inherit.

01:22:36.927 --> 01:22:42.541
Genau. Also, ich habe einen Blog-Artikel auch gleich wieder gerade gefunden. Den schicke ich mit in die Schaunotizen.

01:22:44.417 --> 01:22:48.041
Cool. Und noch ein letzter Tipp. Und das hat mich so geflasht.

01:22:48.189 --> 01:22:52.852
Tag 29. Nein, sorry, warte mal, blödsinn.

01:22:56.084 --> 01:22:58.041
Tag 74.

01:23:00.486 --> 01:23:05.041
Da geht es um Important in Cascade Layers und wie es funktioniert.

01:23:05.275 --> 01:23:08.041
Aber eigentlich geht es hauptsächlich darum, wie Important funktioniert.

01:23:08.041 --> 01:23:16.041
Also ich arbeite seit über 15 Jahren professionell in dieser Branche und ich habe anscheinend nicht gewusst, wie Important funktioniert.

01:23:16.041 --> 01:23:18.481
Gedacht, ich weiß es, aber offensichtlich habe ich es nicht gewusst.

01:23:18.733 --> 01:23:20.084
Der Consultant. Ja.

01:23:20.849 --> 01:23:29.121
Aber zu Kunden gehe ich, hallo, Experte, Important, Profi, nein, es ist tatsächlich schon so,

01:23:29.121 --> 01:23:32.921
aber was sozusagen im Hintergrund passiert, man merkt es quasi nicht und so richtig kommt

01:23:32.921 --> 01:23:36.161
es erst heraus, wie important wirklich funktioniert, wenn man mit Layers arbeitet.

01:23:36.161 --> 01:23:42.161
Das werde ich jetzt fix nicht versuchen, nach 80 Minuten Gespräch wiederzugeben, aber ich

01:23:42.161 --> 01:23:45.321
kann sehr empfehlen, am Ende des Artikels, wenn man nicht lesen möchte, gibt es ein

01:23:45.321 --> 01:23:48.681
Video von der Juna, wo sie es auch noch mal erklärt hat, weil ich glaube sie, also wenn

01:23:48.681 --> 01:23:52.041
wenn ich ihre Reaktion mir anschaue, sie hat es auch nicht gewusst. Sie war auch sehr geflasht.

01:23:53.680 --> 01:23:57.794
Ja, es ist ein großartiger Cliffhanger. Ein Fünf-Minuten-Video, das schauen wir uns an.

01:23:58.380 --> 01:24:01.323
Genau, aber ich wollt nur sagen, ging mir genauso.

01:24:01.747 --> 01:24:06.401
Und ich hab's auch erst geschnallt, als der Brahmos seinen Talk gemacht hat.

01:24:06.441 --> 01:24:12.901
Der hatte auch noch mal einen über eben Cascade Layers, und dann hat er eben auch noch mal quasi aufgearbeitet,

01:24:12.941 --> 01:24:14.601
wie funktioniert die Kaskade.

01:24:15.034 --> 01:24:18.861
Und ja, schon irgendwie cool. Aber es ist halt so ein bisschen ...

01:24:19.130 --> 01:24:24.919
Also, ich glaube, wenn du dich am Anfang hinsetzt Theorie jetzt erstmal lernst, bevor du die erste Zeile schreibst.

01:24:24.963 --> 01:24:30.841
Das funktioniert nicht. Also kennen wir auch aus der Schule, wofür lerne ich den Scheiß?

01:24:31.004 --> 01:24:38.081
Aber viel cooler ist es eigentlich, erstmal so damit zu arbeiten und dann nachträglich,

01:24:38.809 --> 01:24:44.041
nachzulesen oder irgendwie aufgeschlüsselt zu bekommen, warum passieren die Sachen so.

01:24:44.041 --> 01:24:48.641
Und dadurch, dass man dann Bezug dazu hat, dann schneidet man das halt auch.

01:24:48.641 --> 01:24:53.601
Und dann ist das wirklich so augenöffnend und super spannend.

01:24:54.500 --> 01:24:56.681
Voll. Und damit schließt sich jetzt auch ein bisschen der Kreis.

01:24:56.681 --> 01:25:01.121
Also wir kommen jetzt quasi wieder zum Anfang zurück, weil es war wirklich sehr mühsam.

01:25:01.121 --> 01:25:06.001
Es war einfach höllisch, weil ich hab's durchzogen. Ich hab die 100 Tage wirklich durchgezogen, außer die Wochenenden, die hab ich freigehalten.

01:25:06.441 --> 01:25:09.521
Aber ich hab's geschafft, das wirklich in diesen 100 Tagen zu schreiben.

01:25:09.521 --> 01:25:11.121
Aber ich hab mich selber sehr unter Druck gesetzt.

01:25:11.121 --> 01:25:13.441
Es war einfach dann teilweise einfach wirklich nervig und auch einfach schwierig,

01:25:13.441 --> 01:25:16.961
dann irgendwie das mit der Arbeit dann hinzubekommen, weil ich dann trotzdem eine Stunde machen musste.

01:25:16.961 --> 01:25:38.961
Gleichzeitig habe ich aber auch wirklich viel gelernt und deswegen auch diese letzten drei Tipps sind so Standard-CSS und die waren für mich fast die wertvollsten, weil die neuen Sachen, die kann man sich ganz gut durchlesen, aber eben diese zugrunde liegenden Konzepte so richtig zu verstehen und mal so zu verstehen, damit du andere Dinge verstehen kannst, das war irgendwie sehr, sehr wertvoll. Also es war schon sehr cool.

01:25:40.367 --> 01:25:45.803
Genau, und damit steigerst du ja quasi dann deine Consultant-Fähigkeiten ja am Ende dann auch wieder, ne?

01:25:46.488 --> 01:25:47.961
Ja, und die Stundensätze vor allem.

01:25:48.280 --> 01:25:54.961
Und die Stundensätze, ja. Genau, Cascade, Layer, verstanden, 10 Euro mehr.

01:25:54.961 --> 01:26:04.654
Ja, aber das ist, nee, ernsthaft, das ist eine ganz großartige Liste und ich schaue schon jetzt die ganzen einzelnen Tage durch. Also das ist sehr schön, kurz, freundlich angeschrieben.

01:26:05.249 --> 01:26:10.101
Ich hab übrigens Chat-GPT in der Zwischenzeit gefragt, ob's has, has not, not has erklären kann.

01:26:10.161 --> 01:26:14.422
Ich glaub, es konnte es, ich hab's nicht verstanden. Ich war noch mehr verwirrt.

01:26:14.692 --> 01:26:19.201
Ich glaub, von der ganzen ... Es ist danach rund down gewesen. Der konnte nicht mehr.

01:26:19.301 --> 01:26:22.701
Ich frag gleich, ich versuch's gleich mit GPT4 noch mal.

01:26:22.761 --> 01:26:24.153
Vielleicht kommt was anderes raus.

01:26:25.143 --> 01:26:31.364
Aber ich glaub, von dieser ganzen Liste ist Day 48 ... 48 ... Warum drehen wir auf Deutsch jetzt ...

01:26:31.561 --> 01:26:33.361
Entschuldige, ganz anderes Thema.

01:26:33.660 --> 01:26:39.241
Bei Tag 48, Inset 0, ist glaube ich das, was ich am häufigsten verwende von der ganzen Liste.

01:26:40.051 --> 01:26:46.061
Weil das ist dieses Top Null, Right Null, Left Null, beziehungsweise auch da gibt es ja nur Left und Right Null,

01:26:46.061 --> 01:26:48.061
Das ist ganz super zum...

01:26:50.422 --> 01:26:57.560
Zentrieren. Und auch vertikal, weil ich hatte da nämlich auch letztens über was so einen Loading-Spinner.

01:26:58.344 --> 01:27:02.629
Und zufällig war das tatsächlich was absolut Positioniertes, weil das war während ein Bild,

01:27:03.097 --> 01:27:08.312
hochgeladen wird. Ich kann es ja schon anzeigen, weil im Browser ist die Datei schon vorhanden, aber ich will es ja noch an den Browser hochladen,

01:27:08.312 --> 01:27:17.006
äh, an den Server hochladen. Und hab Design-Team kurz gefragt, kannst du das auch vertikal zentrieren? Und ich wollte schon kurz pauschal Nein antworten.

01:27:17.172 --> 01:27:23.412
Aber es ging dann doch ganz einfach. Und entweder ging das eigentlich schon immer mit Left und Right null,

01:27:23.550 --> 01:27:26.172
oder ich wusste es damals nicht, aber ich kann mich daran erinnern,

01:27:26.172 --> 01:27:30.372
so vor zehn Jahren, vielleicht wusste ich es nicht, habe ich irgendwie noch so ausgerechnet,

01:27:30.372 --> 01:27:40.532
dass ich das jetzt Left auf 50 Prozent setzen muss, aber so minus 13 Pixel, was mein Bildchen-Loader-Dingens da breit war.

01:27:41.267 --> 01:27:43.732
Aber es ging wahrscheinlich auch damals. Ich würde behaupten, es ging schon.

01:27:43.732 --> 01:27:51.421
Die Kombination aus left, right, null, margin, left, right, auto und einer Breite.

01:27:52.051 --> 01:27:54.432
Deswegen habe ich extra vor zehn Jahren dazu gesagt.

01:27:54.432 --> 01:27:56.273
Genau, genau, genau.

01:27:56.432 --> 01:27:58.932
Genau, und jetzt gibt es aber auch inside, inline, inside block.

01:27:58.932 --> 01:28:07.373
Das heißt, du kannst auch die unterschiedlichen Achsen. Aber weil du gerade 48 gesagt hast, 84 kann ich auch sehr empfehlen.

01:28:07.463 --> 01:28:09.174
Die Add-Property-Rule.

01:28:11.432 --> 01:28:18.068
Die Add-Property-Rule, so. Das ist sehr cool, weil das wird vor allem die TypeScript-Fans,

01:28:19.310 --> 01:28:20.472
sehr freuen.

01:28:21.165 --> 01:28:25.090
Da kann man nämlich CSS-Custom-Properties typen quasi.

01:28:27.926 --> 01:28:31.950
Ich find das auch supercool. Und der Safari unterstützt das jetzt auch neuerdings.

01:28:32.778 --> 01:28:34.371
Ja. Ah, okay. Sehr cool.

01:28:34.686 --> 01:28:36.603
Genau. Fehlt dann nur noch der Firefox.

01:28:38.890 --> 01:28:50.732
Ja, recht oft in letzter Zeit. Has zum Beispiel. Ja, aber müsste, also ist ja so quasi so im Begriff ähm äh stable zu werden auch bei denen.

01:28:50.732 --> 01:28:51.691
Ah ja, richtig.

01:28:51.800 --> 01:28:58.232
Das also hinter Flex hängt das noch, ich vermute mal ähm, also das sieht man auch bei Safari,

01:28:58.232 --> 01:29:04.700
die äh bei den letzten Releases haben die sehr viele Bugs gefixt, die auf äh Hass zurückgehen.

01:29:04.853 --> 01:29:11.732
Und das ist so quasi deren Dirty Checking, also weil die quasi umgekehrt müssen die sich,

01:29:11.732 --> 01:29:14.132
müssen die das Dirty-Checking ja im DOM machen.

01:29:14.192 --> 01:29:18.329
Wenn zum Beispiel ein Element nicht mehr Fullscreen ist, dann kriegt das halt ...

01:29:18.879 --> 01:29:23.432
Dann hatte der Safari auch mal hier und da bei so ganz seltsamen Pseudoklassen und so,

01:29:23.874 --> 01:29:28.169
eben noch so Bugs, die halt Leute dann bei der Benutzung rausgefunden haben.

01:29:28.392 --> 01:29:32.967
Und ich vermute mal, dass das beim Firefox wahrscheinlich auch so was ist.

01:29:33.723 --> 01:29:35.965
Kann ich mir auch gut vorstellen, dass das eklig ist.

01:29:37.882 --> 01:29:53.732
Ja, super, super cooles Projekt von dir. Also ich kann mir das gut vorstellen, wie du gelitten hast und aber jetzt, wo du es halt gemacht hast, dann danach ist ja immer echt cool und du hast ja auch schon also deinen

01:29:53.732 --> 01:30:01.531
Consultant Fähigkeiten und Gehalt konntest du steigern damit. Du wurdest zum CSS Day eingeladen, das ist ja auch super.

01:30:01.732 --> 01:30:08.972
Genau. Ähm, richtig cool und wirklich alles megageile Themen,

01:30:09.012 --> 01:30:11.472
die du da rausgepickt hast.

01:30:11.512 --> 01:30:15.072
Und genau, also, wir haben jetzt relativ lange drüber gesprochen,

01:30:15.112 --> 01:30:18.572
und trotzdem haben wir, glaub ich, nur die Hälfte irgendwie erfasst.

01:30:18.612 --> 01:30:21.336
Und manche Dinge muss man ja auch dann quasi in Code sehen.

01:30:22.572 --> 01:30:23.839
Genau, genau, genau.

01:30:25.135 --> 01:30:29.312
Ja, einen Effekt gab's noch. Ich hab seitdem, glaub ich, nix mehr geschrieben.

01:30:29.352 --> 01:30:31.095
Und das wird sich auch nicht so bald ändern.

01:30:31.670 --> 01:30:33.489
Wann war das letzte Post?

01:30:34.336 --> 01:30:42.429
Am 14. Februar habe ich noch meine CSS-Wishlist gepostet, aber bin ein bisschen ausgebrannt, was das Bloggen betrifft.

01:30:42.842 --> 01:30:51.061
Das glaube ich dir. Genau, du hast ja auch genug Supermaschinenoptimierung jetzt betrieben und so. Ja. Super. Ja, ja.

01:30:51.652 --> 01:30:56.193
Dank dir für deine Zeit, fürs Dasein. Ja, vielen Dank für die Einladung.

01:30:56.760 --> 01:31:00.652
Gerne. Vielleicht kann man nochmal eine zweite Einladung aussprechen,

01:31:00.652 --> 01:31:07.652
aussprechen, weil du hattest ja eigentlich auch mal Lust über quasi html-first-content-management-Systeme

01:31:07.652 --> 01:31:09.652
oder Generatoren zu sprechen.

01:31:09.976 --> 01:31:12.982
Vielleicht machen wir das einfach nochmal dediziert.

01:31:14.189 --> 01:31:25.039
Voll. Also ich bin jetzt mal bis zum CSS Day damit beschäftigt, Angst davor zu haben, mit Größen aus der CSS-Welt auf der Bühne zu stehen, um einen Talk vorzubereiten.

01:31:25.039 --> 01:31:36.039
Aber danach werde ich mich auf das Thema JavaScript Frameworks stürzen, beziehungsweise HTML, First JavaScript Frameworks, Meta-Render Frameworks und so.

01:31:36.388 --> 01:31:41.204
Wir sind ein ganz spannendes Thema. Ich find's ein spannendes Thema für Leute,

01:31:41.799 --> 01:31:46.859
die auch nicht aus der JavaScript-Welt kommen, die vielleicht nicht gewohnt sind,

01:31:46.919 --> 01:31:49.319
mit React und Vue und so weiter zu arbeiten.

01:31:49.379 --> 01:31:54.559
Ich glaub, dass sich da sehr viele Möglichkeiten bieten. Aber ich hab's noch nicht fertig gedacht.

01:31:54.619 --> 01:31:56.733
Deswegen ist es ganz gut, wenn wir nächstes Jahr sprechen.

01:31:57.719 --> 01:32:01.219
Machen wir. Genau, wir werden da Wind von kriegen wahrscheinlich,

01:32:01.279 --> 01:32:07.292
weil du wieder 100 Blogposts überschreibst. Kann passieren. Kann sein, dass ich vielleicht schon eine Liste begonnen habe.

01:32:08.139 --> 01:32:13.579
Alles klar, cool. Genau, wenn die Hörer noch Rückfragen haben,

01:32:13.810 --> 01:32:17.579
oder eben coole Projekte umgesetzt haben mit neuen Features,

01:32:17.579 --> 01:32:21.579
dann bitte, bitte schickt sie uns. Wir sind super interessiert dran.

01:32:21.579 --> 01:32:29.268
Und genau, Kommentare gerne in unserem Community-Slack auf Mastodon. Auf Twitter vielleicht lieber nicht, weil der Manuel da gesperrt ist.

01:32:29.579 --> 01:32:33.579
Lieber auf Mastodon. Nochmals vielen Dank. Liebe Grüße nach Graz.

01:32:33.579 --> 01:32:39.579
Viele Grüße nach in der Nähe von München. Was war? Freising, richtig? Ja, genau.

01:32:39.863 --> 01:32:46.191
Aus Düsseldorf. Einen schönen Abend. Bis bald. Macht's gut. Tschüss. Tschau tschau.

01:32:46.960 --> 01:33:10.160
Music.

01:33:15.863 --> 01:33:18.579
Untertitel von Stephanie Geiges.