Wo wir sind, ist vorne, Folge 17. Heute geht's um Template Literals.
Herzlich willkommen bei Wo wir sind, ist vorne.
Frontend Fakten Frotzelein.
Der Late Night Frontend Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.
Hallo liebe Frontend... Ne, ich kann's nicht sagen.
Das, was in meinem Kopf war, war gerade nicht tauglich für diese Sendung, trotz dass wir eine Late Night Talkshow sind.
Jetzt kriegen wir wieder böse Zuschriften.
Sonst kriegen wir wieder böse Zuschriften, genau.
Herzlich willkommen zu Wo wir sind, ist vorne.
Und ich möchte jetzt direkt beginnen mit Bier, weil wir haben wieder Bier zugeschickt bekommen.
Juhu.
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.
Ich hab sie nämlich abgefüllt.
Ja, ja, du hast sie abgefüllt, ja.
Oh, hat man das gehört?
Das hat gezwitscht.
Ich bin ja mal gespannt, ob die Kohlensäure noch vorhanden ist nach dem Umfüllen.
Und zwar haben wir zwei Biere geschickt bekommen, äh, von, von, äh, einem Hörer.
Und, äh, wir fangen jetzt mal an, wir haben ein helles und ein IPA und wir fangen mal an mit dem IPA.
So, ich, äh, schenke mal ein, vielleicht hört man das auch ein bisschen.
Ich trinke es aus der Flasche.
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?
Nach Genitalien oder was?
Wie hat denn ein IPA zu riechen?
Nicht STD, sondern IPA.
Also so ein bisschen wie so ein, wie so ein Killcanny oder, äh.
Bringst du es aus der Flasche?
Ja, darf ich nicht.
Doch, natürlich.
Ich kann mir auch ein Bierglas holen.
Nee, nee, du darfst es auch gerne aus der, es ist nur witzig, weil ich sehe jetzt halt gerade, wie ihr es trinkt.
Ja, es sieht aus wie Marte, also es sieht halt aus wie Marte, ja.
Es sieht tatsächlich, nee, es sieht aus wie Marte Eistee, würde ich sagen.
Marte Eistee, ja.
Weil der ist ein bisschen dunkler.
Aber jetzt musst du mal erklären, was, was für ein Brauhaus, wie hieß das?
Rüsselsheimer Brauhaus.
So, weil auf dem Screenshot von deiner Flasche auf Twitter, auf unserem Account, da ist nämlich, da steht nämlich.
Achso, ja, da ist ein Aufkleber, ja stimmt, da ist ein Sticker drauf, da steht drauf, das Brauhaus.
Und zwar von Hauptschule Rhein-Main.
Ich habe da mal, ich habe da schon mal recherchiert, es ist wohl die Hochschule Rhein-Main eigentlich.
Was hat es denn damit auf sich?
Ja, das ist gesponsert.
Von der Hochschule.
Ich dachte mir, das kann man halt mal, also wir kriegen ja immer gerne Bier geschickt.
Das ist ja jetzt auch nicht zum ersten Mal, das dürft ihr auch gerne machen.
Die Adressen stehen bei uns im Impressum, die, ja, und das ist jetzt uns gesponsert worden und wir trinken das jetzt.
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.
Also andere große Brauereien würde ich jetzt nicht erwähnen, habe ich ja schon öfter mal gesagt, aber hier so was Kleines.
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.
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.
Dann lass uns doch mal anstoßen, virtuell.
Ja, zum Wohl.
Oh ja, oh ja.
Und sehr süffig.
Ich finde es, ja, es ist mild, es ist so, wie ich es mag.
Karamellnoten ein bisschen.
Ein bisschen wenig Kuhlsäure tatsächlich, wahrscheinlich durchs Umfüllen, aber.
Genau, das habe ich gerade auch gedacht.
Es hat auch wenig geschäumt beim Einschenken.
Es kann sein, dass es durchs Umfüllen, also, ja, die Flasche war auch,
weil es relativ, es hat stark geschäumt beim Umfüllen.
Es kann sein, dass da einiges verloren gegangen ist.
Ja.
Ja, okay.
Gut, bevor wir zum Bier-Sommelier-Podcast werden.
Ja, aber das wäre unser, vielleicht unser, unser zweites Podcast.
Wo wir, wo wir saufen, ist vorne.
Ja, wir haben vorhin schon gesagt, wir wissen nicht genau, also, wo wir sind, ist vorne.
Das wissen wir schon, aber wir wissen gar nicht, wo ihr seid.
Ihr könnt uns ja mal in die Kommentare schreiben, wo ihr seid.
Ich drücke einfach, wenn es zu viel wird, drücke ich das Knöpfchen.
Wir können wieder nacheinander.
Ich habe nämlich zwei Sachen, dann fange ich an.
Du bist in der Mitte und ich bin dann am Ende.
Ja, ich habe auch so anderthalb Sachen.
Bei mir ist nicht so viel passiert.
Okay, dann fange ich jetzt.
Gerne.
Ich fange mal an.
Ich habe jetzt ein Mac.
Viele, ja, ich glaube, als wir mit dem Gerrit gesprochen haben, ich weiß gar nicht, ob das,
also das war die Typografie-Folge, ich weiß gar nicht, was im Vorgespräch war oder während
der Folge, wo es dann so darum ging, ja, wie ihr nutzt gar keine Macs und so.
Ich bin jetzt auch unter die Mac-User gegangen, also eins meiner Geräte.
Und ich habe ein bisschen zu kämpfen gehabt, also es ist an sich echt schönes Gerät, macht
Spaß, aber ich habe sehr zu kämpfen gehabt, weil ich habe jetzt hier irgendwie 20 Jahre
Muscle-Memory-Shortcuts und es ist ganz schön schwer, da umzusteigen, weil viele Sachen
auf dem Mac einfach anders funktionieren.
Die funktionieren zwar grob so ähnlich und es gibt auch so ziemlich jede Standard-Funktionalität,
keine Ahnung, was macht man ganz oft?
Der Klassiker ist doch, E-Mail-Adresse eingeben wollen und dabei das Fenster schließen, oder?
Wenn man als Windows-User auf der Mac-Tastatur arbeitet.
Fenster schließen ist, glaube ich, war das doch, war doch hier mit.
Das weiß ich gar nicht.
Es wäre dann, nee, das ist aber Alt-GR, was man drückt und das ist nicht Apfel auf dem
Mac.
Also mir ist das jedenfalls irgendwie passiert immer, dass ich das Fenster geschlossen habe,
statt die Adresse einzugehen.
Das kann sein.
Ich habe jetzt, also ich habe eine Weile jetzt, zwei Wochen oder so versucht, damit klar zu
kommen und zu sagen, okay, ich lerne das jetzt.
Mein Problem ist aber, dass ich halt nebenher auch noch ein Windows und Linux benutze momentan
und es ist wahnsinnig schwer, hin und her zu switchen.
Und jetzt, heute habe ich gesagt, nee, jetzt reicht's.
Ich breche mir hier einen ab.
Dann habe ich erst versucht, so im Mac intern Tasten auszutauschen.
Man kann nämlich dann sagen, ja, wenn du jetzt hier die Apfeltaste hast, denn das ist ja
eigentlich ja diese, wie hat ein Kollege gesagt?
Egal.
Also die frühere Apfeltaste mit diesem komischen Symbol da drauf.
Man kann die auch tauschen gegen eine andere und dann sagen, okay, das ist jetzt irgendwie dieselbe
wie Control oder sowas.
Ich glaube, das ist die Control-Taste.
Ja, also dass es dieselbe Taste ist wie dann Steuerung.
Oder das einfach tauschen.
Das war jetzt gerade verwirrend.
Macht nichts.
Das hat mir ein bisschen weitergeholfen, weil ich dann plötzlich die Links-Außen-Taste
wieder drücken konnte.
Aber irgendwie hat es dann doch nicht ausgereicht, weil an vielen verschiedenen Stellen, gerade
wenn man irgendwie so mit der Tastatur Text markiert oder so, mit den Pfeiltasten und halt
auf dem PC, also sowohl unter Linux, unter den Linuxen, die ich benutzt habe, als auch unter
Windows, machst du ja Steuerung, Shift und dann Pfeiltasten links oder rechts, um dann irgendwie
was auszuwählen.
Und das ist halt eine komplett andere Geschichte auf dem Mac.
Da machst du nämlich, glaube ich, Shift und diese Alt-Taste da, also diese Option-Taste,
ich glaube, und dann.
Und ich habe mir einen abgebrochen, ständig mit jedem Shortcut.
Und auch der Finder, sowas wie der Explorer, funktioniert ganz anders, hat ganz andere Shortcuts.
Zum Beispiel bin ich es total gewöhnt, dass ich mit Backspace irgendwie eine Ordnerebene
nach oben komme.
Das geht da einfach nicht.
Ich war es gewöhnt, dass es eine Delete-Taste gibt, mit der ich irgendwas löschen kann.
Das hat da irgendwie auch nicht so richtig funktioniert.
Und dann fange nicht an, mit Klammern zu tippen.
Irgendwie, weil die geschweiften und die eckigen Klammern sind zum Beispiel,
gar nicht auf der Tastatur von dem MacBook drauf.
Das heißt, du musst wissen, wo die sind.
Und ich habe jetzt halt hier aber eine Windows-Tastatur, wo die halt draufgedruckt sind.
Aber halt an einer anderen Stelle, als sie dann da wären.
Und ich bin durchgedreht und dann habe ich gesagt, so jetzt reicht es.
Ich suche jetzt mal, ob es irgendwie was gibt, wie ich meine alten Shortcuts wieder zurück zum Mac bringen kann.
Jetzt kann man sagen, okay, lern halt mal was Neues.
Aber wie gesagt, ich habe mehrere Systeme im Einsatz.
20 Jahre Muscle-Memory auf diesem System.
Ich glaube, ich bin zu alt und zu wehre, um davor nochmal wegzukommen.
So, der langen Rede.
Kurzer Sinn.
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.
Also, ich kann tatsächlich so einfache Sachen machen wie, diese Taste soll jetzt diese sein.
Also, ich kann theoretisch machen, wenn ich ein B drücke, kommt ein A, so was ganz Einfaches.
Oder, keine Ahnung, Control, Windows-Taste und so weiter kann ich irgendwie so belegen, wie ich will.
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.
Also, zum Beispiel, dass ich F5 drücke und der Browser refresht sich.
Das ist zum Beispiel in Safari normalerweise Control-R.
Und Steuerung R funktioniert ja auch unter Windows.
Aber wenn man es gewohnt ist, dass man F5 drückt, klar.
Oder der Klassiker, eine Datei umbenennen mit F2.
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.
Ja, und wie öffnest du es dann mit der Tastatur?
Ich glaube, es ist Control-O für Open.
Okay.
Also, es funktioniert, ich will nicht sagen, es ist schlecht, es funktioniert nur einfach komplett anders, als ich es gewöhnte.
Es ist gewöhnungssache einfach, ja.
Und ich habe jetzt beschlossen, ich gewöhne mich da nicht mehr dran, sondern ich nutze ein Tool.
Und das ist tatsächlich auch kostenlos.
Ich habe jetzt schon lange darüber geredet, aber gar nicht gesagt, wie es heißt.
Es ist auch kostenlos.
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.
Und da gibt es schon, ich muss im Prinzip nur so ein paar Konfigurationen reinziehen und dann funktionieren 90 Prozent der Shortcuts.
Sogar das Add funktioniert wieder so, wie es soll.
Ja, und das Tool heißt Carabiner, Moment, ich, Carabiner Elements.
Und es ist Open Source.
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.
Sehr cool.
Es war einfach ein sehr gutes Gefühl.
Und super, es ist kostenlos und man kann es einfach so verwenden.
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.
Verdingst du dir auch die fertigen Konfigurationen?
Weil ich glaube, der Use Case als Windows-Umsteiger, das nutzen zu wollen, ist, glaube ich, relativ groß.
Ja, das mache ich noch.
Das packst du in die Shownotes.
Sehr gut.
Das packe ich noch in die Shownotes, genau.
Ja, damit wäre ich mit meinem ersten Thema am Ende und du dürftest.
Juhu.
Ja, bei mir war gar nicht so viel die letzten zwei Wochen seit der letzten Sendung.
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.
Unter anderem habe ich das Print-Projekt abgeschlossen, von dem ich in Folge 13 kurz berichtet habe.
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.
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.
Aber es hat gut funktioniert.
Und ich bin trotzdem froh, das nicht als Hauptgeschäft machen zu müssen.
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.
Und ansonsten, über OpenType.js habe ich die letzten beiden Folgen, glaube ich, auch jeweils in der Retro berichtet.
Da sind meine Pull-Requests jetzt gemerged worden, letztes Wochenende.
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.
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.
Das sind die Chaining Contextual Substitutions.
Wer da jetzt nur Bahnhof versteht in Folge 14 unserer Typo-Folge, gehen wir da so ein bisschen am Rande rein.
Ist jetzt eher eigentlich auch für die Leute, die das kennen und die wissen, was OpenType.js macht.
Und dass man jetzt in Zukunft mit OpenType.js eben auch Fonts schreiben kann mit Contextual Alternates zum Beispiel.
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.
Da habe ich den Entwickler schon angeschrieben, aber leider noch keine Reaktion erhalten.
Bin ich mal gespannt, wie schnell das eventuell gehen wird oder auch nicht.
Ja, das war es eigentlich schon von mir heute zur Retro. Heute mal ganz kurz und knackig.
Ja, Mensch, dann kann ich ja noch ein bisschen labern. Aber das Zweite ist bei mir auch relativ kurz.
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,
hat ein Proposal eingebracht und hat gesagt, sie wollen jetzt tatsächlich mal ein Prototype für Container-Queries einbauen.
Ach.
Ja.
Container-Queries, ja, kurz, welche Folge war das?
Dass wir hier immer Cross-Reference machen können, die Leute da drauf schicken.
Eine der CSS-Feature-Folgen.
Genau, ich glaube, es war sogar Teil 2, das war dann Folge Nummer 11.
11, okay.
Genau, ja, also Container-Queries war Folge Nummer 11, aber das war unsere Doppelfolge zum Thema Wünsch dir was an CSS-Features.
Genau, da kann man mal reinhören. Da reden wir ein bisschen detaillierter drüber.
Also so ganz, so ein bisschen ins Detail noch gegangen, Container-Queries, nochmal ganz kurz, was es überhaupt ist.
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.
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.
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.
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.
Und dann kannst du da reinschreiben, was du halt, wie es sich verhalten soll in einem bestimmten Fall.
Ja, ich bin echt gespannt.
Auch wie schnell die anderen Browser vielleicht dann nachziehen werden.
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?
Echo, da gibt es ein Proposal, aber auch noch kein Signal, dass irgendwas passiert.
WebKit, naja gut, ich habe fast schon gedacht, dass da erstmal nichts passiert.
Web Developers positive, C-Motivation, okay.
Ja, sehr gespannt, also wäre auf jeden Fall ein sehr feines Feature.
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.
Wahrscheinlich dann hinter einem Flag erstmal und dann ...
Allerdings würde es mich nicht wundern, ich weiß es nicht, ich verfolge die Standorten.
Standardisierungsprozesse selten.
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.
Weil alle feststellen, ach, das ist ja echt ganz cool.
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.
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.
Nee, das funktioniert, los geht's, Feuer.
Ja, damit sind wir mit der Retro schon durch, weil, ja, also ich hab das, ja.
Heute sind wir heute schnell.
Ja, bam, bam, zack, zack.
Und weiter geht's.
Man wird ja gar nicht meinen, dass das meine Stimme ist, Entschuldigung.
Ich klinge manchmal so.
Special Effects.
Jo, Property der Woche, wir waren sehr CSS-lastig, glaube ich, sowohl themenmäßig als auch mit den Properties immer.
Gibt's heute mal wieder was JavaScript-mäßiges und zwar Navigator.sendbeacon.
Wo braucht man das? Folgende Situation.
Ich will beim Schließen des Tabs noch eine Aktion ausführen, schnell.
Ja, noch einen Request zum Server schicken, zum Beispiel irgendwelche Daten speichern oder die Session beenden oder irgendwie ein Tracking hinschicken.
Der User hat jetzt die Seite verlassen.
Und bisher hat man das so gelöst, dass man das Unload-Event mit einem synchronen XML-HTTP-Request ausgestattet hat, das Callback.
Und das führt natürlich dazu, dass solange dieses synchrone Request läuft, alles einfriert.
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.
Und man merkt halt einfach, es friert vielleicht sogar das Tab ein, also eigentlich keine schöne Lösung.
Und an die Stelle tritt jetzt eben Navigator.sendbeacon.
Dem übergebe ich eine URL und Daten.
Und diese Daten werden dann asynchron zum Server gesendet, selbst wenn die Seite schon geschlossen wurde.
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.
Und das macht man nicht in dem Unload-Event oder Before-Unload, sondern das Send-Beacon ist einzusetzen im Visibility-Change-Event.
Und das Visibility-Change-Event, das triggert zum Beispiel auch, wenn ich einen Tab in den Hintergrund schalte.
Also wenn ich das Tab wechsle, dann triggert das einmal und wenn ich wieder hinwechsle zu dem Tab, triggert das auch.
Und über die Visibility-AP kann ich eben auch abfragen, war ich denn vorher visible oder nicht und kann dann entsprechend darauf reagieren.
Ja und das klingt erstmal ganz gut und was noch zu sagen ist, die übermittelten Daten, die sind restriktiert.
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.
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.
Also Chrome beispielsweise erlaubt 64 Kilobyte, ist aber eigentlich schon ausreichend, um da irgendwie ein bisschen Text hinzuschicken an den Server.
Was wäre denn so ein Use Case? Wofür brauche ich das denn?
Ja, Use Case, da habe ich eigentlich schon oben gesagt Tracking.
Also wenn ich tracken will, wie lange hält sich ein User auf der Seite auf?
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.
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.
Dann kann ich sagen, wenn der User den Browser schließt, das Tab schließt, dann ist der User offline.
Sowas zum Beispiel würde mir jetzt spontan einfallen.
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.
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.
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.
Von daher tatsächlich für solche Sachen, Formular, schnell speichern oder sowas, reicht das durchaus aus.
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.
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.
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.
Ja, ja, stimmt.
Genau.
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.
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.
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.
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.
Und dann angeblich kann man dieses Navigator.sendbeacon auch in Page-Hide im Callback benutzen, tut es aber nicht.
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.
Also Server-Seite, ich glaube.
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.
Aber ist halt nicht.
Und jetzt, ich habe dann in das Bug-Ticket aber jetzt auch nochmal reinkommentiert, dass es nicht funktioniert.
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.
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.
Was sie aber nicht gemacht haben an der Stelle, ist die wirklich alles dann auch als App anzubieten.
Also sowas wie der Safari ist ja fest ans Betriebssystem getackert.
Der Safari kann nicht geupdatet werden auf einem iOS-Device ohne ein iOS-Update, was für mich überhaupt gar keinen Sinn ergibt.
Warum ist das so?
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.
Aber auf iOS geht das irgendwie nicht, das blicke ich nicht, weil das macht ja Android auch so.
Also der Chrome-Browser auf Android oder was auch immer der Standard-Browser ist, hängt ja auch nicht am Betriebssystem.
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.
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.
Ja, selbst irgendwelche, also die Play-Services, das ist ja alles extra updatebar.
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.
Jetzt hat man schon die Evergreen-Browser und das Safari spielt nicht mit.
So ein Mist.
Gut, ja, das war es eigentlich auch schon.
Ja.
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.
Kann man sich anschauen, wenn man will, verdient in den Shownotes.
Sollen wir eigentlich, äh, sollen wir eigentlich einen Spam-Spot machen?
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.
Ä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.
Welchen nehmen wir denn da? Und den spreche ich dann einfach live ein. So, und du machst, du machst Intro und Outro oder so.
Okay.
Der Spam-Spot.
Was, wir sind doch nicht so weit.
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.
Mach mal nochmal Intro, bitte.
Der Spam-Spot.
Emotionaler Stress und zu wenig Bewegung können die Härte im Bett auch in den blühenden Jahren schwächeln.
Qualitätszertifizierung und Prüfung, schnelle Wirkungseffekt, zertifiziert und qualitativ, anonymer Versand.
Sie sind sicher nicht alleine, denn über 70 Prozent der Männer in Deutschland haben genau heute die gleichen Ärgernisse.
Tidin.
Zu Risiken und Nebenwirkungen lesen Sie die Packungsbeilage oder fragen Sie Ihren Systemadministrator.
Bäh, oder?
Wow.
So spontan sind wir.
Ja, okay, gut.
Ist dein Bett auch zu hart, Moritz?
Mein Bett ist auch zu hart.
Ja, schnelle Wirkungseffekt.
Und kostenlose Versand.
Ich glaube, das müssen wir nächstes Mal nochmal besser machen.
Hier ist WWS IV mit dem Tagesthema.
Stille, das Schweigen im Wald, wir gestikulieren uns hier zu über die Webcam.
Ja.
Moritz hat sein Bier schon leer, ich muss schneller trinken.
Nee, es ist nicht leer, ich wollte nur das andere ausprobieren.
Ach so.
Das Helle, das sind beide jetzt parallel.
Das sind beide jetzt parallel.
Nee, du kannst einfach schon mal anfangen.
Ich bin in fünf Sekunden wieder da, fang einfach schon mal an.
Alles klar.
Und tschüss.
Geht das?
Ja, Thema heute, Template Literals und im Speziellen Tagged Template Literals.
Sind auch bekannt als Template Strings, so war das auch auf Englisch in der Spezifikation
ursprünglich benannt und dann später unbenannt zu Template Literals, aber man hört Template
Strings tatsächlich noch recht häufig.
Und das ist ein ES2015 Feature, das ich inzwischen eigentlich sogar sehr häufig verwende, auch direkt
in Webprojekten, die jetzt nicht auf Babel setzen in ihrer Toolchain.
Aber selbst in Projekten, die Babel in der Toolchain haben, also Babel für Einsteiger,
das transpiliert neuere JavaScript Features in Code, der auch in älteren Browsern oder
älteren Laufzeitumgebungen ausführbar ist.
Nur, dass wir da niemanden außen vor lassen.
Und selbst in solchen Projekten sieht man aber recht häufig noch, dass da Strings mit Pluszeichen
aneinander gehängt werden zum Beispiel.
Ja, großer Spaß.
Ja, sehr übersichtlich auch.
Und dabei ist das Ganze schon seit Edge 13 sogar nutzbar.
Und ja, worum handelt es sich?
Es geht darum, dass Strings nicht in einfache oder doppelte Anführungsstriche geschrieben
werden, sondern in Backticks.
Das ist dieser Akzent Gravis aus dem Französischen von links oben nach rechts unten, den man auf
der Tastatur mit dem entsprechenden Zeichen und einem Leerzeichen erstellt.
Und was erlaubt mir das im Vergleich zu normalen Single- oder Double-Quote-Strings?
Ich kann darin Zeilenumbrüche verwenden, ohne dass ich irgendwie das unterbrechen muss.
Und ich kann Platzhalter drin verwenden nach dem Format Dollar und dann in geschweiften Klammern
eine Expression.
Und ich sage deswegen Expression, weil es geht nicht nur um Variablen.
Also der klassischste Fall ist, ich schreibe da eine Variable rein und die wird dann entsprechend
in dem String ausgegeben.
Aber ich kann darin also auch Berechnungen ausführen oder Funktionsaufrufe und muss, spare mir
dann halt dieses Unterbrechen vom String und mit Plus und Variablen Name und Plus und vielleicht
noch eine Klammer und so weiter.
Das heißt, es ist einfach syntaktischer Zucker erst mal.
Aber es geht darüber noch hinaus.
Also wie gesagt, ich habe schon gesagt, Expressions kann ich da drin benutzen und alles Mögliche.
Und ich kann die auch verschachteln.
Also ich kann dann wieder ein Template Literal in diesem Platzhalter machen und da kann man dann
recht übersichtlich doch recht komplexe Zusammenstellungen von Templates machen, die sich dann mittels
Variablen oder Funktionen konfigurieren lassen.
Wie ist es bei dir?
Nutzst du das oder nicht?
Ja, ich nutze es selten, aber es hat auf jeden Fall komplett mein String Concatenation mit
Plus und so weiter ersetzt.
Also wenn ich einen String bauen will, dann benutze ich eigentlich nur noch immer das.
Und ich finde auch die Multiline-Geschichte mit dem Dreifachback-Tick, oder?
Ist das Dreifach oder Doppelt?
Dreifachback-Tick.
Du machst einfach einen Line-Break.
Und solange du keinen Back-Tick hast, der das schließt, dann …
Aber da gibt es doch eine Schreibweise mit mehrfachen.
Ich glaube, es sind drei.
Oder bin ich jetzt …
Ich glaube, du bist bei Markdown.
Du bist bei Markdown.
Bin ich bei Markdown gelandet?
Wirklich?
Ja, echt?
Also Dreifachback-Tick in Markdown macht einen Code-Block, der …
Ja, es gibt aber auch einfach Back-Tick in Markdown.
Ja, dann bin ich gerade in Markdown gelandet.
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.
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.
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.
Und wenn man sich das einmal angewöhnt hat, dann macht man das auch immer.
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.
Oder halt auch eine Webseite hat, die da drauf laufen muss.
Ich bin inzwischen so weit, dass ich sage, pfff, IE11, nö, nicht mit mir.
Also außer der Kunde will das natürlich explizit oder es ergibt sich einfach aus dem Kontext, dass das benötigt wird.
Genau, dann jetzt im speziellen Tagged-Template-Literals.
Ach so, das gibt es ja gar nicht, ich habe es gerade nochmal nachgeschlagen, sorry.
Also mit den drei Backpicks war totale Käse, was ich gerade erzählt habe.
Das ist tatsächlich aus Markdown und ich kann auch mit einem Backtick Zeilenumbrüche und alles reinschreiben.
Ja, nur noch mal zur Korrektur.
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.
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.
Und es ist eigentlich ganz einfach, vor dem ersten Backtick, vor dem öffnenden Backtick von so einem Template-Literal kann eine Expression stehen.
In der Regel ist das ein Funktionsname einfach.
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.
Aber der kann auch Hurtz heißen, ja, oder irgendwie, also jeder beliebige Funktionsname oder vielleicht.
Die Aussprache ist wichtig.
Oder vielleicht auch eine Funktion, die wiederum ein Callback zurückgibt oder was auch immer.
Und dann schreibe ich hinten dran eben diesen Template-Literal-String.
Und das ist, wenn man das das erste Mal sieht, echt verwirrend.
Also wenn man das nicht weiß, was das ist, dann denkt man so, das ist doch kein valides JavaScript.
Ist es aber doch.
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.
Das heißt, die sind eventuell unterbrochen durch die Platzhalter.
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.
Und als weitere Argumente erhalte ich dann so viele Argumente, wie es Platzhalter gibt in dem String.
Wobei aber zu sagen ist, also die Expressions, die da drin sein können in den Platzhaltern, die sind bereits evaluiert.
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.
Habe ich richtig gerechnet?
Ja, richtig gerechnet, aber das war tatsächlich was, was ich nicht wusste, dass das schon evaluiert ankommt.
Genau, das wird evaluiert.
Ansonsten würde ich eine Expression zurückbekommen, müsste die dann wieder selber weiterverarbeiten.
Also genau, die kommt evaluiert zurück.
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.
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.
Also das Template Literal in der Variablen drin ist und ich die dann wiederum nutze als Parameter für diese Callback-Funktion.
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.
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.
Entweder weiß ich also, wie viele es gibt und wenn ich das nicht tue, dann kann ich das magische Arguments-Keyword benutzen.
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.
Wie gesagt, in dem Code-Pen sieht man das ganz gut, habe ich glaube ich gar nicht verlinkt, aber siehst du jetzt leider nicht.
Ja, macht nichts.
Genau, oder ich nutze den Spread-Operator, das ist auch ein ES, ich weiß gar nicht, das war ein ES6, glaube ich auch.
Ich glaube es ist ein ES6.
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.
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?
Mit Arguments auch, ja.
Arguments ist auch ein Array, oder?
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.
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.
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.
Ich glaube, man kann sich das absolut nicht vorstellen, was wir hier gerade erzählen.
Schaut euch das CodePen an.
Genau, ich will das auch sehen.
Ich schicke es ja schnell.
Ja, nee, muss auch jetzt gar nicht, muss auch gar nicht schnell gehen jetzt, passt schon.
Genau, so, muss ich erstmal gucken, wo waren wir denn jetzt vor lauter abstraktem Gerede.
Wir waren bei dem Tag Template Literal und dem Spread Operator, dass da die einzelnen Argumente mit reingegeben werden.
Genau, ja, das wäre damit eigentlich abgedeckt.
Es ist jetzt noch sehr abstrakt, es kommen nachher, kommen tatsächlich noch Beispiele, für was man das nutzen kann.
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.
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.
So, dass ich quasi das Closure per Template Literal konfiguriere und später mit Argumenten aufrufen kann.
Verrückt, ne?
Crazy.
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.
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.
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.
Aber es gibt einige Beispiele, wo sich das ganz schön umsetzen lässt.
Es ist, glaube ich, oft tatsächlich eher so ein Tactical Sugar, wie auch mit den Template Literals an sich.
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.
Also eine Sache ist zum Beispiel automatisches Escapen der Platzhalter.
Da hatten wir es vorhin im Vorgespräch auch schon zum Thema Sicherheit so ein bisschen drüber.
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.
Also der Username aus einem gespeicherten Profil zum Beispiel.
Das ist also ein Anwendungsfall, aber auch Internationalisierung.
Also man kennt das vielleicht von Frameworks zum Beispiel oder auch von WordPress, dass man alle Strings erstmal in Englisch hat.
Also meistens ist es Englisch als internationale Sprache, die als Ausgangssprache dient.
Und da sind dann vielleicht auch Platzhalter drin für irgendwelche Zahlen oder für den Benutzernamen zum Beispiel.
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.
Und auch das ist eben möglich, dass ich zum Beispiel eine i18n, eine Tag-Funktion habe, die so heißt.
Und dann schreibe ich einfach i18n und schreibe in Backticks hinten dran einen String.
Und der wird an die Funktion übergeben und automatisch übersetzt.
Aber eben halt auch automatisch mit den ersetzten Platzhaltern, die ich da reinschreibe.
Anderer Anwendungsfall, CSS in JS.
Wir müssen da echt mal eine Folge drüber machen.
Wir haben es jetzt glaube ich drei Folgen miteinander schon erwähnt.
Da gibt es zum Beispiel die Library-Styled-Components.
Die, ja, gehen wir jetzt vielleicht nicht zu tief drauf ein, was das macht, die mir quasi grob gesagt CSS bastelt um Components herum.
Oder die mir Components-Style, sagen wir es jetzt mal ganz vereinfacht so.
GraphQL, der REST-Killer oder auch nicht, ist so eine Geschichte.
GraphQL, sagst du, kennst du?
Ja, ist das nicht von Facebook?
Ja, genau.
Ich glaube, in dem Zusammenhang habe ich es mit der Facebook-API schon mal benutzt, aber tief bin ich da nicht eingestiegen.
Ne, gehen wir jetzt auch nicht tief drauf ein.
REST-Killer war jetzt blöd dahergeschwätzt.
Das wird, glaube ich, REST nicht komplett ersetzen.
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.
Was weiß ich?
Und muss dann für alles, was ich an Daten brauche, jeweils einen REST-Request an den Server schicken.
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.
Müsste aber auch mal komplett ein Thema draus machen.
Das fühlt jetzt hier zu weit.
Aber da gibt es eben auch eine Library, also ich verliege auch die ganzen Libraries, die ich hier nenne.
Da mache ich dann auch einfach GQL und in Backticks das GraphQL-Query und bekomme dann entsprechend die Daten zurück.
Und Datumsformatierung war auch noch so ein Ding.
Das ist ja mit JavaScript, ich hatte das auch gerade erst letztens wieder bei einem Projekt.
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.
Und so, da gab es Moment.js war da so eine große Library, die viel eingesetzt wurde.
Die ist aber inzwischen deprecated, weil es browserintern, ja, die wird nicht mehr weiter gepflegt.
Warte mal, hatten wir das nicht schon mal, die browserinternere Geschichte?
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.
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.
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.
Also eben genau sowas wie HTML sicher machen, dass das escaped wird und so Geschichten.
Da reden wir noch drüber gleich.
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.
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.
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.
Genau, und da gibt es drei Plugins, mit denen man entsprechend das Code Highlighting aktivieren kann für Template Literals.
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.
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.
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.
Oder auch eine andere Stelle, wo beispielsweise irgendwie Username zum Beispiel oder diverse User Credentials dargestellt werden soll.
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.
Ja, Mensch, hallo, willkommen zurück.
Habe ich dich jetzt auch mal aus dem Konzept gebracht?
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.
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.
Wenn du deine Strings zusammenbaust, sondern es kommt auf die Methode an, mit der du das HTML wieder einfügst in die Seite.
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.
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.
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.
Und das Kapitel dazu habe ich mir nochmal angeschaut, in Vorbereitung auf die Sendung.
Und das letzte Kapitel von den Template-Strings, beziehungsweise Template Literals, ist Sanitizing User Data.
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?
Ja, wenn es nur das ist.
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.
Aber die richtig bösen Jungs, die zeigen uns ja nicht, dass sie Mist gemacht haben.
Oder es gibt bestimmt auch sehr böse Mädels, wollte ich an der Stelle sagen.
Sondern die machen dann Tracking, die verändern Sachen auf der Seite, die führen Daten ab irgendwo hin.
Keine Ahnung, das will man gar nicht wissen, was damit alles passiert.
Also das will man auf jeden Fall verhindern.
Das heißt, wenn man HTML mit User-Generated-Content hat, muss man immer aufpassen, was passiert damit, beziehungsweise das Sanitizen.
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.
So, aber wie gesagt, hat eigentlich mit Template-Tituals ...
Da haben wir uns schon ein bisschen gestritten, in Anführungsstrichen, wie das aber aussehen könnte.
Und ich bin der Meinung, dass das auch zu abstrakt ist.
Also, dass der Browser das gar nicht wissen kann, ob ich denn vielleicht tatsächlich da drin was evaluiert haben will oder auch nicht.
Und ich weiß nicht, ob man das dem User abnehmen sollte und ob man das überhaupt kann, ohne dann wieder was kaputt zu machen.
Also, was jetzt Wesbos' Antwort war.
Wesbos' Antwort war in dem Kurs, nimm die Library Dom Purify.
Die Library Dom Purify ist tatsächlich von Sicherheitsforschern erstellt und zwar von Q53.
Vielleicht hat das der eine oder andere schon mal gehört, das ist so eine Pentesting-Firma.
Ich habe auch schon mal mit dem, also ich habe auch schon mal ein Seminar besucht, wo der ...
Moment, ich muss gerade überlegen.
Ich war schon auf einer Konferenz, wo, glaube ich, der Chef von denen einen Vortrag gehalten hat.
Ich habe auch schon mal ein Seminar bei ihm besucht.
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.
Das ist wirklich, also, es ist eine große Freude, da zuzuschauen, wie die alles kaputt machen, so security-technisch.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Hast du das Helle eigentlich schon, Probit?
Habe ich. Hat mir irgendwie, hat so eine Schwefel-Note.
Ich finde es schmeckt, ja das stimmt, und ich finde es schmeckt irgendwie ein bisschen nach Banane.
Das haben ja Weizen oft so an sich, aber ich finde es bei dem ein bisschen extrem.
Also ich bin oft nicht so der ...
Ich wollte es nicht unterbrechen vorhin, aber ja, ich habe es auch beim ersten Schluck schon so, ja, da war das Dunkel immer besser.
Ich bin oft nicht so der IPA-Fan, aber in dem Fall schmeckt mir das besser.
Das Helle, finde ich, ist gewöhnungsbedürftig, aber ich habe mir gerade nochmal nachgeschenkt, ich weiß auch nicht warum.
Kommen wir nochmal zurück zum Thema.
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.
Ich höre also quasi mich selbst nicht mehr, eine Sekunde.
So, ah, perfekt.
Was ich mir da wünsche, wäre sowas ähnliches wie das Sandbox-Attribut bei iFrames.
Ich habe das gerade nochmal nachgeschlagen, wie das heißt, wo man bestimmte Dinge erlauben kann.
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.
Und das man vom iFrame aus rausnavigiert und sowas.
Und da gibt es dann eben Allow-Werte, die man in dieses Sandbox-Attribut reinschreibt, Allow-Scripts zum Beispiel.
Dann darf ich JavaScript da drin verwenden und ansonsten ist es einfach verboten.
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.
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.
Weil in den meisten Fällen, glaube ich, will man das gar nicht haben.
Also wann möchte ich denn in dem, was ich, in dem String nochmal JavaScript ausführen?
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.
Es gibt bestimmte Anwendungsfälle, aber ja, in der Regel will man es wahrscheinlich nicht, ja.
Und deswegen wäre das Default für mich am liebsten JavaScript da drin, geht einfach nicht.
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.
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.
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.
Und als ich die Überschrift gelesen habe, habe ich gedacht, jetzt, jetzt habe ich es gefunden.
Jetzt habe ich es gefunden.
Der heilige Gral.
Da, da stehen jetzt die coolen Sachen drin.
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?
Also, es sind, es sind im Moment eins, zwei, drei, vier, es sind, es sind vier Blöcke.
Der erste, das ist, das ist wahrscheinlich das sicherste, ist, wenn man DOM-Notes mit DOM-Creation-Methods baut.
Das ist das hässlichste, was es gibt.
Also, dass ich sage, äh, Document Create Element, äh, Element Set Attribute, äh, und so weiter.
Und dann das komplett zusammenbaue, aber mit diesen DOM-Methoden.
Ähm, das ist, wir haben das ein bisschen intensiver gemacht bei einem Projekt, wo ich dran arbeite.
Das kannst du, das kannst du einfach nicht mehr lesen hinterher.
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.
Das ist ja auch performance-technisch, ist es ja besser.
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.
Also, beziehungsweise bei Jackberry, äh, HTML.
Also, dann, du baust, du baust den String und machst es mit innerHTML, baust, äh, schiebst den mit innerhalb, ja, genau.
Also, das geht einfach schneller als, als die DOM-Manipulation.
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.
Mhm.
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.
So, okay, das ist Variante 1.
Variante 2 ist, finde ich, schon ein bisschen lustig eigentlich fast.
jQuery steht da. Mach's mit jQuery.
Da sieht man, der Artikel ist schon ein bisschen älter.
Gut, wobei ich ja bei jQuery HTML kann ich ja auch Script-Tags übergeben, oder nicht?
Oder wird das tatsächlich gefiltert?
Die sagen da, äh, im Prinzip ist das, dass, ist das auch DOM-Scripting, äh, Node-Add-Class, äh, Node.Text und sowas.
Also, das ist im Prinzip, sind im Prinzip nur die DOM-Scripting-Methoden von jQuery, ist es, was, was da empfohlen wird.
Also, letzten Endes ist es nur eine andere Schreibweise.
Ähm, und jQuery hatte auch nicht nur eine, äh, äh, Cross-Site-Scripting-Lücke schon in der Vergangenheit.
Also, ähm, äh, von daher weiß ich nicht.
Dann, ähm, Moment, HTML ist ja nicht, okay, dann, naja, Moment, ah, genau.
Dann kommt DOM-Purify, das empfehlen die tatsächlich.
Also, sie sagen, hey, äh, mach doch, aber jag DOM-Purify hinterher drüber, was ich gerade schon angesprochen hab.
Ä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.
Aber wenn's halt so ist, dann ist es so.
Und was ist, wenn jetzt diese Library auch noch einen Fehler hat?
Und deswegen denke ich halt, das müsste in den Browser rein.
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.
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.
Ä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.
Was, was verwenden die, Mustache?
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.
Und das wird automatisch auch escaped und wenn du es, äh, halt nicht escaped haben willst, dann musst du es anders machen.
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.
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.
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.
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.
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.
Ja, HTML-Entities. Ja, also.
Waren einfach alles in Entities um. Ja, warum, warum.
Oder HTML-Special-Chars, wenn ich eben nur, äh, Spitze-Klammer und Double-Quotes zum Beispiel umwandeln will.
Aber das würde auch theoretisch JavaScript zulassen, oder?
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.
Okay, aber wenn ich jetzt HTML ausgeben wollte, hilft mir das ja auch nicht.
Nee.
Also, so rauszufiltern. Ja, egal. Also, ich weiß nicht.
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.
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.
Wenn Westbos die nicht kennt, dann kennen wir die auch nicht.
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.
Ähm, also, der Kurs ist jetzt nicht mehr, also, ES6 ist ja jetzt auch nicht mehr das allerneuerste.
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.
Helft uns, äh, schreibt es in die Kommentare, äh, drückt die Glocken bei Twitter.
Ding, ding, ding, ding, wenn wir schon dabei sind. Äh, ja, folgt uns bei Twitter, äh, at WWSEV, ähm, hier mal kurze Zwischenwerbung.
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.
Genau, so, hab ich noch was auf meinem Zettel? Ich glaub, damit bin ich mit der Security durch.
Ja, damit sind wir mit dem Thema durch. Mensch, was ist mit uns los heute? Hier, knapp über eine Stunde.
Wir reden heute einfach sehr schnell.
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.
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.
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.
Genau eine Minute, glaube ich, ja.
Okay, ich bin schon, dann sind wir definitiv schon über eine Stunde jetzt.
Ja, aber trotzdem, also wenn man das vergleicht mit den letzten Folgen, das ist ja, das ist ja nix.
Ja, dann kommen wir jetzt, sind wir jetzt auch schon, äh, Mensch, wir hatten, weißt du, was wir heute viel zu wenig hatten?
Feuerwerk?
Wir hatten heute viel zu wenig Feuerwerk, nein, wir hatten heute viel zu wenig Applaus, auch zum Beispiel.
Für unsere treuen Stamm-Zuhörerinnen und Zuhörer.
Ja, Mensch, die sind sowieso enttäuscht, weil wir keinen Spam-Spot hatten heute.
Ja, es tut mir leid, ich hab's nicht geschafft.
Nein, nein, nein, ich bin ja mitschuld.
Du wolltest ja eigentlich einen machen, ja.
Ich wollte, ja, ich hatte Zeit und hatte dann irgendwie doch keine Zeit.
Wie das, wie das halt immer so ist, ne?
Gut, dann machen wir doch, bevor wir jetzt doch, äh, zu viel reden, einfach weiter.
Das Geiltein.
Geiltein.
Und das kommt heute von Moritz.
Ja, hast du.
Ich hasse.
Hast du gesehen, hast du gesehen, wie es, wie es heißt und kannst du dir was darunter vorstellen?
Äh, nee, noch nicht.
Soll ich mal spicken?
Äh, Edex UI.
Schon mal, schon mal gehört?
Äh, nee.
Weißt du, was das damit auf sich haben könnte?
Nee.
Ähm, ich weiß nicht, ob ich es jetzt hier aufmachen kann oder ob mir dann mein Rechner abkachelt.
Ich bin da durch Zufall, also der YouTube-Algorithmus, der schlägt einem ja manchmal, ähm, komische Sachen vor.
Ähm, und das, ich weiß gar nicht, was ich mir da vorher für ein Techie-Kram angeschaut hab.
Und dann kam halt ein Video ja hier, das ist jetzt so der geile Scheiß.
Und dann, ich klicke ja dann immer einfach so drauf, ich heiße Simple Man, ja, ich klicke dann drauf.
Ähm, und, ähm, ich weiß auch gar nicht, wie man es ausspricht, ehrlich gesagt.
Ähm, Edex, Edex UI würde ich jetzt sagen.
Edex UI, Edex UI, ich hab keine Ahnung.
Also, es ist ein kleines Edex-Groß-UI.
Und was ist das?
Ä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.
Weil, äh, eigentlich dachte ich, das ist, ähm, mehr so, mehr so ein Hacker-Dings für irgendwie Linux oder so.
Aber das scheint tatsächlich für alle größeren Betriebssysteme zu existieren.
Ähm, das ist, äh, heavily inspired from the Tron Legacy Movie, ähm, ein, wie soll ich sagen?
Es ist eine Kommandozeile in der Mitte.
Es ist also deine Kommandozeile, die du auf deinem Betriebssystem hast.
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.
Und dann drumherum lauter so fancy, äh, Animationen und es, es sieht aus wie so aus einem Hacker-Film.
Es ist so eine Oberfläche wie aus einem Hacker-Film.
Und das Verrückte daran ist, dass die Sachen, die man darin sieht, tatsächlich echt sind.
Zumindest die meisten.
Das mit dem Memory, da bin ich mir nicht so sicher.
Also da ist bei, also das, ich weiß nicht, wie ich es beschreiben soll.
Hast du dir mal einen Screenshot angeschaut?
Ja, ich schaue mir gerade die ganzen Screenshots an in dem Repository.
Es ist, es ist natürlich dunkler Hintergrund, dann in der Mitte ist dieses Terminal, wo du Sachen eintippen kannst.
Links unten gibt's so eine Liste mit File-System.
Da kannst du tatsächlich in den Ordnern rumklicken und hast dazu visuelle und Sound-Effekte.
Wirklich so, als wärst du jetzt auf dem CSI-Miami-Computer oder so, keine Ahnung.
Das ist so, das ist der feuchte Traum eines Hackers, beziehungsweise, nee, es stimmt nicht, der feuchte Traum eines Hackers sieht ganz anders aus.
Dem ist nämlich das UI scheißegal.
Der feuchte Traum eines Regisseurs, Regisseurs eines Hacker-Films.
Und dann siehst du da irgendwie, da läuft die Uhrzeit runter.
Rechts hast du so eine sich drehende Weltkugel.
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.
Das kann auch sein.
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.
Da ist eine Tastatur mit drauf.
Aber wenn du normal tippst, dann leuchten auch diese Tasten auf und da kommt natürlich ein Geräusch dazu.
Das ist natürlich Security-mäßig, wenn du irgendein Passwort eingibst, sieht natürlich jeder das Passwort.
Du fühlst dich wie der ultimative Hacker mit dem Teil.
Das ist unglaublich. Also es ist fast so geil wie Hacker-Typer, falls das jemand kennt.
Dann hackertyper.com. Also kann ich auf jeden Fall nochmal empfehlen, wenn du irgendwie vor deinen Freunden angeben willst.
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.
Aber das ist noch cooler, weil du tatsächlich was damit machen kannst.
Wie ich mir gedacht habe, ich habe mal reingeschaut in die Package-Chasen-Electron natürlich.
War eigentlich fast klar.
Ja, bei so Cross-Plattformen.
Dann stand irgendwas auf JavaScript-Basis, stand glaube ich sogar dabei.
Ich weiß nicht, ob ich mich jetzt traue, nochmal aufzumachen.
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.
Und es kommt am Anfang, rattert auch so Text über den Bildschirm.
Also es ist wirklich der Traum, der Traum eines Hacker-Filmregisseurs.
Und dann kommt hier Welcome Back, Moritz in dem Fall.
Und die Soundeffekte sind der Wahn.
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.
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.
Also, es ist quasi der coolere Taskmanager.
Den hätte ich mir bei Gelegenheit auch mal zu Gemüte führen, ja.
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.
Man muss es sich einfach angucken. Wahrscheinlich hat, wahrscheinlich greift das total meine Daten ab die ganze Zeit, während ich das benutze.
Die gehen direkt nach China oder Russland, oder?
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.
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.
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.
Und es ist ja auch inspiriert von dem Film.
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.
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.
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.
Ja, genau.
Und das ist aber oft, das ist oft ganz schlecht gemacht.
Enhance, enhance.
Ja, wenn sie irgendwelche Webseiten zeigen, die halt auch einfach, wo du halt merkst, ja, das durfte halt nicht mehr kosten als 10 Euro.
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.
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.
Ja, ja, klar.
So weit es geht.
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.
Also offenbar kommt man komplett ins System, weil ich sogar die Prozesse in Windows anzeigen kann.
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.
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.
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.
Ja, genau.
Mal nachgebaut im Browser und das find ich auch total geil. Also, also sowas, das muss ein Riesenspaß machen, sowas zu bauen.
Lass uns mal so irgendwie so, so ein, so ein, so ein Quatsch, äh, bauen.
Ein WWS-IV-Interface.
Ein WWS-IV-Interface. Das, das allerdings wird wahrscheinlich sehr merkwürdig werden, glaub ich.
Weil wir müssen ja die ganze Merkwürdigkeit der Sendung darin abbilden, das muss ja uns quasi widerspiegeln.
Das ist ein Soundboard.
Dich beim Rülpsen, zum Beispiel.
Ui, da krieg ich wieder Ärger.
Unsere, unsere Jingles.
Ja, mal gucken.
Ja, aber wenn wir, ich, wenn wir noch bei, bei Hacker-Filmen waren und so, wollte ich, wollte ich gerade noch kurz einwerfen.
Ähm, hast du gesehen, äh, äh, How to Sell Drugs Online Fast?
Nach unserer, ähm, äh, Folge 14, da hat Gerrit, ich weiß nicht, im Nachgespräch oder während der Sendung das angesprochen.
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.
Also wirklich sehr empfehlenswert.
Hast du da mal angehalten, ähm, bei, wenn man einen Computerscreen sieht, was die machen?
Weil mir ist aufgefallen, das ist, glaub ich, die erste Serie, äh, Schrägstrich Film, ähm, wo ich den Eindruck hatte, dass die,
dass die es wirklich echt haben wollten.
Also, die haben die echten Kommandozeilentools gezeigt.
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.
Also, ja, das ist echt sehr gut gemacht.
Also, da wird ja, da wird ja, da wird ja viel gehackt, da geht's ja, geht's ja viel um, äh, um Technik.
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?
Und, äh, das, also, das, was ich kannte,
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.
Also, ich glaub, man kann da, man kann da echt eine Menge lernen, tatsächlich, über die Technik.
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.
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.
Ä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.
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?
Ja, genau.
Jedenfalls, äh, sehr empfehlenswert.
Ihr habt alles, wir haben alles.
Alle haben alles.
Gut, und ich glaub, damit haben wir's dann.
Ja, ich glaub, damit haben wir auch alles.
Weil, wo wir sind, ist vorne und wo ihr seid, ist fraglich.
Fraglich.
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.
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?
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.
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.
Richtig. Deswegen würde ich sagen, wir sind durch, oder? Wir machen jetzt, ja, Verabschiedung.
Verabschiedung. Ohne, ohne Trailer.
Verabschiedung.
Genau. Das ist immer wieder gut.
Ja.
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
Am meisten am Herzen. Spenden natürlich auch gerne. Haben wir jetzt auch jedes Mal angesprochen. Ja, vielen Dank auch an alle bisherigen Spender.
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.
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.
Seid doch auch mal so cool wie die anderen 20, die mir Oliven geschickt haben.
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.
Das war wahrscheinlich nur so ein Prozent der Geschenke.
Das waren Freunde und Bekannte, die was geschenkt haben.
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.
Aus aller Welt.
Vielen Dank nochmal an alle Bierspender bislang. Es waren bisher zwei.
Zwei plus N.
Bierspender.
Ihr empfehlt uns weiter.
Ihr bewertet uns bei Podcastportalen, zum Beispiel bei iTunes.
Das hilft uns auf jeden Fall sehr weiter.
Auch gerne mit Kommentaren.
Ich habe da vor kurzem einen gelesen, den ich sehr nett fand.
Das finde ich immer schön.
Und das hilft uns auch, uns weiter zu verbreiten und verbreitern.
Dass wir immer breiter werden.
Ich dachte, das ist der Sinn der Sendung.
Genau.
Und jetzt ist vielleicht der Moment wirklich, wo wir jetzt einfach sagen, tschüss, bis zum nächsten Mal.
Gehabt euch wohl, bleibt uns gewogen.
Und gute Nacht.
Und bleibt gesund.
Bye bye.
Ciao.
Tschüss.
Das ist immer das letzte Wort, der Mensch.
Ja.
Das ist immer das letzte Wort, der Mensch.