WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: TIL: TTL (Tagged Template Literals)
Publishing Date: 2020-11-15T11:51:03+01:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/til-ttl-tagged-template-literals/

00:00:00.000 --> 00:00:03.560
 Wo wir sind, ist vorne, Folge 17. Heute geht's um Template Literals.

00:00:03.560 --> 00:00:19.600
 Herzlich willkommen bei Wo wir sind, ist vorne.

00:00:19.600 --> 00:00:22.360
 Frontend Fakten Frotzelein.

00:00:22.360 --> 00:00:26.380
 Der Late Night Frontend Talkshow rund um Webdesign und Entwicklung.

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

00:00:38.080 --> 00:00:56.680
 Hallo liebe Frontend... Ne, ich kann's nicht sagen.

00:00:57.300 --> 00:01:03.540
 Das, was in meinem Kopf war, war gerade nicht tauglich für diese Sendung, trotz dass wir eine Late Night Talkshow sind.

00:01:03.540 --> 00:01:05.760
 Jetzt kriegen wir wieder böse Zuschriften.

00:01:07.840 --> 00:01:09.860
 Sonst kriegen wir wieder böse Zuschriften, genau.

00:01:09.860 --> 00:01:13.120
 Herzlich willkommen zu Wo wir sind, ist vorne.

00:01:13.120 --> 00:01:18.780
 Und ich möchte jetzt direkt beginnen mit Bier, weil wir haben wieder Bier zugeschickt bekommen.

00:01:18.780 --> 00:01:19.300
 Juhu.

00:01:19.600 --> 00:01:28.960
 Und, äh, diesmal ist das aus dem Rüsselsheimer Brauhaus, ähm, ich mach jetzt auch mal Werbung dafür, weil das ist so eine kleine Brauerei, der Konstantin holt schon die Mateflasche raus.

00:01:28.960 --> 00:01:29.800
 Ich hab sie nämlich abgefüllt.

00:01:29.800 --> 00:01:30.520
 Ja, ja, du hast sie abgefüllt, ja.

00:01:30.520 --> 00:01:32.760
 Oh, hat man das gehört?

00:01:32.760 --> 00:01:34.140
 Das hat gezwitscht.

00:01:34.140 --> 00:01:37.580
 Ich bin ja mal gespannt, ob die Kohlensäure noch vorhanden ist nach dem Umfüllen.

00:01:37.580 --> 00:01:41.880
 Und zwar haben wir zwei Biere geschickt bekommen, äh, von, von, äh, einem Hörer.

00:01:42.860 --> 00:01:48.880
 Und, äh, wir fangen jetzt mal an, wir haben ein helles und ein IPA und wir fangen mal an mit dem IPA.

00:01:48.880 --> 00:01:52.080
 So, ich, äh, schenke mal ein, vielleicht hört man das auch ein bisschen.

00:01:52.080 --> 00:01:54.680
 Ich trinke es aus der Flasche.

00:01:54.680 --> 00:02:03.120
 Also es riecht schon mal, ja, wie so ein, wie so ein IPA zu riechen hat, so ein, äh, was ist das denn? Ist das malzig oder?

00:02:03.120 --> 00:02:04.740
 Nach Genitalien oder was?

00:02:04.740 --> 00:02:06.420
 Wie hat denn ein IPA zu riechen?

00:02:06.420 --> 00:02:08.000
 Nicht STD, sondern IPA.

00:02:08.540 --> 00:02:14.100
 Also so ein bisschen wie so ein, wie so ein Killcanny oder, äh.

00:02:14.100 --> 00:02:14.980
 Bringst du es aus der Flasche?

00:02:14.980 --> 00:02:16.280
 Ja, darf ich nicht.

00:02:16.280 --> 00:02:17.280
 Doch, natürlich.

00:02:17.280 --> 00:02:18.680
 Ich kann mir auch ein Bierglas holen.

00:02:18.680 --> 00:02:22.700
 Nee, nee, du darfst es auch gerne aus der, es ist nur witzig, weil ich sehe jetzt halt gerade, wie ihr es trinkt.

00:02:22.700 --> 00:02:25.520
 Ja, es sieht aus wie Marte, also es sieht halt aus wie Marte, ja.

00:02:25.520 --> 00:02:28.940
 Es sieht tatsächlich, nee, es sieht aus wie Marte Eistee, würde ich sagen.

00:02:28.940 --> 00:02:29.280
 Marte Eistee, ja.

00:02:29.280 --> 00:02:30.840
 Weil der ist ein bisschen dunkler.

00:02:30.840 --> 00:02:33.940
 Aber jetzt musst du mal erklären, was, was für ein Brauhaus, wie hieß das?

00:02:33.940 --> 00:02:36.140
 Rüsselsheimer Brauhaus.

00:02:36.360 --> 00:02:42.140
 So, weil auf dem Screenshot von deiner Flasche auf Twitter, auf unserem Account, da ist nämlich, da steht nämlich.

00:02:42.140 --> 00:02:46.700
 Achso, ja, da ist ein Aufkleber, ja stimmt, da ist ein Sticker drauf, da steht drauf, das Brauhaus.

00:02:46.700 --> 00:02:51.700
 Und zwar von Hauptschule Rhein-Main.

00:02:52.660 --> 00:02:57.360
 Ich habe da mal, ich habe da schon mal recherchiert, es ist wohl die Hochschule Rhein-Main eigentlich.

00:02:57.360 --> 00:03:00.540
 Was hat es denn damit auf sich?

00:03:00.540 --> 00:03:03.280
 Ja, das ist gesponsert.

00:03:03.280 --> 00:03:05.260
 Von der Hochschule.

00:03:05.260 --> 00:03:06.640
 Von der Hochschule.

00:03:06.640 --> 00:03:13.200
 Ich dachte mir, das kann man halt mal, also wir kriegen ja immer gerne Bier geschickt.

00:03:13.200 --> 00:03:15.980
 Das ist ja jetzt auch nicht zum ersten Mal, das dürft ihr auch gerne machen.

00:03:16.360 --> 00:03:24.160
 Die Adressen stehen bei uns im Impressum, die, ja, und das ist jetzt uns gesponsert worden und wir trinken das jetzt.

00:03:24.160 --> 00:03:31.920
 Und viel, ich weiß nicht, ich finde, man darf auch in dem Fall die Brauerei erwähnen, weil das ist jetzt keine große Brauerei, finde ich immer gut.

00:03:32.140 --> 00:03:37.020
 Also andere große Brauereien würde ich jetzt nicht erwähnen, habe ich ja schon öfter mal gesagt, aber hier so was Kleines.

00:03:37.020 --> 00:03:44.960
 Das ist so vergleichbar mit, vielleicht, ich habe, ich weiß, dass wir auch Karlsruher Zuhörer haben, das ist so vergleichbar wie mit Vogelbräu oder Kühler Krug.

00:03:44.960 --> 00:03:53.300
 Und falls ihr das jetzt nicht kennt und irgendwo anders aus der Welt zuhört, das sind beides Biere, die man mal trinken kann, würde ich sagen.

00:03:53.300 --> 00:03:55.100
 Dann lass uns doch mal anstoßen, virtuell.

00:03:55.100 --> 00:03:56.540
 Ja, zum Wohl.

00:04:00.380 --> 00:04:05.180
 Oh ja, oh ja.

00:04:05.180 --> 00:04:06.920
 Und sehr süffig.

00:04:06.920 --> 00:04:09.840
 Ich finde es, ja, es ist mild, es ist so, wie ich es mag.

00:04:09.840 --> 00:04:11.780
 Karamellnoten ein bisschen.

00:04:11.780 --> 00:04:18.260
 Ein bisschen wenig Kuhlsäure tatsächlich, wahrscheinlich durchs Umfüllen, aber.

00:04:18.260 --> 00:04:21.400
 Genau, das habe ich gerade auch gedacht.

00:04:21.400 --> 00:04:24.640
 Es hat auch wenig geschäumt beim Einschenken.

00:04:24.640 --> 00:04:29.320
 Es kann sein, dass es durchs Umfüllen, also, ja, die Flasche war auch,

00:04:29.840 --> 00:04:31.960
 weil es relativ, es hat stark geschäumt beim Umfüllen.

00:04:31.960 --> 00:04:34.100
 Es kann sein, dass da einiges verloren gegangen ist.

00:04:34.100 --> 00:04:34.460
 Ja.

00:04:34.460 --> 00:04:36.620
 Ja, okay.

00:04:36.620 --> 00:04:39.420
 Gut, bevor wir zum Bier-Sommelier-Podcast werden.

00:04:39.420 --> 00:04:43.540
 Ja, aber das wäre unser, vielleicht unser, unser zweites Podcast.

00:04:43.540 --> 00:04:46.240
 Wo wir, wo wir saufen, ist vorne.

00:04:47.920 --> 00:04:50.920
 Ja, wir haben vorhin schon gesagt, wir wissen nicht genau, also, wo wir sind, ist vorne.

00:04:50.920 --> 00:04:52.960
 Das wissen wir schon, aber wir wissen gar nicht, wo ihr seid.

00:04:52.960 --> 00:04:55.800
 Ihr könnt uns ja mal in die Kommentare schreiben, wo ihr seid.

00:04:57.960 --> 00:05:13.620
 Ich drücke einfach, wenn es zu viel wird, drücke ich das Knöpfchen.

00:05:13.620 --> 00:05:17.160
 Wir können wieder nacheinander.

00:05:17.160 --> 00:05:19.040
 Ich habe nämlich zwei Sachen, dann fange ich an.

00:05:19.040 --> 00:05:20.600
 Du bist in der Mitte und ich bin dann am Ende.

00:05:20.600 --> 00:05:22.380
 Ja, ich habe auch so anderthalb Sachen.

00:05:22.380 --> 00:05:24.140
 Bei mir ist nicht so viel passiert.

00:05:24.140 --> 00:05:25.260
 Okay, dann fange ich jetzt.

00:05:25.260 --> 00:05:25.840
 Gerne.

00:05:25.840 --> 00:05:26.720
 Ich fange mal an.

00:05:26.720 --> 00:05:28.400
 Ich habe jetzt ein Mac.

00:05:28.400 --> 00:05:35.800
 Viele, ja, ich glaube, als wir mit dem Gerrit gesprochen haben, ich weiß gar nicht, ob das,

00:05:36.460 --> 00:05:41.740
 also das war die Typografie-Folge, ich weiß gar nicht, was im Vorgespräch war oder während

00:05:41.740 --> 00:05:45.580
 der Folge, wo es dann so darum ging, ja, wie ihr nutzt gar keine Macs und so.

00:05:45.580 --> 00:05:50.360
 Ich bin jetzt auch unter die Mac-User gegangen, also eins meiner Geräte.

00:05:50.360 --> 00:05:56.320
 Und ich habe ein bisschen zu kämpfen gehabt, also es ist an sich echt schönes Gerät, macht

00:05:56.320 --> 00:06:00.280
 Spaß, aber ich habe sehr zu kämpfen gehabt, weil ich habe jetzt hier irgendwie 20 Jahre

00:06:00.280 --> 00:06:06.900
 Muscle-Memory-Shortcuts und es ist ganz schön schwer, da umzusteigen, weil viele Sachen

00:06:06.900 --> 00:06:09.860
 auf dem Mac einfach anders funktionieren.

00:06:09.860 --> 00:06:14.900
 Die funktionieren zwar grob so ähnlich und es gibt auch so ziemlich jede Standard-Funktionalität,

00:06:14.900 --> 00:06:17.860
 keine Ahnung, was macht man ganz oft?

00:06:17.860 --> 00:06:22.660
 Der Klassiker ist doch, E-Mail-Adresse eingeben wollen und dabei das Fenster schließen, oder?

00:06:22.660 --> 00:06:25.280
 Wenn man als Windows-User auf der Mac-Tastatur arbeitet.

00:06:25.280 --> 00:06:29.900
 Fenster schließen ist, glaube ich, war das doch, war doch hier mit.

00:06:30.080 --> 00:06:31.580
 Das weiß ich gar nicht.

00:06:31.580 --> 00:06:36.660
 Es wäre dann, nee, das ist aber Alt-GR, was man drückt und das ist nicht Apfel auf dem

00:06:36.660 --> 00:06:36.840
 Mac.

00:06:36.840 --> 00:06:41.040
 Also mir ist das jedenfalls irgendwie passiert immer, dass ich das Fenster geschlossen habe,

00:06:41.040 --> 00:06:42.120
 statt die Adresse einzugehen.

00:06:42.120 --> 00:06:42.960
 Das kann sein.

00:06:42.960 --> 00:06:47.880
 Ich habe jetzt, also ich habe eine Weile jetzt, zwei Wochen oder so versucht, damit klar zu

00:06:47.880 --> 00:06:52.100
 kommen und zu sagen, okay, ich lerne das jetzt.

00:06:52.100 --> 00:06:57.000
 Mein Problem ist aber, dass ich halt nebenher auch noch ein Windows und Linux benutze momentan

00:06:57.000 --> 00:07:00.000
 und es ist wahnsinnig schwer, hin und her zu switchen.

00:07:00.040 --> 00:07:04.040
 Und jetzt, heute habe ich gesagt, nee, jetzt reicht's.

00:07:04.040 --> 00:07:05.940
 Ich breche mir hier einen ab.

00:07:05.940 --> 00:07:10.920
 Dann habe ich erst versucht, so im Mac intern Tasten auszutauschen.

00:07:11.000 --> 00:07:17.120
 Man kann nämlich dann sagen, ja, wenn du jetzt hier die Apfeltaste hast, denn das ist ja

00:07:17.120 --> 00:07:20.220
 eigentlich ja diese, wie hat ein Kollege gesagt?

00:07:20.220 --> 00:07:21.660
 Egal.

00:07:21.660 --> 00:07:26.540
 Also die frühere Apfeltaste mit diesem komischen Symbol da drauf.

00:07:28.380 --> 00:07:31.940
 Man kann die auch tauschen gegen eine andere und dann sagen, okay, das ist jetzt irgendwie dieselbe

00:07:31.940 --> 00:07:33.060
 wie Control oder sowas.

00:07:33.060 --> 00:07:34.400
 Ich glaube, das ist die Control-Taste.

00:07:34.960 --> 00:07:37.680
 Ja, also dass es dieselbe Taste ist wie dann Steuerung.

00:07:37.680 --> 00:07:40.340
 Oder das einfach tauschen.

00:07:40.340 --> 00:07:41.440
 Das war jetzt gerade verwirrend.

00:07:41.440 --> 00:07:41.880
 Macht nichts.

00:07:41.880 --> 00:07:48.060
 Das hat mir ein bisschen weitergeholfen, weil ich dann plötzlich die Links-Außen-Taste

00:07:48.060 --> 00:07:49.200
 wieder drücken konnte.

00:07:49.920 --> 00:07:54.500
 Aber irgendwie hat es dann doch nicht ausgereicht, weil an vielen verschiedenen Stellen, gerade

00:07:54.500 --> 00:07:58.980
 wenn man irgendwie so mit der Tastatur Text markiert oder so, mit den Pfeiltasten und halt

00:07:58.980 --> 00:08:04.560
 auf dem PC, also sowohl unter Linux, unter den Linuxen, die ich benutzt habe, als auch unter

00:08:04.560 --> 00:08:11.500
 Windows, machst du ja Steuerung, Shift und dann Pfeiltasten links oder rechts, um dann irgendwie

00:08:11.500 --> 00:08:12.280
 was auszuwählen.

00:08:12.280 --> 00:08:15.200
 Und das ist halt eine komplett andere Geschichte auf dem Mac.

00:08:15.200 --> 00:08:19.680
 Da machst du nämlich, glaube ich, Shift und diese Alt-Taste da, also diese Option-Taste,

00:08:19.820 --> 00:08:20.360
 ich glaube, und dann.

00:08:20.360 --> 00:08:24.660
 Und ich habe mir einen abgebrochen, ständig mit jedem Shortcut.

00:08:24.660 --> 00:08:30.780
 Und auch der Finder, sowas wie der Explorer, funktioniert ganz anders, hat ganz andere Shortcuts.

00:08:30.780 --> 00:08:34.140
 Zum Beispiel bin ich es total gewöhnt, dass ich mit Backspace irgendwie eine Ordnerebene

00:08:34.140 --> 00:08:34.820
 nach oben komme.

00:08:34.820 --> 00:08:35.960
 Das geht da einfach nicht.

00:08:35.960 --> 00:08:40.680
 Ich war es gewöhnt, dass es eine Delete-Taste gibt, mit der ich irgendwas löschen kann.

00:08:40.680 --> 00:08:42.400
 Das hat da irgendwie auch nicht so richtig funktioniert.

00:08:42.400 --> 00:08:45.220
 Und dann fange nicht an, mit Klammern zu tippen.

00:08:45.220 --> 00:08:49.640
 Irgendwie, weil die geschweiften und die eckigen Klammern sind zum Beispiel,

00:08:49.720 --> 00:08:51.600
 gar nicht auf der Tastatur von dem MacBook drauf.

00:08:51.600 --> 00:08:53.040
 Das heißt, du musst wissen, wo die sind.

00:08:53.040 --> 00:08:59.500
 Und ich habe jetzt halt hier aber eine Windows-Tastatur, wo die halt draufgedruckt sind.

00:08:59.500 --> 00:09:02.380
 Aber halt an einer anderen Stelle, als sie dann da wären.

00:09:03.180 --> 00:09:06.620
 Und ich bin durchgedreht und dann habe ich gesagt, so jetzt reicht es.

00:09:06.620 --> 00:09:11.100
 Ich suche jetzt mal, ob es irgendwie was gibt, wie ich meine alten Shortcuts wieder zurück zum Mac bringen kann.

00:09:11.100 --> 00:09:13.180
 Jetzt kann man sagen, okay, lern halt mal was Neues.

00:09:13.180 --> 00:09:15.160
 Aber wie gesagt, ich habe mehrere Systeme im Einsatz.

00:09:15.700 --> 00:09:17.700
 20 Jahre Muscle-Memory auf diesem System.

00:09:17.700 --> 00:09:22.660
 Ich glaube, ich bin zu alt und zu wehre, um davor nochmal wegzukommen.

00:09:23.320 --> 00:09:24.440
 So, der langen Rede.

00:09:24.440 --> 00:09:25.880
 Kurzer Sinn.

00:09:26.400 --> 00:09:37.740
 Es gibt ein Open-Source-Tool für macOS, das einem beliebige, das fungiert selbst quasi als Tastatur, was einem beliebige Umdeutung der Tastatur für Shortcuts machen kann.

00:09:37.860 --> 00:09:42.080
 Also, ich kann tatsächlich so einfache Sachen machen wie, diese Taste soll jetzt diese sein.

00:09:42.080 --> 00:09:46.160
 Also, ich kann theoretisch machen, wenn ich ein B drücke, kommt ein A, so was ganz Einfaches.

00:09:46.160 --> 00:09:52.380
 Oder, keine Ahnung, Control, Windows-Taste und so weiter kann ich irgendwie so belegen, wie ich will.

00:09:52.380 --> 00:10:00.900
 Ich kann aber auch tatsächlich komplexere Sachen machen, im Sinne von tatsächlich Tastatur-Shortcuts auch nur für bestimmte Software, dass die dann so funktioniert, wie es soll.

00:10:00.900 --> 00:10:05.120
 Also, zum Beispiel, dass ich F5 drücke und der Browser refresht sich.

00:10:05.300 --> 00:10:08.380
 Das ist zum Beispiel in Safari normalerweise Control-R.

00:10:08.380 --> 00:10:12.540
 Und Steuerung R funktioniert ja auch unter Windows.

00:10:12.540 --> 00:10:16.160
 Aber wenn man es gewohnt ist, dass man F5 drückt, klar.

00:10:16.160 --> 00:10:19.100
 Oder der Klassiker, eine Datei umbenennen mit F2.

00:10:19.100 --> 00:10:30.160
 Das ist eben bei, im Finder auf dem Mac ist einfach Enter drücken, was ich total widersinnig finde, weil Enter für mich eigentlich etwas öffnen ist.

00:10:30.160 --> 00:10:32.220
 Ja, und wie öffnest du es dann mit der Tastatur?

00:10:33.380 --> 00:10:37.120
 Ich glaube, es ist Control-O für Open.

00:10:37.120 --> 00:10:37.560
 Okay.

00:10:37.560 --> 00:10:43.040
 Also, es funktioniert, ich will nicht sagen, es ist schlecht, es funktioniert nur einfach komplett anders, als ich es gewöhnte.

00:10:43.040 --> 00:10:43.520
 Es ist gewöhnungssache einfach, ja.

00:10:44.000 --> 00:10:47.900
 Und ich habe jetzt beschlossen, ich gewöhne mich da nicht mehr dran, sondern ich nutze ein Tool.

00:10:47.900 --> 00:10:49.420
 Und das ist tatsächlich auch kostenlos.

00:10:49.420 --> 00:10:51.680
 Ich habe jetzt schon lange darüber geredet, aber gar nicht gesagt, wie es heißt.

00:10:51.680 --> 00:10:52.560
 Es ist auch kostenlos.

00:10:52.560 --> 00:11:03.620
 Und es gibt schon sehr, sehr viele, also ich sage es mal so, schon viele Leute haben die gleichen Probleme gehabt wie ich und wollten halt vom PC umsteigen auf den Mac und wollten eben genau diese Shortcuts haben.

00:11:03.680 --> 00:11:08.760
 Und da gibt es schon, ich muss im Prinzip nur so ein paar Konfigurationen reinziehen und dann funktionieren 90 Prozent der Shortcuts.

00:11:08.760 --> 00:11:11.820
 Sogar das Add funktioniert wieder so, wie es soll.

00:11:12.500 --> 00:11:18.260
 Ja, und das Tool heißt Carabiner, Moment, ich, Carabiner Elements.

00:11:18.260 --> 00:11:19.540
 Und es ist Open Source.

00:11:19.540 --> 00:11:28.260
 Und ich habe wirklich einen Freudenschrei ausgestoßen, als ich das heute installiert habe und plötzlich wieder STRG S drücken konnte und es hat funktioniert.

00:11:28.260 --> 00:11:29.520
 Sehr cool.

00:11:29.520 --> 00:11:31.520
 Es war einfach ein sehr gutes Gefühl.

00:11:31.520 --> 00:11:34.600
 Und super, es ist kostenlos und man kann es einfach so verwenden.

00:11:34.600 --> 00:11:45.080
 Nun, im Prinzip war es installieren und einfach nur zwei, drei Konfigurationen laden, die schon fertig sind und damit war ich schon fast, fast am Ziel meiner Träume.

00:11:45.080 --> 00:11:48.500
 Verdingst du dir auch die fertigen Konfigurationen?

00:11:48.500 --> 00:11:53.800
 Weil ich glaube, der Use Case als Windows-Umsteiger, das nutzen zu wollen, ist, glaube ich, relativ groß.

00:11:53.800 --> 00:11:57.020
 Ja, das mache ich noch.

00:11:57.020 --> 00:11:57.780
 Das packst du in die Shownotes.

00:11:57.780 --> 00:11:58.140
 Sehr gut.

00:11:58.140 --> 00:11:59.660
 Das packe ich noch in die Shownotes, genau.

00:11:59.660 --> 00:12:04.020
 Ja, damit wäre ich mit meinem ersten Thema am Ende und du dürftest.

00:12:04.020 --> 00:12:04.420
 Juhu.

00:12:05.180 --> 00:12:09.340
 Ja, bei mir war gar nicht so viel die letzten zwei Wochen seit der letzten Sendung.

00:12:09.340 --> 00:12:16.240
 Davor hatte ich so ein paar Wochen, wo extrem viel los war und mehrere Projekte gleichzeitig jongliert und jetzt war es wieder ein bisschen ruhiger.

00:12:16.240 --> 00:12:21.520
 Unter anderem habe ich das Print-Projekt abgeschlossen, von dem ich in Folge 13 kurz berichtet habe.

00:12:21.520 --> 00:12:28.360
 Ich mache das ja nicht so oft und ich bin auch sehr froh, dass ich es nicht so oft mache, weil es jedes Mal wieder ein Nervenkitzel ist.

00:12:28.360 --> 00:12:36.940
 Das habe ich jetzt mit CMYK und so alles richtig gemacht, trotz CMYK-Tabellenbuch und kommt das wirklich am Schluss so raus, wie ich das möchte.

00:12:36.940 --> 00:12:38.680
 Aber es hat gut funktioniert.

00:12:39.680 --> 00:12:43.460
 Und ich bin trotzdem froh, das nicht als Hauptgeschäft machen zu müssen.

00:12:43.720 --> 00:12:52.960
 Wobei es wahrscheinlich auch wieder Gewohnheitssache ist, mit der Zeit kriegt man das rein, aber es ist jetzt nicht komplett meine Welt, die ganze Print-Geschichte.

00:12:54.100 --> 00:12:58.900
 Und ansonsten, über OpenType.js habe ich die letzten beiden Folgen, glaube ich, auch jeweils in der Retro berichtet.

00:12:58.900 --> 00:13:04.580
 Da sind meine Pull-Requests jetzt gemerged worden, letztes Wochenende.

00:13:04.580 --> 00:13:15.040
 Ein paar Bugfixes, mit denen man jetzt mehr Fonts speichern kann, die vorher gecrashed sind beim Speichern, weil die Schreibfunktionalität da ja noch nicht so ganz ausgereift ist bei der Library.

00:13:15.480 --> 00:13:26.020
 Und was ich jetzt hinzugefügt habe, ist Schreibunterstützung für Coverage Format 2, Lookup Type 2 Multiple Substitution und Lookup Type 6 in den Formaten 1 und 3.

00:13:26.020 --> 00:13:28.100
 Das sind die Chaining Contextual Substitutions.

00:13:28.100 --> 00:13:34.860
 Wer da jetzt nur Bahnhof versteht in Folge 14 unserer Typo-Folge, gehen wir da so ein bisschen am Rande rein.

00:13:34.860 --> 00:13:39.440
 Ist jetzt eher eigentlich auch für die Leute, die das kennen und die wissen, was OpenType.js macht.

00:13:39.440 --> 00:13:47.240
 Und dass man jetzt in Zukunft mit OpenType.js eben auch Fonts schreiben kann mit Contextual Alternates zum Beispiel.

00:13:47.240 --> 00:13:56.320
 Und meine Hoffnung ist eben, dass Fontself, wo ich ja auch drüber berichtet habe, in Zukunft eben diese Contextual Alternates vielleicht auch erstellen kann.

00:13:56.320 --> 00:14:00.420
 Da habe ich den Entwickler schon angeschrieben, aber leider noch keine Reaktion erhalten.

00:14:00.420 --> 00:14:03.720
 Bin ich mal gespannt, wie schnell das eventuell gehen wird oder auch nicht.

00:14:03.720 --> 00:14:08.600
 Ja, das war es eigentlich schon von mir heute zur Retro. Heute mal ganz kurz und knackig.

00:14:09.140 --> 00:14:13.720
 Ja, Mensch, dann kann ich ja noch ein bisschen labern. Aber das Zweite ist bei mir auch relativ kurz.

00:14:13.720 --> 00:14:26.180
 Eine coole Sache ist passiert, nämlich ein Blink-Developer, und ich weiß nicht genau, ob der jetzt für das ganze Team steht, also hinter dem Chromium, die Chromium Browser Engine,

00:14:26.180 --> 00:14:33.960
 hat ein Proposal eingebracht und hat gesagt, sie wollen jetzt tatsächlich mal ein Prototype für Container-Queries einbauen.

00:14:33.960 --> 00:14:34.320
 Ach.

00:14:35.520 --> 00:14:35.740
 Ja.

00:14:35.740 --> 00:14:39.220
 Container-Queries, ja, kurz, welche Folge war das?

00:14:39.220 --> 00:14:42.460
 Dass wir hier immer Cross-Reference machen können, die Leute da drauf schicken.

00:14:42.980 --> 00:14:46.340
 Eine der CSS-Feature-Folgen.

00:14:46.340 --> 00:14:51.740
 Genau, ich glaube, es war sogar Teil 2, das war dann Folge Nummer 11.

00:14:51.740 --> 00:14:53.260
 11, okay.

00:14:53.260 --> 00:15:00.840
 Genau, ja, also Container-Queries war Folge Nummer 11, aber das war unsere Doppelfolge zum Thema Wünsch dir was an CSS-Features.

00:15:00.840 --> 00:15:04.740
 Genau, da kann man mal reinhören. Da reden wir ein bisschen detaillierter drüber.

00:15:04.980 --> 00:15:12.400
 Also so ganz, so ein bisschen ins Detail noch gegangen, Container-Queries, nochmal ganz kurz, was es überhaupt ist.

00:15:12.400 --> 00:15:23.600
 Also man möchte Module bauen auf einer Seite und möchte dann abhängig von der Größe eines Containers oder eines Elements darin Dinge tun.

00:15:23.720 --> 00:15:34.160
 Also wie das mit Media-Queries ja auch schon geht, nur halt auf Basis der Breite oder der Größe des Browsers möchte man das auch auf Basis der Größe eines einzelnen Elements machen können.

00:15:34.580 --> 00:15:47.280
 Und der Plan, wie das jetzt, also die Idee, die wir jetzt da haben, wie sie es umsetzen wollen, ist, dass das Element, also der Container bekommt ein Contain-Size.

00:15:47.880 --> 00:15:59.700
 Und dann gibt es eine neue Ad-Rule, Ad-Container, wo du dann auch in Klammern irgendwie sowas wie mit 100 Pixel, bla bla bla, so wie es funktioniert im Prinzip, wie Media-Queries, nur halt mit Ad-Container.

00:15:59.700 --> 00:16:05.100
 Und dann kannst du da reinschreiben, was du halt, wie es sich verhalten soll in einem bestimmten Fall.

00:16:05.100 --> 00:16:06.420
 Ja, ich bin echt gespannt.

00:16:06.420 --> 00:16:09.900
 Auch wie schnell die anderen Browser vielleicht dann nachziehen werden.

00:16:09.900 --> 00:16:15.020
 Also in dem Ticket, ich habe das jetzt auch gerade mal geöffnet, da steht auch so drin, was treiben denn die anderen Browser-Hersteller?

00:16:16.340 --> 00:16:20.040
 Echo, da gibt es ein Proposal, aber auch noch kein Signal, dass irgendwas passiert.

00:16:20.040 --> 00:16:23.840
 WebKit, naja gut, ich habe fast schon gedacht, dass da erstmal nichts passiert.

00:16:23.840 --> 00:16:27.400
 Web Developers positive, C-Motivation, okay.

00:16:27.400 --> 00:16:31.740
 Ja, sehr gespannt, also wäre auf jeden Fall ein sehr feines Feature.

00:16:31.740 --> 00:16:39.540
 Ja, wenn man sich da aber so durchliest, merkt man schon, da geht es jetzt nicht um eine fertige Implementierung, die wollen es erstmal reinhacken, damit es irgendwie mal irgendwas gibt.

00:16:39.540 --> 00:16:42.860
 Wahrscheinlich dann hinter einem Flag erstmal und dann ...

00:16:42.860 --> 00:16:46.320
 Allerdings würde es mich nicht wundern, ich weiß es nicht, ich verfolge die Standorten.

00:16:47.020 --> 00:16:47.760
 Standardisierungsprozesse selten.

00:16:47.760 --> 00:16:55.880
 Mich würde es eigentlich nicht wundern, wenn das oft so wäre, dass Features so dann reinkommen, weil dann ist ja jetzt schon da, funktioniert doch, komm, machen wir genauso.

00:16:55.880 --> 00:16:57.720
 Weil alle feststellen, ach, das ist ja echt ganz cool.

00:16:58.480 --> 00:17:07.800
 Ich weiß halt, wie andere Software gebaut wird und Browser sind auch nur Software und funktioniert doch schon, ja komm, lassen wir doch einfach so, ja, brauchen wir noch gar nichts mehr extra weiter, ist doch klasse.

00:17:09.540 --> 00:17:16.700
 Und der Developer sagt dann, oh nein, das geht ja gar nicht, weil das ist doch noch gar nicht richtig hier der Name und das muss doch noch refactored werden.

00:17:16.700 --> 00:17:19.840
 Nee, das funktioniert, los geht's, Feuer.

00:17:22.100 --> 00:17:26.840
 Ja, damit sind wir mit der Retro schon durch, weil, ja, also ich hab das, ja.

00:17:26.840 --> 00:17:28.800
 Heute sind wir heute schnell.

00:17:28.800 --> 00:17:31.000
 Ja, bam, bam, zack, zack.

00:17:31.000 --> 00:17:31.660
 Und weiter geht's.

00:17:31.660 --> 00:17:40.460
 Man wird ja gar nicht meinen, dass das meine Stimme ist, Entschuldigung.

00:17:40.460 --> 00:17:43.920
 Ich klinge manchmal so.

00:17:43.920 --> 00:17:44.480
 Special Effects.

00:17:44.480 --> 00:17:52.560
 Jo, Property der Woche, wir waren sehr CSS-lastig, glaube ich, sowohl themenmäßig als auch mit den Properties immer.

00:17:52.560 --> 00:17:58.440
 Gibt's heute mal wieder was JavaScript-mäßiges und zwar Navigator.sendbeacon.

00:17:59.640 --> 00:18:01.300
 Wo braucht man das? Folgende Situation.

00:18:01.300 --> 00:18:06.040
 Ich will beim Schließen des Tabs noch eine Aktion ausführen, schnell.

00:18:06.040 --> 00:18:13.420
 Ja, noch einen Request zum Server schicken, zum Beispiel irgendwelche Daten speichern oder die Session beenden oder irgendwie ein Tracking hinschicken.

00:18:13.420 --> 00:18:15.580
 Der User hat jetzt die Seite verlassen.

00:18:15.580 --> 00:18:25.480
 Und bisher hat man das so gelöst, dass man das Unload-Event mit einem synchronen XML-HTTP-Request ausgestattet hat, das Callback.

00:18:26.140 --> 00:18:30.940
 Und das führt natürlich dazu, dass solange dieses synchrone Request läuft, alles einfriert.

00:18:30.940 --> 00:18:36.660
 Das heißt, wenn ich wegnavigiere von der Seite, dann habe ich eine Verzögerung und die neue Seite lädt erst, wenn das durch ist.

00:18:36.660 --> 00:18:42.420
 Und man merkt halt einfach, es friert vielleicht sogar das Tab ein, also eigentlich keine schöne Lösung.

00:18:43.060 --> 00:18:46.740
 Und an die Stelle tritt jetzt eben Navigator.sendbeacon.

00:18:46.740 --> 00:18:50.300
 Dem übergebe ich eine URL und Daten.

00:18:50.300 --> 00:18:55.740
 Und diese Daten werden dann asynchron zum Server gesendet, selbst wenn die Seite schon geschlossen wurde.

00:18:56.580 --> 00:19:05.380
 Und an Daten kann ich ja übergeben, ein Array-Buffer, Array-Buffer-View, ein Blob oder ein Dom-String, Form-Data oder URL-Search-Params.

00:19:06.600 --> 00:19:17.020
 Und das macht man nicht in dem Unload-Event oder Before-Unload, sondern das Send-Beacon ist einzusetzen im Visibility-Change-Event.

00:19:17.020 --> 00:19:23.080
 Und das Visibility-Change-Event, das triggert zum Beispiel auch, wenn ich einen Tab in den Hintergrund schalte.

00:19:23.180 --> 00:19:27.840
 Also wenn ich das Tab wechsle, dann triggert das einmal und wenn ich wieder hinwechsle zu dem Tab, triggert das auch.

00:19:27.840 --> 00:19:34.920
 Und über die Visibility-AP kann ich eben auch abfragen, war ich denn vorher visible oder nicht und kann dann entsprechend darauf reagieren.

00:19:34.920 --> 00:19:43.600
 Ja und das klingt erstmal ganz gut und was noch zu sagen ist, die übermittelten Daten, die sind restriktiert.

00:19:43.600 --> 00:19:56.000
 Man kann da jetzt nicht irgendwie mehrere MB über den Ether schicken, sondern das ist so gedacht, dass man kleine Datenmengen schickt, die relativ schnell verarbeitet werden können, sodass die ganze Geschichte schnell abgeschlossen ist, auch wenn es asynchron läuft.

00:19:56.000 --> 00:20:10.280
 Es gibt aber in der Implementierung, also beziehungsweise in den Specs gibt es keine Vorgabe, wie die Browser das zu handeln haben, also was als verkürzt oder beschränkt angesehen wird, sondern das ist der Implementierung überlassen.

00:20:10.280 --> 00:20:18.480
 Also Chrome beispielsweise erlaubt 64 Kilobyte, ist aber eigentlich schon ausreichend, um da irgendwie ein bisschen Text hinzuschicken an den Server.

00:20:18.480 --> 00:20:22.640
 Was wäre denn so ein Use Case? Wofür brauche ich das denn?

00:20:22.640 --> 00:20:26.080
 Ja, Use Case, da habe ich eigentlich schon oben gesagt Tracking.

00:20:26.080 --> 00:20:29.900
 Also wenn ich tracken will, wie lange hält sich ein User auf der Seite auf?

00:20:29.900 --> 00:20:36.460
 Ich kann ja Zeitpunkt messen, wann der User die Seite aufgerufen hat, wann geht er wieder runter, kann ich dann genau messen, wie lange der User drauf war.

00:20:36.920 --> 00:20:46.120
 Oder ich will eben noch, keine Ahnung, ein Chat, der jetzt nicht über WebRTC zum Beispiel läuft, sondern ganz klassisch mit, ich schicke Daten hin und ich will den Online-Status irgendwie abfragen.

00:20:46.120 --> 00:20:50.240
 Dann kann ich sagen, wenn der User den Browser schließt, das Tab schließt, dann ist der User offline.

00:20:50.240 --> 00:20:52.260
 Sowas zum Beispiel würde mir jetzt spontan einfallen.

00:20:52.820 --> 00:21:01.940
 Ich habe gerade noch daran gedacht, jemand hat vielleicht noch in irgendeinem, obwohl da will man vielleicht nochmal drauf hinweisen, es wäre vielleicht doch eher so ein Ding veranlohnt.

00:21:01.940 --> 00:21:14.900
 Ich habe gedacht, wenn jetzt jemand die Seite verlässt, aber irgendwo noch was Dirty hat und irgendwo noch Text drin hat, irgendwas drin hat, was noch nicht gespeichert ist, dass man das dann am Ende nochmal irgendwie an den Server schicken könnte.

00:21:15.380 --> 00:21:23.320
 Ja gut, du kannst natürlich auch Daten speichern, also wenn es jetzt ein Formular ist, irgendwie mit drei, vier Feldern, also 64 Kilobyte, die musst du erstmal voll kriegen.

00:21:24.100 --> 00:21:30.380
 Von daher tatsächlich für solche Sachen, Formular, schnell speichern oder sowas, reicht das durchaus aus.

00:21:30.380 --> 00:21:39.800
 Würde jetzt vielleicht nicht in einem CMS tatsächlich den kompletten Page-Content speichern, das wird wahrscheinlich nicht ausreichen, je nach Umfang, aber für so kleinere Sachen reicht das durchaus.

00:21:39.800 --> 00:21:48.960
 Ja, aber ich meine jetzt einfach ein Chatfenster oder irgendwie sowas, wo ich halt irgendwie gerade was reingetippt habe, könnte das ja durchaus interessant sein.

00:21:48.960 --> 00:21:56.620
 Achso, dass man das später dann wieder herstellt, aber das würde man ja dann eher per Session-Storage oder Local-Storage machen, um das nicht zu verlieren.

00:21:56.620 --> 00:21:58.680
 Ja, ja, stimmt.

00:21:58.680 --> 00:22:01.220
 Genau.

00:22:01.220 --> 00:22:11.120
 Ja, Unterstützung. Die Unterstützung ist eigentlich ganz gut. Edge seit 14 immerhin, also nicht mal nur der neueste Chromium-Edge, sondern der alte Edge.

00:22:11.860 --> 00:22:19.920
 IE11 braucht man natürlich nicht drüber sprechen und iOS Safari kann das seit 11.3, wobei das mit Vorsicht zu genießen ist.

00:22:19.920 --> 00:22:34.000
 Also ich habe ja schon mal, glaube ich, in irgendeiner Folge gesagt, Apple und Safari, das wird irgendwie so der neue IE, was so die Langsamkeit der Features und die komischen, na wir setzen es aber anders um als alle anderen, weil Performance oder so, ja.

00:22:34.400 --> 00:22:53.720
 Was das angeht, ist das irgendwie der neue IE und es ist tatsächlich auch so, dass es da einige Bugs gab, zum Beispiel feuert Visibility Change im Safari, sowohl Desktop als auch Mobile, nicht beim Wegnavigieren von der Seite oder wenn ich, also wenn ich den Tab schließe oder wenn ich auf einen Link klicke und auf eine andere Seite navigiere, sondern da feuert dann stattdessen das Page-Hide-Event.

00:22:55.140 --> 00:23:04.140
 Und dann angeblich kann man dieses Navigator.sendbeacon auch in Page-Hide im Callback benutzen, tut es aber nicht.

00:23:04.140 --> 00:23:15.880
 Also ich habe mir dann einen Test geschrieben, der halt einfach lockt, jedes Mal, wenn das Event aufgerufen wird und es passiert halt einfach im Safari, wenn ich das auf einem iPad probiere, da wird nichts gelockt.

00:23:16.600 --> 00:23:18.040
 Also Server-Seite, ich glaube.

00:23:18.040 --> 00:23:26.480
 Und da gibt es auch einen Bug dazu und da steht dann drin, ja, ist gefixt seit, ich weiß gar nicht, musst du mal aufmachen, ich glaube seit iOS 12.1 oder so.

00:23:26.480 --> 00:23:28.140
 Aber ist halt nicht.

00:23:28.140 --> 00:23:34.160
 Und jetzt, ich habe dann in das Bug-Ticket aber jetzt auch nochmal reinkommentiert, dass es nicht funktioniert.

00:23:34.160 --> 00:23:42.720
 Mal gespannt, ob sich da was tut, weil das sind jetzt also auch schon irgendwie zwei Jahre oder was, seit das eigentlich implementiert sein sollte, aber ist nicht.

00:23:43.500 --> 00:23:55.560
 Also eine Sache, die ich nicht verstehe bei dieser ganzen iOS-Geschichte ist, Apple hat ja die Apps erfunden sozusagen oder zumindest das Wort, ja, und App Store und so, das hat irgendwie Apple uns gebracht mit iOS.

00:23:55.560 --> 00:24:02.580
 Was sie aber nicht gemacht haben an der Stelle, ist die wirklich alles dann auch als App anzubieten.

00:24:02.580 --> 00:24:06.440
 Also sowas wie der Safari ist ja fest ans Betriebssystem getackert.

00:24:06.440 --> 00:24:13.120
 Der Safari kann nicht geupdatet werden auf einem iOS-Device ohne ein iOS-Update, was für mich überhaupt gar keinen Sinn ergibt.

00:24:13.300 --> 00:24:14.360
 Warum ist das so?

00:24:14.360 --> 00:24:25.100
 Also der Safari, ich habe es jetzt gerade auf meinem neuen Mac gesehen, der Safari auf dem Mac, der kann durchaus geupdatet werden, ganz unabhängig vom Betriebssystem.

00:24:25.100 --> 00:24:32.340
 Aber auf iOS geht das irgendwie nicht, das blicke ich nicht, weil das macht ja Android auch so.

00:24:32.340 --> 00:24:37.340
 Also der Chrome-Browser auf Android oder was auch immer der Standard-Browser ist, hängt ja auch nicht am Betriebssystem.

00:24:38.040 --> 00:24:44.460
 Ja, früher schon, also früher der Android-Browser ist ja schon drin, aber inzwischen ist ja Chrome als App und lässt sich aktualisieren.

00:24:44.460 --> 00:24:52.160
 Also letzten Endes ist so ziemlich alles rausgelöst worden, was man rauslösen kann, also auch, was weiß ich, Kalender und Adressbuch waren ja früher teilweise fest mit reingetackert.

00:24:52.160 --> 00:24:56.120
 Ja, selbst irgendwelche, also die Play-Services, das ist ja alles extra updatebar.

00:24:56.360 --> 00:25:10.000
 Ja, also ich verstehe es auch nicht so ganz, auch Progressive-Web-Apps war ja auch so eine Geschichte, dann funktionieren aber Notifications im Safari nicht oder dies und das funktioniert im Safari nicht und irgendwie ist es ärgerlich, dass das einfach so hinten dran hängt immer mit allem.

00:25:11.560 --> 00:25:14.480
 Jetzt hat man schon die Evergreen-Browser und das Safari spielt nicht mit.

00:25:14.480 --> 00:25:16.380
 So ein Mist.

00:25:16.380 --> 00:25:19.200
 Gut, ja, das war es eigentlich auch schon.

00:25:19.200 --> 00:25:20.360
 Ja.

00:25:20.360 --> 00:25:29.720
 Ach, ich habe noch, genau, ich habe, habe ich das jetzt irgendwo, ach ja, genau, in das Ticket habe ich das reinkommentiert und habe da auch so einen kleinen Schnipsel mit, wie ich das getestet habe.

00:25:29.720 --> 00:25:32.880
 Kann man sich anschauen, wenn man will, verdient in den Shownotes.

00:25:33.840 --> 00:25:36.900
 Sollen wir eigentlich, äh, sollen wir eigentlich einen Spam-Spot machen?

00:25:36.900 --> 00:25:50.180
 Ach so, ja, eigentlich käme ja jetzt der Spam-Spot, wir haben keinen, ähm, ja, entweder suchst du spontan einen raus aus unserer langen Liste, äh, aber wir haben ja auch kein Spam-Spot-Intro.

00:25:50.180 --> 00:26:03.460
 Ähm, das, das macht aber nichts, ähm, das sprichst du dann gleich und ich spreche dann den Spot und dann, äh, ich nehme mal, ich nehme mal einen aus unserer Textsammlung raus, irgendwie so einen, so einen kleinen, kurzen, ähm, wir hatten das ja vorhin schon.

00:26:03.840 --> 00:26:12.420
 Welchen nehmen wir denn da? Und den spreche ich dann einfach live ein. So, und du machst, du machst Intro und Outro oder so.

00:26:12.420 --> 00:26:12.980
 Okay.

00:26:12.980 --> 00:26:16.840
 Der Spam-Spot.

00:26:16.840 --> 00:26:20.440
 Was, wir sind doch nicht so weit.

00:26:20.440 --> 00:26:28.960
 Nee, ich, ich bin noch, ich habe mich noch nicht entschieden, welchen, ich, ich nehme einfach, hier einfach den obersten, da muss ich nicht langen, muss ich langen, habe ich vorhin schon gelesen.

00:26:28.960 --> 00:26:31.280
 Mach mal nochmal Intro, bitte.

00:26:33.280 --> 00:26:34.220
 Der Spam-Spot.

00:26:34.220 --> 00:26:40.720
 Emotionaler Stress und zu wenig Bewegung können die Härte im Bett auch in den blühenden Jahren schwächeln.

00:26:40.720 --> 00:26:47.880
 Qualitätszertifizierung und Prüfung, schnelle Wirkungseffekt, zertifiziert und qualitativ, anonymer Versand.

00:26:47.880 --> 00:26:53.580
 Sie sind sicher nicht alleine, denn über 70 Prozent der Männer in Deutschland haben genau heute die gleichen Ärgernisse.

00:26:53.580 --> 00:26:55.140
 Tidin.

00:26:55.140 --> 00:26:59.320
 Zu Risiken und Nebenwirkungen lesen Sie die Packungsbeilage oder fragen Sie Ihren Systemadministrator.

00:26:59.320 --> 00:27:00.580
 Bäh, oder?

00:27:02.140 --> 00:27:02.700
 Wow.

00:27:02.700 --> 00:27:05.380
 So spontan sind wir.

00:27:05.380 --> 00:27:08.440
 Ja, okay, gut.

00:27:08.440 --> 00:27:10.420
 Ist dein Bett auch zu hart, Moritz?

00:27:10.420 --> 00:27:13.180
 Mein Bett ist auch zu hart.

00:27:13.180 --> 00:27:14.860
 Ja, schnelle Wirkungseffekt.

00:27:14.860 --> 00:27:16.680
 Und kostenlose Versand.

00:27:17.580 --> 00:27:19.700
 Ich glaube, das müssen wir nächstes Mal nochmal besser machen.

00:27:22.100 --> 00:27:27.600
 Hier ist WWS IV mit dem Tagesthema.

00:27:35.120 --> 00:27:38.960
 Stille, das Schweigen im Wald, wir gestikulieren uns hier zu über die Webcam.

00:27:38.960 --> 00:27:40.300
 Ja.

00:27:40.300 --> 00:27:42.620
 Moritz hat sein Bier schon leer, ich muss schneller trinken.

00:27:42.620 --> 00:27:46.140
 Nee, es ist nicht leer, ich wollte nur das andere ausprobieren.

00:27:46.140 --> 00:27:46.900
 Ach so.

00:27:47.200 --> 00:27:48.760
 Das Helle, das sind beide jetzt parallel.

00:27:48.760 --> 00:27:50.440
 Das sind beide jetzt parallel.

00:27:50.440 --> 00:27:51.400
 Nee, du kannst einfach schon mal anfangen.

00:27:51.400 --> 00:27:54.120
 Ich bin in fünf Sekunden wieder da, fang einfach schon mal an.

00:27:54.120 --> 00:27:55.100
 Alles klar.

00:27:55.100 --> 00:27:56.520
 Und tschüss.

00:27:56.520 --> 00:27:57.600
 Geht das?

00:27:57.980 --> 00:28:04.860
 Ja, Thema heute, Template Literals und im Speziellen Tagged Template Literals.

00:28:04.860 --> 00:28:09.680
 Sind auch bekannt als Template Strings, so war das auch auf Englisch in der Spezifikation

00:28:09.680 --> 00:28:14.260
 ursprünglich benannt und dann später unbenannt zu Template Literals, aber man hört Template

00:28:14.260 --> 00:28:15.880
 Strings tatsächlich noch recht häufig.

00:28:15.880 --> 00:28:23.780
 Und das ist ein ES2015 Feature, das ich inzwischen eigentlich sogar sehr häufig verwende, auch direkt

00:28:23.780 --> 00:28:27.680
 in Webprojekten, die jetzt nicht auf Babel setzen in ihrer Toolchain.

00:28:27.980 --> 00:28:33.780
 Aber selbst in Projekten, die Babel in der Toolchain haben, also Babel für Einsteiger,

00:28:33.780 --> 00:28:41.360
 das transpiliert neuere JavaScript Features in Code, der auch in älteren Browsern oder

00:28:41.360 --> 00:28:44.160
 älteren Laufzeitumgebungen ausführbar ist.

00:28:44.160 --> 00:28:46.780
 Nur, dass wir da niemanden außen vor lassen.

00:28:46.780 --> 00:28:52.340
 Und selbst in solchen Projekten sieht man aber recht häufig noch, dass da Strings mit Pluszeichen

00:28:52.340 --> 00:28:53.680
 aneinander gehängt werden zum Beispiel.

00:28:53.680 --> 00:28:56.360
 Ja, großer Spaß.

00:28:56.360 --> 00:28:58.640
 Ja, sehr übersichtlich auch.

00:28:58.640 --> 00:29:02.340
 Und dabei ist das Ganze schon seit Edge 13 sogar nutzbar.

00:29:02.340 --> 00:29:04.340
 Und ja, worum handelt es sich?

00:29:04.340 --> 00:29:09.580
 Es geht darum, dass Strings nicht in einfache oder doppelte Anführungsstriche geschrieben

00:29:09.580 --> 00:29:10.640
 werden, sondern in Backticks.

00:29:10.640 --> 00:29:17.000
 Das ist dieser Akzent Gravis aus dem Französischen von links oben nach rechts unten, den man auf

00:29:17.000 --> 00:29:21.380
 der Tastatur mit dem entsprechenden Zeichen und einem Leerzeichen erstellt.

00:29:22.980 --> 00:29:26.560
 Und was erlaubt mir das im Vergleich zu normalen Single- oder Double-Quote-Strings?

00:29:26.560 --> 00:29:31.520
 Ich kann darin Zeilenumbrüche verwenden, ohne dass ich irgendwie das unterbrechen muss.

00:29:32.320 --> 00:29:36.920
 Und ich kann Platzhalter drin verwenden nach dem Format Dollar und dann in geschweiften Klammern

00:29:36.920 --> 00:29:38.200
 eine Expression.

00:29:38.200 --> 00:29:42.300
 Und ich sage deswegen Expression, weil es geht nicht nur um Variablen.

00:29:42.300 --> 00:29:46.680
 Also der klassischste Fall ist, ich schreibe da eine Variable rein und die wird dann entsprechend

00:29:46.680 --> 00:29:47.720
 in dem String ausgegeben.

00:29:48.100 --> 00:29:55.280
 Aber ich kann darin also auch Berechnungen ausführen oder Funktionsaufrufe und muss, spare mir

00:29:55.280 --> 00:29:59.620
 dann halt dieses Unterbrechen vom String und mit Plus und Variablen Name und Plus und vielleicht

00:29:59.620 --> 00:30:00.620
 noch eine Klammer und so weiter.

00:30:00.620 --> 00:30:04.260
 Das heißt, es ist einfach syntaktischer Zucker erst mal.

00:30:05.560 --> 00:30:07.180
 Aber es geht darüber noch hinaus.

00:30:07.180 --> 00:30:12.740
 Also wie gesagt, ich habe schon gesagt, Expressions kann ich da drin benutzen und alles Mögliche.

00:30:12.740 --> 00:30:14.160
 Und ich kann die auch verschachteln.

00:30:14.160 --> 00:30:19.860
 Also ich kann dann wieder ein Template Literal in diesem Platzhalter machen und da kann man dann

00:30:19.860 --> 00:30:26.680
 recht übersichtlich doch recht komplexe Zusammenstellungen von Templates machen, die sich dann mittels

00:30:26.680 --> 00:30:28.880
 Variablen oder Funktionen konfigurieren lassen.

00:30:29.780 --> 00:30:30.980
 Wie ist es bei dir?

00:30:30.980 --> 00:30:32.660
 Nutzst du das oder nicht?

00:30:32.660 --> 00:30:41.940
 Ja, ich nutze es selten, aber es hat auf jeden Fall komplett mein String Concatenation mit

00:30:41.940 --> 00:30:43.360
 Plus und so weiter ersetzt.

00:30:43.360 --> 00:30:49.440
 Also wenn ich einen String bauen will, dann benutze ich eigentlich nur noch immer das.

00:30:49.440 --> 00:30:54.640
 Und ich finde auch die Multiline-Geschichte mit dem Dreifachback-Tick, oder?

00:30:54.640 --> 00:30:56.580
 Ist das Dreifach oder Doppelt?

00:30:56.580 --> 00:30:57.120
 Dreifachback-Tick.

00:30:57.120 --> 00:31:00.180
 Du machst einfach einen Line-Break.

00:31:00.180 --> 00:31:03.200
 Und solange du keinen Back-Tick hast, der das schließt, dann …

00:31:03.200 --> 00:31:06.360
 Aber da gibt es doch eine Schreibweise mit mehrfachen.

00:31:06.360 --> 00:31:07.220
 Ich glaube, es sind drei.

00:31:07.220 --> 00:31:09.080
 Oder bin ich jetzt …

00:31:09.080 --> 00:31:11.140
 Ich glaube, du bist bei Markdown.

00:31:11.140 --> 00:31:12.400
 Du bist bei Markdown.

00:31:12.400 --> 00:31:13.700
 Bin ich bei Markdown gelandet?

00:31:13.700 --> 00:31:14.100
 Wirklich?

00:31:14.100 --> 00:31:15.040
 Ja, echt?

00:31:15.040 --> 00:31:19.820
 Also Dreifachback-Tick in Markdown macht einen Code-Block, der …

00:31:19.820 --> 00:31:22.580
 Ja, es gibt aber auch einfach Back-Tick in Markdown.

00:31:22.920 --> 00:31:24.820
 Ja, dann bin ich gerade in Markdown gelandet.

00:31:24.820 --> 00:31:29.500
 Aber ich mag auch das mit den Zeilenumbrüchen, dass man da auch irgendwie keinen Backslash-N oder irgendwie so einen Käse hinschreiben muss.

00:31:30.760 --> 00:31:40.780
 Das ist eine großartige Sache und man kann auch vernünftig irgendwie da HTML reinschreiben, dass es dann immer noch genauso aussieht, wie es aussehen soll, sodass man es versteht und verschachtelt und mit neuen Zeilen und keine Ahnung.

00:31:40.920 --> 00:31:49.460
 Alleine deswegen schon, auch wenn es dafür erst mal nur Syntactic Sugar ist im Endeffekt, finde ich, lohnt sich das aber schon, weil es einfach übersichtlicher ist.

00:31:49.460 --> 00:31:51.920
 Und wenn man sich das einmal angewöhnt hat, dann macht man das auch immer.

00:31:51.920 --> 00:32:02.880
 Die Sache ist halt natürlich, es gibt durchaus noch Bereiche, in denen man den IE halt auch unterstützen muss, wenn man für irgendwelche Firmen-Tools was schreibt, die halt nichts anderes installiert haben.

00:32:03.220 --> 00:32:05.740
 Oder halt auch eine Webseite hat, die da drauf laufen muss.

00:32:05.740 --> 00:32:11.480
 Ich bin inzwischen so weit, dass ich sage, pfff, IE11, nö, nicht mit mir.

00:32:11.480 --> 00:32:17.180
 Also außer der Kunde will das natürlich explizit oder es ergibt sich einfach aus dem Kontext, dass das benötigt wird.

00:32:17.180 --> 00:32:22.780
 Genau, dann jetzt im speziellen Tagged-Template-Literals.

00:32:22.780 --> 00:32:26.700
 Ach so, das gibt es ja gar nicht, ich habe es gerade nochmal nachgeschlagen, sorry.

00:32:26.700 --> 00:32:30.340
 Also mit den drei Backpicks war totale Käse, was ich gerade erzählt habe.

00:32:30.420 --> 00:32:35.960
 Das ist tatsächlich aus Markdown und ich kann auch mit einem Backtick Zeilenumbrüche und alles reinschreiben.

00:32:35.960 --> 00:32:37.640
 Ja, nur noch mal zur Korrektur.

00:32:37.640 --> 00:32:49.320
 Genau, also Template-Literals, da ist man vielleicht schon eher mal drüber gestolpert, aber diese Tagged-Template-Literals, ich glaube, das ist was, was viele jetzt unabhängig vom Junior- oder Senior-Level vielleicht noch gar nicht so auf dem Schirm haben.

00:32:49.320 --> 00:32:56.320
 Oder vielleicht schon gesehen haben, aber irgendwie noch nicht eingesetzt oder vielleicht auch gar nicht genau recherchiert, was kann das denn eigentlich, was macht das denn eigentlich.

00:32:57.280 --> 00:33:05.080
 Und es ist eigentlich ganz einfach, vor dem ersten Backtick, vor dem öffnenden Backtick von so einem Template-Literal kann eine Expression stehen.

00:33:05.080 --> 00:33:06.920
 In der Regel ist das ein Funktionsname einfach.

00:33:07.140 --> 00:33:16.440
 Also der kann wirklich lauten, wie man will, man sieht in dem Beispiel und dann oft, dass die Funktion einfach Tag heißt und dann steht da Tag und dann Akzent und dann der Inhalt.

00:33:16.880 --> 00:33:23.280
 Aber der kann auch Hurtz heißen, ja, oder irgendwie, also jeder beliebige Funktionsname oder vielleicht.

00:33:23.280 --> 00:33:24.160
 Die Aussprache ist wichtig.

00:33:24.160 --> 00:33:29.200
 Oder vielleicht auch eine Funktion, die wiederum ein Callback zurückgibt oder was auch immer.

00:33:29.200 --> 00:33:32.940
 Und dann schreibe ich hinten dran eben diesen Template-Literal-String.

00:33:32.940 --> 00:33:35.480
 Und das ist, wenn man das das erste Mal sieht, echt verwirrend.

00:33:35.680 --> 00:33:40.420
 Also wenn man das nicht weiß, was das ist, dann denkt man so, das ist doch kein valides JavaScript.

00:33:40.420 --> 00:33:42.060
 Ist es aber doch.

00:33:43.140 --> 00:33:54.680
 Und das Ganze funktioniert so, dass diese Funktion, die ich da vorne dran schreibe, den Namen, die wird aufgerufen und erhält als erstes Argument ein Array mit allen String-Bestandteilen, die in dem Template-Literal folgen.

00:33:54.740 --> 00:33:58.220
 Das heißt, die sind eventuell unterbrochen durch die Platzhalter.

00:33:58.220 --> 00:34:06.740
 Und ich kriege eben, also wenn ich jetzt foo und dann Platzhalter und dann bar habe, dann habe ich eben ein Array mit den Strings foo und bar.

00:34:06.740 --> 00:34:13.380
 Und als weitere Argumente erhalte ich dann so viele Argumente, wie es Platzhalter gibt in dem String.

00:34:13.380 --> 00:34:21.020
 Wobei aber zu sagen ist, also die Expressions, die da drin sein können in den Platzhaltern, die sind bereits evaluiert.

00:34:21.520 --> 00:34:31.540
 Also wenn ich in dem Platzhalter jetzt Dollar, geschweifte Klammer auf, 5 plus 2 habe, dann kriege ich aber als Argument übergeben an die Callback-Funktion 7.

00:34:31.540 --> 00:34:33.360
 Habe ich richtig gerechnet?

00:34:33.360 --> 00:34:39.220
 Ja, richtig gerechnet, aber das war tatsächlich was, was ich nicht wusste, dass das schon evaluiert ankommt.

00:34:39.220 --> 00:34:41.300
 Genau, das wird evaluiert.

00:34:41.300 --> 00:34:46.620
 Ansonsten würde ich eine Expression zurückbekommen, müsste die dann wieder selber weiterverarbeiten.

00:34:46.620 --> 00:34:49.180
 Also genau, die kommt evaluiert zurück.

00:34:49.800 --> 00:34:57.060
 Und wie komme ich da dran, weil ich weiß ja vielleicht gar nicht, da kommen wir nachher noch dazu, hier böse, böse User-Generated-Content.

00:34:57.060 --> 00:35:05.280
 Ich weiß im Zweifel vielleicht gar nicht, wie viele Platzhalter ich da drin habe, weil das auch wieder vielleicht dynamisch zusammengestellt wird oder aus verschiedenen Variablen kommt.

00:35:05.280 --> 00:35:16.740
 Also das Template Literal in der Variablen drin ist und ich die dann wiederum nutze als Parameter für diese Callback-Funktion.

00:35:16.740 --> 00:35:25.920
 Und um an die Argumente dran zu kommen, die da übergeben werden, also entweder, wenn ich weiß, wie viele das sind, dann benutze ich einfach, benahme ich die Argumente.

00:35:26.120 --> 00:35:32.940
 Ist jetzt wieder schwierig, das so abstrakt zu besprechen und man kann es nicht sehen, aber ich habe auch ein Code-Pen dazu gebastelt, das ich verlinken werde.

00:35:32.940 --> 00:35:39.340
 Entweder weiß ich also, wie viele es gibt und wenn ich das nicht tue, dann kann ich das magische Arguments-Keyword benutzen.

00:35:39.920 --> 00:35:48.920
 Da habe ich dann alle Funktions-Argumente drin, das heißt Arguments-Null entspricht dann diesem Strings-Array und alle weiteren sind dann eben die Platzhalter.

00:35:48.920 --> 00:35:55.840
 Wie gesagt, in dem Code-Pen sieht man das ganz gut, habe ich glaube ich gar nicht verlinkt, aber siehst du jetzt leider nicht.

00:35:55.840 --> 00:35:57.720
 Ja, macht nichts.

00:35:57.720 --> 00:36:06.920
 Genau, oder ich nutze den Spread-Operator, das ist auch ein ES, ich weiß gar nicht, das war ein ES6, glaube ich auch.

00:36:06.940 --> 00:36:08.040
 Ich glaube es ist ein ES6.

00:36:08.040 --> 00:36:24.620
 Ein Operator eben, so wie der Name schon sagt, Punkt, Punkt, Punkt, genau, also Punkt, Punkt, Punkt, Placeholders zum Beispiel als Argument, als zweites der Funktion sozusagen und dadurch habe ich dann in der Variable Placeholders ein Array aller folgenden Argumente.

00:36:24.620 --> 00:36:35.440
 Das ist vor allem dann interessant, wenn ich nicht weiß, wie viele es sind, dann habe ich auf jeden Fall da alle drin und kann dann irgendwie darüber iterieren, aber das müsste mit Arguments auch gehen, oder?

00:36:36.060 --> 00:36:37.060
 Mit Arguments auch, ja.

00:36:37.060 --> 00:36:38.340
 Arguments ist auch ein Array, oder?

00:36:39.780 --> 00:36:54.600
 Ja, aber also, jetzt macht sich wieder, dass wir nicht so tief, also ich kann zum Beispiel kein, ich kann nicht Arguments Punkt Shift machen, um das erste zurückzubekommen, weil ich kann Arguments nicht modifizieren.

00:36:56.060 --> 00:37:09.440
 Ja, deswegen ist es kein, also in meinem Beispiel habe ich das auch in dem CodePen, ich muss dann Array.from und dann Arguments übergeben, um quasi ein Array zu klonen, das alle Argumente enthält.

00:37:09.440 --> 00:37:23.880
 Und dann kann ich so Geschichten machen, wie die Strings sind Arguments null und der Rest ist dann, also wenn ich Arguments Punkt Shift mache, dann speichere ich in die Variable die Strings und dann enthält der restliche Strings.

00:37:24.120 --> 00:37:27.060
 Ich glaube, man kann sich das absolut nicht vorstellen, was wir hier gerade erzählen.

00:37:27.060 --> 00:37:30.020
 Schaut euch das CodePen an.

00:37:30.020 --> 00:37:32.180
 Genau, ich will das auch sehen.

00:37:32.180 --> 00:37:34.300
 Ich schicke es ja schnell.

00:37:34.340 --> 00:37:39.420
 Ja, nee, muss auch jetzt gar nicht, muss auch gar nicht schnell gehen jetzt, passt schon.

00:37:39.420 --> 00:37:46.480
 Genau, so, muss ich erstmal gucken, wo waren wir denn jetzt vor lauter abstraktem Gerede.

00:37:46.480 --> 00:37:54.420
 Wir waren bei dem Tag Template Literal und dem Spread Operator, dass da die einzelnen Argumente mit reingegeben werden.

00:37:54.420 --> 00:37:56.480
 Genau, ja, das wäre damit eigentlich abgedeckt.

00:37:56.480 --> 00:38:03.880
 Es ist jetzt noch sehr abstrakt, es kommen nachher, kommen tatsächlich noch Beispiele, für was man das nutzen kann.

00:38:04.340 --> 00:38:16.320
 Also, was noch zu sagen ist zu der Tag-Funktion selbst, die muss keinen String zurückgeben, also klassischerweise sieht man das schon, dass dann einfach ein String zurückgegeben wird oder in die Variable eben gespeichert wird.

00:38:16.320 --> 00:38:25.780
 Aber es kann zum Beispiel auch ein Closure zurückgeben, den ich dann in die Variable speichere und ich kann diese Closure dann wieder aufrufen mit anderen Argumenten zum Beispiel.

00:38:25.780 --> 00:38:35.000
 So, dass ich quasi das Closure per Template Literal konfiguriere und später mit Argumenten aufrufen kann.

00:38:35.000 --> 00:38:37.440
 Verrückt, ne?

00:38:37.440 --> 00:38:38.840
 Crazy.

00:38:38.840 --> 00:38:58.460
 Ja, also ein großer Vorteil von dieser ganzen Template Literal-Geschichte ist, dass so Statical Code Analysis Tools, also Linter zum Beispiel wie JSLint oder ESLint, dass die diese getaggten Literals natürlich besser verarbeiten können, weil die wissen, was da passiert und wie die aufgebaut sind, als jetzt irgendwelche selbst zusammengestückelten Strings.

00:38:58.960 --> 00:39:13.780
 Das ist wohl so einer der großen Vorteile, weil mir ging es nämlich so, also im Gegensatz zu normalen Template Literals, wo ich dachte, so ja cool, werde ich ab sofort immer nutzen, haben mir so für diese getaggten Template Literals am Anfang erstmal die Anwendungsfälle gefehlt.

00:39:13.780 --> 00:39:24.180
 Und ich habe nicht so ganz nachvollziehen können, was denn jetzt der Vorteil ist, im Vergleich dazu, dass ich einfach eine Funktion aufrufe und da die Parameter übergebe oder die ganzen String.

00:39:24.180 --> 00:39:29.120
 Aber es gibt einige Beispiele, wo sich das ganz schön umsetzen lässt.

00:39:29.120 --> 00:39:34.500
 Es ist, glaube ich, oft tatsächlich eher so ein Tactical Sugar, wie auch mit den Template Literals an sich.

00:39:34.740 --> 00:39:44.980
 Das heißt, ich könnte das auch über Funktionsaufrufe machen, aber es ist einfach schöner und wenn man es mal weiß, wie der Aufbau ist, leichter zu verstehen, wenn man den Code sieht, was da genau passiert.

00:39:44.980 --> 00:39:48.680
 Also eine Sache ist zum Beispiel automatisches Escapen der Platzhalter.

00:39:48.680 --> 00:39:52.460
 Da hatten wir es vorhin im Vorgespräch auch schon zum Thema Sicherheit so ein bisschen drüber.

00:39:52.460 --> 00:40:01.380
 Also zum Beispiel, dass ich sämtliches HTML escapen lasse, was eventuell drin ist, weil es könnte ja in der Variable vielleicht eine Usereingabe sein.

00:40:01.380 --> 00:40:03.820
 Also der Username aus einem gespeicherten Profil zum Beispiel.

00:40:03.820 --> 00:40:07.680
 Das ist also ein Anwendungsfall, aber auch Internationalisierung.

00:40:07.680 --> 00:40:16.820
 Also man kennt das vielleicht von Frameworks zum Beispiel oder auch von WordPress, dass man alle Strings erstmal in Englisch hat.

00:40:16.820 --> 00:40:21.020
 Also meistens ist es Englisch als internationale Sprache, die als Ausgangssprache dient.

00:40:21.020 --> 00:40:25.780
 Und da sind dann vielleicht auch Platzhalter drin für irgendwelche Zahlen oder für den Benutzernamen zum Beispiel.

00:40:26.880 --> 00:40:33.140
 Und ich habe im Code schön alles lese sich als Englisch und dann wird eine Übersetzungsfunktion drüber gejagt, die dann den String ersetzt.

00:40:33.140 --> 00:40:38.500
 Und auch das ist eben möglich, dass ich zum Beispiel eine i18n, eine Tag-Funktion habe, die so heißt.

00:40:38.500 --> 00:40:42.440
 Und dann schreibe ich einfach i18n und schreibe in Backticks hinten dran einen String.

00:40:42.440 --> 00:40:45.100
 Und der wird an die Funktion übergeben und automatisch übersetzt.

00:40:46.100 --> 00:40:49.580
 Aber eben halt auch automatisch mit den ersetzten Platzhaltern, die ich da reinschreibe.

00:40:49.580 --> 00:40:53.360
 Anderer Anwendungsfall, CSS in JS.

00:40:53.360 --> 00:40:55.140
 Wir müssen da echt mal eine Folge drüber machen.

00:40:55.140 --> 00:40:58.200
 Wir haben es jetzt glaube ich drei Folgen miteinander schon erwähnt.

00:40:58.200 --> 00:41:01.280
 Da gibt es zum Beispiel die Library-Styled-Components.

00:41:03.320 --> 00:41:15.440
 Die, ja, gehen wir jetzt vielleicht nicht zu tief drauf ein, was das macht, die mir quasi grob gesagt CSS bastelt um Components herum.

00:41:15.440 --> 00:41:19.260
 Oder die mir Components-Style, sagen wir es jetzt mal ganz vereinfacht so.

00:41:19.260 --> 00:41:27.060
 GraphQL, der REST-Killer oder auch nicht, ist so eine Geschichte.

00:41:28.480 --> 00:41:29.820
 GraphQL, sagst du, kennst du?

00:41:29.820 --> 00:41:33.300
 Ja, ist das nicht von Facebook?

00:41:33.300 --> 00:41:34.400
 Ja, genau.

00:41:34.400 --> 00:41:40.640
 Ich glaube, in dem Zusammenhang habe ich es mit der Facebook-API schon mal benutzt, aber tief bin ich da nicht eingestiegen.

00:41:40.640 --> 00:41:41.800
 Ne, gehen wir jetzt auch nicht tief drauf ein.

00:41:41.800 --> 00:41:46.160
 REST-Killer war jetzt blöd dahergeschwätzt.

00:41:46.160 --> 00:41:48.500
 Das wird, glaube ich, REST nicht komplett ersetzen.

00:41:48.500 --> 00:41:58.220
 Aber es ist, simpel gesagt, gibt es mir, also per REST habe ich oft das Problem, ich brauche irgendwie den Usernamen und aber auch noch irgendwie die Gruppen.

00:41:58.320 --> 00:41:58.720
 Was weiß ich?

00:41:58.720 --> 00:42:03.200
 Und muss dann für alles, was ich an Daten brauche, jeweils einen REST-Request an den Server schicken.

00:42:03.200 --> 00:42:10.040
 Mit GraphQL sage ich, in einem Rutsch, ich brauche das und das und das und dann gibt der Server das in einem Rutsch zurück.

00:42:10.040 --> 00:42:14.080
 Müsste aber auch mal komplett ein Thema draus machen.

00:42:14.080 --> 00:42:15.700
 Das fühlt jetzt hier zu weit.

00:42:15.700 --> 00:42:19.700
 Aber da gibt es eben auch eine Library, also ich verliege auch die ganzen Libraries, die ich hier nenne.

00:42:19.700 --> 00:42:28.280
 Da mache ich dann auch einfach GQL und in Backticks das GraphQL-Query und bekomme dann entsprechend die Daten zurück.

00:42:28.280 --> 00:42:31.480
 Und Datumsformatierung war auch noch so ein Ding.

00:42:31.480 --> 00:42:35.460
 Das ist ja mit JavaScript, ich hatte das auch gerade erst letztens wieder bei einem Projekt.

00:42:35.460 --> 00:42:45.300
 Das ist ja echt immer so ein Ding mit internationalem Datumsformat und dann ist der Browser vielleicht auf Englisch eingestellt und ich will die Sachen aber trotzdem auf Deutsch haben mit Punkt getrennt statt mit Slash.

00:42:45.660 --> 00:42:49.880
 Und so, da gab es Moment.js war da so eine große Library, die viel eingesetzt wurde.

00:42:49.880 --> 00:42:55.840
 Die ist aber inzwischen deprecated, weil es browserintern, ja, die wird nicht mehr weiter gepflegt.

00:42:55.860 --> 00:42:58.780
 Warte mal, hatten wir das nicht schon mal, die browserinternere Geschichte?

00:42:58.780 --> 00:43:12.440
 Ja, wir hatten es auch schon mal über Internationalisierung, genau, über die Internationalization-RP, die das zum Teil ablöst, aber halt auch nicht so hundertprozentig, weil es auch noch nicht überall so richtig unterstützt wird.

00:43:13.240 --> 00:43:25.320
 Jedenfalls gibt es da auch eine andere Library, lit-date heißt die und die nutzt eben auch diese Tag-Template-Literal-Syntax, über die ich dann auch Datum formatieren kann, mehrsprachig.

00:43:26.680 --> 00:43:55.940
 Genau, es gibt eine große Liste weiterer Beispiele, die verlinke ich auch, da gibt es so auf GitHub ein Repository Awesome Tag Templates, die das alles auflistet und dann gibt es zum Beispiel ein npm Package Common Tags, heißt das, das ist so ein bisschen wie Lodash oder Underscore.js für Tag Template Literals, einfach so eine Sammlung an viel benötigten Schnipselchen, die automatisch als Tag zur Verfügung gestellt werden.

00:43:56.140 --> 00:44:01.900
 Also eben genau sowas wie HTML sicher machen, dass das escaped wird und so Geschichten.

00:44:01.900 --> 00:44:03.200
 Da reden wir noch drüber gleich.

00:44:03.200 --> 00:44:25.600
 Genau, da darfst du jetzt gleich drüber sprechen, ich bin nämlich jetzt schon fast am Ende, nur weil wir es jetzt vorhin auch schon mal über HTML hatten in Template Literals und ich glaube, das ist tatsächlich halt auch ein großer Anwendungsfall, weil man jetzt vielleicht nicht immer eine Library wie Vue oder Angular oder React einsetzen will.

00:44:25.600 --> 00:44:45.140
 Und dann halt auch mal irgendwie sich selber HTML zusammenbaut als String. Und da gibt es für VS Code Plugins die Syntax Highlighting in Template Literals erlauben. Das gibt es für HTML, für CSS und für JavaScript, weil man natürlich das Problem hat, so ein Template Literal, das ist eigentlich nur ein String.

00:44:45.420 --> 00:44:56.780
 Das heißt, der Editor weiß nicht, was da drin steht und zeigt das entsprechend, ich glaube, in dem Standard Theme ist das gelber String dann, oder zumindest auf dem Dark Theme.

00:44:59.180 --> 00:45:05.720
 Genau, und da gibt es drei Plugins, mit denen man entsprechend das Code Highlighting aktivieren kann für Template Literals.

00:45:06.120 --> 00:45:19.880
 Ja, Security ist für mich ein Thema, also als der Konstantin gesagt hat, wir sollen mal darüber sprechen über Template Literals, kam wieder so in meinen Kopf, ja, das wollte ich schon mal wo einsetzen.

00:45:20.020 --> 00:45:28.580
 Und da habe ich es dann am Ende nicht gemacht, weil Security, weil es ist sehr, sehr verführerisch, da mit HTML zu bauen, weil das sieht dann echt schick aus.

00:45:29.180 --> 00:45:41.840
 Und wenn man es aber mit User Generated Content zu tun hat, in meinem Fall waren das Eingaben in einem Suchschlitz, der dann zu weiter zu Vorschlägen verarbeitet wird und mit Highlighting und so.

00:45:43.840 --> 00:45:54.460
 Oder auch eine andere Stelle, wo beispielsweise irgendwie Username zum Beispiel oder diverse User Credentials dargestellt werden soll.

00:45:54.460 --> 00:46:10.960
 Da ist es verführerisch, das zu verwenden, aber es ist dann unter Umständen echt gefährlich, wenn man da einfach dann HTML damit schreibt, weil es kommt dann immer darauf an, mit was für einer Methode man das wieder in den Dokumentenbaum einbaut.

00:46:12.480 --> 00:46:15.020
 Ja, Mensch, hallo, willkommen zurück.

00:46:15.020 --> 00:46:18.280
 Habe ich dich jetzt auch mal aus dem Konzept gebracht?

00:46:18.280 --> 00:46:23.980
 Ja, aber das ist nicht so schlimm, wir schneiden das nicht. Ich habe zwar ein bisschen viel M gemacht, aber das passt schon, jetzt kommt die andere Mate-Flasche.

00:46:23.980 --> 00:46:42.460
 Also ich habe eigentlich nur kurz gesagt, es ist gefährlich, man sollte aufpassen, wenn man mit Template Literals HTML baut, weil es kommt natürlich aber am Ende, am Ende der Überlegung stand dann, naja, es kommt am Ende nicht darauf an, ob du Template Literal nimmst oder sonst irgendwie.

00:46:42.480 --> 00:46:48.000
 Wenn du deine Strings zusammenbaust, sondern es kommt auf die Methode an, mit der du das HTML wieder einfügst in die Seite.

00:46:48.660 --> 00:46:58.660
 Wir haben da im Vorgespräch kurz drüber gesprochen, wenn du zum Beispiel in innerHTML Dinge reintust, die böse sind, dann werden die auch evaluiert, da habe ich potenziell eine Cross-Side-Scripting-Lücke.

00:46:59.580 --> 00:47:10.820
 Ich habe mir zu Template Literals nochmal den Kurs von Wes Boss angeschaut. Ich weiß nicht, kennt vielleicht den einen oder anderen, kennt vielleicht Wes Boss, hat auch einen coolen Podcast, Syntax FM.

00:47:11.700 --> 00:47:22.520
 Und der hat mal einen Kurs gemacht, der heißt ES6, Moment, wie hieß der noch? ES6 for Everyone, genau. Den habe ich mir auch irgendwann mal gekauft, vor zwei Jahren oder so.

00:47:22.520 --> 00:47:27.460
 Und das Kapitel dazu habe ich mir nochmal angeschaut, in Vorbereitung auf die Sendung.

00:47:28.100 --> 00:47:34.100
 Und das letzte Kapitel von den Template-Strings, beziehungsweise Template Literals, ist Sanitizing User Data.

00:47:35.060 --> 00:47:49.680
 Und ich dachte so, okay, da kommt jetzt die Weisheit. Wie macht man das? Wie verhindere ich, dass jemand Allard XSS als Username nimmt und das dann auf meiner Seite irgendwie böse Dinge tut?

00:47:49.680 --> 00:47:50.600
 Ja, wenn es nur das ist.

00:47:50.600 --> 00:47:57.380
 Wenn es nur das wäre, dann wäre alles okay. Das machen unsere Security-Leute nur, um uns zu zeigen, dass wir Mist gemacht haben.

00:47:57.860 --> 00:48:01.040
 Aber die richtig bösen Jungs, die zeigen uns ja nicht, dass sie Mist gemacht haben.

00:48:01.040 --> 00:48:04.500
 Oder es gibt bestimmt auch sehr böse Mädels, wollte ich an der Stelle sagen.

00:48:04.500 --> 00:48:12.700
 Sondern die machen dann Tracking, die verändern Sachen auf der Seite, die führen Daten ab irgendwo hin.

00:48:12.700 --> 00:48:15.840
 Keine Ahnung, das will man gar nicht wissen, was damit alles passiert.

00:48:15.840 --> 00:48:17.380
 Also das will man auf jeden Fall verhindern.

00:48:17.380 --> 00:48:25.280
 Das heißt, wenn man HTML mit User-Generated-Content hat, muss man immer aufpassen, was passiert damit, beziehungsweise das Sanitizen.

00:48:25.280 --> 00:48:31.740
 Und wir haben auch im Vorgespräch schon darüber gesprochen, ich bin der Meinung, es sollte eine Möglichkeit geben, wo der Browser das übernimmt.

00:48:31.740 --> 00:48:34.440
 So, aber wie gesagt, hat eigentlich mit Template-Tituals ...

00:48:34.440 --> 00:48:37.800
 Da haben wir uns schon ein bisschen gestritten, in Anführungsstrichen, wie das aber aussehen könnte.

00:48:37.800 --> 00:48:40.320
 Und ich bin der Meinung, dass das auch zu abstrakt ist.

00:48:40.320 --> 00:48:46.320
 Also, dass der Browser das gar nicht wissen kann, ob ich denn vielleicht tatsächlich da drin was evaluiert haben will oder auch nicht.

00:48:46.320 --> 00:48:52.100
 Und ich weiß nicht, ob man das dem User abnehmen sollte und ob man das überhaupt kann, ohne dann wieder was kaputt zu machen.

00:48:52.100 --> 00:48:54.960
 Also, was jetzt Wesbos' Antwort war.

00:48:54.960 --> 00:49:01.760
 Wesbos' Antwort war in dem Kurs, nimm die Library Dom Purify.

00:49:01.760 --> 00:49:10.800
 Die Library Dom Purify ist tatsächlich von Sicherheitsforschern erstellt und zwar von Q53.

00:49:11.340 --> 00:49:16.200
 Vielleicht hat das der eine oder andere schon mal gehört, das ist so eine Pentesting-Firma.

00:49:16.200 --> 00:49:21.140
 Ich habe auch schon mal mit dem, also ich habe auch schon mal ein Seminar besucht, wo der ...

00:49:21.140 --> 00:49:22.480
 Moment, ich muss gerade überlegen.

00:49:22.480 --> 00:49:26.160
 Ich war schon auf einer Konferenz, wo, glaube ich, der Chef von denen einen Vortrag gehalten hat.

00:49:26.160 --> 00:49:27.980
 Ich habe auch schon mal ein Seminar bei ihm besucht.

00:49:28.620 --> 00:49:40.440
 Also, dem ist nicht zu trauen, aber ich glaube, wenn die eine JavaScript-Library machen, meine ist nicht böse, dem ist nicht zu trauen, sondern die machen alle möglichen Schweinereien, die ihr euch nicht vorstellen könnt.

00:49:40.500 --> 00:49:49.200
 Das ist wirklich, also, es ist eine große Freude, da zuzuschauen, wie die alles kaputt machen, so security-technisch.

00:49:49.640 --> 00:50:05.740
 Und wenn die aber dann eine JavaScript-Library rausbringen, die Dom Purify heißt, also die eigentlich tatsächlich XSS aus HTML, aus generiertem HTML rausfiltern soll, wenn ich jemandem vertraue, dann denen wahrscheinlich noch am meisten, weil die wissen wirklich, was sie tun.

00:50:07.080 --> 00:50:24.220
 Das Ding haben wir auch verlinkt in den Shownotes, das gibt es auf GitHub und es gibt auch irgendwie so ein lustiges Interview vorhin mit dem Ersteller oder mit dem, weiß ich gar nicht, Chef von Q53, glaube ich, Mario, Mario, ich habe es wieder geschlossen, Heiderich, glaube ich, heißt er.

00:50:25.920 --> 00:50:38.980
 Das ist auf jeden Fall eine interessante Geschichte. Was mich daran aber nervt, ist, dass man eine extra Library braucht. Und wie wir gerade schon gesagt haben, ich bin der Meinung, der Browser sollte an der Stelle was anbieten, was wirklich sicher ist.

00:50:38.980 --> 00:50:54.420
 Also zum Beispiel eine Möglichkeit zu sagen, innerhalb meines Template-Strings, wenn ich den rausgebe, darf kein JavaScript drin sein oder nichts, was als JavaScript ausgeführt werden kann. Das fände ich irgendwie besser, als ich nutze irgendeine blöde Library, die ich mir da reinziehe.

00:50:54.420 --> 00:51:10.780
 Zumindest mal, finde ich, sollten die Browser was mitbringen, wie es zum Beispiel bei PHP HTML-Entities gibt, das eben HTML in seine Entities umwandelt. Wenn man das schon mal an Bord hätte, könnte man sich das ja sparen, dass der irgendwie sonstige Checks macht, ist da jetzt ein Script-Tag mit drin oder was.

00:51:10.880 --> 00:51:23.440
 Ich kann einfach sagen, ich will kein echtes HTML da drin haben, sondern ich will, dass das so dargestellt wird, als spitze Klammer entsprechend. Oder genau das gleiche, was mich auch schon öfter gewundert hat, dass es das nicht gibt.

00:51:24.400 --> 00:51:45.520
 Also auch wieder PHP, weil ich das eben halt neben JavaScript am meisten nutze, wenn ich eine Regular Expression habe und ich will da drin einen String, den ich mir vielleicht aus was anderem zusammengebaut habe, in der Regular Expression nutzen und will aber nicht, dass zum Beispiel so Zeichen wie Punkt oder Stern oder Fragezeichen eben das durcheinander bringen, sondern wirklich als Punkt, Stern und Fragezeichen behandelt werden.

00:51:45.760 --> 00:51:57.800
 Dann kann ich ja Prack-Quote drüber lagen zum Beispiel. Und das gibt es auch bei JavaScript nicht. Da muss ich mir dann jedes Mal eine Helper-Funktion schreiben oder hab die vielleicht schon irgendwo und wieder verwerten, die mir dann die entsprechenden Zeichen escaped.

00:51:57.800 --> 00:52:06.460
 Also dass es da solche Escaping-Mechanismen und eben auch HTML-Entity-Mechanismen nicht mit als Bordmittel gibt, ist mir eigentlich auch ein Rätsel.

00:52:06.640 --> 00:52:15.840
 Gerade weil der Trend halt dazu geht, dass man immer mehr mit JavaScript baut und die Seite nicht einfach als HTML vom Server kommt, kann man jetzt von halten, was man will.

00:52:15.840 --> 00:52:26.720
 Es gibt ja auch schon wieder Strömungen im Web-Dev-Bereich, die sich da dagegen aussprechen und dass es denen zu weit geht mit dem ganzen Web-App-Gedöns, kann ich auch nachvollziehen zum Teil.

00:52:26.880 --> 00:52:37.720
 Also dass es da nicht Bordmittel gibt, mit denen man das Ganze abfrühstücken kann und man sich da jedes Mal wieder Funktionen schreiben muss, die man dann auch wieder durch den Äther schickt, verstehe ich auch nicht so ganz.

00:52:37.720 --> 00:52:39.820
 Hast du das Helle eigentlich schon, Probit?

00:52:39.820 --> 00:52:44.120
 Habe ich. Hat mir irgendwie, hat so eine Schwefel-Note.

00:52:44.120 --> 00:52:49.400
 Ich finde es schmeckt, ja das stimmt, und ich finde es schmeckt irgendwie ein bisschen nach Banane.

00:52:49.680 --> 00:52:52.860
 Das haben ja Weizen oft so an sich, aber ich finde es bei dem ein bisschen extrem.

00:52:52.860 --> 00:52:55.880
 Also ich bin oft nicht so der ...

00:52:55.880 --> 00:53:01.360
 Ich wollte es nicht unterbrechen vorhin, aber ja, ich habe es auch beim ersten Schluck schon so, ja, da war das Dunkel immer besser.

00:53:01.360 --> 00:53:06.020
 Ich bin oft nicht so der IPA-Fan, aber in dem Fall schmeckt mir das besser.

00:53:06.020 --> 00:53:10.280
 Das Helle, finde ich, ist gewöhnungsbedürftig, aber ich habe mir gerade nochmal nachgeschenkt, ich weiß auch nicht warum.

00:53:10.280 --> 00:53:12.580
 Kommen wir nochmal zurück zum Thema.

00:53:12.980 --> 00:53:24.460
 Was ich mir da wünsche, ich weiß jetzt nicht genau, wie man das in JavaScript umsetzen soll, aber was ich mir da wünsche, wäre sowas ähnliches wie, oh, jetzt habe ich das Kabel von meinem Kopfhörer gezogen.

00:53:24.460 --> 00:53:27.480
 Ich höre also quasi mich selbst nicht mehr, eine Sekunde.

00:53:27.480 --> 00:53:28.560
 So, ah, perfekt.

00:53:28.560 --> 00:53:33.660
 Was ich mir da wünsche, wäre sowas ähnliches wie das Sandbox-Attribut bei iFrames.

00:53:33.660 --> 00:53:38.060
 Ich habe das gerade nochmal nachgeschlagen, wie das heißt, wo man bestimmte Dinge erlauben kann.

00:53:38.720 --> 00:53:55.280
 Also Sandbox erstmal verbietet so ziemlich alles, was in iFrames passiert, also zum Beispiel irgendwie Formulare, Pop-Ups, dann Same-Origin gibt es da als Wert noch, Scripts und so weiter.

00:53:55.280 --> 00:53:58.080
 Und das man vom iFrame aus rausnavigiert und sowas.

00:53:58.160 --> 00:54:05.120
 Und da gibt es dann eben Allow-Werte, die man in dieses Sandbox-Attribut reinschreibt, Allow-Scripts zum Beispiel.

00:54:05.120 --> 00:54:10.140
 Dann darf ich JavaScript da drin verwenden und ansonsten ist es einfach verboten.

00:54:10.140 --> 00:54:22.960
 Und das wünsche ich mir irgendwie für, ich will gar nicht sagen für Template-Literals, sondern allgemein für die Möglichkeit, vielleicht muss man auch einfach eine neue Möglichkeit schaffen, um HTML dynamisch hinzuzufügen zu einer Seite.

00:54:22.960 --> 00:54:29.800
 Für die Möglichkeit, die man eben verwenden möchte, hätte ich gern so ein Sanitizing drin, dass man zum Beispiel dann JavaScript da drin verbieten kann.

00:54:29.800 --> 00:54:32.860
 Weil in den meisten Fällen, glaube ich, will man das gar nicht haben.

00:54:32.860 --> 00:54:39.940
 Also wann möchte ich denn in dem, was ich, in dem String nochmal JavaScript ausführen?

00:54:39.940 --> 00:54:47.580
 Also es gibt für mich da, wenn ich das eh schon von JavaScript aus mache, sehe ich gar keinen Grund dafür, dass da innen drin nochmal JavaScript funktionieren soll.

00:54:48.660 --> 00:54:52.100
 Es gibt bestimmte Anwendungsfälle, aber ja, in der Regel will man es wahrscheinlich nicht, ja.

00:54:52.100 --> 00:54:56.360
 Und deswegen wäre das Default für mich am liebsten JavaScript da drin, geht einfach nicht.

00:54:56.360 --> 00:55:04.000
 Und wenn ich es, ich würde es dann genauso machen wie beim Sandbox-Attribut, ich kann es explizit erlauben, wenn ich es wirklich brauche und ansonsten ist es ausgeschaltet.

00:55:04.000 --> 00:55:12.620
 Damit hätte ich ganz viele Cross-Site-Scripting-Probleme schon irgendwie vom Default her behoben und man muss sich keine Gedanken mehr drum machen.

00:55:14.080 --> 00:55:22.780
 Bei der Recherche zu dem Thema bin ich auf einen schönen Artikel bei MDN gestoßen, der heißt da Safely Inserting External Content into a Page.

00:55:22.780 --> 00:55:26.520
 Und als ich die Überschrift gelesen habe, habe ich gedacht, jetzt, jetzt habe ich es gefunden.

00:55:26.520 --> 00:55:27.600
 Jetzt habe ich es gefunden.

00:55:27.600 --> 00:55:28.440
 Der heilige Gral.

00:55:28.440 --> 00:55:31.000
 Da, da stehen jetzt die coolen Sachen drin.

00:55:31.000 --> 00:55:38.700
 Und was dann aber da drin stand, dachte ich so, okay gut, das kenne ich jetzt alles schon und wo ist jetzt die coole Lösung?

00:55:38.920 --> 00:55:45.820
 Also, es sind, es sind im Moment eins, zwei, drei, vier, es sind, es sind vier Blöcke.

00:55:45.820 --> 00:55:55.200
 Der erste, das ist, das ist wahrscheinlich das sicherste, ist, wenn man DOM-Notes mit DOM-Creation-Methods baut.

00:55:55.200 --> 00:55:57.200
 Das ist das hässlichste, was es gibt.

00:55:57.200 --> 00:56:03.560
 Also, dass ich sage, äh, Document Create Element, äh, Element Set Attribute, äh, und so weiter.

00:56:03.560 --> 00:56:07.200
 Und dann das komplett zusammenbaue, aber mit diesen DOM-Methoden.

00:56:07.200 --> 00:56:12.260
 Ähm, das ist, wir haben das ein bisschen intensiver gemacht bei einem Projekt, wo ich dran arbeite.

00:56:12.260 --> 00:56:15.820
 Das kannst du, das kannst du einfach nicht mehr lesen hinterher.

00:56:15.880 --> 00:56:21.820
 Du möchtest eigentlich an der Stelle HTML da stehen haben, wo irgendwelche Templates, also im Prinzip Template Literals möchtest du an der Stelle stehen haben.

00:56:21.820 --> 00:56:24.180
 Das ist ja auch performance-technisch, ist es ja besser.

00:56:24.180 --> 00:56:36.940
 Also, das war ja auch bei Jackberry eine der goldenen Regeln, wenn du, äh, zu viel hinzufügen willst, dann mach das nicht mit tausend Ads und, äh, Appends, äh, sondern mach's mit innerHTML.

00:56:37.920 --> 00:56:39.760
 Also, beziehungsweise bei Jackberry, äh, HTML.

00:56:39.760 --> 00:56:43.580
 Also, dann, du baust, du baust den String und machst es mit innerHTML, baust, äh, schiebst den mit innerhalb, ja, genau.

00:56:43.580 --> 00:56:46.000
 Also, das geht einfach schneller als, als die DOM-Manipulation.

00:56:46.000 --> 00:56:52.380
 An dieser einen Stelle, wo ich gesagt, wo ich es, äh, gerade, die ich schon erwähnt habe, da haben wir das tatsächlich mit DOM-Methoden gemacht, aus Sicherheitsgründen.

00:56:52.380 --> 00:56:52.840
 Mhm.

00:56:52.840 --> 00:57:00.220
 Weil wir nicht, weil wir sicher gehen wollten, dass, ähm, jetzt, dass, dass da kein, dass da kein Mist passieren kann, weil da eben User-Generated-Content von außen reinkommt.

00:57:00.220 --> 00:57:02.080
 So, okay, das ist Variante 1.

00:57:02.080 --> 00:57:04.860
 Variante 2 ist, finde ich, schon ein bisschen lustig eigentlich fast.

00:57:06.080 --> 00:57:07.940
 jQuery steht da. Mach's mit jQuery.

00:57:07.940 --> 00:57:11.580
 Da sieht man, der Artikel ist schon ein bisschen älter.

00:57:11.580 --> 00:57:17.240
 Gut, wobei ich ja bei jQuery HTML kann ich ja auch Script-Tags übergeben, oder nicht?

00:57:17.240 --> 00:57:19.300
 Oder wird das tatsächlich gefiltert?

00:57:19.300 --> 00:57:28.080
 Die sagen da, äh, im Prinzip ist das, dass, ist das auch DOM-Scripting, äh, Node-Add-Class, äh, Node.Text und sowas.

00:57:28.080 --> 00:57:33.540
 Also, das ist im Prinzip, sind im Prinzip nur die DOM-Scripting-Methoden von jQuery, ist es, was, was da empfohlen wird.

00:57:33.540 --> 00:57:35.520
 Also, letzten Endes ist es nur eine andere Schreibweise.

00:57:36.080 --> 00:57:42.280
 Ähm, und jQuery hatte auch nicht nur eine, äh, äh, Cross-Site-Scripting-Lücke schon in der Vergangenheit.

00:57:42.280 --> 00:57:45.700
 Also, ähm, äh, von daher weiß ich nicht.

00:57:45.700 --> 00:57:51.600
 Dann, ähm, Moment, HTML ist ja nicht, okay, dann, naja, Moment, ah, genau.

00:57:51.600 --> 00:57:54.460
 Dann kommt DOM-Purify, das empfehlen die tatsächlich.

00:57:54.460 --> 00:57:59.460
 Also, sie sagen, hey, äh, mach doch, aber jag DOM-Purify hinterher drüber, was ich gerade schon angesprochen hab.

00:57:59.580 --> 00:58:05.460
 Ähm, das ist auch, ähm, das ist auch, ich, ich find's halt komisch, wenn man dafür ein extra, ein extra Library laden muss.

00:58:05.560 --> 00:58:07.260
 Aber wenn's halt so ist, dann ist es so.

00:58:07.260 --> 00:58:09.860
 Und was ist, wenn jetzt diese Library auch noch einen Fehler hat?

00:58:09.860 --> 00:58:12.640
 Und deswegen denke ich halt, das müsste in den Browser rein.

00:58:14.000 --> 00:58:24.200
 Und witzigerweise, du hast grad gesagt, man nutzt ja nicht immer Vue, ähm, am Ende, der letzte Punkt, sind Template-Engines, die hoffentlich damit ja irgendwie schon umgehen.

00:58:24.200 --> 00:58:35.300
 Beziehungsweise, die einem ja das Ganze abnehmen, sodass ich überhaupt gar keine Template-Literals mehr brauch, wenn ich die Template-Engine eh schon verwende, die hoffentlich keine Cross-Site-Scripting-Lücke hat, wovon man auch nicht unbedingt ausgehen kann.

00:58:35.300 --> 00:58:43.120
 Ähm, dann sollte das hoffentlich, also ich nehm jetzt mal an, die, die Template-Engine von Vue, äh, ich weiß gar nicht, was da verwendet wird.

00:58:43.120 --> 00:58:44.220
 Was, was verwenden die, Mustache?

00:58:44.220 --> 00:58:56.580
 Ja, es ist so ein eigenes, äh, Ding, du kannst, es sieht ähnlich aus wie Mustache, ist aber nicht, hat keine Logik, ja, sondern du hast halt nur, du kannst Expressions verwenden, eben auch in zwei geschweiften Klammern, wie man das von Mustache-Code kennt.

00:58:56.580 --> 00:59:01.440
 Und das wird automatisch auch escaped und wenn du es, äh, halt nicht escaped haben willst, dann musst du es anders machen.

00:59:01.440 --> 00:59:12.840
 Ja, also, äh, ich bleib dabei, da muss eigentlich was im Browser her, aus meiner Sicht. Irgendwie eine Möglichkeit, irgendwie eine fest eingebaute Methode.

00:59:13.040 --> 00:59:22.920
 Wo, also ein Dom-Purify, von mir aus, nimm einfach das Dom-Purify und pack es in den Browser, sodass ich es irgendwie nativ verwenden kann und nicht eine extra Library anziehen muss.

00:59:22.920 --> 00:59:30.040
 Ich, das, das wäre dann wahrscheinlich auch schneller und, äh, keine Ahnung. Also, das, das wäre so meine bevorzugte Methode, wenn es da um Security geht.

00:59:30.040 --> 00:59:54.280
 Und ich, ich, ich finde dieses extra, ja, ist komisch. Aber nicht immer hat man es ja mit User-Generated-Content zu tun. Ähm, von daher immer dann, wenn, wenn ihr sicher seid, dass, ähm, der Inhalt, der, der, der, der, den ihr in die Seite laden wollt, nur unter eurer Kontrolle steht und nicht unter Kontrolle von irgendeinem User, der als Benutzername oder was weiß ich, was ihr ausgeben wollt, irgendwelche schlimmen Strings rein, äh, Drop Table oder so.

00:59:54.280 --> 01:00:16.840
 Reingeben wollt, ja, äh, will dann, ähm, also, wenn, wenn es unter eurer Kontrolle steht, müsst ihr euch da keine Gedanken machen. Aber es soll es ja geben, dass man auch User-Generated-Content ausgeben will und dann solltet ihr euch da schon drüber Gedanken machen, wie ihr das sanitized. Und, äh, ja, in PHP gibt es ja auch eine fertige Methode dafür, nur, da hattest du vorhin schon angesprochen, wenn ich mich noch recht erinnere.

01:00:16.840 --> 01:00:19.300
 Ja, HTML-Entities. Ja, also.

01:00:19.300 --> 01:00:22.660
 Waren einfach alles in Entities um. Ja, warum, warum.

01:00:22.660 --> 01:00:26.880
 Oder HTML-Special-Chars, wenn ich eben nur, äh, Spitze-Klammer und Double-Quotes zum Beispiel umwandeln will.

01:00:26.880 --> 01:00:29.800
 Aber das würde auch theoretisch JavaScript zulassen, oder?

01:00:29.800 --> 01:00:39.780
 Wie zulassen? Naja, ich muss mir halt eine Funktion schreiben, die das macht. Also eine Funktion, die halt alle Double-Quotes, äh, Replace durch und Quot und alle Spitzen-Klammern durch, äh, und LT.

01:00:40.040 --> 01:00:43.160
 Okay, aber wenn ich jetzt HTML ausgeben wollte, hilft mir das ja auch nicht.

01:00:43.160 --> 01:00:44.780
 Nee.

01:00:44.780 --> 01:00:48.440
 Also, so rauszufiltern. Ja, egal. Also, ich weiß nicht.

01:00:48.440 --> 01:00:56.020
 Naja, beim Rausfiltern schon. Also, ich müsste halt, bevor ich das einfüge ins DOM, äh, müsste ich das halt rüberjagen, die Funktion. Das kann ich schon machen, ja.

01:00:56.580 --> 01:01:08.700
 Ja, also, es ist kompliziert. Aber vielleicht haben wir uns auch total verrannt, äh, in, in irgendwas. Und es gibt dafür schon eine total geile Lösung, die wir noch nicht kennen. Dann bitte schreibt es in die Kommentare.

01:01:08.700 --> 01:01:10.540
 Wenn Westbos die nicht kennt, dann kennen wir die auch nicht.

01:01:10.540 --> 01:01:25.160
 Ja, dazu muss man sagen, dieser Kurs, der ist schon was älter. Also, gekauft habe ich ihn 2018. Und ich habe, äh, vorhin noch mal reingeschaut in die, in die Beispiel-Dateien. Äh, die sind teilweise schon 2016 hochgeladen worden bei GitHub.

01:01:25.160 --> 01:01:30.120
 Ähm, also, der Kurs ist jetzt nicht mehr, also, ES6 ist ja jetzt auch nicht mehr das allerneuerste.

01:01:30.120 --> 01:01:38.060
 Ja, klar. Ähm, vielleicht gibt es da mittlerweile was Cooleres, Neueres. Ähm, wie gesagt, der Artikel bei MDN, der scheint auch nicht der aktuellste zu sein.

01:01:38.060 --> 01:01:44.380
 Helft uns, äh, schreibt es in die Kommentare, äh, drückt die Glocken bei Twitter.

01:01:44.380 --> 01:01:51.820
 Ding, ding, ding, ding, wenn wir schon dabei sind. Äh, ja, folgt uns bei Twitter, äh, at WWSEV, ähm, hier mal kurze Zwischenwerbung.

01:01:52.320 --> 01:01:58.940
 Genau, also, ich wäre da sehr dankbar, wenn da irgendjemand was weiß, irgendwie noch was Cooleres als Don't Purify, äh, bitte Bescheid sagen.

01:02:00.020 --> 01:02:03.420
 Genau, so, hab ich noch was auf meinem Zettel? Ich glaub, damit bin ich mit der Security durch.

01:02:03.420 --> 01:02:08.760
 Ja, damit sind wir mit dem Thema durch. Mensch, was ist mit uns los heute? Hier, knapp über eine Stunde.

01:02:08.760 --> 01:02:10.660
 Wir reden heute einfach sehr schnell.

01:02:11.220 --> 01:02:32.400
 Wir haben auch, nee, wir haben, das hab ich ganz am Anfang vergessen zu sagen, ähm, wir haben uns bewusst mal nur eine Sache rausgesucht, ein, ein kleines, kleines in Anführungsstrichen Feature, äh, über das wir reden wollen, weil wir waren die letzten Male immer dabei mit irgendwie, wir machen einen riesen Fass auf und versuchen das in einer Sendung abzuhandeln und kommen dann irgendwie am Schluss mit über zwei Stunden raus.

01:02:32.540 --> 01:02:41.000
 Deswegen, das war heute eine bewusste Entscheidung, dass wir mal, äh, ein bisschen uns kürzer fassen, aber dass wir jetzt, dass wir so kurz schnappen, also nicht schlecht.

01:02:41.000 --> 01:02:45.520
 Ich weiß nicht genau, wie viel wir vor der Sendung angefangen haben, äh, auf Rekord zu drücken, aber ich bin schon bei über einer Stunde.

01:02:45.520 --> 01:02:46.880
 Genau eine Minute, glaube ich, ja.

01:02:46.880 --> 01:02:49.800
 Okay, ich bin schon, dann sind wir definitiv schon über eine Stunde jetzt.

01:02:50.260 --> 01:02:54.140
 Ja, aber trotzdem, also wenn man das vergleicht mit den letzten Folgen, das ist ja, das ist ja nix.

01:02:54.140 --> 01:03:00.140
 Ja, dann kommen wir jetzt, sind wir jetzt auch schon, äh, Mensch, wir hatten, weißt du, was wir heute viel zu wenig hatten?

01:03:00.140 --> 01:03:01.900
 Feuerwerk?

01:03:01.900 --> 01:03:06.900
 Wir hatten heute viel zu wenig Feuerwerk, nein, wir hatten heute viel zu wenig Applaus, auch zum Beispiel.

01:03:06.900 --> 01:03:12.780
 Für unsere treuen Stamm-Zuhörerinnen und Zuhörer.

01:03:12.780 --> 01:03:18.160
 Ja, Mensch, die sind sowieso enttäuscht, weil wir keinen Spam-Spot hatten heute.

01:03:18.280 --> 01:03:20.580
 Ja, es tut mir leid, ich hab's nicht geschafft.

01:03:20.580 --> 01:03:23.380
 Nein, nein, nein, ich bin ja mitschuld.

01:03:23.380 --> 01:03:24.700
 Du wolltest ja eigentlich einen machen, ja.

01:03:24.700 --> 01:03:28.280
 Ich wollte, ja, ich hatte Zeit und hatte dann irgendwie doch keine Zeit.

01:03:28.280 --> 01:03:31.460
 Wie das, wie das halt immer so ist, ne?

01:03:31.460 --> 01:03:36.520
 Gut, dann machen wir doch, bevor wir jetzt doch, äh, zu viel reden, einfach weiter.

01:03:36.520 --> 01:03:39.080
 Das Geiltein.

01:03:39.080 --> 01:03:42.200
 Geiltein.

01:03:42.200 --> 01:03:45.000
 Und das kommt heute von Moritz.

01:03:45.000 --> 01:03:46.860
 Ja, hast du.

01:03:47.560 --> 01:03:48.160
 Ich hasse.

01:03:48.160 --> 01:03:52.360
 Hast du gesehen, hast du gesehen, wie es, wie es heißt und kannst du dir was darunter vorstellen?

01:03:52.360 --> 01:03:53.020
 Äh, nee, noch nicht.

01:03:53.020 --> 01:03:53.720
 Soll ich mal spicken?

01:03:53.720 --> 01:03:56.500
 Äh, Edex UI.

01:03:56.500 --> 01:03:59.160
 Schon mal, schon mal gehört?

01:03:59.160 --> 01:04:00.020
 Äh, nee.

01:04:00.020 --> 01:04:01.160
 Weißt du, was das damit auf sich haben könnte?

01:04:01.160 --> 01:04:01.360
 Nee.

01:04:01.360 --> 01:04:05.480
 Ähm, ich weiß nicht, ob ich es jetzt hier aufmachen kann oder ob mir dann mein Rechner abkachelt.

01:04:06.680 --> 01:04:11.860
 Ich bin da durch Zufall, also der YouTube-Algorithmus, der schlägt einem ja manchmal, ähm, komische Sachen vor.

01:04:11.860 --> 01:04:16.560
 Ähm, und das, ich weiß gar nicht, was ich mir da vorher für ein Techie-Kram angeschaut hab.

01:04:16.560 --> 01:04:20.500
 Und dann kam halt ein Video ja hier, das ist jetzt so der geile Scheiß.

01:04:21.200 --> 01:04:27.200
 Und dann, ich klicke ja dann immer einfach so drauf, ich heiße Simple Man, ja, ich klicke dann drauf.

01:04:27.200 --> 01:04:32.220
 Ähm, und, ähm, ich weiß auch gar nicht, wie man es ausspricht, ehrlich gesagt.

01:04:32.220 --> 01:04:36.440
 Ähm, Edex, Edex UI würde ich jetzt sagen.

01:04:36.440 --> 01:04:40.260
 Edex UI, Edex UI, ich hab keine Ahnung.

01:04:41.260 --> 01:04:44.640
 Also, es ist ein kleines Edex-Groß-UI.

01:04:44.640 --> 01:04:46.340
 Und was ist das?

01:04:46.340 --> 01:04:53.220
 Ähm, das ist ein, ähm, also ich hab's tatsächlich unter Windows zum Spaß mal installiert, weil ich wissen wollte, ob das wirklich geht.

01:04:53.220 --> 01:04:58.140
 Weil, äh, eigentlich dachte ich, das ist, ähm, mehr so, mehr so ein Hacker-Dings für irgendwie Linux oder so.

01:04:58.140 --> 01:05:01.140
 Aber das scheint tatsächlich für alle größeren Betriebssysteme zu existieren.

01:05:01.140 --> 01:05:09.560
 Ähm, das ist, äh, heavily inspired from the Tron Legacy Movie, ähm, ein, wie soll ich sagen?

01:05:10.160 --> 01:05:11.740
 Es ist eine Kommandozeile in der Mitte.

01:05:11.740 --> 01:05:15.080
 Es ist also deine Kommandozeile, die du auf deinem Betriebssystem hast.

01:05:15.080 --> 01:05:24.000
 Eine CMD zum Beispiel auf Windows oder halt eben eine Bash, äh, unter, unter Linux oder was auch immer du als Standard-Kommandozeile eingerichtet hast in der Mitte.

01:05:24.000 --> 01:05:31.120
 Und dann drumherum lauter so fancy, äh, Animationen und es, es sieht aus wie so aus einem Hacker-Film.

01:05:31.120 --> 01:05:33.180
 Es ist so eine Oberfläche wie aus einem Hacker-Film.

01:05:33.180 --> 01:05:38.160
 Und das Verrückte daran ist, dass die Sachen, die man darin sieht, tatsächlich echt sind.

01:05:39.120 --> 01:05:39.980
 Zumindest die meisten.

01:05:39.980 --> 01:05:42.420
 Das mit dem Memory, da bin ich mir nicht so sicher.

01:05:42.420 --> 01:05:45.320
 Also da ist bei, also das, ich weiß nicht, wie ich es beschreiben soll.

01:05:45.320 --> 01:05:46.240
 Hast du dir mal einen Screenshot angeschaut?

01:05:46.240 --> 01:05:49.540
 Ja, ich schaue mir gerade die ganzen Screenshots an in dem Repository.

01:05:49.540 --> 01:05:55.520
 Es ist, es ist natürlich dunkler Hintergrund, dann in der Mitte ist dieses Terminal, wo du Sachen eintippen kannst.

01:05:55.520 --> 01:05:57.840
 Links unten gibt's so eine Liste mit File-System.

01:05:57.840 --> 01:06:03.160
 Da kannst du tatsächlich in den Ordnern rumklicken und hast dazu visuelle und Sound-Effekte.

01:06:03.160 --> 01:06:07.560
 Wirklich so, als wärst du jetzt auf dem CSI-Miami-Computer oder so, keine Ahnung.

01:06:07.700 --> 01:06:15.000
 Das ist so, das ist der feuchte Traum eines Hackers, beziehungsweise, nee, es stimmt nicht, der feuchte Traum eines Hackers sieht ganz anders aus.

01:06:15.000 --> 01:06:16.460
 Dem ist nämlich das UI scheißegal.

01:06:16.460 --> 01:06:21.500
 Der feuchte Traum eines Regisseurs, Regisseurs eines Hacker-Films.

01:06:21.620 --> 01:06:27.000
 Und dann siehst du da irgendwie, da läuft die Uhrzeit runter.

01:06:27.000 --> 01:06:29.180
 Rechts hast du so eine sich drehende Weltkugel.

01:06:29.180 --> 01:06:38.120
 Ich weiß nicht mal, ob da die Daten, ob das wirklich irgendwas ist mit irgendwelche, ob da wirklich echte Daten sind und ob da irgendeine Quatsch-Animation läuft.

01:06:38.120 --> 01:06:38.980
 Das kann auch sein.

01:06:39.540 --> 01:06:52.480
 Aber dann steht da irgendwie deine IP-Adresse und CPU-Usage im Graph und du hast so eine Tastatur, die tatsächlich, also man kann die auf Touchscreen wohl angeblich tatsächlich benutzen.

01:06:52.480 --> 01:06:53.580
 Da ist eine Tastatur mit drauf.

01:06:53.580 --> 01:06:59.000
 Aber wenn du normal tippst, dann leuchten auch diese Tasten auf und da kommt natürlich ein Geräusch dazu.

01:06:59.000 --> 01:07:04.260
 Das ist natürlich Security-mäßig, wenn du irgendein Passwort eingibst, sieht natürlich jeder das Passwort.

01:07:04.260 --> 01:07:07.300
 Du fühlst dich wie der ultimative Hacker mit dem Teil.

01:07:07.300 --> 01:07:11.900
 Das ist unglaublich. Also es ist fast so geil wie Hacker-Typer, falls das jemand kennt.

01:07:11.900 --> 01:07:17.060
 Dann hackertyper.com. Also kann ich auf jeden Fall nochmal empfehlen, wenn du irgendwie vor deinen Freunden angeben willst.

01:07:17.060 --> 01:07:24.340
 Geh einfach auf hackertyper.com, drück F11 für Fullscreen und dann tipp einfach irgendwas und dann kommt verrückter Code, den keiner versteht.

01:07:24.340 --> 01:07:28.060
 Aber das ist noch cooler, weil du tatsächlich was damit machen kannst.

01:07:28.060 --> 01:07:33.240
 Wie ich mir gedacht habe, ich habe mal reingeschaut in die Package-Chasen-Electron natürlich.

01:07:33.240 --> 01:07:35.340
 War eigentlich fast klar.

01:07:36.420 --> 01:07:37.520
 Ja, bei so Cross-Plattformen.

01:07:37.520 --> 01:07:40.620
 Dann stand irgendwas auf JavaScript-Basis, stand glaube ich sogar dabei.

01:07:40.620 --> 01:07:43.180
 Ich weiß nicht, ob ich mich jetzt traue, nochmal aufzumachen.

01:07:43.180 --> 01:07:48.440
 Doch, ich mache es jetzt. Ich traue mich. Ich traue mich. Ich mache es jetzt nochmal auf, weil das nimmt tatsächlich den Fullscreen an.

01:07:48.440 --> 01:07:52.180
 Und es kommt am Anfang, rattert auch so Text über den Bildschirm.

01:07:52.720 --> 01:07:56.780
 Also es ist wirklich der Traum, der Traum eines Hacker-Filmregisseurs.

01:07:56.780 --> 01:08:00.120
 Und dann kommt hier Welcome Back, Moritz in dem Fall.

01:08:00.120 --> 01:08:02.960
 Und die Soundeffekte sind der Wahn.

01:08:02.960 --> 01:08:13.800
 Und dann, also, ja, plapp, plapp, plapp, wenn man irgendwie auf die Tastatur drückt und dann siehst du tatsächlich die echten, also quasi deinen Taskmanager mit deiner CPU-Auslastung tatsächlich in echt.

01:08:13.800 --> 01:08:22.640
 Und was für ein Prozessor und auch die Prozesse, die auf deinem Rechner laufen, tatsächlich hier irgendwie, was braucht gerade wie viel Memory und es sieht super hacky aus.

01:08:23.360 --> 01:08:26.260
 Also, es ist quasi der coolere Taskmanager.

01:08:26.260 --> 01:08:30.140
 Den hätte ich mir bei Gelegenheit auch mal zu Gemüte führen, ja.

01:08:30.140 --> 01:08:37.080
 Es ist, es macht, es macht einfach Spaß. Es macht einfach Spaß. Und ich kann mich auch in diesem Dateimanager links unten, kann ich mich auch rumklicken.

01:08:37.080 --> 01:08:43.340
 Man muss es sich einfach angucken. Wahrscheinlich hat, wahrscheinlich greift das total meine Daten ab die ganze Zeit, während ich das benutze.

01:08:43.340 --> 01:08:46.140
 Die gehen direkt nach China oder Russland, oder?

01:08:46.140 --> 01:08:57.420
 Aber es ist einfach so cool. Also ein würdiges Geilteil aus meiner Sicht. Es macht echt Spaß, damit rumzuspielen. Und wie gesagt, es geht für alle möglichen Betriebssysteme.

01:08:57.420 --> 01:09:08.300
 Und ich würde sagen, naja, ich weiß jetzt nicht, ob eine CMD da drin so spannend ist, aber jetzt unter Linux irgendwie mit einer Bash oder eine ZSH-Konsole, da kannst du ja auch irgendwie was Cooles mitmachen.

01:09:08.300 --> 01:09:21.760
 Also, es macht einfach Spaß. Es macht einfach Spaß. Und es ist wirklich, es ist schön detailliert durchgezogen bis zum letzten. Es ist wirklich, du könntest das Ding genauso nehmen und in irgendeinem Film zeigen und da irgendwelche Sachen runterrattern lassen.

01:09:21.760 --> 01:09:23.320
 Und es ist ja auch inspiriert von dem Film.

01:09:23.320 --> 01:09:33.060
 Genau, es ist inspiriert vom Film, aber es sieht halt, es hat halt auch die wirklich, es ist vom Design her, es hat einfach die Qualität. Es ist einfach wirklich richtig gut.

01:09:33.300 --> 01:09:48.100
 Ich muss eh sagen, das wäre was, was mir, glaube ich, Spaß machen würde. Für Filme und Serien solche Fake-Interfaces schreiben. Also so ein Herztöne-Monitor für eine Krankenhausserie, der einfach nur Wellen anzeigt und piep, piep dazu macht und irgendwann piep.

01:09:48.600 --> 01:10:01.420
 Oder irgendwie, ja, keine Ahnung, es gibt ja oft so Sequenzen, wo die dann irgendwie drei Knöpfe drücken und dann ist das Bild, das irgendwie 8x8 Pixel groß ist, ist dann in 4K nachgeschärft und sowas.

01:10:01.420 --> 01:10:01.740
 Ja, genau.

01:10:01.740 --> 01:10:03.820
 Und das ist aber oft, das ist oft ganz schlecht gemacht.

01:10:03.820 --> 01:10:04.980
 Enhance, enhance.

01:10:05.000 --> 01:10:11.360
 Ja, wenn sie irgendwelche Webseiten zeigen, die halt auch einfach, wo du halt merkst, ja, das durfte halt nicht mehr kosten als 10 Euro.

01:10:11.360 --> 01:10:21.680
 Ja, da war es schon zu teuer für die Produktion. Aber sowas in cool zu machen für Fernsehserien, wenn jemand sowas als Job irgendwie mal hat und selber keine Lust drauf hat, hält er mit, ich hab Lust drauf.

01:10:22.660 --> 01:10:31.720
 Also ich, ich find's auch super. Und ich würd's total, also wenn du sagst, das ist mit Electron gebaut, das hab ich, so tief bin ich da gar nicht eingestiegen, dann ist das ja wohl auch mit Webtechnologie gebaut.

01:10:31.720 --> 01:10:32.060
 Ja, ja, klar.

01:10:32.060 --> 01:10:33.020
 So weit es geht.

01:10:33.020 --> 01:10:44.820
 Also es ist halt Node.js, ähm, deswegen kannst du da quasi so tief du willst ins Dateisystem und auf Systemfunktionen drauf zugreifen. Also auch so Sachen wie Speicher auslesen und sowas, das dürfte eigentlich problemlos gehen.

01:10:44.820 --> 01:10:50.560
 Also offenbar kommt man komplett ins System, weil ich sogar die Prozesse in Windows anzeigen kann.

01:10:50.560 --> 01:10:58.360
 Das hast du wahrscheinlich halt für manche Sachen, ähm, also hier steht sogar wirklich Geo-IP, Active Connections, die du wirklich, also wirklich System Monitoring, also scheint echt zu sein.

01:10:58.360 --> 01:11:08.980
 Also Geo-IP, das ist, das ist interessant, dann sind diese Punkte auf dieser Weltkugel rechts tatsächlich echt, dann, dann sind das irgendwelche, ach, das ist ja crazy, also verrückt, ja.

01:11:08.980 --> 01:11:19.960
 Ja, also ich, ich wär da auch sofort dabei, also, ähm, es hat ja auch mal einer dieses, ähm, LK, heißt das, glaub ich, dieses Interface von, ähm, äh, Star Trek Next Generation.

01:11:19.960 --> 01:11:20.360
 Ja, genau.

01:11:20.360 --> 01:11:27.460
 Mal nachgebaut im Browser und das find ich auch total geil. Also, also sowas, das muss ein Riesenspaß machen, sowas zu bauen.

01:11:27.460 --> 01:11:30.480
 Lass uns mal so irgendwie so, so ein, so ein, so ein Quatsch, äh, bauen.

01:11:30.480 --> 01:11:32.460
 Ein WWS-IV-Interface.

01:11:32.460 --> 01:11:38.800
 Ein WWS-IV-Interface. Das, das allerdings wird wahrscheinlich sehr merkwürdig werden, glaub ich.

01:11:40.100 --> 01:11:43.900
 Weil wir müssen ja die ganze Merkwürdigkeit der Sendung darin abbilden, das muss ja uns quasi widerspiegeln.

01:11:43.900 --> 01:11:44.800
 Das ist ein Soundboard.

01:11:44.800 --> 01:11:48.280
 Dich beim Rülpsen, zum Beispiel.

01:11:48.340 --> 01:11:49.600
 Ui, da krieg ich wieder Ärger.

01:11:49.600 --> 01:11:52.640
 Unsere, unsere Jingles.

01:11:52.640 --> 01:11:54.340
 Ja, mal gucken.

01:11:54.340 --> 01:11:59.120
 Ja, aber wenn wir, ich, wenn wir noch bei, bei Hacker-Filmen waren und so, wollte ich, wollte ich gerade noch kurz einwerfen.

01:11:59.120 --> 01:12:04.160
 Ähm, hast du gesehen, äh, äh, How to Sell Drugs Online Fast?

01:12:04.400 --> 01:12:12.180
 Nach unserer, ähm, äh, Folge 14, da hat Gerrit, ich weiß nicht, im Nachgespräch oder während der Sendung das angesprochen.

01:12:12.180 --> 01:12:19.300
 Und ich hab's mir nicht am gleichen Abend, aber am Abend drauf angeschaut und dann wirklich, äh, innerhalb von zwei, drei Tagen komplett durchgeschaut.

01:12:19.300 --> 01:12:20.740
 Also wirklich sehr empfehlenswert.

01:12:20.740 --> 01:12:24.940
 Hast du da mal angehalten, ähm, bei, wenn man einen Computerscreen sieht, was die machen?

01:12:24.940 --> 01:12:33.640
 Weil mir ist aufgefallen, das ist, glaub ich, die erste Serie, äh, Schrägstrich Film, ähm, wo ich den Eindruck hatte, dass die,

01:12:33.640 --> 01:12:36.240
 dass die es wirklich echt haben wollten.

01:12:36.240 --> 01:12:39.880
 Also, die haben die echten Kommandozeilentools gezeigt.

01:12:39.880 --> 01:12:45.920
 Genau, oder auch wenn sie YouTube, äh, wenn ihr YouTube-Videos guckt, ja, dann ist das wirklich die, die Oberfläche von YouTube zum Beispiel und so.

01:12:45.920 --> 01:12:47.500
 Also, ja, das ist echt sehr gut gemacht.

01:12:47.500 --> 01:12:52.000
 Also, da wird ja, da wird ja, da wird ja viel gehackt, da geht's ja, geht's ja viel um, äh, um Technik.

01:12:52.000 --> 01:12:59.480
 Und, also, immer dann, immer dann, wenn ich ein Screen gesehen hab, hab ich auf Pause gedrückt, äh, um zu gucken, was ist denn das jetzt gerade für ein Tool, was machen die denn gerade?

01:12:59.480 --> 01:13:02.880
 Und, äh, das, also, das, was ich kannte,

01:13:02.880 --> 01:13:09.020
 war immer, also, das war passend, das war immer genau das Richtige, wo ich dachte, ja, und die erzählen da auch keine Scheiße, was Darknet.

01:13:09.020 --> 01:13:12.720
 Also, ich glaub, man kann da, man kann da echt eine Menge lernen, tatsächlich, über die Technik.

01:13:12.780 --> 01:13:17.660
 Auf jeden Fall, also, ja, als, als jemand, der nicht so nerdig ist, kriegt man das ja auch alles, alles schön, äh, erklärt.

01:13:17.660 --> 01:13:32.700
 Auch wenn man sich mit Drogen nicht auskennt, kriegt man das alles sehr genau erklärt, äh, und, äh, ja, wirklich, also eine, es ist nicht die erste Serie bei mir, sondern die zweite Serie, bei der mir das so positiv aufgefallen ist, dass es halt nicht so möchte gern nerdig ist, sondern auch wirklich was dahinter steckt.

01:13:32.700 --> 01:13:45.640
 Ähm, sondern Mr. Robot, äh, war die erste Serie, wo du wirklich, du hast halt, die nutzen halt irgendwelche Unix-Shells, aber es ist halt nicht irgendwie so Pseudo-Hacker-mäßig, sondern es sind halt einfach Unix-Shells und der tippt halt dann rum.

01:13:45.840 --> 01:14:00.400
 Aber halt mit, mit Sachen, die vernünftig aussehen und nicht irgendwie so völlig Hanebüchen, ähm, genau. Damit haben wir jetzt auch, äh, also Netflix, äh, und, und Amazon Prime abgedeckt, damit's nicht so einseitig wird, ähm, aber hat ja inzwischen eh fast jeder alles, ne?

01:14:00.400 --> 01:14:02.060
 Ja, genau.

01:14:02.060 --> 01:14:03.140
 Jedenfalls, äh, sehr empfehlenswert.

01:14:03.140 --> 01:14:04.100
 Ihr habt alles, wir haben alles.

01:14:04.100 --> 01:14:06.120
 Alle haben alles.

01:14:06.120 --> 01:14:08.160
 Gut, und ich glaub, damit haben wir's dann.

01:14:08.160 --> 01:14:10.120
 Ja, ich glaub, damit haben wir auch alles.

01:14:10.120 --> 01:14:14.960
 Weil, wo wir sind, ist vorne und wo ihr seid, ist fraglich.

01:14:14.960 --> 01:14:15.460
 Fraglich.

01:14:15.840 --> 01:14:26.600
 Habe ich gerade gedacht. Also wir wissen es einfach nicht. Schreibt mal in die Kommentare, wo ihr seid, wenn wir vorne sind. Vielleicht seid ihr auch vorne. Vielleicht seid ihr auch hinten. Vielleicht seid ihr unten. Vielleicht seid ihr oben. Vielleicht seid ihr unten.

01:14:26.600 --> 01:14:38.300
 Vielleicht seid ihr, aber Moment, Moment, Moment. Nein, nein, es geht noch viel weiter. Es könnte auch innen oder außen sein. Oder davor oder danach. Also es gibt so viele Möglichkeiten. Mich würde echt interessieren, wo seid ihr eigentlich?

01:14:38.300 --> 01:14:49.660
 Hat da einer was ins Bier getan? Vielleicht. Keine Ahnung. Also das Bier kam in unetikettierten, großen, braunen Flaschen. Ich habe keine Ahnung, was da drin ist.

01:14:49.660 --> 01:15:06.900
 Lack. Der Lack gesoffen. Ja. Das ist dieser bananige Geruch. Ah, wir haben Lack. Okay, wir haben Lack gesoffen. Also jetzt gerade habe ich, ich bin noch gut drauf. Wir könnten jetzt die Sendung beenden, ohne dass ich das Gefühl habe, es müsste jetzt vorbei sein. Es wäre vielleicht auch mal ganz gut heute.

01:15:06.900 --> 01:15:12.220
 Richtig. Deswegen würde ich sagen, wir sind durch, oder? Wir machen jetzt, ja, Verabschiedung.

01:15:12.220 --> 01:15:15.380
 Verabschiedung. Ohne, ohne Trailer.

01:15:15.380 --> 01:15:17.520
 Verabschiedung.

01:15:17.520 --> 01:15:22.560
 Genau. Das ist immer wieder gut.

01:15:22.560 --> 01:15:23.980
 Ja.

01:15:23.980 --> 01:15:36.380
 Was haben wir noch zu sagen? Empfehle uns weiter. Nee, tatsächlich. Also ich glaube, so weiter empfehlen, dass wir einfach noch wachsen, unsere Hörerbasis wachsen lassen können. Das liegt mir, glaube ich, zurzeit

01:15:36.380 --> 01:15:43.640
 Am meisten am Herzen. Spenden natürlich auch gerne. Haben wir jetzt auch jedes Mal angesprochen. Ja, vielen Dank auch an alle bisherigen Spender.

01:15:43.640 --> 01:15:58.380
 Da müsst ihr nur auf den Bierkrug klicken. Dann könnt ihr uns spenden. Genau. Nee, ist auch wichtig, dass man sagt, wo das geht, ne? Ja, ja, klar.

01:15:58.900 --> 01:16:19.500
 Und dann könnt ihr uns Bier spenden oder Geld spenden oder dem Konstantin Oliven schicken. Genau. Ich habe immer noch keine Oliven bekommen, Mensch. Das darfst du nicht sagen. Du musst, wenn du willst, dass die Leute dir was schicken, musst du sagen, ja, ich habe schon wieder Oliven bekommen, Mensch.

01:16:20.880 --> 01:16:24.280
 Seid doch auch mal so cool wie die anderen 20, die mir Oliven geschickt haben.

01:16:24.280 --> 01:16:30.140
 Ich glaube auch, dass in anderen Podcasts, die ich schon gehört habe, wo die von Geschenken erzählt haben, dass das immer gelogen war. Das ist alles gelogen.

01:16:30.140 --> 01:16:31.960
 Das war wahrscheinlich nur so ein Prozent der Geschenke.

01:16:31.960 --> 01:16:35.200
 Das waren Freunde und Bekannte, die was geschenkt haben.

01:16:35.200 --> 01:16:43.400
 Genau, ja. Bisher haben wir Bier auch nur von Leuten, das sage ich jetzt nicht, nein, von allen möglichen Leuten haben wir schon Bier geschickt bekommen.

01:16:43.400 --> 01:16:44.320
 Aus aller Welt.

01:16:44.320 --> 01:16:50.360
 Vielen Dank nochmal an alle Bierspender bislang. Es waren bisher zwei.

01:16:52.400 --> 01:16:54.320
 Zwei plus N.

01:16:54.320 --> 01:16:56.880
 Bierspender.

01:16:56.880 --> 01:16:59.660
 Ihr empfehlt uns weiter.

01:16:59.660 --> 01:17:03.180
 Ihr bewertet uns bei Podcastportalen, zum Beispiel bei iTunes.

01:17:03.180 --> 01:17:04.580
 Das hilft uns auf jeden Fall sehr weiter.

01:17:04.580 --> 01:17:06.380
 Auch gerne mit Kommentaren.

01:17:06.380 --> 01:17:08.520
 Ich habe da vor kurzem einen gelesen, den ich sehr nett fand.

01:17:08.520 --> 01:17:10.120
 Das finde ich immer schön.

01:17:10.120 --> 01:17:15.000
 Und das hilft uns auch, uns weiter zu verbreiten und verbreitern.

01:17:15.000 --> 01:17:16.940
 Dass wir immer breiter werden.

01:17:16.940 --> 01:17:21.420
 Ich dachte, das ist der Sinn der Sendung.

01:17:21.420 --> 01:17:22.100
 Genau.

01:17:22.400 --> 01:17:27.520
 Und jetzt ist vielleicht der Moment wirklich, wo wir jetzt einfach sagen, tschüss, bis zum nächsten Mal.

01:17:27.520 --> 01:17:29.160
 Gehabt euch wohl, bleibt uns gewogen.

01:17:29.160 --> 01:17:30.760
 Und gute Nacht.

01:17:30.760 --> 01:17:31.320
 Und bleibt gesund.

01:17:31.320 --> 01:17:32.900
 Bye bye.

01:17:32.900 --> 01:17:33.500
 Ciao.

01:17:33.500 --> 01:17:35.460
 Tschüss.

01:17:35.460 --> 01:17:37.920
 Das ist immer das letzte Wort, der Mensch.

01:17:37.920 --> 01:17:38.540
 Ja.

01:17:42.540 --> 01:18:01.080
 Das ist immer das letzte Wort, der Mensch.