WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: Houdini – entzaubert?
Publishing Date: 2020-04-26T12:14:16+02:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/houdini-entzaubert/

00:00:00.000 --> 00:00:03.300
 Wo wir sind, ist vorne, Folge 6. Heute geht's um Houdini.

00:00:03.300 --> 00:00:19.520
 Herzlich willkommen bei Wo wir sind, ist vorne.

00:00:19.520 --> 00:00:22.320
 Frontend-Fakten-Frotzeleien.

00:00:22.320 --> 00:00:26.320
 Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

00:00:29.320 --> 00:00:38.020
 Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.

00:00:38.020 --> 00:00:58.100
 Herzlich willkommen bei Wo wir sind, ist vorne, Folge Nummer 6.

00:00:58.640 --> 00:01:03.260
 Heute haben wir zumindest vor, über Houdini zu sprechen. Mal schauen, ob wir da auch hinkommen.

00:01:03.260 --> 00:01:04.800
 Ja, hoffentlich.

00:01:04.800 --> 00:01:11.760
 Ja, mehr habe ich gar nichts zu begrüßen. Einfach nur Hallo, Hallo, neue Folge, neues Glück.

00:01:12.120 --> 00:01:33.380
 Ja, ich möchte ganz herzlich an der Stelle unsere neuen Hörer begrüßen. Wir haben nämlich ein bisschen die Werbetrommel gerührt und das hat tatsächlich einen positiven Effekt gehabt. Und wir sehen in unserer schönen, bunten Balken-Statistik, dass tatsächlich viele neue Leute unsere Folgen hören. Und zwar nicht nur die aktuellste, sondern auch die älteren Folgen jetzt nach und nach. Das ist sehr schön.

00:01:33.860 --> 00:01:38.800
 Ja, coole Sache auch. Herzlich willkommen von mir. Der Konstantin Reuspert sich nochmal kurz. Das darf er auch.

00:01:38.800 --> 00:01:40.120
 Wir haben noch keine Reuspertasten.

00:01:40.120 --> 00:01:44.320
 Ja, meine Stimme geht gerade irgendwie weg, aber wir haben ja auch nur irgendwie ein, zwei Stunden Sendung vor uns.

00:01:45.700 --> 00:01:49.220
 Was, nur zwei Stunden? Also heute wollte ich eigentlich mindestens vier Stunden machen.

00:01:49.220 --> 00:01:55.260
 Gut, alles klar. Dann muss ich meine Kehle dazu ölen. Ich habe nämlich eine trockene Kehle. Lass uns anstoßen erst mal.

00:01:55.260 --> 00:01:57.640
 Ganz kurz, ich habe Feedback bekommen zur Folgen.

00:01:57.640 --> 00:01:59.180
 Oh, ja, okay, dann machen wir das zuerst.

00:01:59.180 --> 00:02:07.220
 Ja, also das, naja, war nur, war so direktes Feedback. So, ja, wer soll sich das denn anhören so lange?

00:02:07.220 --> 00:02:15.920
 Habe ich gemeint, naja, Podcast muss man nicht am Stück hören. Also ich höre viele Podcasts, die gehen über mehrere Stunden.

00:02:15.920 --> 00:02:17.300
 Ja, da käme ich auch gar nicht dazu.

00:02:17.300 --> 00:02:25.740
 Nö, ich hätte, glaube ich, auch nicht die Muße, mir selbst so lange zuzuhören. Aber man kann es ja in kleinen Häppchen machen.

00:02:25.740 --> 00:02:30.200
 Aber das kann eigentlich nur von jemandem gekommen sein, der sonst nicht so viele Podcasts hört.

00:02:30.200 --> 00:02:32.060
 Das würde ich nicht sagen.

00:02:32.060 --> 00:02:32.920
 Ja, nicht mal?

00:02:32.920 --> 00:02:33.280
 Ja, das würde ich nicht sagen.

00:02:33.280 --> 00:02:37.980
 Weil was ich so an Podcasts höre, das geht also mindestens eine Stunde.

00:02:37.980 --> 00:02:44.700
 Also es gibt Podcasts, die gehen eine Viertelstunde. Also es gibt wirklich auch sehr, sehr viele, sehr kurze Podcasts.

00:02:44.700 --> 00:02:47.960
 Gut, dann reden wir jetzt einfach doppelt so schnell, dann sind wir schneller durch. Lassen Sie anfangen.

00:02:47.960 --> 00:02:55.720
 Ach so, okay. Und das ist natürlich auch wieder für unsere Hörer, die das Tempo schneller stellen und die das dann einfach an der Stelle wieder langsamer stellen müssen.

00:02:55.740 --> 00:02:57.280
 Weil sonst verstehen sie sich nicht.

00:02:57.280 --> 00:03:07.720
 Genau. Andererseits haben wir Feedback auch bekommen, dass das letzte Mal ein bisschen schnell war oder ein bisschen schlecht verständlich mit den verschiedenen CSS-Notationen von den Farben.

00:03:08.700 --> 00:03:16.280
 Das spricht eigentlich eher dafür, ein bisschen langsamer zu sprechen und alles ein bisschen genauer durchzunehmen. Aber gut, vielleicht finden wir ja einen guten Mittelweg.

00:03:16.280 --> 00:03:19.040
 Aber wie gesagt, man kann uns auch in Raten hören.

00:03:19.040 --> 00:03:30.800
 Ich kann mir schon vorstellen, ich nehme die Kritik auch sehr ernst, ich kann mir schon vorstellen, dass es natürlich viel leichter ist, das Ganze zu verstehen, wenn man gerade eben den Artikel noch vor sich hat und dann die einzelnen Notationen runterliest.

00:03:30.800 --> 00:03:39.020
 Und jemand, der vielleicht noch nicht so tief drin ist in der CSS-Farbenwelt, dass das für den dann auch ein bisschen böhmische Dörfer sind. Kann ich total gut nachvollziehen.

00:03:39.020 --> 00:03:39.280
 Ja, klar, klar, natürlich.

00:03:40.040 --> 00:03:57.980
 Das setzte wahrscheinlich schon ein gewisses Level voraus, leider. Also es ist immer schwer, auf alle Level an zuhörenden Leuten eingehen zu können oder einzugehen. Wir sind halt manchmal ein bisschen höher angesiedelt, manchmal ein bisschen niedriger, meistens niedriger.

00:03:58.700 --> 00:04:05.940
 Genau, das haben wir ja schon angesprochen, dass es halt immer so eine Gratwanderung ist und man es nie allen recht machen kann. Aber wir hoffen doch, dass wir da die Waage halten können.

00:04:05.940 --> 00:04:07.940
 Aber bevor jetzt allein schon die Begrüßung...

00:04:07.940 --> 00:04:09.760
 Nein, nein, nein, ganz kurz noch, ganz kurz, ganz kurz noch.

00:04:09.760 --> 00:04:10.280
 Okay, okay, okay.

00:04:10.280 --> 00:04:23.140
 Wenn wir jemanden überfahren mit dem, was wir machen, einfach eine Frage in die Kommentare stellen oder bei Twitter. Also wenn irgendwie da was dabei ist, was irgendwie nicht verständlich war, einfach mal kurz fragen, dann erklären wir das kurz. Also es ist überhaupt kein Problem.

00:04:23.140 --> 00:04:27.700
 Absolut, liebend, gerne. Dann kann ich an der Stelle auch noch gleich an. Jetzt ist meine Stimme gleich echt ganz weg.

00:04:28.520 --> 00:04:29.620
 Ach Mensch, Konstantin.

00:04:29.620 --> 00:04:31.180
 Wir hatten zu viel Vorschau-Geplänkel.

00:04:31.180 --> 00:04:34.940
 Ja, wir sollten einfach nicht zwei Stunden vorher noch reden.

00:04:34.940 --> 00:04:35.340
 Genau.

00:04:35.340 --> 00:04:37.920
 Du wolltest aus dir zu sprechen kommen, oder?

00:04:37.920 --> 00:04:47.740
 Weil du gesagt hast, hier ist wie Social Media Fragen stellen, super gerne, gerne mehr Interaktionen und vor allem natürlich auch nochmal die Bitte, sprecht mit euren Kollegen über den Podcast, empfehlt uns weiter.

00:04:47.740 --> 00:04:58.340
 Ihr könnt uns auch mit dem Hashtag WWSEV taggen. Wir sind da nicht ganz allein, ich habe vorhin mal spaßeshalber geguckt. Es gibt tatsächlich auch völlig irrelevante, für uns irrelevante Beiträge zum Hashtag WWSEV.

00:04:58.340 --> 00:05:12.020
 Aber dürft ihr natürlich gerne benutzen oder at WWSEV auf Twitter. Und für die, die uns nur über den Podcatcher hören, wir haben auch eine tolle Webseite. Wo wir sind, ist vorne.show. Allein schon wegen der Domain lohnt sich das doch, das ab und zu mal in seinen Twitter-Feed zu hauen, oder?

00:05:12.720 --> 00:05:20.120
 Ja, unbedingt. Und naja, also, der Hashtag, den haben wir übrigens gekauft, den darf jetzt kein anderer mehr verwenden.

00:05:20.120 --> 00:05:23.620
 Copyright. Trademark.

00:05:23.620 --> 00:05:26.320
 Du wolltest vorhin schon zum Getränk kommen, wollen wir das noch machen?

00:05:26.320 --> 00:05:26.900
 Ja, natürlich.

00:05:26.900 --> 00:05:30.980
 Also ich habe noch nichts, ich habe es noch nicht offen, aber ich öffne es mal.

00:05:30.980 --> 00:05:32.620
 Ich mache auch mal.

00:05:32.620 --> 00:05:33.620
 Das klang gut.

00:05:34.460 --> 00:05:39.540
 Ah, ja gut, dagegen komme ich nicht an.

00:05:39.540 --> 00:05:40.840
 Schön übersteuert.

00:05:40.840 --> 00:05:51.560
 Mit meinem, wie soll ich sagen, kommerziellen, auf Spanisch gemachten Getränk, nee, mexikanisch gemachten Bier-Mischgetränk.

00:05:51.900 --> 00:05:54.700
 Dann ist schon klar, was du hast.

00:05:54.700 --> 00:05:56.280
 Ja, du kannst es auch sehen im Vergleich zu unseren.

00:05:56.280 --> 00:05:57.040
 Ach so, ist es gar nicht.

00:05:57.040 --> 00:05:58.360
 Nee, kannst du doch sagen, oder?

00:05:58.360 --> 00:06:00.100
 Nee, nee, nee, es ist kein Corona.

00:06:00.100 --> 00:06:00.980
 Oder schämst du dich?

00:06:00.980 --> 00:06:02.160
 Schämst du dich?

00:06:02.160 --> 00:06:13.020
 Nee, aber vielleicht will ich gar keine Werbung machen für so bekannte Marken, sondern ich würde Werbung machen für kleine und wenn bekannte Marken hier erwähnt werden wollen, dann sollen sie uns Geld geben.

00:06:13.020 --> 00:06:13.760
 Alles klar.

00:06:13.760 --> 00:06:18.180
 Ich trinke einen Mönchshof, das ist, glaube ich, nicht so bekannt.

00:06:18.180 --> 00:06:20.280
 Das ist klein genug, dass man es aussprechen darf.

00:06:20.280 --> 00:06:24.000
 Kann man sagen, einen Mönchshof-Natur-Radler trinke ich heute.

00:06:24.000 --> 00:06:28.060
 So, und dann muss ich jetzt gleich mal einen beherzten Schluck davon nehmen, damit ich hier weiterreden kann.

00:06:28.060 --> 00:06:31.200
 Ja, aber was, dann muss ich ja jetzt währenddessen was reden.

00:06:31.200 --> 00:06:35.760
 Das ist ja, also, jetzt bin ich total hier ganz bisschen alleine gelassen.

00:06:35.760 --> 00:06:39.760
 Dann hau ich jetzt einfach, ich hau jetzt einfach den Retro-Shingel raus.

00:06:39.760 --> 00:06:41.460
 Ja, genau, ich wollte es gerade sagen.

00:06:41.460 --> 00:06:49.040
 BWSIV präsentiert die Retrospektive.

00:06:50.280 --> 00:06:53.240
 Ja.

00:06:53.240 --> 00:06:54.880
 Jetzt musst du auch reden.

00:06:54.880 --> 00:06:58.000
 Was? Nee, du stehst als erstes bei der Retro.

00:06:58.020 --> 00:07:07.540
 Ja, ich habe gar nicht, ich habe technisch gar nichts groß zu berichten von den letzten zwei Wochen.

00:07:07.540 --> 00:07:09.340
 Ich habe mein Büro aufgeräumt.

00:07:09.340 --> 00:07:12.580
 Ich habe die ruhige Zeit mal genutzt, um ein bisschen Klarschiff zu machen.

00:07:12.580 --> 00:07:15.820
 Und ja, erstaunlich, was da so alles zutage tritt.

00:07:16.860 --> 00:07:19.160
 Ich habe jede Menge physische Datenträger gefunden.

00:07:19.160 --> 00:07:28.180
 Also, spindelweise CD und DVD-Rs und RWs, bevor die USB-Sticks modern geworden sind.

00:07:28.180 --> 00:07:30.080
 Und natürlich auch eine Handvoll USB-Sticks.

00:07:30.080 --> 00:07:31.500
 Nutzt du noch USB-Sticks?

00:07:33.420 --> 00:07:35.140
 Ich versuche es zu vermeiden.

00:07:35.140 --> 00:07:37.900
 Ganz, ganz selten.

00:07:37.900 --> 00:07:46.060
 Also, ich glaube, der einzige Anwendungsfall für USB-Sticks bei mir ist, ich muss jetzt mal eben irgendwie ein Betriebssystem auf irgendeinem Rechner installieren.

00:07:47.060 --> 00:07:50.180
 Also, ich habe das, dafür benutze ich die noch.

00:07:50.180 --> 00:07:59.120
 Ich habe meinen letzten, ich habe vor kurzem, nee, das stimmt gar nicht, vor kurzem, vor einem Jahr oder so, habe ich einen ziemlich spektakulär kaputt gemacht.

00:07:59.120 --> 00:08:07.800
 Ich habe nämlich gedacht, das ist eine gute Idee, wenn man einen USB-Stick nimmt und da einen Film drauf spielt, also sowas Größeres.

00:08:07.800 --> 00:08:15.460
 Ich weiß jetzt gar nicht mehr, wie dieses Format heißt, dieses Verrückte, wo es auch mit Untertiteln und verschiedenen Sprachspuren, MKV oder so, kann das sein?

00:08:15.460 --> 00:08:16.340
 MKV-Matroska, ja.

00:08:17.060 --> 00:08:28.840
 Also, da war eine Folge einer Serie drauf, relativ groß, irgendwie, keine Ahnung, drei Gigabyte oder so.

00:08:28.840 --> 00:08:35.640
 Und ich habe gedacht, das wäre eine gute Idee, das mit dem USB-Stick am Fernseher zu machen und das vom USB-Stick zu schauen.

00:08:35.640 --> 00:08:46.060
 Das hat auch funktioniert, der Film lief, der USB-Stick wurde währenddessen ziemlich heiß und am Ende konnte ich ihn wegwerfen.

00:08:46.060 --> 00:08:47.280
 Der war am Ende kaputt.

00:08:47.280 --> 00:08:49.540
 Das sollte eigentlich nicht so sein.

00:08:49.540 --> 00:08:51.580
 Aber ansonsten, glaube ich, Betriebssysteme.

00:08:51.580 --> 00:08:54.180
 Ja, stimmt, das ist jetzt, wo du es sagst, tatsächlich auch, ja.

00:08:54.180 --> 00:09:01.400
 Inzwischen lebt man die sich als Image runter, formatiert den Stick irgendwie auf FAT32 und haut das drauf und installiert darüber das Betriebssystem.

00:09:01.540 --> 00:09:04.760
 Ja, das ist so der einzige Anwendungsfall, der mir auffällt und ich habe da echt eine Handvoll gefunden.

00:09:04.760 --> 00:09:11.560
 Immerhin für einen habe ich, der ist rund, für den habe ich den tollen Anwendungsfall jetzt, dass ich meine Webcam damit ein bisschen besser leigen kann, damit du mich besser siehst.

00:09:12.240 --> 00:09:17.380
 Aber ansonsten liegen die Dinger hier auch zu Hauf rum und werden nicht benutzt.

00:09:17.380 --> 00:09:22.660
 Und was mir auch aufgefallen ist, Papierkram hat dankenswerterweise echt abgenommen mit den Jahren.

00:09:23.140 --> 00:09:27.380
 Also ich habe auch so ein paar Steuerunterlagen mal aussortiert und Sachen weggeschmissen, die zu alt waren.

00:09:27.700 --> 00:09:34.100
 Und da ist mir echt aufgefallen, wie dick die Ordner noch von vor, ja keine Ahnung, von 2013 zum Beispiel sind im Vergleich zu heute.

00:09:34.100 --> 00:09:41.700
 Also es passiert zunehmend mehr digital, auch jetzt, wenn man die Sachen auch einfach einscannen kann und ans Finanzamt schicken oder hat ein Steuerberater.

00:09:41.700 --> 00:09:45.900
 Ja, positive Entwicklung, was auch mit Digitalisierung zu tun hat.

00:09:45.900 --> 00:09:49.980
 Ich habe noch viel zu viel Papier, so Büropapier.

00:09:49.980 --> 00:10:01.000
 Ich bin ja so ein, ich prokrastiniere ja sehr gerne und ich hasse aufräumen und dementsprechend habe ich da echt auch noch Jahre altes Zeug gefunden, was jetzt endlich den Weg in die Mülltonne gefunden hat.

00:10:01.000 --> 00:10:02.920
 Ja, ich muss mal wieder Ablage machen.

00:10:02.920 --> 00:10:07.540
 Ich bin sehr gespannt, ob sich das auch akustisch bemerkbar macht.

00:10:07.540 --> 00:10:12.340
 Also ihr wisst Bescheid, weil es so klingt, als ob ich vom Podcaste.

00:10:12.340 --> 00:10:17.940
 Entschuldigung, der musste einfach sein.

00:10:18.660 --> 00:10:25.800
 Oh Gott, nein, nein, nein, da müssen wir kurz einhaken.

00:10:25.800 --> 00:10:30.180
 Also ich glaube, wir müssen tatsächlich irgendwie eine Wortspielkasse oder sowas, müssen wir, also.

00:10:30.180 --> 00:10:31.520
 Da werden wir ja arm.

00:10:31.520 --> 00:10:33.460
 Das geht, das geht wirklich nicht.

00:10:33.460 --> 00:10:37.700
 Na obwohl, naja, ich habe mich ja heute auf Twitter auch nicht unbedingt mit rumbekleckert.

00:10:37.700 --> 00:10:40.840
 Also soll ich den eigentlich nochmal vorlesen?

00:10:40.840 --> 00:10:43.220
 Meinst du, also dann, dann werden wir vielleicht wieder ausgeglichen.

00:10:43.220 --> 00:10:44.080
 Dann sind wir quit, ja, mach.

00:10:44.080 --> 00:10:45.600
 Ja, dann sind wir quit.

00:10:45.600 --> 00:10:48.380
 Also heute, heute bei Twitter, heute hat es mich einfach gepackt.

00:10:48.380 --> 00:10:51.540
 Das war so ein bisschen Homeoffice-Wahnsinn.

00:10:52.740 --> 00:11:02.020
 Fängt man irgendwie an zu reimen und dann vielleicht noch ein bisschen, sucht man noch ein bisschen, wie soll ich sagen, Webdesign-Inhalts zu vermitteln.

00:11:02.020 --> 00:11:05.940
 Und da floss Folgendes aus meiner Feder auf Twitter.

00:11:05.940 --> 00:11:11.260
 If you want to animate, choose transform over margin, mate.

00:11:12.880 --> 00:11:15.240
 Du kriegst sogar das teurere Schlagzeug.

00:11:15.240 --> 00:11:17.320
 Meinst du, das klang doch schön billig?

00:11:17.320 --> 00:11:19.220
 Ja, nee, nee, nee, nee.

00:11:19.220 --> 00:11:24.180
 Ich fand das andere besser, weil bei dem hat nämlich, ja, ich sag dir den entscheidenden Unterschied.

00:11:24.180 --> 00:11:27.360
 Bei dem fehlt die Bassdrum bei dem Becken.

00:11:27.360 --> 00:11:30.160
 Stimmt, ja, jetzt wo du das sagst, ja.

00:11:30.160 --> 00:11:32.440
 Und das lässt halt sehr, sehr leer klingen.

00:11:33.240 --> 00:11:36.840
 Ja, ja, der Musik, der Schmusiker.

00:11:36.840 --> 00:11:41.940
 Okay, wollen wir mal zu deiner, zu deiner Retro vordringen?

00:11:41.960 --> 00:11:43.440
 Ja, meine Retro ist ziemlich kurz.

00:11:43.440 --> 00:11:47.520
 Also, ich hab, glaub ich, in der letzten Folge schon mal gesagt, ich hab mich mit Emojis beschäftigt.

00:11:47.520 --> 00:11:51.640
 Ich hab mich noch ein bisschen über Emojis geärgert jetzt die letzten Tage.

00:11:51.640 --> 00:11:54.020
 Ich will da jetzt auch nicht zu viel vorwegnehmen.

00:11:54.020 --> 00:12:00.860
 Wir machen vielleicht noch mal eine Folge zu Emojis und wie man sie einbindet und anzeigt und rendert und keine Ahnung.

00:12:00.860 --> 00:12:03.100
 Deswegen will ich dazu gar nicht zu viel sagen.

00:12:03.100 --> 00:12:06.120
 Ich hab da, ich hab auf meiner Liste steht Koffein.

00:12:06.120 --> 00:12:07.500
 Warum hab ich denn das da drauf geschrieben?

00:12:07.500 --> 00:12:11.200
 Da hat's dir vielleicht gerade dran gemangelt oder so.

00:12:11.260 --> 00:12:12.560
 Ja, stimmt.

00:12:12.560 --> 00:12:15.080
 Ich litt unter Koffeinmangel.

00:12:15.080 --> 00:12:18.600
 Ich hab mir jetzt wieder, ich hab jetzt wieder Stoff.

00:12:18.600 --> 00:12:24.060
 Es ist wieder was im Haus, obwohl ich vielleicht auch mal versuchen sollte, ganz ohne.

00:12:24.060 --> 00:12:33.060
 Weil irgendwie ist das, ich hab das Gefühl, wenn man viel Koffein konsumiert, dann ist man mit Koffein auf dem Level wie vorher ohne Koffein.

00:12:33.060 --> 00:12:34.640
 Und das bringt dann eigentlich gar nichts.

00:12:34.640 --> 00:12:35.320
 Also der Kick bleibt raus.

00:12:35.320 --> 00:12:37.140
 Dann musst du das Level einfach nur hochfahren.

00:12:37.140 --> 00:12:39.680
 Nee, ist so.

00:12:40.020 --> 00:12:48.180
 Also ich hab das auch festgestellt, der Koffeinkonsum hier in diesem Haushalt ist in den letzten sieben Wochen oder wie lange das Ganze jetzt schon geht, ist der tatsächlich gestiegen.

00:12:48.180 --> 00:12:51.640
 Wenn man da auch so zu Hause sitzt, dann steigt der einfach.

00:12:51.640 --> 00:12:54.620
 Was heißt im Haushalt? Meinst du damit dich oder den Rest?

00:12:54.620 --> 00:12:55.980
 Mich und den Rest.

00:12:55.980 --> 00:12:57.260
 Nee, nee, auch meine Frau.

00:12:57.260 --> 00:13:01.340
 Der Hund trinkt deutlich mehr Kaffee seit der Quarantäne.

00:13:02.120 --> 00:13:02.400
 Genau.

00:13:02.400 --> 00:13:05.140
 Ja, ist klar.

00:13:05.140 --> 00:13:13.220
 Also ich meine, das ist die Corona-Kaffeesucht, die da bei den Hunden ganz typisch ist, hab ich gehört.

00:13:13.220 --> 00:13:16.640
 Absolut, es muss auch Gewinner geben in dieser Krise und das sind die Kaffeepulverhersteller.

00:13:16.640 --> 00:13:18.280
 Oh Gott.

00:13:18.280 --> 00:13:18.740
 Okay.

00:13:18.740 --> 00:13:21.080
 Ja, auf meiner Retro steht noch Staub.

00:13:21.080 --> 00:13:21.720
 Staub.

00:13:21.720 --> 00:13:23.980
 Ja, Staub hatte ich auch jede Menge im Büro.

00:13:25.560 --> 00:13:29.060
 Also es ist so, ich versuche immer alles zu automatisieren.

00:13:29.060 --> 00:13:32.340
 Ich habe auch so einen Robo-Sauger schon seit einigen Jahren.

00:13:32.340 --> 00:13:35.920
 Ich bin auch sehr dankbar, dass ich das Ding habe, aber Staub setzt sich trotzdem überall hin.

00:13:35.920 --> 00:13:41.000
 Und ich habe in meiner Wohnung relativ viele, also vor allem in der Küche, so weiße Flächen oder helle Flächen.

00:13:41.000 --> 00:13:45.220
 Aber es ist egal, auch auf dunklen Flächen sieht man den Staub hervorragend.

00:13:45.220 --> 00:13:48.700
 Ich weiß nicht, ob schon die optimale Farbe erfunden wurde, wo man Staub nicht sieht.

00:13:48.700 --> 00:13:52.960
 Also im Zweifelsfall sind es vielleicht diese grauen Industrieteppiche, die in vielen Büros liegen.

00:13:52.960 --> 00:13:55.160
 Das ist bestimmt so die optimale Farbe.

00:13:55.560 --> 00:14:00.080
 Sonst würde man sehen, wie das aussieht nach dem, was manche Kutzen nennen.

00:14:00.080 --> 00:14:06.400
 Ja, und im Homeoffice bin ich dann öfter mal zu Hause, während die Sonne hier reinscheint.

00:14:06.400 --> 00:14:13.040
 Also ich muss kurz erklären, meine Wohnung ist im Erdgeschoss in der Stadt in Karlsruhe.

00:14:13.040 --> 00:14:16.380
 Und viele hohe Häuser drumherum.

00:14:16.380 --> 00:14:22.000
 Das heißt, es gibt nur so ein ganz kleines Zeitfenster am Tag, wo die Sonne überhaupt bei mir durchs Fenster reinscheint,

00:14:22.000 --> 00:14:25.100
 weil das sonst immer von den Häusern drumherum abgeschirmt wird.

00:14:25.560 --> 00:14:31.560
 Und vor Corona habe ich eigentlich so gut wie nie mitgekriegt, dass Staub in meiner Wohnung ist.

00:14:32.520 --> 00:14:36.060
 Weil ich nie zu den Zeiten, wo die Sonne so richtig reingescheint hat, da war.

00:14:36.060 --> 00:14:38.520
 Aber wenn die Sonne reinscheint, dann sieht man den Staub überall.

00:14:38.520 --> 00:14:40.880
 Man hat das Gefühl, es ist alles unglaublich dreckig.

00:14:40.880 --> 00:14:43.700
 Jetzt ist die Frage, bin ich eine Sau?

00:14:43.700 --> 00:14:46.200
 Und ist das bei anderen anders?

00:14:46.380 --> 00:14:51.820
 Ja, Moritz, du bist eine Sau aus mehreren Gründen, aber lassen wir es einfach so stehen.

00:14:51.820 --> 00:14:59.140
 Okay, also bitte, bitte mir mal sagen, ob das bei euch auch so ist oder ob bei euch alles immer poren tief rein ist und es kein Staubkorn rumliegt.

00:14:59.140 --> 00:15:06.820
 Und falls dem so ist, dann würde ich gerne wissen, wie ihr das schafft, ohne euch selbst zum Sklaven eurer eigenen Wohnung zu machen,

00:15:06.940 --> 00:15:09.160
 weil ich will auch nicht nur den ganzen Tag putzen.

00:15:09.160 --> 00:15:16.060
 Naja gut, das ist schon sehr weit weg von unserem Podcast-Thema, aber deswegen beende ich jetzt hiermit auch die Retro.

00:15:16.060 --> 00:15:17.980
 Das ist eine wundervolle Idee.

00:15:19.440 --> 00:15:21.740
 Die Property der Woche.

00:15:21.740 --> 00:15:25.520
 Die Property der Woche.

00:15:25.520 --> 00:15:28.100
 Ja, eigentlich, wieso mache ich denn eigentlich das Echo?

00:15:28.100 --> 00:15:30.860
 Warum echoe ich eigentlich unsere ...

00:15:30.860 --> 00:15:32.600
 Weil der Finger nicht aussagekräftig genug ist.

00:15:32.600 --> 00:15:33.860
 Man weiß gar nicht, was jetzt kommt.

00:15:33.860 --> 00:15:34.900
 Was ist das?

00:15:34.900 --> 00:15:38.520
 Ich sage das vielleicht auch einfach so gerne.

00:15:38.520 --> 00:15:42.760
 Nee, bei Lehrern nennt man ja das Lehrer-Echo.

00:15:42.760 --> 00:15:47.900
 Wenn man wiederholt, was der Schüler gesagt hat, dann soll man auf keinen Fall machen, habe ich irgendwie mal gehört.

00:15:48.940 --> 00:15:50.800
 Ja, soll man auf keinen Fall machen, habe ich gehört, ja.

00:15:50.800 --> 00:15:51.580
 Ja.

00:15:51.580 --> 00:15:58.260
 Ich höre mich irgendwie doppelt, aber ich klinge verzögert irgendwie ein bisschen anders.

00:15:58.260 --> 00:16:03.920
 Die Property der Woche ist Scroll Margin Top, eine CSS-Property.

00:16:03.920 --> 00:16:10.160
 Und ich habe in Vorbereitung auf die Sendung herausgefunden, dass alles, was ich darüber glaubte zu wissen, falsch ist.

00:16:10.160 --> 00:16:16.280
 Beziehungsweise, die ist für was ganz anderes gedacht, als ich das eigentlich dachte oder wofür ich sie verwende.

00:16:18.440 --> 00:16:41.360
 Scroll Margin Top, ich habe es immer so verwendet, dass wenn ich einen Container habe, der fixed ist auf der Seite, ich aber trotzdem zu Ankerlinks springen will, die die Seite quasi ja scrollen, dann kann ich, wenn ich einen Fix-Container beispielsweise oben habe, dann kann ich einen Scroll Margin Top-Wert angeben, der so hoch ist wie der Container oder vielleicht ein bisschen höher.

00:16:41.360 --> 00:16:47.280
 Und dann springen meine Ankerlinks, also Scroll Margin Top auf dem Bereich, wo ich hinspringen möchte, ganz wichtig.

00:16:48.320 --> 00:16:55.000
 Und dann springt die Seite an die Stelle eigentlich ganz nach oben, aber plus diesen Wert.

00:16:55.000 --> 00:17:01.940
 Das heißt, mein oberster Bereich, da wo die ID angesiedelt ist von dem Ankerlink, die ist dann trotzdem sichtbar.

00:17:01.940 --> 00:17:08.600
 Weil das klassische Problem, was man oft hat, ist, dass der Anker dann an eine Stelle springt unter dem fixen Bereich.

00:17:08.760 --> 00:17:10.120
 Ich weiß nicht, ob ich das jetzt gut erklärt habe.

00:17:10.120 --> 00:17:14.180
 Ich habe auch eine kleine Demo gebaut, wie ich das einsetze bei CodePandals.

00:17:14.180 --> 00:17:16.620
 Findet ihr dann später in den Shownotes, da könnt ihr euch das mal anschauen.

00:17:16.620 --> 00:17:21.800
 Aber bei meiner Recherche, also das ist der Anwendungsfall, wie ich das verwende.

00:17:22.480 --> 00:17:35.180
 Bei meiner Recherche habe ich dann herausgefunden, dass das eigentlich gedacht ist, um Bereiche zu verschieben im Kontext von Scroll Snap Areas.

00:17:35.180 --> 00:17:37.500
 Konstantin, kennst du die? Schon mal verwendet?

00:17:37.500 --> 00:17:39.120
 Ja, ich glaube, ich weiß, was du meinst.

00:17:39.120 --> 00:17:43.360
 Also ich kenne diesen Effekt, aber Scroll Snap Areas, ist das auch wieder ein eigenes Property?

00:17:43.360 --> 00:17:45.300
 Ja, also ...

00:17:45.300 --> 00:17:47.440
 Weil ich muss sagen, da bist du mir gerade wirklich voraus.

00:17:47.440 --> 00:17:51.380
 Also auch das Property, was wir gerade besprechen, Scroll Margin Top, kannte ich nicht bisher.

00:17:52.400 --> 00:17:54.620
 Aber ich kenne das Problem, das du besprochen hast, ja.

00:17:54.620 --> 00:17:59.880
 Ja, egal, man kann das damit lösen, auch wenn es vielleicht falsch ist und hacky.

00:17:59.880 --> 00:18:02.920
 Ja, Scroll, äh, Snap, was sag ich denn?

00:18:02.920 --> 00:18:10.500
 Snap Areas, äh, oder Scroll Snap Areas sind so, also da kann ich auch, ich glaube, da packe ich mal den Link auch in die Shownotes,

00:18:10.500 --> 00:18:14.780
 ähm, sind so Bereiche, ähm, wo das Scrollen sozusagen einrastet.

00:18:14.780 --> 00:18:21.180
 Also wenn du jetzt zum Beispiel sowas machen möchtest, wie, ähm, so Slides bei Reveal.js oder sowas, das wäre vielleicht so ein Klassiker.

00:18:21.180 --> 00:18:31.200
 Ja, das heißt, ich scrolle auf einer Seite, ähm, und wenn ich aber einen bestimmten Punkt überschreite, dann springt er quasi zum nächsten Bereich oder zu einem Bereich, den ich da definiert habe, in einer bestimmten Größe.

00:18:31.740 --> 00:18:39.860
 Ähm, das ist schön, wenn man, wenn man so, wenn man so, äh, Webseiten machen möchte, die so einzelne, wirklich, wo es sich anfühlt wie einzelne Seiten, die ich umblätter oder weiterschiebe.

00:18:39.860 --> 00:18:44.260
 Dann rastet das immer genau an der richtigen Stelle ein und bleibt dann da.

00:18:44.400 --> 00:18:48.860
 Und wenn, nur wenn ich einen bestimmten Threshold beim Scrollen, äh, überschreite, dann springt er zum nächsten.

00:18:48.860 --> 00:18:52.360
 Wenn ich den nicht überschreite, dann springt es vielleicht wieder zurück da, wo ich gerade war.

00:18:52.360 --> 00:18:54.140
 Also eigentlich ist das dafür gedacht.

00:18:54.140 --> 00:18:59.800
 Aber Scroll Margin Top, ich finde, es eignet sich sehr gut für dieses Problem mit Position Fix.

00:19:00.320 --> 00:19:01.980
 Und ich muss aufstoßen von diesem blöden Bier.

00:19:01.980 --> 00:19:05.860
 Die letzte Folge, schon beim Schneiden ab und zu gemerkt, ja.

00:19:05.860 --> 00:19:07.180
 Ja, schrecklich.

00:19:07.180 --> 00:19:08.420
 Ähm, genau.

00:19:08.420 --> 00:19:10.880
 Ja, äh, im Prinzip bin ich damit schon fertig.

00:19:10.880 --> 00:19:12.300
 Also ich, ich verwende das so.

00:19:12.300 --> 00:19:19.520
 Vielleicht gibt es dafür noch was Eleganteres oder, oder was, äh, was anderes, äh, was, was irgendwie für, für meinen Use Case da besser ist.

00:19:19.520 --> 00:19:23.320
 Äh, ich fand es ganz interessant rauszufinden, dass es eigentlich für was ganz anderes ist.

00:19:23.320 --> 00:19:25.700
 Mit Scrolls, Snap Points habe ich auch schon mal rumgespielt.

00:19:25.700 --> 00:19:32.960
 Vielleicht, wenn in 500 Jahren die neue Version von meiner eigenen Homepage fertig ist, dann seht ihr das da vielleicht auch im Einsatz.

00:19:32.960 --> 00:19:38.840
 Ich finde es nämlich eine ganz nette Geschichte, wenn man, wenn man so seitenweise, ähm, den, den Content scrollen kann.

00:19:38.840 --> 00:19:41.140
 Also das kann, das kann ein ganz geiler Effekt sein.

00:19:41.140 --> 00:19:51.320
 Äh, das wird teilweise auch eingesetzt, um, ähm, so, sagen wir mal, ja, was, äh, Slider, Slider, ähm, Animationen ohne JavaScript zu machen, beispielsweise.

00:19:51.320 --> 00:19:53.000
 Da kann man das ganz gut einsetzen.

00:19:53.160 --> 00:19:57.120
 Das ist ja so der Klassiker, irgendwie so ein, so ein Image Slider auf einer, auf einer Seite oben.

00:19:57.120 --> 00:20:02.540
 Und dann, äh, snappt das immer schön, wenn man scrollt, dahin auf die, auf die einzelnen Bilder oder so.

00:20:02.540 --> 00:20:03.020
 Genau.

00:20:03.020 --> 00:20:06.820
 Aber damit bin ich fertig mit der Property der Woche.

00:20:06.820 --> 00:20:07.760
 Cool.

00:20:07.760 --> 00:20:10.280
 Und, äh, freue mich aber auch noch auf die Anmerkungen von euch.

00:20:10.280 --> 00:20:12.060
 Ah, äh, alles klar.

00:20:12.060 --> 00:20:15.780
 Freue mich auf die, auf Anmerkungen, ähm, äh, bezüglich dessen.

00:20:15.780 --> 00:20:21.080
 Und vielleicht gibt's da noch einen besseren Weg, äh, um den Effekt mit den fixen Containern und den Ankerlinks zu erreichen als das.

00:20:21.080 --> 00:20:25.320
 Und jetzt, äh, dürfte der nächste Teil kommen, glaube ich.

00:20:25.360 --> 00:20:25.980
 Wir haben wieder was gelernt.

00:20:25.980 --> 00:20:27.800
 Und jetzt, äh, kommt erst mal Werbung.

00:20:29.500 --> 00:20:50.460
 Gebrochene, schräge Zähne, setze es auf und bekommst wunderschönes Lächeln.

00:20:50.820 --> 00:20:57.100
 Abmelden für schräge Zähne, temporäre Zahnbrücke, sofort verschönert deine äußere Zahndeckung in zwei Minuten.

00:20:57.100 --> 00:21:00.480
 So verbessere dein Lächeln mit brandneuem Mittel.

00:21:00.480 --> 00:21:05.160
 Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator.

00:21:05.160 --> 00:21:07.400
 Abmelden.

00:21:07.400 --> 00:21:07.940
 Abmelden.

00:21:07.940 --> 00:21:10.660
 Diese Dramatik, Wahnsinn.

00:21:10.660 --> 00:21:11.580
 Das ist eigentlich der letzte Teil der Band.

00:21:11.580 --> 00:21:14.000
 Und weiter geht's.

00:21:14.000 --> 00:21:18.520
 Hier ist WWS IV mit dem Tagesthema.

00:21:20.820 --> 00:21:25.400
 Guten Abend, meine Damen und Herren.

00:21:25.400 --> 00:21:29.720
 Heute geht es um, ja, wolltest du was sagen?

00:21:29.720 --> 00:21:30.620
 Nein, nein, nein.

00:21:30.620 --> 00:21:39.560
 Es geht heute um ein Thema, zu dem wir beide auf den CSS Days 2017 in Amsterdam einen Talk gehört haben.

00:21:39.560 --> 00:21:42.620
 Beziehungsweise es waren sogar zwei Talks, habe ich jetzt dann beim Vorbereiten gemerkt.

00:21:42.620 --> 00:21:48.080
 Das war mir gar nicht mehr so bewusst, dass das sogar zwei Speaker unabhängig voneinander besprochen haben.

00:21:48.980 --> 00:21:51.420
 Es geht um CSS Houdini.

00:21:51.420 --> 00:21:54.180
 Und ich möchte die Talks auch kurz noch erwähnen.

00:21:54.180 --> 00:21:57.500
 Das war einmal Philip Wharton, Houdini and Podi Filling CSS.

00:21:57.500 --> 00:22:02.960
 Da gibt es einen Link dazu als Video zu dem Talk und die entsprechenden Slides dazu.

00:22:02.960 --> 00:22:07.400
 Und das gleiche auch von Tab Atkins, The Far Future of CSS.

00:22:08.400 --> 00:22:10.940
 Und die Links dazu gibt es natürlich in den Shownotes.

00:22:10.940 --> 00:22:20.200
 Und wer irgendwie sich ein bisschen doof anstellt wie ich, wenn man diese Slides öffnet, dann muss man mit den Pfeiltasten auf der Tastatur weiterschalten oder zurück.

00:22:20.200 --> 00:22:22.660
 Also ist, glaube ich, bei PowerPoint Slides auch so.

00:22:22.660 --> 00:22:26.400
 Aber ich bin, ich habe mich irgendwie, ich stand da wieder Ochs vor dem Berg und habe gedacht, so wie komme ich denn jetzt?

00:22:26.400 --> 00:22:34.660
 Ich habe damit gerechnet, ehrlich gesagt, dass ich mit, was du vorhin angesprochen hast, mit diesen Slide Points da irgendwie mit dem Mausrad hinscrollen kann.

00:22:34.660 --> 00:22:35.860
 Aber das funktioniert nicht.

00:22:35.860 --> 00:22:37.260
 Scroll Snap.

00:22:37.260 --> 00:22:38.640
 Scroll Snap, ja, danke.

00:22:38.640 --> 00:22:40.840
 Aber Keyboardtasten funktionieren.

00:22:42.840 --> 00:22:45.080
 Ah, ich habe gerade dein Emoji gesehen.

00:22:45.080 --> 00:22:46.140
 Was?

00:22:46.140 --> 00:22:48.600
 An einer Stelle kann ich es sehen.

00:22:48.600 --> 00:22:50.040
 Ist egal.

00:22:50.040 --> 00:22:53.220
 Das ist, das ist, den können wir jetzt nicht, den können wir jetzt nicht erklären.

00:22:53.220 --> 00:22:53.840
 Ja, bei Jitsi.

00:22:53.840 --> 00:22:57.640
 Okay, aber freut mich, dass es dich freut.

00:22:57.640 --> 00:22:59.460
 Gut.

00:22:59.460 --> 00:23:00.420
 Jedenfalls, als ich das.

00:23:00.420 --> 00:23:07.700
 Also für alle, die es noch nicht wussten, man kann bei Jitsi, falls das schon mal jemand verwendet hat, man kann bei Jitsi als Nutzernamen Emojis verwenden.

00:23:08.300 --> 00:23:16.080
 Und der Konstantin hat, da gehen aber komischerweise nicht alle, der Konstantin hat aber eins gefunden, das irgendwie in dieser Ansicht geht, das kann dann lustig aussehen.

00:23:16.080 --> 00:23:17.880
 Ja, jetzt weiter mit dem Harald Houdini.

00:23:17.880 --> 00:23:20.820
 Jedenfalls, aber das bringt mir eine gute Überleitung.

00:23:20.820 --> 00:23:29.980
 Als ich das Thema nämlich vorgeschlagen habe, für die heutige Sendung Houdini, da war deine Begeisterung nicht so groß wie für dieses Emoji gerade eben.

00:23:29.980 --> 00:23:32.600
 Also die hielt sich eher in Grenzen.

00:23:32.600 --> 00:23:44.240
 Und vielleicht kannst du mal kurz, bevor ich jetzt sage, was du mir geschrieben hast, in eigenen Worten kurz wiedergeben, ohne vorwegzunehmen, was Houdini ist, was dich da jetzt dran gestört hat.

00:23:44.240 --> 00:23:47.900
 Na, gestört.

00:23:49.820 --> 00:23:52.920
 Ohne vorwegzunehmen, was es ist, ohne zu sagen, um was es geht.

00:23:52.920 --> 00:23:54.660
 Okay, ich versuche es mal.

00:23:54.660 --> 00:23:56.280
 Jetzt hast du mich echt eiskalt erwischt.

00:23:56.280 --> 00:23:59.480
 Wir sollten, es ist gut, gut, dass wir die Sendung nicht besser vorbereiten.

00:23:59.480 --> 00:24:07.340
 Es gibt immer mal wieder, also Houdini fühlt sich für mich ein bisschen an wie XHTML 2.0.

00:24:08.720 --> 00:24:10.520
 Das ist irgendwie schon lange unterwegs.

00:24:10.520 --> 00:24:19.280
 Das ist, sagen wir mal so, oder ein Teil des Weges von XHTML 2.0, weil der Weg von XHTML 2.0 ist zu Ende, für die, die es nicht wissen.

00:24:19.280 --> 00:24:30.260
 Das war mal so die Idee, das Web voranzubringen mit einem neuen HTML-Standard, der sehr, sehr streng ist und der zum Beispiel auch Fehler wirft.

00:24:30.320 --> 00:24:32.400
 Wenn ich irgendwie einen Fehler in meinem Code habe, dann sehe ich gar nichts.

00:24:32.400 --> 00:24:42.080
 Also nicht diese schöne Fehlertoleranz, die wir in den Browsern haben, sondern ein kleiner, irgendwie eine spitze Klammer fehlt und dein Browser fliegt auf die Schnauze und sagt, nee, ich mache nichts mehr.

00:24:42.080 --> 00:24:50.520
 Das ist ganz interessant, dass du die Analogie bringst, weil die auch in dem einen Talk, ich weiß jetzt leider nicht mehr, welcher von beiden das war, genauso gebracht wird.

00:24:50.520 --> 00:24:52.480
 Also da wird das auch angeführt.

00:24:52.480 --> 00:24:54.480
 Wir wollen nochmal kurz den Anfang angucken.

00:24:54.480 --> 00:24:55.240
 Ach, das ist interessant.

00:24:55.240 --> 00:25:04.960
 Also vielleicht ist der Gedanke dann ganz tief jetzt drei Jahre in meinem Hirn vergraben gewesen, aber das war jetzt das Erste, was mir eingefallen ist, war so, ohne jetzt vorwegzunehmen, um was es geht.

00:25:04.960 --> 00:25:08.460
 Es ist für mich so was, das ist eine coole Idee.

00:25:08.460 --> 00:25:14.280
 Es dümpelt jetzt schon seit einigen Jahren vor sich hin.

00:25:14.280 --> 00:25:16.720
 Ich weiß nicht genau, wie der Browser-Support ist.

00:25:16.720 --> 00:25:26.600
 Ich habe bisher noch keine richtig geilen Anwendungsfälle gesehen, wo ich sagen würde, das bringt jetzt den Durchbruch, das ist jetzt das Ding für Houdini.

00:25:26.600 --> 00:25:28.440
 Genau das wollte ich hören.

00:25:28.440 --> 00:25:33.120
 Ich bin einfach noch nicht überzeugt, dass das wirklich noch was wird.

00:25:33.120 --> 00:25:42.520
 Die Idee finde ich, ich finde die Idee an sich super, aber mir hat noch keiner ein Beispiel zeigen können, wo ich gesagt hätte, das ist jetzt, das muss man jetzt haben.

00:25:42.780 --> 00:25:55.040
 Okay, alles klar. Dann wollen wir uns erstmal anschauen, was denn Houdini überhaupt ist und dann kann ich mal noch sagen, was meine Einschätzung so ist und dann können wir vielleicht noch ein bisschen diskutieren und ein kleines Fazit ziehen.

00:25:55.040 --> 00:26:04.320
 Das wird jetzt natürlich nicht ganz so schön dynamisch, wie das beim letzten Mal war, als wir da zusammen das Thema vorbereitet haben, sondern wird eher so ein bisschen vortragsmäßig.

00:26:04.320 --> 00:26:14.160
 Ich glaube, ich werde auch zwischendrin ein bisschen was trinken müssen, bevor meine Stimme dann wieder weg ist, aber unterbrich mich gern mit Ergänzungen und Korrekturen oder auch vielleicht Fragen, aber bitte nicht zu tiefen Fragen.

00:26:14.160 --> 00:26:15.280
 Ich weiß ja darüber gar nichts.

00:26:15.280 --> 00:26:16.300
 Ja, dann ist gut.

00:26:16.300 --> 00:26:25.120
 Ich bin ja der gemeine Kritiker, der einfach nur sagt, es ist doch alles blöd und du sagst mir jetzt, warum es vielleicht nicht blöd ist oder vielleicht kommen wir am Ende zum Ergebnis, dass es doch blöd ist.

00:26:25.120 --> 00:26:42.920
 Ja, dann auch noch an der Stelle, weil du sagst, ich weiß ja eigentlich gar nichts. Also Disclaimer, ich bin jetzt absolut nicht der Houdini-Profi. Ich habe mir das jetzt für die Sendung angeeignet, weil ich, das kann man vielleicht auch noch sagen, damals da rauskam aus dem Fall und dachte, wow cool, das muss ich mir unbedingt näher anschauen.

00:26:44.180 --> 00:27:04.980
 Und ich habe es irgendwie seitdem nicht geschafft, aber ich habe so mitgenommen, dass so die Speaker, die waren so, wow, das nächste große Ding und total cool und die waren, also auch andere Talks, ich verlinke auch noch ein paar in den Shownotes, die ich mir zum Thema angeschaut habe, die sind alle sehr energiereich und sehr, wow, das wird das Ding.

00:27:05.240 --> 00:27:15.460
 Und ja, deswegen nur vorweg, also ich hoffe, ich sage nichts Falsches und ich werde auch sicherlich nur an der Oberfläche kratzen, aber ja, möchte mich nicht als Houdini-Profi hinstellen.

00:27:15.460 --> 00:27:33.180
 Ja, das muss man sagen, Tab Atkins, ich habe mich dort beim CSS Day damals auch noch ein bisschen mit dem unterhalten und da hat man schon gemerkt, der ist, also der arbeitet bei Google, wenn ich das noch richtig weiß und ist bei Google auch hauptsächlich damit beschäftigt, so sich neue Sachen fürs Web auszudenken.

00:27:33.180 --> 00:27:34.880
 Ich glaube, das war auch sein Talk dann, ja.

00:27:34.880 --> 00:27:57.800
 Der schwebt in ganz, ganz anderen Sphären als Web-Developer, als wir Web-Developer. Der schwebt so im, der ist quasi uns zehn Jahre voraus, hatte ich so das Gefühl, mindestens fünf, vielleicht sogar zehn. Also der denkt, der versucht das Web zu denken, der versucht sich Standards auszudenken, was könnte sinnvoll sein, was kommt, was, also aus der Browser-Hersteller-Sicht.

00:27:58.740 --> 00:28:10.040
 Aber, also wirklich extrem weit weg von uns. Also der hat, der hat auch gesagt, ja, mit der Anwendung, da braucht der mir irgendwie gar nicht kommen, da kenne ich mich nicht aus, aber hier neue Sachen.

00:28:10.720 --> 00:28:21.800
 Also wie gesagt, ich habe mich mit dem unterhalten und habe im Prinzip, ich stand so ein bisschen nebendran und dachte so, krass, es gibt Leute, die sich auf diesem Level irgendwie mit dem Web beschäftigen, sowas, das hatte ich halt noch nie erlebt.

00:28:21.920 --> 00:28:33.160
 Also wirklich, ich will jetzt nicht sagen, anwendungsfern, das ist vielleicht unfair, das zu sagen, aber in den Gedanken extrem weit voraus.

00:28:33.160 --> 00:28:40.320
 Und ich glaube, bei solchen Sachen muss man auch immer damit rechnen, naja, nicht alles, was so weit voraus gedacht ist, kommt auch zum Ziel.

00:28:40.320 --> 00:28:44.820
 Also ich bin gespannt, was du uns jetzt erzählst und wie dein Fazit dann am Ende ist.

00:28:44.820 --> 00:28:52.680
 Genau, also fangen wir doch erstmal an, was ist denn Houdini? Also Houdini ist ein Set von High-Level- und Low-Level-RPs für CSS.

00:28:52.680 --> 00:28:56.380
 Das heißt, es erlaubt uns, CSS zu erweitern.

00:28:56.380 --> 00:28:59.680
 Und was für Vorteile haben wir dadurch?

00:28:59.680 --> 00:29:05.900
 Es ist in den letzten Jahren ja immer so gewesen, dass JS-Feature-Entwicklung unheimlich an Fahrt aufgenommen hat.

00:29:05.900 --> 00:29:11.680
 Also es geht immer schneller, bis Feature-Vorschläge, Drafts tatsächlich den Weg in den Browser finden oder in die Browser finden.

00:29:11.680 --> 00:29:18.980
 Und bei CSS ist es so, dass Features immer noch unglaublich lange brauchen, vom Draft bis zum breiten Browser-Support.

00:29:18.980 --> 00:29:22.420
 Und ich meine, das sieht man allein schon beim Draft von Houdini selbst.

00:29:22.420 --> 00:29:30.520
 Ich habe mal geguckt, das Repository für die Drafts, wo die drin gespeichert werden, das wurde am 30. Dezember 2014 angelegt.

00:29:31.400 --> 00:29:39.660
 Das heißt, wenn man mal 2015, wo dann das so langsam angelaufen ist, dass sie die Drafts entwickelt haben, dann sind wir trotzdem bei über fünf Jahren, in denen das jetzt schon entwickelt wird.

00:29:39.660 --> 00:29:48.540
 Und so zum Vergleich mal, Flexbox waren sieben Jahre in der Entwicklung, Grid-Layout fünf Jahre, bis es tatsächlich im Browser-Nutzer war.

00:29:48.540 --> 00:29:51.400
 Also das sind schon extrem lange Zeiten.

00:29:51.400 --> 00:29:56.120
 Und ein anderer Vorteil ist die Performance.

00:29:58.260 --> 00:30:02.960
 Normalerweise ist es so, wenn die Funktionalität nicht vorhanden ist im CSS, dann mache ich es halt per JavaScript.

00:30:02.960 --> 00:30:07.840
 Das heißt, ich bastle mir da selber irgendwas zurecht und frage irgendwelche Werte ab und schiebe irgendwas rum.

00:30:07.840 --> 00:30:15.800
 Das Ganze passiert aber erst nach dem Lesen des DOM, des Document Object Models, und nachdem das CSS angewendet wurde.

00:30:15.800 --> 00:30:22.960
 Das heißt, das CSS wird angewendet und dann arbeite ich im Main-Thread des Browsers, mache mit JavaScript meine Dinge,

00:30:23.100 --> 00:30:27.760
 verändere irgendwelche Styles und die Änderungen müssen dann wiederum neu gerendert werden.

00:30:27.760 --> 00:30:31.060
 Das heißt, ich habe nochmal einen Render-Zyklus, den ich eigentlich gar nicht bräuchte.

00:30:31.060 --> 00:30:38.180
 Sieht man dann auch in irgendwelchen Wackeln oder irgendwelchen Sachen, die da rumspringen, weil das erst nachträglich dann eben gerendert wird.

00:30:39.140 --> 00:30:43.200
 Und um das noch besser zu verstehen, muss man vielleicht mal einen kleinen Exkurs machen,

00:30:43.200 --> 00:30:49.500
 deswegen, weil du meintest, dass das für dich ganz andere Sphären sind, in denen er da gesprochen hat

00:30:49.500 --> 00:30:56.000
 und in denen der auch der Blickwinkel, aus dem er eben diese Browser-Geschichte und das Style-Sheet betrachtet.

00:30:57.020 --> 00:31:02.280
 Es war für mich ganz interessant, mal zu gucken, wie denn das Rendern im Browser eigentlich abläuft.

00:31:02.280 --> 00:31:05.980
 Ich stelle das natürlich jetzt hier nur ganz stark vereinfacht und oberflächlich dar.

00:31:05.980 --> 00:31:08.960
 Einerseits, weil man daraus wahrscheinlich eine ganze Sendung füllen könnte

00:31:08.960 --> 00:31:13.680
 und außerdem, weil ich es auch selber nur an der Oberfläche gekratzt habe und da jetzt nicht so tief drin bin.

00:31:13.680 --> 00:31:19.840
 Aber das war mal ganz cool, sich das mal anzuschauen, weil ich glaube, dass viele Entwickler sich da gar nicht so die Gedanken drum machen.

00:31:19.840 --> 00:31:23.660
 Die beherrschen vielleicht ihre Handwerkstools, ihr JavaScript und ihr CSS ganz gut,

00:31:23.660 --> 00:31:25.680
 wissen aber gar nicht, was da im Browser so abläuft.

00:31:25.680 --> 00:31:31.400
 Und wir haben ganz grob, teilt man das mal ein in vier Prozesse, die da ablaufen.

00:31:31.400 --> 00:31:38.640
 Wir haben einmal die Kaskade oder das Parsing der Kaskade, dann das Layout, Paint und Composite.

00:31:38.640 --> 00:31:42.980
 Kaskade steckt ja schon im Namen Cascading Style Sheets.

00:31:42.980 --> 00:31:49.960
 Das heißt, wir haben unterschiedlich spezifische Regeln, die vom Parser erstmal von oben nach unten abgearbeitet werden müssen,

00:31:50.180 --> 00:31:56.960
 geguckt werden muss, was hat denn jetzt die Spezifizität, die ich in dem Fall auch tatsächlich anwenden muss.

00:31:56.960 --> 00:31:59.900
 Dann haben wir das Layout.

00:31:59.900 --> 00:32:03.100
 Das heißt, da wird geguckt, wie sind denn die ganzen Boxen.

00:32:03.100 --> 00:32:09.900
 Wir arbeiten ja in HTML und CSS immer mit Boxen, auch wenn wir einen Border Radio setzen, aber das sind eigentlich nur Kästchen.

00:32:09.900 --> 00:32:11.280
 Wie sind die positioniert?

00:32:11.280 --> 00:32:15.600
 Also Floating, wenn man noch ein floatbasiertes Layout hat, Position Absolute oder Relative.

00:32:16.060 --> 00:32:17.580
 Wie verhalten sich die Boxen zueinander?

00:32:17.580 --> 00:32:25.000
 Und Stichwort Reflow, der wird eben getriggert bei Layout-Änderungen und das hat dann Einfluss auf die Performance natürlich.

00:32:25.000 --> 00:32:32.660
 Da hatten wir es auch vorhin kurz anhand von deinem Tweet, dass Transitions besser sind als Margins.

00:32:32.660 --> 00:32:39.560
 Kann ich vielleicht, ja, kann man vielleicht auch kurz noch ausführen, wenn ich gleich zu den Layern komme.

00:32:40.080 --> 00:32:53.880
 Und dann geht es eben noch als drittes Painting, das heißt, da werden Farben, Hintergründe, Border, aber auch Grafiken, also Hintergrundgrafiken und Verläufe, die ja auch intern als Grafik umgerechnet werden müssen, die werden da generiert.

00:32:54.440 --> 00:33:00.080
 Und als Bitmaps in die GPU geladen, also in den Grafikprozessor.

00:33:00.080 --> 00:33:06.960
 Und da habe ich dann verschiedene Layer, die am Schluss beim Compositing miteinander verschmolzen werden.

00:33:06.960 --> 00:33:12.860
 Und die Transitions, die Transforms, die sorgen dafür, dass diese Layer einfach nur zueinander verschoben werden.

00:33:12.860 --> 00:33:15.180
 Das heißt, da müssen einfach nur Bilder gegeneinander verschoben werden.

00:33:15.720 --> 00:33:16.940
 Ganz einfach gesprochen jetzt.

00:33:16.940 --> 00:33:21.740
 Und wenn ich das mit Margin mache, dann triggere ich dadurch ein Reflow.

00:33:21.740 --> 00:33:24.000
 Das hat natürlich größere Einbußen dann bei der Performance.

00:33:24.000 --> 00:33:27.720
 Genau, das war so im Großen und Ganzen, was da passiert.

00:33:27.720 --> 00:33:31.840
 Jetzt nur vom CSS, vom Rendern abgesehen, was da gemacht wird.

00:33:32.360 --> 00:33:42.680
 Und da bin ich auf eine Seite gestoßen, ganz interessant, wo man sehen kann, csstriggers.com, wo man sehen kann, welches Property welchen dieser Bereiche triggert.

00:33:42.680 --> 00:33:49.920
 Und da sieht man auch ganz schön, dass das Engine abhängig passiert, da die verschiedenen Browser-Engines unterschiedlich optimieren.

00:33:49.920 --> 00:33:59.380
 Also wie die ihre Layer so zusammenstückeln und was die da machen und vielleicht noch für Optimierungen bauen, um das dann an die Grafikkarte zu übergeben, das ist tatsächlich unterschiedlich.

00:33:59.380 --> 00:34:06.720
 Also wenn ich jetzt ein CSS-Property ändere, dann muss vielleicht der Firefox einen kompletten Reflow machen, während Chrome das andersrum macht.

00:34:06.720 --> 00:34:12.860
 Ich habe aber, glaube ich, auch Fälle gesehen, wo das jetzt gar nicht, um zu sagen, dass Firefox schlechter ist, sondern wo das Firefox vielleicht besser macht.

00:34:12.860 --> 00:34:16.540
 Also da haben einfach die verschiedenen Browser verschiedene Optimierungsmöglichkeiten.

00:34:16.540 --> 00:34:18.900
 Fand ich interessant, habe ich so vorher auch nicht gewusst.

00:34:18.900 --> 00:34:27.300
 Also klar, dass die unterschiedlich optimieren schon und deswegen unterschiedliche Geschwindigkeiten haben, aber dass das wirklich bei den Properties auch unterschiedlich gehandhabt wird, fand ich interessant.

00:34:27.300 --> 00:34:35.160
 Und vielleicht kann man diese Seite auch nutzen, um sich so mal zu überlegen, wenn ich mehrere Properties habe, mit denen ich ans gleiche Ziel komme, was ist denn vielleicht performanter.

00:34:35.160 --> 00:34:36.940
 Aber das mal nur ganz am Rande.

00:34:36.940 --> 00:34:44.520
 Wenn das mehr interessiert und da ein bisschen mehr in die Tiefe gehen will, auch nicht nur auf CSS bezogen, sondern so, was da noch bei JS-Parsing abläuft und so,

00:34:45.140 --> 00:34:50.680
 Da gibt es einen Talk von Ryan Seddon von der JS-Conf EU 2015.

00:34:50.680 --> 00:34:54.140
 So, how does the browser actually render a website?

00:34:54.140 --> 00:35:03.240
 Da gibt es natürlich auch den Link in unseren Shownotes und wer sich das direkt anhören will und unseren Podcast zum Beispiel pausieren will.

00:35:03.240 --> 00:35:15.480
 Ab Minute 11.35 geht es speziell um CSS und ab 16.15 gibt es was ziemlich cooles und zwar eine verlangsamte Darstellung am Beispiel der Gecko-Engine, wie die das Layout generiert.

00:35:15.480 --> 00:35:22.940
 Und da sieht man dann, wie die Elemente und deren Child-Elemente so aufplöppen und die Rahmen sich aufziehen, auch noch so in verschiedenen Farben.

00:35:23.440 --> 00:35:26.160
 Das sieht ganz cool, ganz interessant aus, das mal zu sehen.

00:35:26.160 --> 00:35:30.200
 Natürlich sehr stark verlangsamt, weil eigentlich macht es zack und die Seite ist da.

00:35:30.200 --> 00:35:34.240
 Aber im Hintergrund passiert ja ganz arg viel, worüber man sich so keine Gedanken macht.

00:35:34.240 --> 00:35:44.540
 Genau, also das DOM und das CSS-OM, Cascading Style Sheets Object Model, werden generiert.

00:35:44.540 --> 00:35:51.560
 Das heißt, so wie wir DOM-Nodes kennen, wird natürlich auch das CSS in irgendeiner Form intern handelbar als Baum abgespeichert.

00:35:52.700 --> 00:35:59.960
 Beides ist im sogenannten Render-Tree vereint, aber die beiden DOMs sind völlig unabhängig voneinander.

00:35:59.960 --> 00:36:03.820
 Und JavaScript hat eben kaum Zugang zum CSS-OM.

00:36:03.820 --> 00:36:18.940
 Und Houdini kommt genau da ins Spiel, weil wir mit Houdini direkt Änderungen auf die Style-Änderungen im CSS-Object-Model anwenden können.

00:36:19.120 --> 00:36:28.580
 Also wir müssen nicht den Umweg gehen, da jetzt das Style-Attribut per JavaScript irgendwie zu modifizieren, sondern das kann direkt bei den Berechnungen des CSS-Object-Models schon passieren.

00:36:28.580 --> 00:36:34.060
 Das heißt, wir schreiben quasi CSS-Poly-Fills statt JavaScript-Poly-Fills.

00:36:35.720 --> 00:36:44.480
 Allerdings denkt man jetzt vielleicht, wenn das jetzt doch wieder JavaScript ist, dann ist ja, die Performance kann ja gar nicht besser sein, weil dann wird das ja doch wieder erst nachträglich.

00:36:44.980 --> 00:36:49.300
 Aber die meisten Houdini-APIs, die laufen in sogenannten Worklets.

00:36:49.300 --> 00:36:54.740
 Das sind, kann man sich vorstellen, das ist abgespeckte Version von Web-Workern, falls das jemandem was sagt.

00:36:54.740 --> 00:36:58.320
 Das heißt, das sind eigene Prozesse, die im Hintergrund laufen.

00:36:58.320 --> 00:37:05.680
 Web-Worker braucht man zum Beispiel bei Progressive Web-Apps, wenn man da irgendwie Daten asynchron laufen lassen will.

00:37:06.360 --> 00:37:07.740
 Moritz hat einen kleinen Einwand.

00:37:07.740 --> 00:37:10.860
 Ich habe eine kleine Frage an der Stelle.

00:37:12.820 --> 00:37:21.340
 Du sagst, also irgendwie in irgendeiner Form liegt da Code vor, der an eine andere Stelle in den Browser geladen wird, als das normalerweise der Fall ist.

00:37:21.340 --> 00:37:22.860
 Habe ich das so gesagt?

00:37:22.860 --> 00:37:23.440
 Habe ich das richtig verstanden?

00:37:23.440 --> 00:37:26.160
 Nein, nein, ich frage gerade, was das so ist.

00:37:26.160 --> 00:37:42.560
 Also du registrierst, ich meine klar, das JavaScript muss geladen werden, muss man halt dann schauen, dass man die, beziehungsweise vielleicht machen, dass die Browser auch automatisch, wobei sie das beim Parsen eigentlich nicht können, aber dass sie diese Web-Worker, die muss man eben gucken, dass die vorher geladen werden, bevor das Rendering stattfinden kann, ja.

00:37:42.820 --> 00:37:49.120
 Okay, aber letzten Endes werden da ja irgendwie in irgendeiner Form Daten von A nach B geschickt, genauso wie bei jedem anderen Request auch.

00:37:49.120 --> 00:37:55.700
 Da frage ich mich, wie das dann, also ich meine klar ist das wahrscheinlich schneller, als wenn ich irgendwas mit JavaScript ausführen will.

00:37:55.700 --> 00:37:57.020
 Das ist keine Frage.

00:37:57.380 --> 00:38:08.380
 Aber ich habe einen extra Request, der irgendwo läuft, mit extra Code, der irgendwie von A nach B geht, der ja auch erst dann geladen werden kann, sobald der Browser auf der Seite an die Stelle gekommen ist.

00:38:08.380 --> 00:38:11.640
 Oder ist das was, was irgendwie auf einem anderen Weg geladen wird?

00:38:11.640 --> 00:38:21.660
 Also steht der Code, ist der irgendwie referenziert im HTML oder irgendwas davon, also irgendwie in dem JavaScript wiederum, was im HTML referenziert ist?

00:38:21.660 --> 00:38:23.340
 Oder ist das ein anderer Weg, den das geht?

00:38:23.340 --> 00:38:26.380
 Das ist wie bei Web-Workern auch, wenn ich das richtig weiß.

00:38:26.380 --> 00:38:35.020
 Also du lädst natürlich eine JavaScript-Datei rein, die dir dann die entsprechenden Worklets für Houdini spezifiziert und reinlädt.

00:38:35.020 --> 00:38:53.360
 Das heißt also für mich, wenn es jetzt um richtig schnelle Performance geht, also quasi Dinge, die ich vielleicht bräuchte, um das initiale Anzeigen der Seite schon zu beeinflussen, dann ist das vielleicht eher nichts, weil das vielleicht eher, weil das einen Bruchteil von einer Sekunde braucht, bis das da ist und dann vielleicht irgendwie umspringt.

00:38:53.360 --> 00:38:55.100
 Oder verstehe ich das falsch?

00:38:55.100 --> 00:39:01.900
 Naja gut, das Umspringen und das längeren Laden hast du ja auch mit JS-Fallbacks.

00:39:03.240 --> 00:39:17.860
 Also das hast du ja im Status Quo sowieso schon und du musst wahrscheinlich mehr JavaScript schreiben aktuell, um irgendwelche Polyfills für CSS zu schreiben, die diverse Umstände berücksichtigen, als du später mit dem, was da spezifiziert ist, in Houdini machen wirst.

00:39:17.860 --> 00:39:25.440
 Okay, aber so performant wie echtes CSS, wo der Browser schon weiß, was er damit zu tun hat, ist es natürlich wahrscheinlich nicht.

00:39:25.920 --> 00:39:39.240
 Vermutlich nicht, nee. Aber wenn ich so die Talks höre, dann scheint so die Performance, der Performance-Gewinn, gerade wenn man recht viel auf der Seite macht, scheint schon extrem hoch zu sein, im Vergleich zu, ich muss das Ganze jetzt nochmal neu rendern.

00:39:40.660 --> 00:39:44.200
 Okay, aber Performance-Gewinn gegenüber JS-Polyfills für CSS?

00:39:44.200 --> 00:39:46.420
 Ja.

00:39:46.420 --> 00:39:49.280
 Okay, ja. Okay, gut, ja, da kann ich mich drauf einlassen.

00:39:49.280 --> 00:39:54.840
 Ja, wobei nicht nur zum Thema Polyfills, ja, also, ja, kann man vielleicht später noch was dazu sagen an einer anderen Stelle.

00:39:55.600 --> 00:39:55.900
 Okay.

00:39:55.900 --> 00:40:04.880
 Genau, also, das sind eben diese, die Worklets sind vergleichbar mit Webworkern, die laufen in eigenen Prozessen und der Browser kann die auch zwecks Performance starten und stoppen.

00:40:04.880 --> 00:40:16.780
 Das ist vielleicht auch noch ganz wichtig zu wissen, also, das muss ja trotzdem performant laufen, ich kann ja jetzt nicht im Hintergrund irgendwie fünf Tasks da noch parallel laufen lassen, das zum Thema Performance, also, der Browser kann das selber handeln, wie er die startet und stoppt.

00:40:19.600 --> 00:40:22.220
 Genau, noch irgendwelche Anmerkungen?

00:40:22.220 --> 00:40:26.060
 Nee, nee, mach ruhig weiter, ich hab, die fiesen Fragen kommen noch.

00:40:26.060 --> 00:40:27.960
 Oh, oh, oh, ich fang schon an zu schwitzen hier.

00:40:27.960 --> 00:40:30.740
 Das ist aber wegen dem Getränk, oder?

00:40:30.740 --> 00:40:32.360
 Ja, es ist auch extrem warm hier.

00:40:32.360 --> 00:40:34.560
 Äh, okay, weiter.

00:40:34.560 --> 00:40:35.880
 Ist dunkel geworden jetzt bei dir?

00:40:35.880 --> 00:40:39.800
 Ja, ziemlich dunkel, ich hab kein Licht mehr grad aktuell, weil ich meine, schreibtisch haben die Brunnen zu arg, ich hab die ausgesteckt.

00:40:39.800 --> 00:40:41.900
 Ach so, dann ist es eigentlich langsam dunkel geworden.

00:40:41.900 --> 00:40:43.320
 Ja, es ist ganz langsam dunkel geworden.

00:40:43.320 --> 00:40:46.840
 Ah, okay, gut, ich merke eben jetzt erst, dass...

00:40:48.840 --> 00:40:50.480
 Ja, du siehst immer noch hervorragend aus.

00:40:50.480 --> 00:40:51.300
 Ach, dankeschön.

00:40:51.300 --> 00:41:04.640
 Aber weiter im Programm, genau, also die verschiedenen APIs, es gibt sieben Stück an der Zahl, die lassen sich einteilen in High-Level APIs, APIs, wie hättet ihr es gerne, Englisch oder Deutsch, wir sind ja deutscher Podcast.

00:41:04.640 --> 00:41:06.480
 Dann sage ich jetzt auch...

00:41:06.480 --> 00:41:06.840
 APIs.

00:41:07.300 --> 00:41:24.760
 Es gibt die Layout API, es gibt die Paint API und die Animation API und es gibt die Low-Label APIs, Typed Object Model, Custom Properties and Values API, Frontmetrics API und eben diese sogenannten Worklets.

00:41:24.760 --> 00:41:27.520
 Das könnt ihr aber auch gleich wieder vergessen, was ist.

00:41:27.640 --> 00:41:30.920
 Ich wollte gerade sagen, du hast mich schon verloren, du hast mich schon komplett verloren.

00:41:30.920 --> 00:41:33.140
 Ich dachte, ich dehne die Sendung noch ein bisschen aus.

00:41:33.140 --> 00:41:36.260
 Wir müssen doch die zwei Stunden irgendwie erreichen.

00:41:36.260 --> 00:41:40.480
 Also, setz da mal eine Kapitelmarke, die kannst du dann nennen, bitte überspringen.

00:41:41.280 --> 00:41:56.080
 Genau, also im Folgenden möchte ich nämlich, das gar nicht jetzt nach irgendwie High- oder Low-Level, das ist für uns als Anwender ja eigentlich völlig wurscht, im Folgenden möchte ich das eher orientieren so an der Reihenfolge der Verarbeitung oder wie das für mich als Entwickler logisch ist.

00:41:56.080 --> 00:42:07.260
 Also, zunächst mal das Typed OM oder Typed Object Model, das ist so einer der absoluten Grundbausteine von Houdini im Austausch zwischen JavaScript und CSS.

00:42:07.840 --> 00:42:32.960
 Also, aktuell ist es ja so, ich lese CSS-Werte aus und dann kriege ich da zurück als String 20px, dann muss ich mir das erstmal irgendwie parsen und muss gucken, was ist jetzt mein Wert, was ist das px, dann rechne ich irgendwas drauf und dann konkateniere ich das am Schluss wieder als String und habe dann 25px als String, übergebe das wiederum dann als Inline-Style und was macht logischerweise der Parser, der das CSS irgendwie verarbeitet?

00:42:32.960 --> 00:42:47.660
 Er passt das schon wieder, muss gucken, welchen Wert, welche Einheit habe ich und das nimmt natürlich Zeit weg. Also, da gibt es auch in dem einen Talk, in dem zweiten müsste das sein, sagt eben dieser Google-Entwickler, dessen Namen ich schon wieder vergessen habe.

00:42:48.240 --> 00:43:01.340
 Tab Atkins, genau, danke, dass sie da intern einen Test gemacht haben und das mal gegeneinander laufen haben lassen. Also, da war das ja 2017 noch lang nicht so für die Öffentlichkeit alles machbar, sondern halt noch in der Entwicklung.

00:43:01.680 --> 00:43:14.120
 Und sie haben da schon mal geguckt, wie viel, was der Performance-Gewinn ist, wenn ich jetzt irgendwie tausende Elemente auf der Seite habe, die einmal mit diesem ganzen Hin- und Herpasen und einmal eben nativ funktionieren, dann war das schon ein ordentlicher Performance-Gewinn.

00:43:14.460 --> 00:43:28.520
 Und ja, ich sehe schon den Moritz so ein bisschen mit dem Auge rollen, aber ja, also, ich meine, Google, also, auf deiner Durchschnittsseite hast du nicht tausende Elemente, aber ich meine, guck dir mal Google Maps an oder Google Earth im Browser, das sind halt schon andere Welten.

00:43:28.660 --> 00:43:33.500
 Also, da macht das halt schon was aus, ob ich da jeweils eine Mikrosekunde irgendwo mir spare oder nicht.

00:43:33.500 --> 00:43:50.420
 Ja, also, die Demos sind halt oft gebaut, also, ich will nicht sagen, dass es keine Anwendungsfälle gibt, also, es gibt einige interessante Sachen in CSS, die in erster Linie für so Geschichten sind, wo ich sehr, sehr viele Dom-Notes habe, dass das dann irgendwie noch performant ist am Ende.

00:43:51.180 --> 00:43:59.960
 Aber für mich klingt das so ein bisschen nach, naja, um zu beweisen, dass das, was wir machen hier cool ist, bauen wir jetzt eine Demo, die genau das sagt.

00:43:59.960 --> 00:44:17.580
 Gut, aber das ist ganz oft, das hatten wir ja auch beim Thema WebGL und WebAssembly, da war das ja auch so ähnlich, du hast diese Riesenprojekte wie eben Google Earth, was ja eben auch auf WebAssembly beruht, und ansonsten hast du lauter Tech-Demos, wo irgendwelche Leute irgendwelches freaky Zeug machen, wo man dann sieht, wie toll das funktioniert.

00:44:18.580 --> 00:44:34.240
 Ich glaube, das ist einfach bei so frühen Techniken, die noch nicht so die Verbreitung gefunden haben, so ein bisschen auch das Henne-Ei-Prinzip oder Paradoxon, du brauchst eigentlich was Cooles, damit Leute sagen, boah, ja, geil, das will ich mir aneignen, damit will ich was machen, ja, und da musst du halt erstmal hinkommen.

00:44:34.240 --> 00:44:41.480
 Und dazu brauchst du aber halt Ideen, also, es muss halt Leute geben, die da kreativ werden und die sich was überlegen, also, ich denke, das werden wir bei Houdini auch sehen.

00:44:41.480 --> 00:44:48.900
 Also, vielleicht machen wir in ein paar Jahren, wenn es dann diese Sendung noch gibt, hoffentlich, nochmal eine Sendung drüber und deine Meinung hat sich geändert.

00:44:48.900 --> 00:44:53.980
 Vielleicht reden wir da ganz anders drüber und sagen, wow, was haben wir nur 2020 ohne Houdini gemacht.

00:44:53.980 --> 00:45:02.180
 Ja, Mensch, oder wieso haben wir nicht 2017 schon damit angefangen und sind jetzt die krassen Houdini-Entwickler mit 20 Jahre Houdini-Erfahrung?

00:45:02.240 --> 00:45:04.400
 Ja, dann haben wir nur 17 Jahre Houdini-Erfahrung.

00:45:04.400 --> 00:45:16.200
 Ja, aber ich meine, es ist ja so wie die Angular-Entwickler mit 20 Jahren Angular-Erfahrung, ne, also, die soll es ja auch gegeben haben werden.

00:45:16.200 --> 00:45:19.340
 Vor allem 20 Jahre Angular 2-Erfahrung.

00:45:22.180 --> 00:45:31.820
 Okay, aber weiter, also, wie gesagt, das Hin- und Herpasen, das nimmt Zeit und ich finde es auch einfach nicht angenehm, also, jedes Mal, wenn ich da irgendwie mit CSS-Values arbeiten muss, nervt das irgendwie.

00:45:31.820 --> 00:45:44.580
 Und ich meine, klar kann ich mir dann das Get-Computed-Rectangle, was weiß ich, und dann habe ich da aber auch nicht die Werte, wie ich sie im CSS stehen lasse, sondern dann hat der Browser da vielleicht auch wieder irgendwas vermurkst.

00:45:44.880 --> 00:45:48.180
 Also, jedenfalls ist es nicht schön, so zu arbeiten. Ich glaube, da sind wir uns einig, oder?

00:45:48.180 --> 00:45:53.060
 Ja, es gibt wenige Dinge, die schön sind.

00:45:53.060 --> 00:46:05.660
 Okay, also, jedenfalls Houdini macht das ganz einfach. Ich mache Element.AttributeStylemap.get und in den Quotes Height und dann bekomme ich zurück ein CSS-Unit-Value.

00:46:05.800 --> 00:46:14.000
 Das ist ein Objekt und auf das kann ich wieder zurückgreifen mit Punkt-Value. Da habe ich dann zum Beispiel die 20 drin und in Punkt-Unit habe ich PX.

00:46:14.000 --> 00:46:25.260
 Und damit lässt sich doch viel besser arbeiten. Da kann ich dann sagen, Punkt-Value++ und dann ist es fertig. Dann schicke ich das Unit-Value wieder hin und die Sache ist gegessen.

00:46:26.420 --> 00:46:36.920
 Ja, das klingt tatsächlich nach einem eleganten, das finde ich sogar fast eleganter, als es derzeit in JavaScript ist, hast du ja gerade eben schon gesagt. Ja, das klingt echt ganz nett an der Stelle.

00:46:36.920 --> 00:46:39.140
 Ja, aber ich glaube, ich müsste echt mal ein echtes Beispiel sehen.

00:46:39.140 --> 00:46:46.460
 Da gibt es nicht nur die CSS-Unit-Values, da gibt es noch diverse andere Values, kommt natürlich auch in die Shownotes, die genauen Spezifikationen dazu.

00:46:46.900 --> 00:46:53.620
 Also ich kriege natürlich auch Bildwerte zurück oder Gradients und so weiter und kann mit denen dann ganz einfach arbeiten.

00:46:53.620 --> 00:46:59.260
 Habe ich mir jetzt zum Beispiel gar nicht angeguckt, wie es bei Farben ist mit den verschiedenen Notationen, wie das dann am Schluss rauskommt.

00:46:59.260 --> 00:47:03.100
 Wäre mir noch interessant gewesen, habe ich jetzt leider nicht vorbereitet.

00:47:03.100 --> 00:47:10.960
 Ja, eine Frage noch an der Stelle. Kann ich damit auch bisher vorhandene CSS-Properties überschreiben?

00:47:10.960 --> 00:47:14.720
 Also kann ich jetzt meine eigene Implementierung von Border-Radius machen oder so?

00:47:15.400 --> 00:47:21.460
 Ja, dazu kommen wir noch. Also das ist tatsächlich der nächste Punkt, wäre dann die Properties and Values API.

00:47:21.460 --> 00:47:25.320
 Ich muss mich jetzt auf irgendwas einigen und ich mische es einfach fröhlich.

00:47:25.320 --> 00:47:25.960
 APY.

00:47:25.960 --> 00:47:28.140
 Genau, die API.

00:47:28.140 --> 00:47:30.580
 Custom-Properties, genau.

00:47:30.580 --> 00:47:36.940
 Ja, damit habe ich zum Beispiel die Möglichkeit, typisierte CSS-Variablen zu schaffen.

00:47:37.580 --> 00:47:57.900
 Ja, also wenn ich so ein Custom-Property definiere, dann gibt es auch so die, ja nicht Spezifikationen, also es gibt so diese, na wie sagt man denn, also es werden zwei Dashs vorangestellt, also minus minus, wie man das ja auch bei CSS-Variablen macht, sodass eben immer das Custom-Zeug von dem Bild in Zeug getrennt ist.

00:47:58.320 --> 00:48:04.200
 Und so kann ich eben dann sagen, ich habe ein Custom-Property minus minus Gradient-Stop.

00:48:04.980 --> 00:48:10.400
 Und das Schöne ist, aktuell sind Gradient-Farben nicht in Transitions verwendbar.

00:48:10.400 --> 00:48:22.640
 Wenn du einen Gradient hast und eine Transition auf dem Element und bei Hover ist der Gradient anders, zum Beispiel bei Buttons hat man das ja vielleicht mal so einen Farbverlauf drauf, dann funktioniert das aktuell nicht.

00:48:23.180 --> 00:48:26.740
 Das macht er einfach plöpp und irgendwann wechselt sich die Farbe im Verlauf der Transition.

00:48:26.740 --> 00:48:41.920
 Und das reicht jetzt tatsächlich mit Houdini aus, dass ich einfach sage, ich definiere diesen Color-Stop in einer Variable, das ist eigentlich keine richtige Variable, aber ich, also Custom-Property eben, und sage, gebe dem gleich mit, das hat den Typ Color.

00:48:42.160 --> 00:48:51.100
 Und dann weiß der Browser, okay, eine Variable von dem Typ Color oder ein Wert von dem Typ Color, den kann ich in einer Transition so und so berechnen.

00:48:51.100 --> 00:49:00.920
 Und da gibt es auch eine Demo, die ich natürlich auch verlinken werde, da reichen wirklich ein paar Zeilen und schubsi-wups sind Gradient-Farben in Transitions verwendbar.

00:49:00.920 --> 00:49:07.200
 Ja, und das ist schon mal ein handfester Beispiel, wo man sieht, dass das schon was bringen kann.

00:49:07.820 --> 00:49:15.820
 Und es gibt noch, ich muss ein paar aufzählen mal, Color, Length, Number, Percentage, Image, URL und Angle, was man ja bei so Rotationen braucht.

00:49:15.820 --> 00:49:17.900
 Das sind jetzt, sind nicht alle, sind nur mal so ein paar.

00:49:17.900 --> 00:49:29.460
 Ja, aktuell, weil wir es da vorhin auch schon drüber hatten, wegen den Ladezeiten, also gerade was die Properties und Values angeht, das wird aktuell noch alles per JavaScript definiert.

00:49:29.460 --> 00:49:36.400
 In Zukunft soll es da aber eine All-in-CSS-Syntax geben mit einem neuen Add-Property-Keyword.

00:49:36.680 --> 00:49:46.200
 Also so wie wir jetzt Add-Media für Media-Queries haben, wird es dann Add-Property geben und dann kann man das mit einer analogen Schreibweise in CSS umsetzen.

00:49:46.200 --> 00:49:49.340
 Und dann kannst du sowas natürlich in deinen Style-Shield einfach mit reinpacken.

00:49:49.340 --> 00:49:52.540
 Und dann hast du dir zumindest, was das angeht, schon mal eine Ressource gespart.

00:49:52.540 --> 00:49:53.880
 Ja, cool.

00:49:53.980 --> 00:50:02.600
 Und du kannst diese APIs ja, du musst ja nicht alles nutzen, also du kannst ja sagen, ich möchte meine Custom-Properties und den Rest brauche ich gar nicht, Animation-API oder sowas brauche ich nicht.

00:50:02.600 --> 00:50:04.600
 Genau.

00:50:04.600 --> 00:50:07.340
 Damit ist zumindest ein Kritikpunkt schon mal wieder weg.

00:50:07.340 --> 00:50:09.720
 Schauen wir mal.

00:50:09.720 --> 00:50:22.460
 Also genau, wir haben jetzt unser CSS, wir haben unsere Custom-Properties und können uns auch oder sollen uns in Zukunft auch, weil zu dieser API gibt es noch keine Spec, in die Parser-API einklinken können.

00:50:23.140 --> 00:50:26.100
 Das heißt, wir können erweitern, was der Parser versteht.

00:50:26.100 --> 00:50:31.780
 Und damit wird natürlich Polyfilling möglich, weil ich sagen kann, okay, das kann der und der Browser nicht.

00:50:31.780 --> 00:50:36.800
 Das lässt sich dann mit Sicherheit auch mit Add-Support entsprechend erkennen.

00:50:36.800 --> 00:50:40.140
 Und dann mache ich das ganze Ding einfach mit einem Polyfill.

00:50:41.580 --> 00:50:54.940
 Und das Schöne ist dann, mit so einer API muss ich jetzt nicht irgendwie selber irgendwelche Strings parsen, wovon wir es jetzt ja gerade hatten mit JavaScript, sondern ich habe eben eine Schnittstelle, der übergebe ich einen String und kriege dann ein Objekt zurück, so wie oben auch, mit dem ich dann arbeiten kann.

00:50:54.940 --> 00:51:09.000
 Und ja, konkrete Anwendungsfälle habe ich jetzt da auch nicht, aber wie gesagt, Polyfilling und es ist auf jeden Fall interessant, die Möglichkeit zu haben, so früh in der Kette eingreifen zu können.

00:51:09.280 --> 00:51:19.400
 Also theoretisch kann ich wahrscheinlich, jetzt sage ich es mal aus dem Bauch heraus, wirklich die CSS, ja die Möglichkeit, die Sprachfeatures, sage ich mal, aufbohren.

00:51:19.400 --> 00:51:22.520
 Und das klingt für mich schon zumindest mal mächtig.

00:51:22.520 --> 00:51:24.700
 Und mächtig finde ich gut.

00:51:24.700 --> 00:51:27.380
 Mächtig?

00:51:27.380 --> 00:51:29.760
 Der nächste Punkt.

00:51:29.760 --> 00:51:32.800
 Ja, das wäre doch was für unsere Twitter-Bildchen.

00:51:32.800 --> 00:51:35.480
 Was mächtig finde ich gut?

00:51:35.480 --> 00:51:39.240
 Das wäre toll, dass wir so Zitate als Twitter-Bildchen mal veröften.

00:51:39.240 --> 00:51:41.080
 Ja, das macht unsere Redaktion da.

00:51:41.080 --> 00:51:44.060
 Genau, unsere fünf Interns.

00:51:44.060 --> 00:51:46.240
 Was haben wir?

00:51:46.240 --> 00:51:47.040
 Unsere virtuellen.

00:51:47.040 --> 00:51:49.120
 Haben wir vier entlassen?

00:51:49.120 --> 00:51:53.540
 Okay, wir machen schon wieder Blödsinn.

00:51:55.720 --> 00:52:00.120
 Die Layout-API ist der nächste Schritt.

00:52:00.120 --> 00:52:06.700
 Default-mäßig haben wir da zum Beispiel den Blockflow, Flexbox oder eben auch Grid-Layout.

00:52:06.700 --> 00:52:12.000
 Und ja, ich habe jetzt die Möglichkeit, ich kann Custom-Layouts schreiben.

00:52:12.000 --> 00:52:16.160
 Und wir hatten vorhin in so einem Vorgeplänkel vor der Sendung, hast du irgendwas gesagt?

00:52:16.220 --> 00:52:19.160
 Und ich habe gesagt, ja, siehste mal, da könntest du jetzt einfach dein Custom-Layout schreiben.

00:52:19.160 --> 00:52:21.000
 Ich weiß gar nicht mehr, um was es ging.

00:52:21.000 --> 00:52:22.300
 Flexbox?

00:52:22.300 --> 00:52:23.200
 Ich weiß nicht mehr genau.

00:52:23.200 --> 00:52:25.500
 Es war irgendwas mit Flexbox und was dann nicht so funktioniert.

00:52:25.500 --> 00:52:29.960
 Und dann habe ich gesagt, siehste, schreib doch dein Custom-Layout, wo du alles genauso machst, wie du es erwartest.

00:52:29.960 --> 00:52:30.880
 Ja, ja, klar.

00:52:30.880 --> 00:52:38.740
 Und darum, da geht er auch, Tab Atkins, jetzt habe ich den Namen sogar abgespeichert, geht er auch in seinem Talk drauf ein.

00:52:38.740 --> 00:52:41.460
 Beziehungsweise, jetzt bin ich mir gar nicht mehr sicher, ob es nicht der andere Talk war, aber ist ja auch egal.

00:52:41.460 --> 00:52:44.220
 Jedenfalls geht einer von den beiden, geht darauf ein.

00:52:44.220 --> 00:52:44.560
 Schaut die Talks.

00:52:44.560 --> 00:52:55.020
 Es gibt neben Flexbox und Grid sicherlich noch ganz viele andere Layout-Modelle, die auch tatsächlich sinnvoll sind und die auch viele Menschen wahrscheinlich so umsetzen würden und die wahrscheinlich auch angefragt werden.

00:52:55.020 --> 00:52:59.860
 Bei den Draft-Teams könnt ihr nicht noch das und das implementieren, irgendwelche Mosaics oder was weiß ich.

00:53:00.540 --> 00:53:04.500
 Aber es macht einfach keinen Sinn, das alles standardmäßig in CSS mitzuliefern.

00:53:04.500 --> 00:53:10.580
 Ja, da würdest du das Ganze so aufblähen und hättest zig Sonderfälle, die halt wirklich nur von zwei Prozent genutzt werden.

00:53:10.580 --> 00:53:14.860
 Also es macht keinen Sinn, das mitzuliefern, aber vielleicht sind diese Layout-Modelle echt schlau.

00:53:14.860 --> 00:53:16.960
 Weiß ich jetzt auch wieder keinen Grund.

00:53:16.960 --> 00:53:20.080
 Ich kenne noch andere Sachen, die von weniger als zwei Prozent genutzt werden.

00:53:20.080 --> 00:53:22.640
 Das wäre mal eine gute Sendung.

00:53:22.640 --> 00:53:29.280
 Ja, ich halte mich mal bedeckt, weil da machen wir noch eine extra Sendung draus, das habe ich jetzt gerade beschlossen.

00:53:29.720 --> 00:53:36.860
 Wir machen mal eine Sendung, die unbeliebtesten CSS- und JavaScript-Befehle, die keiner verwendet.

00:53:36.860 --> 00:53:38.980
 Ne, das fände ich echt ein interessantes Thema.

00:53:38.980 --> 00:53:47.360
 Das schreibe ich jetzt direkt auf in unser schönes Trello, weil das ist echt interessant, weil ich glaube, es gibt relativ viel, was fast nie benutzt wird.

00:53:47.360 --> 00:53:51.740
 Von Dingen, die eine gute Idee sind, aber die irgendwie keiner verwendet.

00:53:52.240 --> 00:53:53.980
 Ich bin gespannt, was du dir da ausdenkst.

00:53:53.980 --> 00:53:56.320
 Ja, ich mache mal und du machst mal weiter.

00:53:56.320 --> 00:53:56.900
 Ja, tipp, tipp mal weiter.

00:53:56.900 --> 00:54:00.420
 Ich komme zur Paint-AP, das ist ja der nächste Schritt in dieser Kette.

00:54:00.420 --> 00:54:08.180
 Und da schreibe ich mir eben solche Paint-Worklets, auch Paintlets genannt, falls man mal über diese Begriffe stolpert, das ist also das Gleiche.

00:54:08.800 --> 00:54:13.700
 Und diese Paint-Worklets, die bieten mir einen 2D-Drawing-Kontext.

00:54:13.700 --> 00:54:17.460
 Und wem das bekannt vorkommt, ja, das ist ähnlich wie ein Canvas.

00:54:18.360 --> 00:54:20.980
 Also ich kann da wirklich draufmalen auf ein Canvas.

00:54:20.980 --> 00:54:26.940
 Ich weiß jetzt nicht, ob es technisch wirklich ein Canvas ist, aber es ist jedenfalls ein Drawing-Kontext.

00:54:26.940 --> 00:54:29.520
 Das wäre tatsächlich eine meiner Fragen gewesen, ganz kurz.

00:54:29.520 --> 00:54:35.420
 Also ich habe mich gefragt, man kann da ja irgendwie auch Formen erzeugen, wie macht man das?

00:54:35.420 --> 00:54:36.740
 Ist das denn so wie Canvas?

00:54:36.740 --> 00:54:43.240
 Also ich sage mal so, die Programmierer sind ja nicht doof, die so einen Browser schreiben.

00:54:43.240 --> 00:54:47.080
 Was man ja schon an der Komplexität sieht, ja, da musst du ja schon ein bisschen was verstehen.

00:54:47.080 --> 00:54:50.100
 Was? Die Programmierer, die den Internet Explorer geschrieben haben?

00:54:50.100 --> 00:54:52.460
 Ja gut, okay, Ausnahmen bestätigen die Regel.

00:54:52.460 --> 00:54:53.140
 Nein, Spaß.

00:54:53.140 --> 00:54:54.900
 Nein, nein, wir haben Microsoft Deep.

00:54:54.900 --> 00:54:59.300
 Aber ich denke mal schon, dass das da wiederverwendet wurde.

00:54:59.300 --> 00:55:05.380
 Und ich habe es nur von der Formulierung, ich habe mich da auch kurz geguckt, aber ich wollte mich jetzt da nicht zu langtrechnisch dran aufhalten an dieser Frage,

00:55:05.380 --> 00:55:08.520
 weil es im Endeffekt auch uns wieder als Anwender egal sein kann.

00:55:08.520 --> 00:55:12.500
 Aber die Formulierung war immer nur like Canvas.

00:55:12.500 --> 00:55:16.020
 Ich denke mal, im Hintergrund arbeite die gleiche Technologie.

00:55:17.080 --> 00:55:21.000
 Jedenfalls kann ich da eben draufzeichnen, ich kann da Punkte erzeugen, ich kann Linien erzeugen.

00:55:21.000 --> 00:55:29.740
 Das heißt, ich kann irgendwelche Fills machen für meine lustigen Boxen, irgendwelche Muster berechnen lassen, aber auch Gradients.

00:55:30.200 --> 00:55:33.500
 Zum Beispiel, jetzt kommt mein Bier gerade, will auch mitsprechen.

00:55:33.500 --> 00:55:39.420
 Zum Beispiel Conic Gradients, also kegelförmige Gradients.

00:55:39.420 --> 00:55:44.040
 Könnte man zum Beispiel nutzen für so Sachen wie einen Farbkreis, den man darstellen will.

00:55:44.520 --> 00:55:46.200
 Wenn man die Anfangs- und Endfarbe gleich macht.

00:55:46.200 --> 00:55:53.220
 Wird nicht unterstützt, oder vielleicht gibt es auch, ich glaube es war mal in irgendeiner Spec, ist glaube ich wieder rausgeflogen, oder zumindest nicht weit verbreitet.

00:55:53.220 --> 00:55:58.920
 Aber jedenfalls ließe sich das mit Houdini umsetzen, ohne dass alle Browserhersteller das tatsächlich implementieren müssen.

00:56:00.280 --> 00:56:03.220
 Also man sieht schon, es ist hauptsächlich Schmuck und Dekoration.

00:56:03.220 --> 00:56:08.040
 Also das, was ich an Demos gefunden habe, waren tatsächlich eigentlich schon Spielereien.

00:56:08.040 --> 00:56:12.840
 Ja, und ich mache mal hier ein bisschen was bunt und so und da eine Linie.

00:56:14.520 --> 00:56:16.340
 Aber es gehen zum Beispiel auch Animationen.

00:56:16.340 --> 00:56:22.360
 Also diesen Ripple-Effekt von Material Design, von Android, kennen sicherlich die meisten.

00:56:22.360 --> 00:56:27.500
 Das heißt, ich klicke irgendwo auf einen Button und genau da, wo ich geklickt habe, breitet sich so ein kleiner Kreis aus.

00:56:27.500 --> 00:56:36.300
 Das ließe sich tatsächlich nur mit CSS, beziehungsweise über Houdini, natürlich auch mit JavaScript, ließe sich das umsetzen.

00:56:36.300 --> 00:56:41.780
 Und das finde ich dann also schon spannend, weil das ist, so fürs User-Feedback ist das schon ziemlich cool.

00:56:42.420 --> 00:56:45.560
 Also quasi eine Animation, ohne dass ich eine Animation wirklich definieren muss.

00:56:45.560 --> 00:56:50.200
 Genau, also es gibt ja noch die Animation-API, wo ich nachher auch noch kurz drauf zu sprechen komme.

00:56:50.200 --> 00:56:57.300
 Aber so rudimentäre Animationen lassen sich auch mit diesen Paint-Worklets schon umsetzen.

00:56:57.300 --> 00:57:00.720
 Und als ich das gesehen habe, das fand ich schon ziemlich cool.

00:57:00.720 --> 00:57:03.700
 Weil da habe ich dann schon das Gefühl, sorry, ich muss mal kurz.

00:57:03.700 --> 00:57:10.820
 Ja, der Konstantin, ich muss kurz hier eingreifen, vielleicht, ich habe gar keinen schlechten Witz.

00:57:10.820 --> 00:57:13.420
 Aber du kannst, aber du kannst weitermachen.

00:57:13.420 --> 00:57:15.000
 Mein Manuskript liegt in der Dropbox.

00:57:15.000 --> 00:57:18.500
 Nee, geht schon wieder.

00:57:18.500 --> 00:57:19.500
 Ich lese dann weiter vor.

00:57:19.500 --> 00:57:20.640
 Genau.

00:57:20.640 --> 00:57:23.320
 Wo war ich denn jetzt?

00:57:23.320 --> 00:57:25.340
 Genau, Ripple-Effekt Android.

00:57:25.340 --> 00:57:31.100
 Das ist tatsächlich auf älteren Geräten, sind solche Sachen schon performance-hungrig.

00:57:31.100 --> 00:57:37.680
 Weil da wird, ich weiß jetzt gar nicht, ob es ein Pseudo-Element ist oder vielleicht sogar böse-böse, ein zusätzliches Element nur für diesen Effekt.

00:57:37.680 --> 00:57:40.000
 Ich denke mal, es ist mit Pseudo-Element gemacht.

00:57:40.000 --> 00:57:44.780
 Das wird da extra reingerendert, nur um diesen Effekt zu erzeugen.

00:57:44.780 --> 00:57:48.640
 Und das könnte ich eben mit so einem Paint, könnte ich das einfach auf den Button-Hintergrund rendern.

00:57:48.640 --> 00:57:56.320
 Und das führt dann wiederum natürlich dazu, wenn ich auf solche Pseudo-Elemente oder sogar zusätzliche Elemente verzichten kann, dass wir semantrischeres HTML haben.

00:57:56.680 --> 00:57:59.000
 Und ich denke, auch da sind wir einig, dass wir da hinwollen.

00:57:59.000 --> 00:57:59.940
 Also ich auf jeden Fall.

00:57:59.940 --> 00:58:01.260
 Ich auch.

00:58:01.260 --> 00:58:07.000
 Und ja, da möchte ich dazu noch ein Video auf YouTube empfehlen.

00:58:07.000 --> 00:58:09.140
 Creating a custom CSS-Paintlet.

00:58:09.140 --> 00:58:11.800
 Link dazu gibt es auch in den Shownotes.

00:58:11.800 --> 00:58:15.860
 Ja, bei Animation-Worklet, da steht bei mir nur Animationen.

00:58:16.860 --> 00:58:19.560
 Weil ich mir das gar nicht weiter angeschaut habe.

00:58:19.560 --> 00:58:29.000
 Also das ist einfach, das ist, ja, gibt nochmal viel mehr Möglichkeiten, das graduell da mit den Animationen abzustimmen und irgendwelches tolles Zeug zu machen.

00:58:29.800 --> 00:58:42.800
 Aber so tief wollte ich da jetzt gar nicht in die Materie gehen, weil das auch, glaube ich, nicht so das, also wenn man schon eine Abstimmung, Abwägung treffen kann, ist zumindest für mich das jetzt nicht so das Vorrangige, was ich jetzt nutzen würde.

00:58:42.800 --> 00:58:46.980
 Genau, also diese Animation-Worklets gibt es noch.

00:58:46.980 --> 00:58:56.540
 Und dann zu guter Letzt, und dann haben wir es auch schon geschafft mit dieser langen Liste an APIs, die Font-Metrics-API.

00:58:56.740 --> 00:59:02.360
 Juhu, jetzt hätten wir, jetzt bräuchte ich, ich hab mir schon so ein Applaus-Dings zurechtgelegt, hab ich leider vergessen reinzuziehen.

00:59:02.360 --> 00:59:04.480
 Ah, Mensch, wie schade.

00:59:04.480 --> 00:59:14.940
 Genau, die Font-Metrics-API, da nenne ich jetzt auch, hau ich jetzt nur ein paar Keywords raus, also es ist wichtig für Textfluss, der ja auch wieder Einfluss auf das Layout haben kann.

00:59:14.940 --> 00:59:23.720
 Flexbox hat zum Beispiel Align-Items-Baseline, und da ist natürlich die Frage, wenn ich da jetzt irgendwelche Custom-Layouts stricken will oder mich da irgendwie einklinken will,

00:59:23.720 --> 00:59:32.640
 wo befindet sich denn genau die Baseline von diesen Flex-Items, ähm, oder so Spielereien wie Initial Letter, was man so kennt von, eigentlich vom Print-Bereich,

00:59:32.640 --> 00:59:40.520
 was ist aber inzwischen ja auch über diverse Plugins oder auch, äh, gibt's ja auch jetzt mittlerweile in CSS, dass ich, äh, diesen Initial Letter von einer Zeile in den Anfangsbuch haben.

00:59:40.520 --> 00:59:41.760
 First Letter, meinst du, glaub ich.

00:59:41.760 --> 00:59:47.840
 First Letter, dankeschön, ja, heißt aber auch Initial Letter. Ähm, den kann ich größer darstellen oder andersfarbig oder irgendwie schöner.

00:59:47.920 --> 00:59:49.780
 Also in CSS heißt's, äh, First Letter.

00:59:49.780 --> 00:59:57.860
 Okay, First Letter, genau, so heißt die Property. Äh, dafür ist es wichtig, ja, Baseline, Grid-Layout, was man da auch immer stricken will,

00:59:57.980 --> 01:00:10.560
 Zeilenumbrüche, also ich brauche einfach, wenn ich richtig damit arbeiten will, brauche ich die Daten, also man hat ja immer das Problem, ich mach mir da schön ein Design und dann unter dem Bild sind 5 Pixel und dann kommt die Zeilenhöhe mit 32 Pixel.

01:00:10.720 --> 01:00:18.940
 Aber im Browser hab ich dann, äh, je nachdem, wie die Unterlängen und Oberlenken von dem, von dem Text laufen, hab ich dann plötzlich doch mehr, äh, Abstand, als ich eigentlich wollte.

01:00:18.940 --> 01:00:24.240
 Und da brauche ich halt wirklich die Informationen von der Font, die geladen ist.

01:00:24.240 --> 01:00:39.160
 Und da gibt's dann auch so Ansätze, ich hab dann da die, die, die, die Drafts dazu gelesen, dass man halt wirklich, ähm, die Systemfonds dann ausliest und sich da die Werte zurückgeben lässt und bei Webfonds, äh, Referenzen auf die, auf das, auf die Rohdaten und was weiß ich was.

01:00:39.160 --> 01:00:48.180
 Ähm, ja, ist eine Spielerei erstmal, der man noch nicht spielen kann, weil es gibt dazu noch keinen Draft. Es gibt also nur Ideen.

01:00:48.180 --> 01:00:54.240
 Und damit kommen wir dann auch schon zu der Frage, wie weit sind wir denn?

01:00:54.240 --> 01:00:57.740
 Ja, das wäre auch eine Frage von mir gewesen.

01:00:57.740 --> 01:00:58.480
 Sehr gut.

01:00:58.480 --> 01:00:59.440
 Was ist denn mit den Browsern?

01:00:59.440 --> 01:01:00.180
 Was ist der Status?

01:01:00.180 --> 01:01:01.240
 Ich rate jetzt mal.

01:01:01.240 --> 01:01:04.300
 Es gibt eine sehr schöne Seite, die kannst du vielleicht auch gleich mal aufmachen.

01:01:04.300 --> 01:01:04.840
 Kenner News.

01:01:04.840 --> 01:01:07.640
 Nein, nein, nicht Kenner News diesmal.

01:01:07.640 --> 01:01:08.440
 Nicht Kenner News.

01:01:08.440 --> 01:01:12.760
 Nein, ishoudini-ready-yet.com.

01:01:12.760 --> 01:01:13.960
 Ich glaub, da steht drauf, no.

01:01:13.960 --> 01:01:18.740
 Das wäre auch, ja, stimmt, sollten die eigentlich ganz groß oben hinschreiben.

01:01:18.740 --> 01:01:20.120
 Es ist aber nur halbrichtig.

01:01:20.120 --> 01:01:20.680
 Punkt.com oder was?

01:01:20.680 --> 01:01:21.940
 Punkt.com, genau.

01:01:21.940 --> 01:01:26.980
 Also, vielleicht, wer gerade nicht im Auto sitzt oder so, äh, kann das auch mal aufmachen.

01:01:26.980 --> 01:01:29.100
 Oh, aha, das sieht gar nicht so schlecht aus.

01:01:29.100 --> 01:01:30.700
 Ja, das ist ganz schön gemacht.

01:01:30.720 --> 01:01:39.520
 Die verschiedenen APIs sehe ich hier auf den ersten Blick haben, weil sie auch sehr unterschiedliche Stände haben, was die Specs anbelangt.

01:01:39.920 --> 01:01:49.180
 also, ähm, die Parser-API und die Fontmetrics-API, wie gesagt, die werden noch nirgends unterstützt, weil es aus dem einfachen Grund, äh, dass es noch keine Specs dafür gibt.

01:01:49.680 --> 01:01:51.400
 Dementsprechend wurden die natürlich auch noch nicht implementiert.

01:01:51.400 --> 01:01:54.920
 Ich frage mich gerade, wer diese Übersicht gebaut hat.

01:01:54.920 --> 01:02:03.780
 Ähm, ich weiß nicht, in welcher Welt ihr lebt, aber, äh, ist Samsung Internet echt so ein wichtiger Browser, dass der extra aufgeführt wird?

01:02:03.780 --> 01:02:07.600
 Das habe ich mich, ehrlich gesagt, auch gefragt, warum der da extra erscheint.

01:02:07.600 --> 01:02:13.120
 Aber gut, ich meine, die Verbreitung von, von so Galaxy-Geräten und so, ich glaube, die ist doch schon recht hoch.

01:02:13.120 --> 01:02:21.340
 Ähm, das erste, was ich da machen würde, wäre Chrome installieren, aber, äh, es gibt bestimmt viele Leute, die den auch tatsächlich nutzen.

01:02:21.340 --> 01:02:23.520
 Ja, das kann man jetzt schon mal sagen.

01:02:23.520 --> 01:02:29.420
 Also, da er auch auf die Blink-Engine setzt, ähm, sieht die Verbreitung ja da ganz gut aus.

01:02:29.420 --> 01:02:32.620
 Aber ich komme da noch drauf, die, die, wie das, äh, verbreitet ist.

01:02:33.320 --> 01:02:39.080
 Ähm, wie gesagt, die beiden APIs, äh, kann man erst mal vergessen, weil da werden noch Ideen gesammelt und das eben auch schon seit diversen Jahren.

01:02:39.080 --> 01:02:44.060
 Aber die anderen APIs, da sieht's ganz gut aus, zumindest bei manchen.

01:02:44.060 --> 01:02:48.840
 Äh, die Paint-API ist, äh, im Status Candidate Recommendation.

01:02:48.840 --> 01:02:51.340
 Das heißt, schon recht weit voran geschritten.

01:02:51.340 --> 01:03:02.880
 Properties and Values-API und das Typed-OM ist noch Working-Draft, aber das heißt, da wird aktuell immer noch dran gearbeitet, ähm, was ja schon mal gut ist,

01:03:02.880 --> 01:03:06.780
 dass sich dann auch jemand drum kümmert und es, äh, nicht in Vergessenheit geraten ist.

01:03:06.780 --> 01:03:13.520
 Und die Layout-API und die Animation-Worklets sind im Status First Public Working-Draft.

01:03:13.520 --> 01:03:18.020
 Ich weiß nicht, kennst du dich mit den, mit den Drafts und den Starti, äh, aus?

01:03:18.120 --> 01:03:20.660
 Weißt du, was dieses First Public Working-Draft ist?

01:03:20.660 --> 01:03:32.540
 Sonst würde ich nur mal vermuten, dass das halt, wenn ich's mir übersetze, so dass, äh, nachdem wir basteln da internen Ideen zusammen, so das Erste, was tatsächlich einfach veröffentlicht wird.

01:03:32.540 --> 01:03:33.800
 Ja, First Public, genau.

01:03:33.800 --> 01:03:37.500
 Wir holen uns jetzt mal die Meinungen an von den Entwicklern.

01:03:37.500 --> 01:03:51.800
 Genau, wir haben jetzt mal hier diese Idee, äh, was, was, was meint ihr denn dazu? Also so wirkt das auf mich. Ich kenne diese einzelnen Stufen jetzt nicht auswendig und was die bedeuten, aber das klingt für mich schon so nach, das ist das allererste, was irgendwie die Öffentlichkeit zu sehen kriegt.

01:03:51.800 --> 01:04:15.580
 Genau, und obwohl das alles noch so in so einem, äh, frühen Stadium ist, das heißt früh, wenn man's jetzt zeitlich sieht, ist es nicht früh, aber von den Specs her ist es früh, ähm, trotzdem wurden neben der Paint-API auch die Typed-OM in insgesamt vier Browsern umgesetzt, und das sind, äh, Chrome, Microsoft Edge, Opera und eben dieser Samsung-Internet.

01:04:15.580 --> 01:04:18.720
 Naja, gut, die sind ja alle auf der gleichen Engine.

01:04:19.860 --> 01:04:34.760
 Ja, ja klar, natürlich, aber trotzdem gibt es Unterschiede, ne, Properties und Values-API, ähm, die gibt es im Samsung-Internet-Browser zum Beispiel noch nicht. Also da steht No-Signal, das heißt, das wurde noch nicht mal drüber gesprochen bei den Entwicklern, machen wir das dann oder nicht.

01:04:34.760 --> 01:04:46.680
 Wenn man da jetzt vergleicht bei Firefox, ähm, da steht bei Layout-API, Paint-API und Typed-OM Intent to Implement. Das heißt, da hat man sich immerhin schon mal drauf geeinigt, ja, wir gehen das jetzt an.

01:04:46.800 --> 01:04:56.200
 Das heißt noch nicht, dass es in Development ist, ja, der wichtiger Unterschied, also da sitzt jetzt noch niemand aktiv dran und entwickelt das, sondern, aber man hat gesagt, wir wollen das auf jeden Fall in unserem Browser haben.

01:04:56.540 --> 01:05:07.500
 Und das ist ja schon mal ein gutes Zeichen, weil wenn Firefox dann auch noch mitzieht, dann wären nur noch Apple, die da alleine dastehen, wobei, kann man jetzt auch so nicht sagen, bei denen sind immerhin Paint-API und Typed-OM auch schon in Entwicklung.

01:05:07.900 --> 01:05:19.760
 Also ich glaube, es ist wirklich ganz gut, während ich das jetzt erzähle, dass man diese Matrix offen hat, sonst ist das, glaube ich, echt wieder wie bei den Farbnotationen so ein wildes Rumwerfen mit Begriffen und APIs und Status.

01:05:21.440 --> 01:05:27.300
 Aber es ist schon ganz cool, das mal so zu sehen, wie die Browser denn da voranschreiten in der Umsetzung.

01:05:27.440 --> 01:05:31.620
 Also ich versuche es mal zusammenzufassen, so in einfach, auch ohne, dass man diese Matrix sieht.

01:05:31.620 --> 01:05:40.300
 Alles, was so direkt auf der Blink-Engine basiert, also so Chrome, Edge und Opera, sieht eigentlich fast identisch aus.

01:05:40.980 --> 01:05:50.040
 Also ist relativ gut unterstützt, beziehungsweise teilweise Partial Support, diese Parser-API und die Font-Matrix-API, die gibt es halt noch nicht.

01:05:50.040 --> 01:05:59.700
 Und dann gibt es irgendwie Samsung Internet, der spielt so eine Sonderrolle, der hat viel nicht mit drin, aber diese Paint-API zum Beispiel hat er auch mit drin und Typed-OM eben auch.

01:05:59.700 --> 01:06:09.200
 Und Firefox, naja, da gibt es ganz viel wohl gute Gedanken und wir wollen da was entwickeln, aber da ist eigentlich noch nichts drin, wenn ich das richtig sehe.

01:06:09.200 --> 01:06:14.720
 Ich habe mir in meinen Notes aufgeschrieben, Firefox und Safari, Doppelpunkt, trauriges Smiley.

01:06:14.720 --> 01:06:18.540
 Ah, ja, so kann man das sagen derzeit.

01:06:18.540 --> 01:06:36.960
 Ja gut, immerhin, also es wird bei Safari aktiv dran gearbeitet und für Properties und Values, was für mich auch so mit einer der Grundfunktionen eigentlich ist, neben dem Typed-OM, da gibt es tatsächlich schon in der Technology-Preview, ab Version 67 ist das zumindest schon mal mit drin.

01:06:37.720 --> 01:06:38.800
 Das ist ja schon mal was.

01:06:38.800 --> 01:06:41.420
 Ich stelle jetzt mal eine gemeine Frage.

01:06:41.420 --> 01:06:41.700
 Oh je.

01:06:41.700 --> 01:06:54.760
 Jetzt nehmen wir jetzt mal was anderes in CSS, in CSS-Land, was irgendwann angekündigt wurde, was wir mitgekriegt haben, was angekündigt wurde und was es jetzt gibt.

01:06:55.880 --> 01:07:03.000
 zum Beispiel, wenn du zum ersten Mal von CSS-Grid gehört und würdest du sagen, dass das jetzt weitestgehend unterstützt ist?

01:07:03.000 --> 01:07:05.620
 Wie lange hat das gedauert?

01:07:05.620 --> 01:07:10.180
 Von zum ersten Mal gehört bis ist es so, dass man es eigentlich verwenden kann?

01:07:11.840 --> 01:07:16.840
 Ich kannte es auf jeden Fall schon, als es Erwähnung gefunden hat 2017 in dem Talk in Amsterdam.

01:07:16.840 --> 01:07:18.200
 Ja.

01:07:18.200 --> 01:07:22.300
 Kann ich dir jetzt nicht sagen, wie weit davor ich damit gearbeitet habe.

01:07:22.300 --> 01:07:28.880
 Ich weiß, dass ich damals bei dem Talk noch nicht damit gearbeitet habe, weil es da erst relativ neu, glaube ich, in die Browser kam.

01:07:28.880 --> 01:07:34.540
 Ich glaube, da war gerade erst irgendwie das letzte Release von Chrome oder von Firefox oder was, der das dann mit reingebracht hat.

01:07:34.540 --> 01:07:40.860
 Oder ich glaube, es war sogar so, dass alle drei großen Browser das gleichzeitig mit reingebracht haben.

01:07:40.860 --> 01:07:42.200
 Relativ gleichzeitig.

01:07:42.200 --> 01:07:45.320
 Ich glaube, für mich war CSS-Grid damals auch nicht ganz brandneu.

01:07:45.320 --> 01:07:46.580
 Ich hatte das irgendwie schon mal gehört.

01:07:46.580 --> 01:07:51.360
 Aber das war so meine erste Berührung so mit, oh, muss ich unbedingt mal ausprobieren.

01:07:51.360 --> 01:07:55.580
 Und naja, CSS-Grid, das ist jetzt angekommen, würde ich mal behaupten.

01:07:55.580 --> 01:07:59.080
 Und ich würde sogar sagen, das ist wahrscheinlich vor einem Jahr schon angekommen.

01:07:59.080 --> 01:08:03.400
 Mittlerweile gibt es ja schon die nächsten Sachen, irgendwie Subgrid und so weiter,

01:08:03.620 --> 01:08:05.920
 die da noch weiterentwickelt werden an CSS-Grid.

01:08:05.920 --> 01:08:10.260
 Also das ging dann eigentlich relativ schnell, hatte man so das Gefühl.

01:08:10.260 --> 01:08:15.520
 Ich meine, an CSS-Grid wird wahrscheinlich schon ewig gearbeitet.

01:08:15.520 --> 01:08:20.780
 Aber ich kann es mir nicht anders vorstellen, als dass an CSS-Grid schon sehr, sehr lange gearbeitet wird.

01:08:20.780 --> 01:08:26.100
 Weil dieses Grid-Layout im Web, das wollte man eigentlich schon immer haben.

01:08:26.100 --> 01:08:27.700
 Das hat man ja früher mit Tabellen gemacht.

01:08:27.700 --> 01:08:32.200
 Also die Arbeit daran ist bestimmt schon sehr, sehr alt.

01:08:32.200 --> 01:08:36.500
 Aber so dieser letzte Vorstoß so von wegen, ja, wir machen das jetzt mal und wir bauen das mal in den Browser ein.

01:08:36.500 --> 01:08:38.400
 Das ging relativ schnell, habe ich so das Gefühl.

01:08:38.400 --> 01:08:43.280
 Also da ist jetzt im Vergleich Houdini irgendwie ziemlich langsam.

01:08:43.520 --> 01:08:45.820
 Also zwei Sachen dazu.

01:08:45.820 --> 01:08:51.020
 Also einmal weiß ich nicht, ob das jetzt tatsächlich recht schnell ging.

01:08:51.020 --> 01:08:56.360
 In den Talks, wie gesagt, wurde auch erwähnt, sieben Jahre für Flexbox und fünf für Grid.

01:08:56.360 --> 01:08:58.840
 Also das ist schon auch ein Zeitraum.

01:08:58.840 --> 01:09:02.780
 Das sind beide jetzt gleich auf oder länger sogar als Houdini gebraucht hat.

01:09:03.380 --> 01:09:08.460
 Und man darf ja auch nicht vergessen, Houdini ist ja ein Set von verschiedenen APIs.

01:09:08.460 --> 01:09:12.400
 Das sind ja ganz viele verschiedene Baustellen, auch mit unterschiedlichen Teams, die da dran arbeiten.

01:09:12.400 --> 01:09:22.680
 Und also ja, alleine schon, dass die Layout-API es einem ja ermöglicht, ein eigenes Layout-Modell zu schaffen,

01:09:23.040 --> 01:09:25.100
 was ja wiederum Flexbox und Grid entspricht.

01:09:25.100 --> 01:09:28.600
 Ja, also dass man da quasi ein Framework hat, mit dem man das selber bauen kann.

01:09:28.600 --> 01:09:31.700
 Dass das länger dauert, das leuchtet mir tatsächlich ein.

01:09:31.700 --> 01:09:33.740
 Verstehst du, was ich meine?

01:09:33.740 --> 01:09:35.700
 Ja, ja, das ...

01:09:35.700 --> 01:09:41.080
 Jetzt habe ich dich mal aus dem Konzept gebracht.

01:09:41.420 --> 01:09:46.480
 Nein, nein, nein, nee, ich habe trotzdem das Gefühl, dass es irgendwie sehr lange dauert

01:09:46.480 --> 01:09:51.120
 und bin noch nicht überzeugt, dass das irgendwann also so in seiner Gänze fertig wird.

01:09:51.120 --> 01:09:54.000
 Ich könnte mir vorstellen, dass einzelne Teile, ich meine, es gibt ja auch jetzt schon Teile,

01:09:54.000 --> 01:09:58.940
 dass einzelne Teile das irgendwie irgendwann schaffen, aber ob es wirklich alles wirklich ...

01:09:58.940 --> 01:10:01.960
 Ja, aber eigentlich, wenn man sich die einzelnen Module so anschaut,

01:10:01.960 --> 01:10:07.960
 oder diese einzelnen APIs, das macht gar keinen Sinn, wenn man eine weglässt.

01:10:07.960 --> 01:10:10.100
 Also wenn man jetzt die Font-Metrix-API weglässt ...

01:10:10.100 --> 01:10:13.760
 Also Parser-API und Font-Metrix-API, für die es ja wirklich noch keinen Draft gibt,

01:10:13.760 --> 01:10:15.900
 könnte ich mir auch vorstellen, dass die vielleicht sogar wieder rausfliegen,

01:10:15.900 --> 01:10:17.540
 weil man sagt, naja, brauchen wir doch nicht so dringend.

01:10:17.540 --> 01:10:19.700
 Ja, aber Font-Metrix, das ist doch was ganz Grundlegendes.

01:10:19.700 --> 01:10:22.120
 Wenn man die jetzt mal weglässt, also die kann man eigentlich schon weglassen.

01:10:22.120 --> 01:10:25.520
 Wenn man sich das jetzt mal anguckt und wir sagen jetzt mal, wir nehmen,

01:10:25.520 --> 01:10:29.100
 also Shipped ist klar, die ist verfügbar und Partial Support,

01:10:29.100 --> 01:10:34.360
 das heißt, es ist schon in den Developer-Previews und in den Canary ist das schon mit drin,

01:10:34.360 --> 01:10:36.760
 zählt für mich auch als, es ist umgesetzt,

01:10:36.920 --> 01:10:38.140
 ja, es ist nur noch nicht im Endprodukt.

01:10:38.140 --> 01:10:41.920
 Und Intent-to-Implement würde ich jetzt bei Firefox sogar auch schon dazu zählen,

01:10:41.920 --> 01:10:43.640
 da hat man wirklich gesagt, okay, wir setzen das um.

01:10:43.640 --> 01:10:45.980
 Ich weiß nicht, wie fix die Jungs bei Firefox sind im Entwickeln,

01:10:45.980 --> 01:10:47.800
 wie schnell da Updates kommen.

01:10:47.800 --> 01:10:51.780
 Nehmen wir aber diese drei Statusse,

01:10:51.780 --> 01:10:54.060
 oder eigentlich sogar müsste man sogar ...

01:10:54.060 --> 01:10:56.280
 Statis, Statisten, egal.

01:10:57.880 --> 01:11:02.600
 In Development könnte man eigentlich auch schon, das ist ja sogar noch weiter als Intent-to-Implement,

01:11:02.600 --> 01:11:10.860
 ja, also wenn man das alles zusammennimmt, dann sind an drei von den APIs sind die großen

01:11:10.860 --> 01:11:14.180
 Browser-Hersteller dabei oder haben es schon fertig oder fast fertig.

01:11:15.780 --> 01:11:19.420
 Font-5 sage ich jetzt mal, weil wir Parser-API und Font-Matrix-API weglassen.

01:11:19.420 --> 01:11:22.320
 Also das klingt für mich jetzt gar nicht so schlecht.

01:11:22.320 --> 01:11:24.880
 Okay, mach mal eine Vorhersage.

01:11:24.880 --> 01:11:27.080
 Wenn du jetzt mal in deine Glaskugel schaust,

01:11:27.200 --> 01:11:30.920
 Der große Konstantini schaut in seine Glaskugel.

01:11:30.920 --> 01:11:38.920
 Der große Konstantini schaut in seinen Glas-Dildo und sagt mir jetzt,

01:11:38.920 --> 01:11:46.880
 wann kommt der Punkt, wann ist der Punkt in der Zukunft, wo das so ein Standard wird,

01:11:46.880 --> 01:11:49.160
 dass man sagt, naja, da baut man jetzt was damit.

01:11:49.160 --> 01:11:51.040
 Es ist jetzt zur Normalität geworden.

01:11:51.040 --> 01:11:52.660
 Was glaubst du, wie lange das noch dauert?

01:11:52.660 --> 01:11:56.980
 Ich weiß, wie gesagt, nicht, wie die Release-Cycles und so diese Development-Cycles

01:11:56.980 --> 01:12:01.020
 so bei Firefox sind, weil von Firefox hängt das meiner Meinung nach so noch ab,

01:12:01.020 --> 01:12:03.660
 weil der doch eine recht große Abdeckung hat.

01:12:03.660 --> 01:12:07.300
 Deswegen kann ich da schlecht einschätzen, wie lange Intent-to-Implement,

01:12:07.300 --> 01:12:10.500
 da heißt, da müsste man jetzt verschiedene Tickets mal raussuchen von Sachen,

01:12:10.500 --> 01:12:13.420
 die jetzt wirklich drin sind, gucken, wann wurden die dann auf Intent-to-Implement gesetzt.

01:12:13.420 --> 01:12:17.420
 Aber so aus dem Bauch heraus würde ich mal sagen,

01:12:17.560 --> 01:12:22.700
 in einem Jahr, anderthalb, lass es vielleicht höchstens zwei sein.

01:12:22.700 --> 01:12:26.040
 Dann hat Firefox das auch, weil ich meine, das sind jetzt wirklich die großen Browser,

01:12:26.040 --> 01:12:27.640
 haben das außer Firefox.

01:12:27.640 --> 01:12:32.380
 Und selbst Apple, was ja oft Sachen dann doch irgendwie nicht umsetzt oder lange braucht,

01:12:32.380 --> 01:12:34.260
 hat das jetzt schon in der Mache sogar.

01:12:34.260 --> 01:12:38.740
 Ich glaube, da wird Firefox sehr schnell nachziehen bei den übrigen APIs.

01:12:40.060 --> 01:12:43.140
 Und dann haben wir die ganzen Evergreen-Browser abgedeckt.

01:12:43.140 --> 01:12:47.360
 Also Apple wird sowieso wahrscheinlich schneller fertig sein als Firefox,

01:12:47.360 --> 01:12:48.620
 wenn sie sich jetzt nicht überholen lassen.

01:12:48.620 --> 01:12:52.700
 Ja, wie gesagt, in einem Jahr anderthalb könnte ich mir vorstellen,

01:12:52.700 --> 01:12:54.020
 dass es tatsächlich soweit ist.

01:12:54.020 --> 01:12:59.060
 Hast du bei deiner Recherche ein Beispiel gefunden, wo du gesagt hast,

01:12:59.060 --> 01:13:00.800
 das ist so ein Killer-Use-Case?

01:13:00.800 --> 01:13:05.040
 Also, ich meine, so ein bisschen Ripple-Effekt oder, keine Ahnung,

01:13:05.140 --> 01:13:08.540
 ich implementiere irgendwie Border-Radios, den es sonst nicht gibt.

01:13:08.540 --> 01:13:10.940
 Ja, da können wir gleich noch beim Feedback,

01:13:10.940 --> 01:13:14.580
 bei unserer gemeinsamen Diskussion noch drauf eingehen.

01:13:14.580 --> 01:13:16.480
 Ach so, da sind wir noch gar nicht.

01:13:16.480 --> 01:13:20.520
 Ja, ich wollte noch ein paar Links noch nennen.

01:13:20.520 --> 01:13:21.540
 Dann lass ich dich noch.

01:13:21.540 --> 01:13:22.600
 Aber die kann ich auch am Schluss anhängen.

01:13:22.600 --> 01:13:25.580
 Wir können ja tatsächlich jetzt zum Fazit kommen.

01:13:25.580 --> 01:13:28.040
 Ich gebe dir da recht.

01:13:28.040 --> 01:13:31.420
 Ich habe jetzt tatsächlich noch nichts gesehen, wo ich jetzt dachte,

01:13:31.420 --> 01:13:32.720
 boah, ist das geil.

01:13:32.720 --> 01:13:34.080
 Außer vielleicht ...

01:13:34.080 --> 01:13:36.400
 Das heißt, du gibst mir recht, ich lasse mich ja gerne überzeugen.

01:13:36.400 --> 01:13:39.220
 Naja, außer vielleicht, aber in dem Fall muss ich dir einfach recht geben,

01:13:39.220 --> 01:13:44.300
 ja, die Previews, die Demos, die sind schon sehr Tech-Demo-lastig

01:13:44.300 --> 01:13:46.340
 und es ist halt so, haha, guck mal, was man da machen kann.

01:13:46.340 --> 01:13:50.440
 Aber so richtig, boah, geil, bin ich heiß drauf,

01:13:50.440 --> 01:13:51.980
 bis das im Browser verfügbar ist überall,

01:13:51.980 --> 01:13:53.640
 damit ich das auf meine Webseite einsetzen kann,

01:13:53.640 --> 01:13:56.820
 um da jetzt irgendwelche Punkte und Linien unter meine Überschriften zu klatschen,

01:13:56.820 --> 01:13:59.860
 ja, habe ich tatsächlich auch noch nicht gefunden.

01:14:00.880 --> 01:14:04.500
 Ich glaube, das habe ich ja vorhin schon gesagt, ich glaube, da ist wirklich jetzt Kreativität gefragt.

01:14:04.500 --> 01:14:08.400
 Ich würde mich jetzt nicht mal als den allzu kreativsten Menschen bezeichnen.

01:14:08.400 --> 01:14:13.560
 Das heißt, ich bin da schlecht drin, mir jetzt irgendwelche bahnbrechenden Beispiele rauszusuchen,

01:14:14.520 --> 01:14:18.800
 die ich mir selber vorstellen könnte oder wo ich vielleicht jetzt schon damit eine Demo basteln könnte.

01:14:18.800 --> 01:14:22.960
 Ich bin da einfach nicht kreativ genug, aber es gibt sehr viele kreative Menschen

01:14:22.960 --> 01:14:26.220
 und das sieht man schon an den Demos, was die sich teilweise da einfallen lassen.

01:14:26.220 --> 01:14:29.460
 Also ich glaube, das wird schon kommen und das hängt auch ein bisschen damit ab,

01:14:29.460 --> 01:14:32.180
 wenn es denn erstmal in den Browsern verfügbar ist.

01:14:32.180 --> 01:14:38.040
 Ja, also mit Flexbox und mit Grid wurden wahrscheinlich auch nicht vorher die hammergeilsten Demos überhaupt gebaut,

01:14:38.780 --> 01:14:41.200
 bis es denn dann mal da war und die Leute gesagt haben,

01:14:41.200 --> 01:14:44.120
 oh, jetzt würde ich es tatsächlich gerne mal für mein nächstes Projekt benutzen

01:14:44.120 --> 01:14:46.700
 und jetzt lasse ich mir was Cooles mit einfallen

01:14:46.700 --> 01:14:50.600
 und bevor ich das mache, setze ich mich mal noch an eine Demo und dann teile ich das

01:14:50.600 --> 01:14:53.580
 und dann, na, das fängt ja dann irgendwie so wie so ein Waldbrand so langsam,

01:14:53.580 --> 01:14:56.520
 boah, einer macht eine coole Demo und dann kommt der, ach stimmt, das kann man damit machen,

01:14:56.520 --> 01:15:00.600
 dann bastle ich auch mal eine Demo und dann, ja, das exponentiert sich ja,

01:15:01.200 --> 01:15:04.300
 mit den, mit den coolen Demos und Einfällen, die die Leute haben.

01:15:04.300 --> 01:15:07.380
 Also, ja, ich habe da schon so eine Idee dazu, wie das funktionieren könnte.

01:15:07.380 --> 01:15:13.220
 Also, ich, ich, ähm, diese ganzen APIs, ich finde die, also, naja, klar, das ist immer so,

01:15:13.220 --> 01:15:18.880
 wenn irgendwie was Neues, ähm, es wirkt etwas relativ kompliziert oder relativ schwierig zu lernen,

01:15:18.880 --> 01:15:22.760
 relativ komplex, das ist eine Welt eigentlich, also jede Demo, die ich da gesehen habe,

01:15:22.760 --> 01:15:25.480
 wo irgendwie auch mal ein bisschen Code gezeigt wurde, dachte ich so, okay, krass,

01:15:25.800 --> 01:15:30.960
 das müsste ich jetzt echt komplett von vorne lernen, da ist irgendwie, das sieht nicht aus wie irgendwas,

01:15:30.960 --> 01:15:34.020
 was ich jetzt irgendwie schon kenne. Also, so ein bisschen, ja, klar, wie JavaScript und so,

01:15:34.020 --> 01:15:35.720
 aber das ist echt eine komplett neue Welt.

01:15:35.720 --> 01:15:40.760
 Was ich mir jetzt aber gut vorstellen könnte, wäre, dass jetzt, ähm, dass vielleicht dadurch,

01:15:40.760 --> 01:15:44.000
 ähm, dass, dass das so der erste Schritt ist zu neuen CSS-Standards

01:15:44.000 --> 01:15:46.420
 beziehungsweise so eine Art Libraries-Standard gibt.

01:15:46.420 --> 01:15:52.980
 Also, gar nicht mal, dass jetzt jeder auf seiner Homepage eigene, äh, eigene Houdini-Geschichten einbaut

01:15:52.980 --> 01:15:56.300
 und sagt, ja, ich baue hier mein eigenes, meinen eigenen Border-Radius,

01:15:56.300 --> 01:15:59.600
 meinen eigenen Gradient, meinen eigenes, was weiß ich, was für ein Effekt, ja,

01:15:59.600 --> 01:16:03.340
 sondern ich könnte mir total gut vorstellen, dass es halt so ein paar Leute gibt,

01:16:03.340 --> 01:16:06.160
 die sich da extrem tief reinnerden und dass es dann so Libraries gibt,

01:16:06.160 --> 01:16:07.320
 aus denen du dich bedienen kannst.

01:16:07.320 --> 01:16:11.680
 Also, sagt er, hier, guck mal, ich habe hier, äh, die, die drei geilsten Sachen für CSS,

01:16:11.680 --> 01:16:14.200
 die du, die du schon immer gebraucht hast, die habe ich hier gebaut

01:16:14.200 --> 01:16:18.260
 und dann könnte ich mir echt vorstellen, dass man das dann so, äh, als Library dann einbindet bei sich

01:16:18.260 --> 01:16:19.480
 und dann so verwendet.

01:16:19.480 --> 01:16:22.300
 Also, ich könnte mir vorstellen, dass das eher der Anwendungsfall ist,

01:16:22.300 --> 01:16:24.080
 als dass jeder da selbst drin rumfrickelt.

01:16:24.080 --> 01:16:27.520
 Also, so wie so eine Art jQuery für, für CSS oder so.

01:16:27.520 --> 01:16:28.340
 Das ist ein guter Punkt.

01:16:28.340 --> 01:16:31.800
 Ähm, das wäre nämlich jetzt auch noch bei den weiterführenden Links gekommen.

01:16:31.800 --> 01:16:36.560
 Ähm, da steht nämlich einmal auf meiner Liste ein, äh, Talk von Juna Kravitz.

01:16:36.560 --> 01:16:41.640
 Äh, der ist vom Juni 2019, also relativ aktuell in, äh, CSS Feature-Zeit.

01:16:41.640 --> 01:16:47.300
 Ah, den habe ich gesehen, war der, war der, war der beim CSS, äh, Moment, warte mal, CSS, nee, CSS Day?

01:16:47.300 --> 01:16:50.960
 Ich kann's nicht, nee, das war's nicht, das war irgendwas anderes, was ich, glaube ich, noch nicht.

01:16:50.960 --> 01:16:53.440
 Aber da hat die auf jeden Fall auch einen Talk über Houdini gehalten, glaube ich.

01:16:53.440 --> 01:16:58.820
 Also, kann sein, ja, es gibt auch, auch zum Thema Houdini gibt's auch zwei oder mehr Talks, ähm, ähm, äh, von, von ihr,

01:16:58.820 --> 01:17:05.940
 die auch relativ ähnliche Inhalte haben, also, klar, die Speaker bereiten ja ihre Talks dann auch nicht jedes Mal von null vor,

01:17:05.940 --> 01:17:09.440
 sondern machen dann hier noch was hinzu und da gibt's vielleicht eine neue Erkenntnis oder so.

01:17:09.440 --> 01:17:14.660
 Ähm, also man findet da relativ, äh, viel auf, auf YouTube dazu und das Video werde ich auch, ähm,

01:17:14.660 --> 01:17:20.240
 entsprechend in die Show Notes posten und sie erwähnt da drin auch eine Seite, die sie gemacht hat, äh,

01:17:20.240 --> 01:17:26.120
 die Domain ist nicht ganz so einprägsam, extra-css.netlify.app.

01:17:26.120 --> 01:17:29.560
 Vielleicht willst du auch mal drauf gehen und da steht,

01:17:29.560 --> 01:17:34.320
 a CSS Houdini Library for making your site a little more extra.

01:17:34.940 --> 01:17:38.820
 Und da gibt's dann solche Konfiguratoren, äh, genau, steht auch oben dann hier

01:17:38.820 --> 01:17:43.500
 Warning, your browser does not currently support Houdini and you won't be able to see any demos.

01:17:43.500 --> 01:17:45.200
 Also man muss es dann tatsächlich schon mal drauf öffnen.

01:17:45.200 --> 01:17:46.880
 Ah, die Seite kenn ich, ja, ah, ah, ja, genau.

01:17:46.880 --> 01:17:49.780
 Und da gibt's einen Baukasten, wo man die Effekte konfigurieren kann, so,

01:17:49.780 --> 01:17:53.000
 und dann krieg ich am Schluss, äh, krieg ich dann den entsprechenden Code,

01:17:53.000 --> 01:17:56.900
 den baue ich ein und dann kann ich meinen Text irgendwie glitzern lassen oder so, ja.

01:17:56.900 --> 01:18:01.180
 Ähm, und das ist ja jetzt auch nur rudimentär als Tech-Demo gedacht,

01:18:01.180 --> 01:18:04.600
 das ist ja keine jetzt, also ich glaub, das Text funkeln lassen jetzt nicht so,

01:18:04.600 --> 01:18:07.240
 das Hammer-Killer-Feature ist und das jetzt jeder auf seiner Seite macht.

01:18:07.240 --> 01:18:11.100
 Aber wer weiß, vielleicht wird das der Webdesign-Trend 2022.

01:18:11.100 --> 01:18:17.600
 Wer weiß, wer weiß, ich will's nicht, also, äh, also als ich mal gesagt hab, ja, äh, Emoji

01:18:17.600 --> 01:18:20.740
 ist in irgendwie einer App, wo Leute irgendwie Content reintun können, ist ein Killer-Feature,

01:18:20.740 --> 01:18:24.620
 da hab ich die Leute ausgelacht, ja. Äh, aber es gibt manche Leute, es gibt Leute,

01:18:24.620 --> 01:18:27.620
 die sich bei, bei Knuddels Smilies gekauft haben.

01:18:27.880 --> 01:18:34.380
 für echtes Geld, also, äh, das ist, also es gibt Dinge, da kann man echt nicht glauben, dass das irgendwie was ist und, äh,

01:18:34.380 --> 01:18:42.940
 um das jetzt mal zu beschreiben, diese Seite, also dieses, äh, extra-css.netlify.app, ähm, da hab ich so ein paar Boxen mit, äh, paar Schiebereglern,

01:18:43.020 --> 01:18:50.360
 wo ich, äh, Parameter hin und her schieben kann und eben das erste ist dieses, äh, diese angesprochenen Sterne von Konstantin,

01:18:50.360 --> 01:18:56.360
 da kann ich dann irgendwie sagen, naja, wie ist denn, wie ist denn so der Farbton davon, ähm, wie ist denn die Varianz?

01:18:56.360 --> 01:19:02.040
 Also, es ist wie so eine Art Hintergrund für Text, wenn ich das, wenn ich das richtig sehe, so eine Art Hintergrund für,

01:19:02.040 --> 01:19:07.280
 oder Hintergrund für einen Container, ähm, und da kann ich ein bisschen rumschieben und dann verändert sich das.

01:19:07.280 --> 01:19:12.360
 Und das ist eigentlich schon ganz cool, also so, wenn ich mir dann so meinen Custom-Effekt für meine Homepage zusammenklicken kann,

01:19:13.020 --> 01:19:19.100
 das ist genau das, was ich gemeint habe, da muss jetzt jemand, nicht Houdini, bis in die letzte Pore verstanden haben,

01:19:19.100 --> 01:19:26.660
 ähm, sondern, äh, ich hab hier so einen Konfigurator und am Ende fliegt da dann, ähm, wahrscheinlich irgendwie der Code raus,

01:19:26.660 --> 01:19:32.300
 ah, tatsächlich, ah, das sind sogar Code-Pen-Demos, wo ich dann den Code dazu sehe, das ist ziemlich cool.

01:19:32.300 --> 01:19:39.480
 Genau, also, die Library stellt dir Custom-CSS-Properties zur Verfügung, mit denen du dann wiederum Werte beeinflussen kannst.

01:19:39.920 --> 01:20:00.940
 Also vielleicht kann ich kurz mal zitieren quasi aus dem CSS, das da rausgespuckt wird. Ich habe da, da gibt es eine Demo, da wird dann im Hintergrund quasi durchgekreuzt, die Überschrift, da gibt es dann extra minus minus extra minus cross color und extra minus minus extra minus cross width und diese Werte kann ich dann setzen.

01:20:00.940 --> 01:20:22.200
 Es gibt Standardwerte, das ist auch so ein Ding, also ich kann für diese Custom CSS Properties auch Standardwerte definieren, wenn es nicht überschrieben wird und da kann ich eben einfach per Custom Property die Farbe und die Strichstärke ändern, ohne dass ich jetzt das Houdini da im Hintergrund tatsächlich selber geschrieben haben muss. Also ja, so funktioniert das auch und das ist schon recht cool.

01:20:23.500 --> 01:20:30.940
 Ja, wo ist denn jetzt aber da der, der JavaScript-Code, ist der da in dem, der fehlt da, oder?

01:20:30.940 --> 01:20:35.980
 Ja, da bei Resources kannst du, glaube ich.

01:20:36.220 --> 01:20:58.440
 Also ich bin jetzt, ich bin gerade bei, aha, da ist das. Ich bin gerade auf einer dieser CodePen-Demos, weil da ist immer auch CodePen dabei und da habe ich das gesucht und habe so gedacht, hä, wo ist das denn? Aber da ist ganz am Ende ein Script-Tag eingebunden, das tatsächlich nur auf eine externe Ressource zeigt und da ist dann offenbar der Scallop-The-Border-JS.

01:20:58.440 --> 01:21:03.220
 Ah ja, genau, das wird von Unpackage als CDN geladen. Stimmt, deswegen müssen wir es nicht sehen.

01:21:03.220 --> 01:21:14.080
 Genau, weil das finde ich nämlich, das eigentlich Interessante ist nämlich, das passiert darin und da sieht man so Sachen wie zum Beispiel Context, Punkt, Begin, Path und so, das sieht alles schon sehr nach Canvas aus.

01:21:14.080 --> 01:21:23.960
 Nicht, dass ich jetzt mich besonders gut mit Canvas auskennen würde, aber das hat man schon mal gesehen. Also ich habe das erwähnt. Es sieht sehr stark nach, ja, Paint, okay, ja, das ist schon interessant.

01:21:24.360 --> 01:21:28.620
 Ja, vielleicht bin ich jetzt ein bisschen geiler drauf geworden.

01:21:28.620 --> 01:21:37.660
 Das freut mich tatsächlich, wenn ich da ein bisschen anfixen konnte, weil, also, ach genau, ich habe meine eigene Einschätzung noch gar nicht genannt. Das haben wir irgendwie übersprungen, bevor wir schon gleich ins Diskutieren gegangen sind.

01:21:38.080 --> 01:21:59.920
 Also ich finde es cool. Unabhängig davon, dass ich dir recht gebe, dass es noch keine richtig bahnbrechenden Demos gibt und ich jetzt sage, boah, ich brauche das unbedingt, aber ich finde es cool, dass wir als Entwickler die Möglichkeit bekommen, ob man sie jetzt dann nutzen will oder nicht, so tief in die Render-Chain einzugreifen und da Sachen machen zu können.

01:22:00.500 --> 01:22:13.880
 Also ich meine, wie viele, dieses ganze Ökosystem bei JavaScript, wie viele Libraries es da gibt und was die Leute sich da einfallen lassen, um dir die Arbeit zu erleichtern oder Sachen schneller zu machen oder auch einfach nur schöner zu machen.

01:22:13.880 --> 01:22:25.020
 Und ich meine, bei CSS geht es halt hauptsächlich darum, Sachen schöner zu machen, weil wir könnten unsere Seiten auch ohne CSS schreiben, da haben wir es ja gerade in der letzten Folge davon gehabt, hier, Seite ohne CSS-Anzeigen.

01:22:25.020 --> 01:22:36.900
 Das ging natürlich auch ohne, das heißt, natürlich ist vieles davon ist Schmuck und ist Spielerei und soll am Ende einfach nur irgendwie schön aussehen oder besonders pfiffig aussehen, weil das habe ich noch nie auf einer anderen Seite gesehen.

01:22:36.900 --> 01:22:38.880
 Also klar sind das solche Schmucksachen.

01:22:39.560 --> 01:22:52.800
 Ich möchte widersprechen. Ich möchte kurz widersprechen. Design ist nicht nur, wie es aussieht oder dass es hübsch ist. Du kannst, du kannst, Design solltest du immer so einsetzen, dass es besser funktioniert am Ende.

01:22:53.020 --> 01:22:56.400
 Ja, sollte man, dann kommen die Leute mit Glitzer-Text um die Ecke.

01:22:56.400 --> 01:23:08.800
 Ja, Design ist how it works. Nein, also Glitzer-Text jetzt vielleicht nicht, aber ich kann mir schon durchaus vorstellen, dass man damit Dinge macht, die den Inhalt besser verständlich machen oder besser zugänglich machen auf irgendeine Art und Weise.

01:23:09.220 --> 01:23:11.820
 Also wenn ich Design gut einsetze, dann hilft das immer.

01:23:11.820 --> 01:23:25.000
 Da gebe ich dir auch absolut recht, aber ich glaube einfach für solche Demos kommen dann die Leute eher mit solchen Kreativen und irgendwie, oh, ich lasse jetzt meinen Text im Hintergrund knallrot durchstreichen und so.

01:23:25.000 --> 01:23:29.240
 Immer mal Feuerwerk machen mit CSS, das geht nur mit JavaScript, das ist so langweilig.

01:23:29.980 --> 01:23:39.000
 Also zum nächsten Jahreswechsel, mal gucken, ob ich es schaffe, bastle ich eine Demo mit Feuerwerk. So, und dann gucken wir, ob die dann auch in Firefox läuft.

01:23:39.000 --> 01:23:59.840
 Okay, also ihr denkt dran, ihr setzt euch jetzt einen Kalendereintrag und zwar guckt ihr am 31.12. dieses Jahres, guckt ihr auf, wo wir sind, ist vorne.show und da seht ihr dann vielleicht oder vielleicht auch nicht CSS-Feuerwerk von Konstantin.

01:24:00.680 --> 01:24:03.820
 Dann bin ich gespannt, wie gesagt, ob es auch in Firefox laufen wird bis dahin.

01:24:03.820 --> 01:24:09.560
 Das müsste ja, also angenommen, diese, was war das, wie hieß die jetzt nochmal, diese Paint-Arby? Nee, oder?

01:24:09.560 --> 01:24:10.580
 Paintlet.

01:24:10.580 --> 01:24:18.560
 Paintlet, also das, wo man, ja genau. Also angenommen, das funktioniert so ähnlich wie Canvas oder fast genauso.

01:24:18.560 --> 01:24:21.220
 Und Animationen gehen ja auch schon, hat man an dem Ripple gesehen.

01:24:21.220 --> 01:24:26.080
 Canvas-Feuerwerk gibt es ja schon zuhauf, das kannst du dir einfach kopieren.

01:24:26.080 --> 01:24:33.820
 Wenn das wirklich ähnlich funktioniert, dann kannst du so ein Canvas-Feuerwerk einfach mal da reintun und dann hat man das vielleicht schön dann in Houdini als CSS.

01:24:33.820 --> 01:24:36.360
 Schauen wir mal, ich bin genauso gespannt wie du.

01:24:36.360 --> 01:24:38.820
 Und so wie ich den Konstantin kenne.

01:24:39.140 --> 01:24:39.900
 Ist es nächste Woche?

01:24:39.900 --> 01:24:42.480
 Ist es morgen?

01:24:42.480 --> 01:24:43.580
 Nee, ich wünsche ich.

01:24:43.580 --> 01:24:44.900
 In drei Stunden ist es fertig.

01:24:44.900 --> 01:24:49.780
 Es ist zwar etwas ruhig, aber ich habe aus diversen anderen Gründen nicht so viel Zeit.

01:24:49.780 --> 01:24:52.400
 Ich glaube nicht, dass ich das schaffe.

01:24:52.400 --> 01:24:56.140
 Aber bis Ende des Jahres sollte es hoffentlich machbar sein.

01:24:56.140 --> 01:24:57.880
 Wir schauen mal.

01:24:58.960 --> 01:24:59.720
 Vielleicht auch nicht.

01:24:59.720 --> 01:25:04.780
 Also ich befürchte ja, die Motivation wird sterben, wenn du es nicht bis übermorgen gemacht hast.

01:25:04.780 --> 01:25:05.920
 Das kann schon sein.

01:25:05.920 --> 01:25:06.980
 Es ist ja jetzt wirklich ein Ende.

01:25:06.980 --> 01:25:07.800
 Gut.

01:25:07.800 --> 01:25:10.280
 Also ich packe noch ein paar weitere Links.

01:25:10.280 --> 01:25:15.980
 Da habe ich was vom Smashing Magazine gelesen, sogar vom März jetzt 2020, sehr aktuell.

01:25:15.980 --> 01:25:21.300
 Practical Overview, CSS Houdini, Creative Blog, sagt mir jetzt nichts.

01:25:21.300 --> 01:25:23.640
 Da war auch ein Artikel, den habe ich so kurz überflogen.

01:25:23.640 --> 01:25:25.500
 Packe ich alles in die Shownotes rein.

01:25:25.500 --> 01:25:28.920
 Denn wer da Lust hat, sich tiefer einzulesen, kann das damit tun.

01:25:28.920 --> 01:25:36.720
 Ja, und damit wäre ich jetzt auch schon am Ende dieser extrem langen Themen gedöhnt.

01:25:36.720 --> 01:25:38.220
 Ach, so lange war das gar nicht.

01:25:38.220 --> 01:25:39.500
 Hatten wir, glaube ich, oder?

01:25:39.500 --> 01:25:41.440
 Na, wir sind ja noch nicht alles fertig.

01:25:41.440 --> 01:25:43.820
 Kommt ja noch hier Geilteil und Verabschiedung und so.

01:25:43.820 --> 01:25:46.580
 Dann sind wir schon, so im Schnitt sind wir dann schon recht lange.

01:25:46.580 --> 01:25:51.180
 Ja, jetzt kommt ja vielleicht erst mal das.

01:25:51.180 --> 01:25:54.240
 Du hetzt mich nicht.

01:25:55.500 --> 01:26:05.100
 Das Geilteil kommt heute vom Konstantin.

01:26:05.100 --> 01:26:05.800
 Ja, auch wieder.

01:26:05.800 --> 01:26:09.740
 Das heißt, ihr müsst meine zärtliche Stimme noch länger ertragen.

01:26:09.740 --> 01:26:11.980
 Es ist Tab9.

01:26:11.980 --> 01:26:15.300
 Und was ist Tab9?

01:26:15.300 --> 01:26:21.600
 Tab9 ist eine Code Completion und zwar Programmiersprachenunabhängig, basierend auf Machine Learning.

01:26:22.280 --> 01:26:32.760
 Und die gibt es für VS Code, was ja sehr verbreitet ist, aber auch für IntelliJ und auf IntelliJ basierende Systeme, Editoren wie PyCharm oder Android Studio.

01:26:32.760 --> 01:26:40.000
 Die gibt es für Sublime Text, die gibt es für Vim, Emacs, Atom und Jupyter als Plugins.

01:26:40.000 --> 01:26:43.020
 Weiß jetzt noch nicht, ob ich für alle die Plugin-Links dann reinpacke.

01:26:43.160 --> 01:27:01.360
 Zumindest wird das Code, also den neunten Vorschlag, also den neunten Vorschlag, also den neunten Vorschlag in der Code Completion auszuwählen, der ist Tab9 und daher kommt der Name.

01:27:02.460 --> 01:27:04.820
 Und das Ganze ist nicht kostenlos.

01:27:04.820 --> 01:27:09.920
 Es gibt aber einen Freeplan und der hat ein 400kb Projektlimit.

01:27:09.920 --> 01:27:17.880
 Ich muss gestehen, soweit bin ich da jetzt nicht drin, dass ich weiß, ob die 400kb sich jetzt wirklich komplett auf alle Dateien da drin beziehen oder wirklich nur auf die Code-Dateien.

01:27:18.740 --> 01:27:25.900
 Wie das zum Beispiel mit NPM-Skripts ist, da ist man ja dann doch recht schnell über den 400kb leicht mal drüber.

01:27:25.900 --> 01:27:35.280
 Ich habe bis jetzt aber eigentlich immer gute Code-Vollständigungen in allen Projekten gehabt, egal wie viele Packets ich da irgendwie als Dependency habe.

01:27:36.280 --> 01:27:51.340
 Und ja, diese Bezahlgeschichte, die beinhaltet dann Tab9 Cloud, wo der Code eben an eine Server-Farm geschickt wird, wo dann GPU-beschleunigt die Vervollständigung basierend auf Deep-Learning-Modellen passiert.

01:27:51.340 --> 01:27:57.540
 Gibt es aber auch als Self-Hosted für alle, die da gleich Sicherheitsbedenken haben, dass ihr Code da irgendwo hingeschickt wird.

01:27:57.540 --> 01:28:02.080
 Also ich kann das in meinem Unternehmen auch selbst hosten, ist wahrscheinlich nicht ganz günstig.

01:28:02.260 --> 01:28:08.300
 Ich habe Fragen. Ich hätte das zum ersten Mal. Ich weiß, dass du das schon lange auf der Liste hast.

01:28:08.300 --> 01:28:14.060
 Ich nutze das auch selber schon seit bestimmt fast einem Jahr jetzt inzwischen oder dreiviertel Jahr vielleicht.

01:28:14.060 --> 01:28:21.620
 Also ich kenne es nicht. Ich finde, das ist eine extrem interessante Geschichte. Ich weiß, dass ich sowas in V-Skotsch, sowas ähnliches schon mal gesehen habe.

01:28:21.620 --> 01:28:29.640
 Ich habe jetzt Fragen. Was tut das? Also was ich jetzt sehe auf der Webseite, also ich meine, die Hörer sehen es ja jetzt auch nicht,

01:28:29.640 --> 01:28:36.500
 deswegen versuche ich jetzt mal zu erklären, ist, naja, da wird Code getippt und dann gibt es da irgendwie schlaue Vervollständigungen.

01:28:36.500 --> 01:28:45.680
 Und wenn du sagst Machine Learning, dann bedeutet das, das lernt aus dem, was ich schreibe und bietet mir dann das an, was es glaubt, was jetzt am wahrscheinlichsten ist als nächstes.

01:28:45.680 --> 01:28:52.920
 Richtig. Die Projektdateien werden indexiert, aber es gibt auch schon Algorithmen basierend auf, es steht irgendwo eine Zahl auf der Webseite,

01:28:52.920 --> 01:29:00.260
 auf was weiß ich, wie viele Tausenden oder Hunderttausenden oder Zehntausenden Open Source Projekten, die da zum Antrainieren von diesem Modell benutzt wurden.

01:29:00.740 --> 01:29:03.600
 Und ich kann nur sagen, es funktioniert sehr gut.

01:29:03.600 --> 01:29:06.440
 Nutzt Tabline, es ist sehr gut.

01:29:06.440 --> 01:29:14.140
 Mich würde total interessieren, wie bei jeder Autovervollständigung, was passiert, wenn ich da einfach immer nur die Vervollständigung auswähle?

01:29:14.160 --> 01:29:15.860
 Was für ein Programm schreibe ich dann?

01:29:15.860 --> 01:29:18.180
 Dann hast du am Schluss ein Programm zur Übernahme der Weltherrschaft.

01:29:18.180 --> 01:29:19.320
 Nee, ich weiß es nicht.

01:29:19.320 --> 01:29:22.400
 Aber ich kann wirklich nur sagen, es funktioniert wirklich sehr gut.

01:29:22.400 --> 01:29:28.480
 Also wenn ich jetzt irgendwie vor, Klammer aufschreibe und egal, was ich dann als wahr am Anfang mache,

01:29:28.480 --> 01:29:34.940
 es vervollständigt automatisch dann vor I, also wenn ich ein I mache, dann I gleich Null und I plus, I kleiner, was weiß ich.

01:29:34.940 --> 01:29:41.480
 Also die Vervollständigung ist wirklich sehr gut und die hat mir beim Programmieren schon sehr, sehr viel Zeit gespart.

01:29:42.380 --> 01:29:46.200
 Also so eine Code Completion, wenn man jetzt mit dem Editor schreibt, der das nicht hat und der es kann,

01:29:46.200 --> 01:29:52.180
 also man möchte ja eigentlich nie wieder zurück, das ist ja so schon ziemliche Hilfe und ziemliche Zeitersparnis.

01:29:52.180 --> 01:29:55.200
 Aber Tab9 macht das Ganze wirklich sehr, sehr gut.

01:29:55.200 --> 01:30:03.080
 Und da kommen wirklich manchmal Sachen, wo ich mir denke, wie zum Henker weiß das jetzt, dass ich wirklich genau das als nächstes schreiben wollte.

01:30:03.080 --> 01:30:08.980
 Und dann auch teilweise schon mehrere Zeilen hintereinander und dann funktioniert das plötzlich genau so, wie ich es haben wollte.

01:30:08.980 --> 01:30:11.960
 Also ich war wirklich begeistert und bin immer noch begeistert, wie das funktioniert.

01:30:13.100 --> 01:30:17.900
 Jetzt weiß ich leider nicht mehr, wie dieses Plugin hieß, das ich für VS Code mal verwendet habe,

01:30:17.900 --> 01:30:19.700
 das so etwas Ähnliches gemacht hat.

01:30:19.700 --> 01:30:24.060
 Nicht so krass, ich glaube, da waren die Vervollständigungen kleiner, also so mehr nur der nächste Befehl.

01:30:24.060 --> 01:30:29.180
 Jetzt nicht, ich weiß gar nicht, bei Tab9 sieht das jetzt ein bisschen nach mehr aus, als das, was ich da gesehen habe.

01:30:29.540 --> 01:30:38.580
 Aber dass ich dann tatsächlich so merke, naja, wenn er da irgendwie bla bla bla Punkt so und so in JavaScript schreibt, dann kommt wahrscheinlich jetzt dies.

01:30:38.580 --> 01:30:41.560
 Also sowas, das hat, wie hieß das denn noch?

01:30:41.560 --> 01:30:43.260
 Ich habe es jetzt auf die Schnelle nicht gefunden.

01:30:43.260 --> 01:30:48.560
 Es ist nicht dieses Standard Intellizense, was ja in VS Code so standardmäßig mit drin ist.

01:30:48.560 --> 01:30:50.480
 Es war dafür nochmal ein extra Plugin.

01:30:50.940 --> 01:30:54.480
 Ich habe das auch auf meinem Arbeitsrechner im Einsatz, aber den habe ich jetzt gerade nicht.

01:30:54.480 --> 01:30:56.520
 Wenn wir es finden, dann packen wir es auf jeden Fall in die Shownotes.

01:30:56.520 --> 01:31:01.520
 Genau, wenn ich es noch finde, dann packe ich es noch in die Shownotes, weil vielleicht, also es war auf jeden Fall kostenlos.

01:31:01.520 --> 01:31:03.080
 Da musste man nichts bezahlen.

01:31:03.080 --> 01:31:04.920
 Zu dem Preismodell wollte ich noch kurz was sagen.

01:31:04.920 --> 01:31:09.320
 Ja, ich möchte auch noch kurz was sagen zu Free und Paid.

01:31:09.320 --> 01:31:23.100
 Das ganze Projekt selbst, Tab9, ist in Rust geschrieben und als Tribute an das ganze Rust-Ökosystem sind daher alle Bezahlfeatures für Rust-Code immer aktiviert.

01:31:23.100 --> 01:31:29.360
 Also wenn ich was in Rust programmiere und habe aber keine Lizenz für Rust-Code, wird die Vervollständigung trotzdem gemacht.

01:31:30.340 --> 01:31:34.960
 Das finde ich eigentlich ziemlich cool, so vom Entwickler als dann an dieses Ökosystem.

01:31:34.960 --> 01:31:45.700
 An dem Bezahlmodell fand ich jetzt, dass das gar nicht mal so, du zahlst jetzt einmal und dann kannst du es benutzen, sondern es ist tatsächlich so ein Abo-Modell, wenn ich das richtig sehe.

01:31:45.700 --> 01:31:52.160
 Ja, es gab früher mal Lizenzen, sieht man auch noch in den FAQ-Gestandpunkt dazu, es gab mal solche Pay-Once-Geschichten.

01:31:53.020 --> 01:32:01.580
 Wenn man da aber dann dieses Cloud-Gedöns nutzen will, dann kann man sich nur den Wert quasi von dieser Lizenz, die man gekauft hat, gegenrechnen lassen als Rabatt.

01:32:01.580 --> 01:32:05.500
 Aber inzwischen geht es nur noch mit Subscription.

01:32:05.500 --> 01:32:10.740
 Und das spricht immer mit der Cloud oder das geht auch bei mir lokal?

01:32:10.740 --> 01:32:17.260
 Also wie gesagt, du kannst es auch Self-Hosting betreiben, du kannst es auch projektbasiert deaktivieren, soweit ich das weiß.

01:32:17.260 --> 01:32:26.540
 Dass du jetzt sagst, oh jetzt arbeite ich an diesem ultra geheimen Projekt, von dem niemand was wissen darf und da möchte ich das nicht, dass das zur Cloud geht.

01:32:26.540 --> 01:32:29.080
 Also das kann man schon verhindern, dass das so gemacht wird.

01:32:30.080 --> 01:32:42.580
 Und wie gesagt, du musst es auch nicht nutzen, also du kannst auch den Freeplan nutzen und diese Cloud-Geschichte ist also auch nochmal on top, also du kannst es auch einfach komplett lokal nutzen, ohne dass da irgendwas irgendwo hingeschickt wird.

01:32:42.580 --> 01:32:45.740
 Also klingt für mich tatsächlich sehr interessant.

01:32:45.740 --> 01:32:52.820
 Ja, schau es dir mal an, ich bin gespannt, vielleicht kannst du auch mal nach so ein bisschen Testzeit in einer der nächsten Folgen mal berichten, wie du es so findest.

01:32:53.200 --> 01:33:01.220
 Weil ich meine, wir bekommen ja nichts dafür, wir stellen ja hier als Geilteil wirklich Sachen vor, die wir einfach cool finden, egal ob das jetzt Freeware oder halt Payzeug ist.

01:33:01.220 --> 01:33:06.120
 Also ich habe zum Beispiel auch keine Lizenz davon, ich habe das nicht gekauft und ich kriege auch nichts, wenn es jemand kauft.

01:33:06.120 --> 01:33:10.220
 Ref-Links in den Podcasts sowieso auch ein bisschen schwierig, auch gut über unsere Seite.

01:33:10.220 --> 01:33:11.440
 Aber was? Nein.

01:33:11.440 --> 01:33:16.700
 Geht auf tab9.com slash Fragezeichen, Ref ist gleich, nein.

01:33:16.700 --> 01:33:20.420
 Ref gleich Konstantin, der coole Checker.

01:33:20.420 --> 01:33:21.700
 Oh, wow.

01:33:21.840 --> 01:33:26.120
 Ja, das ist, da kriegt ihr einen 0% Rabatt.

01:33:26.120 --> 01:33:26.500
 Genau.

01:33:26.500 --> 01:33:34.340
 Ja, also wie gesagt, das ist wirklich sehr brauchbar in meinen Augen und das sind immer wieder Sachen da, die mich überraschend an Vorschlägen.

01:33:34.340 --> 01:33:42.220
 Das sieht auf jeden Fall echt cool aus und ich finde, also das ist sowas, was ich bei Podcasts an Monetarisierung echt okay finde, sind Ref-Links.

01:33:42.220 --> 01:33:43.700
 Absolut, total.

01:33:43.700 --> 01:33:44.760
 Ja, klar auch nicht.

01:33:44.760 --> 01:33:50.640
 Weil es ist ja nicht so, dass wir hier eine Produktsendung sind, wir reden ja nicht, wir reden ja über Sachen, die wir wirklich gut finden.

01:33:51.200 --> 01:33:53.600
 Naja, heute haben wir über Houdini gesprochen.

01:33:53.600 --> 01:33:56.580
 Wir reden über Sachen, die einer von uns gut findet.

01:33:56.980 --> 01:33:59.100
 Ja, das kostet, Houdini kostet ja auch nichts.

01:33:59.100 --> 01:34:05.160
 Noch ist Houdini kostenlos, vielleicht hängt da Google irgendwann noch ein Preisschild dran.

01:34:05.160 --> 01:34:10.360
 Naja, nun, also ich fand das, ich werde es auf jeden Fall mal ausprobieren.

01:34:10.360 --> 01:34:13.540
 Auf jeden Fall mal irgendwie free planen, das ist immer gut, wenn es sowas gibt.

01:34:13.640 --> 01:34:20.420
 Das heißt, ich muss nicht gleich jetzt von Anfang an dafür Geld bezahlen und wer weiß, vielleicht bin ich ja mega überzeugt und zahle dann die 15 Dollar im Monat.

01:34:20.420 --> 01:34:24.800
 Oder ich kaufe gleich die Enterprise, wo nicht steht, was es kostet.

01:34:24.800 --> 01:34:26.780
 Contact us for pricing.

01:34:26.780 --> 01:34:27.440
 Die Enterprise.

01:34:27.660 --> 01:34:33.480
 Schreibe ich doch gleich mal an Raumschiff Enterprise at tab9.com.

01:34:33.480 --> 01:34:34.900
 Genau.

01:34:34.900 --> 01:34:37.420
 Jetzt reicht es mir, den schlechten Wortspielen.

01:34:37.420 --> 01:34:39.720
 Ach, Moment, warte mal, warte mal, warte mal.

01:34:41.720 --> 01:34:43.160
 Ah ja, das ist der Gute, das ist der Gute.

01:34:43.160 --> 01:34:44.560
 Nee, das war der Schlechte.

01:34:44.560 --> 01:34:46.060
 Nein, ich finde das viel besser.

01:34:46.060 --> 01:34:47.540
 Achso, du findest ihn ja besser, okay.

01:34:47.540 --> 01:34:53.380
 Du kannst natürlich, wenn du bei dem anderen noch eine geile Bassdrum unter das Becken packst, dann bin ich vielleicht bei dir.

01:34:53.380 --> 01:34:54.180
 Mach das andere nochmal.

01:34:54.180 --> 01:34:58.820
 Das ist doch nur lauter und das ist total schlecht gespielt.

01:34:58.820 --> 01:35:01.560
 Das ist ein echtes Schlagzeug, das andere ist halt einfach nur so Synthesizer.

01:35:01.560 --> 01:35:03.400
 Aber gut, egal, egal.

01:35:03.400 --> 01:35:04.860
 Ja, hast du das selbst gebaut?

01:35:04.860 --> 01:35:09.100
 Nee, nee, nee, hab ich bei freesound.org runtergeladen.

01:35:10.360 --> 01:35:14.100
 Okay, ich, nee, das ist eigentlich fast zu aufwendig, sowas einzuspielen.

01:35:14.100 --> 01:35:17.720
 Ich hab gerade überlegt, ob ich sowas mal machen soll.

01:35:17.720 --> 01:35:20.580
 Ach ja, mit einem Metal-Schlagzeug oder so.

01:35:20.580 --> 01:35:23.440
 Und ein China-Becken ist ganz wichtig dann.

01:35:23.440 --> 01:35:28.200
 Gut, ich glaube, damit sind wir mit dem Geil-Teil fertiggegeilt, oder?

01:35:28.200 --> 01:35:31.480
 Ja, ich glaube, damit sind wir auch mit der Show eigentlich soweit durch.

01:35:31.480 --> 01:35:35.560
 Wow, das war jetzt echt wieder ganz schön viel Gesabbel von mir.

01:35:35.560 --> 01:35:39.360
 Ich kann mir vorstellen, dass das als, also für mich ist es zum Sprechen schon ganz schön anstrengend,

01:35:39.500 --> 01:35:41.300
 wenn ich mir jetzt auch noch zuhören müsste.

01:35:41.300 --> 01:35:46.320
 Also ich kann mir vorstellen, dass das schon anstrengend ist, die gleiche Person immer am Stück reden zu hören.

01:35:46.320 --> 01:35:49.420
 Also ich fand das letztes Mal ganz cool, als wir zusammen was vorbereitet haben.

01:35:49.420 --> 01:35:54.300
 Das wird halt einfach nicht immer gehen, weil wir können nicht einfach nur die Newsartikel von letzter Woche durchgehen,

01:35:54.960 --> 01:35:58.460
 sondern wir wollen ja schon auch mal irgendwie so ein Thema ein bisschen breiter durchkauen.

01:35:58.460 --> 01:36:05.800
 Ich hoffe, dass wir das geschafft haben, dass wir es zwischendrin mal ein bisschen unterbrochen haben mit Fragen und so und mit Einschätzungen.

01:36:05.800 --> 01:36:09.600
 Falls es langweilig war und sehr lang, tut mir leid.

01:36:10.640 --> 01:36:11.260
 Mir nicht.

01:36:11.260 --> 01:36:16.800
 Kriegen wir mal wieder auf den Finger gehauen, dass wir anderthalb Stunden gepodcastet haben.

01:36:16.800 --> 01:36:20.180
 Ich bin ja super froh, dass die Technik heute wieder sehr gut funktioniert hat.

01:36:20.180 --> 01:36:20.780
 Am Anfang nicht.

01:36:20.940 --> 01:36:26.100
 Also wir haben, glaube ich, eine Stunde damit verbracht, rauszufinden, was mit der Technik los ist.

01:36:26.100 --> 01:36:29.760
 Und dann hat es irgendwie, Schlagacht hat es funktioniert.

01:36:29.760 --> 01:36:31.040
 Ja, aber magisch, magisch.

01:36:31.040 --> 01:36:35.240
 Als wir gerade dabei waren, dem Problem so richtig tief auf den Grund zu gehen.

01:36:35.240 --> 01:36:37.580
 Also ich glaube, da steckt jemand dahinter.

01:36:37.580 --> 01:36:41.220
 Ja, da steckt bestimmt mehr dahinter.

01:36:41.220 --> 01:36:44.800
 Vielleicht das asoziale Netzwerk, wer weiß.

01:36:45.960 --> 01:36:51.400
 Gut, also wir versuchen das nächste Mal, die nächste Male vielleicht wieder ein bisschen abwechslungsreicher zu machen.

01:36:51.400 --> 01:37:00.680
 Und wie gesagt, wir sind auf euer Feedback angewiesen und ja, es kam bisher noch nicht viel, was wir inhaltlich anders machen könnten.

01:37:00.680 --> 01:37:05.300
 Außer jetzt, was du gesagt hast mit der Länge, was ich aber halt nicht glaube, dass wir da arg viel dran rütteln werden.

01:37:05.300 --> 01:37:07.120
 Vielleicht wird es mal nur eine Dreiviertelstunde oder so.

01:37:07.120 --> 01:37:11.600
 Aber so insgesamt sind wir, glaube ich, schon mit diesem anderthalb Stunden Ding, eine bis anderthalb Stunden.

01:37:11.600 --> 01:37:13.660
 Das ist, glaube ich, so unser Ding.

01:37:14.760 --> 01:37:16.480
 Ja, darauf läuft es irgendwie immer hinaus.

01:37:16.480 --> 01:37:19.420
 Wir können uns nicht kürzer fassen und wir labern einfach sehr gerne.

01:37:19.420 --> 01:37:21.260
 Und wir schneiden das dann auch nicht raus.

01:37:21.260 --> 01:37:24.040
 Also ich glaube, bei der letzten Folge ist gar nichts geschnitten worden.

01:37:24.040 --> 01:37:26.900
 Das wird wahrscheinlich heute wieder auch drauf hinauslassen.

01:37:26.900 --> 01:37:32.680
 Ja, ich habe hier das Problem, dass mein Schreibtisch sehr mit vibriert, sobald ich nur irgendwie eine Bierflasche abstelle oder so.

01:37:32.680 --> 01:37:33.820
 Ja, sowas hier.

01:37:33.820 --> 01:37:36.440
 Das habe ich, glaube ich, letztes Mal ein paar Mal rausgeschnitten.

01:37:36.440 --> 01:37:39.860
 Oder meine Tastatur, die auch sehr laut klappert.

01:37:39.860 --> 01:37:41.500
 Ja, aber das gehört doch dazu.

01:37:41.500 --> 01:37:44.620
 Das sind doch die Soundeffekte, die das Ganze erst richtig echt machen.

01:37:44.760 --> 01:37:46.360
 Ich glaube, es reicht jetzt, verdammt nochmal.

01:37:46.360 --> 01:37:48.400
 Ich wollte noch was hier.

01:37:48.400 --> 01:37:51.980
 Wir sind jetzt im Werbeblock angelangt und heute bin ich zufällig.

01:37:51.980 --> 01:37:54.600
 Also wie gehe ich da jetzt ran?

01:37:54.600 --> 01:38:03.840
 Ich wurde heute darauf hingewiesen und ich wusste das vorher schon, aber ich wurde heute noch darauf hingewiesen, dass es einen Film gibt, der so ähnlich heißt wie unser Podcast.

01:38:04.980 --> 01:38:06.220
 Ja, der heißt, glaube ich, sogar genauso.

01:38:06.220 --> 01:38:09.080
 Ja, das ist nur der Untertitel.

01:38:09.080 --> 01:38:12.160
 Der heißt Global Player, wo wir sind, ich vorne.

01:38:12.160 --> 01:38:13.280
 Aha, okay.

01:38:13.280 --> 01:38:14.780
 Das heißt wirklich ich.

01:38:14.780 --> 01:38:19.500
 Also ich meine, wäre sehr, sehr passend, weil da, wo wir herkommen, wird auch ich gesagt.

01:38:19.980 --> 01:38:21.540
 Aber ist das nur am Rande.

01:38:21.540 --> 01:38:27.940
 Also wenn man uns googelt, dann, naja, ist es schwierig, uns zu finden derzeit, wenn man einfach nur, wo wir sind, ist vorne einen gibt.

01:38:27.940 --> 01:38:29.700
 Also Podcast muss man schon noch dahinter packen.

01:38:29.700 --> 01:38:32.860
 Also das habe ich heute gemacht, um zu gucken, wie stehen wir denn bei Google.

01:38:33.540 --> 01:38:39.660
 Und der erste Treffer ist, glaube ich, Podcast.de, wenn ich es richtig weiß, wenn man, wo wir sind, ist vorne Podcast eingibt.

01:38:39.660 --> 01:38:43.140
 Und da habe ich uns auch eingetragen.

01:38:43.140 --> 01:38:45.880
 Also es ist total okay, dass wir irgendwie da sind, dass man uns da findet.

01:38:45.880 --> 01:38:50.300
 Ist ja auch gut, man findet also den Podcast tatsächlich, nicht direkt erst unsere Seite.

01:38:50.300 --> 01:38:55.640
 Aber da fiel mir dann auf, da gibt, da haben wir schon Bewertungen und davon ist keine jetzt von mir selbst,

01:38:55.640 --> 01:39:01.880
 sondern wir haben da irgendwie vier Bewertungen, alle fünf Sterne, also insgesamt durchschnittlich fünf Sterne, also fünf Sterne Bewertungen.

01:39:02.080 --> 01:39:08.100
 Vielen Dank an die anonymen Bewerter, keine Ahnung, wer das war, an die anonymen Sterne Spender.

01:39:08.100 --> 01:39:08.420
 Sterne Spender.

01:39:08.420 --> 01:39:14.900
 Ja, gerne, gerne mehr davon, aber das hat mich sehr gefreut, da bin ich so zufällig drüber gestolpert.

01:39:14.900 --> 01:39:24.340
 Also sowas immer, also, ja, genau, also auch gerne überall bewerten, gerne auch bei Apple, da sind es, glaube ich, noch nicht so viele, so viele.

01:39:24.340 --> 01:39:26.760
 Gibt es da auch, haben wir da auch Bewertungen?

01:39:26.760 --> 01:39:31.780
 Da haben wir auch schon Bewertungen, ich glaube, da sind wir ja auch bei fünf,

01:39:31.780 --> 01:39:37.500
 Durchschnittlich noch, ich weiß nicht, wie viele es da sind, äh, könnte ich jetzt mal nachgucken, dazu müsstest du aber kurz übernehmen.

01:39:37.500 --> 01:39:50.580
 Ja, ich glaube, da kommt man da drauf, oder darf man das nur, wenn man, wenn man ein teures iOS-Gerät hat, kriege ich hier Apple Podcasts, wo wir sind, ist vorne, tippel, tippel, tippel.

01:39:51.300 --> 01:39:56.100
 Also, es gibt auf jeden Fall was im Browser, und da haben wir, da sind wir irgendwie auch schon bei fünf, und das ist ziemlich cool.

01:39:56.100 --> 01:40:01.960
 Da sehe ich nur so eine, hm, Seite, wo alle Folgen aufgelistet sind, da sehe ich aber keine Sternchen.

01:40:02.680 --> 01:40:22.860
 Ich sehe das in der, in der App auf dem iPad, da sehe ich Sternchen, und da sind wir bei 5,0, äh, auch, und das ist auch cool, also, das hilft uns extrem, weil, wenn wir da eine gute Bewertung haben, dann tauchen wir auch in den Charts da ein bisschen höher auf, und dann finden wir noch mehr Leute, die uns hören wollen, weil, ähm, wir, wir zielen ja so auf mindestens, äh, circa 400.000 Hörer pro Folge.

01:40:23.400 --> 01:40:27.460
 Das ist so unser erstes Ziel, das wollen wir so gegen Ende des Monats, äh, erreicht.

01:40:27.460 --> 01:40:28.500
 Gegen Ende des Monats, okay.

01:40:28.500 --> 01:40:32.420
 Puh, da kriege ich vorher noch meine, meine Firework-Demo fertig.

01:40:32.420 --> 01:40:38.560
 Ja, siehste, also, und wenn's nur dafür ist, dass die Leute dann hier mal vorbeikommen.

01:40:38.560 --> 01:40:42.700
 Nee, aber auch so, schon entwickeln sich die Zahlen tatsächlich sehr positiv.

01:40:42.700 --> 01:40:51.520
 Ich, äh, schaue da täglich in die Statistik, und ich freue mich echt immer wieder, gerade jetzt nach dem letzten Wochenende, äh, wo wir da so ein bisschen auf Twitter beworben haben.

01:40:52.220 --> 01:40:54.480
 Ja, also, es ist schön, wie's läuft.

01:40:54.480 --> 01:40:55.880
 Darf doch unsere Kriegs nicht verraten.

01:40:55.880 --> 01:41:00.280
 Pssst, ich sag ja nicht, was wir gemacht haben, wir haben halt nur auf dem Filter was gemacht.

01:41:00.280 --> 01:41:11.240
 Genau, ja, also, bewertet uns, äh, erzählt weiter, das haben wir ja alles am Anfang schon gesagt, das wollen wir auf jeden Fall haben, da freuen wir uns sehr drüber.

01:41:11.240 --> 01:41:21.980
 Ja, nochmal, weil es uns so wichtig ist, weil ich meine, wir wollen mehr Leute erreichen, weil es macht mehr Spaß, je mehr Leute zuhören, und je mehr Feedback wir bekommen, also bitte, bitte, weiter empfehlen, drüber sprechen.

01:41:21.980 --> 01:41:23.120
 Äh, ja.

01:41:23.120 --> 01:41:25.120
 Ja, danke, danke.

01:41:25.120 --> 01:41:26.020
 Danke und tschüss.

01:41:26.020 --> 01:41:27.280
 Und tschüss.

01:41:27.280 --> 01:41:30.300
 Ja, diesmal keine Flöte im Outro, würde ich sagen.

01:41:30.300 --> 01:41:32.700
 Ja, es hat wohl mir in den Ohren wehgetan.

01:41:32.700 --> 01:41:34.780
 Kam, haben wir jetzt Feedback gehalten.

01:41:34.780 --> 01:41:35.940
 Ja, und?

01:41:35.940 --> 01:41:37.240
 Ja, also, das war ja...

01:41:37.240 --> 01:41:38.740
 Ich hab dann geantwortet, ja, Ziel erreicht.

01:41:38.740 --> 01:41:41.840
 Ja, genau, Ziel erreicht, wollte ich auch sagen.

01:41:41.840 --> 01:41:46.360
 Gut, dann, äh, macht's gut, wo auch immer ihr seid.

01:41:46.360 --> 01:41:47.760
 Und bis in zwei Wochen.

01:41:47.760 --> 01:41:50.020
 Ja, haut rein, Freunde.

01:41:50.020 --> 01:41:50.580
 Ciao.

01:41:50.580 --> 01:41:50.640
 Ciao.