WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: Ist das Frontend, oder kann das weg?
Publishing Date: 2020-03-15T17:00:00+01:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/ist-das-frontend-oder-kann-das-weg/

00:00:00.000 --> 00:00:19.780
 Herzlich Willkommen bei "Wo wir sind, ist vorne! Frontend-Fakten-Frotzelein!"

00:00:19.780 --> 00:00:27.040
 Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

00:00:27.040 --> 00:00:34.560
 Jetzt reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und Javascript-Jongleur Konstantin

00:00:34.560 --> 00:00:40.560
 Groß.

00:00:40.560 --> 00:00:54.080
 Hallo und herzlich Willkommen zu unserer dritten Ausgabe.

00:00:54.080 --> 00:01:03.600
 Wir haben heute eine kleine Premiere. Wir sitzen nämlich gerade jeder bei sich zu Hause und versuchen das Ganze hier per Remote-Aufnahme.

00:01:03.600 --> 00:01:11.120
 Und ich bin sehr gespannt, wie das funktioniert. Es ist jedenfalls schon mal ganz komisch, wenn man sich nicht gegenüber sitzt.

00:01:11.120 --> 00:01:20.640
 Und jeder sitzt da so, weil man sich auch ins Wort fällt. Wir haben natürlich eine kleine Latenz, bevor wir uns gegenseitig hören.

00:01:20.640 --> 00:01:26.160
 Es ist ein bisschen schwieriger. Also wundert euch nicht, wenn das Ganze heute anders abläuft, als es sonst abläuft.

00:01:26.160 --> 00:01:28.160
 Und wir sitzen hier jeder einsam mit seinem Bier.

00:01:28.160 --> 00:01:32.160
 Jeder für sich. Aber ich würde sagen, wir stoßen trotzdem mal aus der Ferne an. Prost!

00:01:32.160 --> 00:01:34.720
 Lass es dir schmecken.

00:01:34.720 --> 00:01:41.680
 Ich habe außerdem ein neues Mikro. Ich weiß nicht, ob man das gleich hört. Vielleicht macht sich das bemerkbar.

00:01:41.680 --> 00:01:50.020
 Ich hoffe, dass das Rauschen ein bisschen weniger ist und dass vor allem meine Atem- und Schmatzgeräusche sich etwas mehr in Grenzen halten, als in den ersten beiden Folgen.

00:01:50.520 --> 00:01:54.200
 Das hat mich beim Durchhören selber gestört, aber man stört sich ja sowieso an seiner eigenen Stimme.

00:01:54.200 --> 00:02:04.540
 Ja, doch, ich finde das immer ganz schrecklich. Aber deswegen höre ich es einfach auch nicht selber. Muss ich auch gar nicht, weil wir nämlich auch so schon über 400 Downloads haben.

00:02:04.540 --> 00:02:06.020
 Yay!

00:02:06.020 --> 00:02:16.760
 Doch, finde ich. Also dafür, dass wir nicht wirklich so viel Werbung gemacht haben, außer halt so auf unseren Social-Media-Kanälen, denen jetzt auch noch nicht so viele Leute folgen. Also dafür finde ich das echt gut.

00:02:16.760 --> 00:02:17.800
 Hab mich überrascht.

00:02:17.820 --> 00:02:21.280
 Da folgen schon eine ganze Menge. Also da ist schon weniges am Start.

00:02:21.280 --> 00:02:22.040
 Tausende.

00:02:22.040 --> 00:02:25.160
 Wir haben auch schon Snips und BHs geschickt bekommen.

00:02:25.160 --> 00:02:37.160
 Ja, also keine Snips, ich die BHs. Also egal. Nein, das ist auch egal. Das führt jetzt schon gleich am Anfang zu weit. Da kommen wir später noch hin. Nach dem zweiten Bier dann, glaube ich.

00:02:37.160 --> 00:02:47.300
 Weil wir uns jetzt gerade nicht sehen. Ich wollte kurz mal erwähnen. Ich meine, jetzt dürft ihr gleich alle sagen, es ist ein schlimmer Laber-Podcast, aber ich trinke heute einen Wölfle.

00:02:47.300 --> 00:02:52.100
 Das kleine Pilz. Das wurde mal bei mir um die Ecke gebraut. Was trinkst du denn heute?

00:02:52.520 --> 00:03:00.280
 Ich trinke wieder das, was ich auch in der ersten Folge und in der zweiten Folge schon getrunken habe. Einen Brooklyn. Aber nicht das Lager, sondern das East IPA.

00:03:01.240 --> 00:03:07.940
 Ah, ja. Sehr gut. Ja, das klingt auch lecker. Vielleicht kommen wir dann direkt mal zur Retro.

00:03:07.940 --> 00:03:09.200
 Genau.

00:03:09.200 --> 00:03:10.000
 Für die haben wir übrigens noch keinen Jingle.

00:03:10.000 --> 00:03:16.320
 Genau das habe ich auch schon gedacht. Wir haben noch keinen Jingle für die Retro. Aber ich habe schon eine Idee. Ich bastel da mal was.

00:03:17.040 --> 00:03:19.920
 Nein, das sind die Jingles. Ich glaube, die Jingles muss ich machen. Tut mir leid.

00:03:19.920 --> 00:03:20.140
 Echt?

00:03:20.140 --> 00:03:20.720
 Oh, nö.

00:03:20.720 --> 00:03:21.340
 Ja, nö.

00:03:21.340 --> 00:03:23.760
 Okay, dann machen wir es gemeinsam.

00:03:25.760 --> 00:03:33.320
 Wie ihr euch vielleicht denken könnt. Ich meine, wir sagen, wir haben keinen Jingle für die Retro. Wo ist jetzt die große News? Naja, wir haben vielleicht für was anderes noch Jingles.

00:03:34.020 --> 00:03:37.060
 Wir haben ein paar neue Sachen in dieser Folge.

00:03:37.060 --> 00:03:39.240
 Lasst euch überraschen.

00:03:39.240 --> 00:03:42.300
 Genau. Kommen wir zur Retro.

00:03:42.300 --> 00:03:56.780
 Mein Retro besteht eigentlich nur daraus, Feedback haben wir schon einiges bekommen. Leider, also für die bisherigen Folgen, leider noch keine offiziellen, irgendwie öffentlich einsehbaren Kommentare.

00:03:56.780 --> 00:04:13.600
 Es kam über Twitter ein bisschen was rein, also direkt auf unserem Kanal WWS IV. Bei Instagram nichts. Da kamen ein paar Likes. Und auf unserer Homepage, wo wir sogar extra die Kommentare sehr hübsch gestaltet haben, zumindest glauben wir das.

00:04:13.600 --> 00:04:23.400
 Ihr dürft uns dazu gerne in den Kommentaren kommentieren, wie ihr das findet, das Kommentar-Design. Da kam noch gar nichts. Jetzt ist die Frage, was könnte das jetzt bedeuten?

00:04:23.920 --> 00:04:30.200
 Bedeutet das, dass alles super ist? Bedeutet das, die Kommentarfunktion ist kaputt? Das ist ja immer am beliebtesten, die Leute kommentieren nicht, weil sie nicht können.

00:04:30.200 --> 00:04:43.480
 Oder bedeutet das, alles ist super? Also was ich aber nicht glaube, weil normalerweise das Internet ist ja jetzt nicht unbedingt dafür bekannt, dass alle immer alles super finden, sondern eigentlich, dass man da hingeht, um gesagt zu bekommen, wo man überall falsch liegt.

00:04:43.480 --> 00:04:48.920
 Aber gerade das spricht ja eigentlich dafür, dass alles in Ordnung ist, weil wenn die Leute was zu meckern haben, dann tun sie das in der Regel auch.

00:04:50.060 --> 00:04:52.640
 Ich glaube, die Kommentarfunktion ist kaputt.

00:04:52.640 --> 00:05:03.840
 Ja, wahrscheinlich. Ich glaube, wir gucken uns das nochmal an und posten mal selber Kommentare. Aber immerhin auf Twitter und aber auch LinkedIn und Xing, da kam schon auch was an textuellem Feedback zurück.

00:05:04.240 --> 00:05:08.760
 LinkedIn und Xing, äh, LinkedIn und Xing habe ich jetzt gerade unterschlagen.

00:05:08.760 --> 00:05:14.840
 Das hatte ich auch nicht so auf dem Schirm, aber da kam tatsächlich auch was zurück. Ja, freut uns jedenfalls, wenn wir was von euch hören.

00:05:16.260 --> 00:05:29.280
 Genau, also das war eigentlich schon meine Retro. Da drehte sich viel um den Livegang. Der Konstantin hat schon gesagt, wir haben schon über 400 Downloads. Was ich tatsächlich wirklich verrückt finde. Ja, dankeschön dafür und empfehlt uns weiter.

00:05:29.280 --> 00:05:45.840
 Auf jeden Fall. Ja, ich habe gar keine richtige Retro vorbereitet. Ich habe mich seit der letzten Folge immer noch sehr intensiv mit WordPress beschäftigt und habe viel geflucht, weil ich versuche, den Gutenberg-Editor anzupassen nach wie vor.

00:05:45.980 --> 00:05:54.200
 Und, ähm, bin jetzt inzwischen an dem Punkt, wo ich das tatsächlich wohl eher erstmal aufstecke und was komplett eigenes entwickle.

00:05:54.200 --> 00:05:55.160
 Oh.

00:05:55.160 --> 00:06:05.700
 Ja, weil mit dem Gutenberg-Editor im aktuellen Zustand, da haben sich die Jungs und Mädels vom WordPress-Core-Team leider nicht so einen großen Gefallen getan.

00:06:06.720 --> 00:06:14.700
 Das merkt man unter anderem an den Reviews zum offiziellen Gutenberg-Plugin. Früher brauchte man ja ein Plugin, um den vorab schon mal nutzen zu können.

00:06:14.700 --> 00:06:28.680
 Und aktuell ist es so, dass man über das Plugin immer die aktuellste Version bekommt. Nicht die Dev-Version, sondern sie sind schon versioniert, aber halt noch nicht die Version, die tatsächlich im WordPress-Core landet, wenn man WordPress installiert.

00:06:29.060 --> 00:06:40.740
 Das heißt, da ist es immer so ein bisschen voraus und man hat da eben neuere Features. Und das Problem ist, dass von Version zu Version teilweise wirklich grundlegende Sachen geändert werden.

00:06:40.740 --> 00:06:56.460
 Und wenn man sich jetzt da einklingt und versucht mit Styles oder indem man sich in diese React-Components reinhängen will, die Gutenberg nutzt, da stößt man ganz schnell an Grenzen und ist vor allem immer frustriert, weil plötzlich mit dem Versions-Update nichts mehr funktioniert.

00:06:56.840 --> 00:07:12.460
 Also ich hatte das wirklich gestern innerhalb von einem Tag. Ich habe mich morgens noch gefreut. Juhu, ich habe es geschafft, das so anzupassen, wie ich das gerne möchte. Und komme nach dem Mittagessen an den Rechner, CEO, Plugin-Benachrichtigung, Update, Gutenberg, super, gleich mal aktualisiert. Und es ging danach wirklich so gut wie nichts mehr.

00:07:12.460 --> 00:07:24.600
 Und wenn ich dann in den Release Notes halt schon lese, this is not the final concept, da wird es noch einige Änderungen geben in Zukunft, dann weiß ich schon, am besten Finger weglassen.

00:07:25.520 --> 00:07:33.120
 Ja, du sagst gerade, du hast was Eigenes gebaut. Was spricht denn dagegen, den alten Editor zu verwenden? Den gibt es ja irgendwie auch noch, oder?

00:07:33.120 --> 00:07:43.540
 Das habe ich auch schon überlegt, ja. Aber ich meine, dem Gutenberg-Editor, wenn jetzt nicht das Feedback weiterhin so negativ ist, dass sie irgendwann sagen, okay, wir lassen das Ganze, aber das glaube ich nicht, dass das passieren wird.

00:07:44.500 --> 00:08:02.500
 Der ist schon die Zukunft des Editierens in WordPress. Und ich finde auch die Grundansätze nicht schlecht. Also, das ist jetzt fast schon wieder ein eigenes Thema, aber grundsätzlich funktioniert das so, dass nicht mehr diese Shortcodes reingespeichert werden in den Beitragskontext, die dann zur Laufzeit, jedes Mal, wenn die Seite aufgerufen wird, wenn man kein Caching nutzt, dann gepasst werden.

00:08:02.580 --> 00:08:16.060
 Sondern es wird statisch rausgerendert, das HTML drin gespeichert, umgeben von Kommentaren, öffnende und schließende Kommentare außenrum, die definieren, das ist ein Gutenberg-Blog vom Typ Paragraph zum Beispiel.

00:08:16.620 --> 00:08:32.800
 Und mit den entsprechenden Parametern, die man daran übergeben kann. Und dann bastelt sich der Editor daraus wieder die Oberfläche zum Editieren. Und das ist an sich nicht schlecht, weil am Schluss habe ich da wirklich HTML, das einfach ausgegeben werden kann, ohne dass ich irgendwelche Tags parsen muss.

00:08:32.800 --> 00:08:45.440
 Und das macht, glaube ich, einen Großteil aus, warum viele Themes in WordPress so langsam sind. Und der Grundgedanke, der gefällt mir. Und wie gesagt, das wird die Zukunft sein von WordPress. Und ich möchte auch kompatibel bleiben zu Gutenberg.

00:08:45.680 --> 00:08:56.220
 Aber für mich bedeutet das jetzt aktuell, außer mir kann jemand sagen, wie ich als nicht absoluter React-Crack es schaffe, den selber irgendwie aufzubohren.

00:08:56.220 --> 00:09:12.480
 Also ich habe schon versucht, dann mir wirklich, also selber mit am Chord zu arbeiten und habe mir das ausgecheckt. Aber ganz ehrlich, da habe ich es tatsächlich selber mit, mit View, weil ich da einfach fitter drin bin, wahrscheinlich schneller selber gestrickt, als da dran mitzuarbeiten.

00:09:12.560 --> 00:09:24.140
 Und dann sehe ich halt auch, es gibt irgendwie, keine Ahnung, 400 offene Tickets oder so. Und gerade wenn man als Neuling das erste Mal versucht, da irgendwie was, also ein Pull-Request zu stellen, dann kommt halt ganz schnell, ja, aber das machen wir hier nicht so, das machen wir hier anders.

00:09:24.140 --> 00:09:36.480
 Und da wird dann jede Code-Zeile zerpflückt und kann man an der Stelle das nicht so und so machen und da und da. Also bis das drin wäre im Core, da würden sicherlich Monate bis Jahre vergehen. Und so lange will ich nicht warten.

00:09:36.480 --> 00:09:40.420
 Und was brauchst du konkret? Brauchst du eigene Blöcke oder was?

00:09:40.640 --> 00:09:47.680
 Eigene Blöcke, aber vor allem auch Blöcke anpassen. Ich möchte noch nicht so viel verraten, was wir da so genau basteln. Ich habe ja schon mal gesagt, wir basteln ein eigenes Theme.

00:09:49.960 --> 00:09:58.700
 Es richtet sich an eine bestimmte Personengruppe, die eventuell dem Endnutzer das ein bisschen mehr einschränken möchte, als WordPress das tut.

00:09:59.260 --> 00:10:07.000
 Also ich möchte vielleicht nicht, dass der Endkunde einen roten Hintergrund und einen gelben Text setzen kann, bei jedem einzelnen Paragraph.

00:10:07.000 --> 00:10:10.160
 Und das kann ich aktuell mit dem Gutenberg-Editor halt machen.

00:10:10.420 --> 00:10:21.760
 Ja, also es ist sehr komplex, vor allem wenn man eben halt auch noch zusätzlich so ein bisschen mehr React machen muss, als man das eigentlich gerne möchte und gewohnt ist zu tun.

00:10:22.840 --> 00:10:33.800
 Und vermutlich werde ich da jetzt selber dran basteln und das werden einige Wochen und Monate ins Land ziehen, die vorher nicht geplant waren, bis wir das Produkt letztendlich auf den Markt bringen.

00:10:33.860 --> 00:10:36.300
 Ja, aber gut, so ist es und man lernt ja auch dabei.

00:10:36.300 --> 00:10:38.660
 Ja, Leute, macht mehr React.

00:10:38.660 --> 00:10:40.880
 Nein, nein, macht mehr View.

00:10:40.880 --> 00:10:46.220
 Was mir jetzt, ich habe den Editor gerade nochmal auf und habe mir nochmal angeschaut.

00:10:46.220 --> 00:10:48.680
 Also er erinnert mich sehr, sehr stark an den Medium-Editor.

00:10:48.680 --> 00:10:51.860
 Ich denke mal, das wird bestimmt auch eine große Inspiration dafür gewesen sein.

00:10:51.860 --> 00:11:00.020
 Also das Klassische, ich habe einzelne Blöcke, die ich mit so einem kleinen Plus hinzufügen kann und habe so eine Art What you see is what you get.

00:11:00.020 --> 00:11:02.300
 Ist es ja auch so auf eine gewisse Art und Weise.

00:11:02.640 --> 00:11:10.460
 Ist es, wäre auch schön, wenn das sehr stringent so funktionieren würde, aber das tut es halt an vielen Stellen dann doch leider wieder nicht.

00:11:10.460 --> 00:11:19.000
 Und ich finde es auch sehr, und das ist auch das Feedback, was man immer wieder hört von den Nutzern, es ist schön und gut, dass das What you see is what you get ist.

00:11:19.000 --> 00:11:27.760
 Aber man weiß manchmal gar nicht so genau, wo man denn jetzt eigentlich gerade klicken soll, um an einer bestimmten Stelle was zu bekommen und an einer bestimmten Stelle was zu bearbeiten.

00:11:27.880 --> 00:11:34.060
 Weil man erst beim Hovern dann teilweise Feedback bekommt visuell, was man denn jetzt gerade gehovert hat und was man da macht.

00:11:34.060 --> 00:11:39.800
 Und diese Plus-Böppel, die da auftauchen, mit denen man dann Blöcke einfügen kann, die sind manchmal da und manchmal nicht.

00:11:39.800 --> 00:11:41.640
 Also das ist teilweise halt auch wirklich verbuggt.

00:11:42.200 --> 00:11:47.440
 Also was ich sagen will, ist, der Editor ist in der Form einfach noch nicht fertig.

00:11:47.440 --> 00:11:51.700
 Oh, ich habe es gerade geschafft, vier Plus-Böppel auf einmal zu sehen.

00:11:51.700 --> 00:11:54.020
 Das finde ich ein bisschen verwirrend, ehrlich gesagt.

00:11:54.860 --> 00:12:07.220
 Und es ist halt einfach auch ein bisschen schade, weil WordPress, also das, was WordPress so im Kern ausgemacht hat, war eigentlich immer, dass es sehr leicht anzupassen ist.

00:12:07.220 --> 00:12:16.260
 Oder zumindest sehr leicht, ich meine, wir haben auch an einigen Stellen geknabbert, als wir unsere Blogseite gebastelt haben, aber zumindest mal, man kann irgendwie alles erreichen.

00:12:16.260 --> 00:12:27.840
 Und wenn man im äußersten Notfall OB Start macht und mit OB Get Contents irgendwas mit Regex passt, so die absolute Notlösung, wenn es gar keine Hooks an irgendeiner Stelle gibt, also man kommt irgendwie zum Ziel.

00:12:27.840 --> 00:12:42.280
 Und mit dem Nutzen von aktuelleren Frontend-Technologien, wie eben jetzt React-Module, React-Components und so ein Bildprozess, der dahinter steckt, das macht es halt nicht gerade einfacher, sich da irgendwo einzuklinken.

00:12:42.600 --> 00:12:51.220
 Aber diese ganzen Regex-Geschichten da, also muss ich mal ganz kurz einhaken. Kannst du dir bitte mal kurz den Mund auswaschen, weil sowas sollte man gar nicht sagen.

00:12:51.220 --> 00:12:52.220
 Nein, natürlich, ich weiß.

00:12:52.220 --> 00:12:54.220
 Das haben wir auch nicht gemacht.

00:12:54.220 --> 00:13:05.360
 Das haben wir tatsächlich auch nicht machen müssen. Nein, ich wollte nur damit sagen, also man kann sich irgendwie immer reinhaken, selbst wenn es keinen offiziellen Hook dafür gibt. Also man kommt da immer irgendwie zum Ziel.

00:13:05.360 --> 00:13:22.060
 Und bei der React-Geschichte jetzt, also erstmal bis ich, wie das halt immer so ist, wenn man so ein größeres NPM-Note-Projekt auscheckt, also einmal NPM-Install ausgeführt und dann erstmal eine Runde Kaffee trinken gehen und vielleicht das Auto waschen und die Kinder von der Kita abholen.

00:13:22.840 --> 00:13:24.700
 Ja, und groß werden und Abitur machen lassen.

00:13:24.700 --> 00:13:34.220
 Genau, weil das dann doch halt recht lange dauert. Und ich meine, früher war halt so, mal kurz den Code durchsuchen, aha, da ist die Stelle und dann weiß ich auch schon, wo ich es verändern muss.

00:13:34.620 --> 00:13:40.880
 Also es macht natürlich alles komplexer. Das geht auch schon so ein bisschen jetzt über in das, was ich nachher noch zum Hauptthema sage.

00:13:40.880 --> 00:14:00.440
 Also kurzum, der Editor ist eigentlich nicht fertig, es wird immer noch dran aktualisiert und meiner Meinung nach hätte man damit noch ein, zwei Jahre warten müssen, bis tatsächlich mal ein Zustand erreicht ist, der die Flexibilität bietet, die man, also die man als Entwickler eigentlich auch haben will, wenn man Themes und Plugins für WordPress schreibt.

00:14:00.920 --> 00:14:07.540
 Und das ist einfach ein bisschen schade, weil das ist das, was WordPress halt immer ausgemacht hat und das wird einem jetzt ziemlich erschwert.

00:14:07.540 --> 00:14:15.240
 Ja, zu dem Thema habe ich noch kurz eine Anmerkung, dann können wir gleich zum nächsten Blog gehen. Einfach nur so, weil es mir gerade heute über den Weg lief.

00:14:15.240 --> 00:14:28.780
 Also wir hatten es gerade angesprochen, NPM-Install und dauert irgendwie lange. Ich habe heute von einem älteren Projekt mal wieder, also ein Test schlug an und wurde rot durch,

00:14:28.780 --> 00:14:43.340
 naja, guck doch nochmal die Dependencies an, da sind vielleicht ein paar Vulnerabilities drin. Und dann habe ich eben NPM-Audit gemacht und NPM-Audit-Fix, um die Vulnerabilities zu fixen.

00:14:44.020 --> 00:15:01.280
 Und dabei lief mir dann die Zahl über den Weg, wie viele Pakete da installiert sind. Und es ist, um es kurz zu machen, das ist so ein klassisches älteres Angular-Projekt, also mit der ganzen Testgeschichte und, keine Ahnung, dieses Browser-Refresh,

00:15:01.480 --> 00:15:10.720
 mir fällt Browser-Sync und keine Ahnung, was da alles mit drin ist und E2E-Tests und so weiter. Konstantin, du darfst mal kurz raten, was schätzt du so ganz grob, wie viele Pakete sind da drin?

00:15:10.720 --> 00:15:14.440
 Hast du schon mal ein Angular-Projekt irgendwie gehabt oder gebaut?

00:15:14.460 --> 00:15:33.600
 Okay, also ich bin bei Angular nie über die Tour of Heroes rausgekommen, muss ich ja gestehen. Also von den drei Frameworks Angular-Rack-View habe ich mich mit Angular am wenigsten beschäftigt, keine Ahnung, was da so, aber ich finde Angular an sich relativ komplex und sehr, keine Ahnung, 4000 Pakete.

00:15:35.220 --> 00:15:51.920
 Du bist weit drunter, also das ist nicht ganz das Zehnfache, aber die Hälfte vom Zehnfachen, also 22.000, über 22.000 Pakete. Und da dauert der NPM-Install dann auch eine Weile.

00:15:51.920 --> 00:15:52.900
 Nicht schlecht.

00:15:52.900 --> 00:15:53.860
 Wie man sich denken kann.

00:15:53.860 --> 00:15:54.240
 Nicht schlecht.

00:15:54.240 --> 00:15:58.640
 Ja, genau, damit können wir das eigentlich dann auch abschließen oder hast du noch was dazu?

00:15:58.640 --> 00:16:00.340
 Nee, das wäre es eigentlich.

00:16:00.340 --> 00:16:04.980
 Gut, dann haben wir vielleicht sogar jetzt ein Jingle.

00:16:05.220 --> 00:16:08.940
 Die Property der Woche

00:16:08.940 --> 00:16:20.700
 Ah, okay, das Ende habe ich noch gehört. Da war jetzt gerade ein kleines Loch in der Übertragung, aber macht nichts. Dadurch, dass ich das Ende gehört habe, ist alles gut.

00:16:20.700 --> 00:16:27.960
 Ja, das kann also generell sein heute, dass wir zwischendrin mal Lücken haben. Wir hoffen nicht, dass es der Fall ist, aber mal gucken.

00:16:27.960 --> 00:16:31.720
 Nein, bei uns gibt es nichts. Wir sind lückenlos.

00:16:33.180 --> 00:16:38.680
 Also meine Property der Woche, oder die ist diese Woche von mir, ist WebKit Line Clamp.

00:16:40.400 --> 00:16:54.960
 Also das ist jetzt auch nichts ganz, ganz, ganz schrecklich Neues. Es ist mir schon vor einer Weile über den Weg gelaufen, aber ich habe es jetzt heute nochmal ausprobiert, weil ich es irgendwie interessant fand und ich habe extra WebKit dazu gesagt, weil da sind wir schon bei der ersten Merkwürdigkeit.

00:16:55.960 --> 00:17:03.600
 Die wird mit WebKit Prefix unterstützt, das ist eine CSS Property, mit WebKit Prefix wird die unterstützt, aber auch in Firefox und zwar nur so.

00:17:04.420 --> 00:17:13.100
 Also ich kann nicht einfach Line Clamp schreiben und hoffen, dass es dann in Firefox funktioniert, sondern in Firefox tatsächlich brauche ich auch WebKit Prefix.

00:17:13.160 --> 00:17:23.040
 Gab es meiner Meinung nach, aber auch schon ab und zu mal bei bestimmten Properties. Weiß ich jetzt gerade kein konkretes Beispiel mehr, aber sowas ist mir auch schon mal über den Weg gelaufen, dass man das tatsächlich im Firefox so auch gebraucht hat.

00:17:23.820 --> 00:17:31.600
 Ich finde es extrem merkwürdig, weil normalerweise gibt es dann irgendwie immer noch eine Standardvariante, aber offenbar gibt es dazu noch nicht die Standardvariante.

00:17:31.600 --> 00:17:40.380
 Ich nehme mal an, Mozilla hat da sich dabei gedacht, naja wir gucken jetzt erstmal wie das jetzt wird, bevor wir das irgendwie implementieren, wir wollen aber irgendwo die Kompatibilität herstellen.

00:17:40.380 --> 00:17:45.280
 Egal, aber ich erkläre erstmal, was das Ding überhaupt tut, für die, die das noch nicht wissen.

00:17:45.280 --> 00:17:53.380
 Und zwar mit WebKit Line Clamp kann ich eine Anzahl an Zeilen angeben, nach der mein Blog, der Text von meinem Blog abgeschnitten wird.

00:17:53.380 --> 00:18:04.300
 Also das ist ein klassischer Use Case im Webdesign, ist so, ich habe hier irgendwie eine Box, möchte die aber nicht unendlich hoch werden lassen, möchte nach einer gewissen Zeilenanzahl meinen Text abschneiden.

00:18:04.300 --> 00:18:08.140
 Und vielleicht bin ich dann aber auch mitten in einem langen Wort oder so.

00:18:08.140 --> 00:18:10.980
 Das ist oftmals irgendwie schwer zu berechnen.

00:18:11.360 --> 00:18:21.120
 Also gibt es jetzt WebKit Line Clamp, da kann ich zum Beispiel sagen, hey, nach drei Zeilen bitte hätte ich gerne Ellipsis und der Text wird nicht mehr als drei Zeilen angezeigt, egal wie lange der ist.

00:18:21.120 --> 00:18:28.080
 Dazu braucht man eine ganze Myriade an Eigenschaften, die man da reinschreiben muss.

00:18:28.080 --> 00:18:33.460
 Also es ist leider nicht mit Line Clamp 3 getan, also man kann da einen Nun oder einen Integerwert reinschreiben.

00:18:34.380 --> 00:18:50.060
 Man muss dazu auch noch Display minus WebKit minus Box dazunehmen und tatsächlich komischerweise, ich habe es vorhin ausprobiert, nur in Firefox braucht man noch WebKit Box Orient Vertical.

00:18:51.100 --> 00:18:59.280
 Und das habe ich für den, ja, Moment, stimmt nicht, ich habe was unterschlagen, wir brauchen noch was, wir brauchen auch noch Overflow hinten.

00:18:59.280 --> 00:19:06.580
 Aber das ist bei so Text abschneiden, auch so mit Text Overflow und so weiter, ist, genau.

00:19:06.580 --> 00:19:11.140
 Interessant ist, dass wie der Text abgeschnitten wird, da gar nicht dabei steht.

00:19:11.640 --> 00:19:14.180
 Also da wird einfach angenommen, dass man ein Ellipsis haben will.

00:19:14.180 --> 00:19:20.380
 Ich weiß jetzt nicht, ob man das irgendwie noch beeinflussen kann, aber derzeit wird da einfach eine Ellipsis eingefügt am Ende.

00:19:20.380 --> 00:19:25.040
 Ich habe dazu auch eine kleine Demo gebaut, die gibt es dann in den Shownotes.

00:19:25.040 --> 00:19:26.440
 Interessant.

00:19:26.440 --> 00:19:30.520
 Ich bin jetzt gerade am überlegen, habe ich noch was vergessen?

00:19:30.520 --> 00:19:38.620
 Genau, also mit Text Overflow, Ellipsis, das ist der klassische Fall, damit kann man leider nur eine Zeile machen, also so drei Zeilen ist dann eher schwierig.

00:19:38.960 --> 00:19:50.520
 Es gibt auch eine JavaScript-Implementierung davon, also wenn man irgendwie das jetzt über alle Browser hinweg irgendwie halbwegs gleich haben will, dann gibt es etwas, das nennt sich Clamp.js.

00:19:50.520 --> 00:19:55.080
 Das habe ich mir jetzt nicht im Detail angeschaut, aber das funktioniert so ähnlich.

00:19:55.080 --> 00:19:57.680
 Man gibt eine Zeilenanzahl an und dann wird abgeschnitten.

00:19:57.680 --> 00:20:08.740
 Browser-Support ist Chrome, Current Fire, also Chrome glaube ich schon seit Version 14, beziehungsweise auf Mobile erst 80, wie ich gerade sehe.

00:20:08.960 --> 00:20:17.000
 Firefox ab 68, IE nicht, Edge ab 17 und Safari ab 5 kann das, also eigentlich auch schon relativ lange.

00:20:17.000 --> 00:20:26.980
 Ich nehme mal an, dass wahrscheinlich dadurch, dass es in Safari 5 schon unterstützt wurde, wahrscheinlich so eine Apple-Eigenheit noch ist aus der Web-Git-Zeit,

00:20:26.980 --> 00:20:35.940
 wo die noch sehr viel Properties eingebaut haben in ihre Browser, weil sie sie eben gebraucht haben für ihre eigenen Produkte.

00:20:37.380 --> 00:20:48.440
 Genau, ich glaube, was es noch zu sagen gibt, ist, das ist irgendwie auch nicht richtig standardisiert, soweit ich weiß, und auch nicht so richtig dokumentiert.

00:20:48.440 --> 00:20:51.800
 Also überlegt euch gut, ob ihr es einsetzen wollt.

00:20:51.900 --> 00:20:58.400
 Ich finde es aber eine interessante Lösung oder eine relativ einfache Lösung für einen Use-Case, den ich zumindest schon relativ oft hatte,

00:20:58.400 --> 00:21:03.940
 beziehungsweise Grafiker, mit denen ich zusammengearbeitet habe, hätten das schon sehr oft gerne mal gehabt.

00:21:03.940 --> 00:21:09.680
 Ich möchte da gerne mal den Text abschneiden, weil wir wollen da, wir haben da nur Platz für zwei Zeilen oder für drei Zeilen oder für fünf Zeilen.

00:21:10.200 --> 00:21:18.240
 Und jetzt kann ich das quasi einfach nur mit CSS machen, ohne da irgendwie Zeichen zählen zu müssen oder irgendwie sonst irgendwas komisches machen zu müssen.

00:21:18.240 --> 00:21:22.900
 Genau, damit bin ich mit meinem Thema die Property der Woche am Ende.

00:21:22.900 --> 00:21:24.880
 Brauchen wir eigentlich End-Jingles, habe ich mich gerade gefragt?

00:21:24.880 --> 00:21:27.500
 End-Jingles? Nee, ich glaube, wir brauchen es nicht übertreiben, oder?

00:21:27.500 --> 00:21:32.300
 Doch, ich habe eine super Idee. Wir drehen die Jingles, wir spielen die Jingles einfach rückwärts ab.

00:21:32.300 --> 00:21:34.440
 Okay, mal gucken. Hören wir uns mal an.

00:21:34.440 --> 00:21:37.760
 Vielleicht in der nächsten Folge, genau.

00:21:38.520 --> 00:21:41.960
 Ja, es geht gleich weiter mit dem nächsten Thema, weil ich höre gerade aus der Regie.

00:21:41.960 --> 00:21:45.140
 Wir müssen leider Werbung machen. Ein Spot, dann geht's weiter.

00:21:45.140 --> 00:21:51.540
 Magst du nähen, montieren, modellieren? Mit kurzsichtiger Brille vergrößerst du alles.

00:21:51.540 --> 00:21:57.720
 Kannst du die kleinen Buchstaben kaum lesen? Kein Problem mit dieser Lupenbrille.

00:21:57.720 --> 00:22:01.920
 Überwältigende Kurzsichtigkeit. Sehe alle winzige Dinge.

00:22:01.920 --> 00:22:06.600
 Irritiert dich, wenn du die winzigen Buchstaben nicht lesen kannst? Lupenbrille.

00:22:06.780 --> 00:22:07.540
 Abmeldung hier.

00:22:07.540 --> 00:22:12.020
 Trage diese Lupenbrille. Nützlich, du bekommst eine super Sehkraft auf nah.

00:22:12.020 --> 00:22:15.000
 Mit dieser Brille geht Näherei an Strichjatt.

00:22:15.000 --> 00:22:18.720
 Zu Risiken und Nebenwirkungen lesen Sie die Dokumentation oder fragen Sie Ihren Systemadministrator.

00:22:20.720 --> 00:22:33.220
 Ja, das war natürlich keine echte Werbung, sondern eine Spam-E-Mail, die ich tatsächlich genau mit diesem Wortlaut in meinem Posteingang gefunden habe.

00:22:33.220 --> 00:22:44.340
 Und ich habe mir jetzt vorgenommen, die witzigsten oder auch skurrilsten oder auch nur banalsten davon statt zu löschen, einfach zu sammeln und zu vertonen.

00:22:44.340 --> 00:22:47.340
 Und dann gibt es die hier als Spam-Spot zu hören.

00:22:48.240 --> 00:22:55.140
 Sehr, sehr, sehr geil. Ich habe auch schon, also, naja, ich durfte schon mal vorhören, es ist jetzt nicht die einzige, die es bisher gibt.

00:22:55.140 --> 00:22:57.820
 Nein, wir haben schon ein paar für die nächsten Folgen.

00:22:57.880 --> 00:23:07.540
 Was heißt, naja, nicht, ja genau, wir haben, wir haben schon ein paar, aber der Konstantin hat sie gemacht und ich habe, nachdem ich die alle gehört habe, ich glaube, ich habe schon eins mehr gehört, als du glaubst, dass ich gehört habe, by the way.

00:23:07.540 --> 00:23:08.680
 Echt? Okay.

00:23:10.880 --> 00:23:13.760
 Habe ich mir auch, also, ich bin mir sicher, du wirst Sprecherangebote bekommen.

00:23:13.760 --> 00:23:16.200
 Oh mein Gott, ja vielleicht zweites Standbein.

00:23:16.200 --> 00:23:22.520
 Ja, wir wurden auf LinkedIn auch gefragt, wo kriegt man denn so einen geilen Sprecher her oder wer ist denn der geile Sprecher?

00:23:22.520 --> 00:23:23.300
 Vom Intro, ja, genau.

00:23:23.300 --> 00:23:26.340
 Und dann musste ich antworten, genau, vom Intro, Entschuldigung.

00:23:26.800 --> 00:23:34.420
 Und dann musste ich antworten, nein, habe ich gerne geantwortet, naja, der spricht auch im Podcast mit und hint, ich bin's nicht.

00:23:34.420 --> 00:23:38.900
 Genau, also, der Konstantin, der hat da echt große Sprecherqualitäten.

00:23:38.900 --> 00:23:40.160
 Ach, ja, gut.

00:23:40.160 --> 00:23:47.160
 Du darfst, na, doch, doch, nicht tiefstapeln, ich bin auf jeden Fall der Meinung, ihr könnt es ja mal in die Kommentare schreiben.

00:23:47.160 --> 00:23:53.380
 Ja, würde mich freuen, vielleicht findet ihr es auch total doof, dann lassen wir es in Zukunft wieder weg, aber ich finde es, es hat Spaß gemacht, das zu produzieren.

00:23:53.380 --> 00:23:56.600
 Nein, wir lassen es nicht weg, wenn ihr das doof findet, solange wir es gut finden.

00:23:56.800 --> 00:24:01.560
 Nein, es ist einfach zu gut.

00:24:01.560 --> 00:24:13.060
 Ja, deswegen habe ich vorhin auch so, als du gemeint hast, du willst alle Jingles produzieren, also ich wollte nämlich noch sagen, ich habe jetzt zwar schon vier von diesen Spots produziert, aber ich wäre schon dafür, dass wir uns das auch aufteilen, damit meine Stimme nicht irgendwann zu langweilig wird.

00:24:13.060 --> 00:24:20.040
 Dafür würde ich dann vielleicht auch noch einen Jingle machen, vielleicht können wir uns da einigen, wir sprechen mal noch hinter der Bühne.

00:24:20.560 --> 00:24:34.140
 Hinter der Bühne. Ja, ich weiß nicht, also, ich sage es mal so, ich tue mir leicht mit schwer verfremdeter Stimme durch irgendwelche merkwürdigen Tools, ich bin mir nicht sicher, ob ich das mit den Jingles halbwegs gleichwertig hinkriege wie du.

00:24:34.140 --> 00:24:35.160
 Wir gucken mal, wir gucken mal.

00:24:36.100 --> 00:24:37.340
 Ja, genau, wir schauen mal.

00:24:37.340 --> 00:24:44.900
 Genau, und jetzt kommen wir zum Thema, zu dem wir nämlich auch keinen Jingle haben bisher, aber eigentlich bräuchten wir für das Thema auch einen Jingle, finde ich.

00:24:44.900 --> 00:24:45.780
 Das kriegen wir hin.

00:24:45.780 --> 00:24:46.360
 Machen wir.

00:24:46.440 --> 00:24:48.500
 Da habe ich jetzt zum Beispiel schon eine Idee.

00:24:48.500 --> 00:24:49.560
 Ich auch.

00:24:49.560 --> 00:24:52.180
 Wir werden uns irgendwie einigen.

00:24:52.180 --> 00:25:05.820
 Ja, da hätte ich jetzt ganz knallhart, hallo David Matsiejewski, falls du es hörst, da würde ich knallhart von dem mittlerweile alten und nicht mehr erscheinenden Podcast Technikwürze abkupfern, die haben das nämlich damals ganz cool gemacht schon.

00:25:06.260 --> 00:25:15.100
 Zur Zeit, als es noch nicht so viele geile Tools gab, um Podcasts zu produzieren, also nochmal Hut ab an alle, die vor 15 Jahren schon Podcasts produziert haben.

00:25:15.100 --> 00:25:18.900
 Wir haben es jetzt sehr leicht im Vergleich zu euch.

00:25:18.900 --> 00:25:20.580
 Heute können das sogar wir.

00:25:20.580 --> 00:25:23.320
 Früher war das noch richtig Arbeit.

00:25:23.320 --> 00:25:25.920
 Das ist der einzige Grund, warum wir das jetzt machen.

00:25:25.920 --> 00:25:30.480
 Und nicht früher, genau, weil wir einfach ein bisschen nicht schlau genug waren damals.

00:25:30.480 --> 00:25:31.520
 Jetzt sind wir schlau genug.

00:25:33.220 --> 00:25:39.420
 Okay, dann, ja, die letzten beiden Themen waren nicht wirklich frontend-spezifisch.

00:25:39.420 --> 00:25:41.380
 Das war auch ein Feedback, was wir bekommen haben.

00:25:41.380 --> 00:25:46.000
 Neben dem ansonsten eigentlich durchweg positiven Feedback, was uns sehr gefreut hat.

00:25:46.000 --> 00:25:56.120
 Und für uns ist es natürlich auch eine Gratwanderung, Neulinge nicht auszuschließen, die vielleicht gerade erst eingestiegen sind in den Bereich und den Podcast hören.

00:25:56.120 --> 00:26:00.180
 Und Senior-Entwicklern jetzt nicht irgendwie jedes Mal nur was zu erzählen, was sie schon tausendmal gehört haben.

00:26:00.900 --> 00:26:05.060
 Aber es wird natürlich nicht ausbleiben, dass eins von beidem immer wieder auftritt.

00:26:05.060 --> 00:26:12.520
 Und ich habe mir überlegt, worüber könnte man denn mal sprechen, damit jeder was Neues erfährt.

00:26:13.040 --> 00:26:18.600
 Und es ist ja so, dass unser Bereich sich immer grundlegender und immer rasanter entwickelt.

00:26:18.600 --> 00:26:21.260
 Die Build-Prozesse werden immer komplexer.

00:26:21.260 --> 00:26:28.200
 Wir haben es vorhin schon gesagt, tausende, und zwar wirklich tausende, Abhängigkeiten und Packages, die installiert werden.

00:26:28.820 --> 00:26:35.320
 Dann ES6 bzw. ES Next, diverse Frameworks, die immer wieder aus dem Boden gestampft werden und wieder eingestampft werden.

00:26:35.320 --> 00:26:42.120
 Und bei mir war das tatsächlich eine Zeit lang, ich hatte richtig das Gefühl, abgehängt zu werden und nicht mehr mitzukommen.

00:26:42.120 --> 00:26:52.440
 Und auch gar nicht die Zeit, neben dem eigentlichen Arbeiten noch mehr diese diversen Techniken und Libraries und diverse Trends, die es gibt, anzuschauen.

00:26:52.940 --> 00:26:55.380
 Weiß nicht, wie ging es dir, Moritz? Kennst du das Gefühl?

00:26:55.380 --> 00:26:57.700
 Absolut selbe Geschichte.

00:26:57.700 --> 00:27:06.720
 Also ich weiß gar nicht genau, als ich noch in einer kleineren Agentur gearbeitet habe, da war das für mich noch leichter, irgendwie die Trends nachzuvollziehen.

00:27:07.140 --> 00:27:19.540
 Aber irgendwann hatte ich so den Eindruck, unser Ökosystem oder unsere Branche explodiert irgendwie und es entsteht an, jede Woche irgendwie entstehen drei neue Frameworks, wo alle sagen, das musst du gesehen haben.

00:27:19.540 --> 00:27:29.520
 Und jetzt zusätzlich kommen ja heutzutage noch nicht nur neue Frameworks dazu, sondern auch noch Myriaden an Browser-APIs, die man irgendwie alle auch schon mal gesehen haben sollte.

00:27:29.620 --> 00:27:36.620
 Und ich weiß nicht, ob ich jetzt vielleicht einfach zu alt geworden bin oder mein Hirn zu langsam, ich komme da tatsächlich nicht mehr mit.

00:27:36.620 --> 00:27:42.580
 Aber ich habe mittlerweile auch meinen Frieden damit geschlossen. Es ist okay, man kann einfach nicht mehr alles können, glaube ich.

00:27:43.120 --> 00:27:48.100
 Ja, gut, dass du auch schon mal die Einschätzung gibst. Das wäre nämlich auch noch mal eine Frage gewesen.

00:27:48.100 --> 00:27:52.980
 Und das ist auch so ein bisschen das, was ich heute klären will.

00:27:52.980 --> 00:28:01.820
 Also ich habe mir mal zwei Techniken rausgegriffen, die so ein bisschen das Zeug dazu haben, die Frontend-Landschaft nochmal stärker zu verändern, als das in den letzten Jahren eh schon der Fall war.

00:28:02.660 --> 00:28:12.520
 Natürlich WebGL und WebAssembly. Aber es wäre natürlich jetzt im Rahmen von so einer Podcast-Episode, wäre es schon zu viel, nur eins davon so richtig in der Tiefe zu behandeln.

00:28:12.520 --> 00:28:17.540
 Das heißt, ich werde nur mal kurz anreißen, was das überhaupt ist, wieso das entstanden ist, was man damit machen kann.

00:28:17.540 --> 00:28:24.720
 Vor allem möchte ich aber auch die Frage klären, muss man sich das dann überhaupt anschauen? Also lohnt es sich da Zeit rein zu investieren?

00:28:25.760 --> 00:28:27.860
 Und das hast du jetzt gerade schon ein bisschen vorweggenommen.

00:28:27.860 --> 00:28:29.200
 Ah, Verzeihung.

00:28:29.200 --> 00:28:35.660
 Nein, nein, gar kein Problem. Und ich habe jetzt diesmal auch schon eine Folge, wir haben das jetzt vorher noch nicht abgesprochen.

00:28:35.660 --> 00:28:42.320
 Normalerweise legen wir den Folgentitel nach der Aufnahme fest, wenn wir einen besonders lustigen Satz oder sowas aus der Folge haben.

00:28:42.320 --> 00:28:52.100
 Ich würde das Ganze aber jetzt zumindest das Thema schon mal unter den Deckmantel stellen, unter die Überschrift stellen.

00:28:52.100 --> 00:28:54.560
 Ist das noch Frontend oder kann das weg?

00:28:55.420 --> 00:28:55.820
 Yes.

00:28:55.820 --> 00:29:00.200
 Und sagt dir denn beides was, WebGL und WebAssembly?

00:29:00.200 --> 00:29:10.380
 Ja, mit einem habe ich tatsächlich schon mal ein bisschen rum experimentiert, allerdings war es da noch in einer relativ frühen Phase und von dem anderen kenne ich eigentlich nur Demos. Kannst du jetzt raten, was was ist?

00:29:10.380 --> 00:29:13.980
 Von WebAssembly kennst du nur Demos, mit WebGL hast du schon experimentiert.

00:29:13.980 --> 00:29:15.200
 Nee, es ist genau umgekehrt.

00:29:15.200 --> 00:29:16.280
 Nein, tatsächlich? Okay.

00:29:16.280 --> 00:29:17.040
 Ja, tatsächlich.

00:29:17.040 --> 00:29:25.080
 Interessant. Bei mir ist es nämlich genau andersrum. Deine Einschätzung genau, die wollte ich jetzt eigentlich erfragen, aber du hast schon gesagt, du bist der Meinung,

00:29:25.080 --> 00:29:30.700
 man muss sich nicht immer mit allem beschäftigen. Ja, ich bin gespannt, ob das auch unser Endfazit werden wird.

00:29:31.440 --> 00:29:39.340
 Und vorher schauen wir uns beide Techniken mal kurz an. Mit WebGL habe ich auch, also habe ich wie gesagt schon mal ein bisschen gearbeitet.

00:29:39.920 --> 00:29:46.580
 Da haben wir auch eine Art Tech-Demo gemacht, die leider noch nie an die Öffentlichkeit gegangen ist. Vielleicht kann ich das irgendwann mal zeigen.

00:29:46.580 --> 00:29:52.680
 Ja, kann ich jetzt leider nicht sagen, was es dagegen ist. Brennen wir unter den Nägeln, aber ich darf es nicht sagen.

00:29:53.800 --> 00:29:54.600
 Was ist WebGL?

00:29:54.600 --> 00:30:14.900
 WebGL ist eine JavaScript-API zur Anzeige von 3D-Grafiken. Und das Ganze funktioniert im Browser, Hardware beschleunigt, kann also direkt mit der GPU kommunizieren und wird in einem Canvas-Element dargestellt.

00:30:16.080 --> 00:30:25.300
 Und durch JavaScript-Schnittstellen ist es natürlich dann auch möglich, damit sie interagieren. Also ich kann Objekte reinladen, ich kann die Objekte drehen, kann auf Mausbewegungen achten.

00:30:25.300 --> 00:30:34.560
 Ich kann sogar die Webcam anzapfen, wenn der Browser das zulässt und so weiter. Und das Ganze gibt es eigentlich sogar schon relativ lange.

00:30:34.560 --> 00:30:41.420
 Also es ist 2011 erschienen, das ist jetzt auch schon fast ein Jahrzehnt her und es ist trotzdem noch eine Nische.

00:30:41.420 --> 00:30:50.580
 Also auch daran merkt man schon, wenn es jetzt wirklich der heiße Scheiß wäre, dann müsste da schon viel mehr mitgemacht worden sein.

00:30:50.580 --> 00:30:58.840
 Und ein Grund ist glaube ich auch, dass das Ganze eine eigene Programmiersprache mit sich bringt, mit der die Shader programmiert.

00:30:58.840 --> 00:31:08.740
 Nennt sich GLSL, also für GL wie in OpenGL oder WebGL, was einfach nur für Graphics-Library steht und eben SL, die Shader-Language.

00:31:09.620 --> 00:31:24.640
 Da muss man auch wieder einen kurzen Exkurs machen. Was sind Shader? Shader sind Programmmodule oder auch Hardware-Module mittlerweile fest auf den Platinen, die für die Geometrie, Texturierung, Materialeigenschaften von 3D-Objekten zuständig sind.

00:31:24.640 --> 00:31:34.580
 Ich hoffe, ich habe das so richtig wiedergegeben. Mein Bruder wird mich sonst schlagen. Er ist nämlich bei uns für den 3D-Bereich zuständig, macht das auch schon so lange, wie wir, oder fast so lange, wie wir uns mit dem Web-Bereich beschäftigen.

00:31:35.420 --> 00:31:55.980
 Und von daher bin ich nicht ganz ein unbeschriebenes Blatt. Ich habe da immer so ein bisschen Einblicke gehabt in die 3D-Welt. Für mich war es trotzdem ein Buch mit sieben Siegeln, bis vor ein paar Wochen, wo ich tatsächlich auch mal ein bisschen in den 3D-Bereich eingestiegen bin, dank Blender, was ja eine Open-Source-Software ist für 3D-Anwendungen oder 3D-Grafiken, 3D-Renderings.

00:31:56.540 --> 00:32:03.940
 Und das ist so eine ganze, ganz eigene Welt für sich. Also man merkt das jetzt schon, Shader muss ich schon allein erläutern, weil das wahrscheinlich nicht jedem was sagt.

00:32:03.940 --> 00:32:13.760
 Und was für Gedanken man sich da macht, man nimmt die Umwelt ganz anders wahr, überlegt, welche Materialeigenschaften hat das Objekt oder wie würde ich das nachmodellieren.

00:32:13.760 --> 00:32:23.960
 Und das sind einfach Sachen, über die man sich so im 2D-Kontext und als Grafikdesigner oder Webdesigner, aber auch als Entwickler eben überhaupt gar keine Gedanken macht.

00:32:25.660 --> 00:32:33.460
 Und ja, deswegen ist das überhaupt noch Frontend. Ja, es ist aber trotzdem Frontend, weil es muss irgendwie in den Browser und irgendjemand muss das in den Browser bringen.

00:32:33.460 --> 00:32:42.340
 Ja, das heißt, entweder wird es so sein, dass Frontendler sich plötzlich mit dem 3D-Bereich beschäftigen müssen, wenn sie sowas anwenden wollen.

00:32:43.360 --> 00:32:57.900
 3D-3D-Artists, wie die sich ja nennen, gibt es da einen deutschen Begriff dafür, 3D-Künstler, müssen sich Webtechniken aneignen oder in großen Firmen wird es wahrscheinlich so laufen, dass es zwei Teams gibt, die dann irgendwie miteinander interagieren.

00:32:58.760 --> 00:33:08.800
 Es gibt aber auch eine Library oder bestimmt gibt es auch noch mehrere andere Libraries, aber die eine, die ich kenne, mit der ich auch schon mal so ein bisschen rumprobiert habe, die nennt sich 3JS.

00:33:09.560 --> 00:33:17.880
 Und die abstrahiert das Ganze so ein bisschen. Also man muss dann keine eigenen Shader mehr programmieren und muss die Interaktion mit, ich bewege die Maus und das Objekt soll sich bewegen und so.

00:33:18.080 --> 00:33:34.600
 Das nimmt einem einiges ab. Und interessant dabei ist, dass es ursprünglich in ActionScript geschrieben war, also für das Hassgeliebte Flash, das mittlerweile endlich tot ist und wurde dann eben portiert nach JavaScript.

00:33:34.600 --> 00:33:52.160
 Ja, das macht es natürlich einem Webentwickler ein bisschen einfacher in diese Geschichte einzusteigen, aber trotzdem brauche ich noch 3D-Modelle und trotzdem sehen viele Demos, die man so sieht, dann halt auch so aus, als hätte jemand, der eigentlich von 3D nicht so wirklich die Ahnung gehabt hat, nur mal so ein bisschen rumprobiert.

00:33:53.020 --> 00:34:15.560
 Und weil ich gerade Flash angesprochen habe, ja, ist das das neue Flash? Ja, Flash ist tot, es lebe WebGL. Der große Unterschied ist, dass WebGL nativ im Browser läuft. Das ist kein Browser-Plugin, sondern das läuft direkt, wenn der Browser Canvas-Elemente unterstützt und WebGL implementiert hat, läuft das. Browser-Abdeckung sage ich auch gleich noch was dazu.

00:34:16.220 --> 00:34:31.180
 Und das bietet natürlich viel mehr Möglichkeiten. Also 3D war schon mit Flash auch möglich, aber dieses direkte Ansprechen der Grafikkarte und wirklich in einem 3D-Kontext sich befinden, das eröffnet natürlich eine ganz andere, neue Welt.

00:34:31.180 --> 00:34:40.520
 Zumal, wenn ich kurz einhaken darf, der 3D-Kontext im Browser ja eigentlich in den meisten Fällen am Ende ein 2D-Kontext wird.

00:34:40.520 --> 00:34:41.840
 Ja gut, klar, alles.

00:34:41.840 --> 00:34:42.800
 Wenn ich jetzt mal klug scheißen darf.

00:34:42.800 --> 00:34:42.920
 Genau.

00:34:42.920 --> 00:34:59.900
 Nee, ich hake deswegen ein, weil mir ist das zum letzten Mal begegnet, das Thema WebGL auf einer Konferenz, auf der wir, glaube ich, gemeinsam waren in Amsterdam, wo es nämlich um die WebVR-API geht, wo dann wirklich tatsächlich echtes 3D ist, weil ich da nämlich auch zwei Bilder habe, also mit so einer Brille.

00:35:00.520 --> 00:35:14.580
 Ich habe jetzt gerade eben nochmal ganz kurz nachgeschaut. Die WebVR-API ist deprecated, die gibt es irgendwie nicht mehr, das heißt jetzt WebXR. Gerade eben erst gelernt, wusste ich auch nicht, kann ich auch nicht viel zu sagen. Also ich wollte nur kurz einhaken und sagen, 3D wird meistens ja am Ende 2D.

00:35:14.580 --> 00:35:27.960
 Richtig, genauso wie bei Architektur-Visualisierung am Ende kommt ein Bild raus, egal mit welcher Technik das jetzt gemacht wird, Raytracing, das also wirklich Strahlen abschickt oder in Blender gibt es dann noch eine andere Technik, die das wieder ein bisschen anders macht.

00:35:27.960 --> 00:35:39.120
 Aber am Ende versuche ich, dreidimensionalen Raum in 2D darzustellen. Und das passiert natürlich auch, wenn WebGL das Ganze in Canvas-Element reinrechnet, reinrendert, meine ich.

00:35:39.120 --> 00:35:40.240
 Ja.

00:35:40.240 --> 00:35:56.360
 Genau, also es gibt bei 3JS, auf 3JS.org gibt es einige Demos und ich habe schon gesagt, viele sind tatsächlich einfach nur Tag-Demos. Da hat jemand wirklich gezielt einfach nur mal was demonstriert, wie man das nutzen könnte.

00:35:56.360 --> 00:36:14.420
 Also man kann mit einem sehr rudimentären 3D-Auto durch eine noch rudimentärere 3D-Landschaft fahren, mit der Tastatur, das ist nett, aber halt eben auch nur nett und nicht wirklich nützlich jetzt für eine Webseite, außer vielleicht von einem Hersteller, aber da müsste man das Ganze noch ein bisschen schicker machen.

00:36:15.320 --> 00:36:29.320
 Dann gibt es eine Demo, die nennt sich Infinitown. Da wird eine Stadt, so ein bisschen im Comic-3D-Stil, programmatisch gerendert und zwar endlos. Da kann ich rumscrollen und das wiederholt sich immer wieder, aber so, dass man es möglichst nicht merkt, dass es sich wiederholt.

00:36:31.320 --> 00:36:45.620
 Aber es sind, wie gesagt, hauptsächlich Tag-Demos. Es gibt ein paar Beispiele auf der Seite, die es sich anzuschauen lohnt, wo man wirklich sieht, wie man das Ganze aber auch richtig cool und richtig ansprechend in tatsächliche Seiten unterkriegen kann.

00:36:45.760 --> 00:37:02.420
 Das ist eine Demo, da poste ich natürlich auch die Links in die Shownotes. Eine zum Thema Wein, das ist ein Weingut oder zumindest ein Weinvertrieb im französischsprachigen Bereich, wo das in so einem Header-Visual ziemlich cool umgesetzt ist.

00:37:02.420 --> 00:37:15.780
 Also es lohnt sich, da mal drauf zu gehen. Es ist auch so ein kleiner Slider. Es gibt verschiedene Slides, wo man sich da anschauen kann und teilweise ist es mit Video, teilweise aber wirklich auch über WebGL umgesetzt und das macht einfach Spaß.

00:37:15.780 --> 00:37:24.100
 Also es sieht richtig wertig auch aus und so lässt sich das natürlich schon ganz cool einsetzen, um eine Webseite aufzuwerten, wo es eben Sinn macht.

00:37:24.540 --> 00:37:34.560
 Und die andere Demo, die es da gibt, ist zum Thema Mais. Ich glaube, es geht um genmodifizierten Mais, wenn ich das richtig verstanden habe. Ist aber auch egal. Es ist einfach cool gemacht.

00:37:34.560 --> 00:37:47.160
 Also es macht Spaß, sich da durchzuscrollen. Ich finde es auch ganz nett, wie das gemacht ist, dass man scrollt und scrollt aber nicht einfach nur eine Seite runter, sondern es wandert dann so hoch und man sieht rechts den Fortschritt mit so Kreisen, die sich aufhören.

00:37:47.160 --> 00:38:03.840
 Also ich finde es insgesamt ziemlich cool gemacht und es zeigt halt vor allem auch, was mit WebGL möglich ist, wo dann irgendwelche so DNA-Stränge dann hochkommen und ja, irgendwelche fancy Effekte, wenn man über den Text fährt und das ist eben alles damit möglich und das ist ziemlich cool.

00:38:03.840 --> 00:38:15.780
 Und da sieht man, es ist tatsächlich möglich, das im Web unterzubringen. Es wird nur noch nicht wirklich gemacht, weil wahrscheinlich das Know-how fehlt und weil viele davor zurückschrecken, sich vielleicht dem Thema anzunehmen.

00:38:17.160 --> 00:38:37.760
 Ich habe dazu aber auch noch eine Theorie, warum das nicht so viel gemacht wird. Ist, weil oftmals finde ich für viele Sachen die Anwendungsfälle fehlen. Es ist genau wie VR. Ich weiß nicht, ich bin mir nicht sicher, ob es wenig Anwendungsfälle gibt oder ob wir sie erst noch erfinden müssen.

00:38:37.760 --> 00:38:48.440
 Ob wir erst, sagen wir mal so, mit der Technologie kommt ja oft erst die Idee für den Anwendungsfall und es kann sein, dass wir einfach in unserem Mindset noch nicht so weit sind, dass es uns klar wird, hey, sowas geht eigentlich.

00:38:48.960 --> 00:39:03.700
 Es muss vielleicht auch sich erstmal durchsetzen, dass wir wissen, dass sowas geht, dass wir uns überhaupt dafür interessieren. Weil ich meine, da kommen wir nochmal zu dem allgemeinen Thema. Ist es Frontend oder kann das weg? Möchte ich was lernen, einfach nur um es gelernt zu haben oder habe ich einen konkreten Anwendungsfall?

00:39:03.820 --> 00:39:14.300
 Also in meinem Fall ist die Motivation, was Neues zu lernen, am allerhöchsten, wenn ich konkret irgendwas damit umsetzen will. Also wenn ich, ich habe jetzt ein Projekt und sage, hey, das kann ich jetzt nur mit WebGL lösen, dann muss ich es halt eben lernen.

00:39:14.400 --> 00:39:21.840
 Ja, da muss ich es mir jetzt anschauen und ansonsten so auf Halde lernen. Ich weiß nicht, ich glaube, ich kenne Leute, die das können. Mir fällt das sehr schwer.

00:39:21.840 --> 00:39:32.980
 Ja, da ist durchaus was dran. Aber wir hätten natürlich jetzt auch schon fast ein Jahrzehnt gehabt, um Anwendungsfälle zu finden. Aber die Anwendungsfälle sind auf jeden Fall durchaus da.

00:39:32.980 --> 00:39:42.120
 Also es gibt sie, das zeigen die beiden Demos ganz deutlich. Was die Demos aber auch zeigen, sind Ladezeiten. Das hat mich dann doch wieder an Flash erinnert.

00:39:42.120 --> 00:39:53.160
 Also man sieht erstmal so einen Text loading your experience und einen Loader, bis da im Hintergrund was geladen wird. Also es sind halt natürlich auch entsprechende Datenmengen, die da erstmal in den Browser geladen werden müssen.

00:39:53.560 --> 00:40:15.520
 Das wird bei WebGL aber noch schlimmer. Dazu kommen wir dann gleich noch. Zwei Demos, die ich da noch hervorheben möchte, weil wir ja beide auch so ein bisschen musikalisch durchaus inspiriert sind, sind zwei Audio-Demos, die auch Web-Audio, was ja auch wieder eine dieser neumodischen Web-APIs ist.

00:40:15.520 --> 00:40:17.400
 Das klingt so negativ.

00:40:17.400 --> 00:40:27.320
 Nein, es geht ja generell um, dass man überschwemmt wird von so neumodischen, dieser ganze neumodischen Kram. Da kann ich als Web-Opa nichts mit anfangen.

00:40:27.320 --> 00:40:39.200
 Genau, also diese beiden Demos. Das eine ist glaube ich so ein, ja ich dachte zuerst, das wäre so ein Indie-Label, das da irgendwie Songs vorstellt. Das ist aber eigentlich auch wieder nur eine Google-Tag-Demo.

00:40:39.920 --> 00:40:53.280
 Und das zweite ist auch auf 3.js wieder so eine Tag-Demo. Aber es ist beides ganz cool, weil eben zusätzlich zu dem visuellen, räumlichen 3D auch die Audio-Wiedergabe sich anpasst.

00:40:53.380 --> 00:41:05.940
 Das heißt, wenn ich, das sind dann so Böppel um einen rum, wo dann, die dann als Musikquelle dienen und wenn ich mich da im Raum eben mit der Maus bewege, dann kommt der Böppel hinter mir halt wirklich, auch wenn ich es über Kopfhörer höre, hinter mir.

00:41:06.520 --> 00:41:23.260
 Und das vor mir kommt vor mir und wenn ich näher rangehe, wird es lauter und wird leiser, wenn ich weggehe und so. Also das ist, ja das ist einfach absolute Immersion. Aber halt auch sehr technisch. Ich würde gerne mal was sehen, wo man das, ja nicht nur als Tag-Demo, sondern wirklich cool miterleben kann.

00:41:23.260 --> 00:41:28.400
 Von mir aus auch als Kunstprojekt. Das muss ja nicht mal eine Webseite sein, die irgendwie was bewirbt oder so. Ja, bitte.

00:41:29.420 --> 00:41:33.100
 Vorne und hinten. Ich nehme mal an, du hast Stereo-Kopfhörer, oder?

00:41:33.100 --> 00:41:34.220
 Ja.

00:41:34.220 --> 00:41:46.520
 Da frage ich, ich habe keine Ahnung, wie das funktioniert. Ich habe auch davon gehört, dass es irgendwie gehen soll, aber wie kannst du vorne und hinten hören bei Stereo-Kopfhörern, die du links und rechts auf den Ohren hast? Also wie wird das gemacht? Hast du eine Ahnung?

00:41:46.520 --> 00:41:52.400
 Das stimmt, das hat wahrscheinlich eine gute Frage.

00:41:52.900 --> 00:41:54.480
 Also ich meine, offenbar funktioniert es ja.

00:41:54.480 --> 00:42:14.400
 Also ich meine generell, um mal kurz einen Biologie-Exkurs zu machen, für alle, die in der Schule in Biologie nicht aufgepasst haben. Also grundsätzlich funktioniert ja die Klangortung so, dass ich eine Geräuschquelle auf dem rechten Ohr lauter wahrnehme als auf dem linken, beziehungsweise zusätzlich spielt damit rein, dass sie am rechten Ohr ganz minimal früher ankommt als auf dem linken.

00:42:15.060 --> 00:42:15.340
 Genau.

00:42:15.520 --> 00:42:27.500
 Und dadurch kann das Ohr halt entscheiden, okay, wenn das rechts früher ankommt als links, auch wenn das nur ein paar Millisekunden sind, so fein kann das Gehör auflösen, um zu entscheiden, okay, das kommt von rechts oder das kommt von links. Aber es ist tatsächlich eine gute Frage, kommt es von vorne, kommt es von hinten?

00:42:27.500 --> 00:42:39.740
 Ja, da gibt es sowas wie Phasenverschiebung, aber da hört dann mein Wissen auch schon auf, was das angeht. Vielleicht kann es jemand klären, dann sagen wir es in einer der nächsten Folgen, wie das funktioniert.

00:42:39.740 --> 00:42:40.860
 Ja, das würde mich jetzt auch interessieren.

00:42:40.860 --> 00:42:44.340
 Kommentarfunktion auf unserer Seite benutzen und schauen, ob sie funktionieren.

00:42:44.340 --> 00:42:45.800
 Und wenn es nur dafür ist, bitte, bitte.

00:42:45.800 --> 00:42:51.060
 Und wenn sie nicht funktioniert, nicht frustriert abziehen, sondern uns irgendwie eine Mail schreiben oder bei Twitter irgendwie melden.

00:42:51.060 --> 00:42:55.240
 Sondern hinterlassen uns einen Kommentar, dass die Kommentarfunktion nicht funktioniert.

00:42:55.240 --> 00:42:56.840
 Also wirklich, das sind die schlimmsten Situationen.

00:42:56.840 --> 00:43:00.360
 Wir haben ja genug Kanäle, wo man uns dann drauf anhauen kann.

00:43:00.360 --> 00:43:06.720
 Genau, also einen anderen, weniger von uns kaputt gemachten Kanal benutzen, um uns dann Bescheid zu sagen.

00:43:06.720 --> 00:43:14.020
 Genau, weil das interessiert mich wirklich, weil ich hatte das auch schon, dass ich dachte, da kommt jetzt was von vorne oder von hinten.

00:43:14.020 --> 00:43:18.640
 Oder man hat so dieses Gefühl, so wie im Kino, da geht jetzt einmal was, einmal rund.

00:43:18.640 --> 00:43:20.660
 Also mit guten Kopfhörern kann man das irgendwie haben.

00:43:20.660 --> 00:43:22.900
 Aber eigentlich kann es gar nicht sein.

00:43:22.900 --> 00:43:27.340
 Also vielleicht fehlt mir aber auch irgendwie nur Wissen, um es zu verstehen.

00:43:27.340 --> 00:43:30.380
 Genau, ein Schubende.

00:43:30.380 --> 00:43:35.360
 Ja, das war es eigentlich jetzt auch schon zum Thema WebGL.

00:43:35.360 --> 00:43:39.680
 Wie gesagt, die Links zu den ganzen Demos, die gibt es dann in den Shownotes.

00:43:40.240 --> 00:43:42.120
 Und ganz kurz noch zum Browser-Support.

00:43:42.120 --> 00:43:46.580
 Der ist tatsächlich relativ hoch, überrascht jetzt auch nicht nach mittlerweile einem Jahrzehnt fast.

00:43:46.580 --> 00:43:53.060
 97,47 Prozent inklusive IE11, man höre und staune, und Edge.

00:43:53.060 --> 00:43:58.960
 Und die Version 2 von WebGL bei gerade mal 75,1 Prozent.

00:43:58.960 --> 00:44:04.480
 Kein IE natürlich, Edge seitdem es jetzt auf Chromium umgestellt ist.

00:44:04.480 --> 00:44:07.360
 Und leider Safari nur mit Flag.

00:44:07.860 --> 00:44:12.200
 Und wie ich gelesen habe, wohl auch seit ein paar Jahren schon nicht mehr wirklich aktiv weiterentwickelt.

00:44:12.200 --> 00:44:17.600
 Das ist natürlich sehr schade, weil das natürlich schon als Bremse fungieren kann.

00:44:17.600 --> 00:44:24.520
 Aber die ganzen Demos, bis auf irgendwie eine Handvoll auf der 3.js-Seite, sind mit WebGL 1 gemacht.

00:44:24.520 --> 00:44:26.200
 Und nur ganz wenige mit WebGL 2.0.

00:44:26.200 --> 00:44:28.360
 Also man kann da auch jetzt schon ein cooles Zollbild machen.

00:44:28.360 --> 00:44:30.780
 Man muss es nur wollen und man muss es natürlich auch können.

00:44:30.780 --> 00:44:36.000
 Ich glaube, wenn ich ein interessantes Produkt habe, das mit WebGL 2 gemacht ist,

00:44:36.380 --> 00:44:40.180
 dann kann ich vielleicht auch meine Nutzer, auch wenn man das nicht unbedingt sollte, dazu erziehen,

00:44:40.180 --> 00:44:43.020
 dass sie dann dafür eben den entsprechenden Browser verwenden.

00:44:43.020 --> 00:44:49.940
 Gut, weil es natürlich mobil auch unter iOS auf Apple-Geräten nicht funktioniert.

00:44:49.940 --> 00:44:51.180
 Aber gut, anderes Thema.

00:44:51.180 --> 00:44:53.440
 Wir wollen mich schon wieder Apple haten.

00:44:53.440 --> 00:45:01.120
 Ja, dann kommen wir zu WebAssembly, auch WASM abgekürzt, W-A-S-M.

00:45:02.400 --> 00:45:11.300
 Das ist ein offizieller W3C-Standard für ein portables Binär-Code-Format zur Ausführung von Code aus verschiedenen Programmiersprachen im Browser.

00:45:11.300 --> 00:45:13.440
 Ja, ich habe das abgelesen.

00:45:13.440 --> 00:45:15.880
 Quatsch.

00:45:16.120 --> 00:45:22.080
 In erster Linie ist das gedacht für relativ Low-Level-Sprachen wie C oder C++.

00:45:22.900 --> 00:45:30.440
 Aber durch Interpreter kann man zum Beispiel auch .NET-Sprachen benutzen, C-Sharp, Go, Java, um nur einige zu nennen.

00:45:30.440 --> 00:45:35.340
 Auf der Seite webassembly.org ist eine ganze Liste an Sprachen, die da unterstützt werden.

00:45:35.340 --> 00:45:39.120
 Und das Ganze ist auch schon 2017 erschienen.

00:45:39.120 --> 00:45:41.300
 Das heißt, das ist tatsächlich ein bisschen neuer.

00:45:41.300 --> 00:45:43.280
 Natürlich sind jetzt auch schon wieder drei Jahre.

00:45:43.820 --> 00:45:47.200
 aber doch eine aktuellere Technik jetzt im Vergleich mit WebGL.

00:45:47.200 --> 00:45:52.180
 Und wichtig zu sagen ist, das soll jetzt nicht irgendwie JavaScript ersetzen.

00:45:52.180 --> 00:45:57.120
 Jetzt nehmen uns plötzlich die ganzen C-Sharp-Entwickler die Arbeitsplätze weg.

00:45:57.120 --> 00:46:03.600
 Sondern es ist als Ergänzung gedacht für besonders performance-hungrige Anwendungsfälle.

00:46:03.600 --> 00:46:12.640
 Aber auch zum eben einfacheren Konvertieren von bestehender Software, die in anderen Sprachen geschrieben ist, für den Browser.

00:46:13.820 --> 00:46:18.280
 Es ist natürlich schneller als JavaScript, weil es näher am Maschinencode ist.

00:46:18.280 --> 00:46:21.040
 Und es muss nicht gepasst werden. Das ist der große Vorteil.

00:46:21.040 --> 00:46:25.680
 Und dadurch habe ich natürlich einen großen Geschwindigkeitsvorteil.

00:46:25.680 --> 00:46:29.440
 Nachteil ist, es gibt keinen direkten DOM-Zugriff.

00:46:29.440 --> 00:46:32.400
 Das ganze Ding ist in so einer eigenen Sandbox.

00:46:32.400 --> 00:46:36.420
 Aber über Proxy-Funktionen ist es auch möglich, aufs DOM zuzugreifen.

00:46:36.420 --> 00:46:41.140
 Das funktioniert so ein bisschen wie Imports und Exports bei JavaScript-Modulen.

00:46:41.140 --> 00:46:48.560
 Also ich importiere mir aus dem DOM-Kontext Dinge rein, die ich dann in WebAssembly benutzen kann.

00:46:48.560 --> 00:46:54.180
 Und ich kann auch Methoden exportieren, die dann öffentlich aufgerufen und ausgeführt werden können.

00:46:54.180 --> 00:47:03.380
 Und das kann dann zum Beispiel auch wieder mit WebGL interagieren, um irgendwas performance-hungriges erstmal zu berechnen und dann eben auch mit WebGL darzustellen.

00:47:04.660 --> 00:47:07.200
 Ja, warum macht man das? Du lachst.

00:47:07.200 --> 00:47:15.520
 Ja, bei dem würde ich sagen, sofern ihr damit in Berührung gekommen seid, habt ihr es wahrscheinlich gar nicht gemerkt.

00:47:15.520 --> 00:47:18.420
 Also das merkst du ja nicht unbedingt.

00:47:18.420 --> 00:47:20.800
 Naja, ich sage gleich noch, woran man es merkt.

00:47:21.840 --> 00:47:24.880
 Aber erstmal, warum hat das jemand gemacht?

00:47:24.880 --> 00:47:29.960
 Also das war tatsächlich 2010, glaube ich, erstmal so ein bisschen Proof of Concept.

00:47:29.960 --> 00:47:33.160
 Da kam mScripten auf den Markt.

00:47:33.160 --> 00:47:39.520
 Das ist eine Software, ein Compiler, der C oder C++-Code in JavaScript übersetzt.

00:47:41.580 --> 00:47:52.100
 Und das Spiele-Studio Epic, das man vielleicht auch kennt, hat dann die Unreal-Game-Engine damit einfach mal eben so im Browser laufen lassen.

00:47:52.100 --> 00:47:56.180
 Und ich glaube, da hat dann auch damals Heise und sowas darüber berichtet.

00:47:56.180 --> 00:47:59.800
 Also das war dann schon so, oh wow, man kann das jetzt im Browser laufen lassen.

00:47:59.800 --> 00:48:04.100
 So richtig performant war es, glaube ich, aber nicht.

00:48:04.100 --> 00:48:07.740
 Ich hätte mich gern mal davon überzeugt, es gab diese Unreal-Citadel-Demo.

00:48:07.960 --> 00:48:11.000
 Und ich habe dazu leider keinen funktionierenden Link mehr gefunden.

00:48:11.000 --> 00:48:15.920
 Also das war so das erste Ding, wow, man kann diese Engine da im Browser benutzen.

00:48:15.920 --> 00:48:17.860
 Und sah wohl auch schon relativ cool aus.

00:48:17.860 --> 00:48:23.960
 Wenn da jemand noch einen funktionierenden Link dazu findet, gerne, dass wir den nachreichen können, uns einfach melden.

00:48:23.960 --> 00:48:31.380
 Ja, und dann hat man festgestellt, das ist schön und gut, dass es funktioniert, aber natürlich ist es nicht wirklich performant.

00:48:31.380 --> 00:48:37.380
 Und dann hat das mScripten-Team in Zusammenarbeit mit Mozilla und Epic 2013 ASM,

00:48:37.960 --> 00:48:39.260
 JS rausgebracht.

00:48:39.260 --> 00:48:44.940
 Und ich habe mich da jetzt nicht so komplett tief eingelesen, aber wenn ich es richtig verstanden habe,

00:48:44.940 --> 00:48:49.720
 ist das einfach eine Untermenge von JavaScript, einfach ein bisschen zusammengestrichen,

00:48:49.720 --> 00:48:51.840
 um effizienter arbeiten zu können.

00:48:51.840 --> 00:48:58.460
 Und damit war es dann möglich, mit dem Kompilieren von mScripten und diesem ASM-JS als Basis,

00:48:58.460 --> 00:49:00.420
 die Performance nochmal ein bisschen zu erhöhen.

00:49:00.900 --> 00:49:06.020
 Aber auch das war natürlich nicht so performant, wie wenn ich was nativ laufen lasse.

00:49:06.020 --> 00:49:10.440
 Und dann hat man sich zusammengetan noch mit ein paar anderen, ich weiß gar nicht,

00:49:10.440 --> 00:49:13.300
 wer da alles noch mit in dem Konsortium dann mit drin war,

00:49:13.300 --> 00:49:17.060
 aber jedenfalls mit dem W3C-Konsortium ist da dieser Standard entstanden,

00:49:17.060 --> 00:49:20.680
 wurde Wasm, W-A-S-M, WebAssembly entwickelt.

00:49:21.360 --> 00:49:25.780
 Und es gibt da eine Demo, die ich natürlich auch in den Shownotes verlinken werde,

00:49:25.780 --> 00:49:31.200
 die direkt JavaScript versus WebAssembly aufzeigt.

00:49:31.200 --> 00:49:36.480
 Das ist so ein 3D-Ding, mit Sicherheit auch wieder WebGL fürs tatsächliche Rendern dann.

00:49:36.480 --> 00:49:38.780
 Da laufen so Figuren zufällig rum.

00:49:38.780 --> 00:49:42.240
 Erstmal nur zehn Stück und manche laufen nur geradeaus, andere bewegen sich.

00:49:42.900 --> 00:49:47.180
 Und ich kann das einmal mit JavaScript machen lassen und ich kann das mit WebAssembly machen lassen

00:49:47.180 --> 00:49:50.220
 und kann diese Anzahl an Figuren hochschrauben.

00:49:50.220 --> 00:49:54.300
 Und ich hätte jetzt erwartet, also ich meine, man merkt natürlich schon einen deutlichen Unterschied

00:49:54.300 --> 00:49:58.760
 zwischen JavaScript und WebAssembly von der Flüssigkeit her, der Bewegungen.

00:49:58.760 --> 00:50:01.260
 Und es läuft auch oben so wie so ein FPS-Meter.

00:50:01.260 --> 00:50:02.500
 Es ist, glaube ich, aber nicht FPS.

00:50:02.500 --> 00:50:03.900
 Ich weiß aber nicht genau, was es darstellt.

00:50:03.900 --> 00:50:09.260
 Aber man sieht jedenfalls, Wasm kann da deutlich mit deutlich größeren Mengen umgehen als JavaScript.

00:50:09.640 --> 00:50:14.780
 Aber wenn man das Ganze so Richtung 100, 125 Männchen hochfährt,

00:50:14.780 --> 00:50:17.020
 was ich jetzt noch gar nicht so viel finde,

00:50:17.020 --> 00:50:21.160
 dann merkt man, dass selbst Wasm ins Stocken gerät.

00:50:21.160 --> 00:50:24.220
 Vielleicht sollte ich auch mal meinen Rechner ab und zu neu starten.

00:50:24.220 --> 00:50:26.500
 Vielleicht liegt es auch daran, dass sich mein Speicher vollgefressen hat.

00:50:26.500 --> 00:50:28.580
 Ich weiß es nicht, habe mich aber überrascht, weil ich jetzt dachte,

00:50:28.580 --> 00:50:31.500
 okay, der Unterschied müsste deutlich dramatischer sein.

00:50:31.500 --> 00:50:35.080
 Aber es scheint gute Gründe zu geben, Wasm zu nutzen.

00:50:35.080 --> 00:50:40.220
 Google Earth hat vor einer Weile, also Google hat vor einer Weile Google Earth geupdatet

00:50:40.220 --> 00:50:42.620
 mit einer neuen Version im Browser.

00:50:42.620 --> 00:50:45.360
 Und das basiert auch auf WebAssembly.

00:50:45.360 --> 00:50:49.380
 Und da gibt es auch einen Blogbeitrag über die Hintergründe,

00:50:49.380 --> 00:50:51.380
 warum man sich dazu entschieden hat und wie man,

00:50:51.380 --> 00:50:53.140
 was für Schwierigkeiten man vorher hatte,

00:50:53.140 --> 00:50:55.280
 bevor man sich auf die Technik geeinigt hat,

00:50:55.280 --> 00:50:58.660
 eben Google Earth, was ja doch sehr ressourcenhungrig ist,

00:50:58.660 --> 00:51:00.600
 eben im Browser darzustellen.

00:51:01.180 --> 00:51:03.880
 Und was ich jetzt vorhin meinte, woran man dann doch merkt,

00:51:03.880 --> 00:51:09.140
 dass es WebAssembly ist, da werden halt mal eben 16 MB runtergeladen,

00:51:09.140 --> 00:51:10.720
 nur um das ausführen zu können.

00:51:10.720 --> 00:51:17.440
 Und 16 MB, ja okay, wenn du vier hochauflösende Bilder auf die Seite packst,

00:51:17.440 --> 00:51:19.880
 was manche Leute auch ohne Skrupel tun, dann hast du das auch voll.

00:51:19.880 --> 00:51:23.580
 Aber es ist halt schon eine Menge und man sitzt halt schon kurz davor

00:51:23.580 --> 00:51:24.820
 und wartet, bis das geladen ist.

00:51:24.820 --> 00:51:28.380
 Mit Brodli sind es dann nur noch 3,6, die dann tatsächlich auch übertragen werden.

00:51:28.460 --> 00:51:31.680
 Aber es dauert trotzdem, also man sitzt schon eine Weile vor diesem Loader

00:51:31.680 --> 00:51:33.040
 und wartet, dass was passiert.

00:51:33.040 --> 00:51:35.120
 Aber das Ergebnis ist natürlich auch cool.

00:51:35.120 --> 00:51:36.900
 So Google Earth im Browser, nicht schlecht.

00:51:36.900 --> 00:51:42.860
 Kannst du mir sagen, was ich denn in der Netzwerkanalyse sehe,

00:51:42.860 --> 00:51:44.760
 wenn WebAssembly runtergeladen wird?

00:51:44.760 --> 00:51:46.960
 Ich habe jetzt gerade eine Seite, von der ich dachte,

00:51:46.960 --> 00:51:49.040
 dass da WebAssembly im Einsatz ist.

00:51:49.040 --> 00:51:52.100
 Das müsste bei XHR, müsste das mit drunter sein,

00:51:52.100 --> 00:51:55.560
 weil das wird in der Regel per Window Fetch oder sonstigen geladen.

00:51:56.480 --> 00:51:57.600
 Ich habe es gerade gefunden.

00:51:57.600 --> 00:51:59.060
 Normales HTTP-Request.

00:51:59.060 --> 00:52:05.320
 Und als, du legst ja fest, was du erwartest als Rückgabewert,

00:52:05.320 --> 00:52:07.720
 ob jetzt JSON oder HTML oder was auch immer,

00:52:07.720 --> 00:52:11.840
 da wird dann eine Byte-Array, glaube ich, einfach angegeben.

00:52:11.840 --> 00:52:13.160
 Und dann wird das wirklich als.

00:52:13.160 --> 00:52:13.180
 In welchem Browser?

00:52:13.180 --> 00:52:15.900
 Bei Firefox war das zumindest.

00:52:15.900 --> 00:52:20.800
 Okay, also ich habe nämlich jetzt gerade ganz kurz live eingespielt.

00:52:21.200 --> 00:52:23.460
 Dann ist das nämlich tatsächlich WebAssembly, was ich hier gefunden habe.

00:52:23.460 --> 00:52:24.660
 Das sage ich gleich noch, was es ist.

00:52:24.660 --> 00:52:30.120
 Also im Netzwerkanalyse-Tab von den DevTools von Firefox sehe ich jetzt hier,

00:52:30.120 --> 00:52:32.580
 ist tatsächlich über, also Ursprung ist Fetch,

00:52:32.580 --> 00:52:35.780
 wurde also über ein JavaScript Fetch nachgeladen.

00:52:35.780 --> 00:52:40.520
 Und der Typ, der angegeben wird, ist tatsächlich Wasm, steht da.

00:52:40.640 --> 00:52:44.800
 Und in dem Fall ist das Ding nur 61 Kilowatt groß.

00:52:44.800 --> 00:52:45.320
 Oh ja, gut.

00:52:45.320 --> 00:52:46.960
 Ja, das ist eigentlich ganz okay.

00:52:46.960 --> 00:52:49.420
 Vielleicht erwähne ich auch mal kurz, was es ist.

00:52:49.420 --> 00:52:54.760
 Mir fiel nämlich ein, als du gerade erzählt hast, was man damit so machen kann,

00:52:54.760 --> 00:52:57.280
 fiel mir ein, ich habe ja schon mal eine Demo gesehen

00:52:57.280 --> 00:52:59.620
 und ich bin ja regelrecht süchtig danach geworden, nach dem Ding.

00:52:59.660 --> 00:53:00.200
 Was heißt Demo?

00:53:00.200 --> 00:53:01.900
 Es funktioniert schon richtig.

00:53:01.900 --> 00:53:04.920
 Und zwar heißt das Ding Sandspiel.club.

00:53:04.920 --> 00:53:08.380
 Das ist auch ganz ernst gemeint.

00:53:08.380 --> 00:53:11.980
 Also das ist eine Art Spiel, wo man sich sein Ziel selbst definiert.

00:53:11.980 --> 00:53:13.420
 Ich höre schon, der Konstantin tippt es gerade mal ein.

00:53:13.420 --> 00:53:16.800
 Ja, ich tippel, tippel, tippel mit meiner ultra leisen mechanischen Tastatur.

00:53:16.800 --> 00:53:18.700
 Genau.

00:53:18.700 --> 00:53:23.160
 Das ist, wie soll ich sagen, du hast quasi einen Canvas,

00:53:23.160 --> 00:53:26.080
 auf den kannst du verschiedene Materialien kippen.

00:53:26.080 --> 00:53:28.180
 Manche fallen nach unten, manche bleiben da, wo sie sind.

00:53:28.380 --> 00:53:30.860
 Also zum Beispiel, die haben physische Eigenschaften,

00:53:30.860 --> 00:53:39.420
 also zum Beispiel Wasser, Stein, Eis, Gas, Feuer, Lava, Pilze, Säure und so weiter.

00:53:39.420 --> 00:53:42.680
 Und die Materialien, je nachdem, wie man die kombiniert, interagieren die miteinander.

00:53:42.680 --> 00:53:43.920
 Also die Blumen sind sehr stabil.

00:53:43.920 --> 00:53:47.360
 Die kann man mit Stein bewerfen und der Stein häuft sich drumherum an.

00:53:47.360 --> 00:53:51.080
 Ja, dann bitte mal ein bisschen Säure draufwerfen, dann sind die auch weg.

00:53:51.080 --> 00:53:52.680
 Genau.

00:53:52.680 --> 00:53:55.200
 Was da passiert ist, also da kann man sehr, sehr,

00:53:55.200 --> 00:53:57.560
 der Canvas ist jetzt nicht wirklich riesig groß,

00:53:57.960 --> 00:53:59.820
 aber man kann relativ viele,

00:53:59.820 --> 00:54:03.420
 ich sag's mal so, jeder Pixel ist tatsächlich ein Element,

00:54:03.420 --> 00:54:06.100
 das eine Eigenschaft hat und mit seiner Umwelt interagiert.

00:54:06.100 --> 00:54:09.780
 Also ich kann mir vorstellen, dass da eine Menge Aktionen stattfinden,

00:54:09.780 --> 00:54:11.220
 wo jetzt berechnet werden muss.

00:54:11.220 --> 00:54:14.760
 Ein Pixel interagiert immer mit allen, die drumherum sind

00:54:14.760 --> 00:54:17.360
 und die wiederum mit allen, die drumherum sind und so weiter.

00:54:17.360 --> 00:54:19.420
 Und ich glaube, das multipliziert sich relativ schnell hoch.

00:54:19.420 --> 00:54:22.780
 Ich habe den Code von dem Sense-Spiel jetzt noch nicht gesehen.

00:54:23.340 --> 00:54:25.660
 Ich weiß auch gar nicht, ob man den irgendwo sehen kann.

00:54:25.740 --> 00:54:29.120
 Auf jeden Fall, der Entwickler, der dieses Spiel,

00:54:29.120 --> 00:54:31.280
 ich weiß nicht, ob es wirklich ein Spiel ist,

00:54:31.280 --> 00:54:37.520
 entwickelt hat, der hat auf der JS-Conf letztes Jahr in Berlin das vorgestellt

00:54:37.520 --> 00:54:40.020
 und ich habe danach irgendwie stundenlang damit rumgespielt,

00:54:40.020 --> 00:54:41.280
 weil es einfach mega Spaß macht.

00:54:41.400 --> 00:54:45.080
 Also es fiel mir jetzt so ein, spontan als Wasm-Demo.

00:54:45.080 --> 00:54:47.600
 Ja, wir müssen jetzt leider auch aufhören.

00:54:47.600 --> 00:54:52.380
 Mir gefällt sehr, dass die Säure aussieht wie Grog

00:54:52.380 --> 00:54:54.100
 und sich auch so verhält aus Monkey Island.

00:54:55.780 --> 00:55:05.080
 Also wenn ihr nicht demnächst arbeitsunfähig sein wollt,

00:55:05.080 --> 00:55:06.740
 jetzt mal ganz abgesehen von irgendwelchen Krankheiten,

00:55:06.740 --> 00:55:07.580
 die man sich holen kann,

00:55:07.580 --> 00:55:09.520
 sondern weil ihr nur noch das spielt,

00:55:09.520 --> 00:55:11.380
 dann einfach nicht diesen Link anklicken.

00:55:11.380 --> 00:55:12.560
 Vielleicht machen wir eine Kapitelmarke,

00:55:12.560 --> 00:55:14.180
 dass man das dann rüberspielen kann.

00:55:14.180 --> 00:55:16.520
 So Achtung, Suchtgefahr.

00:55:16.520 --> 00:55:19.820
 Und man fragt sich auch, warum man das gerne macht.

00:55:19.820 --> 00:55:21.720
 Also irgendwie bei mir trifft er da einen Nerv.

00:55:22.460 --> 00:55:25.060
 Egal, ihr könnt ja mal in den Kommentaren berichten,

00:55:25.060 --> 00:55:27.260
 falls ihr damit rumgespielt habt, was ihr damit gebaut habt.

00:55:27.260 --> 00:55:29.920
 Man kann nämlich auch dabei, also wenn wir schon dabei sind,

00:55:29.920 --> 00:55:33.100
 man kann auch das, was man gebaut hat, hochladen.

00:55:33.100 --> 00:55:34.120
 Da gibt es einen Upload-Button.

00:55:34.120 --> 00:55:37.020
 Und genauso kann man auch auf Browse Sachen sehen,

00:55:37.020 --> 00:55:38.520
 die andere gebaut haben.

00:55:38.520 --> 00:55:42.840
 Ganz beliebt sind, glaube ich, verschiedene Vulkan-Kombinationen.

00:55:42.840 --> 00:55:44.560
 Das ist irgendwie so, wie schaffe ich es denn,

00:55:44.560 --> 00:55:46.860
 einen Vulkan zu machen, der immer Feuer spuckt und so damit.

00:55:46.860 --> 00:55:49.060
 Einfach mal ein bisschen mit rumspielen.

00:55:49.060 --> 00:55:51.600
 Also auf jeden Fall auch mal inspirieren lassen von dem,

00:55:51.740 --> 00:55:52.680
 was die anderen so da machen.

00:55:52.680 --> 00:55:55.100
 Ja, dann weiß ich jetzt schon, was ich die nächsten Tage tue.

00:55:55.100 --> 00:55:57.580
 Oh je.

00:55:57.580 --> 00:55:59.180
 Aber ja, super, toll.

00:55:59.180 --> 00:56:01.660
 Guck, was du angerichtet hast.

00:56:01.660 --> 00:56:02.920
 Nichts mit schneiden.

00:56:02.920 --> 00:56:04.380
 Bis Sonntag geht die Folge nicht live.

00:56:04.380 --> 00:56:08.580
 Aber Spiele war tatsächlich eine ganz gute Überleitung.

00:56:08.580 --> 00:56:12.380
 Das ist nämlich ein Großteil von dem,

00:56:12.380 --> 00:56:16.620
 was wirklich Nutzen davon hat, sind Spiele im Browser.

00:56:16.620 --> 00:56:19.440
 Ich meine, es hat ja auch so angefangen mit der Unreal Engine.

00:56:19.980 --> 00:56:24.560
 Aber neben Unreal haben zum Beispiel auch die Spiele-Engines Unity und Godot,

00:56:24.560 --> 00:56:26.760
 was jetzt gerade so auch so ein bisschen gehypt wird,

00:56:26.760 --> 00:56:30.040
 haben die Möglichkeit, dann HTML5-Export zu machen,

00:56:30.040 --> 00:56:34.340
 der dann eben auch Wasm benutzt, um das Ganze im Browser wiederzugeben.

00:56:34.340 --> 00:56:37.640
 Funktioniert, soweit ich weiß, auch intern mit diesem M-Scripten.

00:56:39.260 --> 00:56:42.180
 Und am Schluss hat man dann Wasm und kann das in den Browser laden

00:56:42.180 --> 00:56:44.720
 und kann irgendwelche sinnlosen Spiele daddeln.

00:56:44.720 --> 00:56:45.500
 Super.

00:56:45.500 --> 00:56:48.020
 Ja, ich glaube, es gibt aber auch einige.

00:56:48.020 --> 00:56:50.400
 Ja, es gibt sehr viele.

00:56:50.400 --> 00:56:53.880
 Das Internet Archive, das man vielleicht auch kennt,

00:56:53.880 --> 00:56:57.320
 weil das diverse oder fast alle, die es nicht geblockt haben,

00:56:57.320 --> 00:56:59.300
 Internetseiten archiviert,

00:57:00.040 --> 00:57:05.120
 hat auch einen DOS-Box-Emulator im Browser zur Verfügung gestellt,

00:57:05.120 --> 00:57:10.260
 mit dem man tausende DOS- und PC-Spiele im Browser spielen kann,

00:57:10.260 --> 00:57:11.120
 emuliert.

00:57:11.120 --> 00:57:13.660
 Ich habe mir es dann nicht angeguckt,

00:57:13.660 --> 00:57:17.200
 aus Gründen, wie viel es da gibt und was es da alles gibt,

00:57:17.200 --> 00:57:19.860
 weil ich glaube, dann würde ich tatsächlich die nächsten Tage

00:57:19.860 --> 00:57:20.720
 nichts mehr anderes machen.

00:57:22.420 --> 00:57:27.180
 Es gibt aber tatsächlich auch noch andere Anwendungsfälle außer Zocken.

00:57:27.180 --> 00:57:31.140
 Und zwar möchte ich da noch nennen PocketSphinx.js.

00:57:31.140 --> 00:57:32.860
 Das ist eine Spracherkennungssoftware,

00:57:32.860 --> 00:57:35.720
 ursprünglich in C, glaube ich, geschrieben,

00:57:35.720 --> 00:57:39.140
 die auch komplett im Browser läuft.

00:57:39.140 --> 00:57:43.880
 Website, also nicht Website wie die Webseite,

00:57:43.880 --> 00:57:47.920
 sondern Website, die Sicht, ist auch eine Demo,

00:57:47.920 --> 00:57:51.520
 die ich leider nicht mehr gefunden habe.

00:57:51.620 --> 00:57:52.900
 Das war eine Gesichtserkennung,

00:57:52.900 --> 00:57:57.640
 wo man dann WebAssembly gegen ASM.js,

00:57:57.640 --> 00:58:00.880
 gegen Vanilla JavaScript antreten lassen konnte.

00:58:00.880 --> 00:58:02.180
 Das hätte mich mal interessiert zu sehen.

00:58:02.180 --> 00:58:04.900
 Wenn da jemand den Link findet,

00:58:04.900 --> 00:58:06.420
 dann gerne auch wieder mitteilen,

00:58:06.420 --> 00:58:08.240
 dass wir den in die Shownotes posten können.

00:58:08.240 --> 00:58:11.240
 Und dann möchte ich noch anmerken,

00:58:11.240 --> 00:58:12.680
 dass ich ganz viel von dem Hintergrund wissen,

00:58:12.680 --> 00:58:15.400
 weil ich mich jetzt eben auch geradezu zu Wasm

00:58:15.400 --> 00:58:18.460
 erstmal heftig einlesen musste.

00:58:18.980 --> 00:58:22.620
 Die habe ich aus einem Tech-Blog von Thalia.

00:58:22.620 --> 00:58:26.640
 Der beginnt auch ungefähr mit den Worten,

00:58:26.640 --> 00:58:31.140
 was hat denn ein Multi-Channel-Online-

00:58:31.140 --> 00:58:34.140
 und Offline-Buchhändler mit solchen Techniken zu tun.

00:58:34.140 --> 00:58:36.400
 Aber da sitzen natürlich auch im Hintergrund

00:58:36.400 --> 00:58:38.900
 irgendwelche Nerds, die sich mit sowas beschäftigen

00:58:38.900 --> 00:58:40.760
 und dann bloggen die auch sogar darüber.

00:58:40.760 --> 00:58:42.640
 Also das fand ich ganz cool.

00:58:42.640 --> 00:58:45.220
 Und viele von den Links habe ich auch daher

00:58:45.220 --> 00:58:48.240
 und viele von den Informationen jetzt zu WebAssembly.

00:58:49.060 --> 00:58:50.940
 Deswegen möchte ich natürlich das auch als Quelle

00:58:50.940 --> 00:58:53.060
 nicht unerwähnt lassen und verlinke das auch.

00:58:53.060 --> 00:58:58.460
 Und wenn jemand selber Know-How in C oder in Rust hat,

00:58:58.460 --> 00:59:00.820
 Rust muss ich auch gestehen,

00:59:00.820 --> 00:59:03.560
 ist mir vorher schon mal begegnet,

00:59:03.560 --> 00:59:06.380
 aber so richtig konnte ich damit bisher auch nichts anfangen.

00:59:06.380 --> 00:59:09.080
 Okay, also Rust ist auch eine Programmiersprache.

00:59:09.740 --> 00:59:11.920
 Wer damit sich auskennt und damit spielen will,

00:59:11.920 --> 00:59:13.280
 es gibt ein WebAssembly-Studio,

00:59:13.280 --> 00:59:15.760
 da kann man in so einem ganz rudimentär nachgebauten,

00:59:15.760 --> 00:59:17.620
 sieht aus wie Visual Studio so ein bisschen,

00:59:17.620 --> 00:59:21.540
 kann man direkt Code schreiben und den kompilieren lassen

00:59:21.540 --> 00:59:23.840
 in Wasm und das dann auch analysieren und so.

00:59:23.840 --> 00:59:25.500
 Also das sieht ganz cool aus,

00:59:25.500 --> 00:59:28.600
 falls man sich damit eingehender beschäftigen möchte.

00:59:28.600 --> 00:59:33.020
 Ja, vielversprechend ist das Ganze, glaube ich,

00:59:33.020 --> 00:59:35.660
 vor allem in Kombination mit anderen Web-Techniken,

00:59:35.660 --> 00:59:39.280
 PWAs, die dadurch vielleicht noch mehr

00:59:39.280 --> 00:59:41.220
 wie native Anwendungen sich anfühlen können.

00:59:41.220 --> 00:59:43.020
 Ganz kurze Anmerkung.

00:59:43.020 --> 00:59:45.880
 Also PWA bedeutet Progressive Web App,

00:59:45.880 --> 00:59:48.220
 einfach nur nochmal, um das kurz zu erklären,

00:59:48.220 --> 00:59:50.500
 über was der Konstantin da spricht.

00:59:50.500 --> 00:59:54.040
 Genau, aber gut, wenn ich einfach solche Abkürzungen um mich werfe,

00:59:54.040 --> 00:59:57.340
 dann immer reingrätschen, damit wir die erläutern.

00:59:57.340 --> 00:59:58.180
 Sehr gut.

00:59:58.180 --> 01:00:00.000
 Yes, Blutgrätsche.

01:00:00.000 --> 01:00:02.060
 Genau, und das andere Web Components,

01:00:02.060 --> 01:00:05.080
 auch da ist zum Beispiel,

01:00:05.080 --> 01:00:06.380
 weiß ich jetzt gar nicht mehr,

01:00:06.380 --> 01:00:07.320
 ob ich das auch aus dem Artikel habe,

01:00:07.320 --> 01:00:08.820
 aber ein Videoplayer mit

01:00:08.820 --> 01:00:10.760
 integrierten Codecs mitgeliefert.

01:00:10.760 --> 01:00:12.980
 Wäre zum Beispiel so ein Anwendungsfall.

01:00:12.980 --> 01:00:16.740
 Das heißt, ich mache mir einfach ein anderes Video Tag,

01:00:16.740 --> 01:00:18.420
 das ich wie auch immer nenne,

01:00:18.420 --> 01:00:22.600
 und kann damit einen Web Player, Video Player mitliefern mit Codecs.

01:00:22.600 --> 01:00:23.540
 Schon ziemlich cool.

01:00:23.540 --> 01:00:25.660
 Dann hat man nicht mehr diese Geschichte,

01:00:25.660 --> 01:00:27.120
 so der Browser kann aber nur das,

01:00:27.120 --> 01:00:28.520
 und der braucht das,

01:00:28.520 --> 01:00:30.400
 und dann muss ich verschiedene Sources festlegen,

01:00:30.400 --> 01:00:30.900
 und was weiß ich.

01:00:31.840 --> 01:00:33.340
 Ja, klingt auf jeden Fall spannend.

01:00:33.340 --> 01:00:35.900
 Und was du vorhin auch schon angesprochen hast,

01:00:35.900 --> 01:00:38.800
 VR und Augmented Reality,

01:00:38.800 --> 01:00:39.640
 also VR,

01:00:39.640 --> 01:00:42.060
 Virtual Reality,

01:00:42.060 --> 01:00:43.300
 kennt man, denke ich,

01:00:43.300 --> 01:00:45.080
 Virtual Reality, Augmented Reality,

01:00:45.080 --> 01:00:46.480
 ist ja auch sehr rechenintensiv,

01:00:46.480 --> 01:00:49.000
 also auch das kann davon profitieren.

01:00:50.600 --> 01:00:52.220
 Wolltest du noch was sagen dazu?

01:00:52.220 --> 01:00:54.120
 Ich wollte noch anmerken,

01:00:54.120 --> 01:00:56.480
 wenn wir schon bei verrückten Web-Techniken sind,

01:00:56.480 --> 01:01:01.500
 die vielleicht auch in Form von Web-Komponenten

01:01:01.500 --> 01:01:03.880
 oder Web-Komponents irgendwie interessant sind,

01:01:03.880 --> 01:01:05.980
 also weil du da halt so was Drop-In-mäßiges hast,

01:01:05.980 --> 01:01:07.620
 was dann einfach so für sich funktioniert,

01:01:07.620 --> 01:01:09.580
 fällt mir jetzt gerade noch ein Houdini.

01:01:09.580 --> 01:01:10.320
 Ich weiß nicht,

01:01:10.320 --> 01:01:12.100
 ob wir darüber schon mal gesprochen haben.

01:01:12.140 --> 01:01:14.300
 Nee, aber das haben wir auch zusammen in Amsterdam gehört,

01:01:14.300 --> 01:01:16.340
 auf den CSS-Days.

01:01:16.340 --> 01:01:19.000
 Und das ist offenbar auch noch nicht so populär,

01:01:19.000 --> 01:01:20.420
 vielleicht braucht das jetzt auch noch zehn Jahre,

01:01:20.420 --> 01:01:22.180
 bis das irgendwie interessant wird.

01:01:22.180 --> 01:01:25.080
 Wäre aber auch mal ein schönes Thema.

01:01:25.080 --> 01:01:26.840
 Ich glaube, zu Houdini sage ich jetzt einfach gar nicht mehr,

01:01:26.840 --> 01:01:28.740
 falls euch Houdini interessiert,

01:01:28.740 --> 01:01:29.420
 einfach mal googeln.

01:01:29.420 --> 01:01:31.040
 Ja, oder wir machen mal ein Thema drüber, genau.

01:01:31.040 --> 01:01:32.900
 Aber das führt jetzt sonst zu weit weg.

01:01:32.900 --> 01:01:34.580
 Genau.

01:01:34.580 --> 01:01:36.780
 Browser-Support noch ganz kurz,

01:01:36.780 --> 01:01:38.780
 90,93 Prozent,

01:01:38.780 --> 01:01:40.020
 kein IE11,

01:01:40.020 --> 01:01:41.500
 überrascht jetzt glaube ich auch nicht.

01:01:42.140 --> 01:01:44.040
 Kein IE11, was?

01:01:44.040 --> 01:01:44.940
 Nein, oh mein Gott.

01:01:44.940 --> 01:01:47.060
 Was werden meine Kunden sagen?

01:01:47.060 --> 01:01:49.900
 Okay.

01:01:49.900 --> 01:01:52.320
 Ja, zum Glück sagen meine Kunden zu sowas gar nichts.

01:01:52.320 --> 01:01:53.160
 Du klickst.

01:01:53.160 --> 01:01:56.100
 Also kurzum,

01:01:56.100 --> 01:01:58.740
 um so ein kleines Resümee zu machen,

01:01:58.740 --> 01:02:01.120
 die Grenzen von Frontend

01:02:01.120 --> 01:02:02.720
 und ich sage es jetzt nochmal so böse,

01:02:02.720 --> 01:02:04.180
 richtige Programmierung,

01:02:04.180 --> 01:02:05.840
 die verschwimmen immer weiter.

01:02:05.840 --> 01:02:06.660
 Ich habe das letzte Mal schon gesagt,

01:02:06.660 --> 01:02:08.060
 ist natürlich nicht wirklich meine Meinung,

01:02:08.060 --> 01:02:10.560
 aber man trifft diese Haltung immer wieder an,

01:02:10.760 --> 01:02:12.280
 die Frontendler,

01:02:12.280 --> 01:02:13.440
 alle keine Ahnung

01:02:13.440 --> 01:02:16.320
 und ich kann irgendwie Java

01:02:16.320 --> 01:02:17.620
 nachts um drei,

01:02:17.620 --> 01:02:18.140
 wenn du mich wächst,

01:02:18.140 --> 01:02:18.880
 auswendig programmieren.

01:02:18.880 --> 01:02:19.520
 Ich bin so toll

01:02:19.520 --> 01:02:21.340
 und ich kann C-Sharp und C-Plus

01:02:21.340 --> 01:02:23.060
 und ihr seid ja alle keine richtigen Entwickler.

01:02:23.060 --> 01:02:24.700
 Das greife ich natürlich nur ironisch auf,

01:02:24.700 --> 01:02:25.660
 das ist nicht meine Meinung.

01:02:25.660 --> 01:02:28.440
 Aber es gibt natürlich schon

01:02:28.440 --> 01:02:29.700
 einen Unterschied zwischen

01:02:29.700 --> 01:02:31.180
 Anwendungsprogrammierung

01:02:31.180 --> 01:02:33.180
 und ich klicke mir so ein bisschen

01:02:33.180 --> 01:02:34.940
 aus Libraries was zusammen

01:02:34.940 --> 01:02:36.920
 und die Grenzen verschwinden

01:02:36.920 --> 01:02:37.700
 eben immer weiter.

01:02:37.700 --> 01:02:38.660
 Also das Know-how

01:02:38.660 --> 01:02:40.360
 in verschiedenste Bereiche

01:02:40.360 --> 01:02:42.060
 breitet sich immer weiter aus,

01:02:42.060 --> 01:02:42.740
 das man haben muss,

01:02:42.740 --> 01:02:45.640
 wenn man tatsächlich alles abdecken möchte.

01:02:45.640 --> 01:02:47.140
 Und was ich auch schon gehört habe

01:02:47.140 --> 01:02:49.200
 von verschiedenen Entwicklern,

01:02:49.200 --> 01:02:49.840
 auch schon auf Twitter,

01:02:49.840 --> 01:02:52.120
 viele nennen sich gar nicht mehr

01:02:52.120 --> 01:02:53.200
 Frontend-Entwickler,

01:02:53.200 --> 01:02:55.140
 sondern einfach nur noch Entwickler.

01:02:55.940 --> 01:02:58.620
 Also die Anforderungen,

01:02:58.620 --> 01:03:01.140
 die auch zukünftige potenzielle Arbeitgeber

01:03:01.140 --> 01:03:01.900
 an einen stellen,

01:03:01.900 --> 01:03:03.180
 die wachsen.

01:03:03.180 --> 01:03:04.460
 Die Anforderungen,

01:03:04.460 --> 01:03:06.020
 die man sich selber stellt,

01:03:06.020 --> 01:03:08.080
 wenn man eben verschiedenste Techniken

01:03:08.080 --> 01:03:09.020
 unterbringen möchte,

01:03:09.020 --> 01:03:09.900
 die wachsen

01:03:09.900 --> 01:03:13.280
 und man wächst natürlich als Entwickler mit.

01:03:13.280 --> 01:03:15.040
 Es bleibt einem ja gar nichts anderes übrig.

01:03:15.040 --> 01:03:18.840
 Ja, ich wollte noch eine kleine Anmerkung

01:03:18.840 --> 01:03:21.000
 zu solchen Web-Technologien machen

01:03:21.000 --> 01:03:23.040
 wie allgemein jetzt WebGL und Wasmf

01:03:23.040 --> 01:03:24.180
 oder hast du noch was?

01:03:24.260 --> 01:03:26.820
 Weil das könnte so eine Art Schlusswort dafür sein.

01:03:26.820 --> 01:03:28.760
 Ja, ich hätte noch ein, zwei Sätze

01:03:28.760 --> 01:03:29.580
 als Schlusswort gehabt,

01:03:29.580 --> 01:03:31.740
 aber du kannst auch ruhig erstmal deins.

01:03:31.740 --> 01:03:33.820
 Ja, dann ich schiebe mal kurz ein.

01:03:33.820 --> 01:03:35.520
 Ich habe noch,

01:03:35.520 --> 01:03:37.120
 also ich habe mir so ein bisschen,

01:03:37.120 --> 01:03:37.780
 ich wusste schon,

01:03:37.780 --> 01:03:39.460
 was der Konstantin für ein Thema heute macht

01:03:39.460 --> 01:03:40.680
 und ich habe mir dann so ein bisschen überlegt,

01:03:40.680 --> 01:03:43.260
 naja, ich bin jetzt nicht in allen

01:03:43.260 --> 01:03:45.060
 diesen Technologien Firmen,

01:03:45.060 --> 01:03:47.080
 warum lohnt es sich vielleicht trotzdem,

01:03:47.080 --> 01:03:49.220
 sowas zu machen oder anders?

01:03:49.220 --> 01:03:51.600
 Wofür ist das denn jetzt wirklich sinnvoll?

01:03:51.600 --> 01:03:53.720
 Und mir sind gleich ein paar Fälle eingefallen,

01:03:54.260 --> 01:03:58.180
 also das Web besteht ja nicht nur aus den Browsern,

01:03:58.180 --> 01:03:59.480
 die wir irgendwie auf dem Rechner haben,

01:03:59.480 --> 01:04:01.140
 also dem normalen Browser,

01:04:01.140 --> 01:04:02.600
 mit dem wir das Internet benutzen,

01:04:02.600 --> 01:04:06.300
 sondern auch zum Beispiel aus Electron-Apps

01:04:06.300 --> 01:04:08.320
 oder sonstige Embedded-Geschichten,

01:04:08.320 --> 01:04:09.600
 Progressive-Web-Apps,

01:04:09.600 --> 01:04:12.000
 die wirklich als Apps auf dem Handy installiert werden

01:04:12.000 --> 01:04:14.660
 oder vielleicht sogar auch sowas wie Firefox OS

01:04:14.660 --> 01:04:17.160
 oder jetzt mittlerweile Kai OS,

01:04:17.160 --> 01:04:19.220
 das jetzt gerade wieder mit Mozilla zusammenarbeitet,

01:04:19.280 --> 01:04:21.820
 also ein mobiles Betriebssystem auf Firefox-Basis,

01:04:21.820 --> 01:04:23.600
 also Systeme,

01:04:23.600 --> 01:04:25.080
 die auf einem Browser basieren

01:04:25.080 --> 01:04:26.280
 in irgendeiner Art und Weise

01:04:26.280 --> 01:04:28.800
 und dadurch,

01:04:28.800 --> 01:04:30.700
 dass es diese ganzen Technologien gibt,

01:04:30.700 --> 01:04:34.300
 im Prinzip extrem viel an Mächtigkeit gewinnen,

01:04:34.300 --> 01:04:36.160
 wenn diese ganzen APIs da drin sind.

01:04:36.540 --> 01:04:38.940
 Also wenn ich jetzt irgendwie Web-Audio machen kann,

01:04:38.940 --> 01:04:39.280
 das heißt,

01:04:39.280 --> 01:04:40.840
 ich kann einfach eine vernünftige,

01:04:40.840 --> 01:04:42.020
 keine Ahnung,

01:04:42.020 --> 01:04:43.860
 eine Audio-App,

01:04:43.860 --> 01:04:45.380
 eine Audio-Studio-App,

01:04:45.380 --> 01:04:47.960
 kann ich dann einfach in Form einer Progressive-Web-App bauen

01:04:47.960 --> 01:04:50.140
 und dann läuft sie auch in Kai OS zum Beispiel.

01:04:50.140 --> 01:04:51.060
 Also ich finde,

01:04:51.060 --> 01:04:53.220
 das gibt dem Browser so eine große Macht,

01:04:53.220 --> 01:04:55.900
 also über die normale Internetnutzung hinaus,

01:04:55.900 --> 01:04:58.620
 sondern auch als Native-App

01:04:58.620 --> 01:05:00.620
 auf allen möglichen Betriebssystemen

01:05:00.620 --> 01:05:02.600
 in Form von Electron oder so.

01:05:02.600 --> 01:05:04.680
 Also deswegen finde ich das auf jeden Fall

01:05:04.680 --> 01:05:05.660
 eine sehr, sehr gute Sache,

01:05:05.660 --> 01:05:07.380
 dass der Browser da immer mächtiger wird

01:05:07.380 --> 01:05:08.060
 in dieser Richtung.

01:05:08.060 --> 01:05:10.800
 Auch wenn es viele unterschiedliche Sprachen sind,

01:05:10.800 --> 01:05:11.860
 die man dann vielleicht quasi

01:05:11.860 --> 01:05:12.760
 nochmal extra lernen muss,

01:05:12.760 --> 01:05:13.280
 obwohl man denkt,

01:05:13.280 --> 01:05:14.280
 ich kann doch schon JavaScript.

01:05:14.280 --> 01:05:16.020
 Ja, aber ich glaube,

01:05:16.020 --> 01:05:17.500
 das ist auf jeden Fall eine gute Sache,

01:05:17.500 --> 01:05:18.220
 dass es das gibt.

01:05:18.220 --> 01:05:20.220
 Sehr guter Einschub,

01:05:20.220 --> 01:05:21.380
 auf jeden Fall.

01:05:21.380 --> 01:05:23.340
 Ja, ich denke,

01:05:23.340 --> 01:05:25.520
 man hat auf jeden Fall

01:05:25.520 --> 01:05:26.740
 im Vergleich zu Mitbewerbern,

01:05:26.740 --> 01:05:27.900
 wenn man sich jetzt irgendwo bewirbt,

01:05:27.900 --> 01:05:29.200
 je mehr man kann,

01:05:29.200 --> 01:05:30.200
 je mehr man anbieten kann,

01:05:30.200 --> 01:05:32.080
 natürlich größere Chancen genommen zu werden,

01:05:32.080 --> 01:05:32.760
 je nach Unternehmen

01:05:32.760 --> 01:05:33.220
 und je nachdem,

01:05:33.220 --> 01:05:34.280
 was sie alles abdecken wollen,

01:05:34.680 --> 01:05:36.920
 wenn man sich so manche Headhunter-Anfragen

01:05:36.920 --> 01:05:39.200
 und auch öffentliche Stellenausschreibungen anguckt,

01:05:39.200 --> 01:05:41.160
 also manchmal ist es ja echt schon ein Witz.

01:05:41.160 --> 01:05:42.820
 Also am besten bist du wirklich Profis

01:05:42.820 --> 01:05:46.080
 in Angular, React, React Native und Vue.js

01:05:46.080 --> 01:05:48.120
 und am besten noch in dem Framework,

01:05:48.120 --> 01:05:50.040
 das gerade letzte Woche erst rausgekommen ist

01:05:50.040 --> 01:05:52.520
 und kannst dazu noch

01:05:52.520 --> 01:05:54.820
 irgendwelches Audiozeug

01:05:54.820 --> 01:05:55.500
 und keine Ahnung was,

01:05:55.500 --> 01:05:57.480
 also die Anforderungen sind teilweise schon echt lustig

01:05:57.480 --> 01:05:58.280
 und ich frage mich dann immer,

01:05:58.280 --> 01:06:00.600
 klar, natürlich gibt es Cracks,

01:06:00.600 --> 01:06:01.520
 die sowas abdecken,

01:06:01.520 --> 01:06:03.620
 die halt irgendwie erst mit Angular entwickelt haben

01:06:03.620 --> 01:06:05.480
 und dann mit React und dann mit Vue

01:06:05.480 --> 01:06:07.880
 und irgendwie fünf Projekte parallel laufen haben,

01:06:07.880 --> 01:06:09.220
 wo sie das auch wirklich aktiv einsetzen,

01:06:09.220 --> 01:06:10.720
 aber manchmal denke ich mir,

01:06:10.720 --> 01:06:12.260
 also der Großteil der Bewerber,

01:06:12.260 --> 01:06:14.340
 der wird doch da hingehen und sagen,

01:06:14.340 --> 01:06:16.300
 naja, ich habe schon mal ein Wikipedia-Artikel

01:06:16.300 --> 01:06:17.600
 über Angular gelesen

01:06:17.600 --> 01:06:19.760
 und die Tour of Heroes vielleicht gemacht

01:06:19.760 --> 01:06:22.260
 und schon mal ein Video-Tutorial über React gesehen,

01:06:22.640 --> 01:06:24.000
 Jo, ich bin der Richtige für den Job.

01:06:24.000 --> 01:06:26.920
 Also es wird manchmal so hoch gepokert

01:06:26.920 --> 01:06:28.900
 von Seiten der Unternehmen,

01:06:28.900 --> 01:06:30.720
 dass man auch als Entwickler so ein bisschen pokern muss

01:06:30.720 --> 01:06:33.840
 und ja, jetzt weiß ich gar nicht mehr,

01:06:33.840 --> 01:06:34.820
 was ich eigentlich sagen wollte,

01:06:34.820 --> 01:06:36.220
 aber das ist mir jetzt gerade noch so.

01:06:36.220 --> 01:06:37.960
 Wünschen kann man sich ja viel.

01:06:37.960 --> 01:06:40.200
 Du kannst ja in die eine Hand reinscheißen

01:06:40.200 --> 01:06:41.200
 und in die andere reinwünschen

01:06:41.200 --> 01:06:42.200
 und gucken, was schneller voll ist.

01:06:42.200 --> 01:06:44.260
 So.

01:06:44.260 --> 01:06:46.000
 Sehr schönes Schlusswort.

01:06:46.000 --> 01:06:50.340
 Wir markieren unsere Folgen ja mit Explicit,

01:06:50.340 --> 01:06:52.400
 also müssen wir auch ab und zu mal so was fallen lassen,

01:06:52.400 --> 01:06:53.360
 damit sich das auch lohnt.

01:06:53.360 --> 01:06:56.300
 Ah ja, stimmt, da fällt mir auch ein,

01:06:56.300 --> 01:06:57.940
 ich glaube, ich muss vielleicht dann doch

01:06:57.940 --> 01:06:59.680
 nochmal so einen Spam-Spot machen,

01:06:59.680 --> 01:07:01.840
 vielleicht ist dann der Explicit-Spam-Spot von mir,

01:07:01.840 --> 01:07:04.720
 weil ich habe da ja einen merkwürdigen Text bekommen,

01:07:04.720 --> 01:07:05.800
 der noch nicht vertont ist.

01:07:05.800 --> 01:07:08.660
 Vielleicht brauche ich dafür auch noch Gastredner,

01:07:08.660 --> 01:07:09.300
 müssen wir mal gucken.

01:07:09.300 --> 01:07:11.320
 Brauchst du jemanden, der dir ins Mikrofon stöhnt?

01:07:11.320 --> 01:07:13.260
 Nee, das kann ich selbst.

01:07:13.260 --> 01:07:13.440
 Okay.

01:07:13.440 --> 01:07:15.060
 Gut.

01:07:15.500 --> 01:07:16.620
 Also dann vielleicht nochmal abschließend,

01:07:16.620 --> 01:07:19.240
 ja, ist das noch Frontend?

01:07:19.240 --> 01:07:21.000
 Lohnt sich das, tiefer reinzusteigen?

01:07:21.000 --> 01:07:24.100
 Also WebGL würde ich spontan sagen, ja, schon.

01:07:24.100 --> 01:07:26.980
 Also da habe ich einfach jetzt genug Anwendungsfälle gesehen.

01:07:26.980 --> 01:07:31.660
 Wasm, also WebGL ist halt auch wirklich,

01:07:31.660 --> 01:07:32.860
 du hast da ein Canvas-Element,

01:07:32.860 --> 01:07:37.020
 mit dem du auch in anderen Kontexten schon arbeiten kannst

01:07:37.020 --> 01:07:38.880
 und Wasm ist halt einfach so,

01:07:38.880 --> 01:07:40.780
 das ist schon ein Brocken.

01:07:40.780 --> 01:07:44.780
 Also wenn du noch nie was mit C oder so am Hut hattest

01:07:45.000 --> 01:07:48.800
 und wirklich nur in Anführungsstrichen reiner Webentwickler bist,

01:07:48.800 --> 01:07:52.060
 dann steigst du nicht mal eben da so ein, ja.

01:07:52.060 --> 01:07:53.420
 Und ich weiß auch gar nicht,

01:07:53.420 --> 01:07:57.540
 ob ich das wirklich als Frontend sehen würde per Definition.

01:07:57.540 --> 01:08:00.260
 Ich meine, ja, es wird in den Browser geladen

01:08:00.260 --> 01:08:02.080
 und es wird clientseitig ausgeführt,

01:08:02.080 --> 01:08:06.960
 aber eigentlich ist es ja mehr so was wie ein clientseitiges Backend.

01:08:07.120 --> 01:08:10.220
 Also ich schicke da was hin, ich kriege was zurück und kann damit arbeiten.

01:08:10.220 --> 01:08:12.400
 Ich bin mir nicht so ganz sicher.

01:08:12.400 --> 01:08:13.520
 Es ist so ein, hm.

01:08:14.180 --> 01:08:16.260
 Ja, das sehe ich ähnlich,

01:08:16.260 --> 01:08:18.940
 aber wir sollten unsere Zuhörer auch nicht unterschätzen,

01:08:18.940 --> 01:08:21.640
 weil vielleicht gibt es ja tatsächlich irgendwo da draußen

01:08:21.640 --> 01:08:23.220
 den echten Fullstack-Developer,

01:08:23.220 --> 01:08:24.500
 von dem ich bis heute noch,

01:08:24.500 --> 01:08:26.080
 also ich habe noch keinen kennengelernt,

01:08:26.080 --> 01:08:28.060
 aber vielleicht gibt es ihn ja tatsächlich,

01:08:28.060 --> 01:08:29.980
 der das alles hinkriegt.

01:08:29.980 --> 01:08:30.620
 Ja, um Himmels Willen,

01:08:30.620 --> 01:08:31.720
 ich wollte niemanden unterschätzen.

01:08:33.180 --> 01:08:35.400
 Ich meine nur so der Durchschnittsentwickler,

01:08:35.400 --> 01:08:37.620
 so die Leute, mit denen ich mich unterhalte,

01:08:37.620 --> 01:08:38.220
 die ich so kenne,

01:08:38.220 --> 01:08:45.680
 also die, ja, die haben vielleicht schon mal auch früher mal was mit C-Sharp geschrieben oder so,

01:08:45.680 --> 01:08:49.320
 aber mal eben so einsteigen tut man eben in diese Welt nicht.

01:08:49.320 --> 01:08:53.040
 Das heißt, also man muss jetzt als Frontend-Entwickler kein schlechtes Gewissen haben,

01:08:53.040 --> 01:08:54.780
 weil man sich damit noch nicht auseinandergesetzt hat.

01:08:54.780 --> 01:08:56.340
 Das wollte ich sagen.

01:08:56.340 --> 01:08:59.160
 Ja, ihr habt es hier gehört und damit ist es offiziell.

01:08:59.160 --> 01:09:00.380
 Damit ist es die reine Wahrheit.

01:09:01.360 --> 01:09:03.660
 Genau, bei uns gibt es nämlich nur die Wahrheit.

01:09:03.660 --> 01:09:06.600
 Nicht so wie bei Politikern oder so.

01:09:06.600 --> 01:09:12.880
 Gut, ja, wenn du keine Anmerkungen mehr hast zum Thema.

01:09:12.880 --> 01:09:15.560
 Vielleicht kommt jetzt ein Tügel.

01:09:15.560 --> 01:09:18.940
 Dann kommt jetzt das Geilteil.

01:09:18.940 --> 01:09:22.160
 Geil Teil.

01:09:22.160 --> 01:09:24.860
 Oh yeah.

01:09:24.860 --> 01:09:26.940
 Ja, das Geilteil heute.

01:09:26.940 --> 01:09:29.940
 Ich habe heute eigentlich zwei Geilteile.

01:09:30.360 --> 01:09:34.620
 Eins ist jetzt, eins ist ganz brandneu, weil es mir heute bei Twitter reingeflogen ist

01:09:34.620 --> 01:09:39.240
 und das andere ist schon ein paar Wochen älter, aber beide sind gleich geil.

01:09:39.240 --> 01:09:41.840
 Nee, das eine ist, nee, ich möchte keine Wertung vornehmen.

01:09:41.840 --> 01:09:44.160
 Es sind beide auf ihre Art und Weise relativ geil.

01:09:44.900 --> 01:09:47.700
 Und zwar das erste ist tiny-helpers.dev.

01:09:47.700 --> 01:09:56.280
 Eine schöne Seite mit so kleinen Helfern, so Single-Purpose-Helpern nenne ich sie jetzt mal.

01:09:56.280 --> 01:10:00.280
 Also so ein Tool, um QR-Code zu generieren.

01:10:00.280 --> 01:10:01.480
 Das ist zum Beispiel von mir.

01:10:01.480 --> 01:10:02.920
 Kurze, kurze Werbung.

01:10:02.920 --> 01:10:04.420
 Das ist da drin gelandet.

01:10:04.820 --> 01:10:10.260
 Man kann, genau, oder es ist auch nach verschiedenen Kategorien aufgesplittet.

01:10:10.260 --> 01:10:23.140
 Also kleine CSS-Helper, Can I Use da zum Beispiel mit drin, Can I E-Mail, Grid-Generatoren, also alle möglichen Generatoren, teilweise Cheat Sheets für alle möglichen Sprachen.

01:10:24.920 --> 01:10:33.100
 Alles, was so kleine Single-Purpose-Helper sind, die man im Web und bei der Webentwicklung so braucht, findet man auf tiny-helpers.dev.

01:10:33.100 --> 01:10:35.680
 Das ist schön aufgesplittet nach Kategorien.

01:10:35.680 --> 01:10:42.700
 Das heißt, man kann dann sagen, hey, ich suche was für JSON, also klicke ich mal auf JSON oder Typografie oder Unicode.

01:10:42.700 --> 01:10:44.780
 Das sind eine ganze Menge Kategorien.

01:10:44.780 --> 01:10:49.220
 Insgesamt gibt es bislang 180 schon so kleine Helper.

01:10:50.620 --> 01:10:58.060
 Es gibt auch ein Feed, wo man das abonnieren kann oder auch über Twitter kann man abonnieren, falls da was Neues dazu kommt, dann kriegt man da alle Updates.

01:10:58.060 --> 01:11:02.300
 Habe ich auch bei mir gemacht, finde ich immer interessant, was da so an neuen kleinen Sachen dazu kommt.

01:11:02.300 --> 01:11:10.080
 Gemacht und gepflegt ist das, wenn ich es richtig weiß, von dem Stefan Judis.

01:11:10.080 --> 01:11:13.280
 Ja, genau, da steht es auch.

01:11:13.280 --> 01:11:18.000
 Aber eine Menge Leute haben da schon mitgeholfen, das besser zu machen.

01:11:18.000 --> 01:11:25.000
 Man kann nämlich, wenn man so einen Helper selbst gemacht hat oder auch, wenn man sagt, hey, es gibt einen Helper, der ist total geil, aber der fehlt da noch.

01:11:25.000 --> 01:11:29.820
 Dann kann man rechts oben klicken, Add Helper, das ist so ein schönes kleines Plus.

01:11:29.820 --> 01:11:35.480
 Und dann kann ich über GitHub einen Pull Request stellen und meinen Helper damit eintragen.

01:11:35.480 --> 01:11:37.060
 Und das ist sogar relativ cool gemacht.

01:11:37.060 --> 01:11:42.800
 Da muss ich mal irgendwie loben an die Machart, beziehungsweise an den Stefan, wie er das gemacht hat.

01:11:42.940 --> 01:11:56.040
 Und zwar funktioniert es so, ich folge das Projekt, ich clone es bei mir und dann habe ich tatsächlich ein Node-Script, das ich einfach nur ausführen muss, das mich dann quasi durch den Prozess leitet.

01:11:56.460 --> 01:12:01.620
 Also ich sage dann hier jetzt Add Helper, ich weiß nicht mehr genau, wie es heißt, aber npm run Add Helper oder so.

01:12:01.620 --> 01:12:05.280
 Und dann habe ich in der Kommandozeile so einen kleinen Wizard.

01:12:05.280 --> 01:12:14.120
 Also ich werde dann erst gefragt, ja, wie heißt denn das Tool, wie ist denn die URL davon, in welche Kategorie würdest du das einordnen und was ist denn so eine kurze Beschreibung, was das tut.

01:12:14.200 --> 01:12:25.300
 Ah, und ich glaube, man kann noch hinzufügen, wer den GitHub-Namen von dem, der es gebaut hat, falls es das irgendwie gibt auf GitHub oder falls die Person bei GitHub ist.

01:12:25.300 --> 01:12:33.700
 Genau, und dann wird da aus den Informationen, die ich da reingetan habe, automatisch der Code erstellt für das Tool.

01:12:33.700 --> 01:12:43.600
 Und dann muss ich einfach nur noch bei GitHub ein Pull-Request stellen und wenn das dann irgendwie die Prüfung besteht, dann landet das auf tiny-helpers.dev.

01:12:43.600 --> 01:12:51.640
 Ja, finde ich eine ziemlich coole Sache und bisher sind wahnsinnig viele kleine nützliche Sachen da drauf, die ich sonst nicht gefunden hätte.

01:12:51.640 --> 01:12:53.980
 Das ist Geilteil Nummer 1.

01:12:53.980 --> 01:13:02.220
 Cool, ich habe das gesehen auf GitHub, dass da irgendwelche Sachen von dir reingemerged wurden, habe mir die Seite aber noch nicht angeguckt.

01:13:02.420 --> 01:13:04.900
 Also, super Tipp, muss ich auf jeden Fall mal reingucken.

01:13:04.900 --> 01:13:10.140
 Einfach mal reingucken, vielleicht auch dem Twitter-Account folgen, ich glaube, das ist auch automatisiert.

01:13:10.140 --> 01:13:13.900
 Also jedes Mal, wenn da ein neues Tool dazu kommt, geht da auch ein kleiner Tweet raus.

01:13:13.900 --> 01:13:17.840
 Ja, dann komme ich zum zweiten Geilteil.

01:13:17.840 --> 01:13:26.600
 Dazu möchte ich, da müsst ihr euch, glaube ich, den Link in den Shownotes angucken, weil das ist jetzt nicht so einfach erklärt.

01:13:26.600 --> 01:13:27.880
 Man muss das, glaube ich, gesehen haben.

01:13:27.880 --> 01:13:35.280
 Es ist ein Code-Pen und zwar heißt der Pure CSS Landscape and Evening in Southwold.

01:13:35.280 --> 01:13:38.460
 Ich weiß jetzt nicht, was Southwold genau sein soll.

01:13:38.460 --> 01:13:40.180
 Vielleicht ist das ein Ort.

01:13:40.180 --> 01:13:43.580
 Also ich würde mal tippen, es ist wahrscheinlich ein echt existierender Ort,

01:13:43.580 --> 01:13:50.980
 weil was wir da sehen, ist ein schon fast fotorealistisch, auf den ersten Blick fotorealistisch aussehendes Bild,

01:13:51.360 --> 01:13:53.760
 das aber tatsächlich mit CSS gebaut wurde.

01:13:53.760 --> 01:14:01.720
 Also komplett mit CSS gebaut, also mit allem, was es da so an interessanten Sachen gibt.

01:14:01.720 --> 01:14:03.040
 Ich versuche gerade durchzuscrollen.

01:14:03.040 --> 01:14:06.280
 Der Browser wird da auch ein bisschen langsam, wenn man das sich anschauen will.

01:14:08.480 --> 01:14:17.940
 Also lohnt es sich da mal reinzugucken, also irgendwie, man hat da irgendwie alles Gradients, Backgrounds, Borders, alles was CSS so hergibt, Filters mit Blur und keine Ahnung.

01:14:17.940 --> 01:14:24.180
 Und ich habe auf den ersten Blick gedacht, ich werde da jetzt doch verarscht, da hat doch einer einfach nur ein Foto über HTML eingebunden.

01:14:24.700 --> 01:14:30.560
 Wenn man dann genauer hinguckt, dann sieht man, okay, es ist wahrscheinlich dann irgendwie doch kein echtes Foto,

01:14:30.560 --> 01:14:33.280
 aber auf den ersten Blick sieht es wirklich fotorealistisch aus.

01:14:33.280 --> 01:14:37.220
 Also ich würde tippen, da hat einer eine Fotovorlage nachgebaut.

01:14:37.220 --> 01:14:39.200
 Ich glaube, es steht sogar auch dabei, wer das ist.

01:14:39.200 --> 01:14:40.120
 Genau, Ben Evans.

01:14:40.120 --> 01:14:41.960
 Von dem ist dieser CodePen.

01:14:41.960 --> 01:14:44.340
 Link findet ihr in den Shownotes.

01:14:44.340 --> 01:14:45.240
 Auf jeden Fall mal angucken.

01:14:45.240 --> 01:14:50.480
 Ist auf jeden Fall echt eine interessante Geschichte und wird vielleicht euren Lüfter auch ein bisschen zum Laufen bringen.

01:14:51.700 --> 01:14:56.860
 Apropos Lüfter zum Laufen bringen, ich wundere mich gerade, deine Aufnahme knackt wieder und knackt wieder.

01:14:56.860 --> 01:15:02.280
 Also ich glaube, wir nehmen das ja zur Sicherheit bei dir auch nochmal auf und werden das dann irgendwie, glaube ich, hin und her schicken,

01:15:02.280 --> 01:15:05.040
 und damit wir auch eine vollständige Aufnahme haben.

01:15:05.040 --> 01:15:08.240
 Ich habe dieses Ding geöffnet und diese Knackser sind immer mehr geworden.

01:15:08.240 --> 01:15:14.380
 Also ich glaube, es liegt auch zum Teil ein bisschen die Audioverarbeitung und mein Rechner, wie sehr der überladen ist,

01:15:14.380 --> 01:15:15.940
 das kommt dann irgendwie nicht mehr hinterher.

01:15:16.340 --> 01:15:21.820
 Ja, wir gucken mal, wir hoffen, dass wir am Schluss eine saubere und anhörbare Folge rausbekommen.

01:15:21.820 --> 01:15:26.140
 Ohne Knacksen, ohne Unterbrechungen, aber man merkt tatsächlich, dass der Rechner da arbeiten muss, ja.

01:15:26.140 --> 01:15:28.400
 Damit wäre das demonstriert.

01:15:28.400 --> 01:15:31.720
 Achso, bei mir läuft auch die ganze Zeit noch so ein Sandspiel-Velkan im Hintergrund.

01:15:31.720 --> 01:15:34.600
 Okay, gut, das erklärt natürlich einiges.

01:15:34.600 --> 01:15:38.360
 Sucht bei Sandspiel, sucht bei Sandspiel, das ist ganz wichtig.

01:15:38.540 --> 01:15:44.580
 Ja, was ich noch nachträglich zum Thema sagen wollte, das verträgt sich nicht gut, dass Wessim mit Audio aufstammen.

01:15:44.580 --> 01:15:47.280
 Ah ja, genau.

01:15:47.280 --> 01:15:55.280
 Also sucht bei Sandspiel, also bei Sandspiel, wenn ihr da mal drauf seid, geht einfach mal auf Browse und dann gebt mal ein Volcano.

01:15:56.500 --> 01:16:04.080
 Und in meinem Fall, ich mache das jetzt gerade nochmal live, in meinem Fall, was ich jetzt gerade offen hatte die ganze Zeit, war das das Zweite, was man da findet.

01:16:04.080 --> 01:16:06.300
 Moment, oder? War das der?

01:16:06.300 --> 01:16:12.340
 Ah, genau. Und dann muss man Play, ganz wichtig, wenn ihr die Demo starten wollt, müsst ihr den Play-Button rechts oben drücken.

01:16:12.340 --> 01:16:16.500
 Und dann läuft dieser Vulkan los und der ist jetzt die ganze Zeit bei mir nebenher gelaufen.

01:16:16.500 --> 01:16:19.440
 Deswegen war wahrscheinlich auch der Lüfter von meinem Rechner die ganze Zeit an.

01:16:19.440 --> 01:16:20.880
 Ja, vielleicht sollten wir das in Zukunft lassen.

01:16:22.880 --> 01:16:25.420
 Ja, vielleicht. Aber ich gucke da so gerne drauf.

01:16:25.420 --> 01:16:27.520
 Ja, natürlich. Wie so eine Lava-Lampe.

01:16:27.520 --> 01:16:31.860
 Ziel ist es ja sowieso, dass wir in Zukunft wieder auch zusammen aufnehmen.

01:16:31.860 --> 01:16:36.960
 Wir wollten es jetzt einmal ausprobiert haben und das ist auch ganz cool, dass es überhaupt so funktioniert, auch in der Qualität.

01:16:36.960 --> 01:16:41.600
 Und zum anderen natürlich auch ein bisschen im Hinblick auf Corona, wenn man irgendwann vielleicht mal nicht mehr vor die Tür will.

01:16:41.600 --> 01:16:48.860
 Aber die zukünftigen Folgen werden schon hoffentlich, wenn der ganze Spuk vorbei ist, auch wieder face-to-face stattfinden.

01:16:49.360 --> 01:17:00.980
 Ja, unbedingt, weil man muss dazu sagen, was jetzt noch keiner gesehen hat, weil wir ja ein Audio-Podcast sind, ist zum Beispiel, dass wir beim Intro eigentlich immer so einen kleinen Dance hinlegen, weil es uns immer noch so gut gefällt.

01:17:00.980 --> 01:17:05.780
 Und das ist jetzt heute, also ich habe es heute für mich gemacht, aber alleine ist es nur halb so cool.

01:17:05.780 --> 01:17:11.440
 Gut zu wissen, dass wir beide zu Hause in unseren Zimmern saßen und lustig vor uns hingetanzt haben.

01:17:12.180 --> 01:17:14.900
 Ja, es ist einfach, es macht einfach Laune.

01:17:14.900 --> 01:17:15.820
 Ja.

01:17:15.820 --> 01:17:17.420
 Ja, das war dann auch schon.

01:17:17.420 --> 01:17:18.140
 Geil Teil vorbei.

01:17:18.140 --> 01:17:19.080
 Gut, dann.

01:17:19.080 --> 01:17:19.880
 Geil Teil over.

01:17:19.880 --> 01:17:21.140
 Dein Wort zum Sonntag.

01:17:21.140 --> 01:17:23.920
 Mein Wort zum Sonntag?

01:17:23.920 --> 01:17:25.700
 Habe ich irgendwas verpasst?

01:17:25.700 --> 01:17:30.520
 Blödes Gebabbel zum Ende zu kommen.

01:17:30.520 --> 01:17:31.600
 Okay, lass das drin.

01:17:31.600 --> 01:17:41.620
 Weil wir die Sonde ja, die Sonde, die Folge ja am Sonntag veröffentlichen immer. Diesmal wahrscheinlich schon nachmittags statt spätabends, weil die Podcatcher eine Weile brauchen.

01:17:41.620 --> 01:17:45.100
 Hast du noch was loszuwerden, wollte ich eigentlich damit sagen?

01:17:45.100 --> 01:17:47.380
 Äh, Werbung.

01:17:47.380 --> 01:17:48.020
 Werbung.

01:17:48.880 --> 01:17:57.140
 Ja, Werbung. Dafür haben wir vielleicht, äh, haben wir auch noch keinen Jingle, aber ein Jingle, Werbe-Jingle für Werbung wäre vielleicht auch irgendwie sowas, was Schönes, was wir immer machen könnten.

01:17:57.140 --> 01:18:05.220
 Ähm, wir wollten noch ein bisschen Werbung machen und zwar, wie vorhin schon angekündigt, ich hätte gerne mal, dass jemand die Kommentarfunktion auf unserer Seite ausprobiert.

01:18:05.220 --> 01:18:06.980
 Ähm, ihr dürft da auch gerne bla bla bla bla reinschreiben.

01:18:06.980 --> 01:18:16.640
 Geht auch über den Podcatcher. Man muss nicht mal irgendwie manuell unsere Seite eingeben, sondern im Podcatcher in den Shownotes oben ist auch ein Link, wo man direkt auf den Kommentaren landet.

01:18:17.500 --> 01:18:20.640
 Ja, wir wollten euch das Leben, äh, da an dieser Stelle leicht machen.

01:18:20.640 --> 01:18:47.060
 Äh, äh, des Weiteren, liked uns oder, äh, retweetet uns bei Social Media, gebt uns ganz viel Herz, falls es euch gefallen hat, falls nicht, äh, trotzdem, ähm, ihr dürft uns auch ganz gerne bei iTunes bewerten, ich weiß, dass wir da mittlerweile drin sind, ähm, erzählt es euren Freunden und, äh, noch ein kleiner Request, falls, ähm, ihr von dem Podcast gehört habt, aber euch gefragt habt, hey, in meiner Lieblings-Podcast-App ist der irgendwie noch nicht drin,

01:18:47.060 --> 01:19:02.200
 im Verzeichnis oder so, also irgendwie, ich weiß nicht, es gibt so viele Podcast-Apps und so viele Podcast-Verzeichnisse, es ist quasi, man kommt quasi gar nicht hinterher, aber, ähm, direkt, also, falls du dich jetzt angesprochen fühlst, in meiner Lieblings-Podcast-App, da seid ihr noch nicht drin, ich musste das jetzt irgendwie umständlich

01:19:02.200 --> 01:19:08.240
 umständlich über den Feed machen, ähm, oder so, ähm, dann bitte auch einfach mal irgendwie melden, dann schauen wir, dass wir da noch reinkommen.

01:19:08.680 --> 01:19:30.680
 Genau, dazu noch zwei Anmerkungen, ich hab heute mal versucht, über meinen, äh, Google Home Mini das abzuspielen, nachdem wir jetzt auch bei Google Podcasts endlich im Verzeichnis sind, ähm, aber irgendwie funktioniert es nicht einfach zu sagen, äh, jetzt löse ich wahrscheinlich ganz viele aus, okay Google, spiele die aktuelle Folge von, wo wir sind, ist vorne, sondern man muss dazu setzen, spiele die aktuelle Folge von, wo wir sind, ist vorne, auf Google Podcasts.

01:19:30.680 --> 01:19:54.060
 Und dann funktioniert das Ganze auch in vier von fünf Fällen, hat's bei mir heute funktioniert, ähm, falls jemand, äh, faul ist und nicht tippen will und das am Handy machen will, sondern über seine Speaker das abspielen lassen will, ähm, und, äh, genau, wählt es euren Freunden und Bekannten und Kollegen auch offline, wir machen immer Werbung für Social Media, aber erzählt auch offline mal von eurem, äh, euren Kollegen von unserem Podcast.

01:19:55.320 --> 01:20:03.640
 Genau, äh, und jetzt noch ganz kurz, um alle kurz zu ärgern, natürlich, äh, die das, die das laut hören, äh, Alexa, bitte eine Tüte Chips bestellen.

01:20:03.640 --> 01:20:22.180
 Ah, damit wir, ach so, damit wir nicht wieder hier Schleichwerbung, damit wir beide abgedeckt haben und damit, damit wir alle User verärgert haben, dann sagen wir jetzt vielleicht noch, ähm, wie, wie heißt das bei Echo dort, äh, Gedöns, also ne, war ja Alexa, dann gibt's noch, hey Siri, bestelle den Jungs von, wo wir sind, ist vorne zwei Pizzen und einen Kasten Bier.

01:20:22.600 --> 01:20:24.900
 Äh, nee, und, hey, hey Siri, erzähl mir einen Witz.

01:20:24.900 --> 01:20:27.200
 Ja, jetzt ist, jetzt ist auch mal gut, glaub ich.

01:20:27.200 --> 01:20:30.180
 Okay, ja, ich, äh, ja, es wird spät, äh, wir hören jetzt auf.

01:20:30.180 --> 01:20:32.040
 Äh, ich, ich lass das Intro laufen.

01:20:32.040 --> 01:20:33.680
 Okay? Äh, das Intro?

01:20:33.680 --> 01:20:36.500
 Äh, ich lass noch mal das Intro laufen.

01:20:36.500 --> 01:20:39.620
 Nee, dann, dann lass ich, dann lass ich, dann lass ich jetzt das Outro laufen.

01:20:39.620 --> 01:20:40.960
 Okay.

01:20:40.960 --> 01:20:41.700
 Überzeugt?

01:20:41.700 --> 01:20:42.540
 Jetzt.

01:20:42.540 --> 01:20:42.900
 Jetzt.

01:20:42.900 --> 01:20:43.320
 Zerfahrt.

01:20:43.320 --> 01:20:43.940
 Tschüss.

01:20:43.940 --> 01:20:44.600
 Ciao.

01:20:44.600 --> 01:20:44.620
 Ciao.

01:20:44.620 --> 01:20:44.620
 Ciao.

01:20:52.600 --> 01:20:53.600
 Ciao.