Wo wir sind, ist vorne, Folge 32, CSS, CSS, CSS!
Herzlich willkommen bei Wo wir sind, ist vorne!
Frontend-Fakten-Frotzelein, der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.
Hallöchen, Entschuldigung, ich bin ein bisschen eskaliert gerade.
Tut mir leid, das war so mein Gefühl nach der Vorbereitung für die Sendung.
Ich dachte so, ich hoffe, das wird irgendwie noch komprimiert und es nimmt neulich die Boxen auseinander.
Das war einfach so, das musste raus, das war so mein Gefühl.
Also jetzt wisst ihr auch schon, worum es geht, es geht um CSS.
Kaum zu hören, ja.
Weiß ich gar nicht, müssen wir das, müssen wir, wir können kurz vorwegnehmen, also wo das jetzt herkommt, vielleicht, sag ich noch ganz kurz.
Guck mal, beim Thema, oder?
Nachher, ich hab das schon so für das Thema nachher eingefahren.
Ja, vielleicht schalten die Leute ja dann, vielleicht schalten die Leute ja vorher dann schon ab.
Heutzutage hat ja keiner mehr irgendwie eine Aufmerksamkeitsspanne, muss man schnell abfangen innerhalb der ersten 30 Sekunden.
Gleich mal Fakten schaffen hier am Anfang.
Ja, also wir haben im Stream die Umfrage zu The State of CSS beantwortet und heute reden wir wieder über Dinge aus dieser Umfrage, die wir noch nicht kannten oder wo wir glaubten, dass wir sie noch nicht kennen.
Das nur ganz kurz vorab und dann können wir eigentlich direkt schon zum Bier übergehen, oder?
Genau, ich hab mal wieder ein Augustiner, weil ihr wisst ja, ich bin nur Showtrinker und mir läuft das Bier ab, beziehungsweise es ist schon abgelaufen.
Ich weiß, es ist Schande über mich, bei mir läuft Bier ab, aber ich hab die letzte Zeit immer nur belgisches Bier getrunken.
Also wieder ein Augustiner Lagerbier, hell.
Ich hab heute ein Hatz-Bier des Monats, India Pale Ale.
Ah, Hatz, äh, aus Karlsruhe?
Aus Karlsruhe, ja.
Oh, das ist sogar eine sehr hübsche Flasche.
Das ist auch, ja, sieht echt richtig aus, deswegen hab ich auch das Bier dann vorbeigelaufen und hab so, ach, guck mal.
Dann hoff ich für dich mal, dass es so gut schmeckt, wie das Etikett ist.
Ich bin ja sonst kein so Fan vom Hatz, das ist immer so ein billiges Disco-Bier gewesen.
Ja, ich muss auch sagen, dieser, also, ich bin ja sehr stolz auf meinen Etch-Flaschenöffner,
ähm, aber er macht die Flaschen nicht in befriedigender Weise auf, sodass es gut klingt.
Also sie gehen auf, aber es klingt dann nicht gut.
Ich brauch, glaub ich, brauch da, glaub ich, was anderes.
Also, Konstantin trinkt schon, ich stoß noch an.
Achso, sorry, ja.
Nee, aber es ist echt, ähm, echt lecker.
Also ich mag so IPAs sowieso.
Und das ist so, ja, diese typisch fruchtige Note.
Also, hm, bin zufrieden mit meinem Kauf.
Sehr gut, sehr gut.
Und ich hoffe, ihr seid zufrieden mit der Audioqualität.
Das ist schon fast jetzt ein Retropunkt, aber das, äh, wollte ich noch sagen, vielen Dank.
Wir haben, äh, erspendet ein neues Audiointerface für mich in, in unserem Twitch-Stream.
Und, äh, da wollte ich mich noch mal bedanken, hier auch im Podcast und natürlich auch ein bisschen was vom Podcast mit reingeflossen, genau.
Und ich hoffe, das passt von der Qualität her.
Ich, ich, ich, ich, ich kann jetzt, äh, hier, hier auch, äh, so ein Audio-Monitoring machen, was ich vorher nicht hatte.
Da hatte ich dann meine Noise-Canceling-Hörer auf und hab, glaub ich, ins Mikrofon geschrien und mich aber selber nicht dabei gehört.
Und jetzt ist das, ähm, also ich find, ich kling satter.
Du klingst wie, wie Radio, Video und Radio Konstantin.
Ja, meine Stimme ist auch schon wieder ein bisschen belegt.
Also ich glaube, das kommt noch dazu, spielt mit rein.
Ah, das ist, das ist hervorragend.
Also eigentlich nehme ich, wenn ich so kurz vor Erkältung bin, nehme ich eigentlich am liebsten auf, weil dann hab ich nämlich diese Radiostimme.
Yeah.
Gut, dann machen wir doch gleich direkt weiter.
Frontend, egal.
Mit der Retro, oder?
Nein, das kann ich nicht so gut.
Achso, ja, los geht's.
BBS e.V. präsentiert die Retrospektive.
Die Retrospektive.
Und, äh, ja, ich fang mal, fang mal an.
Wir haben, ich möchte auch im Podcast noch ein bisschen WWS e.V. Geburtstagsglitzer verteilen.
Wir hatten am Mittwoch unser zweijähriges Bestehen.
Am 27.10. haben wir die erste Podcast-Folge veröffentlicht vor zwei Jahren.
Und passenderweise mittwochs, wo unser, einer unserer Streamtage ist, haben wir dann einen Geburtstags-Stream gemacht.
Und ich fand den sehr gelungen.
Du auch?
Ja, ich fand den super.
Ich fand den wirklich super.
Also, es hat wirklich Spaß gemacht.
Wir haben wirklich, wir haben ja vorhin schon gesagt, so, äh, vielleicht backe ich was oder so.
Habe ich auch tatsächlich gemacht.
Muffins mit unserem Logo drauf und mit diesem Emoji drauf.
Und wir hatten Sekt, wir hatten Wimpelketten, wir hatten Partyhütchen.
Moritz hat auch ein hübsches Schleifchen umgehabt.
Also, wir haben, äh, ich finde, wir haben nicht zu viel versprochen, oder?
Feuerwerk und Konfetti.
Feuerwerk, genau.
Wir haben, wir haben es richtig krachen lassen, also, uns war nicht zu schade.
Das hat richtig gekracht.
Ähm, und damit auch, auch die Podcast-ZuhörerInnen mal einen Eindruck von unserem Stream-Geschehen
so ein bisschen bekommen, äh, habe ich auch mal keinen Ausschnitt von dem Stream am Mittwoch parat.
Drei, zwei, eins.
Wow.
Ach, die Scheiße.
Sehr cool.
Ja, das war eins von einem richtig guten.
Alter Schwede.
Super, ja, du bist auch voll, voll beglittert.
Du willst nicht sehen, wie es hier jetzt aussieht.
Ja, ja, du hast ein Bild gepostet auf Twitter, es sah wirklich entsprechend aus.
Das war die Konfetti-Kanone, die war richtig gut.
Die hat sich echt gelohnt.
Ja, vor allem, das war, ähm, eine sehr kleine Konfetti-Kanone.
Ich hatte auch schon, also, die war so, ähm, keine 30 Zentimeter, äh, lang.
Ich hatte auch schon Konfetti-Kanonen, die so einen halben Meter oder, oder noch länger
waren und war von denen meistens enttäuscht, weil man, da denkt man ja, damit kann ich jetzt
irgendwie die ganze Nachbarschaft mit Konfetti versorgen und dann sind die irgendwie ein bisschen
schwach auf der Brust, aber die, für die Größe, da war richtig Action dahinter.
Das war auf jeden Fall großer Spaß.
Ich hab schon nachgeguckt, ob ich die nochmal nachkaufen kann, aber man findet sie nicht
mehr mehr.
Ah, schade.
Problem.
Also, ich glaub, dafür muss man in den entsprechenden Party laden.
Ich will da jetzt keine Werbung für machen, aber es gibt, es gibt so Läden, die haben
einfach nur Partybedarf und es scheint eine Kette zu sein.
Ähm, vielleicht muss ich in so einen Laden nochmal rein.
Leider gibt's das in Karlsruhe nicht.
Aber dafür lohnt sich eigentlich fast ein Ausflug mal irgendwo hin.
Und es lohnt sich auch ein Ausflug auf YouTube, da kann man nämlich den Geburtstagstudien
nochmal nachschauen.
Boah, jetzt kommen wir die Überleitungen rein.
Genau, in zwei Teile geteilt.
Diesmal, weil wir zwischendrin Moritz OBS Studio zum Anschmieren gebracht haben.
Ja, irgendwie war's plötzlich weg.
Einfach so.
Das war schon erstaunlich.
Das war noch, das hat man noch nie.
Das war wirklich crazy.
Gut.
Dann hast du.
Ja, ähm, wir machen jetzt direkt das Thema.
Wir haben heute keine Property, weil unser Thema heute völlig aus Properties besteht.
Und deswegen.
Achso, machst du gar keine Retro mehr?
Achso.
Ach, schade.
Hast du noch irgendwie ein bisschen was?
Mensch, du hast recht.
Du hast doch hier so einen Punkt noch stehend.
Ja, ja, ja, ja, ja, ich bin völlig außer Rand und Band mal wieder.
Ja, äh, Retro-Thema ist eigentlich, ähm, nur das, ich, ich hab halt gemerkt, dass wir
auf vielen Plattformen vertreten sind, so viele, dass ich schon selbst den Überblick verloren
habe und hab mich gefragt, du, du Zuhörerin, ähm, hast du denn uns schon überall, folgst
du uns schon überall, hast du uns schon überall abonniert?
Also, ihr wisst jetzt schon bei Twitch, ähm, Twitter, ich glaub, da haben wir auch schon
ein paar Follower.
Das heißt, es kann schon eine gute Chance geben, dass du uns bei Twitter folgst, aber
falls nicht, dann, äh, gerne machen, äh, Twitter, WWSIV, ähm, YouTube, was der Konstantin
gerade schon gesagt hat, wo wir sind, ist vorne, da haben wir dank euch auch schon so eine
coole YouTube-URL bekommen, ähm, youtube.com slash, wo wir sind, ist vorne, glaube ich, ne?
Ähm, Twitch natürlich, äh, twitch.tv slash WWSIV und, äh, Onlyfans dürft ihr auch und wir
haben auch ein Discord-Channel, ähm, diese, diese Discord-Channel, die haben irgendwie so komische
URLs, deswegen kann man da auch, äh, eine Kurz-URL von uns nehmen, falls ihr mal bei uns im
Discord vorbeikommen wollt, ist nämlich echt cool, da findet immer mal wieder tatsächlich
interessante Developer-Diskussionen statt, ähm, Leute haben irgendwie eine Frage, schweißen
die da rein, dann kommt jemand, hat eine Antwort und da geht, also ich finde, da passieren
echt coole Sachen, so eine schöne, kleine, nette Community, wo man sich austauscht und, äh,
sich gegenseitig hilft, äh, findet ihr unter WWSIV.de slash Discord oder auch, wo wir sind,
ist vorne.show slash Discord, wie ihr wollt. Genau, äh, einfach mal überall vorbeikommen,
natürlich auch bei Onlyfans, äh, haben wir schon lange nichts mehr gepostet, da müssen wir
mal wieder. Schon lange nichts mehr ist gut, ja. Es gab mal einen Post, aber der ist irgendwie
offline genommen worden, weil ich kein, also ich müsste mal eine Zahlung... Haben die nicht-Nackt-Filter
und alles, was nicht-nackt ist, wird rausgefiltert, oder? Achso, nee, die haben keinen nicht-nackt-Filter,
die kriegen jetzt sogar Ärger wegen ihrem Naked-Content von irgendwelchen Investoren, da gibt's so,
gibt's so ein bisschen Beef, äh, ja, es ist ein bisschen komisch, eine Plattform, die durch
nackt Zeug groß geworden ist, will irgendwie, das war wie Tumblr, Tumblr ist meiner Meinung nach
auch durch nackt Zeug groß geworden, dann haben sie es irgendwann verboten und seitdem ist Tumblr
tot. Also, nehmt euch ein Beispiel dran, verbietet nichts, nicht nackt Zeug. Twitter tut es
übrigens nicht, ich weiß nicht, ob du das wusstest, man kann sehr expliziten Naked-Content
auf Twitter finden. Ach doch, äh, ja, ist, äh, auch schon mal durch, durch eine bestimmte
Bubble in meine Timeline gerutscht, ja. Also, das finde ich immer wieder erstaunlich, aber
die haben das irgendwie, die schaffen das irgendwie ganz gut, dass das contained bleibt in seiner
eigenen Bubble, dann sind da die Leute, die nackt Zeug haben wollen und, äh, es ist, es ist
aber noch nie in meine Timeline reingeblubbert. Das ist tatsächlich nicht mal auf meinem
anderen Privataccount, sondern wirklich auf dem, auf dem so Entwickler-Account, den ich
seit seinem Podcast statt habe. Ne, da ist das drüber reingerutscht.
Du konntest ja doch einen Porn-Account.
Keinen Porn-Account, aber, aber ein, ja, so, so politisch und, und, also nicht, nicht
Entwickler-Zeug. Ähm, ja, und da hatte ich das plötzlich und umso verwunderter war ich,
dass das in meiner, in meiner Timeline war, aber.
Und zur Onlyfans, es gab einen Post, aber man sieht ihn nicht mehr. Okay.
Aber wir haben wirklich eine Onlyfans-Account, ähm, aber man sieht ihn nicht mehr, weil ich
glaube, was wir hätten machen müssen, wäre eine Zahlungsmethode hinterlegen.
Und das ist dann, wenn du irgendwie Deutscher bist, da musst du dann irgendwie noch durch
irgendwelche Proxys durch und dann muss man da seinen Namen angeben und, ihr wisst das.
Adresse und, äh, genau, Adresse und keine Ahnung und, ja.
So, was man halt so macht, genau, im Internet, wenn man irgendwie das mit, ich hab vor kurzem
jetzt probiert, mich bei, ähm, GitHub mal anzumelden für die, einfach nur, weil es mich
interessiert hat, weil ich gesehen hab, dass man bei GitHub, ähm, sich sponsoren lassen
kann. Und, ähm, ich hab mir gedacht, ja, warum nicht, ich richte es einfach mal ein,
wenn es geht, probiere ich, ich probiere so Sachen manchmal ganz gern einfach aus und ich
musste durch so viele Reifen springen, tatsächlich, bis ich, und ich hatte schon bei Stripe
irgendwie einen Account angelegt und überall meine Daten eingegeben, bis am Ende dann
irgendein noch was kam, ich sag, ey, komm jetzt, Leute, jetzt nicht das auch noch, jetzt hab
ich keinen Bock mehr und hab dann irgendwann abgebrochen. Also dieses mit Zahlungsmethoden
und grad, wenn du, ähm, das bei einem ausländischen Anbieter machst, das ist oft echt ein Pain.
Ähm, mal ganz abgesehen davon, wenn man ja heutzutage irgendwie ein Bankkonto eröffnen
möchte, wo du dann irgendwie Video-Authentifizierung mit Ausweis vor's Gesicht halten und jetzt
mal bitte so kippen und bitte so kippen und worab.
Ja, also, Appell, abonniert uns überall, wir freuen uns drüber, wir machen noch, wir
bemühen uns auch überall um den Content, ich will sagen, in der Qualität, wie ihr es gewohnt seid.
Ja, ist doch gut ausgedrückt, ja.
Ich mein, äh, nachdem der Shep uns ja geadelt hat, mit nicht immer zielführend, aber immer
lehrreich, äh, vielen Dank nochmal an der Stelle, ähm, wissen wir auch, wo wir stehen, wir wissen
schon, wo wir stehen.
Ja, und was wir schon lange nicht mal gemacht haben, eigentlich mal gesagt, wir machen es auch
nicht mehr, aber befehlt uns doch mal, nochmal weiter.
Empfehlt uns mal, genau.
Wir haben nämlich, also, vielleicht kann man das auch sagen, weil wir jetzt hier so Jubiläum
und Geburtstag und so, also wir haben auch tatsächlich, das haben wir im Stream auch schon gesagt,
wir haben eine, eine magische Zahl überschritten, äh, wir sagen jetzt, wir nennen ja unsere
Zahlen nicht öffentlich, aber wir haben eine magische Zahl überschritten, was die Folgen-Downloads
angeht, und, ähm, da hab ich mir dann gedacht, ja krass, ähm, weil wir stellen uns ja immer
vor, wenn, wenn so viele Leute im Raum sitzen würden, wie das dann wäre, weil ja auch schon
mal jemand gemeint hat, mach doch mal so ein Live-Event, ähm, und da hab ich mir dann überlegt,
wenn jetzt von denen, die uns da so hören, pro Folge, wenn da jeder nur einen weiter, also
uns weiter empfiehlt, dann eine Person, dann wären das gleich doppelt so viele.
Verrückt, oder?
Du hast bei Mathe aufgepasst.
Aber heim dich, ey.
Und doppelt so viele, das wär natürlich schon, das wär doppelt so gut.
Doppelt so viele wär doppelt so gut.
Okay, okay, okay.
Ich glaub, bevor es noch blöder wird, gehen wir noch direkt zum Thema, oder?
Du hast dein Mathe-Game echt am Start hier.
So, jetzt, jetzt das Thema.
Hier ist WWS IV mit dem Tagesthema.
Ich glaub, das Internet ist voll.
Das Internet ist voll.
Weil's, weil's, weil's, weil's so rumknackst.
Ja, wir haben so ein Glistern, Glistern, die sind beide auf dem Ohr.
Ja, ich hoffe, das liegt nicht am Audio-Interface.
Also, blöd wär's, wenn das tatsächlich bei mir auch in der Aufnahme landet.
Und nicht bei dir nur.
Das glaub ich nicht, weil, wenn solange du dich knacksfrei hörst, glaub ich, sollte das kein Problem sein.
In meinem, das ist eine gute Frage.
Das knackt nur, wenn du sprichst, glaub ich.
Also, ich hör mich über das Interface als ...
Bei mir knackt's so, wenn du sprichst.
Ah ja, okay.
Von daher, glaub ich, ist alles gut und schlecht gleichzeitig.
Okay.
Genau.
So, wir haben ja wieder die, hab ich ja vorhin schon gesagt, die State-of-CSS-Umfrage gemacht, die 2021er-Variante.
Und ich befürchte, wenn ihr die Folge hört, könnt ihr sie nicht mehr machen, weil ich glaube, es ist nur noch diese Woche.
Und wir veröffentlichen wahrscheinlich am Sonntag ...
Ich glaube, es ist sogar nur noch heute Abend, ne?
Sogar nur noch heute.
Wir haben sie am Mittwoch im Stream gemacht.
Wenn ihr sie quasi mitmachen wollt, nochmal, könnt ihr auf YouTube vorbeischauen.
In unserem, ja, könnt ihr euch den Stream anschauen, wo wir die Umfrage gemeinsam machen.
Und die Folge, die wir jetzt heute hier machen, ist, sowas haben wir schon mal gemacht.
Die Folge hieß 17 CSS-Eigenschaften, die wir noch nicht kannten.
Wo wir drüber sprachen, bei der vorherigen Umfrage, Sachen, die uns da aufgefallen sind, die wir eben noch nicht kannten aus der Umfrage.
Und genau das machen wir jetzt auch wieder.
Wir haben ein paar Sachen aufgeschrieben, wo wir dachten, hm, jetzt bin ich mir gar nicht sicher, ob ich die CSS-Eigenschaft tatsächlich schon kenne.
Und die besprechen wir heute.
Die haben wir jetzt ein bisschen vorbereitet.
Ich muss sagen, teilweise habe ich es echt oberflächlich vorbereitet, weil ich gemerkt habe, gerade bei meiner ersten Eigenschaft, die jetzt gleich kommt, habe ich gleich gemerkt, da könnte man eine ganze Sendung zu machen.
Und das werden wir wahrscheinlich auch tun mal, zumindest um diesen Komplex drumherum, weil das etwas ist, womit ich mich persönlich noch nie beschäftigt habe.
Obwohl es eigentlich, also dieser ganze Komplex schon relativ alt ist, gibt es schon lange.
Und zwar, der Komplex selbst ist im weitesten Sinne Multicolumn-Layout.
Wir haben da schon mal drüber gesprochen.
Und ich habe halt gesagt, also CSS-Columns, ich weiß gar nicht, heißt das so, Multicolumn, wo man Text in mehrere Spalten umbrechen lassen kann, habe ich persönlich noch nie benutzt.
Und da hatten wir es auch in der Umfrage drüber.
Aber die Eigenschaften, um die es eigentlich geht, heißen Break Inside, Break Before und Break After.
Und wenn man weiß, dass es zum Beispiel um Columns geht, dann kann man sich vielleicht auch ungefähr vorstellen, was die tun.
Und wie gesagt, ich mache das jetzt sehr oberflächlich, weil die haben sehr viele Eigenschaften.
Also diese Properties haben wiederum sehr viele Werte.
Die können wieder sehr viele verschiedene Werte haben.
Und um auf das alles einzugehen, dafür würde diese Sendung jetzt nicht reichen.
Deswegen versuche ich da mal schnell drüber zu gehen.
Ich habe auch eine kleine Demo gebaut.
Also Break Before beschäftigt sich, ob vor einem Element innerhalb eines Multicolumn-Layouts ein Umbruch stattfinden darf.
Ob da quasi der Break in die nächste Spalte stattfinden darf.
Break Inside legt fest, ob ein Element innerhalb umbrechen darf.
Also wenn du jetzt zum Beispiel, warum auch immer, eine farbige Box hast in deinem Multicolumn-Layout,
dann möchtest du vielleicht nicht, dass die in der Mitte umbricht und halb auf dem einen und halb auf der anderen Seite ist.
Dafür kannst du Break Inside benutzen.
Und Break After ist das Ganze für am Ende.
Und so, um das man sich ein bisschen besser vorstellen kann, wofür zum Beispiel Break After,
also vielleicht muss ich noch kurz sagen, die Werte davon, die es gibt.
Also bei Break Before und Break After ist der Standardwert Auto, klar, da passiert quasi gar nichts.
Standardverhalten, also alles bricht einfach um.
Und der Wert, der auch in den meisten Browsern unterstützt wird und der am meisten Sinn ergibt in dem Kontext, ist Avoid.
Break Before Avoid oder Break After Avoid.
Das heißt, dass der Umbruch verhindert wird oder vermieden wird an der Stelle, wenn es irgendwie geht.
Und diese Geschichte mit, was gewinnt denn dann, weil theoretisch können da nämlich zwei Elemente hintereinander sein, die konträre Angaben haben zueinander.
Da geht ein ganz großer Komplex an, wer überschreibt denn was auf und so.
Da kann ich jetzt auch nicht im Detail drauf eingehen, weil das auch wieder fast eine eigene Sendung wäre.
Auf jeden Fall, ich habe eine kleine Demo gebaut, wo ich ein paar Sachen untergebracht habe.
Die könnt ihr euch auf CodePen dann auch mal anschauen.
Der Link kommt in die Shownotes.
Das W3C hat mal eine Demo gebaut, die komischerweise in einem PDF ist.
Das habe ich nicht so richtig verstanden.
Aber darin kann man ganz gut sehen, wofür das zum Beispiel gut sein kann.
Was man nämlich als Typograf vermeiden möchte, ist, dass zum Beispiel eine Überschrift am Ende einer Spalte ist und dann im Prinzip danach gar kein Content mehr folgt, sondern dass die Überschrift quasi das Letzte ist, was in einer Spalte ist.
Und wenn ich da jetzt der Überschrift sage, break after avoid, dann findet danach kein Umbruch statt.
Das heißt, in dem Fall wäre dann das Layout clever genug zu sagen, okay, gut, ich packe die jetzt mal in die nächste Spalte, dass sie auf jeden Fall nicht alleine dann da steht.
Also das ist, glaube ich, so ein klassischer Anwendungsfall dafür.
Wie gesagt, viel tiefer kann ich da drauf jetzt nicht eingehen.
Schaut euch mal die Demo an.
Schaut euch auch den W3C-Link mal an.
Der kommt auch in die Shownotes.
Wir machen dazu nochmal zu Multicolumn-Layouts, glaube ich, machen wir nochmal eine Sendung.
Wie gesagt, mich hat es bisher nicht so groß interessiert, aber ich habe gemerkt, da gibt es einiges.
Zum Beispiel, man könnte auch noch tiefer eintauchen.
Es gibt nämlich auch sowas wie CSS-Regions.
Hast du das schon mal gehört?
Kennst du das?
Nee, nee, ich glaube nicht.
Und das ist auch schon relativ alt, aber hat sich nicht so richtig durchgesetzt.
Das ist ein Standard von Adobe gewesen und das ist echt abgefahren.
Das spielt so in eine ähnliche Richtung mit rein.
Das wollte ich jetzt noch ganz kurz anschneiden.
Und zwar Regions ist wohl nachempfunden nach einem Feature, das es in InDesign gab.
Und das funktioniert so, dass du einer Inhaltsbox sagen kannst, hey, ich habe hier Inhalt und bitte fließ erst in diese Box und dann in diese Box und dann in diese Box.
Das heißt, du kannst verschiedene Diffs theoretisch auf der Seite platzieren oder verschiedene HTML-Elemente.
Die werden durchnummeriert sozusagen, also das ist so ganz grob.
Und dann kannst du sagen, okay, geh erst da rein und dann geh da rein.
Wenn du noch mehr hast, dann geh da rein.
Also kannst du, und das kannst du beliebig auf der Seite verteilen.
Ja, jeder total an InDesign, wo du so mehrere Kästen aufziehen kannst.
Genau, was total verrückt ist, jetzt muss ich gerade mal gucken, habe ich davon das Can-I-Use noch offen?
Nee, leider nicht.
Das ist aber auch was, was nicht so wirklich unterstützt wird, wenn ich es noch richtig im Kopf habe.
Ist auf jeden Fall eine ziemlich verrückte Geschichte und das wurde zum Beispiel bei Break, bei diesen Break-Rules auch mit beachtet.
Weil man kann nämlich zum Beispiel auch sagen, Break-After-Region.
Und ich habe mich da drüber gewundert, habe das gesehen, Break-After-Region, geht es um CSS-Regions.
Und es geht halt auch um Break-After-Page.
Und vielleicht das Letzte noch dazu, vielleicht kennt jemand die Eigenschaften Page-Break noch.
Page-Break-Inside als, ja.
Page-Break-Before und Page-Break-After.
Genau.
Tatsächlich habe ich das dieses Jahr auch bei dem Projekt benutzt, weil wir hatten es im Studio ja auch so drüber, Print mit CSS zu machen.
Und auch, weil ich mich jetzt gerade gewundert habe, warum das eine PDF-Demo ist.
Aber ja, CSS ist halt auch für Print.
Also kannst du eine Seite auch ausdrucken, wenn du es möchtest.
Die Frage, wer das noch tut heute.
Ja, da müssen wir, nee, reden wir jetzt nicht drüber.
Das führt nur zum Streit.
Nee, aber genau, Page-Break-Inside beispielsweise, das ist jetzt deprecated für und dann gibt es halt, dafür gibt es eben diese neuen Break-Regeln,
die eben das Vereinheitlichen und verschiedene Sachen noch mehr ermöglichen, als das vorher ging.
Also das geht in diese Regeln mit auf.
Also wer Page-Break kennt, das ist quasi jetzt deprecated und geht in diese Break-Before-, Inside- und After-Regeln über.
Genau, das dazu.
Cool, ja, dann kommen wir zum nächsten Punkt und auch das ist eigentlich was, mit was man bestimmt eine Folge füllen kann, mal zu gegebenen Zeitpunkt.
Aber wir werden jetzt heute mal ein bisschen an der Oberfläche kratzen.
Und zwar geht es um Container-Queries.
Und Container-Queries, die haben wir in Folge 11 schon mal angesprochen und auch in Folge 17.
Und es hat sich aber jetzt ein bisschen was getan inzwischen.
Damals war das noch so, die 11 war glaube ich unsere Wunsch-Folge.
Und die 17 war die von der letzten State-of-CSS-Umfrage.
Und seitdem hat sich ein bisschen was getan.
Im April ist es im Canary-Bild von Chromium gelandet.
Und seit Chrom ...
Bitte?
Im wasser Bild?
Canary.
Canary?
Canary.
Aber egal, glaube ich.
Ich weiß es nicht.
Sagt ihr es uns, wie wird es richtig ausgesprochen?
Wir sind da ja große Helden drin.
Chris Coyer weiß davon, wie zu singen.
Tralala.
Ja, jedenfalls seit Chrome 92 ist hinter einem Flag und jetzt seit September auch in Edge und Opera gelandet.
Also in anderen Chromium-basierten Browsern.
Und damals, als wir drüber gesprochen haben, da standen noch verschiedene Syntax-Vorschläge im Raum.
Und wir haben uns da so ein bisschen, ja, drüber ausgelassen und haben gesagt so, ja, das finden wir irgendwie, das finden wir doof und das finden wir gut.
Und es gibt jetzt so ein Quasi-Standard, also das Ganze ist immer noch experimentell, deswegen ist es ja auch noch hinter einem Flag.
Aber es gibt jetzt quasi so eine Nägel mit Köpfen machen, es ist jetzt so implementiert in Chromium-Browsern, das heißt, das ist schon relativ fest.
Kann sich natürlich hier und da noch was verändern, aber so im Großen und Ganzen, denke ich, wird das bei der Syntax bleiben, wenn jetzt nichts mehr passiert.
Und umgesetzt wird es jetzt mittels eines Add-Container-Statements, also so ein Add-Media machen kann, gibt es jetzt Add-Container.
Und das in Verbindung mit dem Contain-Property, beziehungsweise mit dem Container-Type-Property und da zum Beispiel dann dem Value Inline-Size.
Damit sage ich dann einem Element, du eröffnest jetzt einen neuen Containment-Bereich.
Containment, bei wem da jetzt irgendwie so im Hinterkopf was klingelt, CSS-Containment, das ist der gleiche Draft, deswegen auch das Contain-Property, da hatten wir es in Folge 17 drüber.
Das diente dann so dazu, um so Optimierungen vorzunehmen, dass der Browser weiß, okay, da wird sich was verändern und da vielleicht nicht und muss ich das überhaupt initial rendern und so.
Und das spielt damit rein und das Contain-Property unterstützt eben auch dieses, oder wird dann in Zukunft unterstützen, dieses Container-Type, beziehungsweise ein Value davon,
eben Inline-Size oder ich setze es über das Container-Type-Property selbst und dann kann ich sagen, Add-Container, Klammer auf, Min-Width, 700 Pixel,
so wie ich das bei der Medium-Query machen würde, nur dass es sich dann eben auf dieses Containment bezieht.
Und auf welches es sich bezieht, also es sucht sich standardmäßig das nächsthöhere, Gefundene.
Also irgendein Element, es geht quasi alle Parents da nach oben und, beziehungsweise es wird wahrscheinlich nach unten durchgereicht im Renderer.
Und es bezieht sich dann eben darauf, wenn dieses Element dann mindestens 700 Pixel hat, dann reagiere ich so und so.
Also das heißt, wie Media-Queries, nur halt nicht auf den Viewport, sondern eben auf ein bestimmtes Parent-Element bezogen.
Und das bedeutet, dass ich, wenn ich jetzt ein Component habe, die entsprechend CSS-Anweisungen hat, auf ein Containment zu reagieren,
dann kann ich die an verschiedene Stellen in meinem Layout schieben, ohne dass ich das wissen muss.
Also früher hätte man dann vielleicht eine bestimmte Klasse noch gesetzt, damit ich weiß, okay, ist das jetzt in der Sidebar oder ist das irgendwie im Footer oder so.
Und jetzt kann das einfach darauf reagieren, aha, okay, ich bin in einem Element, das mindestens so breit ist, dann stelle ich mich so und so da und ansonsten stelle ich mich anders da.
Und das ist natürlich schon ganz cool, also dass ich das so reusable habe, ohne mir um den Kontext wirklich Gedanken machen zu müssen,
sondern einfach nur, wie viel Platz habe ich da und bin ich dann besser hochkant, quer oder wie oder was.
Und damit man jetzt nicht nur darauf angewiesen ist, okay, es sucht sich immer den nächsthöheren Containment-Kontext,
kann ich mit dem Property-Container-Name auch einen Namen festlegen.
Also da, wo ich das Contain-Property oder Container-Type-Property setze, da kann ich auch sagen Container-Name und da kann ich dann einen Custom-Ident setzen.
Also auch so wie ich es bei Grid-Area zum Beispiel machen kann, wo ich ja auch diese Grid-Areas benahmen kann.
Da gibt es, also Custom-Ident ist wirklich so ein Property-Type oder Data-Type in CSS, der dann bestimmten Regeln folgen muss.
Also alphanumerisch, dezimale Zeichen, Bindestrich, Unterstrich sehe ich hier, Backslash, also Escape-Character kann man sogar, also ja, kann man eben sprechenden Namen für sich wählen und kann dann sagen, okay, eben Footer ist der Name von dem Containment oder Sidebar ist der Name von dem Containment.
Und ansteuern kann ich das Ganze dann, indem ich Add-Container und dann dieses Custom-Ident mache, also Add-Container-Footer, Add-Container-Sidebar, dann Klammer auf und meine Min-Width oder Max-Width als Property.
Genau, und es gibt eine Demo-Collection auf CodePen, die man sich mal anschauen kann, die packe ich in die Show-Notes, da sieht man so Demos, was man da alles mit machen kann, muss man natürlich entsprechend aktiviert haben, also das Flag für Container-Queries, das muss aktiviert sein, sonst funktionieren bei mir die Demos natürlich nicht.
Und da habe ich mal so zwei rausgesucht, die können wir uns vielleicht kurz anschauen, wenn du die das erste Mal nimmst, also nach der Collection.
Ah, das ist so ein bisschen interessant.
Da ist auch eine Sidebar und das ist links ein Container, das ist aber im Endeffekt das gleiche, das ist ein Bild und ein Text ist nebendran, also Überschrift und Text und Bild und die ordnen sich eben unterschiedlich an, wenn ich das Bild dann den Browser resize.
Ich weiß nicht, du hast das Flag wahrscheinlich nicht an, das heißt, du siehst es wahrscheinlich jetzt gar nicht.
Also bei mir, ab einer bestimmten Breite, wandert der Text, der rechts neben dem Bild ist, auf der linken Seite, der wandert unter das Bild.
Bei welchem bist du? Bei dem ersten?
Genau, bei dem mit diesem Heißluftballon in Form von einem Hundekopf rausgestreckt.
Ah, das ist bei mir nicht das erste, ich habe die Container-Units, heißt das, das ist der Schuh.
Also nicht das erste aus der Collection, sondern nach der Collection ist noch ein Link.
Ah, okay.
Ist sogar von Rachel Andrew ist die Demo.
Ah ja, der Ballon.
Und bei dir, du wirst wahrscheinlich jetzt keine Veränderung feststellen, wenn du es ganz schmal ziehst, bleibt bei dir wahrscheinlich alles wie gehabt.
Es ändert sich, außer an der Breite von dem Bild.
Genau, so soll es auch sein, also so ist richtig.
Bei mir wandert der Text dann unter das Bild, weil ich eben dieses Flag aktiviert habe.
Also es ist ganz cool, das mal zu aktivieren eigentlich und die Demos schon sich mal anschauen zu können.
Sollte ich mal tun.
Und dann gibt es noch eine zweite Demo.
Da wäre immer interessant, was die bei dir macht.
Da hast du so ein T-Shirt und rechts unten so ein Anfasser zum Resizing.
Ja.
Was macht das, wenn du es größer ziehst?
Das ist eine Text-Area, ne?
Wenn ich es größer ziehe.
Ja, beziehungsweise einfach ein Diff mit dem, na wie heißt das, Resize.
Ah, gibt es das?
Wie heißt das denn?
Wir haben wieder was gelernt.
Heißt das nicht einfach nur Resize Both?
Resize Both, genau.
Ja, Resize Both.
Das kannst du auf X oder auf Y, glaube ich, setzen.
Hä, was ist jetzt gerade passiert?
Das ist verrückt.
Also bei mir ist es so, wenn ich das anfasse, also ich den Anfasser da unten, dann kann ich
das größer ziehen, so nach rechts unten diagonal und dann wird das T-Shirt blau und es steht
ein M auf dem Etikett statt S.
Und wenn ich es noch weiter ziehe, dann wird es grün mit einem L und ganz groß ein XL.
Das habe ich aber irgendwie auch.
Also bei mir startet es mit XL.
Okay.
Ich ziehe größer und dann wird es irgendwann, nee, hä?
Wenn ich es dann, genau, wenn ich es grün, Moment, das ist wirklich merkwürdig.
Also es ist abgeschnitten bei mir Initial.
Es ist ein X, ein lilales XL-T-Shirt Initial.
Das ist schon mal falsch.
Ich ziehe größer und es passiert erst mal nichts.
Dann mache ich es wieder kleiner.
Dann wird ein L draus.
Ach, okay.
Und dann, wenn ich es dann in der Breite noch verkleinere, dann wird irgendwann S.
M und S.
Ja, also, ah, genau, in der Breite kann ich die verschiedenen T-Shirts sehen, wenn ich es
in der Breite verändere.
Keine Ahnung.
Also funktioniert es teilweise, aber eben nicht so, wie es soll.
Was vor allem sehr gut funktioniert, ist dieser blinkende Pfeil, der auf diesen Resizer
zeigt.
Ich glaube, wir sind schon wieder viel zu visuell.
Wahrscheinlich kann man jetzt beim Zuhören überhaupt gar nicht folgen.
Also guckt in die Shownotes, klickt durch die Demos.
Genau.
Und das war es eigentlich schon.
Also da könnte man auch noch mehr in die Tiefe gehen, gerade mit diesen ganzen Containment-Geschichten
noch.
Aber ich denke, das reicht, um so einen Eindruck davon zu bekommen.
Ja, ich denke, das ist wie mit vielen CSS-Eigenschaften.
Also mir geht es immer so, ich muss anfassen und damit rumspielen, um irgendwie es zu verstehen
zu können und irgendwie dann so einen Eindruck davon zu bekommen.
Mir reicht so eine theoretische Beschreibung meistens nur so als Anreißer.
Oh ja, klingt interessant, muss ich mal ausprobieren.
Aber ich muss anfassen.
So zum Vorselektieren, lohnt es sich denn überhaupt, sich das näher anzuschauen?
Genau.
Und das war jetzt gerade auch das Fatale heute bei der Vorbereitung dieser Sendung, weil
wie gesagt, hier mit diesen Break-Properties bin ich gleich in den Rabbit Hole gelandet.
Das war fatal wirklich, also deswegen, wie gesagt, dazu wird noch eine Sendung nachgeliefert
irgendwann und falls wir das vergessen sollten und ihr irgendwann sagt ...
Ich erinnere da nachher auch nochmal dran in der Abmoderation.
Nee, es ist ja oft so, dass unsere HörerInnen sagen, oh ja, ihr wolltet doch mal noch eine
Sendung zu XY machen.
Die letzte CSS-Sendung, quasi der Vorgänger von dieser Sendung, war genau so angetriggert
von Leuten, die gesagt haben, hey, ihr habt doch gesagt, ihr wollt doch darüber noch ...
Und wir sind sehr froh, dass wir die Sendung gemacht haben, weil wir haben sehr viel gelernt
und das ist eine von den besser laufenden Sendungen.
Deswegen haben wir dieses Mal so gemacht, dass wir im Stream die Umfrage gemacht haben und
dann direkt drauf reagiert haben, als wir wussten, was wir nicht wissen.
Also, wir lernen dazu.
Wir wissen, das sind die Known-Unknowns.
Die Unknown-Unknowns werden zu Known-Unknowns und jetzt werden sie zu Known-Knowns.
Gut, ne?
Mind blown.
Deep.
Okay, gehen wir zum nächsten.
Bist du ...
Ja.
Das geht eigentlich relativ schnell.
Zumindest in meinem Kopf war es schnell, aber vielleicht hast du ja noch Fragen.
Mix-Blend-Mode ist das Äquivalent zu einer Eigenschaft, die ich schon lange
auf meiner persönlichen Webseite einsetze und ich weiß jetzt nicht, ob die gleich alt sind
und ich sie nur nicht kannte oder ob es wirklich vorher schon Background-Blend-Mode gab
und das nachgeliefert wurde.
Da habe ich jetzt nicht nachgeschlagen, was zuerst da war.
Aber beide, sowohl Background-Blend-Mode als auch Mix-Blend-Mode, stellen einem so Photoshop-Ebenen-Effekte
fürs Web zur Verfügung.
Also sowas wie, wer Photoshop kennt, Multiply, Screen, Overlay, Darken, Lighten, Color-Dodge.
Das ist schwer zu erklären, wie das aussieht.
Das muss man, glaube ich, sich einfach in der Demo, in den Shownotes mal angucken.
Wenn man da die verschiedenen ... Da geht es halt darum, dass verschiedene Ebenen quasi
miteinander verschmolzen werden, so als würde man sie übereinanderlegen und bestimmte Algorithmen
anwenden, dass sie quasi gemerged werden, visuell in eins und dann, wie sich dann die Farben
verhalten nach verschiedenen Regeln.
So würde ich das mal so ganz grob beschreiben.
Und das Mix-Blend-Mode ist eben tatsächlich für ein Layer selbst, also zum Beispiel für
ein Bild, glaube ich, in dem Beispiel auf MDN, da ist es das Firefox-Logo, dem man mit einem
Container auf einem Container mit einer Hintergrundfarbe die verschiedenen Blenden-Modi anwenden kann.
Und dann sieht man, wie sich das verhält.
Zum Beispiel bei Difference wird es sehr, sehr dunkel und ganz merkwürdig Farb verschoben.
Bei Multiply verschwimmt es so ein bisschen in den Hintergrund, in die Hintergrundfarbe rein.
Also wer diese Modi kennt aus Photoshop, der kann sich jetzt ungefähr was vorstellen.
Ansonsten sollte man sich wirklich die Demo angucken.
Und wie gesagt, das ist für den Container selbst und Background-Blend-Mode war halt irgendwie
für den Hintergrund eines Containers.
Ich habe gerade mal kurz nachgeschaut.
Also Background-Blend-Mode und Mix-Blend-Mode sind beide so 2014, 2015.
Background-Blend-Mode gab es in Chrome schon ein bisschen früher, schon 2014.
Wahrscheinlich ist das der Grund, warum ich das damals dann verwendet habe.
Das ist nämlich so aus der Zeit, da war das noch relativ fresh.
Da gab es, ich hätte nämlich gerne, deswegen ist nämlich das Foto von mir auf meiner Website
ein Hintergrundbild.
Nur deswegen, damit ich das Background-Blend-Mode anwenden konnte.
Weil es damals, zumindest wusste ich damals nichts von Mix-Blend-Mode, dann hätte ich es
nämlich direkt einfach auf das Bild anwenden können und alles wäre cool gewesen.
Genau, das ist es eigentlich schon.
Davon, wie gesagt, da hilft am besten Demos angucken, das ist relativ, da kann man glaube ich
relativ mächtige grafische Sachen damit machen, ob das jetzt im Browser sinnvoll ist.
Da kann man sich die Frage immer stellen, aber wenn man es machen kann, warum nicht, ne?
Na klar.
Und ich habe da zum Beispiel auf meiner Website, wie gesagt, mit dem Background-Blend-Mode
stelle ich sicher, dass bei einem Schwarz-Weiß-Bild, dass das quasi immer sich in die Hintergrundfarbe
reinblendet, dass das immer so ein bisschen eingefärbt ist in der Hintergrundfarbe, was eigentlich
ein ganz cooler Effekt ist.
Ja, man kann da einfach schöne Dinge mit tun.
Das sind so kleine grafische Effekte einfach, die aber sehr gut wirken können, wenn man
die entsprechend einsetzt.
Also wir hatten ja in dem Tech-Up, wo wir zu Gast waren, da haben wir ein anderes Property
vorgestellt, das war das nochmal Backdrop-Filter, war das, ne?
Ja.
Und da geht es dann halt nicht um Farbenblenden, sondern da geht es halt um Saturierung oder
diverse andere Effekte.
Und wenn man das so bei so Galerien oder wenn man so Teaser-Bilder hat, wo dann Text vielleicht
drüber liegt, wenn man das geschickt einblendet und vielleicht bei Hover dann irgendwie so
ein bisschen verändert, kann ja auch ganz dezent sein, aber da kann man glaube ich echt
hübsche Dinge basteln, wenn man es kann.
Ja, wir kommen immer mehr in Richtung Flash, man kann bald alles.
Ich weiß gar nicht, ob man sowas in Flash konnte, tatsächlich.
Doch, ja, weiß ich, dass es ging.
Die alten Flash-Veteranen können uns da, aber es würde irgendwie Sinn ergeben, so ist ja
auch Adobe gewesen am Ende und ja, aber Flash ist tot.
Lange lieber HTML Flash.
Ah, egal.
Wow.
Mensch, du kommentierst immer so abfällig, wenn ich irgendwelche lustigen …
Nein, ich lache doch, ich habe doch drüber gelacht.
Wenn der Konstantin Wow sagt, da fühle ich mich gleich zwei Meter kleiner, also dann bin
ich nämlich quasi minus 20 Zentimeter groß.
Das liegt aber an deiner Rezeption dann.
Also meine Reaktion auf schlechte Wortspiele ist einfach, oder auch auf gute Wortspiele ist
einfach immer, wow.
Das hast du mir im Stream schon mal angekreidet.
Ich glaube, ich glaube …
Da hast du gar nichts mehr zu sagen.
Nein, nein.
Oder ich lache künstlich über deine …
Moritz, ist das besser?
Ja, ich finde es besser.
Okay, okay.
Nein, nein, mach ruhig, mach ruhig.
Es ist für mich eigentlich nicht wirklich so schlimm, wie ich sage.
Ich meine, ich kann ja dann auch immer … Weißt du, das ist dann so ein schöner Ausflug
rumgelaber, was ich ja ganz gern mache.
Jetzt wo du es sagst …
Ich glaube, meine Arbeitskollegen können da auch ein Lied vor uns singen.
Ah, der Moritz, ja, was macht der?
Ah, der hat eigentlich nur wieder … der hat wieder nur gestört.
Oh, warst du früher auch in der Klassen Clown in der Schule?
Ah, teilweise, teilweise.
Ja, Vergangenheit ist Vergangenheit.
Gut, lassen wir es dabei beruhen.
Gehen wir weiter zum Nächsten, zur Nächsten.
Die Property, das Property, der Property.
Sucht euch aus.
Color Gamut.
Der Propatus.
Zum Nächsten Propatus, Color Gamut.
Da hatten wir es in Folge 21 schon mal davon.
Und wir haben aber gesagt, wir machen das trotzdem nochmal, weil wir uns beide nicht mehr daran
erinnern konnten.
Und wir wollten ja alles hiermit aufnehmen, woran wir, wo wir angeklickt haben, weiß ich
gar nicht mehr, was das ist.
Und dementsprechend wiederholen wir das jetzt hier nochmal kurz, aber wir haben es auch schon
mal in Folge 21, kann man sich reinhören, wenn man ein bisschen mehr dazu wissen
will, da haben wir generell über die Farbräume auch geschrieben und irgendwie, wir haben
so einen schönen Clickbait-Titel gehabt, irgendwie mehr, 30% mehr Farben oder sowas irgendwie.
Dieses Property verschafft dir 30% mehr Farben.
Und deswegen, es lohnt sich auf jeden Fall da trotzdem noch reinzuhören und das war eben
ein Bestandteil davon, es ist kein Property, ich habe gerade der, die das Property hat, aber
es ist nicht mal ein Property, es ist eine Property, es ist ein Media Feature.
Das heißt in Media Queries at Media, da kann ich sagen Color Gamut, Doppelpunkt und dann kann
ich sagen SRGB, S3 oder Rack 2020.
Und das sind Farbräume mit aufsteigendem Farbumfang, jetzt so wie ich sie genannt habe.
Das heißt, ich kann darauf reagieren, welchen Farbumfang der Monitor darstellen kann, indem
die Seite geladen ist.
Passt perfekt, da komme ich später noch drauf.
Super, perfekt, dann haben wir, können wir da noch mehr drüber zu erzählen.
Sehr gut.
Ja, und das war es auch im Endeffekt jetzt schon.
Can I Use sagt, alles außer Firefox, das ist ein bisschen schade.
Aber im Endeffekt ist es ja auch nur so ein bisschen, diese SRGB-Farbe sieht auf meinem
supergeilen Monitor zu matschig aus und dann sagt einfach, wenn der Monitor das darstellen
kann, dann irgendwie eine viel geilere, knalligere Farbe.
Das habe ich halt dann in Firefox nicht.
Ja.
Aber es ist was, was man tatsächlich nutzen kann, wenn man Wert drauf legt, dass eben
zum Beispiel die Brandfarbe des Kunden exakt so rüberkommt, wie ich das möchte.
Ja, ich bin mal gespannt auf die ganzen Kartoffelmonitore, was die dazu sagen.
Ich meine, das geht ja eigentlich nur gut, wenn du einen kalibrierten Monitor hast, oder?
Ja, ja.
Ich glaube aber, dass die Monitore mit so einem erhöhten Farbumfang und so, dass die dann
auch entsprechend kalibriert sind.
Mhm.
Hoffen wir es mal.
Unter welchen Lichtbedingungen?
Ja, ja.
Wie blickwinkelstabil sind die?
Unter Kerzenlicht.
Unter Kerzenlicht einer Ikea-Kerze, die zur Hälfte runtergebrannt ist, die 30 Zentimeter
in einem Winkel von 97 Grad davon entfernt ausgemacht wurde.
Es ist schön zu wissen, dass du auch so arbeitest.
Jetzt wisst ihr genau, wie mein Setup aussieht.
Ich habe immer eine Kerze ganz nah beim Monitor stehen, damit auch wirklich viel Störlicht
reinkommt.
Okay, gut.
Ja, dann.
Kommen wir zur Perspektive.
Und zwar, mein nächste Property ist Perspektive.
Und die ist eigentlich ziemlich genau.
Also ich habe mir sofort, als ich das dann mir angeschaut habe, gesagt, ah ja, stimmt, genau.
Das ist eigentlich genau das, was man sich darunter vorstellt.
Und zwar geht es um Dinge, die im 3D-Kontext in CSS dargestellt werden.
Ich weiß nicht, das wird nicht so oft gemacht, glaube ich.
Es kommt mir selten unter, dass 3D-Dinge gebaut werden.
Ich weiß auch nicht.
Wenn ihr mal coole Beispiele habt, irgendwie wo CSS-Sachen mit 3D, also auch mit einem Z-Layer
positioniert wurden, wo irgendwelche 3D-Sachen durch die Gegend fliegen, gerne mal irgendwie
in die Kommentare schreiben.
Fände ich cool.
Weil mir fallen nicht so viele Beispiele ein, wo mir das jetzt irgendwie schon mal aufgefallen
wäre, dass wirklich von 3D wirklich Gebrauch gemacht wird.
So, aber das nur so am Rande.
Perspective ist im Prinzip so der Abstand, von dem man aus auf ein 3D-Objekt draufschaut,
wenn man das so möchte.
Das heißt, standardmäßig ist Perspective None.
Das heißt, wenn ich jetzt mir so aus CSS-Layern, aus HTML-Elementen mit CSS zum Beispiel so ein
Kubus baue, das ist auch das Beispiel in der MDN, dann ist der eher so, naja, symmetrisch
korrekt.
Nicht so, wie man ihn in der echten Welt sehen würde, weil in der echten Welt, da wo ich
näher dran bin, die Dinge, die sehe ich ein bisschen größer und die Dinge, die weiter
weg sind, die sehe ich ein bisschen kleiner.
Und genau das macht Perspective.
Da sieht man, da wird quasi der Abstand definiert, der Draufschau-Abstand.
Z-Werte, also wenn man das zum Beispiel mit Translate macht, geht Translate, Z, glaube ich.
Z-Werte, die größer Null sind, das wird dann größer dargestellt und Z-Werte, die kleiner
Null sind, wird das dann kleiner.
Und dann, wie gesagt, man kann dann den Abstand definieren.
Und dann, ich glaube, das ist auch wieder was sehr Visuelles, das muss man sich anschauen,
auch die Demo auf MDN, da kann man so ein bisschen mit den Werten rumspielen.
Und dieser Würfel, der sieht halt am Anfang ganz symmetrisch aus, wie man ihn jetzt so zeichnen
würde auf Karopapier und wenn man jetzt zum Beispiel Perspective 23 Rem macht, das ist
eines dieser Beispiele, dann ist die Vorderseite, die zu einem zeigt, schon deutlich, deutlich
größer als das andere und ist so ein bisschen schräg, sieht er dann auch, schräg ist er die
ganze Zeit, aber es kommt dann so wirklich raus, man hat da so das Gefühl, man kann den Würfel
anfassen.
Was an der Stelle noch interessant ist, ist vielleicht noch eine zweite Property, die mir dabei über
den Weg gelaufen ist, nämlich Perspective Origin, das ist nämlich auch noch wichtig an der
Stelle, weil ich meine Perspective, okay, schön und gut, aber wo ist denn, von wo aus betrachte
ich das denn?
Vielleicht möchte ich das ja auch irgendwie von der Seite betrachtet haben oder so.
Und da kann man wie bei anderen Origin Properties, die es in CSS gibt, auch festlegen, von wo aus
wird dann jetzt gerade geschaut, also nicht nur, wie weit weg ist man, sondern auch von wo
aus, auf, ja, keine Ahnung, Center, Top, Bottom, oder?
Verschiedene Werte, du kannst zum Beispiel sagen Center, Top, Bottom, Right, du kannst auch
sagen zum Beispiel sowas wie Minus 100 Prozent oder so, Degree sehe ich hier jetzt nicht, es
sind tatsächlich, ich glaube, man kann auch Pixel oder so, nee, warte mal einen Moment.
Also quasi ausgehend von dem Element dann, ne, welche Ecke oder halt dazwischen irgendwo.
Genau, und Initial ist 50 Prozent, 50 Prozent, also mittig Center, Center ist das dann, glaube
ich.
Also wie Transform Origin auch.
Genau, wie Transform Origin ganz genauso auch.
Ja, also wie gesagt, ich wäre sehr, sehr, sehr interessiert an Beispielen, die, die irgendwie
so 3D-Sachen mit CSS zeigen, weil das findet fast nicht statt, zumindest in meiner Bubble
findet das nicht statt.
Ja, dachte ich auch, aber dann ist mir aufgefallen, man macht relativ wenig mit Z und das ist ja
das, was wir so, was man so weitläufig als 3D versteht, ne, dass da wirklich was entgegenkommt
oder weiter weg ist, aber was man ja schon öfter mal macht, sind ja so Rotationen um die
X- oder Y-Achse.
Das ist ja doch was, was mal häufiger vorkommt.
Ja, aber das ist ja nicht 3D.
Ja, nee, ist normalerweise nicht 3D, aber, und das fand ich, das habe ich nämlich jetzt
vorhin, als ich auch kurz auf die Property drauf geschaut habe, festgestellt, dass dieses
Perspective Property eben auch die X- und Y-Rotation beeinflusst.
Und ich glaube, ich habe da einen Link auch zum CSS-Artikel reingepostet in unsere Shownotes.
Und da gibt es nämlich so ein Beispiel, ich glaube, das ist das, ist das in der ersten Demo schon?
Nee, in der zweiten Demo, genau die zweite Demo, das zweite CodePen.
Wenn du da einfach mal X- und Y-Achsen machst, ja, dann dreht sich das so, also im Endeffekt
wird es einfach nur kleiner, also schmaler oder niedriger, je nach Achse.
Und es sieht nicht wirklich aus, als ob sich da eine Karte dreidimensional dreht.
Wenn du aber die Perspective einschaltest, dann kommen dir die Kanten ja wirklich auch entgegen
oder sind weiter weg von dir.
Und dann sieht das Ganze schon wieder eher aus wie eine 3D-Karte, die sich dreht.
Und nicht mehr einfach nur wie so ein zweidimensionales Vi-Eck.
Ich habe das vorhin auch noch gedacht, also danke für die Anmerkung, weil ich habe schon gedacht,
Mensch, nur Z kann es nicht sein, damit das dann auch wirklich zum Beispiel dieser Würfel
auf MDN dann auch wirklich, weil das sind ja auch, X und Y ist ja eigentlich auch mit Bestandteil
davon.
Das wäre dann sehr komisch, wenn das nur Z wäre, ja.
Und deswegen solche 3D-Sachen, also es muss ja nicht mal ganz krass 3D sein, dass da wirklich
auch das Element dreidimensional aussieht, aber gerade bei so leichten Effekten, die man
so bei Hover oder so macht, wo so ein bisschen was hin und her gibt, so Karten-Designs, Karten-Layouts,
da sieht man das schon ab und zu.
Man nimmt es nur nicht so wahr als 3D.
Also mir fällt jetzt gerade ein, das meiste, wo ich so ein Layout sehe, sind irgendwelche
Layer, die sich über die Seite legen, die quasi so runterklappen und dann sagen, willst
du meinen Newsletter abonnieren?
Ja.
Deswegen habe ich vielleicht noch ein bisschen gestörtes Verhältnis dazu, ehrlich gesagt.
Ja, aber der CSS-Tricks-Artikel, ich glaube, der ist echt interessant.
Den habe ich tatsächlich vorher nicht gesehen oder gelesen dazu.
Ich habe nur die MDN angeschaut, aber da sind echt coole Demos drin.
Das sind coole Demos.
Auch das Verständnis dafür zu bekommen, was überhaupt gemeint ist.
Und es ist mal wieder scheiße komplex, wenn man in die Tiefe geht.
Ja, absolut.
Deswegen lassen wir das ja auch.
Wenn eine Dimension dazu kommt, wird es immer nicht nur eins komplizierter, sondern es
wird viel komplizierter.
Aber okay.
Das ist euer Kühlschrank-Spruch für morgen.
Den könnt ihr euch austrocknen und an die Kühlerhaube hängen.
Ja, schön, dass du deine Perspektive eingebracht hast, Mort.
Oh je.
Siehst du, du machst auch oh je.
Ich mache wow, du machst oh je.
Nein, nein, das habe ich aber über mich selbst.
Egal, machen wir weiter.
Intrinsic-Sizing, das ist auch so ein Ding, so ganz mit dem Konzept habe ich mich vorher nicht beschäftigt.
Deswegen nennen wir es ja heute auch.
Intrinsic-Sizing, was versteht man da drunter?
Also Intrinsic heißt, das Element nimmt nur die Größe ein, die sein Inhalt hat.
Also ein Inline-Element klassischerweise, da ist ja also Width und Height, die ich setze,
oder auch das vertikale Margin und Padding haben da gar keinen Effekt.
Da kann ich versuchen, wie ich will.
Das ist, glaube ich, auch so ein Anfänger-Ding, wenn man so mit BCS anfängt.
Ja, warum kann ich dem jetzt denn nicht eine Höhe geben?
Ja, weil es halt ein Inline-Element ist.
Und das ist eben also intrinsische Höhe, im Gegensatz zu Block-Elementen,
die standardmäßig eben halt einfach mal über die volle Breite gehen.
Und die Werte, die ich da geben kann, das sind so drei Werte,
Min-Content, Max-Content und Fit-Content.
Und die kann ich für die Properties Width oder Height zum Beispiel geben.
Aber auch, wie ich heute gelernt habe, für das Property, das ich auch nicht kannte,
Block-Size, das ist in Verbindung mit Writing-Mode.
Da sagt es immer, es gibt Inline-Size und Block-Size.
Und mit dem Writing-Mode kann ich ja quasi umdrehen, wie die Elemente fließen,
dass dann eben die von oben nach unten laufen.
Da hatten wir es auch schon mal drüber, über Writing-Mode in unserer vorherigen Sendung,
über die Umfrage.
Und da kann ich dann eben auch diese Werte setzen.
Und dementsprechend passt sich dann auch der Content an.
Aber wie funktioniert das Ganze?
Ach genau, Grid-Template-Columns.
Da kann ich es zum Beispiel auch setzen.
Da kann ich direkt in dem Shorthand,
beziehungsweise als Werte setzen,
eben diese drei genannten Min-Content, Max-Content, Fit-Content.
Ja, und was machen die genau?
Also Min-Content bedeutet, dass das Element so breit wird,
wie das längste Wort, das da drin steht.
Also die Worte brechen automatisch um, stehen dann untereinander
und es ist nur so breit, wie das längste Wort, das da drin ist.
Das findet...
Total cool.
Ja, krass, ne?
Weiß jetzt nicht, wofür man das wollen könnte,
aber im Zusammenhang mit Grid-Templates
macht es zum Beispiel schon wieder vielleicht Sinn.
Also je nachdem, was ich damit vorhabe.
Max-Content, also wenn zum Beispiel der Parent-Container eine fixe Breite hat,
dann bricht der Text im Element aber nicht um,
sondern er erzeugt einen Overflow.
Das heißt, der Text läuft einfach aus dem Container raus.
Also das ist ein bisschen wie, wenn ich irgendwie Whitespace,
No-Rap oder so setze.
Aber es spannt sich eben das Element nicht auf.
Das Element bleibt so und der Text fließt dann raus.
Dann genau Fit-Content.
Bei Fit-Content, das gibt es einmal als Value,
das gibt es aber auch als CSS-Funktion.
Und standardmäßig dieses Fit-Content-Property
ist das gleiche wohl wie Fit-Content als Funktion
mit dem Attribut Stretch.
Also Fit-Content, Klammer auf, Stretch, Klammer zu.
Auf die Fit-Content-Funktion will ich jetzt aber gar nicht eingehen.
Das ist auch nochmal komplexer.
Da werden dann irgendwelche...
Es gibt auch diese Clamp-Funktionen,
mit denen dann Min- und Max-Werte entsprechen.
Also das ist ein Minimumwert, Maximumwert
und ein Zielwert.
Und das passiert da im Hintergrund
und das führt aber jetzt zu weit in die Tiefe.
Vor allem, weil ich eben...
Es ist aktuell...
Es ist nur bei Grid einsetzbar, diese Funktion.
Und ich bin selber nicht so tief in Grid.
Deswegen, das lassen wir weg.
Vielleicht finden wir dazu mal die Gelegenheit,
da auch noch mehr in die Tiefe zu gehen.
Müssen wir aber erst mal Grid richtig verstehen lernen.
Genau.
Und das Fit-Content bedeutet,
dass die Box nur den verfügbaren Platz nutzt,
aber halt nie mehr als Max-Content wäre.
So kann man das, glaube ich, sagen.
Ja, also das ist...
Wie gesagt, man könnte da noch in die Tiefe gehen.
Ich wollte jetzt einfach nur mal so kurz anreißen,
was es da gibt und was das so grob macht.
So richtige Anwendungsfälle und coole Demos
habe ich dazu jetzt nicht gesehen, nicht gefunden.
Aber es hat bestimmt seine Daseinsberechtigung,
sonst wäre es nicht da.
Auf jeden Fall.
Ich glaube, bei CSS kann man das sagen.
Also ich glaube, der Prozess bei CSS,
da ist schon...
Da stecken viele Hirne dahinter
und da wird viel geguckt und verworfen und so.
Deswegen, ich glaube, bei CSS,
es gibt definitiv Anwendungsfälle,
sonst gäbe es das nicht als Standard und...
Ja, manchmal reicht als Anwendungsfall ja,
der Tim Apple hat gesagt,
wir wollen sowas auf unserer Webseite haben.
Ja.
Und, nee, aber ich glaube, bei Apple...
Ja, aber dann müssen ja immer noch die anderen Browserwender
müssen ja immer noch nachziehen.
Ja, das ist ja so die Sache.
Also es gibt ja auch Properties,
die so irgendwo, wo du genau merkst,
okay, da hat einer vorgezogen
und die anderen denken sich,
ja, schön, viel Spaß damit.
Aber wenn es adaptiert wird,
dann ist es ja in der Regel auch schon was anderes.
Ich sage immer nur Tim Apple.
Ich finde es so lustig.
Für die, die nicht wissen,
was es damit auf sich hat,
Google einfach mal Tim Apple.
Das ist eine sehr lustige Geschichte.
Okay, gut.
Sorry.
Oh nein, oh nein.
Jetzt habe ich bei Trello
einen falschen Ort geklickt
und dann geht alles kaputt.
So.
Als nächstes beschäftigen wir uns
mit der Color Function.
Und da gehen wir jetzt noch mal
auf Color Gamut ein,
was der Konstantin vorhin erwähnt hat.
Und zwar kann man im CSS
Color Module Level 4, glaube ich,
heißt das,
dann auch bei einer einzelnen Farbe festlegen,
in welchem Farbraum sie ist.
Also ich könnte das,
also du hast vorhin gesagt,
ja, Color Gamut,
das kann man für das gesamte Dokument
irgendwie angeben.
Ja, beziehungsweise als Media Queries Elector.
Genau, als Media Queries sozusagen
oder als,
nee, wie heißen sie?
Ich habe es vergessen.
Diese Ad-Dinger halt, so.
Und da kann man jetzt zum Beispiel
schreiben Color,
Doppelpunkt Color,
Klammer auf,
und dann kommt der Farbraum,
also für eine einzelne Farbe.
Und dann kann ich zum Beispiel
sowas schreiben dann wie,
keine Ahnung,
Rack 2020,
ich kenne es nicht,
den Rack 2020 Farbraum,
aber,
und dann drei Werte.
Und ich glaube,
beziehungsweise man kann,
glaube ich,
auch noch einen vierten Wert,
das wäre dann der Alpha-Wert.
Und ich glaube auch,
dass diese Werte sich unterscheiden,
je nach Farbraum.
Hast du andere Angaben da stehen.
Also ich habe jetzt hier in dem Draft,
in dem CSS-Draft,
zu diesem CSS-Color-Module Level 4,
ist zum Beispiel eine bestimmte Farbe,
die sagen hier,
das ist ein Intense-Lime-Color,
also irgendwie so ein helles,
stressiges Grün,
in verschiedenen Farbräumen.
Und zwar haben sie,
ah, das ist ja interessant,
fällt mir jetzt erst auf,
also da wäre dann zum Beispiel
die Farbe festgelegt,
Color Rack 2020,
also Color Klammer auf,
Rack 2020 0,42053,
Leerzeichen 0,979780,
Leerzeichen 0,00579.
Für LCH wäre das LCH,
Klammer auf,
86, bla bla Prozent,
160,0000,
136,0088,
Klammer zu.
Oder wenn man jetzt den Farbraum,
und ich kenne die tatsächlich nicht auswendig,
Display minus P3,
haben wollte,
dann wären die Werte,
also dann würde da wieder Color stehen,
für LCH gibt es offenbar eine Ausnahme,
Color,
Display minus P3,
und dann minus 0,6,
und das sind glaube ich immer Koordinaten
in diesem Farbsystem,
0,6,1 und so weiter,
also es sind dann wieder drei Werte,
und teilweise haben sie halt auch Minus vorne dran,
das ist ganz interessant,
und es gibt noch Profoto RGB und keine Ahnung,
standardmäßig ist ja sRGB der Standard Farbraum,
und was mir in dem Zusammenhang auch noch über den Weg gelaufen ist,
ist, dass man mit diesem CSS Colors Module Level 4 auch verlinken kann auf Farbprofile,
dass du diese ICC-Dateien,
der eine oder andere kennt sie vielleicht,
tatsächlich direkt verlinken kann,
das ist nochmal was anderes,
nämlich add color minus profile,
und dann kommt ein Name,
in dem Fall,
es sieht aus wie eine Custom Property,
minus, minus,
und dann machst du das auf,
also geschweifte Klammer,
und dann kommt tatsächlich source URL,
und dann HTTP,
bla bla bla,
äh,
coded,
bla bla,
und so weiter,
.ICC,
das heißt,
man kann tatsächlich auch diese Profile dann tatsächlich dahinterlegen,
ich weiß nicht,
wie weit sich das verbreiten wird,
ähm,
aber interessant ist es auf jeden Fall,
es ist auf jeden Fall eine verrückte Geschichte,
ja,
ähm,
genau,
und das,
äh,
die CSS Color Function,
naja,
ich hab auch mal bei Can I Use geschaut,
äh,
wie weit ist das verbreitet,
naja,
ähm,
also dazu muss man auch sagen,
dieses,
ähm,
dieses Level 4,
Modul Level,
äh,
Color Level Module 4,
das ist noch ein Working Draft,
soweit ich weiß,
also die sind da noch am Arbeiten,
deswegen ist es auch nicht verwunderlich,
dass es noch nicht so verbreitet ist,
und es ist halt,
interessanterweise,
nur in Safari,
es gibt's nur in Safari,
es sind wieder die Apple-Leute,
die sagen,
ja,
das muss aber doch farbakkurat sein,
könnte ich mir total,
könnte ich mir total gut vorstellen,
dass die sagen,
ja,
auf unseren Geräten
sieht die Farbe ganz genauso aus,
wie wir sie haben wollen,
weil unsere Geräte,
die sind alle kalibriert,
und hier auf Farbprofil XY,
und dann können wir das angeben,
und bei uns,
bei uns passt das dann,
würde mich,
es sieht aus wie so ein Alleingang
von Apple an der Stelle,
so ein bisschen,
ähm,
zumindest sind das die einzigen,
die es bislang unterstützen,
ähm,
ja,
ich finde es auf jeden Fall
ein interessantes Experiment,
und ich bin gespannt,
wann,
äh,
Kartoffelmonitor XY Dell,
bla bla bla,
auf, ähm,
LCH kalibriert wird,
mhm,
so,
genau,
also ich finde es ein mega interessantes Thema,
aber ob das jemals irgendwann,
ey,
mach meine Häkchen nicht weg,
der Konstantin,
der hakt im Trello einfach meine Sachen ab,
ja,
habe ich vorhin schon,
weil du es nicht gemacht hast,
ja,
da musst du einfach mal ein bisschen damit leben,
mit der Unordnung,
okay,
das ist krass,
wie man sich wieder,
also was für Details da wieder gibt,
und was halt so,
ein neuer Draft,
den du noch nicht kennst,
was der wieder aufwirft,
eben nicht nur an ein Property,
sondern halt irgendwie,
äh,
noch irgendwelche neuen Ad-Regeln,
und,
und was weiß ich,
also,
krass.
Ich bin mir ganz sicher,
dass in diesem,
und das ist gar kein so langes Dokument,
in diesem CSS Colors Level 4,
noch eine Menge Zeug drin ist,
was wir hier noch nicht kennen,
ähm,
wo wir auch noch nicht drüber gesprochen haben,
was,
was irgendwann dann nochmal aufschlagen wird,
was vielleicht auch nie in die Browser finden wird,
äh,
was ja oft passiert,
ne,
was,
du bist dran.
Ich bin dran.
Gut.
Ja,
und mit,
ähm,
mit Ad-Scroll-Timeline,
da haben wir auch,
ähm,
tatsächlich jetzt was,
was,
das ist so fresh,
das ist,
das dampft quasi noch.
Piw, piw,
ja.
Es gibt dazu keinen MDN-Artikel.
Piw, piw,
Entschuldigung.
Okay,
ich sehe schon,
wir brauchen mehr,
mehr Sounds im Soundboard.
Ähm.
Nee,
es ist besser,
wenn ich die,
wenn ich die selbst mache,
weil ansonsten wird es sehr,
sehr,
sehr stressig.
In Jitsi gibt es ja jetzt so Sounds,
ne?
Ähm,
und, ähm,
das ist,
das nimmt kein Ende.
Also es ist immer so,
wenn einer von meinen Kollegen
auf einen von diesen Sounds drückt,
von so Reaction Sounds,
also irgendwie so,
und Applaus und sowas,
äh,
wenn einer drauf drückt,
dann,
dann kommen gleich noch fünf hinterher,
weil dann kann man nicht mehr aufhören
und das,
damit kannst du alles total torpedieren.
Ich kann's mal,
Anni,
du hörst es jetzt nicht,
wir haben ja Jitsi gemutet,
aber ich könnte,
ich könnte dir jetzt,
da,
ich könnte dir jetzt so was schicken.
Nee,
mach's nicht.
Oh Gott.
Ich hab dich schon,
ich hab dich schon,
ich hab dich schon genug rausgebracht.
Äh,
Ja,
ich weiß gar nicht mehr,
wo ich jetzt war.
Ich bin fertig.
Nächste.
Nee,
also jedenfalls,
das ist,
das ist noch komplett,
ähm,
frisch,
also bei Chromium in Entwicklung,
ähm,
aber sonst noch keine Anzeichen,
dass sich da bei irgendjemand anderem was tut.
Und,
als ich das gesehen hab,
erstmal hab ich mit Scrolltime
dann nicht so wirklich was anfangen können
und dann ist mir aufgefallen,
das ist das,
was ich mir gewünscht hab,
in unserer CSS,
äh,
Wünsch dir was Folge,
Folge Nummer 11,
was ich als Scrollhooks bezeichnet hab,
in Ermangelung eines,
eines besseren,
äh,
oder fachgerechteren Begriffs,
ähm,
also scrollgetriggerte Animationen.
Darum geht's.
Hm,
das in CSS?
Genau,
und bisher nutzt man dafür sowas,
für sowas ja Lösungen per JavaScript,
also zum Beispiel,
wir haben das gerade jetzt erst wieder
auf einer Kundenwebseite,
die halt so, ähm,
Diagramme animiert haben wollten,
aber hier eben halt beim Scrollen,
da ging es um was Medizinisches,
ähm,
wollten die visualisiert haben
und aktuell nutzt man halt sowas
wie eine Library wie GZAP,
das ist, glaub ich,
so mit die performanteste Library,
um so,
also um generell Animationen zu machen,
das haben wir auch schon mal eingesetzt
bei einem anderen Kunden,
wo es um technische Zeichnungen ging,
ähm,
die da erklärt wurden
und mit Explosionszeichnungen
und allem möglichen,
ich glaub,
ich hab das mal gezeigt,
vielleicht erinnerst du dich,
ähm,
und das ist so, glaub ich,
das,
das Ding am Markt,
das funktioniert echt performant
und, äh,
kann richtig coole Dinge machen.
Da gibt's auch einen Scroll-Trigger-Plugin
und das nutzt man eben genau dafür,
um zu sagen,
hey,
dann passiert das
und, äh,
mach das nur,
wenn ich in die Richtung scrolle
und beim Rückscrollen nicht mehr
und so,
also da kann man richtig coole Sachen mitmachen
und, ähm,
mit
AddScrollTimeline
kann man das jetzt eben definieren.
Also wie AddAnimation
definier ich da eine Timeline,
was,
was wann passieren soll.
Wie KeyframeAnimations?
Äh,
ja,
also so wie die,
wie die,
wie die KeyframeAnimations,
genau.
Ähm,
und dann benutze ich das
mit AnimationTimeline.
Wow.
Jetzt googelt der Mords.
Ich muss,
ich muss,
ich muss mir das,
ich muss mir das mal angucken,
weil, äh,
ich glaub,
das ist fair.
Es gibt auch einen CSS-Tricks-Artikel
mal wieder,
einen guten dafür.
Das ist cool.
Das ist auch wieder verlinkt,
natürlich in den Show Notes dann.
Ähm,
und da wird halt gezeigt,
was geht's denn so für Anwendungsfälle,
was,
für was braucht man das denn?
Und, ähm,
ja,
wie gesagt,
damals hab ich das mir ja schon gewünscht,
hab gesagt,
es wäre cool,
wenn man da reagieren könnte,
wenn man dafür kein JavaScript bräuchte
und genau das soll jetzt damit kommen.
Also ich bin mir noch nicht sicher,
wie weit das gehen wird,
ob da alle meine Wünsche erfüllt werden,
äh,
so was die,
was das angeht,
so nur in die Richtung
und vielleicht nur einmal reinfliegen oder so,
ähm,
aber es sieht schon mal
ganz vielversprechend aus.
Und, äh,
außerdem im CSS-Tricks-Artikel
gibt's noch einen Artikel,
ein,
oder zwei ausgegiebige Artikel sind das sogar,
ähm,
von diesem Jahr von dem Blogger
Bramus oder Bramus,
ähm,
die kommen auch in die Show Notes
und die sind wirklich
sehr ausführlich,
auch nochmal genau beschrieben,
was passiert da
und was für Anwendungsfälle gibt's,
was kann ich damit machen.
Und es gibt sogar eine Demo,
die ich gefunden hab,
die man selber ausprobieren kann,
ähm,
aber auch wieder nur,
wenn man diese Experimental-Web-Plattform-Features,
dieses Flag gesetzt hat
in den Chrome-Tools.
Und da sieht man so,
das sind so,
ja,
hast du,
ich würde mich auch mal interessieren,
wie die aussieht bei dir,
wenn man's nicht aktiviert hat.
Äh,
nee,
das hab ich,
Entschuldige,
das hab ich grad gar nicht,
ich hab nur gerade
in diesem CSS-Tricks-Artikel
was gesehen,
was ich erkannt habe
und gedacht hab,
ah krass,
das kann man jetzt mit CSS dann machen.
Ähm,
und zwar Cover,
Coverflow hieß das,
glaub ich.
Mhm.
Ähm,
ich weiß nicht,
ob das bekannt ist,
ähm,
das ist auf dem iPod früher
so eine,
so eine visuelle 3D-Darstellung
von,
von Album,
Album-Covern gewesen,
ähm,
die sich so quasi so,
ähm,
ich weiß nicht,
wie,
wie beschreibt man das,
wie das aussieht?
Die sind so perspektivisch angewinkelt,
links und rechts
und das in der Mitte,
das sieht man zentral
und die,
die bewegen sich quasi so nach vorne.
Also das wäre auch wieder
ein Anwendungsweifel Perspective
dann in dem Fall, ne?
Ja, genau.
Die werden halt gedreht
in, in,
entweder nach links
oder nach rechts,
je nachdem,
ob sie rechts oder links
von der Mitte sind.
Ich glaub,
Cover, äh,
Coverflow,
das muss man sich einfach anschauen,
das war mal auch im Web
ein beliebter Effekt
und da gab's auch Plugins,
irgendwie jQuery-Plugins,
mit denen man sowas machen konnte
und so, ähm,
genau.
Aber das ist krass,
wenn man das dann mit CSS machen kann,
wow, also.
Ja.
Das war's?
Äh, ja.
Soll ich deine Punkte abhaken oder?
Ach so,
jetzt hab ich's vergessen.
Zack, zack, zack,
ich bin schneller.
Ja, ich muss jetzt hier mal,
ich muss jetzt hier mal in meine,
ich glaub ich,
nee,
das ist jetzt wirklich,
jetzt ist mir jetzt wirklich peinlich,
jetzt bin ich schlecht vorbereitet,
weil ich muss jetzt, äh,
an die richtigen Stelle
in meinen Browser-Tabs gehen,
Moment.
Wenn wir jetzt im Stream wären,
würde ich sagen,
lass doch Siri mal einen Witz erzählen.
Ja, lass doch Siri mal einen Witz erzählen.
Kriegen wir das noch in den Podcast
irgendwie vielleicht.
Genau, so,
das nächste ist, äh,
Colorscheme.
Ähm,
tatsächlich, äh,
eine CSS-Property,
die so Values haben kann,
wie Light oder Dark
oder Light-Dark
tatsächlich auch
oder verschiedene,
wenn's noch andere gibt,
aber ich glaub,
das ist so der Standard,
ist Light und Dark,
ähm,
genau,
was tut das?
Ähm,
man kann damit einem Element
auf der Seite
oder auch der ganzen Seite sagen,
ich bin optimiert
für Light oder Dark.
Ähm,
und ich war,
ich war so mit der,
mit dem MDN, ähm,
Eintrag dazu
nicht so richtig zufrieden.
Der hat mir nicht so richtig, ähm,
erklärt,
was das denn jetzt eigentlich ist
und was das eigentlich tut.
Ähm,
deswegen, äh,
kann ich dazu auf jeden Fall
den W3C-Standard empfehlen.
Das ist, äh,
Color,
CSS Color Adjust Level 1.
Ähm,
und da steht dann sowas,
dass,
wenn ich zum Beispiel
den Fall habe,
dass ich verschiedene externe Widgets
zum Beispiel, ähm,
die, auf die,
über die ich jetzt keine Kontrolle habe,
auf meiner Seite einbinde,
dass ich zum Beispiel die markiere,
ähm,
für Light oder Dark.
Also,
dass ich vielleicht nicht jetzt
die ganze Seite einfärbe
in irgendwas,
sodass dann der,
dass dann das Betriebssystem
und der Browser
darauf reagieren können.
Ich hab aber,
ich muss sagen,
ich hab nicht so richtig verstanden,
was der Anwendungsfall davon ist
und wie das dann auch wirklich,
also irgendwie kann dann
das Betriebssystem Dinge overrulen
oder kann dann sagen,
hey,
danke für die Info,
dann probieren wir es halt irgendwie so.
Ähm,
richtig zu 100% durchgestiegen bin ich nicht,
was für einen Sinn das dann am Ende hat.
Vielleicht gibt es aber auch Anwendungsfälle,
die mir jetzt, äh,
die mir nicht ganz klar sind.
Wie gesagt,
man kann es auf jeden Fall definieren.
Das ist quasi so ein bisschen so,
äh,
ergänzend zu,
ähm,
Prefers Color Scheme Dark
oder Prefers Color Scheme Light,
womit man ja zum Beispiel
Light und Dark Modes
von Webseiten umsetzen kann.
Das ist ja, ähm,
auch so ein,
so ein, äh,
so eine Art Media Query,
ähm,
äh,
wo der,
wo das Betriebssystem an den Browser durchreicht,
äh,
was für ein Color Scheme gerade eingestellt ist.
Also wenn ich mein Betriebssystem Dark Mode anhabe,
dass dann auch der Browser das mitkriegt
und nicht meine Seite
entsprechend darauf reagieren lassen kann.
Und so kann ich halt eben, ähm,
ähm,
Elementen sagen,
das ist jetzt optimiert für Light oder Dark
oder für beides.
Und der Standard wäre wahrscheinlich,
ähm,
die Seite ist optimiert für beides,
glaube ich,
das könnte man setzen,
ähm,
aber wie gesagt, äh,
auch da,
wenn ihr da irgendwie Ideen habt,
ähm,
was da genau,
was da ein cooler Anwendungsfall wäre,
ähm,
einfach mal in die Kommentare schreiben,
würde mich freuen.
So,
ich hake jetzt auch meine Sachen selbst ab,
ja.
Ja,
das wird auch relativ,
relativ schnell durchkommen bis hier.
Ach so,
Moment,
ich kann da vielleicht noch was über Can I Use sagen
an der Stelle,
ähm,
das ist tatsächlich gar nicht mal so wenig verbreitet,
also alle so Chromium-Browser unterstützen es,
kann man sagen,
IE gut,
über den reden wir eh nicht mehr,
ähm,
und alles,
was auf Firefox basiert,
kann es nicht,
aber die ganzen Chromium-Sachen,
die können es mittlerweile,
also es scheint wichtig zu sein,
dass es irgendwie umgesetzt wird.
Naja gut,
okay,
wenn du es,
wenn es einmal in Chromium implementiert ist,
dann ist es in allen Chromium-Browsern.
Also,
ja,
wobei in der guten Edge,
naja,
nicht ganz,
manchmal zieht ja Edge,
also Edge braucht halt eine Weile,
bis es die Chromium-Version nachgezogen hat,
aber es kommt definitiv.
Also das sieht,
das sieht aus,
als ob,
ja,
natürlich,
ähm,
ist natürlich jetzt einfach gesagt,
aber,
äh,
ja,
gut,
ich meine,
ich spreche jetzt hier normalerweise nicht über sowas wie QQ-Browser,
Baidu-Browser oder KaiOS-Browser,
äh,
die auch jetzt zum Beispiel bei Can I Use gelistet werden,
dass keine Ops-Supported ist,
ähm,
weil die in unserem Markt hier bei uns,
wo wir uns aufhalten,
eigentlich keine Rolle spielen.
Oder UC-Browser,
das sind alles so Sachen,
die bei uns eigentlich,
also in den Statistiken,
die ich kenne,
tauchen die quasi nicht auf.
Von daher,
das wollte ich nochmal so generell zu Can I Use sagen,
weil wir reden immer nur von Firefox- und Chromium-basierten Browsern
und vielleicht noch Safari-Extra,
ähm,
das ist halt die Browser-Landschaft,
die momentan die Realität ist,
da,
wo ich mich aufhalte.
Und ich glaube auch da,
weitestgehend da,
wo du dich aufhältst,
und du hast vielleicht manchmal noch ein IE mit dabei.
Richtig, richtig.
Jo.
Gut, dann kommen wir jetzt schon zum vorletzten Punkt,
Mensch.
Ja, das ist noch eine richtige.
Wir hatten Angst,
das artet aus,
aber es läuft doch ganz gut.
Ähm,
und zwar ging es da,
ich weiß gar nicht mehr,
wie das Kapitel hieß in der Umfrage,
das war ja in so verschiedene Unterbereiche aufgeteilt,
das ging so irgendwie um Tooling und Frameworks,
glaube ich.
Und, ähm,
da waren zwei Sachen,
mit denen wir gar nichts anfangen konnten,
bei den anderen kannte zumindest einer von uns
immer so den Namen davon,
und das waren Assembler CSS und
Ant Design,
oder Ant Design auf amerikanisch,
also wie die Ameise.
Und, ähm,
die beiden habe ich mir mal angeschaut,
eins davon ein bisschen, äh,
tiefer gehender,
das andere eher so,
meh,
kommt dann auch noch drauf zu sprechen,
warum.
Und, äh,
äh,
als erstes mal Assembler CSS.
Ich zitiere mal,
was die so auf ihrer,
auf ihrer Seite schreiben,
in der Doku.
Also,
quickly prototype and build astonishing websites
and UI components
without installing and maintaining
complicated software stacks.
Das klingt ja schon mal gut.
Erstmal.
Assembler CSS klingt erst mal süß,
weil, äh,
wir haben ja schon,
also,
CSS ist schon kompliziert genug,
muss man es jetzt auch noch in Assembler schreiben.
Ja,
sie machen ja alles einfach,
aber da kommen wir gleich noch drauf.
Also,
vielleicht hört man schon ein bisschen durch,
so meine Meinung von den Dingen.
Reusability for the win.
New dog,
all tricks.
Ich lese gerade auch.
Also erst, äh,
ja,
dieser Quickstart.
Erstmal habe ich mich gewundert,
so,
okay,
quickstart,
ähm,
als quick install quasi,
schmeißt du einfach ein Script-Tag
mit einem JavaScript-File rein.
Aha.
Ich dachte so,
hä,
Moment,
habe ich jetzt auf der falschen Seite gelandet?
War doch irgendwas mit CSS-Framework oder so?
Ähm,
ah ne,
ich bin richtig,
okay,
kann auch npm install,
äh,
hier,
Assembler CSS.
Okay.
Erinnerst du dich an Less.js?
Less,
Less.js,
also Less im Browser direkt.
Das war, glaube ich,
sogar die erste Implementierung von Less war,
dass man,
dass man Less im Browser laufen lassen konnte,
aber eine JavaScript-Datei reingeladen hat,
die dann aus der Less-Datei des CSS gebaut hat.
Mit dem Unterschied,
dass es damals solche Build-Chains und so,
also wahrscheinlich gab's das schon,
aber es war noch nicht so weit verbreitet und so, ne?
Deswegen war das ja vielleicht eine ganz gute Idee,
aber cool,
da kann ich CSS besser machen,
aber im Browser,
sei es drum.
Also jedenfalls,
immerhin sind es nur 8,8 Kilobyte gg zippt
und 26 ohne.
Also es ist jetzt nicht riesig,
was ich da reinschmeiße,
aber trotzdem war erst mal so,
naja, okay,
also ich schmeiß da ein JavaScript-File rein.
Okay,
ich seh grad,
oh Gott,
ich seh grad die Demos,
oh Gott.
Dann geht's weiter.
Auf die Demos komme ich nachher auch noch drauf.
Also gut,
dann habe ich also das JavaScript-File drin
und dann statt Style-Attributen,
nehme ich X-Style-Attribute.
Oh ja,
das ist...
Also X-Style.
Okay.
Und da drin habe ich dann eine Mischung aus Shorthands,
das nennen die Virtual Properties.
Also ich kann zum Beispiel einfach nur Grid schreiben
und dann nimmt's halt irgendwie so ein Standard-Grid
und so Property-Value-Paare wie normales CSS, ja?
Aber teilweise dann auch wieder mit einem Präfix
für den Breakpoint.
Also zum Beispiel schreibe ich
Grid-Calls-Doppelpunkt-Eins,
das ist der Standardwert
und bei Small,
also SM,
Pipe-Symbol,
Grid-Calls-Doppelpunkt-Drei.
Okay,
das ist ja schon ganz nett.
Ich kann da die Breakpoints schreiben und so,
kennt man ja auch aus anderen Frameworks,
irgendwie aus Bootstrap,
ist halt mit Klassen gemacht und so.
Alles schön und gut,
aber irgendwie ein bisschen komisch.
Und jetzt,
dann ist es so,
manche Properties,
die ich vielleicht benutzen will,
die sind aber nicht standardmäßig mit drin.
Und woher weiß ich das?
Indem ich mir diese Riesenliste
in den Docs durchforste
und gucke,
was da standardmäßig drin ist.
Und wenn's nicht drin ist,
dann muss ich's erst registrieren
und zwar mit magischen Custom-Properties.
Und zwar schreibe ich dann einfach
aufs Root-Element
minus minus writing minus mode
minus minus register Doppelpunkt true.
Und das erkennt dann das Skript
und dann kann ich in Zukunft
Writing-Mode einfach als Property
in diesem X-Style-Attribut benutzen.
Und das wird dann intern gemappt,
wird das Ganze dann,
also wenn ich Align-Content
da einfach reinschreibe,
dann ist das intern ein Align-Content,
das sich eine Variable
mit einem Custom-Property anzieht,
minus minus ASM
minus Align-Content
und dann Ausrufezeichen
important.
In Blazing Fast,
ich lese noch kurz vor,
Blazing Fast,
we took advantage
of existing modern web technologies
and build something
that is truly high-performant.
Wie kann etwas schneller sein
als CSS selbst?
Ja.
Wenn man's mit JavaScript baut.
Ja, das ist ja komisch noch.
Ich hab auch noch ein paar Zitate
aus den Docs.
Also es ist ja auch gemein,
also wahrscheinlich steckt ja viel Arbeit dahinter
und so hat sich jemand richtig Gedanken gemacht
und mit Sicherheit steckt da mehr dahinter,
als ich das setze.
Das ist ja voll fies.
Da hat jemand Inline-Styles re-implementiert.
Ja, das kannst du bei CSS in JS ja auch sagen.
So ein bisschen teilweise.
Aber gut,
also es ist voll fies.
Ich setze mich an einem Abend hin,
überfliege da die Doku
und zerreiße es dann.
Aber ich mein,
es ist schon,
also bei Vue war es zum Beispiel so,
ich setze mich an einem Abend hin,
lese die Doku und denke,
geil,
ich will morgen mein erstes Projekt damit schreiben.
Also es gibt auch den anderen Fall.
Aber gut,
also mein erster Gedanke war erstmal so,
puh,
ich lade also JavaScript rein,
um Dinge mit CSS zu vereinfachen.
Okay,
also mal gucken,
was gibt es denn so für Features,
so Pro-Punkte,
die man Pro nennen könnte,
was spricht denn dafür?
Es gibt Mix-Ins,
also wie ich es bei Sass kenne
oder ich glaube inzwischen,
bei Last glaube ich auch,
dass ich halt einfach Sachen wiederverwerte
und dann quasi eine Funktion habe,
in die ich Parameter reinjage
und entsprechend werden andere CSS-Properties
automatisch gesetzt oder befüllt.
So,
das ist ja ganz cool.
Und die definiere ich dann mit
Minus, Minus, Mix-In, Minus
und Name des Mix-Ins.
Und in diesen X-Style-Property
muss ich dann dieses
Dächlein-Symbol,
dieses
Aber du schreibst nie selbst CSS
irgendwo hin, ne?
Nee,
das kloppe ich alles in die Style-Tags rein,
beziehungsweise
manchmal definiere ich es auch im Root-Tag,
also die Mix-Ins oder
oder Konfiguration,
nee,
die Mix-Ins im
im
im Root,
per Custom-Property,
Konfiguration an der Library selbst
mache ich per Data-Element,
per Data-Attribut
auf dem Script-Tag,
dass ich
Darf ich eine gemeine Frage stellen?
Was ist denn mit Hover?
Jaja, komm,
gibt's noch.
Das ist der nächste Punkt.
States.
Also es gibt States
und das ist ähnlich,
hab ich mich gleich erinnert,
an View,
die Event-Modifier,
also dass ich irgendwie
bla bla bla
Punkt Once
oder
Double-Click
oder sowas
modifizieren kann
und das ist auch
eine ähnliche Notation.
Also ich mach dann halt
mein Property
und dann Punkt Focus
oder Punkt Hover,
Punkt Disable,
Punkt Visible.
Also es ist so
Syntactic Sugar
halt einfach,
dass ich halt nicht,
ich mach keine Regeln
mit bei Hover
ist es dann so das Property,
sondern ich definier's normal
und definier's mit Punkt Hover.
Okay, gut.
Also das ist so,
dass wir führen die so an
als ihre Pro-Features.
Also jetzt bisher noch nix,
wo ich jetzt dachte,
ja geil,
das kann man ja ohne das gar nicht,
also das kann ja irgendwie
eine andere Prä-Prozessor-Sprache
oder sowas,
kann das nicht.
Also es verlagert im Endeffekt
einfach alles auf die Client-Seite,
wo ich mich dann,
wie du grad eben auch frage,
ja wie ist das denn
mit der Performance?
Ja, also erstmal bin ich davon abhängig,
wie performant das Gerät
das ausführt und so.
Also bei meinem Laptop hier
würde ich nicht die Hand
ins Feuer legen,
aber anderes Thema.
Und dann,
dann schreiben sie,
you don't have to worry anymore
about the size of your CSS-Files
since the framework
is only 8 KB in size,
GZIP,
and everything else
is generated just in time.
Ja,
aber dafür baller ich dann halt
alles in X-Style-Attribute rein.
ne?
Also dafür hat dann
jedes Element auf der Seite
irgendwie ein X-Style-Attribut
mit Properties drin.
Dann ist halt mein CSS
nicht groß,
aber meine Seite
ist halt aufgebläht.
Ähm,
ja.
und gegebenenfalls ist auch mehrfach
das Gleiche drin,
wenn ich jetzt nicht für alles,
also mal was würde ich
eine Klasse setzen,
wenn ich irgendwo das Gleiche
verwenden will.
In dem Fall müsste ich dann halt
ein Mixing dafür anlegen,
wenn ich das aber nicht will
oder noch nicht weiß,
weil ich erst anfange
damit zu arbeiten,
dann schreibe ich das alles
doppelt und dreifach rein,
oder?
Also der Grund ist,
weil da jemand
auf keinen Fall
CSS schreiben will,
aber CSS haben will?
Ja, weil jemand
diese Build-Tools
loswerden will.
Also anstatt,
dass ich halt sage,
okay,
ich hab irgendwie
hier LES oder SES
und kann da Verschachtelungen
und kann irgendwie
coole Dinge tun
oder Sachen auch berechnen lassen,
statt das zu tun,
da muss ich mir ja extra
erst so einen Build-Chain anlegen
oder so,
was ja heute auch eigentlich so
NPX,
Install,
Framework meiner Wahl,
Starter-Template,
fertig,
dann ist schon alles drin
oder ich installiere mir weit,
wenn ich Vue oder React
oder so benutze,
VIT,
immer,
ich sag's immer falsch,
VIT,
VIT.
Ich sag's auch nicht mehr,
ich korrigiere dich nicht mehr.
Nee, nee,
ist gut,
bitte korrigiere es,
ich will's ja,
ich lege ja eigentlich
auf Aussprache,
auf korrekte.
Ja,
genau.
An der Stelle sei erwähnt,
der geile YouTube-Kanal
Korrekte Aussprache,
kann ich Ihnen wieder mal sehen.
Sehr witzig.
Ja,
also,
ich fand einfach,
und damit hört's auch nicht auf,
ich hab noch zwei Punkte
aus der Doku,
also ich musste echt
manchmal so ein bisschen grinsen,
als ich's gelesen hab,
weil einfach so diese Aussage,
ja,
es wird jetzt alles viel kleiner
und leichtgewichtiger,
du musst nur halt irgendwie
dafür den,
also du verlagerst einfach nur,
das Problem ist einfach nur verlagert
und ich seh nicht so ganz,
so wirklich den Vorteil,
außer dass ich halt nicht,
ja,
dass ich,
also ich hab halt
einen HTML-Datei dann,
wo ich mir das Skript reinjag
und da ist dann alles drin,
statt dass ich's modular hab
in dem Bildsystem.
Wahnsinn.
Wow.
Gut.
Gut,
wobei,
so ganz stimmt ist ja nicht,
kann ja theoretisch auch Components haben,
die dann wiederum
darauf basieren,
aber,
jo,
also,
dann war in diesem Quickstart
waren dann zwei Code-Schnipsel,
einmal ein Style-Attribut
mit ein paar Werten drin,
so ungefähr drei auf drei Zeilen
aufgeteilt für die Übersichtlichkeit
und ein X-Style-Attribut
mit Werten drin
und ich dachte schon so
auf den ersten Blick so,
hä,
also platztechnisch
hab ich da jetzt ja nix gewonnen,
aber dann kam,
das war ansonsten
komplett identisch,
da war wirklich,
da stand einfach das
komplett gleiche Csas drin,
außer zwei Zeichen mehr,
weil ich ein X-Minus
vor das Style setzen muss,
aber deren Kernaussage,
worauf die hinaus wollten,
war halt,
ja, guck mal,
siehst du,
siehst du einen Unterschied?
Nee,
da ist ja auch keiner,
weil,
wenn du CSS schreiben kannst,
dann kannst du auch
Assembler-CSS schreiben
und dann dachte ich nur so,
ja cool,
dafür muss ich dann nur
ein JavaScript in die Seite reinladen
und zwei Zeichen
ans Style-Attribut anfügen,
dann kann ich das
voll gut.
Oh Gott.
Also mir ist natürlich klar,
was die meinen,
aber es ist halt so,
der Punkt kommt nicht so wirklich rüber
und dann bei diesen
Virtual Properties,
das sind eigentlich nur Abkürzungen
und das klingt so ein bisschen nach,
wenn ich nach CSS-Spec schreibe,
dann ist das mir viel zu viel zu tippen,
ich will nicht,
keine Ahnung,
Grid, Doppelpunkt
und dann Property schreibe,
ich will nur Grid schreiben
und Width und Height
ist ja auch viel zu lang,
das wird mit W und mit H abgekürzt.
Ah, oh ja.
So,
und dann hast du halt irgendwie
so ein, zwei, drei Zeichen-Properties,
wo du aber,
klar verstehst du so grob,
was es wohl sein wird
und die Kernaussage ist halt,
ja, es ist viel kürzer
und viel einfacher zu lesen.
Ah, ja klar,
wenn alle Entwickler ausgerechnet
sich dieses Framework raussuchen
und sich da eingelesen haben
in der Doku,
ja, dann ist natürlich schon
kürzer zu lesen
in W statt Width.
aber habe ich da wirklich so viel gespart
und die meisten Entwickler,
die kommen halt vielleicht einfach
nur von CSS
und starten nicht unbedingt
mit Assembler CSS.
Und wenn ich in so einem Team bin,
ist die Wahrscheinlichkeit,
dass jemand ein CSS lesen kann,
auch immer noch höher,
als dass jemand weiß,
was mit Assembler CSS gemeint ist.
Also irgendwie alle Punkte,
die sie so gemacht haben
in der Doku,
warum man sie nutzen soll,
kamen bei mir zumindest nicht an.
Aber vielleicht ist es ja auch
total kontrovers
und ihr klärt uns
in den Kommentaren
oder mit Hass-E-Mails
darüber auf,
warum das totaler Käse ist,
was ich hier erzählt habe
und warum das Ding eigentlich
Total-Framework es schafft
in die State-of-CSS-Umfrage,
dann sollten wir es als Podcast
auch dazu den Podcast schaffen,
meiner Meinung nach,
weil das Niveau,
das matchen wir auf jeden Fall.
So, jetzt habe ich es gesagt.
Oh Gott, jetzt kriegen wir Ärger.
Okay.
Ja, jetzt kommt noch das Zweite.
Da habe ich gar nicht so viel
zu drüber zu sagen,
weil da habe ich schon
keine Lust mehr gehabt.
Ah, okay.
Nee, nicht so ganz.
Also, ich musste hier auch
wieder so ein bisschen schmunzeln,
weil das Erste, was ich gelesen habe,
ist im Titel schon
The World's Second Most Popular
React-UI-Framework.
Ah.
Also, jetzt dachte ich schon so,
okay, React bin ich raus
und außerdem klingt das Ganze
irgendwie so,
wir sind die zweitvertrauenswürdigste Bank
oder wir sind der zweitsicherste
Bansch-Jumping-Angeater.
Oh Gott.
Also, mir ist natürlich klar,
dass das nicht vergleichbar ist,
da geht es jetzt nicht um Operationen,
aber auch um den Werten oder so.
Aber ist schon ein bisschen schräg, ne?
Und natürlich dürfen die auch stolz drauf sein,
dass sie das zweitpopulärste
React-Framework ist.
Das ist ja schon was.
Aber einfach so die Aussage,
wir sind das Second Most,
das klingt halt einfach irgendwie so.
Auf die Eins haben wir es nicht geschafft,
aber wir sind trotzdem cool.
Ei.
Okay.
Weiß nicht, ob ich damit halt dann so werben würde.
Aber gut.
Also, jedenfalls, was ist das?
Das ist eine komplette,
es ist kein Framework so an sich wohl,
sondern eine komplette Designsprache,
also Farben und Farbabstufungen
und Layout-Vorschläge
und Icons irgendwie mit drin,
aber auch so Gestaltungsprinzipien,
was mache ich wann, wie
und wenn es da irgendwie um Content bearbeiten geht,
aber es geht hauptsächlich ums Design,
dass man dann so Inline-Edit-Funktionalitäten verwendet,
statt irgendwelcher Eingabemasken und so.
Also fertige Komponenten,
wenn ich es richtig sehe.
Ja, das ist richtig krass
und das ist riesig
und sich da einzulesen,
das hätte einfach viel zu viel Zeit jetzt beansprucht
und also da kann,
ja, wenn einem das interessiert
und man das adaptieren will,
dann viel Spaß beim Durchlesen,
es ist echt einiges,
es ist eine ganze Menge
und das gehört wohl zu Alibaba,
zu denen auch so.
Ah, das ist bestimmt deren Designsystem oder so.
Genau, genau
und das ist,
in der Doku ist auch vieles zusätzlich
oder teilweise sogar in den Beispielgrafiken
ausschließlich auf Chinesisch
und das habe ich schon
so ein bisschen stutzen lassen am Anfang
und dann habe ich gelesen.
Aber du kannst auch Chinesisch.
Ja, aber nicht fließend.
Doch, doch.
Lesen vor allem.
Ja, der Konstantin,
der stapelt immer ein bisschen tief.
Schickt ihm mal eure Lieblingschinesischen Filme,
die es nur auf Chinesisch geht.
Ja, gerne, gerne.
Mit Untertiteln, bitte.
Ach nein, nein, nur ohne Untertitel.
Oje.
Weil der Konstantin kann sehr gut Chinesisch,
aber er möchte es nicht sagen.
Ni Hao.
Ja.
Gut.
Oh Gott, ich bin hier.
Ich glaube,
ich muss mein Mikrofon ein bisschen leiser.
Ja, wir sind beide, glaube ich,
gerade ziemlich am Moment hier.
Ich war sehr am Anschlag hier gerade.
Ist alles rot.
Okay.
Du durch mit André Shing.
Auf jeden Fall,
das finde ich auf jeden Fall interessant,
weil das ist von einer Bude,
die groß ist und die man kennt,
zumindest wenn man sich so ein bisschen
mit dem asiatischen Raum beschäftigt.
von daher,
ich finde es immer cool,
wenn es mal was gibt,
was nicht irgendwie ursprünglich aus den USA ist
oder aus England oder so,
keine Ahnung, Europa,
sondern mal irgendwie,
hey, wir haben hier ein geiles Designsystem gebaut
und hier ist es aus Asien einfach.
Und das sieht auch echt schick aus.
Also, ja, wie gesagt,
ich habe keinen Accessibility Audit gemacht,
aber, ja, kann man sich bestimmt mal angucken.
Ja, das ist natürlich immer nur eine von vielen Fragen.
Aber, ja, genau.
Es gibt komplette Components auch dann schon vorgefertigt und so.
Genau, also, ich habe gerade kurz reingeguckt,
habe gesehen, da gibt es sehr, sehr, sehr viele Components.
Das ist quasi so wie ein großes Bootstrap, sage ich mal.
Ja, nur mit noch viel mehr Gedanken in die Details, glaube ich.
Mit noch viel mehr Gedanken, genau.
So, dann kommen wir zum Letzten, glaube ich.
Ja.
Und das ist AdProperty.
Und das kannten wir auch beide nicht.
Und ich sage dir auch, warum.
Das ist nämlich für Houdini.
Mhm.
Und deswegen ist es vielleicht auch gar nicht so wichtig,
dass ihr das kennengelernt habt.
Folge 6.
Sage ich jetzt mal so gemein.
Und auch in der MDN steht sofort direkt,
gelbe Box, experimental.
This is an experimental technology.
Check the browser compatibility table carefully
before using this in production.
Also, production kann ich auf jeden Fall nicht empfehlen.
Und AdProperty in CSS ist eine Möglichkeit,
CSS Properties in CSS zu definieren.
Klingt das jetzt irgendwie komisch?
Also, man schreibt irgendwie AdProperty,
dann kommt Minus Minus Property Name.
Und dann geht geschweifte Klammer auf und dann die Syntax.
Also, wie heißt das Ding?
Dann steht da, ob es vererbt, ob es erbt oder nicht.
Und was der Initial Value ist.
Und ich weiß gar nicht, ob ich noch tiefer drauf eingehen möchte.
Es ist, wie gesagt, für Houdini, dass man selbst eigene CSS Properties definieren kann.
Und das macht man ja in Houdini meines Wissens nach dann mit JavaScript,
wo dann irgendwie definiert wird, wie verhält sich das und was macht das eigentlich ganz genau.
Und dann geht man auf diese ganz tiefen Browser-APIs.
Du kannst in Houdini Sachen machen mit JavaScript,
aber teilweise ja auch im CSS.
Und das ist eben das AdProperty.
Damit definierst du wirklich im Style Sheet bestimmte Eigenschaften von so einem Custom Property.
Du kannst es vielleicht nochmal mit JavaScript aufbohren,
gerade wenn dann irgendwie tatsächlich Berechnungen oder sowas dann stattfinden,
wenn du irgendeine krasse CSS-Funktion damit irgendwie schreiben willst.
Genau.
Was ich nämlich jetzt da nicht gesehen habe, ist, dass man wirklich bestimmte,
also ja, ich kann hier meine Property definieren, aber die tut ja erstmal noch nichts.
Ja.
Und das kann ich meines Wissens nach nicht in CSS machen,
in der Property beschreiben, was sie tut,
sondern das muss ja irgendwie extern mit irgendwelcher Houdini-Magie gemacht werden.
Auf jeden Fall kann man sie damit definieren.
Viel mehr steht bei der MDN auch nicht.
Viel Spaß damit.
So, gib einen Luftballon dazu.
Aber wir haben es erwähnt.
Wir haben es erwähnt.
Ist nichts, womit ich mich jetzt groß beschäftigen werde.
Die Houdini, die verrückten Houdini-Sachen, das sollen, das soll, keine Ahnung, wie heißt das.
Das soll Harry, das soll Harry einfach machen.
Wie man den Wagen schon mal vorgefahren hat.
Oh, yeah.
So.
Dann haben wir jetzt noch was, noch zwei in Klammern, ne?
Wo wir gesagt haben, da haben wir schon, nur auf die Folgen verweisen.
Genau.
Da haben wir gesagt, die haben wir schon mal besprochen, aber wir haben schon wieder selber so die Details vergessen.
Aber es wird jetzt auch zu weit, das jetzt nochmal durchzukommen, weil wir haben die, glaube ich, sogar relativ detailliert besprochen.
Und zwar die CSS-Masks in Folge 11.
Allerdings ging es da um Mask-Image speziell.
Genau.
Es gibt nämlich nochmal Masks eben, die mit Shapes definiert werden und das war nämlich unser zweiter Punkt CSS-Shapes in Folge 21, wo ich dann wirklich Kreise oder Polygone definieren kann, teilweise mit SVG, Markup, Notation.
Und der Vollständigkeit halber sei noch genannt, es gibt eine ganze Menge Mask-Eigenschaften, also Mask-Clip, Mask-Composite, Mask-Image, Mask-Mode, Mask-Origin, Mask-Position, Mask-Repeat und Mask-Size.
Also da geht einiges ab, da könnte man eigentlich auch wahrscheinlich eine komplette Sendung zumachen, zu den ganzen Mask-Geschichten.
Aber wir hatten damals nur Mask-Image, genau, das wollte ich eigentlich nur noch erwähnen, ja.
Genau, also, wen es interessiert, Folge 11 und Folge 21.
Genau, CSS-Shapes wäre dann die sieben Technik offenbar.
Ja, Mensch, wir sind richtig schnell.
Der war richtig flott heute, oder? Kann sich keiner beschweren.
Naja, doch, die Leute, die gerne lange Folgen haben.
Stimmt, jetzt kommen die zu kurz.
Wir sind noch nicht fertig, wir können ja auch, wir können ja einfach nur einen Lava-Blog machen.
Wir können ja auch einen Lava-Blog machen.
Aber sollen wir denn zur nächsten Kategorie vorstellen?
Ja, bitte, ich bitte darum.
Das Geiltein.
Geiltein.
So ein bisschen, so ein bisschen erotisiert mich das jedes Mal.
Und das Komische daran ist, dass ich das selbst eingesprochen habe.
Ja, was sagt das jetzt über dich aus, Moritz?
Ja, ich muss nur sagen, dass ich auf Chipmunks stehe wahrscheinlich.
Wenn du in deinen Spiegel blickst.
Nein, nein, nein, nein, nein, nein, nein, nein, nein, nein, nein, nein, nein, nein.
Ich sage ja nur, mit so einer Chip sich's los.
Jetzt hat's, glaube ich, hier voll gekratzt.
Ich glaube, das wird richtig hässlich in der Aufnahme.
Ich glaube, ja, also ich kenne den Ärzte-Song.
Mit dem Pegel müssen wir, glaube ich, noch mal ein bisschen ...
Ja, ich glaube ...
Wir haben heute beide einen hohen Pegel, wenn man das so sagen kann.
Ja, nee, ich glaube einfach, ich stehe auf Chipmunks, damit ist es erklärt.
Weil das ist ja ...
Also, das ist ja nicht mein ...
Das ist ja ...
Was, wieso?
Weil das so klingt wie ein Chipmunk und dieser F-D-Effekt heißt auch so.
Ach so, ach so.
Okay, ich dachte, ich habe irgendwie noch perverser um Ecken gedacht irgendwie.
Nein!
Also, meine Güte.
Okay, gut.
Man muss echt aufpassen, was man hier sagt in diesem Podcast, muss ich hier mal sagen.
Also, falls ihr mal zu Gast seid, Vorsicht!
Nein, natürlich nicht.
Wir freuen uns immer über Chipmunk-Freunde in diesem Podcast und innen.
So, wir haben aber ja noch einen Geilteil.
Wir kommen schon ins Lava.
Das ist sehr gut.
Und zwar ist Folgendes passiert auf Twitter.
Ich habe ...
Warte, das muss ich jetzt gerade noch mal kurz nachschlagen.
Was geschah.
Was geschah oder was zuvor geschah.
Chris Heilmann, der auch schon in dieser Sendung war, hatte was getwittert über GitHub-Copilot.
Und über interessante Analysen und so.
Und dann habe ich ...
Bei Copilot kommt man nicht einfach so rein.
Da kannst du nicht einfach so mitmachen.
Das darfst du nicht einfach benutzen, sondern da muss man sich bewerben, sozusagen.
Auf GitHub musst du dann einen Knopf drücken.
Nee, copilot.github.com.
Ähm, da kann man sich quasi, äh, da kann man sich quasi, äh, dafür bewerben.
Ähm, ähm, und, äh, erst wenn die sagen, ja, du bist dabei, dann, äh, dann kann man das ausprobieren.
So, was ist GitHub, was ist GitHub-Copilot überhaupt?
Ähm, also es wird beworben mit Your AI-Pair-Programmer.
Ähm, und ich habe es heute, äh, gestern, gestern und heute mal ein bisschen kurz ausprobiert und ich fand's beeindruckend, was es tut.
Aber ich habe auch eigentlich nur bestehenden Code editiert.
Das ist wahrscheinlich, indem man die Demos sich so anguckt, noch viel mächtiger, wenn man gerade wirklich was Neues schreibt.
Ähm, weil, äh, das anhand von Kommentaren versucht schon zu erkennen, was will man denn eigentlich da schreiben?
Und dann anhand von der ersten Zeile Code sagt, hm, vielleicht möchtest du diesen Block hier haben, weil das gibt's vielleicht woanders schon so.
Ähm, und wie funktioniert das?
Ähm, die haben mit, äh, mit einem Machine Learning Framework, ähm, ihren ganzen GitHub-Code analysiert und versuchen anhand dessen, was auf GitHub schon ist, dir Vorschläge zu machen, was du vielleicht machen möchtest.
Also das geht ein bisschen über, äh, über das, was, ähm, ähm, wie heißt das nochmal, das andere Plugin, was wir da verwenden?
Ah, ja, äh, äh, äh, ja, wir wissen es gerade nicht, wie wir hatten es mal als ...
Tab 9.
Genau, Tab 9, das geht über Tab 9 hinaus, Tab 9, das, äh, das flaggt einem normalerweise, zumindest so, wie ich's verwendet hab, wie ich's bisher gesehen hab, so vor, was in die nächste Zeile, äh, kommt, oder was ich, ich tippe an, was zu tippen und es sagt, hey, möchtest du diese Zeile vielleicht so fortführen?
Das ist schon relativ cool, aber Copilot geht noch ein ganzes Stück weiter und bietet dir komplette Blöcke an, oder du gehst in eine Zeile, und das ist das, was ich halt in meinen Projekten ausprobiert hab,
und du machst einfach mal nächste Zeile, du machst einfach, drückst einfach Enter und dann sagtest du, ja, die nächste Zeile, die könnte jetzt zum Beispiel so aussehen, ähm, und was ich da jetzt ...
Wie gut sind die Vorschläge?
Das fand ich beängstigend.
Also, nicht an jeder Stelle, aber die erste Stelle, an der ich's ausprobiert hab, war ich gleich sehr beeindruckt, ähm, und das erste, was ich ausprobiert hab, war, ähm, ich war nämlich grad auf meiner eigenen, äh, am, am Code meiner eigenen, äh, Webseite.
Ich muss immer, ich denk immer Homepage und zwing mich dann Webseite zu sein, ähm, und zwar in einem Galb-File, ähm, in dem ich, äh, Bildoptimierung unter anderem mache.
Ich hab ein Task zur Bildoptimierung da drin, und zwar in diesem Fall ist es dieses Image-Min, äh, Galb-Plugin, glaub ich, und, ähm, das, äh, hat verschiedene, verschiedene Unter, ähm, ähm, Plugins sozusagen.
Zum Beispiel Mods JPEG.
Mods JPEG ist, äh, ist, äh, was von, von Mozilla, um, um JPEGs zu enkodieren und auch zu verbessern.
Und, ähm, ich hatte da ursprünglich als, äh, als Parameter drinstehen, äh, also das steht dann Image-Min.mods JPEG, ich hab den, den Screenshot auch bei Twitter, ähm, und da stehen dann halt Parameter drin, um dieses, um dieses Plugin zu, zu, äh, zu, ja, einzustellen, zu, zu konfigurieren.
Und da stand schon drin, Progressive-Doppelpunkt-True.
Und dann hab ich mir gedacht, hm, jetzt guck ich mal, was der mir vorschlägt, hab Komma hinten dran geschrieben und bin in die nächste Zeile, und er hat mir vorgeschlagen, Quality 75.
Und ich dachte so, Moment mal, gibt's das wirklich?
Und dann hab ich in der Doku nachgeschaut von Mods JPEG, und ja, es gibt ein Quality-Setting, das von 0 bis 100 geht.
Das heißt, er hat erkannt, was ich da gerade mache, dass ich, in irgendeinem anderen Projekt ist das halt eben auch definiert und irgendwie konfiguriert, und da haben sie offenbar Quality 75 hingeschrieben.
Und er hat wirklich erkannt, wo bin ich da gerade, was ist jetzt der nächste, der nächste sinnvolle Schritt?
Ich hab's dann nicht eingebaut, weil ich das nicht, ich will keine 75er Qualität, ich will immer 100er Qualität, und das brauch ich nicht, äh, nicht optimieren.
Aber das fand ich extrem beeindruckend, weil das genau wusste, was ich gerade tue, für diese Stelle.
Und ich hätte da nichts, ich hätte einfach nur da einen Tab drücken müssen, hätte ich Quality 75 da schon gehabt.
Das ist schon krass.
Verrückt, echt, ja.
Also, ich glaub, da kommt was.
Irgendwann müssen wir gar nicht mehr, müssen wir gar nicht mehr selber, dann sagst du einfach so, ich möchte das.
Ja, aber zum Beispiel, und ich hätte gern mitreden wollen, ich hab schon mehrere Diskussionen über GitHub-Copilot bei Twitter so ein bisschen mitverfolgt, wo dann auch Leute gesagt haben, das ist sehr unsicherer Code teilweise, der da rauskommt.
Naja, was soll es denn vorschlagen? Es lernt halt aus GitHub. Und auf GitHub sind nicht nur perfekte Sachen, ne, da ist jeder…
Ja, ich wollte gerade sagen, was sagt das dann über die Code-Basis, die da herangezogen wurde? Also, anscheinend ist sehr viel unsicherer Code unterwegs, ne, aber so ist es halt.
Ja, das ist einfach die Realität, glaube ich, dass nicht jeder alles zu 100 Prozent an Security denkt, sondern ich meine, da sind ja aber auch Spaßprojekte und alles Mögliche, ja.
GitHub hebt ja nicht den Anspruch, dass die Projekte, die dort sind, ähm, irgendwelchen Qualitätsrichtlinien genügen.
Da ist einfach alles.
Ja, klar.
Und ich weiß jetzt nicht, die werden bestimmt auch Private-Projekte vielleicht mit völlig kaputtem Code, ähm, durchsucht haben, weil den Code haben sie ja, das machen sie ja.
Also, ich kann auf jeden Fall nur empfehlen, ähm, das mal auszuprobieren, ich fand's sehr spannend und ich bin gespannt, wenn ich mal irgendwie was Neues baue und jetzt nicht nur alten Code editiere, so wie ich das jetzt halt quasi ausprobiert hab, ähm, was mir das dann vorschlägt.
Und ich glaube, die Vorschläge sind mit Vorsicht zu genießen, ähm, aber ich war da zum Beispiel auch, ähm, in JavaScript in, in einem Promise drin, das dann mir gesagt hat, ja, da hat er mir vorgeschlagen, ich soll mal if success true machen und so.
Ähm, was dann auch, wo er auch, wo ich auch sofort gesehen hab, ja, das hat jetzt gemerkt, in was für einem Kontext befinde ich mich da.
Und das hat, hätte, hat auch sehr gut gepasst.
In CSS fand's ein bisschen fragwürdig, weil das, ähm, an, an bestimmten Stellen, die ich ausprobiert hab, fand ich's gut.
Und an anderen Stellen fand ich's dann irgendwie merkwürdig, aber es ist einfach logisch, weil, weil bestimmte Sachen treten halt so in einem anderen Code auf.
Aber zum Beispiel, ich hab halt Position Absolut hingeschrieben und hab mir gedacht, ich würde jetzt erwarten, dass da jetzt, ähm, Werte für Top, Right, äh, Bottom, Left kommen.
Weil das so der Klassiker ist, dass man das danach schreibt.
Und es kam auch tatsächlich Top und Left, glaub ich, und danach kam aber Width und Height.
Und das ist ja, okay, aber immerhin, also das ist ja schon mal was, ne?
Und ich hätte einfach, ich kann, ich kann quasi programmieren, in Anführungsstrichen, indem ich einfach sag, Enter, Tab, Enter, Tab, Enter, Tab.
Man könnte vielleicht mal ein Kunstprojekt machen, wo man einfach, ähm, beliebigen Code hinschreibt und dann einfach ewig nur Enter, Tab, äh, drückt und dann schaut.
Man könnte ein zweites Style-Sheet anlegen, das man um, äh, umschalten kann auf unserer Seite und das lassen wir komplett von der AI generieren.
Genau, genau, das ist eine gute Idee, genau.
Aber ich fand's, also wirklich, es ist, die sagen auch, es heißt auch noch Technical Preview, ähm, die sagen auch nicht, dass das irgendwie final ist oder was, aber es ist ein sehr interessantes Experiment, was ich auf jeden Fall nur empfehlen kann, dass man sich einfach, einfach mal, äh, da einschreibt, sozusagen, einfach mal anmeldet und dann mal guckt, ob mal freigeschaltet wird und dann, wie gesagt, mit Vorsicht genießen.
Aber ich glaube, das könnte echt ein großes Ding werden.
You heard it here, 27, oder so.
Ich hab keine Ahnung, das ist ja nicht so neu.
Das ist ja das Problem.
Nee, nee, klar.
Ähm, aber es ist für mich neu, dass ich damit rumspielen kann, deswegen bin ich ziemlich excited gerade darüber.
Und ich glaube, man verkauft da auch seine Seele und, und Kinder und alles, weil man muss sich dann explizit in, das ist übrigens, ah, hab ich gar nicht erklärt, wie das dann funktioniert, das ist ein VSCode-Plugin.
Ich weiß nicht, ob es für andere IDEs auch Plugins gibt.
Ähm, auf jeden Fall ein VSCode-Plugin, klar, das ist natürlich die gleiche, äh, die gleiche Schmiede, schmeckt ja auch Microsoft dahinter.
Und man muss sich explizit in Microsoft nochmal anmelden für Co-Pilot, äh, und auch man muss bestimmte Bedingungen, äh, zusagen, dass man, dass die irgendwie passen und so.
Also, ich glaube, da wird dann wahrscheinlich irgendwie der Code auch irgendwie verwendet, um wieder das Ding weiterlernen zu lassen und so.
Ah, ein, ein Detail hab ich noch vergessen.
Ähm, es gibt auch, man kann auch, ähm, es gibt nicht nur einen Vorschlag unter Umständen, sondern mehrere und die kann man dann auch noch durchschalten.
Also, du kannst sagen, oh, mit dem Vorschlag war ich nicht zufrieden, ähm, kannst durchschalten und dann gibt's auch noch so ein File, wo ich nicht mehr weiß, was für eine File-Extension das hatte, ähm, wo man sagen kann, ähm, das ist meine präferierte Lösung.
Du kannst das Ding auch explizit lernen lassen, das ist das, was ich will an dieser Stelle.
Ähm, ob das dann in den allgemeinen Algorithmus einfließt oder ob ich einen eigenen krieg, weiß ich nicht.
Ob das da quasi auf mich persönlich angepasst wird.
Aber, wie gesagt, ich kann nur empfehlen, spielt mal damit rum, wenn ihr könnt und dürft und erzählt uns mal von euren Erfahrungen.
Würde mich auf jeden Fall interessieren, wie, äh, wie ihr das wahrnehmt, falls ihr da schon in dem Programm mit dabei seid.
Vielleicht sind ja schon alle mit dabei, nur ich nicht.
Bis gestern.
Genau.
Cool.
Geil, Teil, fertig.
Jetzt kommt der fehlende Endschirche.
Super.
Da ist das Ende.
Oh Gott.
Das weißt du was, das schneiden wir jetzt einfach raus und das spielen wir jetzt an der Stelle mal hin.
Fertig ist der Endschirche.
Ey, das ist gut, das ist gut.
Das ist gut, ähm, nee, lass uns, ja genau, lass uns das, lass uns das rausschneiden.
Ich mach vielleicht noch ein paar, noch ein paar Soundeffekte drunter.
Oh ja.
Mit piu, piu, piu, also so richtige, richtige Laser oder sowas.
Wir nehmen noch ein Sammelsurium an Effekten auf.
Machen wir noch ein paar?
Piu, piu, piu.
Gucku.
Bing, bing, bing.
Okay, gut.
Okay, ich glaub, wir haben das zusammen.
Jetzt wisst ihr, jetzt ist es vorbei, ne?
Ihr habt's schon gemerkt.
Das war der Endschingel.
Ja, cool, dann haben wir endlich einen.
Das ist doch schön.
Ja, stimmt, das ist eigentlich eine super Idee, weil wir haben schon so oft gesagt, Mensch, wir bräuchten einen und haben dann irgendwelche komischen Geräusche gemacht.
Eigentlich eine super Idee, einen da draus zu machen.
Jetzt bräuchte ich mir noch einen Algorithmus, der das jedes Mal gemeinsam, also du machst was, ich lege noch ein bisschen was drüber, du legst was drüber.
Ja, so ein bisschen hin und her, so ein bisschen Jingle-Golf.
Nö, das Ende.
Gelände.
Genau.
Ja, komm, jetzt reicht's.
Okay, ich glaub, jetzt ist's.
Reicht's, reicht's.
Ist durch, oder?
Ist durch, ist durch.
Gut, ja, ich hab ja vorhin schon gesagt, ich, äh, zur Verabschiedung, werd ich nochmal so ein bisschen, äh, anstacheln.
Also was, was hat euch davon am meisten interessiert?
Und, äh, wozu hättet ihr gerne eine eigene Folge, eine ganze oder, oder zumindest mal ein bisschen mehr Tiefe?
Vielleicht können wir auch irgendwie so zwei, drei Sachen zusammenfassen, die werden nochmal in Tiefe durchgehen, statt zehn.
Ähm, genau.
Schreibt's in die, außer Houdini, schreibt's in die Kommentare, ähm, oder auf diversen anderen Kanälen, die wir eben in der Retro schon abgefrühstückt haben.
Also würde mich echt interessieren, was, was, was euch denn so, ähm, thematisch noch interessiert.
Also die Onlyfans-Kommentare, die lesen wir bevorzugt.
Nein, Spaß.
Genau.
Und dann machen wir da vielleicht nochmal eine ganze Folge draus.
Mensch, das war wieder ein Spaß.
Also zumindest für uns.
Ja, ja, aber das ist ja das, ja, darum geht's.
Die Zahlen sagen uns, äh, es macht euch auch Spaß.
Oder ihr seid sehr masochistisch veranlagt, also, äh, eins von beiden.
Aber auch das ist ja dann Spaß.
Auch das ist ja dann, ist ja auch okay.
Genau.
So, ja, jetzt, ihr merkt schon, es wird nicht mehr besser.
Es wird jetzt nicht mehr besser, nee.
Ich meine, wir können jetzt noch eine halbe Stunde weitermachen.
Ähm, ja, wie ist es eigentlich so, wie warst du, warst du heute, warst du, warst du mal spazieren heute?
Ich hatte heute, ähm, ich hab heute kaum gearbeitet.
Ich war tatsächlich spazieren, ja, ich hatte, ähm.
Wie einfach das funktioniert, dass man das noch in die Länge zieht, ist ja fantastisch.
Ja, ich bin heute zum Badischen Staatstheater, äh, verlaufen.
Ja? Ja, cool.
Ja.
Es war, war schön da.
War schon, war gutes Wetter.
Ich hab mir so ein Programm da geholt und bin da nach Hause gelaufen.
Und gehst du ins Theater jetzt demnächst?
Ja, nee, demnächst jetzt nicht.
Das hab ich mehr so, das hab ich mehr so für, für die Zukunft irgendwann.
Cool, schön.
Ja, man, ja, schön.
Weißt du, was ich jetzt mach?
Ist einfach aufs Knöpfchen gedrückt.
Sehr gut.
Jetzt ist es vorbei.
Also, macht's gut.
Macht's gut.
Bis zum nächsten Mal.