Wo wir sind, ist vorne, Folge 6. Heute geht's um Houdini.
Herzlich willkommen bei Wo wir sind, ist vorne.
Frontend-Fakten-Frotzeleien.
Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.
Herzlich willkommen bei Wo wir sind, ist vorne, Folge Nummer 6.
Heute haben wir zumindest vor, über Houdini zu sprechen. Mal schauen, ob wir da auch hinkommen.
Ja, hoffentlich.
Ja, mehr habe ich gar nichts zu begrüßen. Einfach nur Hallo, Hallo, neue Folge, neues Glück.
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.
Ja, coole Sache auch. Herzlich willkommen von mir. Der Konstantin Reuspert sich nochmal kurz. Das darf er auch.
Wir haben noch keine Reuspertasten.
Ja, meine Stimme geht gerade irgendwie weg, aber wir haben ja auch nur irgendwie ein, zwei Stunden Sendung vor uns.
Was, nur zwei Stunden? Also heute wollte ich eigentlich mindestens vier Stunden machen.
Gut, alles klar. Dann muss ich meine Kehle dazu ölen. Ich habe nämlich eine trockene Kehle. Lass uns anstoßen erst mal.
Ganz kurz, ich habe Feedback bekommen zur Folgen.
Oh, ja, okay, dann machen wir das zuerst.
Ja, also das, naja, war nur, war so direktes Feedback. So, ja, wer soll sich das denn anhören so lange?
Habe ich gemeint, naja, Podcast muss man nicht am Stück hören. Also ich höre viele Podcasts, die gehen über mehrere Stunden.
Ja, da käme ich auch gar nicht dazu.
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.
Aber das kann eigentlich nur von jemandem gekommen sein, der sonst nicht so viele Podcasts hört.
Das würde ich nicht sagen.
Ja, nicht mal?
Ja, das würde ich nicht sagen.
Weil was ich so an Podcasts höre, das geht also mindestens eine Stunde.
Also es gibt Podcasts, die gehen eine Viertelstunde. Also es gibt wirklich auch sehr, sehr viele, sehr kurze Podcasts.
Gut, dann reden wir jetzt einfach doppelt so schnell, dann sind wir schneller durch. Lassen Sie anfangen.
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.
Weil sonst verstehen sie sich nicht.
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.
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.
Aber wie gesagt, man kann uns auch in Raten hören.
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.
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.
Ja, klar, klar, natürlich.
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.
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.
Aber bevor jetzt allein schon die Begrüßung...
Nein, nein, nein, ganz kurz noch, ganz kurz, ganz kurz noch.
Okay, okay, okay.
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.
Absolut, liebend, gerne. Dann kann ich an der Stelle auch noch gleich an. Jetzt ist meine Stimme gleich echt ganz weg.
Ach Mensch, Konstantin.
Wir hatten zu viel Vorschau-Geplänkel.
Ja, wir sollten einfach nicht zwei Stunden vorher noch reden.
Genau.
Du wolltest aus dir zu sprechen kommen, oder?
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.
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.
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?
Ja, unbedingt. Und naja, also, der Hashtag, den haben wir übrigens gekauft, den darf jetzt kein anderer mehr verwenden.
Copyright. Trademark.
Du wolltest vorhin schon zum Getränk kommen, wollen wir das noch machen?
Ja, natürlich.
Also ich habe noch nichts, ich habe es noch nicht offen, aber ich öffne es mal.
Ich mache auch mal.
Das klang gut.
Ah, ja gut, dagegen komme ich nicht an.
Schön übersteuert.
Mit meinem, wie soll ich sagen, kommerziellen, auf Spanisch gemachten Getränk, nee, mexikanisch gemachten Bier-Mischgetränk.
Dann ist schon klar, was du hast.
Ja, du kannst es auch sehen im Vergleich zu unseren.
Ach so, ist es gar nicht.
Nee, kannst du doch sagen, oder?
Nee, nee, nee, es ist kein Corona.
Oder schämst du dich?
Schämst du dich?
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.
Alles klar.
Ich trinke einen Mönchshof, das ist, glaube ich, nicht so bekannt.
Das ist klein genug, dass man es aussprechen darf.
Kann man sagen, einen Mönchshof-Natur-Radler trinke ich heute.
So, und dann muss ich jetzt gleich mal einen beherzten Schluck davon nehmen, damit ich hier weiterreden kann.
Ja, aber was, dann muss ich ja jetzt währenddessen was reden.
Das ist ja, also, jetzt bin ich total hier ganz bisschen alleine gelassen.
Dann hau ich jetzt einfach, ich hau jetzt einfach den Retro-Shingel raus.
Ja, genau, ich wollte es gerade sagen.
BWSIV präsentiert die Retrospektive.
Ja.
Jetzt musst du auch reden.
Was? Nee, du stehst als erstes bei der Retro.
Ja, ich habe gar nicht, ich habe technisch gar nichts groß zu berichten von den letzten zwei Wochen.
Ich habe mein Büro aufgeräumt.
Ich habe die ruhige Zeit mal genutzt, um ein bisschen Klarschiff zu machen.
Und ja, erstaunlich, was da so alles zutage tritt.
Ich habe jede Menge physische Datenträger gefunden.
Also, spindelweise CD und DVD-Rs und RWs, bevor die USB-Sticks modern geworden sind.
Und natürlich auch eine Handvoll USB-Sticks.
Nutzt du noch USB-Sticks?
Ich versuche es zu vermeiden.
Ganz, ganz selten.
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.
Also, ich habe das, dafür benutze ich die noch.
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.
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.
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?
MKV-Matroska, ja.
Also, da war eine Folge einer Serie drauf, relativ groß, irgendwie, keine Ahnung, drei Gigabyte oder so.
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.
Das hat auch funktioniert, der Film lief, der USB-Stick wurde währenddessen ziemlich heiß und am Ende konnte ich ihn wegwerfen.
Der war am Ende kaputt.
Das sollte eigentlich nicht so sein.
Aber ansonsten, glaube ich, Betriebssysteme.
Ja, stimmt, das ist jetzt, wo du es sagst, tatsächlich auch, ja.
Inzwischen lebt man die sich als Image runter, formatiert den Stick irgendwie auf FAT32 und haut das drauf und installiert darüber das Betriebssystem.
Ja, das ist so der einzige Anwendungsfall, der mir auffällt und ich habe da echt eine Handvoll gefunden.
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.
Aber ansonsten liegen die Dinger hier auch zu Hauf rum und werden nicht benutzt.
Und was mir auch aufgefallen ist, Papierkram hat dankenswerterweise echt abgenommen mit den Jahren.
Also ich habe auch so ein paar Steuerunterlagen mal aussortiert und Sachen weggeschmissen, die zu alt waren.
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.
Also es passiert zunehmend mehr digital, auch jetzt, wenn man die Sachen auch einfach einscannen kann und ans Finanzamt schicken oder hat ein Steuerberater.
Ja, positive Entwicklung, was auch mit Digitalisierung zu tun hat.
Ich habe noch viel zu viel Papier, so Büropapier.
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.
Ja, ich muss mal wieder Ablage machen.
Ich bin sehr gespannt, ob sich das auch akustisch bemerkbar macht.
Also ihr wisst Bescheid, weil es so klingt, als ob ich vom Podcaste.
Entschuldigung, der musste einfach sein.
Oh Gott, nein, nein, nein, da müssen wir kurz einhaken.
Also ich glaube, wir müssen tatsächlich irgendwie eine Wortspielkasse oder sowas, müssen wir, also.
Da werden wir ja arm.
Das geht, das geht wirklich nicht.
Na obwohl, naja, ich habe mich ja heute auf Twitter auch nicht unbedingt mit rumbekleckert.
Also soll ich den eigentlich nochmal vorlesen?
Meinst du, also dann, dann werden wir vielleicht wieder ausgeglichen.
Dann sind wir quit, ja, mach.
Ja, dann sind wir quit.
Also heute, heute bei Twitter, heute hat es mich einfach gepackt.
Das war so ein bisschen Homeoffice-Wahnsinn.
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.
Und da floss Folgendes aus meiner Feder auf Twitter.
If you want to animate, choose transform over margin, mate.
Du kriegst sogar das teurere Schlagzeug.
Meinst du, das klang doch schön billig?
Ja, nee, nee, nee, nee.
Ich fand das andere besser, weil bei dem hat nämlich, ja, ich sag dir den entscheidenden Unterschied.
Bei dem fehlt die Bassdrum bei dem Becken.
Stimmt, ja, jetzt wo du das sagst, ja.
Und das lässt halt sehr, sehr leer klingen.
Ja, ja, der Musik, der Schmusiker.
Okay, wollen wir mal zu deiner, zu deiner Retro vordringen?
Ja, meine Retro ist ziemlich kurz.
Also, ich hab, glaub ich, in der letzten Folge schon mal gesagt, ich hab mich mit Emojis beschäftigt.
Ich hab mich noch ein bisschen über Emojis geärgert jetzt die letzten Tage.
Ich will da jetzt auch nicht zu viel vorwegnehmen.
Wir machen vielleicht noch mal eine Folge zu Emojis und wie man sie einbindet und anzeigt und rendert und keine Ahnung.
Deswegen will ich dazu gar nicht zu viel sagen.
Ich hab da, ich hab auf meiner Liste steht Koffein.
Warum hab ich denn das da drauf geschrieben?
Da hat's dir vielleicht gerade dran gemangelt oder so.
Ja, stimmt.
Ich litt unter Koffeinmangel.
Ich hab mir jetzt wieder, ich hab jetzt wieder Stoff.
Es ist wieder was im Haus, obwohl ich vielleicht auch mal versuchen sollte, ganz ohne.
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.
Und das bringt dann eigentlich gar nichts.
Also der Kick bleibt raus.
Dann musst du das Level einfach nur hochfahren.
Nee, ist so.
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.
Wenn man da auch so zu Hause sitzt, dann steigt der einfach.
Was heißt im Haushalt? Meinst du damit dich oder den Rest?
Mich und den Rest.
Nee, nee, auch meine Frau.
Der Hund trinkt deutlich mehr Kaffee seit der Quarantäne.
Genau.
Ja, ist klar.
Also ich meine, das ist die Corona-Kaffeesucht, die da bei den Hunden ganz typisch ist, hab ich gehört.
Absolut, es muss auch Gewinner geben in dieser Krise und das sind die Kaffeepulverhersteller.
Oh Gott.
Okay.
Ja, auf meiner Retro steht noch Staub.
Staub.
Ja, Staub hatte ich auch jede Menge im Büro.
Also es ist so, ich versuche immer alles zu automatisieren.
Ich habe auch so einen Robo-Sauger schon seit einigen Jahren.
Ich bin auch sehr dankbar, dass ich das Ding habe, aber Staub setzt sich trotzdem überall hin.
Und ich habe in meiner Wohnung relativ viele, also vor allem in der Küche, so weiße Flächen oder helle Flächen.
Aber es ist egal, auch auf dunklen Flächen sieht man den Staub hervorragend.
Ich weiß nicht, ob schon die optimale Farbe erfunden wurde, wo man Staub nicht sieht.
Also im Zweifelsfall sind es vielleicht diese grauen Industrieteppiche, die in vielen Büros liegen.
Das ist bestimmt so die optimale Farbe.
Sonst würde man sehen, wie das aussieht nach dem, was manche Kutzen nennen.
Ja, und im Homeoffice bin ich dann öfter mal zu Hause, während die Sonne hier reinscheint.
Also ich muss kurz erklären, meine Wohnung ist im Erdgeschoss in der Stadt in Karlsruhe.
Und viele hohe Häuser drumherum.
Das heißt, es gibt nur so ein ganz kleines Zeitfenster am Tag, wo die Sonne überhaupt bei mir durchs Fenster reinscheint,
weil das sonst immer von den Häusern drumherum abgeschirmt wird.
Und vor Corona habe ich eigentlich so gut wie nie mitgekriegt, dass Staub in meiner Wohnung ist.
Weil ich nie zu den Zeiten, wo die Sonne so richtig reingescheint hat, da war.
Aber wenn die Sonne reinscheint, dann sieht man den Staub überall.
Man hat das Gefühl, es ist alles unglaublich dreckig.
Jetzt ist die Frage, bin ich eine Sau?
Und ist das bei anderen anders?
Ja, Moritz, du bist eine Sau aus mehreren Gründen, aber lassen wir es einfach so stehen.
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.
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,
weil ich will auch nicht nur den ganzen Tag putzen.
Naja gut, das ist schon sehr weit weg von unserem Podcast-Thema, aber deswegen beende ich jetzt hiermit auch die Retro.
Das ist eine wundervolle Idee.
Die Property der Woche.
Ja, eigentlich, wieso mache ich denn eigentlich das Echo?
Warum echoe ich eigentlich unsere ...
Weil der Finger nicht aussagekräftig genug ist.
Man weiß gar nicht, was jetzt kommt.
Was ist das?
Ich sage das vielleicht auch einfach so gerne.
Nee, bei Lehrern nennt man ja das Lehrer-Echo.
Wenn man wiederholt, was der Schüler gesagt hat, dann soll man auf keinen Fall machen, habe ich irgendwie mal gehört.
Ja, soll man auf keinen Fall machen, habe ich gehört, ja.
Ja.
Ich höre mich irgendwie doppelt, aber ich klinge verzögert irgendwie ein bisschen anders.
Die Property der Woche ist Scroll Margin Top, eine CSS-Property.
Und ich habe in Vorbereitung auf die Sendung herausgefunden, dass alles, was ich darüber glaubte zu wissen, falsch ist.
Beziehungsweise, die ist für was ganz anderes gedacht, als ich das eigentlich dachte oder wofür ich sie verwende.
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.
Und dann springen meine Ankerlinks, also Scroll Margin Top auf dem Bereich, wo ich hinspringen möchte, ganz wichtig.
Und dann springt die Seite an die Stelle eigentlich ganz nach oben, aber plus diesen Wert.
Das heißt, mein oberster Bereich, da wo die ID angesiedelt ist von dem Ankerlink, die ist dann trotzdem sichtbar.
Weil das klassische Problem, was man oft hat, ist, dass der Anker dann an eine Stelle springt unter dem fixen Bereich.
Ich weiß nicht, ob ich das jetzt gut erklärt habe.
Ich habe auch eine kleine Demo gebaut, wie ich das einsetze bei CodePandals.
Findet ihr dann später in den Shownotes, da könnt ihr euch das mal anschauen.
Aber bei meiner Recherche, also das ist der Anwendungsfall, wie ich das verwende.
Bei meiner Recherche habe ich dann herausgefunden, dass das eigentlich gedacht ist, um Bereiche zu verschieben im Kontext von Scroll Snap Areas.
Konstantin, kennst du die? Schon mal verwendet?
Ja, ich glaube, ich weiß, was du meinst.
Also ich kenne diesen Effekt, aber Scroll Snap Areas, ist das auch wieder ein eigenes Property?
Ja, also ...
Weil ich muss sagen, da bist du mir gerade wirklich voraus.
Also auch das Property, was wir gerade besprechen, Scroll Margin Top, kannte ich nicht bisher.
Aber ich kenne das Problem, das du besprochen hast, ja.
Ja, egal, man kann das damit lösen, auch wenn es vielleicht falsch ist und hacky.
Ja, Scroll, äh, Snap, was sag ich denn?
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,
ähm, sind so Bereiche, ähm, wo das Scrollen sozusagen einrastet.
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.
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.
Ä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.
Dann rastet das immer genau an der richtigen Stelle ein und bleibt dann da.
Und wenn, nur wenn ich einen bestimmten Threshold beim Scrollen, äh, überschreite, dann springt er zum nächsten.
Wenn ich den nicht überschreite, dann springt es vielleicht wieder zurück da, wo ich gerade war.
Also eigentlich ist das dafür gedacht.
Aber Scroll Margin Top, ich finde, es eignet sich sehr gut für dieses Problem mit Position Fix.
Und ich muss aufstoßen von diesem blöden Bier.
Die letzte Folge, schon beim Schneiden ab und zu gemerkt, ja.
Ja, schrecklich.
Ähm, genau.
Ja, äh, im Prinzip bin ich damit schon fertig.
Also ich, ich verwende das so.
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.
Äh, ich fand es ganz interessant rauszufinden, dass es eigentlich für was ganz anderes ist.
Mit Scrolls, Snap Points habe ich auch schon mal rumgespielt.
Vielleicht, wenn in 500 Jahren die neue Version von meiner eigenen Homepage fertig ist, dann seht ihr das da vielleicht auch im Einsatz.
Ich finde es nämlich eine ganz nette Geschichte, wenn man, wenn man so seitenweise, ähm, den, den Content scrollen kann.
Also das kann, das kann ein ganz geiler Effekt sein.
Äh, das wird teilweise auch eingesetzt, um, ähm, so, sagen wir mal, ja, was, äh, Slider, Slider, ähm, Animationen ohne JavaScript zu machen, beispielsweise.
Da kann man das ganz gut einsetzen.
Das ist ja so der Klassiker, irgendwie so ein, so ein Image Slider auf einer, auf einer Seite oben.
Und dann, äh, snappt das immer schön, wenn man scrollt, dahin auf die, auf die einzelnen Bilder oder so.
Genau.
Aber damit bin ich fertig mit der Property der Woche.
Cool.
Und, äh, freue mich aber auch noch auf die Anmerkungen von euch.
Ah, äh, alles klar.
Freue mich auf die, auf Anmerkungen, ähm, äh, bezüglich dessen.
Und vielleicht gibt's da noch einen besseren Weg, äh, um den Effekt mit den fixen Containern und den Ankerlinks zu erreichen als das.
Und jetzt, äh, dürfte der nächste Teil kommen, glaube ich.
Wir haben wieder was gelernt.
Und jetzt, äh, kommt erst mal Werbung.
Gebrochene, schräge Zähne, setze es auf und bekommst wunderschönes Lächeln.
Abmelden für schräge Zähne, temporäre Zahnbrücke, sofort verschönert deine äußere Zahndeckung in zwei Minuten.
So verbessere dein Lächeln mit brandneuem Mittel.
Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator.
Abmelden.
Diese Dramatik, Wahnsinn.
Das ist eigentlich der letzte Teil der Band.
Und weiter geht's.
Hier ist WWS IV mit dem Tagesthema.
Guten Abend, meine Damen und Herren.
Heute geht es um, ja, wolltest du was sagen?
Nein, nein, nein.
Es geht heute um ein Thema, zu dem wir beide auf den CSS Days 2017 in Amsterdam einen Talk gehört haben.
Beziehungsweise es waren sogar zwei Talks, habe ich jetzt dann beim Vorbereiten gemerkt.
Das war mir gar nicht mehr so bewusst, dass das sogar zwei Speaker unabhängig voneinander besprochen haben.
Es geht um CSS Houdini.
Und ich möchte die Talks auch kurz noch erwähnen.
Das war einmal Philip Wharton, Houdini and Podi Filling CSS.
Da gibt es einen Link dazu als Video zu dem Talk und die entsprechenden Slides dazu.
Und das gleiche auch von Tab Atkins, The Far Future of CSS.
Und die Links dazu gibt es natürlich in den Shownotes.
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.
Also ist, glaube ich, bei PowerPoint Slides auch so.
Aber ich bin, ich habe mich irgendwie, ich stand da wieder Ochs vor dem Berg und habe gedacht, so wie komme ich denn jetzt?
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.
Aber das funktioniert nicht.
Scroll Snap.
Scroll Snap, ja, danke.
Aber Keyboardtasten funktionieren.
Ah, ich habe gerade dein Emoji gesehen.
Was?
An einer Stelle kann ich es sehen.
Ist egal.
Das ist, das ist, den können wir jetzt nicht, den können wir jetzt nicht erklären.
Ja, bei Jitsi.
Okay, aber freut mich, dass es dich freut.
Gut.
Jedenfalls, als ich das.
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.
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.
Ja, jetzt weiter mit dem Harald Houdini.
Jedenfalls, aber das bringt mir eine gute Überleitung.
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.
Also die hielt sich eher in Grenzen.
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.
Na, gestört.
Ohne vorwegzunehmen, was es ist, ohne zu sagen, um was es geht.
Okay, ich versuche es mal.
Jetzt hast du mich echt eiskalt erwischt.
Wir sollten, es ist gut, gut, dass wir die Sendung nicht besser vorbereiten.
Es gibt immer mal wieder, also Houdini fühlt sich für mich ein bisschen an wie XHTML 2.0.
Das ist irgendwie schon lange unterwegs.
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.
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.
Wenn ich irgendwie einen Fehler in meinem Code habe, dann sehe ich gar nichts.
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.
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.
Also da wird das auch angeführt.
Wir wollen nochmal kurz den Anfang angucken.
Ach, das ist interessant.
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.
Es ist für mich so was, das ist eine coole Idee.
Es dümpelt jetzt schon seit einigen Jahren vor sich hin.
Ich weiß nicht genau, wie der Browser-Support ist.
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.
Genau das wollte ich hören.
Ich bin einfach noch nicht überzeugt, dass das wirklich noch was wird.
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.
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.
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.
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.
Ich weiß ja darüber gar nichts.
Ja, dann ist gut.
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.
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.
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.
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.
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.
Ich glaube, das war auch sein Talk dann, ja.
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.
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.
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.
Also wirklich, ich will jetzt nicht sagen, anwendungsfern, das ist vielleicht unfair, das zu sagen, aber in den Gedanken extrem weit voraus.
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.
Also ich bin gespannt, was du uns jetzt erzählst und wie dein Fazit dann am Ende ist.
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.
Das heißt, es erlaubt uns, CSS zu erweitern.
Und was für Vorteile haben wir dadurch?
Es ist in den letzten Jahren ja immer so gewesen, dass JS-Feature-Entwicklung unheimlich an Fahrt aufgenommen hat.
Also es geht immer schneller, bis Feature-Vorschläge, Drafts tatsächlich den Weg in den Browser finden oder in die Browser finden.
Und bei CSS ist es so, dass Features immer noch unglaublich lange brauchen, vom Draft bis zum breiten Browser-Support.
Und ich meine, das sieht man allein schon beim Draft von Houdini selbst.
Ich habe mal geguckt, das Repository für die Drafts, wo die drin gespeichert werden, das wurde am 30. Dezember 2014 angelegt.
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.
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.
Also das sind schon extrem lange Zeiten.
Und ein anderer Vorteil ist die Performance.
Normalerweise ist es so, wenn die Funktionalität nicht vorhanden ist im CSS, dann mache ich es halt per JavaScript.
Das heißt, ich bastle mir da selber irgendwas zurecht und frage irgendwelche Werte ab und schiebe irgendwas rum.
Das Ganze passiert aber erst nach dem Lesen des DOM, des Document Object Models, und nachdem das CSS angewendet wurde.
Das heißt, das CSS wird angewendet und dann arbeite ich im Main-Thread des Browsers, mache mit JavaScript meine Dinge,
verändere irgendwelche Styles und die Änderungen müssen dann wiederum neu gerendert werden.
Das heißt, ich habe nochmal einen Render-Zyklus, den ich eigentlich gar nicht bräuchte.
Sieht man dann auch in irgendwelchen Wackeln oder irgendwelchen Sachen, die da rumspringen, weil das erst nachträglich dann eben gerendert wird.
Und um das noch besser zu verstehen, muss man vielleicht mal einen kleinen Exkurs machen,
deswegen, weil du meintest, dass das für dich ganz andere Sphären sind, in denen er da gesprochen hat
und in denen der auch der Blickwinkel, aus dem er eben diese Browser-Geschichte und das Style-Sheet betrachtet.
Es war für mich ganz interessant, mal zu gucken, wie denn das Rendern im Browser eigentlich abläuft.
Ich stelle das natürlich jetzt hier nur ganz stark vereinfacht und oberflächlich dar.
Einerseits, weil man daraus wahrscheinlich eine ganze Sendung füllen könnte
und außerdem, weil ich es auch selber nur an der Oberfläche gekratzt habe und da jetzt nicht so tief drin bin.
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.
Die beherrschen vielleicht ihre Handwerkstools, ihr JavaScript und ihr CSS ganz gut,
wissen aber gar nicht, was da im Browser so abläuft.
Und wir haben ganz grob, teilt man das mal ein in vier Prozesse, die da ablaufen.
Wir haben einmal die Kaskade oder das Parsing der Kaskade, dann das Layout, Paint und Composite.
Kaskade steckt ja schon im Namen Cascading Style Sheets.
Das heißt, wir haben unterschiedlich spezifische Regeln, die vom Parser erstmal von oben nach unten abgearbeitet werden müssen,
geguckt werden muss, was hat denn jetzt die Spezifizität, die ich in dem Fall auch tatsächlich anwenden muss.
Dann haben wir das Layout.
Das heißt, da wird geguckt, wie sind denn die ganzen Boxen.
Wir arbeiten ja in HTML und CSS immer mit Boxen, auch wenn wir einen Border Radio setzen, aber das sind eigentlich nur Kästchen.
Wie sind die positioniert?
Also Floating, wenn man noch ein floatbasiertes Layout hat, Position Absolute oder Relative.
Wie verhalten sich die Boxen zueinander?
Und Stichwort Reflow, der wird eben getriggert bei Layout-Änderungen und das hat dann Einfluss auf die Performance natürlich.
Da hatten wir es auch vorhin kurz anhand von deinem Tweet, dass Transitions besser sind als Margins.
Kann ich vielleicht, ja, kann man vielleicht auch kurz noch ausführen, wenn ich gleich zu den Layern komme.
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.
Und als Bitmaps in die GPU geladen, also in den Grafikprozessor.
Und da habe ich dann verschiedene Layer, die am Schluss beim Compositing miteinander verschmolzen werden.
Und die Transitions, die Transforms, die sorgen dafür, dass diese Layer einfach nur zueinander verschoben werden.
Das heißt, da müssen einfach nur Bilder gegeneinander verschoben werden.
Ganz einfach gesprochen jetzt.
Und wenn ich das mit Margin mache, dann triggere ich dadurch ein Reflow.
Das hat natürlich größere Einbußen dann bei der Performance.
Genau, das war so im Großen und Ganzen, was da passiert.
Jetzt nur vom CSS, vom Rendern abgesehen, was da gemacht wird.
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.
Und da sieht man auch ganz schön, dass das Engine abhängig passiert, da die verschiedenen Browser-Engines unterschiedlich optimieren.
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.
Also wenn ich jetzt ein CSS-Property ändere, dann muss vielleicht der Firefox einen kompletten Reflow machen, während Chrome das andersrum macht.
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.
Also da haben einfach die verschiedenen Browser verschiedene Optimierungsmöglichkeiten.
Fand ich interessant, habe ich so vorher auch nicht gewusst.
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.
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.
Aber das mal nur ganz am Rande.
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,
Da gibt es einen Talk von Ryan Seddon von der JS-Conf EU 2015.
So, how does the browser actually render a website?
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.
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.
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.
Das sieht ganz cool, ganz interessant aus, das mal zu sehen.
Natürlich sehr stark verlangsamt, weil eigentlich macht es zack und die Seite ist da.
Aber im Hintergrund passiert ja ganz arg viel, worüber man sich so keine Gedanken macht.
Genau, also das DOM und das CSS-OM, Cascading Style Sheets Object Model, werden generiert.
Das heißt, so wie wir DOM-Nodes kennen, wird natürlich auch das CSS in irgendeiner Form intern handelbar als Baum abgespeichert.
Beides ist im sogenannten Render-Tree vereint, aber die beiden DOMs sind völlig unabhängig voneinander.
Und JavaScript hat eben kaum Zugang zum CSS-OM.
Und Houdini kommt genau da ins Spiel, weil wir mit Houdini direkt Änderungen auf die Style-Änderungen im CSS-Object-Model anwenden können.
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.
Das heißt, wir schreiben quasi CSS-Poly-Fills statt JavaScript-Poly-Fills.
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.
Aber die meisten Houdini-APIs, die laufen in sogenannten Worklets.
Das sind, kann man sich vorstellen, das ist abgespeckte Version von Web-Workern, falls das jemandem was sagt.
Das heißt, das sind eigene Prozesse, die im Hintergrund laufen.
Web-Worker braucht man zum Beispiel bei Progressive Web-Apps, wenn man da irgendwie Daten asynchron laufen lassen will.
Moritz hat einen kleinen Einwand.
Ich habe eine kleine Frage an der Stelle.
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.
Habe ich das so gesagt?
Habe ich das richtig verstanden?
Nein, nein, ich frage gerade, was das so ist.
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.
Okay, aber letzten Endes werden da ja irgendwie in irgendeiner Form Daten von A nach B geschickt, genauso wie bei jedem anderen Request auch.
Da frage ich mich, wie das dann, also ich meine klar ist das wahrscheinlich schneller, als wenn ich irgendwas mit JavaScript ausführen will.
Das ist keine Frage.
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.
Oder ist das was, was irgendwie auf einem anderen Weg geladen wird?
Also steht der Code, ist der irgendwie referenziert im HTML oder irgendwas davon, also irgendwie in dem JavaScript wiederum, was im HTML referenziert ist?
Oder ist das ein anderer Weg, den das geht?
Das ist wie bei Web-Workern auch, wenn ich das richtig weiß.
Also du lädst natürlich eine JavaScript-Datei rein, die dir dann die entsprechenden Worklets für Houdini spezifiziert und reinlädt.
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.
Oder verstehe ich das falsch?
Naja gut, das Umspringen und das längeren Laden hast du ja auch mit JS-Fallbacks.
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.
Okay, aber so performant wie echtes CSS, wo der Browser schon weiß, was er damit zu tun hat, ist es natürlich wahrscheinlich nicht.
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.
Okay, aber Performance-Gewinn gegenüber JS-Polyfills für CSS?
Ja.
Okay, ja. Okay, gut, ja, da kann ich mich drauf einlassen.
Ja, wobei nicht nur zum Thema Polyfills, ja, also, ja, kann man vielleicht später noch was dazu sagen an einer anderen Stelle.
Okay.
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.
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.
Genau, noch irgendwelche Anmerkungen?
Nee, nee, mach ruhig weiter, ich hab, die fiesen Fragen kommen noch.
Oh, oh, oh, ich fang schon an zu schwitzen hier.
Das ist aber wegen dem Getränk, oder?
Ja, es ist auch extrem warm hier.
Äh, okay, weiter.
Ist dunkel geworden jetzt bei dir?
Ja, ziemlich dunkel, ich hab kein Licht mehr grad aktuell, weil ich meine, schreibtisch haben die Brunnen zu arg, ich hab die ausgesteckt.
Ach so, dann ist es eigentlich langsam dunkel geworden.
Ja, es ist ganz langsam dunkel geworden.
Ah, okay, gut, ich merke eben jetzt erst, dass...
Ja, du siehst immer noch hervorragend aus.
Ach, dankeschön.
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.
Dann sage ich jetzt auch...
APIs.
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.
Das könnt ihr aber auch gleich wieder vergessen, was ist.
Ich wollte gerade sagen, du hast mich schon verloren, du hast mich schon komplett verloren.
Ich dachte, ich dehne die Sendung noch ein bisschen aus.
Wir müssen doch die zwei Stunden irgendwie erreichen.
Also, setz da mal eine Kapitelmarke, die kannst du dann nennen, bitte überspringen.
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.
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.
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?
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.
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.
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.
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.
Also, da macht das halt schon was aus, ob ich da jeweils eine Mikrosekunde irgendwo mir spare oder nicht.
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.
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.
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.
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.
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.
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.
Vielleicht reden wir da ganz anders drüber und sagen, wow, was haben wir nur 2020 ohne Houdini gemacht.
Ja, Mensch, oder wieso haben wir nicht 2017 schon damit angefangen und sind jetzt die krassen Houdini-Entwickler mit 20 Jahre Houdini-Erfahrung?
Ja, dann haben wir nur 17 Jahre Houdini-Erfahrung.
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.
Vor allem 20 Jahre Angular 2-Erfahrung.
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.
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.
Also, jedenfalls ist es nicht schön, so zu arbeiten. Ich glaube, da sind wir uns einig, oder?
Ja, es gibt wenige Dinge, die schön sind.
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.
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.
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.
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.
Ja, aber ich glaube, ich müsste echt mal ein echtes Beispiel sehen.
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.
Also ich kriege natürlich auch Bildwerte zurück oder Gradients und so weiter und kann mit denen dann ganz einfach arbeiten.
Habe ich mir jetzt zum Beispiel gar nicht angeguckt, wie es bei Farben ist mit den verschiedenen Notationen, wie das dann am Schluss rauskommt.
Wäre mir noch interessant gewesen, habe ich jetzt leider nicht vorbereitet.
Ja, eine Frage noch an der Stelle. Kann ich damit auch bisher vorhandene CSS-Properties überschreiben?
Also kann ich jetzt meine eigene Implementierung von Border-Radius machen oder so?
Ja, dazu kommen wir noch. Also das ist tatsächlich der nächste Punkt, wäre dann die Properties and Values API.
Ich muss mich jetzt auf irgendwas einigen und ich mische es einfach fröhlich.
APY.
Genau, die API.
Custom-Properties, genau.
Ja, damit habe ich zum Beispiel die Möglichkeit, typisierte CSS-Variablen zu schaffen.
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.
Und so kann ich eben dann sagen, ich habe ein Custom-Property minus minus Gradient-Stop.
Und das Schöne ist, aktuell sind Gradient-Farben nicht in Transitions verwendbar.
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.
Das macht er einfach plöpp und irgendwann wechselt sich die Farbe im Verlauf der Transition.
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.
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.
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.
Ja, und das ist schon mal ein handfester Beispiel, wo man sieht, dass das schon was bringen kann.
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.
Das sind jetzt, sind nicht alle, sind nur mal so ein paar.
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.
In Zukunft soll es da aber eine All-in-CSS-Syntax geben mit einem neuen Add-Property-Keyword.
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.
Und dann kannst du sowas natürlich in deinen Style-Shield einfach mit reinpacken.
Und dann hast du dir zumindest, was das angeht, schon mal eine Ressource gespart.
Ja, cool.
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.
Genau.
Damit ist zumindest ein Kritikpunkt schon mal wieder weg.
Schauen wir mal.
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.
Das heißt, wir können erweitern, was der Parser versteht.
Und damit wird natürlich Polyfilling möglich, weil ich sagen kann, okay, das kann der und der Browser nicht.
Das lässt sich dann mit Sicherheit auch mit Add-Support entsprechend erkennen.
Und dann mache ich das ganze Ding einfach mit einem Polyfill.
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.
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.
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.
Und das klingt für mich schon zumindest mal mächtig.
Und mächtig finde ich gut.
Mächtig?
Der nächste Punkt.
Ja, das wäre doch was für unsere Twitter-Bildchen.
Was mächtig finde ich gut?
Das wäre toll, dass wir so Zitate als Twitter-Bildchen mal veröften.
Ja, das macht unsere Redaktion da.
Genau, unsere fünf Interns.
Was haben wir?
Unsere virtuellen.
Haben wir vier entlassen?
Okay, wir machen schon wieder Blödsinn.
Die Layout-API ist der nächste Schritt.
Default-mäßig haben wir da zum Beispiel den Blockflow, Flexbox oder eben auch Grid-Layout.
Und ja, ich habe jetzt die Möglichkeit, ich kann Custom-Layouts schreiben.
Und wir hatten vorhin in so einem Vorgeplänkel vor der Sendung, hast du irgendwas gesagt?
Und ich habe gesagt, ja, siehste mal, da könntest du jetzt einfach dein Custom-Layout schreiben.
Ich weiß gar nicht mehr, um was es ging.
Flexbox?
Ich weiß nicht mehr genau.
Es war irgendwas mit Flexbox und was dann nicht so funktioniert.
Und dann habe ich gesagt, siehste, schreib doch dein Custom-Layout, wo du alles genauso machst, wie du es erwartest.
Ja, ja, klar.
Und darum, da geht er auch, Tab Atkins, jetzt habe ich den Namen sogar abgespeichert, geht er auch in seinem Talk drauf ein.
Beziehungsweise, jetzt bin ich mir gar nicht mehr sicher, ob es nicht der andere Talk war, aber ist ja auch egal.
Jedenfalls geht einer von den beiden, geht darauf ein.
Schaut die Talks.
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.
Bei den Draft-Teams könnt ihr nicht noch das und das implementieren, irgendwelche Mosaics oder was weiß ich.
Aber es macht einfach keinen Sinn, das alles standardmäßig in CSS mitzuliefern.
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.
Also es macht keinen Sinn, das mitzuliefern, aber vielleicht sind diese Layout-Modelle echt schlau.
Weiß ich jetzt auch wieder keinen Grund.
Ich kenne noch andere Sachen, die von weniger als zwei Prozent genutzt werden.
Das wäre mal eine gute Sendung.
Ja, ich halte mich mal bedeckt, weil da machen wir noch eine extra Sendung draus, das habe ich jetzt gerade beschlossen.
Wir machen mal eine Sendung, die unbeliebtesten CSS- und JavaScript-Befehle, die keiner verwendet.
Ne, das fände ich echt ein interessantes Thema.
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.
Von Dingen, die eine gute Idee sind, aber die irgendwie keiner verwendet.
Ich bin gespannt, was du dir da ausdenkst.
Ja, ich mache mal und du machst mal weiter.
Ja, tipp, tipp mal weiter.
Ich komme zur Paint-AP, das ist ja der nächste Schritt in dieser Kette.
Und da schreibe ich mir eben solche Paint-Worklets, auch Paintlets genannt, falls man mal über diese Begriffe stolpert, das ist also das Gleiche.
Und diese Paint-Worklets, die bieten mir einen 2D-Drawing-Kontext.
Und wem das bekannt vorkommt, ja, das ist ähnlich wie ein Canvas.
Also ich kann da wirklich draufmalen auf ein Canvas.
Ich weiß jetzt nicht, ob es technisch wirklich ein Canvas ist, aber es ist jedenfalls ein Drawing-Kontext.
Das wäre tatsächlich eine meiner Fragen gewesen, ganz kurz.
Also ich habe mich gefragt, man kann da ja irgendwie auch Formen erzeugen, wie macht man das?
Ist das denn so wie Canvas?
Also ich sage mal so, die Programmierer sind ja nicht doof, die so einen Browser schreiben.
Was man ja schon an der Komplexität sieht, ja, da musst du ja schon ein bisschen was verstehen.
Was? Die Programmierer, die den Internet Explorer geschrieben haben?
Ja gut, okay, Ausnahmen bestätigen die Regel.
Nein, Spaß.
Nein, nein, wir haben Microsoft Deep.
Aber ich denke mal schon, dass das da wiederverwendet wurde.
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,
weil es im Endeffekt auch uns wieder als Anwender egal sein kann.
Aber die Formulierung war immer nur like Canvas.
Ich denke mal, im Hintergrund arbeite die gleiche Technologie.
Jedenfalls kann ich da eben draufzeichnen, ich kann da Punkte erzeugen, ich kann Linien erzeugen.
Das heißt, ich kann irgendwelche Fills machen für meine lustigen Boxen, irgendwelche Muster berechnen lassen, aber auch Gradients.
Zum Beispiel, jetzt kommt mein Bier gerade, will auch mitsprechen.
Zum Beispiel Conic Gradients, also kegelförmige Gradients.
Könnte man zum Beispiel nutzen für so Sachen wie einen Farbkreis, den man darstellen will.
Wenn man die Anfangs- und Endfarbe gleich macht.
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.
Aber jedenfalls ließe sich das mit Houdini umsetzen, ohne dass alle Browserhersteller das tatsächlich implementieren müssen.
Also man sieht schon, es ist hauptsächlich Schmuck und Dekoration.
Also das, was ich an Demos gefunden habe, waren tatsächlich eigentlich schon Spielereien.
Ja, und ich mache mal hier ein bisschen was bunt und so und da eine Linie.
Aber es gehen zum Beispiel auch Animationen.
Also diesen Ripple-Effekt von Material Design, von Android, kennen sicherlich die meisten.
Das heißt, ich klicke irgendwo auf einen Button und genau da, wo ich geklickt habe, breitet sich so ein kleiner Kreis aus.
Das ließe sich tatsächlich nur mit CSS, beziehungsweise über Houdini, natürlich auch mit JavaScript, ließe sich das umsetzen.
Und das finde ich dann also schon spannend, weil das ist, so fürs User-Feedback ist das schon ziemlich cool.
Also quasi eine Animation, ohne dass ich eine Animation wirklich definieren muss.
Genau, also es gibt ja noch die Animation-API, wo ich nachher auch noch kurz drauf zu sprechen komme.
Aber so rudimentäre Animationen lassen sich auch mit diesen Paint-Worklets schon umsetzen.
Und als ich das gesehen habe, das fand ich schon ziemlich cool.
Weil da habe ich dann schon das Gefühl, sorry, ich muss mal kurz.
Ja, der Konstantin, ich muss kurz hier eingreifen, vielleicht, ich habe gar keinen schlechten Witz.
Aber du kannst, aber du kannst weitermachen.
Mein Manuskript liegt in der Dropbox.
Nee, geht schon wieder.
Ich lese dann weiter vor.
Genau.
Wo war ich denn jetzt?
Genau, Ripple-Effekt Android.
Das ist tatsächlich auf älteren Geräten, sind solche Sachen schon performance-hungrig.
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.
Ich denke mal, es ist mit Pseudo-Element gemacht.
Das wird da extra reingerendert, nur um diesen Effekt zu erzeugen.
Und das könnte ich eben mit so einem Paint, könnte ich das einfach auf den Button-Hintergrund rendern.
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.
Und ich denke, auch da sind wir einig, dass wir da hinwollen.
Also ich auf jeden Fall.
Ich auch.
Und ja, da möchte ich dazu noch ein Video auf YouTube empfehlen.
Creating a custom CSS-Paintlet.
Link dazu gibt es auch in den Shownotes.
Ja, bei Animation-Worklet, da steht bei mir nur Animationen.
Weil ich mir das gar nicht weiter angeschaut habe.
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.
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.
Genau, also diese Animation-Worklets gibt es noch.
Und dann zu guter Letzt, und dann haben wir es auch schon geschafft mit dieser langen Liste an APIs, die Font-Metrics-API.
Juhu, jetzt hätten wir, jetzt bräuchte ich, ich hab mir schon so ein Applaus-Dings zurechtgelegt, hab ich leider vergessen reinzuziehen.
Ah, Mensch, wie schade.
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.
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,
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,
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.
First Letter, meinst du, glaub ich.
First Letter, dankeschön, ja, heißt aber auch Initial Letter. Ähm, den kann ich größer darstellen oder andersfarbig oder irgendwie schöner.
Also in CSS heißt's, äh, First Letter.
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,
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.
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.
Und da brauche ich halt wirklich die Informationen von der Font, die geladen ist.
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.
Ähm, ja, ist eine Spielerei erstmal, der man noch nicht spielen kann, weil es gibt dazu noch keinen Draft. Es gibt also nur Ideen.
Und damit kommen wir dann auch schon zu der Frage, wie weit sind wir denn?
Ja, das wäre auch eine Frage von mir gewesen.
Sehr gut.
Was ist denn mit den Browsern?
Was ist der Status?
Ich rate jetzt mal.
Es gibt eine sehr schöne Seite, die kannst du vielleicht auch gleich mal aufmachen.
Kenner News.
Nein, nein, nicht Kenner News diesmal.
Nicht Kenner News.
Nein, ishoudini-ready-yet.com.
Ich glaub, da steht drauf, no.
Das wäre auch, ja, stimmt, sollten die eigentlich ganz groß oben hinschreiben.
Es ist aber nur halbrichtig.
Punkt.com oder was?
Punkt.com, genau.
Also, vielleicht, wer gerade nicht im Auto sitzt oder so, äh, kann das auch mal aufmachen.
Oh, aha, das sieht gar nicht so schlecht aus.
Ja, das ist ganz schön gemacht.
Die verschiedenen APIs sehe ich hier auf den ersten Blick haben, weil sie auch sehr unterschiedliche Stände haben, was die Specs anbelangt.
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.
Dementsprechend wurden die natürlich auch noch nicht implementiert.
Ich frage mich gerade, wer diese Übersicht gebaut hat.
Ä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?
Das habe ich mich, ehrlich gesagt, auch gefragt, warum der da extra erscheint.
Aber gut, ich meine, die Verbreitung von, von so Galaxy-Geräten und so, ich glaube, die ist doch schon recht hoch.
Ä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.
Ja, das kann man jetzt schon mal sagen.
Also, da er auch auf die Blink-Engine setzt, ähm, sieht die Verbreitung ja da ganz gut aus.
Aber ich komme da noch drauf, die, die, wie das, äh, verbreitet ist.
Ä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.
Aber die anderen APIs, da sieht's ganz gut aus, zumindest bei manchen.
Äh, die Paint-API ist, äh, im Status Candidate Recommendation.
Das heißt, schon recht weit voran geschritten.
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,
dass sich dann auch jemand drum kümmert und es, äh, nicht in Vergessenheit geraten ist.
Und die Layout-API und die Animation-Worklets sind im Status First Public Working-Draft.
Ich weiß nicht, kennst du dich mit den, mit den Drafts und den Starti, äh, aus?
Weißt du, was dieses First Public Working-Draft ist?
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.
Ja, First Public, genau.
Wir holen uns jetzt mal die Meinungen an von den Entwicklern.
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.
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.
Naja, gut, die sind ja alle auf der gleichen Engine.
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.
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.
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.
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.
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.
Aber es ist schon ganz cool, das mal so zu sehen, wie die Browser denn da voranschreiten in der Umsetzung.
Also ich versuche es mal zusammenzufassen, so in einfach, auch ohne, dass man diese Matrix sieht.
Alles, was so direkt auf der Blink-Engine basiert, also so Chrome, Edge und Opera, sieht eigentlich fast identisch aus.
Also ist relativ gut unterstützt, beziehungsweise teilweise Partial Support, diese Parser-API und die Font-Matrix-API, die gibt es halt noch nicht.
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.
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.
Ich habe mir in meinen Notes aufgeschrieben, Firefox und Safari, Doppelpunkt, trauriges Smiley.
Ah, ja, so kann man das sagen derzeit.
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.
Das ist ja schon mal was.
Ich stelle jetzt mal eine gemeine Frage.
Oh je.
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.
zum Beispiel, wenn du zum ersten Mal von CSS-Grid gehört und würdest du sagen, dass das jetzt weitestgehend unterstützt ist?
Wie lange hat das gedauert?
Von zum ersten Mal gehört bis ist es so, dass man es eigentlich verwenden kann?
Ich kannte es auf jeden Fall schon, als es Erwähnung gefunden hat 2017 in dem Talk in Amsterdam.
Ja.
Kann ich dir jetzt nicht sagen, wie weit davor ich damit gearbeitet habe.
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.
Ich glaube, da war gerade erst irgendwie das letzte Release von Chrome oder von Firefox oder was, der das dann mit reingebracht hat.
Oder ich glaube, es war sogar so, dass alle drei großen Browser das gleichzeitig mit reingebracht haben.
Relativ gleichzeitig.
Ich glaube, für mich war CSS-Grid damals auch nicht ganz brandneu.
Ich hatte das irgendwie schon mal gehört.
Aber das war so meine erste Berührung so mit, oh, muss ich unbedingt mal ausprobieren.
Und naja, CSS-Grid, das ist jetzt angekommen, würde ich mal behaupten.
Und ich würde sogar sagen, das ist wahrscheinlich vor einem Jahr schon angekommen.
Mittlerweile gibt es ja schon die nächsten Sachen, irgendwie Subgrid und so weiter,
die da noch weiterentwickelt werden an CSS-Grid.
Also das ging dann eigentlich relativ schnell, hatte man so das Gefühl.
Ich meine, an CSS-Grid wird wahrscheinlich schon ewig gearbeitet.
Aber ich kann es mir nicht anders vorstellen, als dass an CSS-Grid schon sehr, sehr lange gearbeitet wird.
Weil dieses Grid-Layout im Web, das wollte man eigentlich schon immer haben.
Das hat man ja früher mit Tabellen gemacht.
Also die Arbeit daran ist bestimmt schon sehr, sehr alt.
Aber so dieser letzte Vorstoß so von wegen, ja, wir machen das jetzt mal und wir bauen das mal in den Browser ein.
Das ging relativ schnell, habe ich so das Gefühl.
Also da ist jetzt im Vergleich Houdini irgendwie ziemlich langsam.
Also zwei Sachen dazu.
Also einmal weiß ich nicht, ob das jetzt tatsächlich recht schnell ging.
In den Talks, wie gesagt, wurde auch erwähnt, sieben Jahre für Flexbox und fünf für Grid.
Also das ist schon auch ein Zeitraum.
Das sind beide jetzt gleich auf oder länger sogar als Houdini gebraucht hat.
Und man darf ja auch nicht vergessen, Houdini ist ja ein Set von verschiedenen APIs.
Das sind ja ganz viele verschiedene Baustellen, auch mit unterschiedlichen Teams, die da dran arbeiten.
Und also ja, alleine schon, dass die Layout-API es einem ja ermöglicht, ein eigenes Layout-Modell zu schaffen,
was ja wiederum Flexbox und Grid entspricht.
Ja, also dass man da quasi ein Framework hat, mit dem man das selber bauen kann.
Dass das länger dauert, das leuchtet mir tatsächlich ein.
Verstehst du, was ich meine?
Ja, ja, das ...
Jetzt habe ich dich mal aus dem Konzept gebracht.
Nein, nein, nein, nee, ich habe trotzdem das Gefühl, dass es irgendwie sehr lange dauert
und bin noch nicht überzeugt, dass das irgendwann also so in seiner Gänze fertig wird.
Ich könnte mir vorstellen, dass einzelne Teile, ich meine, es gibt ja auch jetzt schon Teile,
dass einzelne Teile das irgendwie irgendwann schaffen, aber ob es wirklich alles wirklich ...
Ja, aber eigentlich, wenn man sich die einzelnen Module so anschaut,
oder diese einzelnen APIs, das macht gar keinen Sinn, wenn man eine weglässt.
Also wenn man jetzt die Font-Metrix-API weglässt ...
Also Parser-API und Font-Metrix-API, für die es ja wirklich noch keinen Draft gibt,
könnte ich mir auch vorstellen, dass die vielleicht sogar wieder rausfliegen,
weil man sagt, naja, brauchen wir doch nicht so dringend.
Ja, aber Font-Metrix, das ist doch was ganz Grundlegendes.
Wenn man die jetzt mal weglässt, also die kann man eigentlich schon weglassen.
Wenn man sich das jetzt mal anguckt und wir sagen jetzt mal, wir nehmen,
also Shipped ist klar, die ist verfügbar und Partial Support,
das heißt, es ist schon in den Developer-Previews und in den Canary ist das schon mit drin,
zählt für mich auch als, es ist umgesetzt,
ja, es ist nur noch nicht im Endprodukt.
Und Intent-to-Implement würde ich jetzt bei Firefox sogar auch schon dazu zählen,
da hat man wirklich gesagt, okay, wir setzen das um.
Ich weiß nicht, wie fix die Jungs bei Firefox sind im Entwickeln,
wie schnell da Updates kommen.
Nehmen wir aber diese drei Statusse,
oder eigentlich sogar müsste man sogar ...
Statis, Statisten, egal.
In Development könnte man eigentlich auch schon, das ist ja sogar noch weiter als Intent-to-Implement,
ja, also wenn man das alles zusammennimmt, dann sind an drei von den APIs sind die großen
Browser-Hersteller dabei oder haben es schon fertig oder fast fertig.
Font-5 sage ich jetzt mal, weil wir Parser-API und Font-Matrix-API weglassen.
Also das klingt für mich jetzt gar nicht so schlecht.
Okay, mach mal eine Vorhersage.
Wenn du jetzt mal in deine Glaskugel schaust,
Der große Konstantini schaut in seine Glaskugel.
Der große Konstantini schaut in seinen Glas-Dildo und sagt mir jetzt,
wann kommt der Punkt, wann ist der Punkt in der Zukunft, wo das so ein Standard wird,
dass man sagt, naja, da baut man jetzt was damit.
Es ist jetzt zur Normalität geworden.
Was glaubst du, wie lange das noch dauert?
Ich weiß, wie gesagt, nicht, wie die Release-Cycles und so diese Development-Cycles
so bei Firefox sind, weil von Firefox hängt das meiner Meinung nach so noch ab,
weil der doch eine recht große Abdeckung hat.
Deswegen kann ich da schlecht einschätzen, wie lange Intent-to-Implement,
da heißt, da müsste man jetzt verschiedene Tickets mal raussuchen von Sachen,
die jetzt wirklich drin sind, gucken, wann wurden die dann auf Intent-to-Implement gesetzt.
Aber so aus dem Bauch heraus würde ich mal sagen,
in einem Jahr, anderthalb, lass es vielleicht höchstens zwei sein.
Dann hat Firefox das auch, weil ich meine, das sind jetzt wirklich die großen Browser,
haben das außer Firefox.
Und selbst Apple, was ja oft Sachen dann doch irgendwie nicht umsetzt oder lange braucht,
hat das jetzt schon in der Mache sogar.
Ich glaube, da wird Firefox sehr schnell nachziehen bei den übrigen APIs.
Und dann haben wir die ganzen Evergreen-Browser abgedeckt.
Also Apple wird sowieso wahrscheinlich schneller fertig sein als Firefox,
wenn sie sich jetzt nicht überholen lassen.
Ja, wie gesagt, in einem Jahr anderthalb könnte ich mir vorstellen,
dass es tatsächlich soweit ist.
Hast du bei deiner Recherche ein Beispiel gefunden, wo du gesagt hast,
das ist so ein Killer-Use-Case?
Also, ich meine, so ein bisschen Ripple-Effekt oder, keine Ahnung,
ich implementiere irgendwie Border-Radios, den es sonst nicht gibt.
Ja, da können wir gleich noch beim Feedback,
bei unserer gemeinsamen Diskussion noch drauf eingehen.
Ach so, da sind wir noch gar nicht.
Ja, ich wollte noch ein paar Links noch nennen.
Dann lass ich dich noch.
Aber die kann ich auch am Schluss anhängen.
Wir können ja tatsächlich jetzt zum Fazit kommen.
Ich gebe dir da recht.
Ich habe jetzt tatsächlich noch nichts gesehen, wo ich jetzt dachte,
boah, ist das geil.
Außer vielleicht ...
Das heißt, du gibst mir recht, ich lasse mich ja gerne überzeugen.
Naja, außer vielleicht, aber in dem Fall muss ich dir einfach recht geben,
ja, die Previews, die Demos, die sind schon sehr Tech-Demo-lastig
und es ist halt so, haha, guck mal, was man da machen kann.
Aber so richtig, boah, geil, bin ich heiß drauf,
bis das im Browser verfügbar ist überall,
damit ich das auf meine Webseite einsetzen kann,
um da jetzt irgendwelche Punkte und Linien unter meine Überschriften zu klatschen,
ja, habe ich tatsächlich auch noch nicht gefunden.
Ich glaube, das habe ich ja vorhin schon gesagt, ich glaube, da ist wirklich jetzt Kreativität gefragt.
Ich würde mich jetzt nicht mal als den allzu kreativsten Menschen bezeichnen.
Das heißt, ich bin da schlecht drin, mir jetzt irgendwelche bahnbrechenden Beispiele rauszusuchen,
die ich mir selber vorstellen könnte oder wo ich vielleicht jetzt schon damit eine Demo basteln könnte.
Ich bin da einfach nicht kreativ genug, aber es gibt sehr viele kreative Menschen
und das sieht man schon an den Demos, was die sich teilweise da einfallen lassen.
Also ich glaube, das wird schon kommen und das hängt auch ein bisschen damit ab,
wenn es denn erstmal in den Browsern verfügbar ist.
Ja, also mit Flexbox und mit Grid wurden wahrscheinlich auch nicht vorher die hammergeilsten Demos überhaupt gebaut,
bis es denn dann mal da war und die Leute gesagt haben,
oh, jetzt würde ich es tatsächlich gerne mal für mein nächstes Projekt benutzen
und jetzt lasse ich mir was Cooles mit einfallen
und bevor ich das mache, setze ich mich mal noch an eine Demo und dann teile ich das
und dann, na, das fängt ja dann irgendwie so wie so ein Waldbrand so langsam,
boah, einer macht eine coole Demo und dann kommt der, ach stimmt, das kann man damit machen,
dann bastle ich auch mal eine Demo und dann, ja, das exponentiert sich ja,
mit den, mit den coolen Demos und Einfällen, die die Leute haben.
Also, ja, ich habe da schon so eine Idee dazu, wie das funktionieren könnte.
Also, ich, ich, ähm, diese ganzen APIs, ich finde die, also, naja, klar, das ist immer so,
wenn irgendwie was Neues, ähm, es wirkt etwas relativ kompliziert oder relativ schwierig zu lernen,
relativ komplex, das ist eine Welt eigentlich, also jede Demo, die ich da gesehen habe,
wo irgendwie auch mal ein bisschen Code gezeigt wurde, dachte ich so, okay, krass,
das müsste ich jetzt echt komplett von vorne lernen, da ist irgendwie, das sieht nicht aus wie irgendwas,
was ich jetzt irgendwie schon kenne. Also, so ein bisschen, ja, klar, wie JavaScript und so,
aber das ist echt eine komplett neue Welt.
Was ich mir jetzt aber gut vorstellen könnte, wäre, dass jetzt, ähm, dass vielleicht dadurch,
ähm, dass, dass das so der erste Schritt ist zu neuen CSS-Standards
beziehungsweise so eine Art Libraries-Standard gibt.
Also, gar nicht mal, dass jetzt jeder auf seiner Homepage eigene, äh, eigene Houdini-Geschichten einbaut
und sagt, ja, ich baue hier mein eigenes, meinen eigenen Border-Radius,
meinen eigenen Gradient, meinen eigenes, was weiß ich, was für ein Effekt, ja,
sondern ich könnte mir total gut vorstellen, dass es halt so ein paar Leute gibt,
die sich da extrem tief reinnerden und dass es dann so Libraries gibt,
aus denen du dich bedienen kannst.
Also, sagt er, hier, guck mal, ich habe hier, äh, die, die drei geilsten Sachen für CSS,
die du, die du schon immer gebraucht hast, die habe ich hier gebaut
und dann könnte ich mir echt vorstellen, dass man das dann so, äh, als Library dann einbindet bei sich
und dann so verwendet.
Also, ich könnte mir vorstellen, dass das eher der Anwendungsfall ist,
als dass jeder da selbst drin rumfrickelt.
Also, so wie so eine Art jQuery für, für CSS oder so.
Das ist ein guter Punkt.
Ähm, das wäre nämlich jetzt auch noch bei den weiterführenden Links gekommen.
Ähm, da steht nämlich einmal auf meiner Liste ein, äh, Talk von Juna Kravitz.
Äh, der ist vom Juni 2019, also relativ aktuell in, äh, CSS Feature-Zeit.
Ah, den habe ich gesehen, war der, war der, war der beim CSS, äh, Moment, warte mal, CSS, nee, CSS Day?
Ich kann's nicht, nee, das war's nicht, das war irgendwas anderes, was ich, glaube ich, noch nicht.
Aber da hat die auf jeden Fall auch einen Talk über Houdini gehalten, glaube ich.
Also, kann sein, ja, es gibt auch, auch zum Thema Houdini gibt's auch zwei oder mehr Talks, ähm, ähm, äh, von, von ihr,
die auch relativ ähnliche Inhalte haben, also, klar, die Speaker bereiten ja ihre Talks dann auch nicht jedes Mal von null vor,
sondern machen dann hier noch was hinzu und da gibt's vielleicht eine neue Erkenntnis oder so.
Ähm, also man findet da relativ, äh, viel auf, auf YouTube dazu und das Video werde ich auch, ähm,
entsprechend in die Show Notes posten und sie erwähnt da drin auch eine Seite, die sie gemacht hat, äh,
die Domain ist nicht ganz so einprägsam, extra-css.netlify.app.
Vielleicht willst du auch mal drauf gehen und da steht,
a CSS Houdini Library for making your site a little more extra.
Und da gibt's dann solche Konfiguratoren, äh, genau, steht auch oben dann hier
Warning, your browser does not currently support Houdini and you won't be able to see any demos.
Also man muss es dann tatsächlich schon mal drauf öffnen.
Ah, die Seite kenn ich, ja, ah, ah, ja, genau.
Und da gibt's einen Baukasten, wo man die Effekte konfigurieren kann, so,
und dann krieg ich am Schluss, äh, krieg ich dann den entsprechenden Code,
den baue ich ein und dann kann ich meinen Text irgendwie glitzern lassen oder so, ja.
Ähm, und das ist ja jetzt auch nur rudimentär als Tech-Demo gedacht,
das ist ja keine jetzt, also ich glaub, das Text funkeln lassen jetzt nicht so,
das Hammer-Killer-Feature ist und das jetzt jeder auf seiner Seite macht.
Aber wer weiß, vielleicht wird das der Webdesign-Trend 2022.
Wer weiß, wer weiß, ich will's nicht, also, äh, also als ich mal gesagt hab, ja, äh, Emoji
ist in irgendwie einer App, wo Leute irgendwie Content reintun können, ist ein Killer-Feature,
da hab ich die Leute ausgelacht, ja. Äh, aber es gibt manche Leute, es gibt Leute,
die sich bei, bei Knuddels Smilies gekauft haben.
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,
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,
wo ich, äh, Parameter hin und her schieben kann und eben das erste ist dieses, äh, diese angesprochenen Sterne von Konstantin,
da kann ich dann irgendwie sagen, naja, wie ist denn, wie ist denn so der Farbton davon, ähm, wie ist denn die Varianz?
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,
oder Hintergrund für einen Container, ähm, und da kann ich ein bisschen rumschieben und dann verändert sich das.
Und das ist eigentlich schon ganz cool, also so, wenn ich mir dann so meinen Custom-Effekt für meine Homepage zusammenklicken kann,
das ist genau das, was ich gemeint habe, da muss jetzt jemand, nicht Houdini, bis in die letzte Pore verstanden haben,
ähm, sondern, äh, ich hab hier so einen Konfigurator und am Ende fliegt da dann, ähm, wahrscheinlich irgendwie der Code raus,
ah, tatsächlich, ah, das sind sogar Code-Pen-Demos, wo ich dann den Code dazu sehe, das ist ziemlich cool.
Genau, also, die Library stellt dir Custom-CSS-Properties zur Verfügung, mit denen du dann wiederum Werte beeinflussen kannst.
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.
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.
Ja, wo ist denn jetzt aber da der, der JavaScript-Code, ist der da in dem, der fehlt da, oder?
Ja, da bei Resources kannst du, glaube ich.
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.
Ah ja, genau, das wird von Unpackage als CDN geladen. Stimmt, deswegen müssen wir es nicht sehen.
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.
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.
Ja, vielleicht bin ich jetzt ein bisschen geiler drauf geworden.
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.
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.
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.
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.
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.
Also klar sind das solche Schmucksachen.
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.
Ja, sollte man, dann kommen die Leute mit Glitzer-Text um die Ecke.
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.
Also wenn ich Design gut einsetze, dann hilft das immer.
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.
Immer mal Feuerwerk machen mit CSS, das geht nur mit JavaScript, das ist so langweilig.
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.
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.
Dann bin ich gespannt, wie gesagt, ob es auch in Firefox laufen wird bis dahin.
Das müsste ja, also angenommen, diese, was war das, wie hieß die jetzt nochmal, diese Paint-Arby? Nee, oder?
Paintlet.
Paintlet, also das, wo man, ja genau. Also angenommen, das funktioniert so ähnlich wie Canvas oder fast genauso.
Und Animationen gehen ja auch schon, hat man an dem Ripple gesehen.
Canvas-Feuerwerk gibt es ja schon zuhauf, das kannst du dir einfach kopieren.
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.
Schauen wir mal, ich bin genauso gespannt wie du.
Und so wie ich den Konstantin kenne.
Ist es nächste Woche?
Ist es morgen?
Nee, ich wünsche ich.
In drei Stunden ist es fertig.
Es ist zwar etwas ruhig, aber ich habe aus diversen anderen Gründen nicht so viel Zeit.
Ich glaube nicht, dass ich das schaffe.
Aber bis Ende des Jahres sollte es hoffentlich machbar sein.
Wir schauen mal.
Vielleicht auch nicht.
Also ich befürchte ja, die Motivation wird sterben, wenn du es nicht bis übermorgen gemacht hast.
Das kann schon sein.
Es ist ja jetzt wirklich ein Ende.
Gut.
Also ich packe noch ein paar weitere Links.
Da habe ich was vom Smashing Magazine gelesen, sogar vom März jetzt 2020, sehr aktuell.
Practical Overview, CSS Houdini, Creative Blog, sagt mir jetzt nichts.
Da war auch ein Artikel, den habe ich so kurz überflogen.
Packe ich alles in die Shownotes rein.
Denn wer da Lust hat, sich tiefer einzulesen, kann das damit tun.
Ja, und damit wäre ich jetzt auch schon am Ende dieser extrem langen Themen gedöhnt.
Ach, so lange war das gar nicht.
Hatten wir, glaube ich, oder?
Na, wir sind ja noch nicht alles fertig.
Kommt ja noch hier Geilteil und Verabschiedung und so.
Dann sind wir schon, so im Schnitt sind wir dann schon recht lange.
Ja, jetzt kommt ja vielleicht erst mal das.
Du hetzt mich nicht.
Das Geilteil kommt heute vom Konstantin.
Ja, auch wieder.
Das heißt, ihr müsst meine zärtliche Stimme noch länger ertragen.
Es ist Tab9.
Und was ist Tab9?
Tab9 ist eine Code Completion und zwar Programmiersprachenunabhängig, basierend auf Machine Learning.
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.
Die gibt es für Sublime Text, die gibt es für Vim, Emacs, Atom und Jupyter als Plugins.
Weiß jetzt noch nicht, ob ich für alle die Plugin-Links dann reinpacke.
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.
Und das Ganze ist nicht kostenlos.
Es gibt aber einen Freeplan und der hat ein 400kb Projektlimit.
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.
Wie das zum Beispiel mit NPM-Skripts ist, da ist man ja dann doch recht schnell über den 400kb leicht mal drüber.
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.
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.
Gibt es aber auch als Self-Hosted für alle, die da gleich Sicherheitsbedenken haben, dass ihr Code da irgendwo hingeschickt wird.
Also ich kann das in meinem Unternehmen auch selbst hosten, ist wahrscheinlich nicht ganz günstig.
Ich habe Fragen. Ich hätte das zum ersten Mal. Ich weiß, dass du das schon lange auf der Liste hast.
Ich nutze das auch selber schon seit bestimmt fast einem Jahr jetzt inzwischen oder dreiviertel Jahr vielleicht.
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.
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,
deswegen versuche ich jetzt mal zu erklären, ist, naja, da wird Code getippt und dann gibt es da irgendwie schlaue Vervollständigungen.
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.
Richtig. Die Projektdateien werden indexiert, aber es gibt auch schon Algorithmen basierend auf, es steht irgendwo eine Zahl auf der Webseite,
auf was weiß ich, wie viele Tausenden oder Hunderttausenden oder Zehntausenden Open Source Projekten, die da zum Antrainieren von diesem Modell benutzt wurden.
Und ich kann nur sagen, es funktioniert sehr gut.
Nutzt Tabline, es ist sehr gut.
Mich würde total interessieren, wie bei jeder Autovervollständigung, was passiert, wenn ich da einfach immer nur die Vervollständigung auswähle?
Was für ein Programm schreibe ich dann?
Dann hast du am Schluss ein Programm zur Übernahme der Weltherrschaft.
Nee, ich weiß es nicht.
Aber ich kann wirklich nur sagen, es funktioniert wirklich sehr gut.
Also wenn ich jetzt irgendwie vor, Klammer aufschreibe und egal, was ich dann als wahr am Anfang mache,
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.
Also die Vervollständigung ist wirklich sehr gut und die hat mir beim Programmieren schon sehr, sehr viel Zeit gespart.
Also so eine Code Completion, wenn man jetzt mit dem Editor schreibt, der das nicht hat und der es kann,
also man möchte ja eigentlich nie wieder zurück, das ist ja so schon ziemliche Hilfe und ziemliche Zeitersparnis.
Aber Tab9 macht das Ganze wirklich sehr, sehr gut.
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.
Und dann auch teilweise schon mehrere Zeilen hintereinander und dann funktioniert das plötzlich genau so, wie ich es haben wollte.
Also ich war wirklich begeistert und bin immer noch begeistert, wie das funktioniert.
Jetzt weiß ich leider nicht mehr, wie dieses Plugin hieß, das ich für VS Code mal verwendet habe,
das so etwas Ähnliches gemacht hat.
Nicht so krass, ich glaube, da waren die Vervollständigungen kleiner, also so mehr nur der nächste Befehl.
Jetzt nicht, ich weiß gar nicht, bei Tab9 sieht das jetzt ein bisschen nach mehr aus, als das, was ich da gesehen habe.
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.
Also sowas, das hat, wie hieß das denn noch?
Ich habe es jetzt auf die Schnelle nicht gefunden.
Es ist nicht dieses Standard Intellizense, was ja in VS Code so standardmäßig mit drin ist.
Es war dafür nochmal ein extra Plugin.
Ich habe das auch auf meinem Arbeitsrechner im Einsatz, aber den habe ich jetzt gerade nicht.
Wenn wir es finden, dann packen wir es auf jeden Fall in die Shownotes.
Genau, wenn ich es noch finde, dann packe ich es noch in die Shownotes, weil vielleicht, also es war auf jeden Fall kostenlos.
Da musste man nichts bezahlen.
Zu dem Preismodell wollte ich noch kurz was sagen.
Ja, ich möchte auch noch kurz was sagen zu Free und Paid.
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.
Also wenn ich was in Rust programmiere und habe aber keine Lizenz für Rust-Code, wird die Vervollständigung trotzdem gemacht.
Das finde ich eigentlich ziemlich cool, so vom Entwickler als dann an dieses Ökosystem.
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.
Ja, es gab früher mal Lizenzen, sieht man auch noch in den FAQ-Gestandpunkt dazu, es gab mal solche Pay-Once-Geschichten.
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.
Aber inzwischen geht es nur noch mit Subscription.
Und das spricht immer mit der Cloud oder das geht auch bei mir lokal?
Also wie gesagt, du kannst es auch Self-Hosting betreiben, du kannst es auch projektbasiert deaktivieren, soweit ich das weiß.
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.
Also das kann man schon verhindern, dass das so gemacht wird.
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.
Also klingt für mich tatsächlich sehr interessant.
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.
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.
Also ich habe zum Beispiel auch keine Lizenz davon, ich habe das nicht gekauft und ich kriege auch nichts, wenn es jemand kauft.
Ref-Links in den Podcasts sowieso auch ein bisschen schwierig, auch gut über unsere Seite.
Aber was? Nein.
Geht auf tab9.com slash Fragezeichen, Ref ist gleich, nein.
Ref gleich Konstantin, der coole Checker.
Oh, wow.
Ja, das ist, da kriegt ihr einen 0% Rabatt.
Genau.
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.
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.
Absolut, total.
Ja, klar auch nicht.
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.
Naja, heute haben wir über Houdini gesprochen.
Wir reden über Sachen, die einer von uns gut findet.
Ja, das kostet, Houdini kostet ja auch nichts.
Noch ist Houdini kostenlos, vielleicht hängt da Google irgendwann noch ein Preisschild dran.
Naja, nun, also ich fand das, ich werde es auf jeden Fall mal ausprobieren.
Auf jeden Fall mal irgendwie free planen, das ist immer gut, wenn es sowas gibt.
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.
Oder ich kaufe gleich die Enterprise, wo nicht steht, was es kostet.
Contact us for pricing.
Die Enterprise.
Schreibe ich doch gleich mal an Raumschiff Enterprise at tab9.com.
Genau.
Jetzt reicht es mir, den schlechten Wortspielen.
Ach, Moment, warte mal, warte mal, warte mal.
Ah ja, das ist der Gute, das ist der Gute.
Nee, das war der Schlechte.
Nein, ich finde das viel besser.
Achso, du findest ihn ja besser, okay.
Du kannst natürlich, wenn du bei dem anderen noch eine geile Bassdrum unter das Becken packst, dann bin ich vielleicht bei dir.
Mach das andere nochmal.
Das ist doch nur lauter und das ist total schlecht gespielt.
Das ist ein echtes Schlagzeug, das andere ist halt einfach nur so Synthesizer.
Aber gut, egal, egal.
Ja, hast du das selbst gebaut?
Nee, nee, nee, hab ich bei freesound.org runtergeladen.
Okay, ich, nee, das ist eigentlich fast zu aufwendig, sowas einzuspielen.
Ich hab gerade überlegt, ob ich sowas mal machen soll.
Ach ja, mit einem Metal-Schlagzeug oder so.
Und ein China-Becken ist ganz wichtig dann.
Gut, ich glaube, damit sind wir mit dem Geil-Teil fertiggegeilt, oder?
Ja, ich glaube, damit sind wir auch mit der Show eigentlich soweit durch.
Wow, das war jetzt echt wieder ganz schön viel Gesabbel von mir.
Ich kann mir vorstellen, dass das als, also für mich ist es zum Sprechen schon ganz schön anstrengend,
wenn ich mir jetzt auch noch zuhören müsste.
Also ich kann mir vorstellen, dass das schon anstrengend ist, die gleiche Person immer am Stück reden zu hören.
Also ich fand das letztes Mal ganz cool, als wir zusammen was vorbereitet haben.
Das wird halt einfach nicht immer gehen, weil wir können nicht einfach nur die Newsartikel von letzter Woche durchgehen,
sondern wir wollen ja schon auch mal irgendwie so ein Thema ein bisschen breiter durchkauen.
Ich hoffe, dass wir das geschafft haben, dass wir es zwischendrin mal ein bisschen unterbrochen haben mit Fragen und so und mit Einschätzungen.
Falls es langweilig war und sehr lang, tut mir leid.
Mir nicht.
Kriegen wir mal wieder auf den Finger gehauen, dass wir anderthalb Stunden gepodcastet haben.
Ich bin ja super froh, dass die Technik heute wieder sehr gut funktioniert hat.
Am Anfang nicht.
Also wir haben, glaube ich, eine Stunde damit verbracht, rauszufinden, was mit der Technik los ist.
Und dann hat es irgendwie, Schlagacht hat es funktioniert.
Ja, aber magisch, magisch.
Als wir gerade dabei waren, dem Problem so richtig tief auf den Grund zu gehen.
Also ich glaube, da steckt jemand dahinter.
Ja, da steckt bestimmt mehr dahinter.
Vielleicht das asoziale Netzwerk, wer weiß.
Gut, also wir versuchen das nächste Mal, die nächste Male vielleicht wieder ein bisschen abwechslungsreicher zu machen.
Und wie gesagt, wir sind auf euer Feedback angewiesen und ja, es kam bisher noch nicht viel, was wir inhaltlich anders machen könnten.
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.
Vielleicht wird es mal nur eine Dreiviertelstunde oder so.
Aber so insgesamt sind wir, glaube ich, schon mit diesem anderthalb Stunden Ding, eine bis anderthalb Stunden.
Das ist, glaube ich, so unser Ding.
Ja, darauf läuft es irgendwie immer hinaus.
Wir können uns nicht kürzer fassen und wir labern einfach sehr gerne.
Und wir schneiden das dann auch nicht raus.
Also ich glaube, bei der letzten Folge ist gar nichts geschnitten worden.
Das wird wahrscheinlich heute wieder auch drauf hinauslassen.
Ja, ich habe hier das Problem, dass mein Schreibtisch sehr mit vibriert, sobald ich nur irgendwie eine Bierflasche abstelle oder so.
Ja, sowas hier.
Das habe ich, glaube ich, letztes Mal ein paar Mal rausgeschnitten.
Oder meine Tastatur, die auch sehr laut klappert.
Ja, aber das gehört doch dazu.
Das sind doch die Soundeffekte, die das Ganze erst richtig echt machen.
Ich glaube, es reicht jetzt, verdammt nochmal.
Ich wollte noch was hier.
Wir sind jetzt im Werbeblock angelangt und heute bin ich zufällig.
Also wie gehe ich da jetzt ran?
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.
Ja, der heißt, glaube ich, sogar genauso.
Ja, das ist nur der Untertitel.
Der heißt Global Player, wo wir sind, ich vorne.
Aha, okay.
Das heißt wirklich ich.
Also ich meine, wäre sehr, sehr passend, weil da, wo wir herkommen, wird auch ich gesagt.
Aber ist das nur am Rande.
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.
Also Podcast muss man schon noch dahinter packen.
Also das habe ich heute gemacht, um zu gucken, wie stehen wir denn bei Google.
Und der erste Treffer ist, glaube ich, Podcast.de, wenn ich es richtig weiß, wenn man, wo wir sind, ist vorne Podcast eingibt.
Und da habe ich uns auch eingetragen.
Also es ist total okay, dass wir irgendwie da sind, dass man uns da findet.
Ist ja auch gut, man findet also den Podcast tatsächlich, nicht direkt erst unsere Seite.
Aber da fiel mir dann auf, da gibt, da haben wir schon Bewertungen und davon ist keine jetzt von mir selbst,
sondern wir haben da irgendwie vier Bewertungen, alle fünf Sterne, also insgesamt durchschnittlich fünf Sterne, also fünf Sterne Bewertungen.
Vielen Dank an die anonymen Bewerter, keine Ahnung, wer das war, an die anonymen Sterne Spender.
Sterne Spender.
Ja, gerne, gerne mehr davon, aber das hat mich sehr gefreut, da bin ich so zufällig drüber gestolpert.
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.
Gibt es da auch, haben wir da auch Bewertungen?
Da haben wir auch schon Bewertungen, ich glaube, da sind wir ja auch bei fünf,
Durchschnittlich noch, ich weiß nicht, wie viele es da sind, äh, könnte ich jetzt mal nachgucken, dazu müsstest du aber kurz übernehmen.
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.
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.
Da sehe ich nur so eine, hm, Seite, wo alle Folgen aufgelistet sind, da sehe ich aber keine Sternchen.
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.
Das ist so unser erstes Ziel, das wollen wir so gegen Ende des Monats, äh, erreicht.
Gegen Ende des Monats, okay.
Puh, da kriege ich vorher noch meine, meine Firework-Demo fertig.
Ja, siehste, also, und wenn's nur dafür ist, dass die Leute dann hier mal vorbeikommen.
Nee, aber auch so, schon entwickeln sich die Zahlen tatsächlich sehr positiv.
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.
Ja, also, es ist schön, wie's läuft.
Darf doch unsere Kriegs nicht verraten.
Pssst, ich sag ja nicht, was wir gemacht haben, wir haben halt nur auf dem Filter was gemacht.
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.
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.
Äh, ja.
Ja, danke, danke.
Danke und tschüss.
Und tschüss.
Ja, diesmal keine Flöte im Outro, würde ich sagen.
Ja, es hat wohl mir in den Ohren wehgetan.
Kam, haben wir jetzt Feedback gehalten.
Ja, und?
Ja, also, das war ja...
Ich hab dann geantwortet, ja, Ziel erreicht.
Ja, genau, Ziel erreicht, wollte ich auch sagen.
Gut, dann, äh, macht's gut, wo auch immer ihr seid.
Und bis in zwei Wochen.
Ja, haut rein, Freunde.
Ciao.