WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: Web Performance mit Christian "Schepp" Schaefer
Publishing Date: 2021-11-21T17:59:00+01:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/web-performance-mit-christian-schepp-schaefer/

00:00:00.000 --> 00:00:06.360
 Wo wir sind, ist vorne, Folge 33. Heute geht es um Geschwindigkeit.

00:00:06.360 --> 00:00:25.240
 Herzlich willkommen bei Wo wir sind, ist vorne. Frontend-Fakten-Frotzeleien.

00:00:25.240 --> 00:00:29.280
 Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

00:00:30.000 --> 00:00:40.960
 Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jungleur Konstantin Groß.

00:00:40.960 --> 00:00:50.620
 Heute zu Gast, Working-Draft-Co-Host und Performance-Papst, Christian Schäfer.

00:00:50.620 --> 00:00:57.280
 Hey, herzlich willkommen.

00:00:58.240 --> 00:01:01.220
 Ja, vielen Dank für die Anwahrung und für die tolle Ansage.

00:01:01.220 --> 00:01:05.920
 Stimmkräftige Unterstützung, nachdem meine Stimme so ein bisschen gerade am Absaufen ist.

00:01:05.920 --> 00:01:08.500
 Ja, mal gucken, wie lange ich heute durchhalte.

00:01:08.500 --> 00:01:10.120
 Aber schön, dass wir haben ja ...

00:01:10.120 --> 00:01:10.300
 Was?

00:01:10.300 --> 00:01:11.620
 Geiles Intro.

00:01:11.620 --> 00:01:13.060
 Also so insgesamt auch.

00:01:14.240 --> 00:01:16.780
 Ja, Performance-Papst, das hat mir eine Stimme geflüstert.

00:01:16.780 --> 00:01:22.180
 Der Moritz hat mir das geflüstert, dass man dich in gewissen Kreisen so wohl nennt.

00:01:22.180 --> 00:01:25.040
 Ich habe gehört, dass man das sagt, dass es Leute gibt, die das sagen.

00:01:25.040 --> 00:01:27.200
 Der Peter sagt das immer.

00:01:27.200 --> 00:01:28.740
 Genau, der Peter sagt das immer.

00:01:29.920 --> 00:01:35.220
 Es ist insofern was dran, als dass das tatsächlich so ein Ding ist, mit dem ich mich gern beschäftige.

00:01:35.220 --> 00:01:36.140
 Definitiv.

00:01:36.140 --> 00:01:38.420
 Also da habt ihr dann jetzt nicht so den ganz Falschen.

00:01:38.420 --> 00:01:40.360
 Ihr seid dem Peter nicht auf den Leim gegangen.

00:01:41.300 --> 00:01:42.960
 Aufwerber, auch lustig.

00:01:42.960 --> 00:01:45.360
 Ja, so, was, hier kann ich gar nichts mehr anfangen.

00:01:45.360 --> 00:01:48.740
 Nö, ja, mit Autos schnell fahren, das kenne ich.

00:01:48.740 --> 00:01:50.980
 Ja.

00:01:50.980 --> 00:01:51.420
 Genau.

00:01:51.420 --> 00:01:54.300
 Habt ihr denn alle ein Kaltgetränk bereit?

00:01:54.300 --> 00:01:55.380
 Ja.

00:01:55.380 --> 00:01:55.880
 Jawohl.

00:01:55.880 --> 00:01:57.080
 So.

00:01:57.080 --> 00:02:00.800
 Ich habe eins, das mir der Konstantin vorbeigebracht hat.

00:02:00.800 --> 00:02:02.440
 Aber das habe ich leider nicht das.

00:02:02.440 --> 00:02:05.520
 Trinkst du Malzbier oder was ist das für eine komische Flasche da?

00:02:05.520 --> 00:02:06.460
 Das hier?

00:02:06.460 --> 00:02:08.100
 Nee, nee, ich erzähle es gleich, was es ist.

00:02:08.100 --> 00:02:12.620
 Okay, also ich habe von Konstantin ein Warsteiner Brewers Gold.

00:02:12.620 --> 00:02:16.920
 Es ist eine 0,5er Flasche, das heißt, ihr habt heute noch viel Spaß mit mir.

00:02:16.920 --> 00:02:19.280
 Wie viel Prozent hat es?

00:02:19.280 --> 00:02:19.860
 5,2.

00:02:19.860 --> 00:02:22.860
 Okay, das ist im Vergleich zu den belgischen Bieren eher so zurückhaltend.

00:02:22.860 --> 00:02:26.080
 Aber es ist schon, also 5,2er halber Liter.

00:02:26.080 --> 00:02:27.640
 Viel Spaß wünsche ich euch.

00:02:27.640 --> 00:02:30.120
 5,2 habe ich auch, aber nur 0,3.

00:02:30.120 --> 00:02:31.660
 Also 3,3.

00:02:31.660 --> 00:02:34.580
 Konstantin müsste das warm trinken wahrscheinlich.

00:02:34.580 --> 00:02:35.380
 Warm trinken?

00:02:35.380 --> 00:02:36.880
 Ach so, für die Stimme.

00:02:36.880 --> 00:02:38.040
 Ja, jetzt ist es zu spät.

00:02:38.100 --> 00:02:41.080
 Mit Milch, das habe ich gehört, das ist ganz gut.

00:02:41.080 --> 00:02:41.440
 Und Honig.

00:02:41.440 --> 00:02:42.780
 Warmes Bier mit Milch und Honig.

00:02:42.780 --> 00:02:45.620
 Wow, ich glaube, also eher so Brechmittel, oder?

00:02:45.620 --> 00:02:46.640
 Was?

00:02:46.640 --> 00:02:50.260
 Bevor du es ausprobiert hast, kannst du nicht wissen, ob das vielleicht gut ist.

00:02:50.260 --> 00:02:51.880
 Nee, ich habe mir aus dem Urlaub was mitgebracht.

00:02:51.880 --> 00:02:56.920
 Ich war ja so im Wally Day, also mit Laptop am Arbeiten, aber so an der Ostsee ein bisschen

00:02:56.920 --> 00:02:58.380
 mal Tapetenwechsel.

00:02:58.840 --> 00:03:05.300
 Und da habe ich mir von einem heimischen, lokalen Brauerei, Klüvers heißt die Brauerei, habe

00:03:05.300 --> 00:03:07.560
 ich mir ein Heimatbier geholt.

00:03:07.560 --> 00:03:09.080
 Made in Holstein.

00:03:09.080 --> 00:03:10.680
 Handmade in Holstein.

00:03:10.680 --> 00:03:11.720
 Mal gespannt, was du sagst.

00:03:11.720 --> 00:03:13.440
 Sieht auch gut aus.

00:03:13.780 --> 00:03:14.600
 Was hast du denn dabei?

00:03:14.600 --> 00:03:21.300
 Ich habe von der Firma Stauder aus Essen das Bierchen.

00:03:21.300 --> 00:03:21.920
 Bierchen.

00:03:21.920 --> 00:03:22.680
 Sehr gut.

00:03:22.680 --> 00:03:28.100
 Das finde ich ganz, das ist hier, man sieht es, da steht es drauf, hopfig, fruchtig, ehrlich.

00:03:28.100 --> 00:03:28.840
 Ehrlich?

00:03:28.840 --> 00:03:33.940
 Und das mit dem Ehrlich weiß ich nicht, aber hopfig und fruchtig ist es definitiv.

00:03:33.940 --> 00:03:36.740
 Kannst du gleich berichten, ob es ehrlich schmeckt.

00:03:36.740 --> 00:03:37.660
 Ja.

00:03:37.660 --> 00:03:42.780
 Alles habe ich vergessen, ich habe auch noch was hier drauf stehen, Naturtrüb- und Bernsteinfarben.

00:03:42.780 --> 00:03:45.660
 Ich weiß nicht, ob ich in meiner Lichtsituation Bernsteinfarben nachvollziehen kann.

00:03:45.660 --> 00:03:47.460
 Die Flasche hat auf jeden Fall die richtige Farbe.

00:03:47.460 --> 00:03:49.440
 Bei mir ist malzig und vollmundig.

00:03:49.440 --> 00:03:51.140
 Okay, also gut.

00:03:51.500 --> 00:03:54.040
 Aber, oh, ich glaube, ich muss das irgendwie nochmal auf den Kopf stellen.

00:03:54.040 --> 00:03:55.260
 Ich sehe da schon, das hat irgendwie sowas.

00:03:55.260 --> 00:03:55.760
 Ja, meins Flock auch.

00:03:55.760 --> 00:03:58.020
 Es hat so einen Satz auf dem Boden.

00:03:58.020 --> 00:04:00.000
 Gut, dass ich mal geguckt habe.

00:04:00.000 --> 00:04:00.720
 Also.

00:04:00.720 --> 00:04:02.780
 Aber es ist braunes Glas auch bei euch.

00:04:02.780 --> 00:04:04.760
 Das ist ja immer so ein Qualitätsmerkmal, ne?

00:04:04.760 --> 00:04:10.660
 Ja, ich habe mal gehört, dass das Grüne und irgendwie wegen Sonneneinstrahlung wäre irgendwie ganz wichtig, ne?

00:04:10.660 --> 00:04:11.320
 Ja.

00:04:11.320 --> 00:04:11.880
 So.

00:04:11.880 --> 00:04:14.940
 Deswegen schmeckt der Heineken auch nicht.

00:04:14.940 --> 00:04:19.000
 Oh, bei dir kommt es schon.

00:04:19.480 --> 00:04:21.560
 Ich habe es extra geschüttelt, bevor ich es dir gebracht habe.

00:04:21.560 --> 00:04:22.240
 Nein, Quatsch.

00:04:22.240 --> 00:04:24.120
 Nee, ich habe es ja eben auf den Kopf gedreht nochmal.

00:04:24.120 --> 00:04:25.940
 Ach so, ja, das war vielleicht nicht ganz so, ja.

00:04:25.940 --> 00:04:27.460
 Wie ich ja irgendwie den Satz ein bisschen verteilen kann.

00:04:27.460 --> 00:04:29.680
 Ja, dann, schlossen wir mal an.

00:04:29.680 --> 00:04:30.320
 Ja, zum Wohl.

00:04:30.320 --> 00:04:33.540
 Na, weiß.

00:04:33.540 --> 00:04:35.420
 Schön so remote.

00:04:35.420 --> 00:04:36.600
 Jeder klopft mit irgendwas anderem.

00:04:36.600 --> 00:04:37.600
 Was?

00:04:37.600 --> 00:04:38.440
 Das darfst du nicht sagen.

00:04:38.440 --> 00:04:39.780
 Du machst jetzt das Bild kaputt.

00:04:40.520 --> 00:04:40.900
 So, aber?

00:04:40.900 --> 00:04:46.080
 Oh ja.

00:04:46.080 --> 00:04:47.940
 Oh ja.

00:04:47.940 --> 00:04:49.120
 Das kann man trinken.

00:04:49.120 --> 00:04:49.840
 Das kann man trinken.

00:04:49.840 --> 00:04:52.780
 Ja, also malzig und vollmundig würde ich so unterschreiben, ja.

00:04:52.780 --> 00:04:58.960
 Ja, ich muss sagen, meinst du, das ist okay, schmeckt ein bisschen flach.

00:04:58.960 --> 00:05:04.360
 Also es hat jetzt nicht so, nicht so irgendwie so einen speziellen Geschmack, der irgendwie raussticht.

00:05:06.660 --> 00:05:07.180
 Vielleicht muss man es auch so im Glas drin.

00:05:07.180 --> 00:05:08.720
 Also meinst du es auf jeden Fall fruchtig.

00:05:08.720 --> 00:05:10.180
 Fruchtig.

00:05:10.180 --> 00:05:15.260
 Aber alleine schon, dass es ein Bier gibt, das Bierchen heißt, finde ich wahnsinnig sympathisch, ehrlich gesagt.

00:05:15.260 --> 00:05:15.980
 Müssen wir uns auch mal holen.

00:05:15.980 --> 00:05:17.300
 Und die Flasche sieht auch so putzig aus.

00:05:17.300 --> 00:05:19.260
 Also es ist echt, gefällt mir.

00:05:19.260 --> 00:05:20.240
 Ja.

00:05:20.240 --> 00:05:21.480
 Nee, die ist cool.

00:05:21.480 --> 00:05:24.800
 Müssen wir vielleicht mal, wenn wir mal in der Gegend sind, auch mal mitnehmen.

00:05:24.800 --> 00:05:27.300
 Okay.

00:05:27.300 --> 00:05:31.080
 Ich glaube, dann können wir tatsächlich schon zu unserem Bier gehören.

00:05:31.080 --> 00:05:31.700
 Ja, Wahnsinn.

00:05:31.700 --> 00:05:35.300
 Gut, dann machen wir direkt weiter.

00:05:36.660 --> 00:05:46.960
 Ja, ich darf den Anfang machen heute.

00:05:46.960 --> 00:05:49.680
 Und ich bin über einen Artikel gestolpert.

00:05:49.680 --> 00:05:54.120
 Der Titel war irgendwie so RIP, Copy and Paste from Stack Overflow.

00:05:54.120 --> 00:06:00.640
 Und es ging um versteckten, quasi trojanischen Code, der sich in Code-Snippets verstecken kann.

00:06:01.040 --> 00:06:05.720
 Und zwar gab es da eine Forschungsarbeit irgendwie an der Universität von Cambridge.

00:06:05.720 --> 00:06:09.180
 Und die haben da ihre Ergebnisse veröffentlicht auf einer eigenen Seite.

00:06:09.180 --> 00:06:10.920
 Trojan?

00:06:10.920 --> 00:06:11.580
 Nee, wie heißt das?

00:06:11.580 --> 00:06:12.100
 Trojan.

00:06:12.100 --> 00:06:13.920
 Trojansource.codes.

00:06:13.920 --> 00:06:17.660
 Und haben da auch ein Git-Repository zu angelegt mit Code-Beispielen.

00:06:17.660 --> 00:06:21.300
 Und zwar kann man mit UTF-8-Steuerzeichen Strings so manipulieren,

00:06:21.300 --> 00:06:25.620
 dass sie beim Code-Highlighting dann entweder Kommentare wie Code aussehen lassen

00:06:25.620 --> 00:06:27.920
 oder Code als Kommentare darstellen.

00:06:27.920 --> 00:06:31.280
 Und das sorgt eben dafür, dass du, also ein Beispiel war irgendwie,

00:06:31.280 --> 00:06:33.940
 da ist eine Abfrage von wegen, ist Admin oder nicht?

00:06:33.940 --> 00:06:36.600
 Und das sieht so aus, ja gut, die Abfrage ist ja drin.

00:06:37.000 --> 00:06:38.480
 Und dann ist das alles schön sicher.

00:06:38.480 --> 00:06:41.120
 Und in Wirklichkeit ist die aber auskommentiert und ist gar nicht da.

00:06:41.120 --> 00:06:43.000
 Und jeder User kriegt dann quasi ab in Rechte.

00:06:43.000 --> 00:06:46.760
 Und das halt natürlich gerade bei Open-Source, wo jemand was contributet.

00:06:46.760 --> 00:06:49.980
 Also nicht nur irgendwie Copy und Paste, sondern vielleicht macht jemand auch eine Contribution,

00:06:49.980 --> 00:06:53.640
 stellt einen Commit, einen Pull-Request und dann ist das da drin.

00:06:53.640 --> 00:06:55.840
 Du guckst drüber, so Code-Review, ja, sieht in Ordnung aus.

00:06:56.340 --> 00:07:00.540
 Ja, und dann schleust du dir halt irgendwelchen trojanischen Code da ein.

00:07:00.540 --> 00:07:04.880
 Allerdings muss man sagen, dass das GitHub da auch einen entsprechenden Warnhinweis anzeigt,

00:07:04.880 --> 00:07:06.740
 wenn solche Zeichen irgendwo im Code drin sind.

00:07:06.740 --> 00:07:08.340
 Die wissen auch warum.

00:07:08.340 --> 00:07:11.820
 Und in VS Code habe ich es dann ausprobiert.

00:07:11.820 --> 00:07:16.240
 VS Code zeigt also auch solche UTF-8-Zeichen zum Glück richtig an.

00:07:16.240 --> 00:07:18.380
 Aber ich weiß jetzt nicht, wie das zum Beispiel bei Stack Overflow ist.

00:07:18.380 --> 00:07:19.860
 Das habe ich jetzt noch nicht ausprobiert.

00:07:19.860 --> 00:07:23.500
 Oder generell halt bei irgendwelchen anderen Tools, die das vielleicht nicht berücksichtigen.

00:07:24.140 --> 00:07:29.920
 Und was ich auch noch verlinke in den Shownotes, ist eine Extension für VS Code,

00:07:29.920 --> 00:07:32.120
 die sich Gremlins-Tracker nennt.

00:07:32.120 --> 00:07:35.780
 Als Gremlins bezeichnet man wohl so diese versteckten Steuerzeichen,

00:07:35.780 --> 00:07:37.300
 mit denen man irgendwie Unsinn treiben kann.

00:07:37.300 --> 00:07:42.080
 Und da erscheint dann, wenn sowas vorkommt in der Zeile und VS Code es vielleicht übersieht,

00:07:42.080 --> 00:07:45.360
 erscheint so ein Gremlin-Gesicht vor der Zeilennummer.

00:07:45.360 --> 00:07:48.120
 Sodass man das dann sehen kann, dass da was ist, was da nicht hingehört.

00:07:48.120 --> 00:07:49.520
 Genau.

00:07:49.520 --> 00:07:50.820
 Krasse Geschichte.

00:07:50.820 --> 00:07:51.180
 Ja.

00:07:51.500 --> 00:07:55.360
 Mal wieder sehr kreativ irgendwie die Technologien ausgenutzt.

00:07:55.360 --> 00:07:56.480
 Das finde ich immer großartig.

00:07:56.480 --> 00:07:57.900
 Es ist wohl auch gar nicht so neu.

00:07:57.900 --> 00:07:59.460
 Also das geht wohl schon erstaunlich lange.

00:07:59.460 --> 00:08:03.160
 Und in dem Artikel hat er dann auch irgendwie ein Programm quasi geschrieben,

00:08:03.160 --> 00:08:07.700
 irgendwie mit .NET, das quasi deine Festplatte durchsucht nach Code,

00:08:07.700 --> 00:08:09.840
 wo das der Fall ist, wo das drin vorkommt.

00:08:09.840 --> 00:08:13.460
 Und weil es ja sein kann, dass man das schon längst auf der Platte

00:08:13.460 --> 00:08:15.400
 oder in irgendwelchen Projekten hat und bisher noch nicht gemerkt hat,

00:08:15.440 --> 00:08:18.120
 weil GitHub das noch nicht angemerkt hat früher mal oder so.

00:08:18.120 --> 00:08:19.140
 Ja.

00:08:19.140 --> 00:08:22.640
 Also ist vielleicht gar nicht so doof, das mal zu machen, dass man seinen Code so durchsucht.

00:08:22.640 --> 00:08:25.680
 Vielleicht muss ich das mal über mein Naiv-Script-Projekt laufen lassen,

00:08:25.680 --> 00:08:28.300
 wo ich mal versucht habe, alle Node-Module zu installieren.

00:08:28.300 --> 00:08:31.400
 Mal gucken, ob da was drin ist.

00:08:33.580 --> 00:08:36.640
 Ja, also ich finde es immer großartig.

00:08:36.640 --> 00:08:38.740
 Also auf der einen Seite muss man natürlich echt aufpassen,

00:08:38.740 --> 00:08:41.320
 aber solche Ideen, ich bin immer begeistert davon,

00:08:41.320 --> 00:08:43.360
 auf was für Ideen die Leute kommen.

00:08:43.360 --> 00:08:46.080
 Also ich habe gerade den Artikel auch mal aufgemacht.

00:08:46.080 --> 00:08:48.120
 Das ist echt, ja.

00:08:48.120 --> 00:08:54.160
 Und der Gremlin-Tracker, der hat auch ein lustiges Icon.

00:08:54.160 --> 00:08:56.720
 Das ist tatsächlich, es sieht echt fies aus in Faustcode,

00:08:56.720 --> 00:08:57.920
 habe ich mir gerade mal angeschaut.

00:08:57.920 --> 00:09:01.360
 Also da weiß man schon, da ist irgendwas wirklich schlimm,

00:09:01.360 --> 00:09:04.240
 weil normalerweise hast du in dieser Zeile neben den Zeilennummern

00:09:04.240 --> 00:09:05.680
 oder in der Spalte neben den Zeilennummern

00:09:05.680 --> 00:09:08.160
 maximal irgendwie so Breakpoints oder sowas.

00:09:08.160 --> 00:09:10.660
 Und da guckt dich dann so ein kleiner Gremlin an.

00:09:10.660 --> 00:09:11.520
 Das übersieht man nicht.

00:09:11.520 --> 00:09:13.200
 Nee, auf keinen Fall.

00:09:13.200 --> 00:09:14.700
 Habe ich tatsächlich nicht installiert.

00:09:14.700 --> 00:09:15.760
 Sollte ich vielleicht mal tun.

00:09:15.760 --> 00:09:17.060
 Habe ich jetzt vorhin mal gemacht, ja.

00:09:17.060 --> 00:09:19.540
 Ich kopiere ja ständig, also es ist ja meine Arbeit.

00:09:19.540 --> 00:09:21.380
 Du machst ja quasi nichts anderes.

00:09:21.380 --> 00:09:22.880
 Du kannst ja eigentlich gar nicht programmieren.

00:09:22.880 --> 00:09:26.360
 Das hat auch ein ehemaliger Azubi von meiner alten Firma immer gesagt,

00:09:26.360 --> 00:09:28.060
 ja, programmieren ist doch nur Copy-Paste.

00:09:31.180 --> 00:09:32.320
 Full-Stack-Overflow.

00:09:32.320 --> 00:09:36.600
 Full-Stack-Overflow, das ist gut.

00:09:36.600 --> 00:09:39.920
 Also vielleicht habe ich es schon wieder vergessen,

00:09:39.920 --> 00:09:41.140
 aber ich glaube, das habe ich noch nicht gehört.

00:09:41.140 --> 00:09:43.880
 Das ist Full-Stack-Overflow-Developer.

00:09:43.880 --> 00:09:45.400
 Sehr gut.

00:09:45.400 --> 00:09:46.380
 Ja, sind wir doch alle.

00:09:46.380 --> 00:09:51.280
 Also ich mache das gelegentlich schon, wenn man mal so ein, also,

00:09:51.280 --> 00:09:54.580
 ich meine, ich versuche natürlich auch das Beispiel zu verstehen,

00:09:56.040 --> 00:10:01.760
 so klassische, wie löst man denn das jetzt besonders elegant irgendwie in JavaScript?

00:10:01.760 --> 00:10:06.340
 Da kopiere ich mir auch was von Stack-Overflow, also bekenne ich mich schuldigen.

00:10:06.340 --> 00:10:07.880
 Ja, genau.

00:10:07.880 --> 00:10:10.240
 Das, was man jede Woche irgendwie einmal googelt.

00:10:10.240 --> 00:10:13.220
 Ja, aber da könnte ich noch mal auf ein ehemaliges,

00:10:13.220 --> 00:10:15.460
 ich glaube, es war mal ein Geilteil in dieser Sendung,

00:10:15.460 --> 00:10:19.800
 relativ am Anfang, 1loc.dev, one-line-of-code.dev,

00:10:20.060 --> 00:10:27.280
 auch so elegante Einzeiter für so kleine Helfer-Geschichten irgendwie gesammelt werden.

00:10:27.280 --> 00:10:29.180
 Genau.

00:10:29.180 --> 00:10:30.900
 Bist du schon durch?

00:10:30.900 --> 00:10:32.220
 Das war es schon von mir, ja.

00:10:32.220 --> 00:10:34.240
 Okay, also mit dem Thema, genau.

00:10:34.240 --> 00:10:36.340
 Ich habe nur was ganz Kleines.

00:10:36.340 --> 00:10:40.180
 Ich habe mal wieder was getwittert,

00:10:40.180 --> 00:10:43.720
 was für ein bisschen mehr Aufmerksamkeit gesorgt hat, als ich gedacht hätte.

00:10:43.720 --> 00:10:44.860
 Ich habe nämlich irgendwie so,

00:10:44.860 --> 00:10:47.620
 als ob die Woche nicht schon voll genug gewesen wäre.

00:10:47.620 --> 00:10:49.860
 Letzte Woche fiel mir am Sonntagabend noch ein,

00:10:50.060 --> 00:10:52.420
 wie wäre es denn, wenn ich jetzt noch irgendwie

00:10:52.420 --> 00:10:55.320
 meine Arbeitskraft umsonst anbiete für irgendwelche Leute?

00:10:55.320 --> 00:10:57.500
 Und habe gedacht, na ja,

00:10:57.500 --> 00:11:00.820
 wie könnte man denn mit den Fähigkeiten,

00:11:00.820 --> 00:11:03.060
 die man so sammelt in der IT,

00:11:03.060 --> 00:11:04.740
 irgendwie so ein bisschen was für die Welt tun?

00:11:04.740 --> 00:11:06.480
 Also habe ich gedacht, na ja, ich frage jetzt mal,

00:11:06.480 --> 00:11:08.620
 ob Leute irgendwie NGOs, kleine NGOs,

00:11:08.620 --> 00:11:10.340
 die irgendwie so die Welt ein bisschen besser machen wollen,

00:11:10.340 --> 00:11:13.280
 also irgendwie so im Bereich Klima, Nachhaltigkeit,

00:11:13.280 --> 00:11:16.120
 Gesundheit, Bildung und so weiter,

00:11:16.120 --> 00:11:17.660
 wie man denen helfen könnte.

00:11:17.660 --> 00:11:18.360
 Und dann dachte ich, na ja,

00:11:18.420 --> 00:11:20.520
 ich könnte ja Accessibility Audits für die anbieten.

00:11:20.520 --> 00:11:23.420
 Einfach so, weil das mache ich ja sowieso auch im Job und so.

00:11:23.420 --> 00:11:25.480
 Und das wäre vielleicht irgendwie nett,

00:11:25.480 --> 00:11:28.200
 wenn deren Apps oder Seiten irgendwie ein bisschen zugänglicher werden.

00:11:28.200 --> 00:11:33.660
 Ja, turns out irgendwie stand jetzt 19 Retreats.

00:11:33.660 --> 00:11:34.460
 Das ist für mich viel.

00:11:34.460 --> 00:11:36.420
 40 Likes, das ist irgendwie was passiert.

00:11:37.460 --> 00:11:41.840
 Allerdings haben sich, also viele Leute fanden die Idee gut, offenbar,

00:11:41.840 --> 00:11:44.760
 aber es hat sich kaum jemand gemeldet mit, ey, guck dir doch mal das an.

00:11:44.760 --> 00:11:46.740
 Oder hier, ich habe hier was oder so.

00:11:46.740 --> 00:11:50.020
 Also ich will jetzt nicht sagen, überschüttet mich jetzt mit Arbeit,

00:11:50.020 --> 00:11:51.340
 aber so ein paar Ideen da noch,

00:11:51.340 --> 00:11:56.040
 falls ihr irgendwie so kleine Non-Government-Organisations kennt,

00:11:56.040 --> 00:11:58.300
 die irgendwie so in den Bereichen tätig sind,

00:11:58.300 --> 00:11:59.280
 die ich jetzt gerade erwähnt habe,

00:11:59.360 --> 00:12:02.260
 dann gerne mal mir irgendwie schreiben, her damit.

00:12:02.260 --> 00:12:04.320
 Und dann gucke ich mir das an

00:12:04.320 --> 00:12:05.980
 und dann kann man da mal einen kleinen Audit machen.

00:12:05.980 --> 00:12:07.420
 Also ich kann da auch nicht zu viel versprechen.

00:12:07.420 --> 00:12:09.020
 Ich gehe da jetzt nicht extrem in die Tiefe

00:12:09.020 --> 00:12:11.000
 und Rechtssicherheit gibt es da dann von mir auch nicht.

00:12:11.560 --> 00:12:16.100
 Aber so mal grob drüber gucken und so ein paar Anmerkungen machen,

00:12:16.100 --> 00:12:17.520
 das kann ich auf jeden Fall dann machen.

00:12:17.520 --> 00:12:19.380
 Genau, also so ein kleiner Appell,

00:12:19.380 --> 00:12:22.800
 falls ihr da irgendwas habt, gerne mal melden, gerne mal was schicken.

00:12:22.800 --> 00:12:24.280
 Das ist doch mal ein Angebot.

00:12:24.280 --> 00:12:26.080
 Ja, finde ich auch.

00:12:26.080 --> 00:12:26.300
 Schön.

00:12:26.300 --> 00:12:26.740
 Ist gut, ne?

00:12:26.740 --> 00:12:30.620
 Ja, finde ich auf jeden Fall super cool.

00:12:30.620 --> 00:12:33.820
 Genau, ich habe auch noch einen Retro-Punkt mitgebracht.

00:12:33.820 --> 00:12:37.420
 Und zwar, ihr hattet euch ja in der letzten Folge

00:12:37.420 --> 00:12:43.580
 den State of CSS vorgeknöpft und seid da so durchgegangen.

00:12:43.580 --> 00:12:47.840
 Und bei einer Geschichte da,

00:12:47.840 --> 00:12:52.340
 ich glaube, die habt ihr einfach so relativ kurz nur erwähnt,

00:12:52.340 --> 00:12:55.420
 um dann weiter von dannen zu ziehen.

00:12:55.420 --> 00:12:58.760
 Und zwar die Ad-Property-Rule,

00:12:59.680 --> 00:13:03.980
 und die in der Tat zu diesem Houdini-Universum gehört.

00:13:03.980 --> 00:13:06.200
 Und das war ja so für euch so,

00:13:06.200 --> 00:13:08.200
 ja, ist irgendein Houdini-Ding, danke, tschüss.

00:13:08.200 --> 00:13:11.200
 Habt ihr an sich auch recht mit.

00:13:11.200 --> 00:13:14.580
 Ich glaube tatsächlich auch, dass Houdini so cool,

00:13:14.580 --> 00:13:17.180
 dass eigentlich so Klang vom Konzept her irgendwie

00:13:17.180 --> 00:13:20.320
 dead in the water liegt

00:13:20.320 --> 00:13:23.020
 und wahrscheinlich auch irgendwie, dass es nichts mehr gibt.

00:13:23.020 --> 00:13:27.240
 Aber diese Property-Rule, die ist halt cool,

00:13:27.480 --> 00:13:30.200
 weil man auf einmal in der Lage ist,

00:13:30.200 --> 00:13:33.780
 Custom-Properties einen Typ zuzuweisen.

00:13:33.780 --> 00:13:37.600
 Und damit, also sobald der Browser eben den Typ hat,

00:13:37.600 --> 00:13:40.520
 ähnlich wie bei anderen typisierten Sprachen,

00:13:40.520 --> 00:13:42.360
 so öffnen sich neue Möglichkeiten.

00:13:42.360 --> 00:13:46.620
 Und der Browser kann eben dann zum Beispiel

00:13:46.620 --> 00:13:50.440
 die Custom-Property weich animieren.

00:13:50.800 --> 00:13:53.840
 Also wenn das jetzt irgendwie Längeneinheiten sind

00:13:53.840 --> 00:13:57.120
 oder Farben, was er sonst nicht könnte,

00:13:57.120 --> 00:13:59.900
 denn sonst ist eine Custom-Property einfach nur ein dummer String.

00:13:59.900 --> 00:14:03.040
 Und die kann man ja, die kann man ja nicht animieren.

00:14:03.040 --> 00:14:05.040
 Also ich kann, das geht einfach nicht.

00:14:05.040 --> 00:14:07.600
 Die können nur umspringen, sozusagen ruckartig.

00:14:08.300 --> 00:14:13.440
 Genau, und damit kann man halt ein paar ganz coole so Sachen treiben.

00:14:13.440 --> 00:14:17.360
 Unter anderem kann man auch damit bauen,

00:14:17.360 --> 00:14:23.240
 ein Seal- und ein Floor-Methode für CSS und auch Modulo und so Zeugs.

00:14:24.640 --> 00:14:26.700
 Weil du nämlich zum Beispiel sagen kannst,

00:14:26.700 --> 00:14:29.480
 dass das Ganzzahlen sind.

00:14:29.480 --> 00:14:32.420
 Und dann definierst du bei einer anderen Property eben,

00:14:32.420 --> 00:14:34.040
 dass sie eine Float-Property ist.

00:14:34.040 --> 00:14:35.720
 Und dadurch, dass die eine Ganzzahlen ist,

00:14:35.720 --> 00:14:37.680
 rundet der Browser die automatisch.

00:14:37.680 --> 00:14:39.280
 Und damit kannst du dann hingehen

00:14:39.280 --> 00:14:41.400
 und bekommst so quasi frei Haus

00:14:41.400 --> 00:14:45.080
 diese mathematischen Methoden,

00:14:45.080 --> 00:14:46.480
 die du sonst nicht zur Verfügung hast.

00:14:46.480 --> 00:14:50.200
 Genau, aber so für den Normalo ist natürlich,

00:14:50.200 --> 00:14:52.780
 oder die Normalo ist spannender,

00:14:52.780 --> 00:14:54.200
 dass man so Dinge animieren kann.

00:14:55.600 --> 00:14:57.640
 So vielleicht noch ein ganz cooles Ding,

00:14:57.640 --> 00:14:59.640
 was man damit animieren könnte,

00:14:59.640 --> 00:15:02.220
 ist die Zoom-Property.

00:15:02.220 --> 00:15:03.440
 Ich weiß nicht, ob ihr die noch kennt,

00:15:03.440 --> 00:15:04.480
 so aus alten Zeiten.

00:15:04.480 --> 00:15:05.600
 Die kommt ja so aus dem IE.

00:15:05.600 --> 00:15:08.920
 Genau, die ist ja eigentlich so,

00:15:08.920 --> 00:15:11.080
 eigentlich arbeitet die ja so wie Transform Scale.

00:15:11.080 --> 00:15:14.620
 Das, ja, mit dem einen Unterschied,

00:15:14.620 --> 00:15:17.420
 dass eben der Platz freigegeben wird,

00:15:17.420 --> 00:15:20.240
 wenn ein Element eben klein geschrumpft wird.

00:15:20.240 --> 00:15:22.500
 Also das ist bei Transform anders.

00:15:22.500 --> 00:15:24.380
 Da bleibt ja quasi der ursprüngliche Abdruck

00:15:24.380 --> 00:15:24.760
 stehen.

00:15:24.760 --> 00:15:27.440
 Und damit kann man irgendwie sowas machen,

00:15:27.440 --> 00:15:30.500
 wie Menüs eben auffahren,

00:15:30.500 --> 00:15:33.440
 indem man Zoom animiert von 0 bis 1.

00:15:33.440 --> 00:15:35.140
 Weil man weiß dann,

00:15:35.140 --> 00:15:36.840
 also bei Max Heid und so,

00:15:36.840 --> 00:15:39.460
 da muss man ja quasi vorsichtshalber

00:15:39.460 --> 00:15:41.840
 mal über das Ziel hinaus schießend animieren.

00:15:41.840 --> 00:15:44.500
 Aber bei Zoom funktioniert das dann

00:15:44.500 --> 00:15:45.880
 wirklich auf den Punkt genau.

00:15:45.880 --> 00:15:46.700
 Das war ganz cool.

00:15:46.700 --> 00:15:48.760
 Ich hatte Zoom schon total vergessen.

00:15:48.760 --> 00:15:49.500
 Ja, total verdrängt.

00:15:49.620 --> 00:15:53.440
 Ich habe es gestern wieder entdeckt bei CSS Battles,

00:15:53.440 --> 00:15:54.880
 weil das schön kurz ist.

00:15:54.880 --> 00:15:56.940
 Das war kürzer als Scale.

00:15:56.940 --> 00:15:58.260
 Aber das ist echt,

00:15:58.260 --> 00:15:59.880
 das muss ich mir echt nochmal angucken.

00:15:59.880 --> 00:16:00.700
 Ich wusste gar nicht,

00:16:00.700 --> 00:16:01.060
 dass das,

00:16:01.060 --> 00:16:02.040
 da waren mir gar nicht bewusst,

00:16:02.040 --> 00:16:02.780
 dass es das noch gibt.

00:16:02.780 --> 00:16:04.340
 Ich kannte auch diesen Unterschied nicht.

00:16:04.340 --> 00:16:05.660
 Also, dass es den Platz freigibt,

00:16:05.660 --> 00:16:06.620
 das war mir jetzt auch völlig neu.

00:16:06.620 --> 00:16:09.100
 Also, schon wieder in einer Retro

00:16:09.100 --> 00:16:09.880
 so viel Neues gelernt.

00:16:11.180 --> 00:16:12.780
 Genau, Firefox kann es aber nicht.

00:16:12.780 --> 00:16:14.400
 Also, da, genau.

00:16:14.400 --> 00:16:18.960
 Der muss dann halt graceful degradieren.

00:16:18.960 --> 00:16:20.920
 Naja, gut.

00:16:20.920 --> 00:16:21.160
 Ich meine,

00:16:21.160 --> 00:16:23.000
 wenn es jetzt um eine Animation hauptsächlich geht,

00:16:23.000 --> 00:16:24.300
 dann ist das vielleicht nicht so wild.

00:16:24.300 --> 00:16:25.600
 Kommt drauf an.

00:16:25.600 --> 00:16:26.180
 Ich weiß auch nicht,

00:16:26.180 --> 00:16:28.920
 Firefox verliert ja auch immer mehr Marktanteil,

00:16:28.920 --> 00:16:30.320
 was irgendwie auch ein bisschen schade ist.

00:16:30.320 --> 00:16:31.340
 Aber ich gehöre auch zu denen,

00:16:31.340 --> 00:16:33.040
 die dazu beitragen.

00:16:33.040 --> 00:16:36.040
 Ja, ist auch sehr schade.

00:16:36.040 --> 00:16:38.440
 Also, es ist ja wirklich unfassbar gering,

00:16:38.440 --> 00:16:39.080
 der Anteil.

00:16:40.460 --> 00:16:42.460
 Ja, die waren mal so stark.

00:16:42.460 --> 00:16:43.560
 Ja.

00:16:43.560 --> 00:16:47.380
 Genau, also, ich erinnere mich noch an Zahlen von,

00:16:47.380 --> 00:16:48.620
 die ich mal hatte,

00:16:48.620 --> 00:16:51.120
 von einem großen deutschen Internetportal,

00:16:51.120 --> 00:16:53.440
 wo Firefox eine Weile lang

00:16:53.440 --> 00:16:55.140
 wirklich über 50 Prozent hatte.

00:16:55.140 --> 00:16:55.840
 Ich weiß nicht genau,

00:16:55.840 --> 00:16:57.660
 vielleicht sogar auch 60.

00:16:57.660 --> 00:16:58.720
 Ich will jetzt nicht lügen.

00:16:58.720 --> 00:17:00.880
 Aber deutlich über 50.

00:17:00.880 --> 00:17:02.500
 Also, war deutlich der stärkste Browser.

00:17:02.500 --> 00:17:04.580
 Und ich habe jetzt die aktuellen Zahlen

00:17:04.580 --> 00:17:05.340
 davon nicht mehr.

00:17:05.340 --> 00:17:07.760
 Aber alles, was ich so mitkriege,

00:17:07.760 --> 00:17:08.660
 ist, naja,

00:17:08.740 --> 00:17:11.220
 stürzt ab ins Bodenlose,

00:17:11.220 --> 00:17:12.940
 ist irgendwie bald schon komplett irrelevant.

00:17:12.940 --> 00:17:14.720
 Und das ist eigentlich total schade,

00:17:14.720 --> 00:17:16.300
 weil, wenn man am Ende irgendwie

00:17:16.300 --> 00:17:17.800
 nur noch eine Engine auf dem Markt hat,

00:17:17.800 --> 00:17:19.740
 oder sagen wir mal so 1,5 Engines,

00:17:19.740 --> 00:17:22.720
 WebKit würde ich jetzt nicht so ganz als,

00:17:22.720 --> 00:17:23.760
 und blinkt,

00:17:23.760 --> 00:17:26.080
 das ist irgendwie noch schon so ein bisschen verwandt.

00:17:27.080 --> 00:17:28.800
 Ja, ich glaube, es ist schon gut für den Markt,

00:17:28.800 --> 00:17:30.200
 wenn es irgendwie ein bisschen Konkurrenz gibt.

00:17:30.200 --> 00:17:31.260
 Ja, auf jeden Fall.

00:17:31.260 --> 00:17:33.420
 Zumal die ja auch viel Pionierarbeit da gemacht haben.

00:17:33.420 --> 00:17:34.880
 Also, wenn ich mir überlege,

00:17:34.880 --> 00:17:38.120
 was für einen geilen Grid-Editor die da hatten,

00:17:38.120 --> 00:17:40.460
 noch vor lange vor allen anderen und so.

00:17:40.460 --> 00:17:41.340
 Na ja, Editor nicht,

00:17:41.340 --> 00:17:42.880
 aber die Grid-Dev-Tools,

00:17:42.880 --> 00:17:44.940
 mit denen du das super visualisieren konntest und so.

00:17:44.940 --> 00:17:45.760
 Das war schon echt,

00:17:45.760 --> 00:17:47.840
 ja, die haben viel gute Sachen gemacht.

00:17:47.840 --> 00:17:50.140
 Und ich habe ein bisschen Sorge um Mozilla.

00:17:52.140 --> 00:17:54.840
 Ich habe jetzt hier immer gerade in die Statistiken eines,

00:17:54.840 --> 00:17:57.760
 zufälligerweise habe ich Zugriff auf die Statistiken

00:17:57.760 --> 00:17:59.480
 eines großen deutschen Newsportals,

00:17:59.480 --> 00:18:01.640
 da haben wir 5% Firefox.

00:18:01.640 --> 00:18:04.100
 Okay.

00:18:04.100 --> 00:18:05.820
 Und wie viel Chrome?

00:18:05.820 --> 00:18:09.460
 Knapp 42.

00:18:09.460 --> 00:18:12.480
 Ah, ist gar nicht so viel.

00:18:12.480 --> 00:18:14.560
 Ich hätte jetzt irgendwie mit 70 gerechnet oder so.

00:18:14.560 --> 00:18:17.420
 Ja, also es gibt noch 30% Safari.

00:18:17.420 --> 00:18:19.500
 Ich glaube, das deutet einfach darauf hin,

00:18:19.500 --> 00:18:21.140
 dass dieses Nachrichtenportal

00:18:21.140 --> 00:18:23.740
 sehr viel von mobilen Usern auch gesorgt wird.

00:18:23.740 --> 00:18:23.980
 Das ist viel.

00:18:23.980 --> 00:18:24.780
 Ja.

00:18:24.780 --> 00:18:28.700
 Genau, Samsung Internet ist da tatsächlich auch auf Platz 3

00:18:28.700 --> 00:18:30.660
 dann mit knapp 7%.

00:18:30.660 --> 00:18:32.040
 Gut.

00:18:32.040 --> 00:18:34.940
 Es gibt noch einen Retro-Punkt.

00:18:34.940 --> 00:18:37.000
 Ich habe auch nochmal so einen Rückgriff auf was,

00:18:37.000 --> 00:18:38.420
 was wir schon mal hier besprochen haben.

00:18:38.420 --> 00:18:42.380
 Und zwar Folge 28 bei den CSS-Eigenschaften.

00:18:42.380 --> 00:18:43.660
 Da ging es auch um Subgrid.

00:18:43.660 --> 00:18:47.100
 Und es tut sich da jetzt tatsächlich im Chromium was.

00:18:47.420 --> 00:18:50.180
 Und zwar bin ich da als Watcher auf so einem Ticket

00:18:50.180 --> 00:18:53.000
 und kriege da immer so ein Digest quasi,

00:18:53.000 --> 00:18:55.300
 wo dann so Commits gesammelt reingepostet werden.

00:18:55.300 --> 00:18:57.420
 Und da hat sich jetzt gerade diese Woche

00:18:57.420 --> 00:18:58.640
 hat sich da unglaublich viel getan.

00:18:58.640 --> 00:19:00.520
 Also ich habe irgendwie alle zwei Tage

00:19:00.520 --> 00:19:02.600
 habe ich eine Mail bekommen, wo sich was getan hat.

00:19:02.600 --> 00:19:04.880
 Und ich bin auch noch bei ein paar anderen Tickets als Watcher.

00:19:04.880 --> 00:19:07.280
 Da hat sich seit Monaten oder Jahren nichts getan.

00:19:07.280 --> 00:19:08.820
 Deswegen ist das echt.

00:19:08.820 --> 00:19:10.340
 Also man merkt, da tut sich gerade was.

00:19:10.340 --> 00:19:12.020
 Und was mir da auch aufgefallen ist,

00:19:12.020 --> 00:19:14.460
 wenn man sich das anschaut, wer die Commits gemacht hat,

00:19:14.580 --> 00:19:16.920
 dann waren das jetzt, zumindest diese Woche in dem Fall,

00:19:16.920 --> 00:19:18.840
 ausschließlich Microsoft-Mitarbeiter.

00:19:18.840 --> 00:19:22.200
 Und das finde ich cool zu sehen,

00:19:22.200 --> 00:19:25.760
 dass Microsoft da wirklich mit dieser Übernahme von Chromium

00:19:25.760 --> 00:19:28.400
 als Edge wirklich auch was zurückgibt.

00:19:28.400 --> 00:19:31.280
 Und da Upstream eben dafür sorgt,

00:19:31.280 --> 00:19:32.560
 dass neue Features reinkommen,

00:19:32.560 --> 00:19:34.600
 die vielleicht sonst noch länger auf der Strecke geblieben wären.

00:19:35.200 --> 00:19:36.460
 Also das fand ich ziemlich cool zu sehen.

00:19:36.460 --> 00:19:39.520
 Ja, mehr habe ich dazu auch gar nichts zu sagen.

00:19:39.520 --> 00:19:40.460
 Ah, ja dann.

00:19:40.460 --> 00:19:43.800
 Da können wir ja weitermachen.

00:19:43.800 --> 00:19:44.300
 Jawohl.

00:19:44.300 --> 00:19:48.880
 Die Property der Woche.

00:19:48.880 --> 00:19:53.140
 Ja, es ist heute was ganz Einfaches,

00:19:53.140 --> 00:19:56.720
 was ihr aber wahrscheinlich leider noch nicht einsetzen könnt,

00:19:56.720 --> 00:19:58.660
 weil es noch nicht so weit ist.

00:19:58.660 --> 00:20:00.400
 Aber ich fand es auf jeden Fall eine spannende Geschichte.

00:20:00.680 --> 00:20:03.000
 Und zwar die Property der Woche ist Input Security,

00:20:03.000 --> 00:20:08.360
 ist Teil des CSS Basic User Interface Module Level 4.

00:20:08.360 --> 00:20:10.200
 Da gibt es auch ein Working Draft.

00:20:10.200 --> 00:20:14.600
 Schon, ich glaube, das ist tatsächlich Working Draft-Status,

00:20:14.600 --> 00:20:15.820
 passenderweise natürlich.

00:20:15.820 --> 00:20:18.660
 Ja, nee, Editors Draft steht da an der Seite.

00:20:18.660 --> 00:20:20.860
 Ich weiß nicht genau, ob es da einen Unterschied gibt.

00:20:21.740 --> 00:20:25.840
 Genau, und es geht um Passwörter, Passwortfelder,

00:20:25.840 --> 00:20:27.500
 Passworteingabefelder.

00:20:27.500 --> 00:20:30.860
 Und es gibt ja verschiedene Methoden derzeit,

00:20:30.860 --> 00:20:33.440
 wie man darin das Passwort anzeigen kann.

00:20:33.440 --> 00:20:35.160
 Also so nach dem Motto, ich trage mein Passwort ein,

00:20:35.160 --> 00:20:36.000
 dann will ich aber noch mal gucken,

00:20:36.000 --> 00:20:37.060
 habe ich mich auch nicht vertippt.

00:20:37.060 --> 00:20:38.720
 Also gibt es da oft irgendwie so einen Knopf,

00:20:38.720 --> 00:20:41.760
 so ein Auge-Icon oder diverse andere Möglichkeiten,

00:20:41.760 --> 00:20:43.220
 um es dann anzeigen zu können.

00:20:44.880 --> 00:20:47.180
 Und derzeit wird das halt meistens gemacht mit,

00:20:47.180 --> 00:20:50.820
 naja, man schaltet das, fällt dann halt um in Input-Type-Text,

00:20:50.820 --> 00:20:52.620
 damit man irgendwie das Passwort sehen kann.

00:20:52.620 --> 00:20:56.540
 Jetzt gibt es offenbar seit einer Weile schon irgendwie

00:20:56.540 --> 00:20:58.920
 so eine Webkit-Eigenschaft, Webkit-Text-Security,

00:20:58.920 --> 00:21:04.300
 die sowas umschalten kann, wo man dann festlegen kann,

00:21:04.300 --> 00:21:08.680
 ist die Security da, nein, oder wie soll das denn aussehen?

00:21:08.680 --> 00:21:10.240
 Da gibt es auch so einen komischen Wert Square,

00:21:10.240 --> 00:21:12.260
 dann werden so irgendwie Quadrate angezeigt,

00:21:12.260 --> 00:21:13.560
 ist auch irgendwie fancy.

00:21:14.880 --> 00:21:17.560
 Input-Security soll das Ganze jetzt standardisieren

00:21:17.560 --> 00:21:20.100
 und der Standardwert wäre Auto,

00:21:20.100 --> 00:21:22.280
 sodass quasi der Browser entscheidet

00:21:22.280 --> 00:21:25.820
 und Input-Security-None würde das dann ausschalten.

00:21:25.820 --> 00:21:27.240
 Das heißt, ich muss jetzt nicht mehr irgendwie

00:21:27.240 --> 00:21:29.480
 den Type von dem Input-Feld ändern,

00:21:29.480 --> 00:21:31.700
 um das Passwort anzuzeigen,

00:21:31.700 --> 00:21:34.140
 sondern ich kann es mit CSS tatsächlich machen.

00:21:34.140 --> 00:21:39.000
 Die Motivation dahinter, wenn ich das richtig verstanden habe,

00:21:39.000 --> 00:21:41.780
 war, dass viele Seiten tatsächlich offenbar

00:21:41.780 --> 00:21:44.800
 ihre Passwort-Felder standardmäßig als Text,

00:21:44.880 --> 00:21:47.660
 anzeigen, warum auch, das habe ich jetzt auch noch nie gesehen.

00:21:47.660 --> 00:21:51.700
 Also wenn man es standardmäßig als Text und das dann aber Software,

00:21:51.700 --> 00:21:54.620
 die da drauf aufbaut, also irgendwie ein Passwort-Manager oder sowas,

00:21:54.620 --> 00:21:56.620
 der das Passwort reinpasten will, das nicht kann,

00:21:56.620 --> 00:22:00.740
 weil der sucht halt ein Passwort-Feld und findet keins

00:22:00.740 --> 00:22:02.120
 und in den Text-Feld will der nicht.

00:22:02.120 --> 00:22:04.080
 Und das hat auch einen guten Grund, dass er das nicht macht.

00:22:04.780 --> 00:22:11.380
 und die sind jetzt auf dem Weg da eine Security-Lösung dafür zu finden.

00:22:11.380 --> 00:22:15.320
 Und es ist wirklich so simpel, mehr gibt es dazu eigentlich auch gar nicht zu sagen.

00:22:15.320 --> 00:22:18.580
 Input-Security-None zeigt das Passwort an,

00:22:18.580 --> 00:22:21.020
 Input-Security-Auto wird es wieder verbergen.

00:22:21.020 --> 00:22:25.120
 Ist aber, glaube ich, noch in keinem Browser richtig eingebaut.

00:22:25.200 --> 00:22:26.800
 Ich habe es auch auf Can I Use nicht gefunden.

00:22:26.800 --> 00:22:28.260
 Also es ist ganz frisch,

00:22:28.260 --> 00:22:35.320
 beziehungsweise die Diskussion auf GitHub ist von 2018, April.

00:22:35.320 --> 00:22:38.320
 Aber irgendwie hat es sich noch nicht so richtig durchgesetzt,

00:22:38.320 --> 00:22:39.540
 ist noch nicht so richtig weit gekommen.

00:22:39.540 --> 00:22:41.100
 Interessant fand ich bei diesem Issue,

00:22:41.720 --> 00:22:47.880
 dass da auch ein kompletter Chat-Log aus der Diskussion darüber irgendwie mit drin ist.

00:22:47.880 --> 00:22:50.040
 Und da kann man nachlesen, was die da irgendwie gesprochen haben.

00:22:50.040 --> 00:22:51.820
 Ja, lassen Sie, wie nennen wir es denn?

00:22:51.820 --> 00:22:54.380
 Und wie die da am Ende drauf gekommen sind.

00:22:54.380 --> 00:22:55.700
 Finde ich eigentlich ziemlich cool und transparent,

00:22:55.700 --> 00:22:57.140
 dass man das komplett nachlesen kann.

00:22:57.140 --> 00:22:59.900
 Genau, also Links kommen in die Shownotes.

00:22:59.900 --> 00:23:02.400
 Also Editor's Draft.

00:23:02.400 --> 00:23:05.780
 Es gibt noch einen schönen CSS-Tricks-Artikel zum Thema.

00:23:05.780 --> 00:23:09.100
 Was für Methoden gibt es denn, um Inputs zu revealen?

00:23:09.100 --> 00:23:14.140
 Und eben auch dieses GitHub-Issue, wo die Diskussion drin stattfindet.

00:23:14.140 --> 00:23:14.600
 Genau.

00:23:14.600 --> 00:23:18.160
 Jo, Property fertig.

00:23:18.160 --> 00:23:19.120
 Property fertig.

00:23:19.120 --> 00:23:21.060
 Mir ist wieder aufgefallen, das ist letztes Mal auch schon,

00:23:21.060 --> 00:23:23.560
 wir haben den Gast noch gar nicht richtig vorgestellt.

00:23:23.560 --> 00:23:26.660
 Aber vielleicht machen wir das auch wieder am Anfang des Themas einfach,

00:23:26.660 --> 00:23:27.540
 als Teil des Themas.

00:23:27.540 --> 00:23:31.480
 Und machen zum Aufwärmen direkt wieder unser Entscheide-Dich.

00:23:31.480 --> 00:23:32.300
 Sollen wir das so machen?

00:23:32.300 --> 00:23:34.240
 Ja, klar, machen wir ja.

00:23:34.240 --> 00:23:34.500
 Gut.

00:23:34.500 --> 00:23:38.740
 WWSIV. Entscheide-Dich.

00:23:39.100 --> 00:23:44.360
 Ah, die Spannung steigt, das Herz klopft.

00:23:44.360 --> 00:23:47.160
 Ja, willst du nochmal kurz erklären nochmal, genau?

00:23:47.160 --> 00:23:48.500
 Ja, kurz nochmal die Regeln.

00:23:48.500 --> 00:23:52.840
 Also es kommen jetzt eine Menge, ich glaube etwas um die 40,

00:23:52.840 --> 00:23:55.200
 ich habe jetzt nicht ganz genau gezählt, entweder oder Fragen,

00:23:55.200 --> 00:24:01.200
 wo unser Gast, der Shep, sehr, sehr schnell möglichst antworten muss,

00:24:01.200 --> 00:24:02.620
 wofür er sich entscheidet.

00:24:02.620 --> 00:24:05.800
 Aber auch keine Erklärung, wir können gerne im Anschluss irgendwie,

00:24:05.800 --> 00:24:07.540
 wenn es noch Klärungsbedarf gibt, darüber reden.

00:24:07.540 --> 00:24:10.380
 Aber in der Runde geht es jetzt wirklich um schnelles Denken,

00:24:10.380 --> 00:24:13.620
 nicht das langsame Denken für alle, die das Buch auch gelesen haben.

00:24:14.520 --> 00:24:17.860
 Wir wollen ein bestimmtes Gehirnareal in deinem Kopf ansprechen

00:24:17.860 --> 00:24:19.860
 und deswegen müssen wir da jetzt ganz schnell zackig durch.

00:24:19.860 --> 00:24:22.400
 Du darfst dann viermal, darfst du weitersagen

00:24:22.400 --> 00:24:24.800
 und die anderen, da nerve ich dich einfach so lange,

00:24:24.800 --> 00:24:25.960
 bis du uns eine Antwort gibst.

00:24:25.960 --> 00:24:27.200
 Wenn du nochmal weitersagst,

00:24:27.200 --> 00:24:31.740
 dann haben wir jetzt den Buzzer, den der Freddy vermisst hat.

00:24:31.740 --> 00:24:33.500
 Und genau.

00:24:33.500 --> 00:24:36.560
 Oder wenn du einfach was sagst, was keine Antworten ist, dann.

00:24:36.560 --> 00:24:37.520
 Genau, Konstantin.

00:24:39.120 --> 00:24:42.580
 Naja, das können wir nicht entscheiden, was eine Antwort ist.

00:24:42.580 --> 00:24:44.460
 Naja, eins von beidem muss eine Antwort sein.

00:24:44.460 --> 00:24:46.860
 Wenn was anderes kommt, dann ist, äh, zählt nicht.

00:24:46.860 --> 00:24:47.840
 Dann muss man nicht so streng sein.

00:24:47.840 --> 00:24:51.120
 Wir haben jetzt sogar ein Soundbett für drunter.

00:24:51.120 --> 00:24:54.480
 Nein, nein, der Witz ist, wenn keine richtige Antwort kommt,

00:24:54.480 --> 00:24:57.020
 stelle ich die Frage so lange, bis die Antwort kommt.

00:24:57.020 --> 00:24:58.400
 Okay, alles klar.

00:24:58.400 --> 00:25:02.040
 So ist das bei einem anderen Podcast und ich finde das eigentlich ganz gut,

00:25:02.040 --> 00:25:04.660
 weil es ist dann sehr nervig, wenn man das zum dritten Mal hört,

00:25:04.660 --> 00:25:07.060
 kurz nacheinander, irgendwann hat man keinen Bock mehr an Antworten.

00:25:07.060 --> 00:25:07.220
 Alles klar.

00:25:08.000 --> 00:25:10.620
 Genau, also, Konstantin, du zählst die weiters.

00:25:10.620 --> 00:25:13.680
 Und machst dann gegebenenfalls den Buzzer.

00:25:13.680 --> 00:25:13.960
 Okay.

00:25:13.960 --> 00:25:14.920
 Ich glaube vier.

00:25:14.920 --> 00:25:17.000
 Ja, ich sag jetzt einfach mal vier.

00:25:17.000 --> 00:25:17.980
 Genau.

00:25:17.980 --> 00:25:19.540
 Gut, dann fangen wir ganz einfach an.

00:25:19.540 --> 00:25:20.560
 Los geht's.

00:25:20.560 --> 00:25:21.120
 Also, los geht's.

00:25:21.120 --> 00:25:22.420
 Katze oder Hund?

00:25:22.420 --> 00:25:23.700
 Katze.

00:25:23.700 --> 00:25:25.620
 Die Musik?

00:25:25.620 --> 00:25:27.360
 Weiter, weiter, weiter.

00:25:27.360 --> 00:25:28.120
 Oh Gott.

00:25:28.120 --> 00:25:30.460
 Ich bin überrascht.

00:25:30.460 --> 00:25:30.860
 Moment.

00:25:30.860 --> 00:25:32.560
 Spotify oder Apple Music?

00:25:32.560 --> 00:25:33.820
 Spotify.

00:25:33.820 --> 00:25:35.520
 Papier oder E-Book?

00:25:35.520 --> 00:25:36.940
 Papier.

00:25:36.940 --> 00:25:38.660
 Besitzen oder Streamen?

00:25:38.660 --> 00:25:39.940
 Streamen.

00:25:39.940 --> 00:25:41.700
 Im Team oder alleine?

00:25:41.700 --> 00:25:43.620
 Im Team.

00:25:43.620 --> 00:25:45.640
 Agil oder mir doch egal?

00:25:45.640 --> 00:25:47.140
 Mir doch egal.

00:25:47.140 --> 00:25:49.140
 Scrum oder Kanban?

00:25:49.140 --> 00:25:50.680
 Kanban.

00:25:50.680 --> 00:25:52.700
 Dark Mode oder Light Mode?

00:25:52.700 --> 00:25:53.820
 Light Mode.

00:25:54.820 --> 00:25:56.540
 Die Musik macht mich fertig.

00:25:56.540 --> 00:25:59.480
 RGB oder Hex?

00:25:59.480 --> 00:26:00.880
 RGB.

00:26:00.880 --> 00:26:02.460
 RGBA oder HSLA?

00:26:02.460 --> 00:26:04.980
 RGBA.

00:26:04.980 --> 00:26:07.160
 UX oder CLI?

00:26:07.160 --> 00:26:09.000
 UX.

00:26:09.000 --> 00:26:10.780
 Design oder Performance?

00:26:10.780 --> 00:26:12.660
 Performance.

00:26:12.660 --> 00:26:14.580
 Pixel oder Vektor?

00:26:14.580 --> 00:26:15.960
 Pixel.

00:26:15.960 --> 00:26:17.900
 Mate oder Eistee?

00:26:17.900 --> 00:26:19.260
 Eistee.

00:26:19.980 --> 00:26:20.660
 Pepsi oder Coke?

00:26:20.660 --> 00:26:21.800
 Coke.

00:26:21.800 --> 00:26:23.820
 Coke Zero oder Coke Light?

00:26:23.820 --> 00:26:25.720
 Coke Zero.

00:26:25.720 --> 00:26:27.440
 Google oder Facebook?

00:26:27.440 --> 00:26:28.880
 Google.

00:26:28.880 --> 00:26:30.900
 YouTube oder Vimeo?

00:26:30.900 --> 00:26:32.260
 YouTube.

00:26:32.260 --> 00:26:33.980
 WhatsApp oder Signal?

00:26:33.980 --> 00:26:35.780
 Signal.

00:26:35.780 --> 00:26:38.040
 Signal oder Threema?

00:26:38.040 --> 00:26:39.620
 Signal.

00:26:39.620 --> 00:26:41.560
 Chrome oder Firefox?

00:26:42.560 --> 00:26:42.980
 Chrome.

00:26:42.980 --> 00:26:44.620
 Chrome oder Edge?

00:26:44.620 --> 00:26:45.900
 Chrome.

00:26:45.900 --> 00:26:48.720
 Safari oder Firefox?

00:26:48.720 --> 00:26:50.280
 Firefox.

00:26:50.280 --> 00:26:52.400
 Firefox oder Lynx?

00:26:52.400 --> 00:26:55.520
 Firefox.

00:26:55.520 --> 00:26:58.660
 Safari oder IE6?

00:26:58.660 --> 00:27:00.480
 IE6.

00:27:00.480 --> 00:27:02.060
 Nano oder VI?

00:27:02.060 --> 00:27:04.500
 VI.

00:27:05.200 --> 00:27:06.220
 E-Mex oder VI?

00:27:06.220 --> 00:27:08.160
 VI.

00:27:08.160 --> 00:27:10.440
 Passwort oder SSH-Key?

00:27:10.440 --> 00:27:12.900
 Ähm, Passwort.

00:27:12.900 --> 00:27:14.920
 Luke oder Han?

00:27:14.920 --> 00:27:17.120
 Han.

00:27:17.120 --> 00:27:19.520
 Jeder nimmt Han.

00:27:19.520 --> 00:27:21.100
 Schokolade oder Vanille?

00:27:21.100 --> 00:27:22.880
 Vanille.

00:27:22.880 --> 00:27:25.340
 Vanille oder Framework?

00:27:25.340 --> 00:27:26.460
 Vanille.

00:27:26.460 --> 00:27:28.580
 Vanille oder TypeScript?

00:27:28.580 --> 00:27:30.080
 Vanille.

00:27:30.080 --> 00:27:32.720
 TypeScript oder CoffeeScript?

00:27:32.720 --> 00:27:34.300
 TypeScript.

00:27:35.200 --> 00:27:36.360
 Angular oder React?

00:27:36.360 --> 00:27:38.280
 React.

00:27:38.280 --> 00:27:39.840
 React oder Vue?

00:27:39.840 --> 00:27:41.040
 Oh, das wird echt lang.

00:27:41.040 --> 00:27:43.640
 Vue oder Svelte?

00:27:43.640 --> 00:27:45.280
 Svelte.

00:27:45.280 --> 00:27:48.440
 SPA oder SSR?

00:27:48.440 --> 00:27:50.280
 SSR.

00:27:50.280 --> 00:27:52.500
 Gemütlich oder schnell?

00:27:52.500 --> 00:27:54.380
 Gemütlich.

00:27:54.380 --> 00:27:56.500
 Caching oder Preloading?

00:27:56.500 --> 00:27:58.660
 Caching.

00:27:58.660 --> 00:28:02.200
 Performance Budget oder Budget Performance?

00:28:02.200 --> 00:28:05.120
 Performance Budget.

00:28:05.200 --> 00:28:07.020
 Head oder Body?

00:28:07.020 --> 00:28:08.240
 Head.

00:28:08.240 --> 00:28:09.920
 Synchron oder Asynchron?

00:28:09.920 --> 00:28:11.180
 Asynchron.

00:28:11.180 --> 00:28:13.420
 JavaScript oder kein JavaScript?

00:28:13.420 --> 00:28:15.000
 Kein JavaScript.

00:28:15.000 --> 00:28:17.060
 JavaScript oder Java?

00:28:17.060 --> 00:28:19.120
 JavaScript.

00:28:19.120 --> 00:28:21.540
 PHP oder Perl?

00:28:21.540 --> 00:28:22.660
 PHP.

00:28:22.660 --> 00:28:25.380
 Ich überspringe ein paar.

00:28:26.220 --> 00:28:29.400
 Mac OS oder Linux?

00:28:29.400 --> 00:28:29.580
 Mac OS oder Linux?

00:28:29.580 --> 00:28:31.920
 Puh, Mac OS.

00:28:31.920 --> 00:28:34.300
 Steve oder Linus?

00:28:34.300 --> 00:28:35.840
 Steve.

00:28:35.840 --> 00:28:37.900
 Gates oder Barmer?

00:28:37.900 --> 00:28:39.460
 Gates.

00:28:39.460 --> 00:28:41.860
 Zuckerberg oder Bezos?

00:28:41.860 --> 00:28:44.680
 Bezos.

00:28:44.680 --> 00:28:46.700
 Bezos oder Trump?

00:28:46.700 --> 00:28:48.180
 Bezos.

00:28:48.180 --> 00:28:49.600
 Okay, gut.

00:28:49.600 --> 00:28:50.620
 Das ist geschafft.

00:28:50.620 --> 00:28:51.680
 Kein einziges Mal weiter.

00:28:51.680 --> 00:28:54.400
 Die Musik hat nicht der ganze Bier gemacht.

00:28:54.400 --> 00:28:56.400
 Die müssen wir nächstes Mal ein bisschen leiser machen.

00:28:56.400 --> 00:28:57.260
 Ich dachte, das ist zu einfach.

00:28:57.260 --> 00:28:58.820
 Wir müssen noch mehr rausbringen.

00:28:58.820 --> 00:29:01.460
 Wirklich, das ist so ein richtig, wer mit Millionär-Vibe.

00:29:01.460 --> 00:29:02.880
 Sehr gut.

00:29:02.880 --> 00:29:03.480
 Ziel erreicht.

00:29:03.480 --> 00:29:04.580
 Wow.

00:29:04.580 --> 00:29:06.940
 Ich glaube, wir müssen auch ein bisschen kürzen.

00:29:06.940 --> 00:29:07.860
 Wir müssen, wir können schnell.

00:29:07.860 --> 00:29:09.340
 Ja, ich glaube auch, das weiß tatsächlich viel.

00:29:09.340 --> 00:29:12.100
 Das war tatsächlich viel.

00:29:12.100 --> 00:29:13.280
 Beschleunigen einfach ein bisschen.

00:29:13.280 --> 00:29:14.520
 Genau.

00:29:14.520 --> 00:29:18.180
 Machst einfach, äh, machst einfach ein bisschen Chipmunk-Stimmen draus.

00:29:18.180 --> 00:29:19.360
 Genau.

00:29:19.360 --> 00:29:21.600
 Gut.

00:29:21.600 --> 00:29:24.700
 So, dann kommen wir zu ...

00:29:24.700 --> 00:29:24.980
 Zu.

00:29:24.980 --> 00:29:29.640
 Hier ist WWS IV mit dem Tagesthema.

00:29:29.640 --> 00:29:40.700
 Ja, Mensch, das Tagesthema, das ist eigentlich der Shep, aber auch Performance.

00:29:40.700 --> 00:29:47.500
 Und wir fangen mal mit dir an, weil jetzt haben wir so ein bisschen Entweder-Oder gespielt.

00:29:48.540 --> 00:29:49.700
 Woran arbeitest du gerade?

00:29:49.700 --> 00:29:57.460
 Eigentlich an gar nichts so furchtbar spektakulärem, einem Online-Shop.

00:29:57.460 --> 00:30:02.460
 Also an einem Online-Shop wirklich mit im Frontend.

00:30:02.460 --> 00:30:04.900
 Und der ist klassisch aufgebaut.

00:30:04.900 --> 00:30:12.740
 Wir haben ja eben die, äh, die Fragerunde gehabt, wo du auch gefragt hast nach SPA oder SSR, also Server-Side Rendering.

00:30:12.740 --> 00:30:18.240
 Das habe ich ja auch geantwortet, ähm, weil ich einfach, also vielleicht auch,

00:30:18.440 --> 00:30:27.160
 durch, einfach durch die Umstände so in dem Bereich eigentlich, äh, mehr immer schon unterwegs war und auch nach wie vor bin als, äh, mit SPAs.

00:30:27.280 --> 00:30:35.600
 Also die habe ich durchaus auch gebaut, ähm, ähm, auch mit verschiedenen Frameworks, wie man ja bei den Framework-Fragen vielleicht auch rausgehört hat.

00:30:36.200 --> 00:30:37.360
 Ähm, ähm, genau.

00:30:37.360 --> 00:30:38.580
 Und die sind auch, äh, cool.

00:30:38.580 --> 00:30:50.900
 Ähm, aber am Ende, vielleicht auch, weil ich so ein Performance-Nazi bin, ähm, ist Server-Side Rendering einfach so für mich das, das einzig wahre.

00:30:52.400 --> 00:30:52.840
 Genau.

00:30:52.840 --> 00:30:57.420
 Und ansonsten, ähm, unterstütze ich auch immer noch ein bisschen die Rheinische Post.

00:30:57.420 --> 00:31:03.360
 Das ist diese große Nachrichtenseite, wo ich vorhin die, äh, die Firefox-Statistik rausgefischt hatte.

00:31:03.360 --> 00:31:09.300
 Genau, ähm, die, äh, bei denen habe ich, äh, stark mitgewirkt zuvor.

00:31:09.540 --> 00:31:28.940
 Und, äh, seit Anfang 2020 bin ich da sozusagen, äh, äh, nur noch so begleite ich die nur noch, äh, bin da zum Gebrainpicktwerden von, äh, von meinen Nachfolgern, die da sind und, äh, auch zum, zum Beraten und, und unter anderem bei Performance-Fragen.

00:31:28.940 --> 00:31:31.520
 Das ist rp-online.de?

00:31:31.520 --> 00:31:32.820
 Genau.

00:31:32.820 --> 00:31:37.900
 Also ich habe da gerade mal drauf rumgeklickt von der Nachrichtenseite, äh, wirklich sehr schnell.

00:31:38.800 --> 00:31:40.340
 Also hat mich jetzt gerade überrascht.

00:31:40.340 --> 00:31:50.720
 Also ich, ich hätte jetzt so mit ein bisschen Bedenkzeit von der Seite, also ich meine, da ist ja auch wirklich viel Content drauf auf so einer Seite, ähm, ist aber echt flott so zacki-zacki hin und her geklickt.

00:31:50.720 --> 00:31:51.360
 Erstaunlich.

00:31:51.360 --> 00:31:55.800
 Also, äh, klappt doch, die ist schon ganz gut geworden.

00:31:55.800 --> 00:31:56.320
 Ja.

00:31:56.320 --> 00:32:07.160
 Also da gibt's noch so ein paar, äh, Dinge, die man, äh, besser machen könnte, die aber, die sich, äh, nicht mehr mit Frontend, äh, Know-how irgendwie da rausquetschen lassen.

00:32:08.060 --> 00:32:09.980
 Dickere Server.

00:32:09.980 --> 00:32:11.740
 Ja.

00:32:11.740 --> 00:32:20.500
 Zum Beispiel, das, das, äh, hilft ja angeblich immer, nein, das stimmt nicht, ähm, bei manchen Sachen muss man dann doch, äh, sich ein bisschen anstrengen mit dem Frontend.

00:32:21.180 --> 00:32:22.220
 Genau, äh, cool.

00:32:22.220 --> 00:32:31.160
 Okay, ähm, dann, äh, wollte ich noch fragen, äh, wie sieht denn dein Setup gerade aus? Also was für einen Rechner hast du? Monitore, Gadgets, Tooling?

00:32:31.600 --> 00:32:36.020
 So, musst du auch nicht alles beantworten, sondern was dir jetzt halt so einfällt, was so vor dir steht, womit du arbeitest.

00:32:36.060 --> 00:32:47.460
 Genau, also, äh, vielleicht, äh, passend zu, äh, zu, äh, äh, zu der Tatsache, dass ich eben gegen den, äh, ähm, SPA-Strom schwimme, schwimme ich auch, was meine Plattform angeht, gegen den Strom.

00:32:47.600 --> 00:32:51.060
 Also ich bin immer schon Windows-User gewesen, aber du bist das auch, ne, Konstantin, oder?

00:32:51.060 --> 00:32:53.240
 Genau, Windows-User, ja. Hatten das schon öfter mal drüber, ja.

00:32:53.240 --> 00:32:59.980
 Also wir sind ja so die Paradiesvögel, die dann auf so Konferenzen ihre, äh, ihre nicht silbernen Rechner aufklappen, wobei meiner ist auch silbern.

00:32:59.980 --> 00:33:01.020
 Ja.

00:33:01.020 --> 00:33:02.120
 Also.

00:33:02.120 --> 00:33:17.420
 Genau, ähm, ich, äh, bin ein großer Fan der Dell-XPS-Serie, ähm, und da halt die 13-Zoller, die finde ich super, ähm, und hab mich auch so, sagen wir mal, wieder runtergehungert von zwei Monitoren auf einen externen Monitor,

00:33:17.420 --> 00:33:47.300
 auf, äh, viel Arbeit nur noch auf dem 13-Zoll-Display, ähm, genau, und das, das geht auch, ähm, Hintergrund ist einfach der, dass, dass ich, äh, auch aufgrund von Familie und so, dann, da ist man, da arbeitet man, wo man gerade irgendwie einen Sitzplatz findet, äh, drin oder draußen, ähm, und dann, äh, jammert man sonst einfach die ganze Zeit nur rum, wenn man dann wieder, ja, ohne meine tolle super Maus mit optischer Abtastung und, oder mein, äh, Curved Monitor kann ich nicht

00:33:47.300 --> 00:33:53.980
 arbeiten, so kann ich nicht arbeiten, so, dieses Problem, das hat man ja dann dauernd, und, ähm, das hab ich halt eben nicht mehr.

00:33:53.980 --> 00:33:56.120
 Genau, ansonsten.

00:33:56.120 --> 00:34:10.160
 Sehr gut Related dazu gerade, weil ich ja zwangsweise gerade immer noch am Laptop unterwegs bin, aber mir ging's jetzt genauso mit diesem Arbeitsurlaub, war das halt echt einfach so, ich hatte alles dabei, alles war eingerichtet, weil ich sowieso an der Kiste sitz und ich hab das Ding eingepackt, hab's dort ausgepackt und hab dort weitergearbeitet, also.

00:34:11.100 --> 00:34:13.860
 Die Wahrheit ist, es ist nicht zwangsweise, es ist selbst gewählt.

00:34:13.860 --> 00:34:15.180
 Selbst verschuldet, ja.

00:34:15.180 --> 00:34:16.620
 Das will er nur nicht, das will er nur nicht wahrhaben.

00:34:16.620 --> 00:34:18.780
 Ja, ja, ja, das haben wir im Stream schon breit getreten, das müssen wir nicht ja auch noch.

00:34:18.780 --> 00:34:23.920
 Ja, das müssen wir öfter mal, das muss, ich, ich trete so lange breit, dass sich was tut, das muss ein bisschen wehtun.

00:34:23.920 --> 00:34:24.460
 Bald, ganz bald.

00:34:24.460 --> 00:34:25.840
 Ja, ja, das spüren den Finger in den Mund gelegt.

00:34:25.840 --> 00:34:27.140
 Seit dem Dreivierteljahr.

00:34:27.140 --> 00:34:33.820
 Ja, naja, also, genau, dein Desktop-Rechen ist kaputt, ne, so war das.

00:34:33.820 --> 00:34:49.020
 Ja, genau, schon viel zu lange, aber ich hab mich jetzt echt dran gewöhnt, also es geht, wie du sagst, es geht und ich vermisse jetzt auch die Monitore jetzt nicht unbedingt, also klar, manchmal denke ich schon, wenn ich das jetzt noch hier rüberschieben könnte, also so einer mehr wäre schon ganz gut, ich könnte die auch einfach anschließen, aber ist ja halt auch so eine Geschichte.

00:34:50.060 --> 00:34:51.180
 Ich würde auch mal im Laptop gehen.

00:34:51.180 --> 00:35:15.080
 Ja, es gibt ja diese rare Momente, wo ich dann auch tatsächlich meinen externen Bildschirm dran habe, so wie jetzt, also jetzt hab ich hier meine Stichworte hier für die Sendung auf dem einen Screen und euch hier per Video auf dem großen, das ist natürlich dann, das genießt man dann tatsächlich auch mal, sowas zu haben, aber genau, das lass dich nicht einreißen, sonst fang ich das Jammern wieder an.

00:35:17.560 --> 00:35:42.160
 Genau, und sonst bin ich ein JetBrains-Mensch, einfach, ich bin halt auch so jemand, ich hab keine Lust, mir dauernd irgendwie neue Tools drauf zu schaffen, nur weil die gerade gehypt werden, wenn die dann gut abgehacken sind, dann mach ich das schon mal, aber ich hab da keine Zeit für, also da muss man natürlich immer aufpassen, dass man den Moment findet, wo das irgendwie Käse ist und man das dann doch tun sollte.

00:35:44.160 --> 00:36:04.000
 Ja, aber das ist einfach, das ist genauso, wenn ich jetzt ein Mac hätte, ich könnte mir jetzt ein M1 Mac holen und die sind ja Bombe, alles cool und Mac ist auch super, ich hab nichts gegen Macs, aber bis ich dann da alles wieder zusammen hab, das dauert dann so lange, da bin ich einfach, da lieg ich wie so ein Schildkröte auf meinem Rücken für ein paar Wochen und da hab ich einfach keine Lust drauf, auf die Phase.

00:36:04.000 --> 00:36:04.700
 Wenn's reicht.

00:36:06.020 --> 00:36:31.000
 Ja, ich hab die Transition jetzt gerade hinter mir oder bin noch drin und ich such immer noch, hab ja vor kurzem irgendwie auch mal drüber getwittert, bestimmte Zeichen auf der Tastatur, weil sie einfach nicht drauf sind und man sich die neuen Shortcuts merken muss, dass da knabber ich immer noch dran seit einem Jahr jetzt, also, der kann ich schon verstehen, wenn man sagt, ich will lieber in dem bleiben, wo ich bin und da bin ich schnell und wieso sollte ich denn was Neues lernen? Funktioniert doch, kann ich absolut nachvollziehen.

00:36:31.800 --> 00:36:35.120
 Ja. Außer wenn ich mit Konstantin drüber rede, da bin ich strenger.

00:36:35.120 --> 00:36:37.720
 Ja, ja, ja, ich wollte gerade sagen, Mensch, klingst du entspannt.

00:36:37.720 --> 00:36:43.940
 Das ist, äh, das kommt auf den Klienten an, mit dem ich rede.

00:36:43.940 --> 00:36:47.900
 Ja, das ist das Leben, äh.

00:36:47.900 --> 00:36:49.900
 Wollte ja, dass der Chef nochmal kommt, der muss mal nett sein.

00:36:49.900 --> 00:36:51.400
 So, so, so, so ist das.

00:36:51.400 --> 00:36:52.040
 Ja, auf jeden Fall.

00:36:52.040 --> 00:37:01.780
 Nee, aber es ist ja alles auch besser geworden unter Windows, also das war ja mal echt nicht cool und selbst da, also mit den richtigen Tools, ähm, ausgerüstet,

00:37:01.800 --> 00:37:20.040
 ist, geht das auch problemlos, äh, das sind einfach so, so Dinge, die man wissen muss und wenn man die dann einmal weiß, dann macht man es halt immer wieder, ähm, genau, aber jetzt, äh, so, es gibt ja immer mehr, äh, Entwickler-Support auch für die Windows-Plattform wieder, auch dank Microsoft und so, das ist schon ganz cool.

00:37:20.260 --> 00:37:27.360
 Was ich allerdings bei den, bei den Macs, also wo ich da super neidisch bin, das hätte ich auch gerne, ist, äh, einfach seinen Rechner auf einen anderen draufklonen.

00:37:27.360 --> 00:37:33.240
 Also das verstehe ich nicht, warum das bei Windows so ein Problem ist.

00:37:33.240 --> 00:37:38.100
 Ist, ja, ich weiß es gar nicht genau.

00:37:38.100 --> 00:37:41.000
 Ist das, ich hab das noch nie versucht unter Windows.

00:37:41.140 --> 00:37:48.820
 Also du meinst jetzt wirklich sowas wie, äh, ich nehm jetzt die Festplatte und schraub so woanders rein und dann läuft es so ungefähr oder meinst du jetzt mit Time Machine diese Backups?

00:37:48.820 --> 00:37:49.300
 Das würde noch sogar gehen.

00:37:49.300 --> 00:38:01.400
 Nee, also du kannst ja auch so zwei Macs einfach mit so einem Thunderbolt-Kabel oder früher Firewire oder so zusammenstöpseln und dann, äh, sagst du einfach hier, äh, spiel alles auf die neue Kiste rüber.

00:38:01.800 --> 00:38:03.260
 Das wusste ich gar nicht, dass das geht.

00:38:03.260 --> 00:38:10.060
 Ha, gut zu wissen, wenn ich dann mal, jetzt um, wenn ich mir den neuen, das neue MacBook Pro kaufe, nein, mach ich wahrscheinlich nicht, aber.

00:38:10.060 --> 00:38:16.340
 Du kannst ja sogar, äh, dein, äh, ein Mac als externe Festplatte an dem anderen Mac benutzen.

00:38:16.340 --> 00:38:20.880
 Also du, damit, du kannst quasi dein, ein Mac vom anderen Mac booten.

00:38:20.880 --> 00:38:22.080
 Das geht sogar wohl auch.

00:38:22.080 --> 00:38:24.800
 Das muss ich jetzt gleich dann im Anschluss mal ausprobieren.

00:38:24.800 --> 00:38:26.080
 Die Kabel hab ich dafür da.

00:38:26.080 --> 00:38:29.220
 Das ist ja, ich hoffe, ich mach da nichts kaputt, aber, um Gottes Willen.

00:38:29.940 --> 00:38:34.320
 Ich hab, ich hab hier zwei Macs stehen, also, äh, ich könnte das jetzt mal, könntest du mal machen.

00:38:34.320 --> 00:38:41.100
 Aber ich, nee, ich hab ein bisschen, ich hab ein bisschen Angst davor, ehrlich gesagt, weil ich bei beiden nicht will, dass irgendwas kaputt geht.

00:38:41.100 --> 00:38:43.340
 Das wär bei beiden echt blöd.

00:38:43.340 --> 00:38:45.880
 Weil dann, ich würde sagen, ich hab nicht noch einen Dritten.

00:38:45.880 --> 00:38:50.840
 Wir rufen einfach eure Hörer dazu auf, das auszuprobieren und zu berichten, oder?

00:38:50.840 --> 00:38:51.960
 Das ist gut, ja.

00:38:51.960 --> 00:38:55.120
 Genau, ich finde, das Risiko sollte man woanders hinschieben. Probiert das doch mal aus.

00:38:55.120 --> 00:38:55.900
 Schreibt es in die Kommentare.

00:38:56.640 --> 00:39:00.680
 Oder, wenn ihr nix schreibt, dann wissen wir, dass es schiefgegangen ist.

00:39:00.680 --> 00:39:01.280
 Stimmt.

00:39:01.280 --> 00:39:03.700
 Schreibt, während ihr das macht, in die Kommentare.

00:39:03.700 --> 00:39:05.820
 Und wenn die abbrechen zwischendrin, dann ...

00:39:05.820 --> 00:39:07.160
 Genau, vorher, genau, vorher.

00:39:07.160 --> 00:39:10.340
 Und dann sagen, wenn ich jetzt nicht nochmal schreibe, dann ist es schiefgegangen.

00:39:10.340 --> 00:39:11.420
 Ja, mega.

00:39:11.420 --> 00:39:12.220
 Genau, das finde ich gut.

00:39:12.220 --> 00:39:14.400
 Dann kommen auch ein paar mehr Kommentare zusammen.

00:39:14.400 --> 00:39:18.240
 So eine Todmann-Todfrau-Schaltung in den Kommentaren.

00:39:18.240 --> 00:39:19.060
 Genau, perfekt.

00:39:21.140 --> 00:39:26.200
 Auf PC gibt's übrigens den Lapplink-PC-Mover, Konstantin, falls du das mal irgendwann machen musst.

00:39:26.200 --> 00:39:29.980
 Der ist so immer mein letzter Rettungsanker.

00:39:29.980 --> 00:39:31.540
 Muss man zwar immer 50 Euro blechen.

00:39:31.540 --> 00:39:33.940
 Ach, jedes Mal bei jeder Nutzung.

00:39:33.940 --> 00:39:35.000
 Ja, ja.

00:39:35.000 --> 00:39:36.620
 Ja gut, aber das ist auch Schlauch wert, ja.

00:39:36.620 --> 00:39:38.320
 Genau.

00:39:39.780 --> 00:39:46.280
 Ja, und ansonsten, wenn ich nicht irgendwie ... Also ich habe so eine leichte Tendenz zum Fullstacken.

00:39:46.280 --> 00:39:52.400
 Also ich kann PHP und MySQL und so, aber ich verrate es keinem und möchte damit auch nicht belästigt werden.

00:39:52.400 --> 00:39:58.760
 Aber im Zweifelsfall öffne ich dann auch mal so die untere Etage, Tür und fummel da drin rum.

00:39:58.760 --> 00:40:08.560
 Genau, und ja, wenn ich dann noch ein bisschen Zeit habe, dann bin ich auch an einem Podcast beteiligt.

00:40:09.780 --> 00:40:10.460
 Genau.

00:40:10.460 --> 00:40:12.600
 Wir haben uns ja schon öfters mal krossreferenziert.

00:40:12.600 --> 00:40:17.100
 Hört rein, Working Draft, sehr guter deutscher Web-Developer-Podcast.

00:40:17.100 --> 00:40:23.060
 Gibt's schon viel länger als uns und haut eine Sendung pro Woche raus, konstant seit vielen Jahren.

00:40:23.060 --> 00:40:25.060
 Viel, viel regelmäßiger als wir.

00:40:25.060 --> 00:40:27.780
 Großen Respekt davor, das finde ich echt stark.

00:40:27.780 --> 00:40:29.380
 Das schaffen wir nicht.

00:40:29.380 --> 00:40:37.060
 Ich meine gut, wir sind auch in Anführungsstrichen nur zu zweit, aber ich glaube, wenn wir jetzt noch zwei von uns hätten, wären wir trotzdem genauso unstet, weil wir halt ...

00:40:37.060 --> 00:40:38.320
 Oh je, das wäre ja noch schlimmer.

00:40:38.320 --> 00:40:39.860
 Weil wir so unsuverlässige Typen sind.

00:40:39.860 --> 00:40:42.500
 Ihr macht alle zwei Wochen, oder?

00:40:42.500 --> 00:40:45.040
 Planmäßig, ja, aber es klappt auch nicht immer.

00:40:45.040 --> 00:40:46.120
 Planmäßig, ja, es klappt nicht immer.

00:40:46.120 --> 00:40:49.260
 Also wir haben manchmal, ich meine, wenn dann einer krank ist, dann müssen wir irgendwie gucken.

00:40:49.260 --> 00:40:51.020
 Wir produzieren halt auch nicht vor.

00:40:51.020 --> 00:40:53.500
 Also ich glaube, das habt ihr auf jeden Fall schon mal gemacht.

00:40:53.500 --> 00:40:56.340
 Ich meine, mich zu erinnern, dass irgendwie schon mal gesagt wurde, ja, Aufnahme.

00:40:56.340 --> 00:41:00.260
 Und da dachte ich so, hm, aber das, was ihr jetzt veröffentlicht habt, das war ja gar nicht das, worüber ihr gesprochen habt.

00:41:00.320 --> 00:41:10.100
 Ja, manchmal sind wir tatsächlich, also das war dann zu einer Zeit, wo wir irgendwie mit dem Postproduktion irgendwie nicht hinterherkamen.

00:41:10.100 --> 00:41:18.820
 Dann hatten wir halt so quasi ein größeres Backlog noch an aufgenommenen Folgen, die wir dann weggearbeitet haben.

00:41:18.900 --> 00:41:25.900
 Aber dann passiert halt auch schon mal sowas, dass dann irgendwie alle keinen Bock, krank, irgendwelche faulen Ausreden, was weiß ich.

00:41:25.900 --> 00:41:31.040
 Und dann weiß man ja, dass, oh, wir haben ja einen Backlog, ja, dann müssen wir heute keine Sendung aufnehmen, so.

00:41:31.040 --> 00:41:39.380
 Und dann, so arbeitet man das Backlog dann wieder ab, bis dann irgendwann man keine faulen Ausreden mehr hat, weil das Backlog eben nicht mehr existiert.

00:41:39.380 --> 00:41:43.060
 Und man dann leerlaufen würde, wenn man das jetzt noch einmal machen würde.

00:41:44.820 --> 00:41:54.960
 Genau, aber wir machen nicht so tatsächlich, dass wir machen, machen jetzt nicht, dass wir irgendwie an einem Tag acht Folgen aufnehmen und die dann irgendwie dann nach und nach releasen oder so.

00:41:54.960 --> 00:42:01.960
 Das ist dann, das ist schon so, dass wir uns eigentlich auch einmal die Woche nur zusammen, sag mal, telefonieren.

00:42:04.600 --> 00:42:07.060
 Genau, ja, gut.

00:42:07.060 --> 00:42:10.500
 Haben wir auch noch über Working Draft gesprochen, sehr gut.

00:42:10.500 --> 00:42:14.560
 Genau, wir hatten jetzt gerade dein Setup.

00:42:14.560 --> 00:42:18.540
 Ich glaube, wenn du jetzt da nichts mehr hast hinzuzufügen, also ich habe jetzt da keine weiteren Fragen.

00:42:18.540 --> 00:42:21.740
 Das ist so, ich kann es mir jetzt ungefähr ganz gut vorstellen.

00:42:21.740 --> 00:42:29.220
 Dann können wir mal noch über, bevor wir mit Performance anfangen, hätte ich noch eine Frage, genau, zu DOM-Tree-Map.

00:42:29.300 --> 00:42:32.380
 Das ist nämlich ein Plugin, was du gebaut hast, was ich echt sehr nützlich finde.

00:42:32.380 --> 00:42:37.340
 Und da würde mich interessieren, wie du drauf gekommen bist, das zu bauen und wie man sowas baut.

00:42:37.340 --> 00:42:38.060
 Ich habe noch nie ein Browser-Plugin gebaut.

00:42:38.060 --> 00:42:40.840
 Vielleicht erzähl dir kurz, was das macht, weil ich kenne es nicht.

00:42:40.840 --> 00:42:43.060
 Ah, ja, dann fang doch mal damit an.

00:42:43.060 --> 00:42:45.580
 Und vielleicht auch der ein oder andere Hörer oder Hörerin auch nicht.

00:42:45.580 --> 00:42:54.000
 Ja, also das hat auch einen Bezug zu Performance, nämlich zu der Render-Performance des Browsers.

00:42:54.000 --> 00:43:03.200
 Ihr kennt das vielleicht, dass ihr so ein Lighthouse-Audit macht und dann sagt er euch, ihr habt viel zu viele DOM-Notes auf der Seite.

00:43:03.200 --> 00:43:09.680
 Das habe ich heute gemacht und wir haben viel zu viele DOM-Notes auf unserer Seite, Konstantin, wollte ich dir noch sagen, nämlich über tausend auf der Startseite.

00:43:09.680 --> 00:43:09.820
 Aha.

00:43:09.820 --> 00:43:25.760
 Genau, und ich glaube, dass der Lighthouse gibt einem dann ja noch so gütigerweise so einen Hinweis, wo quasi die Stelle ist, wo der DOM-Baum sozusagen am tiefsten runtergeht, sozusagen der Marianengraben der Webseite.

00:43:25.760 --> 00:43:27.920
 Sehr gut.

00:43:27.920 --> 00:43:31.920
 Aber das alleine ist halt so okay.

00:43:31.920 --> 00:43:47.540
 Und ich hätte halt gerne ein bisschen mehr Unterstützung seitens des Browsers gehabt, dass ich eben sozusagen explorativ meinen DOM sozusagen durchstreifen kann und er mir dann anzeigt, guck mal, hier ist ein hoher Berg und da ist ein hoher Berg und so.

00:43:48.340 --> 00:44:00.240
 Also da, also da musst du gucken gehen, da kannst du, findest du viele DOM-Notes und HTML-Elemente, da kannst du mit der Schippe aufräumen gehen und in der anderen Ecke da, wo halt eine Ebene ist, nicht.

00:44:01.860 --> 00:44:19.040
 Und genau, ich hatte dann irgendwann die, ich glaube, die Chrome-DevTools-Menschen oder die von verschiedenen Browsern angepingt, unter anderem auch, glaube ich, Microsoft, weil die momentan, wir haben es ja eben schon einmal gehört, sind die so ein bisschen, sagen wir mal, offener für so Vorschläge.

00:44:21.420 --> 00:44:35.080
 Und ich hatte auch den Entwickler des Polypain-Browsers gefragt, ich weiß nicht, ob ihr den kennt, das ist so ein, also auf Chromium basierter Browser, der extra für eben Frontend-Entwicklung gedacht ist mit, du kannst verschiedene View-Prows.

00:44:35.080 --> 00:44:44.120
 Ich habe mich jetzt gerade so kurz zum ersten Mal gehört, dass es den gibt in dem Accessibility-Workshop mit Manuel Matusowitsch, hat er das erwähnt und da habe ich mir auch gedacht, den muss ich mir mal angucken.

00:44:44.120 --> 00:44:45.720
 Ich glaube, das ist ein echt interessantes Ding.

00:44:45.720 --> 00:44:47.020
 Genau.

00:44:47.020 --> 00:44:48.860
 Kostet allerdings, glaube ich, Geld, ne?

00:44:48.860 --> 00:44:50.740
 Genau, der kostet Geld.

00:44:51.420 --> 00:44:59.360
 Aber der ist, also dafür braucht man einen großen Monitor tatsächlich, weil man kann da eben sehr viele View-Ports nebeneinander aufmachen.

00:44:59.360 --> 00:45:08.960
 Also ich finde den gut und auch der Mensch, der den entwickelt ist, super und macht, haut out down, neue Releases raus.

00:45:08.960 --> 00:45:19.340
 Jedenfalls, den hatte ich auch angeschrieben und dann irgendwie haben die alle gesagt, so ja, interessant und so, müssen wir mal gucken, könnte ich mal versuchen reinzuhacken und dachte ich, ja, kann ich aber auch selber als Plugin vielleicht mal bauen.

00:45:21.340 --> 00:45:34.760
 Und dann habe ich mich eben damit beschäftigt, wie baut man überhaupt Browser-Erweiterung und tatsächlich ist das gar nicht so gut dokumentiert, wie man das vielleicht erwarten würde, insbesondere für große Browser wie Chrome.

00:45:37.280 --> 00:45:50.520
 Und es gibt auch verschiedene Versionen dieser Browser-Extension API, die nennt man das, ich glaube, Manifest, nennen die das einfach nur.

00:45:51.380 --> 00:45:58.860
 Und die, es gibt eine, die ältere ist halt Callback-basiert und die neuere ist Promise-basiert und die neuere benutzt auch Serviceworker.

00:46:00.120 --> 00:46:06.820
 Und dann habe ich eben die neuere genommen und das war auch in Ordnung.

00:46:06.820 --> 00:46:18.960
 Ich habe dann irgendwann in so GitHub-Repos, glaube ich, von Eddie Osmani so ein paar Schnipsel gefunden, die ich mir klauen konnte, wo ich dann irgendwie Hinweise bekomme, wie, jetzt hat jemand ein neues Element selektiert.

00:46:19.120 --> 00:46:29.200
 Oder, und dann gehst du halt hin und injectest quasi ein Script in die eigentliche Seite, die dann die Dom-Notes da abklappert, dir das zurückmeldet.

00:46:29.200 --> 00:46:36.340
 Und dann kannst du das eben rendern mit so einem D3-JS-Ding, habe ich das, rendere ich dann quasi so eine Tree-Map.

00:46:36.340 --> 00:46:40.060
 Genau, und das war dann okay.

00:46:40.060 --> 00:46:45.440
 Und dann wollte ich das Ganze, dann dachte ich, ja, hier, ich, ich werde Firefox jetzt nicht auch noch bashen.

00:46:45.440 --> 00:46:47.540
 Ich portiere das natürlich zu Firefox auch noch rüber.

00:46:47.540 --> 00:46:58.000
 Und da stellte ich dann fest, ah, okay, Firefox unterstützt, also die unterstützen so quasi dieselben Dinge, Pi mal Daumen, aber Firefox unterstützt halt nur V2.

00:46:58.360 --> 00:47:00.080
 Also die Callback-basierte Geschichte.

00:47:00.080 --> 00:47:04.640
 Und dann musste ich das alles eben nochmal rückportieren.

00:47:04.640 --> 00:47:12.420
 Genau, und jetzt haben sie gerade den V3-Support sozusagen öffentlich gemacht.

00:47:12.420 --> 00:47:16.400
 Und die Chrome-Leute haben auch gesagt, dass sie V2 abschalten wollen.

00:47:16.400 --> 00:47:23.880
 Das heißt, jetzt müsste ich eigentlich demnächst hingehen und das wieder, wieder sozusagen in die Moderne zurückportieren.

00:47:23.880 --> 00:47:28.300
 Genau, aber der Quelltext liegt auch auf GitHub.

00:47:28.360 --> 00:47:30.240
 Also da könnt ihr reingucken.

00:47:30.240 --> 00:47:35.520
 Und da ist es relativ trivial.

00:47:35.520 --> 00:47:36.760
 Also es ist jetzt gar nicht so viel.

00:47:36.760 --> 00:47:48.620
 Das Problem ist wirklich einfach, dass es undokumentiert ist und dass man einfach lange vielleicht auf Stack Overflow zum Beispiel suchen muss, um so seine Hinweise zusammen zu puzzeln.

00:47:48.980 --> 00:47:54.780
 Und dann aber teilweise auch veraltete Sachen dann wiederfindet, die dann halt doch nicht mehr so funktionieren, weil irgendeine Browser-AP dann abgeschaltet wurde.

00:47:54.780 --> 00:47:59.220
 Weil ich habe nämlich auch schon zweimal den Versuch gewagt, eine Extension zu entwickeln, so für interne Zwecke was.

00:48:00.480 --> 00:48:02.280
 Und genau das gleiche Problem, ja.

00:48:02.280 --> 00:48:04.140
 Erstens, mit welcher Version mache ich es jetzt?

00:48:04.140 --> 00:48:10.040
 Und dann wieder ewig gesucht und dann alte Sachen gefunden und genau so eingefügt, aber es funktioniert einfach nicht.

00:48:10.040 --> 00:48:15.420
 Und wenn man Glück hat, steht dann irgendwo in dem Kommentar unten drunter, ja, das geht jetzt nicht mehr, man muss es jetzt so machen.

00:48:15.420 --> 00:48:17.820
 Und wenn man Pech hat, dann muss man halt selber weitersuchen.

00:48:18.820 --> 00:48:21.000
 Ja, da hast du ja ganz schön viel Arbeit gemacht.

00:48:21.000 --> 00:48:23.720
 Ja, ich habe es jetzt gerade mal installiert.

00:48:23.720 --> 00:48:25.540
 Ich bin gespannt, das Ergebnis mal anzuschauen.

00:48:25.540 --> 00:48:30.160
 Ich habe es jetzt gerade mal noch schnell installiert, also nochmal, ich dachte, ich hätte es eigentlich schon.

00:48:30.160 --> 00:48:33.580
 Das war wahrscheinlich auf meinem Arbeitsbrowser, auf dem Arbeitsrechner.

00:48:33.580 --> 00:48:41.060
 Und ich wollte jetzt gerade nochmal vielleicht für unsere Hörer und Innen nochmal kurz beschreiben, was das überhaupt ist und wo ich das finde.

00:48:41.060 --> 00:48:52.040
 Also wenn ich das installiert habe in Chrome jetzt beispielsweise, dann finde ich das in den Dev-Tools in dem Bereich, wo auch zum Beispiel die Styles beim HTML angezeigt werden.

00:48:52.040 --> 00:49:01.960
 Da ist dann so ein extra Reiter DOM-Tree-Map und da kann ich dann quasi auf so farblichen Quadraten bzw. Rechtecken mich durchklicken.

00:49:01.960 --> 00:49:13.480
 Also ich kann, ich habe jetzt zum Beispiel mal einfach Google aufgemacht, da habe ich jetzt ein riesiges, großes, blaues Quadrat und ein ganz, ganz, ganz kleines, orangenes irgendwie unten drunter nochmal.

00:49:13.480 --> 00:49:17.240
 Und wenn ich auf das große jetzt mal drauf drücke, dann gehe ich da quasi eine Ebene rein.

00:49:17.240 --> 00:49:23.100
 Vorher stand da, dass das 102 Kind-Elemente hat.

00:49:23.640 --> 00:49:34.240
 Wenn ich da reinklicke, dann teilt sich das auf in mehrere und dann habe ich so quasi so eine Darstellung aus Rechtecken in verschiedenen Farben, wo immer jeweils steht, wie viele Kind-Elemente da drin sind und kann mich da so einmal durchnavigieren.

00:49:34.240 --> 00:49:44.920
 Ja, das ist eigentlich eine ziemlich sehr gute visuelle Darstellung von den DOM-Notes und dann sieht man auch tatsächlich, glaube ich, ziemlich gut, sehr schnell, wo liegt denn der Marianengraben.

00:49:44.920 --> 00:50:02.800
 Ich weiß, wo er bei uns bei der Podcast-Seite ist. Es ist nämlich in SVG. Ich glaube, das ist wahrscheinlich gar nicht so selten. Aber ich glaube, so extrem tief geht es nicht. Ich glaube, unser Problem ist eher insgesamt die Anzahl der DOM-Notes, weil wir halt kein Paging haben auf unserer Startseite und alle Folgen da untereinander aufgelistet werden.

00:50:04.240 --> 00:50:17.740
 Genau, aber wir werden ja gleich auch noch über Performance sprechen und da werden wir auch da ein paar Dinge besprechen, die das vielleicht auch unnötig machen, dass ihr da abspeckt.

00:50:17.740 --> 00:50:20.020
 Oha, das ist super.

00:50:20.020 --> 00:50:20.500
 Habe ich mal gespannt.

00:50:21.620 --> 00:50:36.940
 Ansonsten noch der Hinweis, also die Nodes sind ja, sind tatsächlich DOM-Elemente, aber Nodes sind ja auch Text-Nodes, also Dinge, die man sozusagen nicht, die müssen ja auch gerendert und gelayoutet werden, darum, die zählt ja dann mit.

00:50:37.460 --> 00:50:50.720
 Und es gibt noch ein weiteres eingebautes Tool für alle BEM-Affinitiados, also alle, die eben Block-Element-Modifier-CSS schreiben.

00:50:50.720 --> 00:51:00.480
 Da kriegt man im Prinzip auch wieder eine Tremap. Das befindet sich dann aber so quasi in der normalen DevTools-Tab-Reihenfolge.

00:51:01.240 --> 00:51:20.800
 Da bekommt man sozusagen in der Tremap die ganzen BEM-Komponenten gezeigt und da siehst du dann, okay, weiß ich nicht, der Slider, der WWSCV-Slider, der, puh, der hat echt viele DOM-Nodes, den muss ich mir nochmal angucken.

00:51:21.560 --> 00:51:29.220
 Oha, das habe ich noch gar nicht gesehen. Wir sind nicht so strikt auf unserer Podcast-Seite mit BEM, aber wir haben durchaus so ein bisschen BEM da drin.

00:51:29.220 --> 00:51:42.040
 Nicht alles, aber das hätte ich so gar nicht gefunden. Cool. Direkt BEM-Komponent-Stats und dann sehe ich das ganze Ding nochmal. Das ist ja, okay, das ist richtig cool.

00:51:43.480 --> 00:52:00.300
 Genau, dann kann man der Entwicklerin oder dem Entwickler, der halt die Komponente, die da die Ziellinie reißt, dann kann man dem am Ohr ziehen und sagen, hier, nochmal neu hier mit weniger DOM-Nodes.

00:52:00.800 --> 00:52:10.060
 Und ich hatte auch geguckt, ob man das irgendwie vielleicht auch für so React-Komponenten irgendwie hinbekommt, aber das ist echt nicht so, nicht so trivial, so da die Boundaries rauszufinden.

00:52:10.060 --> 00:52:16.080
 Und wenn jemand Tailwind benutzt oder sowas, dann, dann ist das so, geht nicht. Sorry.

00:52:16.080 --> 00:52:18.880
 Okay.

00:52:18.880 --> 00:52:22.400
 Genau, wobei auch Tailwind cool ist, also auf seine Art und Weise.

00:52:24.020 --> 00:52:33.500
 Ich bin da gar nicht, ich finde das gar nicht so schlimm. Ich bin da ja ein bisschen konvertiert worden zu Helferklassen. Ich glaube, da haben wir auch schon mal drüber gesprochen.

00:52:33.500 --> 00:52:39.360
 Letzten Endes ist es ja quasi, sind ja alles irgendwie, also Utility-Klases oder keine Ahnung, wie man es auch immer nennen will.

00:52:39.360 --> 00:52:51.940
 Ich fand das eine Weile ganz doof mit dem Argument, ja, da kann ich auch gleich Inline-CSS schreiben und habe das auch manchmal an der einen oder anderen Stelle auch mal irgendwo laut geäußert, auch mal bei einer Konferenz, wo ich einen Vortrag über Tailwind gesehen habe.

00:52:52.120 --> 00:52:56.920
 Kann das sein, dass die Vanessa mal einen Vortrag darüber gehalten hat?

00:52:56.920 --> 00:52:58.780
 Kann ich mir vorstellen, ja.

00:52:58.780 --> 00:53:01.480
 Das ist ja eine Podcast-Kollegin.

00:53:01.480 --> 00:53:06.420
 Es kann sogar sein, dass das von ihr war, genau aus Working Draft. Es kann sogar sein, dass das da war.

00:53:07.800 --> 00:53:27.680
 Dann entschuldige ich mich nochmal ausdrücklich hier an der Stelle, weil ich dann, ich bin dann immer mehr in Bootstrap reingerutscht und habe dann gemerkt, die Bootstrap-Helferklassen, so wenn man jetzt am entwickeln ist, also Bootstrap gibt es ja ganz viel irgendwie für Flexbox zu bauen und irgendwie Abstände und so klassische Sachen, die man im Layout irgendwie verwendet.

00:53:28.400 --> 00:53:37.220
 Und es ist echt bequem, einfach in HTML immer nur ein paar Klassen reinzuschreiben und einfach nur im HTML-File zu bleiben und damit Layout zu bauen.

00:53:37.220 --> 00:53:39.160
 Es ist echt eine angenehme Arbeitsweise.

00:53:39.160 --> 00:53:48.880
 Man kann jetzt darüber streiten, ob das dann gut ist, dass ich überall so Elemente mit Important dann am Ende habe, weil das ist diese Bootstrap-Helper, die ballern halt überall drüber mit Important.

00:53:49.000 --> 00:53:49.700
 Das ist so gedacht.

00:53:49.700 --> 00:53:53.900
 Aber die Arbeitsweise macht Spaß, tatsächlich, muss ich sagen.

00:53:53.900 --> 00:53:57.760
 Es nimmt einem so ein bisschen diesen Switch ab, dann immer hin und her zwischen den Files.

00:53:57.760 --> 00:54:01.760
 Auch wenn ich sie nebeneinander stehen habe, ist es immer so, ich bin in zwei verschiedenen Welten.

00:54:01.760 --> 00:54:12.920
 Wenn ich einfach nur Klasse reinschreiben muss und weiß, ah ja, ich brauche jetzt hier noch einen Abstand, ungefähr so, dann mache ich mal, okay, MB-3 und dann kriege ich irgendwie so und so viel Pixel großen Abstand.

00:54:12.920 --> 00:54:17.440
 Und finde ich, es ist eine angenehme Arbeitsweise, muss ich zugeben.

00:54:17.440 --> 00:54:21.740
 Das war ja auch der Ansatz von diesem Adobe Brackets damals, weiß nicht, ob ihr euch da noch erinnern könnt.

00:54:21.740 --> 00:54:33.520
 Das hatte ja auch so auf, genau, so ein Web-Editor, der so da ein bisschen aufgetrumpft hat, indem du quasi in place dein CSS zu diesem HTML irgendwie editieren konntest.

00:54:33.520 --> 00:54:39.320
 Also da konntest du irgendwie so, dir das so quasi rüber beamen, da so rein, kurz einmal aufmachen.

00:54:39.320 --> 00:54:47.560
 Ja, das war das Feature, womit die groß geworben haben. Stimmt, ich konnte an dem HTML quasi das CSS dazu aufklappen, wenn ich mich noch richtig erinnere.

00:54:47.560 --> 00:54:51.100
 Ja, das, warum haben wir das eigentlich nicht?

00:54:51.100 --> 00:54:52.720
 Warum haben wir das eigentlich nicht?

00:54:52.720 --> 00:54:55.840
 Ja, aber das, ich meine, ja, keine Ahnung, das war ja Teil dieser ...

00:54:55.840 --> 00:54:58.320
 Da haben wir ja ein Patent drauf, dass es keiner andere einbauen darf, aber die Idee ist ziemlich gut.

00:54:58.320 --> 00:55:02.400
 Nee, ja, hat Adobe aber leider ja wieder einen Nagel gehängt.

00:55:04.320 --> 00:55:10.940
 Ja, ich meine, das ... Also, liebe Zuhörer und Zuhörerinnen, bitte ein VSCode-Plugin dafür schreiben, bitte danke.

00:55:10.940 --> 00:55:16.620
 Ich benutze es dann und ich bewerte es sehr gut und ich werde, wir werden es hier im Podcast dann besprechen und Werbung dafür machen.

00:55:16.620 --> 00:55:17.180
 Also schon mal ...

00:55:17.180 --> 00:55:22.240
 Oh, bewerten, da ist mir aufgefallen, dass deine Extension noch gar nicht, noch keine Bewertung hat, noch kein Review.

00:55:22.240 --> 00:55:22.600
 Nee?

00:55:22.600 --> 00:55:23.300
 Das müssen wir ändern.

00:55:23.300 --> 00:55:25.480
 Ich dachte, irgendwelche Menschen hätten ein Sternchen gegeben.

00:55:25.480 --> 00:55:26.840
 Ja, also bei mir stand da noch null.

00:55:26.840 --> 00:55:27.960
 Bei mir steht null, ja?

00:55:27.960 --> 00:55:28.500
 Ja, stimmt.

00:55:28.500 --> 00:55:30.960
 Dann melde ich mich doch direkt mal an.

00:55:30.960 --> 00:55:32.940
 Vielleicht, dass du auch gesendet nach einem Monat oder so.

00:55:32.940 --> 00:55:35.040
 Das werden wir ändern.

00:55:35.040 --> 00:55:36.680
 Ja, richtig.

00:55:36.680 --> 00:55:39.240
 Also, hier direkt fünf Sterne, was?

00:55:39.240 --> 00:55:43.480
 Aber man sieht doch die Menge User, glaube ich, die das installiert haben, oder?

00:55:43.480 --> 00:55:44.080
 1000 plus, ja.

00:55:44.080 --> 00:55:47.800
 Aber noch keine Sternchen und eine Null neben den Sternchen.

00:55:47.800 --> 00:55:51.900
 Ich weiß aber auch gar nicht, wo man es hier ... Also, ich sehe auch gar nichts zum Bewerten.

00:55:51.900 --> 00:55:54.480
 Ich kann es nicht, ich kann die Sterne nicht anklicken.

00:55:54.480 --> 00:55:56.080
 Ich bin jetzt eingeloggt.

00:55:56.080 --> 00:55:57.540
 1000 plus Nutzer steht da.

00:55:57.540 --> 00:56:01.380
 Ich kann aber, vielleicht hat es keine Bewertung, weil die Bewertungsfunktion kaputt ist.

00:56:01.380 --> 00:56:01.980
 Ja, das kann das nicht sein.

00:56:01.980 --> 00:56:05.760
 Vielleicht habe ich die auch aus Versehen nicht irgendwie, vielleicht hätte ich das irgendwo eintragen müssen.

00:56:05.760 --> 00:56:06.660
 Das, genau.

00:56:06.660 --> 00:56:08.380
 Aber dann war es bei Firefox, genau.

00:56:08.380 --> 00:56:13.160
 Da gibt es ja, da gibt es auf jeden Fall vier Bewertungen, die sind auch fünf Sterne.

00:56:13.160 --> 00:56:14.320
 Also, finden die Leute wohl gut.

00:56:14.320 --> 00:56:16.660
 Ich finde es auch gut.

00:56:16.660 --> 00:56:20.320
 Ich würde sofort fünf Sterne geben im Chrome Web Store, wenn es ginge.

00:56:20.500 --> 00:56:22.000
 Es geht aber nicht, es ist ausgetraut.

00:56:22.000 --> 00:56:22.640
 Das ist doch Sabotage.

00:56:22.640 --> 00:56:28.940
 Ich glaube auch, die haben sich geärgert über deinen Anfragen.

00:56:28.940 --> 00:56:30.720
 Die View-Dev-Tools kann ich auch nicht bewerten.

00:56:30.720 --> 00:56:33.080
 Also, ich kann hier nirgends was hinabringen.

00:56:33.080 --> 00:56:33.580
 Ja, toll.

00:56:33.580 --> 00:56:37.480
 Und dann, also jetzt, wenn ich da reingucke, da kriege ich die Krise.

00:56:37.480 --> 00:56:40.500
 Jetzt gucke ich in den Code rein, um zu gucken, ob das irgendwie disabled ist.

00:56:40.500 --> 00:56:42.240
 Sogar Are They Hidden True?

00:56:42.240 --> 00:56:45.280
 True haben sie auf dieses Bewertungs-Sternchen.

00:56:45.280 --> 00:56:46.660
 Das ist komplett versteckt.

00:56:48.280 --> 00:56:54.720
 Also, es scheint deaktiviert, aber dann gucke ich da rein und sehe, naja, das ist jetzt natürlich Diff-Suppe mit irgendwelchen generischen Klassen und SVGs da drin.

00:56:54.720 --> 00:56:56.800
 Das kann man so elegant machen mit Radio-Buttons.

00:56:56.800 --> 00:56:59.680
 Es gibt so eleganze Varianten.

00:56:59.680 --> 00:57:04.880
 Schau mal, du kannst, wenn du da auf dem Dings bist, dann bist du erst auf der Übersichtsseite.

00:57:04.880 --> 00:57:07.720
 Dann gibt es Umgang mit dem Datenschutz und dann Meinungen.

00:57:07.720 --> 00:57:10.320
 Und wenn du da drauf gehst, dann kannst du da was machen.

00:57:10.720 --> 00:57:12.820
 Oh, das ist ja extrem versteckt.

00:57:12.820 --> 00:57:13.960
 Ja, cool.

00:57:13.960 --> 00:57:19.400
 Okay, gut, da kann ich, das weiß ich, warum, das findet keiner, wie man bewerten kann.

00:57:19.400 --> 00:57:19.680
 Ja.

00:57:19.680 --> 00:57:23.840
 Und das sind trotzdem auch irgendwelche komischen Diff-Elemente.

00:57:23.840 --> 00:57:24.880
 Da darf man einfach nicht reingucken.

00:57:24.880 --> 00:57:25.380
 Super.

00:57:25.380 --> 00:57:27.340
 Eh nicht.

00:57:28.620 --> 00:57:33.600
 Ich gucke als Entwickler übrigens ganz selten in den Quelltext von anderen Zeiten rein.

00:57:33.600 --> 00:57:36.620
 Also, ihr könnt mir alles andrehen, ich würde es wahrscheinlich nicht merken.

00:57:36.620 --> 00:57:43.300
 Letzten Endes ist es ja, ich habe das früher extrem viel gemacht, wirklich exzessiv.

00:57:43.300 --> 00:57:50.000
 Auch, das ist halt so aus so einem jugendlichen, ich kann doch bestimmt irgendwas besser als du Gedanken,

00:57:50.000 --> 00:57:52.220
 weil man sich da irgendwie gut fühlen will.

00:57:52.220 --> 00:57:54.860
 Und dann will man einen Fehler beim anderen finden, wo man dann sagen kann, ha, guck mal hier.

00:57:55.900 --> 00:58:00.080
 Aber mittlerweile bin ich eigentlich immer froh, wenn es einfach nur funktioniert und nicht kaputt ist.

00:58:00.080 --> 00:58:02.520
 Ja, und guck, eigentlich selten.

00:58:02.520 --> 00:58:07.880
 Ich habe es jetzt nur, ich wollte jetzt nur wissen, ich wollte jetzt irgendwie darauf Rückschlüsse ziehen,

00:58:07.880 --> 00:58:09.480
 ist das Ding deaktiviert?

00:58:09.480 --> 00:58:14.440
 Also sehe ich da irgendwie eine Deactivated-Klasse oder sowas, um sehen zu können,

00:58:14.440 --> 00:58:17.520
 ist es jetzt irgendwie bewusst deaktiviert oder hat es irgendeinen anderen Grund?

00:58:17.520 --> 00:58:22.380
 Und jetzt wissen wir ja, schlechte UX, man sollte es nämlich eigentlich da direkt bewerten können

00:58:22.380 --> 00:58:26.880
 oder zumindest sollte da ein Link sein auf die Meinungen-Seite, aber na gut.

00:58:26.880 --> 00:58:31.500
 Ich finde meine eigene Rezension sehr nützlich, muss ich sagen.

00:58:31.500 --> 00:58:32.880
 Kann man hier mich auch anklicken.

00:58:32.880 --> 00:58:34.880
 Na top.

00:58:34.880 --> 00:58:40.160
 So, hast du deine ersten fünf Sterne bekommen im Chrome Web Store.

00:58:40.160 --> 00:58:41.620
 Ja, sehr gerne.

00:58:41.620 --> 00:58:43.380
 Nee, es ist wirklich, es ist ja eine gute Extension.

00:58:43.380 --> 00:58:45.040
 Keine Frage.

00:58:47.100 --> 00:58:51.300
 Gut, meine Güte, ich habe gerade auf die Zeit geschaut.

00:58:51.300 --> 00:58:54.260
 Oh ja, nicht so effizient, oder?

00:58:54.260 --> 00:58:59.880
 Also die nachfolgenden Sendungen verzögern sich um circa zwei Stunden.

00:58:59.880 --> 00:59:02.640
 Aber es war ein gutes Zeichen, wir unterhalten uns halt nicht.

00:59:02.640 --> 00:59:04.920
 Ja, hervorragend.

00:59:04.920 --> 00:59:09.620
 Also ich habe ja Angst gehabt, immer denkst du, oh ja, weiß nicht, wie läuft das dann?

00:59:09.620 --> 00:59:14.300
 Und dann treibt man noch lieber ein paar Themen extra auf, falls man irgendwie nichts zu reden hat oder so.

00:59:14.300 --> 00:59:16.040
 Ich meine, da habe ich jetzt eigentlich bei dir keine Angst gehabt.

00:59:16.040 --> 00:59:22.500
 Ich meine, du bist ja Podcast erfahren, machst das ja viel länger als wir schon, aber weiß nicht.

00:59:22.500 --> 00:59:23.820
 Ich finde es großartig.

00:59:23.820 --> 00:59:27.220
 Das schöne Phänomen bei den Podcasten ist ja, wir denken das ja auch immer.

00:59:27.220 --> 00:59:31.000
 Also wir denken ja auch immer, oh je, wir haben überhaupt gar keine Themen.

00:59:31.000 --> 00:59:36.620
 Und dann kommen, nehmen wir das Thema, dann schaffen wir vielleicht so eine Viertelstunde, 20 Minuten darüber zu quatschen.

00:59:36.620 --> 00:59:40.540
 Und dann eskaliert das und nach einer Stunde machen wir dann mal Feierabend.

00:59:40.540 --> 00:59:41.020
 Das ist normal, ja.

00:59:41.280 --> 00:59:56.720
 Ganz normal. Also so ist dieser Podcast ja gestartet. Also bevor es überhaupt den Podcast gab, war es so, Konstantin und ich sitzen, ich weiß es noch genau, sitzen auf seinem Balkon und quatschen und quatschen darüber, man könnte doch mal einen Podcast machen.

00:59:56.720 --> 01:00:03.900
 Stundenlang. Und dann so, ja, wenn man jetzt ein Mikrofon nebendrang gestellt hätte, hätten wir schon die erste Folge gehabt, so ungefähr.

01:00:03.900 --> 01:00:18.840
 Und ja, das, also das geht uns auch so. Also wir reden auch manchmal vor der Sendung lang und danach noch und es nimmt gar kein Ende. Vielleicht sind wir einfach Quatschköppe und deswegen machen wir wahrscheinlich auch einen Podcast, nehme ich mal an.

01:00:18.840 --> 01:00:30.660
 Ja, aber man muss ja auch sagen, ihr twitcht ja auch noch, macht ja noch ein paar mehr Sachen, sodass ihr wahrscheinlich am Ende auch auf eine Folge pro Woche an Content kommt.

01:00:30.660 --> 01:00:46.000
 Das stimmt tatsächlich, so habe ich das noch nie gesehen. Unsere Folgen sind, glaube ich, tendenziell länger als eure, ja. Aber auch nicht immer. Wir haben auch mal eine kurze zwischendrin, aber so die eineinhalb Stunden Marke, die reißen wir meistens.

01:00:46.000 --> 01:00:51.040
 Ja, ja, auf jeden Fall. Obwohl, jetzt haben wir nicht mehr geschafft seit einem Jahr oder länger.

01:00:51.040 --> 01:01:02.240
 Aber da gibt es auch keine perfekte Zeit. Es gibt Leute, die finden es kurz gut. Es gibt Leute, die finden es lang besser. Hängt wahrscheinlich auch vom Commute ab, den man damit irgendwie überbrücken muss.

01:01:04.100 --> 01:01:20.720
 Ja, genau. Das ist ein echt dickes Thema. Wir schon öfter Ärger gekriegt haben, ja, eure Folgen sind zu lang. Und ich sage, was, wie zu lang? Ja, ich fahre halt so und so lang von A nach B zur Arbeit. Und das ist dann, da muss ich irgendwie, und für zweimal fahren ist dann auch zu kurz.

01:01:23.100 --> 01:01:25.060
 Wir können ja nicht auf jeden Rücksicht nehmen.

01:01:25.060 --> 01:01:31.800
 Okay, wir können ja eine Umfrage machen. Wie lang sind eure Wege zur Arbeit und den Durchschnittswert? Genauso lang wären dann die Podcasts.

01:01:31.800 --> 01:01:32.980
 Nee, das ist Quatsch, natürlich.

01:01:32.980 --> 01:01:44.080
 Ich fände ja besser, wenn es Autoradios gäbe, die das irgendwann lernen, wie lange diese Fahrt dauert. Und die dann die Abspielgeschwindigkeit des Podcasts entsprechend anstellen. Das wäre doch mal was, oder?

01:01:44.080 --> 01:01:44.940
 Das ist cool.

01:01:44.940 --> 01:01:51.100
 Und dann mit der Staumeldung quasi mit einberechnen. Also wenn dann die Fahrt mal länger dauert, dann ...

01:01:51.100 --> 01:01:56.860
 Langsam auf einmal. Da merkst du dann, oh, da ist wohl ein Stau jetzt vor mir, neu aufgetaucht.

01:01:56.860 --> 01:02:02.080
 Ja, genau. Podcasts sind plötzlich langsam. Ah, Stau, okay.

01:02:02.080 --> 01:02:03.000
 Ja.

01:02:03.000 --> 01:02:18.660
 Sehr gut. Okay. Also ich denke halt immer, ein Thema dauert so lange, wie es dauert. Und wenn man mal zwischendurch kurz abschweift, ist das total okay. Also für uns ist das total okay. Und wen das stört, der soll es skippen. Ganz einfach.

01:02:18.660 --> 01:02:25.220
 Wir nehmen auch übrigens erst eine Stunde auf. Also das ist ja nichts. Wir haben halt vorher schon so lange, wir saßen ja schon eine Weile, bevor wir gestartet haben.

01:02:25.240 --> 01:02:34.940
 Ja, aber ich habe eben auf die Aufnahmeuhr geschaut und war erstaunt, weil wir noch nicht mal mit dem Thema angefangen haben und haben halt eben schon die Stunde. Aber je länger wir darüber reden, wie lange wir schon reden, umso länger wird es dann noch, bis wir bis zum Thema kommen.

01:02:34.940 --> 01:02:35.920
 Wir sind aber schon beim Thema.

01:02:35.920 --> 01:02:37.020
 Das ist ja das Thema.

01:02:37.020 --> 01:02:41.300
 Ja, natürlich, natürlich. Aber ich meine ja natürlich Performance.

01:02:41.640 --> 01:02:45.400
 Ja, jetzt haben wir noch ein paar konkrete Punkte. Ich glaube, dann geht es auch schneller mit jedem Punkt, ne?

01:02:45.400 --> 01:02:47.380
 Was? Nein, das ist ja nicht.

01:02:47.380 --> 01:02:49.880
 Performance geht schnell. Zack, zack, zack.

01:02:49.880 --> 01:02:50.140
 Eben.

01:02:50.140 --> 01:02:51.040
 Gleich sind wir fertig.

01:02:51.040 --> 01:02:51.360
 Ja.

01:02:51.360 --> 01:02:59.240
 Also das Resultat ist schnell. Da gibt es natürlich viele, viele so Stellschrauben, die man so, die man da so angehen kann.

01:03:00.920 --> 01:03:08.600
 Genau. Und ich weiß nicht, ich habe mir das jetzt mal, ich habe das ja so ein bisschen vorbereitet, so was, was sind so Themen, so die, die da reingehören.

01:03:09.440 --> 01:03:34.500
 Und ich habe gedacht, dass es wahrscheinlich gar nicht mal so dumm wäre, dass so ein bisschen so diese Themen auch so ein bisschen am Lifecycle einer, eines Ladevorgangs irgendwie, oder dass wir uns da entlanghangeln, weil es gibt ja so verschiedene, so Metriken, die, die so im Laufe des Ladevorgangs irgendwie eine Rolle spielen.

01:03:36.500 --> 01:04:02.500
 Stichwort Core-Web-Vitals und Konsorten. Und dann eben so verschiedene Dinge, die man, die man machen kann, um da Einfluss draufzunehmen. Genau. Und dann werden wir noch ein bisschen über Tooling und so Zeugs reden und so Dinge, die man vielleicht auch gar nicht so sieht und messen kann als Frontend-Entwickler wie Protokolle.

01:04:02.500 --> 01:04:05.700
 Genau. Finde ich das gut?

01:04:06.220 --> 01:04:06.580
 Ja, super.

01:04:06.580 --> 01:04:08.380
 Super. Klingt fantastisch.

01:04:08.380 --> 01:04:08.940
 Genau.

01:04:08.940 --> 01:04:28.940
 Genau. Also das, das allererste, was eine Rolle spielt, ist die Time to First Byte. Die kennt, glaube ich, jeder. Die ist, das ist ja so ein Urgestein der, glaube ich, der Performance-Metriken. Und das ist tatsächlich auch so der Bereich, wo wir als Frontend-Menschen eigentlich fast gar nichts machen können.

01:04:31.400 --> 01:04:55.780
 Genau. Also da gibt es so ein paar Techniken. Also ich weiß nicht, wenn man jetzt irgendwie so PHPler ist oder sowas, dann gibt es ja die Möglichkeit, den PHP-Buffer irgendwie früh zu flaschen. Das ist eine coole Sache, dass man quasi schon mal den Kopfbereich einer Seite losschickt, bevor man dann die langsame Datenbank befragt, wie es denn dann weitergeht.

01:04:56.000 --> 01:05:12.420
 Genau. Und ansonsten kann man da eigentlich nur Performance durch eben Server-Settings-Caching oder eben Auslagern auf CDNs rausholen. Deswegen würde ich sagen, können wir da jetzt gar nicht so viel drüber reden.

01:05:13.780 --> 01:05:30.140
 Höchstens noch vielleicht so die interessante Info, dass man Server-Timings auch über so einen speziellen HTTP-Header in den Client nach vorne schicken kann und Browser, die dann in den Chrome-Dev-Tools auch tatsächlich mit anzeigen.

01:05:30.640 --> 01:05:43.820
 Das heißt also, da werden dann üblicherweise bei einem Network-Connect, kriegst du ja dann so lange hat der Handshake gedauert oder die Look-Up gedauert, der Handshake gedauert, die Anfrage gedauert, die Antwort gedauert.

01:05:44.560 --> 01:05:59.080
 Und wenn man da so seine eigenen Werte mitschickt mit diesem Header, dann sagt der Browser, hier deine Datenbank, die hat so und so viel Millisekunden verbraucht von dieser Antwortzeit und eben, keine Ahnung, dieses Template-Rendering so viel.

01:05:59.080 --> 01:06:01.280
 Genau.

01:06:02.720 --> 01:06:08.960
 Also das ist dann, das macht es dann auch für uns Frontend-Menschen sichtbar. Dann können wir schön Finger pointen.

01:06:08.960 --> 01:06:12.500
 Das wusste ich gar nicht, dass das geht. Das ist cool.

01:06:12.500 --> 01:06:14.680
 Ha.

01:06:14.680 --> 01:06:15.820
 Genau.

01:06:15.820 --> 01:06:24.380
 Und dann, genau, wenn die Bytes dann fließen, dann gibt es direkt im Anschluss daran den Fuss-Content.

01:06:24.380 --> 01:06:26.340
 Das Byte muss fließen.

01:06:26.340 --> 01:06:28.400
 Oder fliegen vielleicht.

01:06:29.160 --> 01:06:35.440
 Genau, dann geht es darum, wie kriegt man die ersten Pixel auf den Bildschirm.

01:06:35.440 --> 01:06:51.420
 Und genau, die Metrik heißt halt First Contentful Paint oder ja, First Paint könnte man auch sagen, aber Contentful heißt halt so eben mehr als nur ein Pixel, vielleicht irgendwie so die Headerbar schon mal oder irgendwie was, das man identifizieren kann.

01:06:53.800 --> 01:07:04.900
 Genau, und da gibt es unter anderem, also das hat ganz viel damit zu tun, was man so in seinem HTML-Head so treibt und tut und macht.

01:07:04.900 --> 01:07:13.080
 Und da gibt es auch einen ganzen Vortrag vom Harry Roberts, der jetzt so gerade damit rumtourt, der auch auf der Beyond-Teller-Rand war.

01:07:13.080 --> 01:07:16.600
 Warst du bei der Beyond-Teller-Rand?

01:07:16.600 --> 01:07:18.520
 Ich war tatsächlich da, ja.

01:07:18.520 --> 01:07:19.580
 Ah ja, cool.

01:07:19.580 --> 01:07:25.280
 Bin mal kurz aus meinem Bunker gekrochen, in eine Präsenzveranstaltung.

01:07:25.280 --> 01:07:29.920
 Es war auch krass, so vom Feeling.

01:07:31.700 --> 01:07:37.640
 So viel Leute und dann danach direkt wieder zurück in den Bunker gehüpft und die Klappe hinter mir zugemacht.

01:07:37.640 --> 01:07:39.840
 Kann ich total verstehen.

01:07:39.840 --> 01:07:46.040
 Ich habe lange drüber nachgedacht und habe es dann gelassen, weil es ist ja auch so meine Haus- und Hofkonferenz viele Jahre gewesen.

01:07:46.040 --> 01:07:47.980
 Aber kommen wir später noch dazu.

01:07:47.980 --> 01:07:49.460
 Können wir später noch drüber reden.

01:07:51.160 --> 01:07:58.140
 Also der Harry hat einen super Vortrag und den würde ich vorschlagen, den muss man sich auf jeden Fall angucken.

01:07:58.140 --> 01:08:13.680
 So Key-Takeaways sind so Dinge wie zum Beispiel, dass man, wenn man ein synchrones JavaScript in seinem Head-Bereich hat, dass man den vor seinen CSS packt, weil man dem Browser dann die Möglichkeit gibt, die beide parallel abzuarbeiten.

01:08:13.680 --> 01:08:17.920
 Eigentlich intuitiv würde man ja sagen, so nein, CSS ist erst mal wichtiger.

01:08:17.920 --> 01:08:22.260
 Das kommt zuerst und das JavaScript, das kommt dann eben hinterher.

01:08:22.260 --> 01:08:36.700
 Genau, dann schleppt man ja viel CSS rum, dass man vielleicht auch gar nicht unbedingt für diesen quasi ersten, für das erste Rendering, für den ersten Ausschnitt der Seite braucht.

01:08:36.700 --> 01:08:40.360
 Und das kann man, das kann man eben extrahieren.

01:08:40.360 --> 01:08:43.360
 Habt ihr bestimmt auch schon gemacht, denke ich mal.

01:08:43.680 --> 01:08:45.740
 Das ist ja so dieser Begriff des Critical CSS.

01:08:45.740 --> 01:08:48.740
 Tatsächlich noch nie gemacht.

01:08:48.740 --> 01:08:49.040
 Nee.

01:08:49.040 --> 01:08:50.520
 Ich kenne mich schuldig.

01:08:50.520 --> 01:09:00.500
 Ich weiß, das war irgendwann mal, keine Ahnung, vor einigen Jahren, das ist wirklich schon eine Weile her, kam dieser Trend auf, wo es dann diverse Libraries gab, die das für einen erledigt haben und so.

01:09:00.500 --> 01:09:02.680
 Und ich habe es tatsächlich noch nie gemacht.

01:09:02.680 --> 01:09:04.760
 Bei der Podcast-Seite machen wir das auch nicht.

01:09:06.280 --> 01:09:13.880
 Mir hat irgendwie immer so das No-Brainer-Tool gefehlt, wo ich das irgendwie reinwerfen kann, dass das dann für mich erledigt, weil ich mich eigentlich nicht drum kümmern wollte.

01:09:14.440 --> 01:09:37.200
 Das ist auch vom Tooling her tatsächlich ein bisschen anstrengend, weil man muss die Seite erstmal sozusagen gebaut haben und in den klassischen Tools hat man dann so einen Headless-Browser, den man dann hochstartet, der die Seite dann rendert und der sagt, ah, guck mal hier, das ist jetzt der obere Teil des Viewports, den das CSS extrahiere ich, lege ich ab.

01:09:38.000 --> 01:09:41.800
 Und das andere eben auch, sodass ich die quasi zweigeteilt habe.

01:09:41.800 --> 01:09:44.100
 Und das geht tatsächlich automatisiert?

01:09:44.100 --> 01:09:53.000
 Das geht automatisiert, aber du musst halt irgendwie erstmal sozusagen diese Seite fertig irgendwo ablegen, um dann nochmal so einen zweiten Durchlauf zu machen.

01:09:53.000 --> 01:09:58.300
 Und das nervt und geht auch gar nicht mal so schnell.

01:09:59.280 --> 01:10:17.780
 Und darum bin ich dazu übergegangen, sozusagen das in die Hände von Entwicklerinnen und Entwicklern zu geben, dass man eben bei jeder Komponente entscheidet, ist das eine, die sehr wahrscheinlich eben oben auftaucht oder ist das eine, die eigentlich nie im oberen Bereich auftaucht.

01:10:17.780 --> 01:10:29.120
 Und da gibt es entweder Post-CSS-Plugins, wo man dann quasi einfach so Keywords reinschreiben kann in seinen CSS und dann steckt das eben ins eine oder ins andere am Ende.

01:10:29.120 --> 01:10:40.940
 Oder man macht das eben händisch, indem man sagt, die eine nenne ich irgendwie Critical S-CSS, die Source-Datei und die andere halt irgendwie lazy oder wie auch immer.

01:10:40.940 --> 01:10:46.180
 Und dann hat man es ja darüber geregelt und es funktioniert eigentlich ganz gut.

01:10:46.180 --> 01:10:51.240
 Und der Bildprozess ist auch viel schneller, als wenn man da irgendwelche Headless-Browser nochmal startet.

01:10:51.240 --> 01:11:09.800
 Und gibt es da irgendwas zu berücksichtigen, so ein Trade-off zwischen, weil das war ja früher was, wo man darauf geachtet hat, möglichst wenig Requests zu haben und dafür dann das, ja, also müssen die Dateien bestimmte Größe haben oder dürfen die maximale Größe haben, damit sich das noch rechnet oder, ja, gibt es da irgendwas zu berücksichtigen?

01:11:09.800 --> 01:11:12.540
 Ja, nee, eigentlich nicht.

01:11:12.540 --> 01:11:19.120
 Also du machst ja, du flutest ja den Browser nicht mit 1000 Requests oder so.

01:11:19.120 --> 01:11:22.840
 Du machst halt nur aus einem CSS, aus einem monolithischen machst du zwei.

01:11:22.840 --> 01:11:28.360
 Das ist in Zeiten von HTTP 2 oder 3 ist das ja auch überhaupt kein Problem.

01:11:29.100 --> 01:11:42.180
 Und genau, du kannst dann noch überlegen, also wenn dieses kritische CSS, wenn das sehr, sehr klein ist, also was weiß ich, 10 Kilobyte oder so, dann könntest du noch überlegen, ob du das einfach inline oben in dein HTML reinhängst.

01:11:44.040 --> 01:11:46.560
 Wenn es, also dann hast du da gar keinen Request.

01:11:46.560 --> 01:11:59.700
 Wenn es mehr wird, würde ich das aber dann tatsächlich auch nicht machen, was einfach daran liegt, dass du sonst bei jedem Aufruf, wenn du jetzt irgendwie da dein Head-Bereich mit so einem Style-Tag mit 32 Kilobyte aufbläst jedes Mal.

01:12:00.980 --> 01:12:02.920
 Das ist halt dann auch nicht cool.

01:12:02.920 --> 01:12:17.600
 Dann lieber so einmal in den sauren Apfel beißen, diese eine kleine externe Datei laden und dann gute Caching-Direktiven auf der Datei haben, die dann dafür sorgen, dass die niemals je wieder geladen wird.

01:12:19.040 --> 01:12:30.480
 Genau. Und für die, für den restlichen CSS-Teil, den du ja quasi, den brauchst ja immer noch, aber nur halt eben einfach später, den kannst du lazy laden.

01:12:30.480 --> 01:12:34.740
 Da kannst du natürlich jetzt so Dinge tun, wie auch wieder einen Haufen JavaScript draufwerfen.

01:12:35.660 --> 01:12:41.960
 Da hat aber die Filament Group eine ganz coole Technik irgendwie ausbaldovert.

01:12:41.960 --> 01:12:49.140
 Zwar funktioniert das so, dass du einfach in die CSS-Datei einbindest, ganz normal, mit aber Media-Print.

01:12:49.140 --> 01:12:55.620
 Und sobald du das tust, wird der Browser die lazy laden, weil er macht das für alle Print-Style-Sheets.

01:12:56.900 --> 01:13:08.420
 Und du kannst dann ein Onload-Attribut bestücken, wo du sagst, wenn es eben geladen wird, dann ändere, also this.media um auf zum Beispiel all.

01:13:08.420 --> 01:13:25.220
 Und dann ist der Browser eben so eher gemütlich beim Laden, aber am Ende wird ihm dann sozusagen bewusst, ach, guck an, die Datei, die scheint ja doch aktuell wichtig zu sein für das Layout.

01:13:25.220 --> 01:13:28.580
 Das ist ja ganz cool, weil es so funktioniert überall.

01:13:28.580 --> 01:13:32.960
 Klingt ein bisschen nach fiesem Hack, ist aber eine clevere Idee.

01:13:32.960 --> 01:13:34.440
 Was für Ideen die Leute kommen, oder?

01:13:34.440 --> 01:13:36.500
 Ja, das ist nah beieinander.

01:13:36.500 --> 01:13:37.860
 Print, um es lazy zu loaden.

01:13:37.860 --> 01:13:42.800
 Ich meine, das klingt ja aber schon nach, es gibt keine vernünftige native Methode, die man eigentlich gerne hätte.

01:13:42.800 --> 01:13:46.800
 Also benutzt man halt so diesen Workaround, aber clever ist es auf jeden Fall.

01:13:46.800 --> 01:13:49.620
 Warum nicht Loading gleich lazy für Link?

01:13:49.620 --> 01:13:51.900
 Das ist eine gute Frage.

01:13:51.900 --> 01:13:53.760
 Tatsächlich auch berechtigt.

01:13:54.260 --> 01:14:15.860
 Ich glaube, dass, ja, dass die Browser-Menschen dann gar nicht, also für die ist das schon so eine Errungenschaft, oder auch natürlich, die sehen ja auch immer den Code, den sie schreiben müssen, dann in dem Browser, das bei Bildern und so zu unterstützen, dass die, glaube ich, dann erstmal nicht weiterdenken, weil das halt so eins nach dem anderen mäßig läuft.

01:14:15.860 --> 01:14:23.160
 Deswegen also auf jeden Fall gerne mal ein Bug-Report, also im Sinne eines Feature-Requests aufmachen.

01:14:23.160 --> 01:14:25.200
 Ja, cool.

01:14:25.200 --> 01:14:27.300
 Das kann auf jeden Fall nicht schaden.

01:14:27.300 --> 01:14:28.600
 Ja, das machen wir.

01:14:28.600 --> 01:14:30.620
 Loading lazy wollen wir eh für alles haben.

01:14:30.620 --> 01:14:37.780
 Haben wir ja auch schon mal uns damals gewundert, als es irgendwie rauskam, warum das nicht viel mehr Leute verwenden, weil es so easy einzubauen ist.

01:14:38.440 --> 01:14:42.160
 Gab dann tatsächlich auch ein paar Argumente, aber wir, lass uns, machen wir einfach.

01:14:42.160 --> 01:14:43.300
 Konstantin, mach mal.

01:14:43.300 --> 01:14:44.360
 Ja, ja, ich mach mal.

01:14:44.360 --> 01:14:46.780
 Ja, oder Async wäre auch gut.

01:14:46.780 --> 01:14:47.760
 Also das ...

01:14:47.760 --> 01:14:48.780
 Ja, das habe ich gerade auch gedacht.

01:14:48.780 --> 01:14:51.560
 Async wäre auch gut, weil das gibt es ja beim Script-Tag schon.

01:14:51.560 --> 01:14:52.600
 Genau.

01:14:52.600 --> 01:14:53.980
 Wäre tatsächlich ähnlicher.

01:14:53.980 --> 01:14:56.140
 Ja, wahrscheinlich eher Async als Loading lazy.

01:14:56.280 --> 01:15:00.800
 Genau, ansonsten, also wir haben ja eben auch über Tailwind gesprochen.

01:15:00.800 --> 01:15:16.820
 Das ist auch ein heißer Kandidat, um den First Contentful Paint zu beschleunigen, weil das Schöne, also gerade wenn man so größere Projekte hat, das Schöne an Tailwind ist ja, das wächst ja einfach nicht.

01:15:16.820 --> 01:15:23.880
 Also es ist völlig egal, wie viele Komponenten du damit baust, das CSS wächst nicht.

01:15:23.880 --> 01:15:28.360
 Also das, da kann halt vielleicht weniger gepurcht werden.

01:15:28.360 --> 01:15:32.960
 Wir haben so ein Purge, so eine Purge-Methode, wo die quasi Dinge wegschmeißen, die nicht gebraucht werden.

01:15:32.960 --> 01:15:36.120
 Aber irgendwann kommt man an einen Punkt, wo das eben einfach nicht mehr wächst.

01:15:36.900 --> 01:15:43.360
 Und mit so traditionellen Ansätzen wie BAM wächst das CSS immer weiter.

01:15:43.360 --> 01:15:49.920
 Und man manövriert sich dann sozusagen oder malt sich zunehmend mit den Rücken an die Wand.

01:15:49.920 --> 01:15:57.940
 Genau, aber das ist natürlich, das ist eher so eine grundlegende Entscheidung.

01:15:57.940 --> 01:16:03.800
 Also wenn man, setzt man auf Tailwind, dann hat man auf jeden Fall da große Vorteile.

01:16:05.880 --> 01:16:08.600
 Also meint auch nachteilig, aber in dem Bereich …

01:16:08.600 --> 01:16:12.180
 Da hab ich so noch nie drüber nachgedacht, dass das Tailwind nicht wächst.

01:16:12.180 --> 01:16:18.680
 Das CSS bleibt quasi gleich groß, wenn ich die gleichen Anforderungen habe oder die gleichen Dependencies.

01:16:18.680 --> 01:16:23.880
 Und wenn ich dann halt irgendwie noch ein anderes Modul brauche, das wusste ich gar nicht, dass das was wegwerfen kann.

01:16:23.880 --> 01:16:29.980
 Ist das in Tailwind selbst mit integriert, dass das nur irgendwie in das CSS zieht, was ich benutze?

01:16:30.500 --> 01:16:31.460
 Ja, genau.

01:16:31.460 --> 01:16:33.760
 Die haben so einen Purge-Bildschritt.

01:16:33.760 --> 01:16:45.720
 Da wirfst du entweder dein resultierendes HTML rein oder deine Templates, wo dann idealerweise sich diese Klassen, die du alle benutzt, darin wiederfinden.

01:16:45.720 --> 01:16:48.440
 Und dann macht er im Prinzip …

01:16:48.440 --> 01:16:52.900
 Der geht einfach durch und guckt, welche Klassen kommen da vor, die ich zuordnen kann.

01:16:52.900 --> 01:16:55.040
 Und alle anderen, die werfe ich halt an.

01:16:55.040 --> 01:16:57.160
 Ja, ist schon cool.

01:16:57.160 --> 01:17:00.940
 Wenn ich so überlege, vielleicht doch mal Tailwind ausprobieren.

01:17:00.940 --> 01:17:05.040
 Ich frage mich gerade, hätte ich unsere Podcast-Seite mit Tailwind bauen können?

01:17:05.040 --> 01:17:05.920
 Ich glaube nicht.

01:17:05.920 --> 01:17:07.680
 Da sind schon so ein paar exotische Sachen dabei.

01:17:07.860 --> 01:17:13.500
 Ich vermuten würde, dass die es in Tailwind nicht gibt, aber ich weiß es nicht.

01:17:13.500 --> 01:17:14.200
 Du kannst es erweitern.

01:17:14.200 --> 01:17:15.140
 Das stoppt dich ja nicht.

01:17:15.140 --> 01:17:25.520
 Also Tailwind ist ja im Prinzip erstmal so ein Grundwerkzeugkasten und dann kannst du ganz klassisch auch deine eigenen Sachen dazutun.

01:17:25.520 --> 01:17:31.520
 Also es gibt ja wirklich, also ihr habt ja auch dieses, euer Logo mit dem, hier mit dem Lichtschein und so.

01:17:31.520 --> 01:17:38.280
 Da sind bestimmt, oder da sind vielleicht ein paar Sachen, irgendwie Filter-Effekte drin oder so, die ihr vielleicht dann bei Tailwind nicht bekommt.

01:17:38.280 --> 01:17:42.600
 Aber die, die könnt das, also dieser Weg ist, bleibt euch nicht versperrt.

01:17:42.600 --> 01:17:44.560
 Also den habt ihr obendrein noch.

01:17:44.560 --> 01:17:52.820
 Genau, also letztlich ist das ja so eine Umkehr, der, also wer zeigt, wohin, zeigt HTML auf CSS oder zeigt das CSS aufs HTML.

01:17:53.660 --> 01:18:04.940
 Bei BAM ist es ja eher so, dass das HTML, dass das CSS aufs HTML zeigt und beim, bei Tailwind ist es umgekehrt und darum wächst das HTML dafür.

01:18:04.940 --> 01:18:16.500
 Also das HTML wächst, das CSS bleibt schlank und bei BAM wächst das CSS und das HTML bleibt eher so groß, also schlank so.

01:18:17.360 --> 01:18:25.600
 Ja, am Ende ist es immer nur, also man denkt manchmal, man könnte irgendwie Komplexität loswerden, aber letzten Endes verschiebt man sie immer nur woanders hin.

01:18:25.600 --> 01:18:27.840
 Also es ist immer die Frage, wo ist sie dann am Ende zu Hause?

01:18:27.840 --> 01:18:29.560
 Also echt ein guter Gedanke.

01:18:29.560 --> 01:18:34.000
 Aber das ist ein guter Gedanke mit diesem, ja, CSS wächst nicht.

01:18:34.000 --> 01:18:34.820
 Krass.

01:18:34.820 --> 01:18:40.860
 Genau, und großes HTML ist halt auch kein Problem, also weil CSS kann immer nur en bloc gepasst werden.

01:18:40.860 --> 01:18:47.900
 Das heißt also, der Browser wird nie anfangen, irgendwas zu zeichnen, wenn er gerade erst die ersten Anweisungen bekommen hat.

01:18:47.900 --> 01:18:49.620
 Beim HTML ist das halt anders.

01:18:49.620 --> 01:18:58.440
 Das heißt also, wenn dein CSS kompakt ist, dann ist es halt schneller geladen und du paintest schneller, während das HTML vielleicht noch gerade einläuft.

01:18:58.500 --> 01:18:59.880
 Das ist ja ein streamendes Format.

01:18:59.880 --> 01:19:11.200
 Das kann ja 10 Megabyte groß sein, der wird trotzdem nach einem Bruchteil von einer Sekunde wird der schon anfangen los zu rendern, weil es ihm völlig egal ist, wie viel da noch kommt und interessiert ihn auch gar nicht.

01:19:11.200 --> 01:19:12.360
 Der macht halt einfach.

01:19:12.360 --> 01:19:19.340
 Und das ist so der entscheidende Unterschied, finde ich, den man da auch noch so ein bisschen berücksichtigen muss.

01:19:20.680 --> 01:19:26.820
 Das HTML eben so quasi so ein progressives Format ist und CSS und JavaScript eben halt überhaupt gar nicht.

01:19:26.820 --> 01:19:32.460
 Vielleicht lass mich da mal ganz kurz abbiegen mit noch einer kleinen Extrafrage.

01:19:32.460 --> 01:19:36.840
 Wenn wir schon bei Tailwind sind, hast du mal Tailwind UI verwendet?

01:19:36.840 --> 01:19:43.700
 Weil das ist ja irgendwie so eine Erweiterung, da kriegst du irgendwie schon so fertige Komponenten, so Bootstrap-artig, zumindest so habe ich es verstanden.

01:19:43.700 --> 01:19:45.640
 Das kostet aber Geld, wenn ich es richtig weiß.

01:19:45.640 --> 01:19:46.920
 Hast du das mal eingesetzt?

01:19:47.720 --> 01:19:54.300
 Also ich bin nur den ersten Schritt gegangen und habe das Geld bezahlt, habe es dann nicht eingesetzt.

01:19:54.300 --> 01:20:10.000
 Ich hatte nämlich tatsächlich so ein Side-Project, das wollte ich schnell hochziehen und das war dann eben mit Eleventy und dann habe ich gesagt, so komm, super, Tailwind ist genau das Richtige, um ganz schnell das zu stylen.

01:20:10.000 --> 01:20:17.340
 Und dann hatte ich eben auch dieses Tailwind UI gesehen und dachte, das könnte ja noch schneller gehen, wenn ich eben fertige UI-Elemente nutze.

01:20:18.200 --> 01:20:20.820
 Und ich weiß gar nicht mehr, was das Ding war.

01:20:20.820 --> 01:20:24.680
 Ich glaube, ich hatte es so eilig und nach dem Kauf kriegst du nicht sofort einen Link.

01:20:25.100 --> 01:20:34.200
 Also es dauert dann irgendwie so einen Tag oder so und das war mir dann schon zu lang und dann bin ich schon losgelaufen und das muss ich noch ausprobieren.

01:20:34.700 --> 01:20:52.020
 Also ich kenne nur die Module, für die Steve Shogar, glaube ich, ich hoffe, ich schreibe den Namen richtig aus, ich kriege ja immer Ärger, wenn ich Namen falsch ausspreche, so bei Twitter irgendwie mal beworben hat und fand das, das sah irgendwie alles immer ziemlich gut aus.

01:20:52.080 --> 01:20:54.020
 Und das ist auch, glaube ich, echt ein guter Typ.

01:20:54.020 --> 01:21:00.940
 Der macht, also er hat auch dieses Refactoring UI Buch geschrieben, was großartig ist.

01:21:00.940 --> 01:21:09.260
 Also wenn man irgendwie Interfaces baut, wenn man auch gar keine Ahnung davon hat, ich glaube, es richtet sich ja auch irgendwie so an Backend-Developer oder so an Leute, die gar keine Ahnung von Design haben.

01:21:09.260 --> 01:21:14.460
 So, hey, du hast hier irgendwie schon eine Seite, wie willst du die irgendwie umbauen, dass es irgendwie übersichtlich wird?

01:21:14.640 --> 01:21:28.020
 Also ich habe selten ein Buch irgendwie gesehen, das so klare Anweisungen gibt mit, du hast so ein Modul, so ist es irgendwie doof, bau doch mal so oder mach mal hier und dann grenzt das so mit der Farbe noch ab.

01:21:28.020 --> 01:21:29.140
 Aber es ist wirklich großartig.

01:21:29.140 --> 01:21:40.000
 Also das von dem ist ja auch Tailwind UI und deswegen hat es mich jetzt einfach interessiert, weil es immer mal wieder an mir vorbei gehuscht ist und ich mal wissen wollte, lohnt sich das?

01:21:40.000 --> 01:21:48.360
 Weil ich würde gern mal damit rumspielen, war jetzt aber bisher nur für zum Rumspielen zu geizig jetzt mir das einfach zu kaufen.

01:21:48.360 --> 01:21:49.300
 Genau, aber cool.

01:21:49.300 --> 01:21:50.520
 Ja.

01:21:50.520 --> 01:21:51.700
 Kenne ich jemanden, der es hat.

01:21:51.700 --> 01:21:57.760
 Ja, also können wir gerne nochmal abseits des Podcasts mal zusammen reingucken.

01:21:57.760 --> 01:22:00.080
 Das müssen wir rausschneiden.

01:22:00.080 --> 01:22:01.180
 Nein, Spaß.

01:22:01.180 --> 01:22:07.260
 Genau, dann ist natürlich noch ein Thema Schriften.

01:22:07.260 --> 01:22:16.220
 Die sollen ja irgendwie auch schnell da sein und die muss man, die stampfen wir ein, indem wir den WoV 2 als Format nehmen natürlich.

01:22:16.220 --> 01:22:19.920
 Ich glaube, WoV nicht 2 braucht man eigentlich nicht mehr.

01:22:19.920 --> 01:22:25.740
 Also ich wüsste jetzt keinen Browser, der irgendwie noch geläufig ist, der nicht WoV 2 kann.

01:22:27.000 --> 01:22:38.300
 Und da dann allerdings, weil viele Schriftarten doch ein bisschen zu groß sind, dass man die dann subsettet, also dass man im Prinzip sagt, hey, wir haben hier eine deutsche Seite.

01:22:38.300 --> 01:22:40.380
 Ich brauche ganz viele Zeichen.

01:22:40.380 --> 01:22:44.140
 Also es ist zwar cool, dass die drin sind, aber die brauche ich jetzt mal alle nicht.

01:22:44.940 --> 01:22:48.420
 Und die werfe ich alle raus aus diesem Font-File.

01:22:48.420 --> 01:22:52.240
 Was nicht heißt, dass der Browser diese Zeichen nicht auch anzeigen kann.

01:22:52.240 --> 01:22:55.000
 Er würde dann einfach auf ein System-Font zurückfallen.

01:22:55.000 --> 01:22:57.480
 Also es gibt immer noch so ein Sicherheitsnetz.

01:22:57.480 --> 01:23:10.060
 Genau, und das mache ich eigentlich immer noch ganz gerne mit dem guten alten Font-Squirrel, mit dem wir ja schon vor zehn Jahren Schriftdateien irgendwie umgewandelt und gebastelt haben.

01:23:12.540 --> 01:23:14.460
 Genau, der kriegt das eigentlich ganz gut hin.

01:23:14.460 --> 01:23:17.460
 Das ist ein guter Tipp.

01:23:17.460 --> 01:23:24.480
 Und genau, dann ist noch eine wichtige Sache, dass man so, man kann den Fehler machen.

01:23:24.480 --> 01:23:31.820
 Also ein großer Fehler ist es sowieso, Schriften irgendwie von Font-Foundries extern einzubinden, was, also zumindest was so Performance angeht.

01:23:31.820 --> 01:23:40.040
 Weil der Browser dann, weil die meistens mit Weiterleitung arbeiten, das ist also ein CSS-Datei und dann leitet die wieder weiter auf irgendwas anderes.

01:23:40.380 --> 01:23:47.720
 Und dann sind da vielleicht noch Ad-Imports drin und der Browser, der wird dann einfach wahnsinnig, bis er dann da seine Schrift gefunden hat.

01:23:48.640 --> 01:23:56.940
 Darum auf jeden Fall selber hosten und auch da wäre mein Tipp, die Ad-Font-Face-Deklaration direkt ins HTML reinzuhängen.

01:23:57.560 --> 01:24:08.300
 Denn andernfalls hättest du ja auch wieder einen Zwischenschritt, also einen Zwischenhop, weil er dann, wenn du das ins CSS schreibst und das liegt halt extern, dann musst du erst mal das CSS ziehen.

01:24:08.300 --> 01:24:15.580
 Wenn er es hat, dann merkt er, ach, guck an, ich muss auch noch ein Font ziehen. Das hättest du mir mal ruhig vorher sagen können.

01:24:16.860 --> 01:24:23.620
 Und dieses Vorhersagen ist halt, sag ihm das einfach, sag dem Browser das direkt im HTML einfach, genau.

01:24:23.620 --> 01:24:24.120
 Cool.

01:24:24.120 --> 01:24:28.200
 Also immerhin das Self-Hosting, das machen wir schon richtig. Wir haben die tatsächlich auf dem Server liegen.

01:24:29.040 --> 01:24:37.520
 Ja, genau. Ich hab, ähm, ja. Aber da haben wir auch in der Folge mit Gerrit von Ackmer drüber gesprochen, über diese Lizenzgeschichten.

01:24:37.520 --> 01:24:48.760
 Und das ist gar nicht so easy, weil, äh, also zum Beispiel, ich hab ja auf meiner persönlichen, äh, Webseite, moritzgießmann.de, ähm, hab ich ja irgendwann mal die Branden grotesk haben wollen.

01:24:48.760 --> 01:25:01.880
 Ich weiß nicht, bei Netflix sieht man sie oft, aber ich glaub im Web gar nicht so oft. Und, ähm, ich hab sehr lange suchen müssen, bis ich einen Fontanbieter gefunden hab, äh, der mir eine Lizenz gibt, wo ich die selbst hosten darf.

01:25:01.880 --> 01:25:08.740
 Und, äh, der mir dann vertraut, dass ich nicht mehr als X Zugriffe habe und nicht das irgendwie selbst auf seinem eigenen Server tracken will.

01:25:08.740 --> 01:25:15.000
 Weil das, das kommt einfach nicht in Frage. Das hat, das gibt so viele Gründe, ähm, warum man das nicht machen möchte.

01:25:15.000 --> 01:25:19.300
 Also, Performance ist jetzt einer, wie wir grad gelernt haben, aber bei mir ist es ganz klassisch Security.

01:25:19.300 --> 01:25:23.920
 Ich will nichts auf meiner Seite drin haben, was nicht von meinem Server kommt.

01:25:23.920 --> 01:25:28.760
 Ähm, weil, wer weiß, wer sich da reinhackt und irgendeine Scheiße damit macht, also.

01:25:28.760 --> 01:25:33.940
 Und dann ist aber auch wieder die Frage mit der Lizenz, äh, darfst du die dann durch Font-Squirrel durchjagen?

01:25:33.940 --> 01:25:37.560
 Da muss man halt genau hinschauen, wenn man sich da tatsächlich an alles halten möchte.

01:25:37.560 --> 01:25:40.500
 Das ist eine gute Frage, das weiß ich tatsächlich nicht, ob ich das darf.

01:25:40.500 --> 01:25:44.220
 Also, ist eine gekaufte Font da einfach durchjagen, um die Zeichen zu reduzieren?

01:25:44.220 --> 01:25:44.440
 Hm.

01:25:45.000 --> 01:25:49.180
 Wenn einem da jemand böse kommen will, dann sagt er, das ist aber nicht die Datei, die wir dir verkauft haben.

01:25:49.180 --> 01:25:52.440
 Ja, das kann natürlich sein.

01:25:52.440 --> 01:25:53.960
 Wie die das überprüfen sollen.

01:25:53.960 --> 01:25:55.620
 Nee, da ist der Aufwand wahrscheinlich auch viel zu hoch.

01:25:55.620 --> 01:25:59.580
 Aber trotzdem, klar, wenn man jetzt sagt, man möchte da rechtlich, hundertprozentig sicher sein, dann.

01:25:59.580 --> 01:26:00.260
 Du.

01:26:00.260 --> 01:26:04.540
 Dem Konstantin ist das immer sehr wichtig.

01:26:04.540 --> 01:26:06.600
 Ich lasse die fünf auch mal gerade sein.

01:26:06.600 --> 01:26:08.940
 Gott, jetzt habe ich wieder was gesagt.

01:26:08.940 --> 01:26:10.820
 Schlimm, jetzt gucken die Leute gleich, wo sie mich verklagen können.

01:26:10.820 --> 01:26:11.960
 Das muss dann schon wieder raussteigen.

01:26:14.320 --> 01:26:22.400
 Na ja, ich sage mal so, ich habe tatsächlich auch von niemandem gehört, der dieses Problem irgendwann mal hatte mit irgendeiner Font Foundry.

01:26:22.400 --> 01:26:26.600
 Also, es ist ein theoretisch durchaus, könnte es mal passieren.

01:26:26.600 --> 01:26:28.660
 Genau.

01:26:28.660 --> 01:26:33.760
 Also, wenn man das vermeiden will, dann schaut man sich tatsächlich irgendwie bei Google Fonts um oder so.

01:26:34.360 --> 01:26:42.140
 Da gibt es ja auch dann, äh, diverse Imitate bekannter Schriften, äh, wenn man dann die bekannt, die, die Schriften nicht da bekommt, ja.

01:26:42.140 --> 01:26:44.800
 Genau.

01:26:44.800 --> 01:26:46.160
 Ach so, und es wird auch, ja.

01:26:46.160 --> 01:26:46.960
 Ja.

01:26:46.960 --> 01:26:52.400
 Äh, es gibt auch tatsächlich, äh, so, man arbeitet tatsächlich an streamenden von Formaten fürs Web.

01:26:52.400 --> 01:27:04.560
 Also, dann hätte man auch diese Probleme sowieso gar nicht, ähm, genau, äh, habe ich jetzt keinen Link für parat, aber kann ich auch nochmal raussuchen für die Shownotes, ähm, genau.

01:27:04.560 --> 01:27:10.840
 Dann, äh, trudeln da sozusagen erstmal die wichtigsten Zeichen ein und dann der, der ganze restliche Klumpatsch.

01:27:10.900 --> 01:27:14.880
 Ah, war das, ah, da hatten wir es, da hatten wir es auch drüber, glaube ich.

01:27:14.880 --> 01:27:15.700
 Ich glaube, wir haben das schon mal.

01:27:15.700 --> 01:27:21.740
 War das das Progressive Font Enrichment, glaube ich, hieß das, kann das so sein?

01:27:21.740 --> 01:27:25.240
 Das weiß ich nicht mehr, aber wir hatten, wir sagten es auf jeden Fall.

01:27:25.240 --> 01:27:37.500
 Darüber habe ich nämlich mal, also, wenn es das ist, darüber habe ich ja mal einen Vortrag gesehen bei der JS-Conf, äh, Font Enrichment, genau, und zwar von dem Aaron Gustafsson, bin ich da jetzt ganz falsch?

01:27:39.180 --> 01:27:53.080
 Progressive Font Enrichment, ich glaube, das ging so in die Richtung, dass, äh, zumindest die Möglichkeit besteht, dass man, ähm, von einer Schriftart nur die Glyphen runterlädt, dass der Browser nur die Glyphen runterlädt, die er auf der Seite braucht, von der er das weiß.

01:27:53.080 --> 01:27:56.540
 Ja, so, ich weiß aber nicht genau, wie weit die sind.

01:27:56.540 --> 01:28:04.340
 Ähm, da gibt es auf jeden Fall eine Demo, genau, da können wir ja vielleicht nochmal drauf verlinken, packe ich, äh, in die Shownotes.

01:28:04.340 --> 01:28:07.640
 Tippitoppi.

01:28:08.260 --> 01:28:19.740
 Ähm, genau, dann, äh, dann ist es, äh, dann ist es auch immer eine gute Idee, äh, Preloading zu nutzen heutzutage, ähm, oder Preload, Preload Hints.

01:28:19.740 --> 01:28:26.820
 Das heißt also, die, äh, der Hintergrund ist der, dass ein Browser zwei Parser hat, wenn er auf die Seite kommt.

01:28:26.980 --> 01:28:41.620
 Das eine ist sozusagen der vollwertige Parser, der, der alles kennt und, äh, sozusagen, äh, mit allem was anfangen kann und dann auch einen Domtree aufbaut, äh, und, ähm, das andere ist, äh, der, der Ressourcenscanner oder Pre-Parser.

01:28:41.620 --> 01:28:51.700
 Ähm, äh, der ist, äh, der ist, äh, der ist, äh, der ist, äh, der ist so ein bisschen wie so ein Jagdhund, den der Jäger schon mal losschickt und der die ganzen Hasen aus den, äh, aus den Erd, äh, Bauen dann raus treibt.

01:28:51.700 --> 01:28:55.840
 Ähm, ähm, ist, äh, ist, ist wie so ein Jagdhund auch nicht besonders intelligent.

01:28:56.980 --> 01:29:03.580
 Deswegen, äh, deswegen, äh, äh, kann der eben kein, keine Style, äh, Blöcke oder sowas oder parsen und verstehen.

01:29:03.580 --> 01:29:22.560
 Das heißt, dem muss man, dem muss man HTML geben und dann, äh, sucht er eben nach Images oder, ähm, nach Link-Rail-Style-Sheet oder Script-Elementen mit Sourcen und, äh, sammelt die ein und feuert quasi in Windeseile schon Requests, äh, an die Server ab.

01:29:22.560 --> 01:29:26.360
 Und der, der eigentliche Parser, der ist überhaupt noch gar nicht da.

01:29:26.980 --> 01:29:34.780
 Ähm, sodass, wenn der dann endlich mal, äh, angetrottet kommt, die ganzen Antworten möglicherweise schon da sind oder zumindest in Flight.

01:29:34.780 --> 01:29:44.480
 Und, ähm, genau, wir haben ja gerade gesagt, äh, die Schrifteinbindung, die, äh, die stecken wir in ein Style-Element, das wir in das HTML stecken.

01:29:44.480 --> 01:29:54.280
 Aber das ist, äh, ist eben kein HTML, also dieses, äh, dieses, äh, Einbinden der Fonts, das kann dieser, äh, Ressourcenscanner, der peilt das nicht.

01:29:54.280 --> 01:30:03.900
 Und darum würde man hingehen und dann Link-Rail-Preload auf diese Font-Ressource, auf das Wurf2 machen mit einem S-Font.

01:30:03.900 --> 01:30:12.400
 Und dann muss man bei Schriften auch noch zusätzlich, ähm, ein, äh, Cross-Origin, äh, Attribut drauflegen.

01:30:13.260 --> 01:30:24.200
 Weil, das hat auch wieder mit den Font-Foundries zu tun, die, äh, sich erbittet haben damals, ähm, dass Schriften quasi über einen eigenen Kanal laufen im Netzwerk-Stack.

01:30:24.960 --> 01:30:30.960
 Damit die, äh, also warum auch immer, äh, damit die eben nicht abgegriffen werden können.

01:30:30.960 --> 01:30:43.220
 Also der, äh, das macht der Browser ja auch, äh, bei so Dingen, die, die er als sicherheitsrelevant ansieht, dass er sagt, so, nee, die Ressourcen, die kriegen einen eigenen Kanal, äh, getrennt von den anderen.

01:30:44.080 --> 01:30:54.280
 Und, ähm, da der Browser die Fonts mit Cross-Origin zieht, muss man dann beim Preloaden auch ein Cross-Origin-Attribut, äh, auf die Link-Elemente drauf tackern.

01:30:54.280 --> 01:30:56.160
 Genau.

01:30:56.160 --> 01:31:13.780
 Und dann hat der Chrome-Browser leider auch noch einen Bug, das, äh, oder hatte lange, ähm, dass, äh, wenn du pre-geloadet hast, dann, äh, dann hat das, was du gepreloadet hast mit diesem, äh, HTML-Element, hat automatisch die allerhöchste Prio bekommen.

01:31:14.080 --> 01:31:26.800
 Auch wenn ein Font vielleicht nicht höher priorisiert sein sollte als CSS, und das bedeutet, du musst dann auch das CSS pre-loaden auf jeden Fall, damit das wieder in der Reihenfolge oben steht.

01:31:26.800 --> 01:31:32.120
 Genau, also CSS pre-loaden und Fonts pre-loaden, das, das sollte man tun.

01:31:32.120 --> 01:31:33.820
 Schreibst du mit, Moritz?

01:31:33.820 --> 01:31:38.460
 Ich hab schon, ich hab schon überlegt, wir müssen viel machen.

01:31:38.460 --> 01:31:42.560
 Ja, ich, ich schick euch hier Stichworte rüber.

01:31:43.200 --> 01:31:52.300
 Aber diesen Harry-Roberts-Talk, äh, da hab ich tatsächlich heute deswegen, weil ich den auch geschaut hab, jetzt, weil die Videos jetzt veröffentlicht wurden, hab ich tatsächlich an unserer Seite schon was verändert.

01:31:52.300 --> 01:31:52.860
 Ah ja, okay.

01:31:52.860 --> 01:31:55.060
 Also es sind schon, sind schon Sachen passiert, ja.

01:31:55.060 --> 01:31:57.220
 Aber wieso muss ich eigentlich mitschreiben?

01:32:00.320 --> 01:32:01.180
 Ja, weiß nicht.

01:32:01.180 --> 01:32:11.320
 Ich sag mal so, ähm, eigentlich würde ich mir wünschen, das sind ja meiner Meinung nach Sachen, die, ähm, alle in Lighthouse reingehören.

01:32:11.320 --> 01:32:13.240
 Denk ich mir zumindest mal.

01:32:13.240 --> 01:32:16.760
 Oder was sind eigentlich alles mit Lighthouse testbare Sachen?

01:32:16.760 --> 01:32:22.700
 Ähm, oder es war jetzt eigentlich nichts dabei, wo man nicht, was man nicht mit Lighthouse testen könnte.

01:32:22.840 --> 01:32:35.740
 Und dann, äh, würde ich eigentlich erwarten, dass so ein Tool sich immer weiter verbessert und das mir dann irgendwann sagt, hey, mach doch mal, mach doch hier mal diese Eigenschaft noch und dreh doch mal bitte die Header-Sachen da oben oder sowas.

01:32:36.500 --> 01:32:36.660
 Ja.

01:32:36.660 --> 01:32:37.700
 Weiß ich natürlich nicht, ob's passiert.

01:32:37.700 --> 01:32:51.400
 Tatsächlich macht er das auch, also es gibt ja die, diese Critical Request Chain, die er einem zeigt, wenn man möchte, wo er einem eben sagt, so, hier ist mein HTML-Dokument und dann musste ich da in das Style-Sheet gehen und da ein Font laden.

01:32:51.400 --> 01:32:54.100
 So, das ist, sind zu viele Schritte, mach mal weniger.

01:32:54.100 --> 01:32:55.220
 So, das macht er schon.

01:32:55.220 --> 01:33:06.480
 Aber es ist halt überschaubar viel, also ähnlich wie mit dem, warum es halt DOM-Tremap gibt, ähm, dass, dass er dann irgendwie zwar einen guten Ansatz hat,

01:33:06.500 --> 01:33:10.500
 aber irgendwie zu früh die Biege schon wieder macht mit seinen Tipps.

01:33:10.500 --> 01:33:11.460
 Mhm.

01:33:11.460 --> 01:33:12.240
 Genau.

01:33:12.240 --> 01:33:20.500
 Ja, und ansonsten, äh, natürlich immer cool, äh, alles minifizieren, alles komprimieren, ähm.

01:33:20.500 --> 01:33:24.360
 Da zieh ich vielleicht mal eine Frage vor, weil du das gerade sagst.

01:33:24.360 --> 01:33:27.220
 Oh ja, genau, das ist aber, da, da, da, da sind wir uns nicht eigentlich.

01:33:27.220 --> 01:33:30.040
 Genau, da hatten wir schon mal so einen Streitpunkt, jetzt haben wir ja den Experten hier.

01:33:30.040 --> 01:33:33.480
 Äh, ganz kurz und knapp, Markup minifizieren, ja oder nein?

01:33:33.840 --> 01:33:41.940
 Ja, das hab ich hier auch als Stichwort, bei HTML würde ich eher sagen nein, äh, weil das ja nicht so ganz ungefährlich ist.

01:33:41.940 --> 01:33:43.440
 Yes, richtige Antwort, danke.

01:33:43.440 --> 01:33:52.820
 Genau, und, äh, tatsächlich, also, ähm, ich hab auch mal einfach, äh, bei der Rheinischen Post übrigens, ähm, den Vergleich gemacht.

01:33:53.160 --> 01:34:04.800
 Was bringt mir das denn, wenn ich, also die haben ja eine furchtbar lange Startseite aus verschiedenen Gründen, so SEO und, äh, dass irgendwie jedes Ressort da auch irgendwie, äh, erscheint und so weiter.

01:34:04.800 --> 01:34:17.180
 Ähm, und das, also, es gibt ja eigentlich nicht den Fall, außer durch, äh, völlige Blödheit oder technische Probleme, dass man eine Seite nicht komprimiert überträgt.

01:34:17.460 --> 01:34:19.740
 Also, das ist ja eigentlich so der Standard, würde ich sagen.

01:34:19.740 --> 01:34:35.460
 Also, mindestens Gzip komprimiert, ähm, das heißt also, der, man muss, man muss ja vergleichen, was bringt einem das, äh, in diesem Szenario, dass ich eine Seite Gzip komprimiert verschicke, äh, weil das andere ist nur ein theoretisches Szenario.

01:34:35.460 --> 01:34:47.020
 Und da, äh, da hab ich eben die Startseite der Rheinischen Post einfach mal minifiziert, ge-gzipt und, äh, die, und das Original und mit dem Original ge-gzipt verglichen.

01:34:47.020 --> 01:34:53.000
 Und das, das war einfach, das waren so irgendwie zwei Kilobyte Unterschied, äh, insgesamt.

01:34:54.340 --> 01:35:14.560
 Und, äh, und, äh, und, äh, und, äh, und, äh, und, äh, und, äh, ja, die, die funktioniert ja im Prinzip so, dass die Wiederholungen einfach sagt, so, komm, jetzt muss ich jetzt nicht noch fünfmal das gleiche hinschreiben, und man hat ja auch immer so Listen an Elementen, die sich immer wiederholen.

01:35:14.560 --> 01:35:27.420
 Ähm, ich schreib das nur einmal rein und sag, sag das jetzt bitte hier zehnmal hintereinander, so, das, das reicht als Info, und schon, zack, hat mal das HTML verkleinert.

01:35:27.420 --> 01:35:37.380
 Ja, wenn wir schon bei, bei Komprimierung sind, äh, schmeiß ich vielleicht auch noch was, was ich mir für später aufgeschrieben hab rein, äh, Brodli-Komprimierung.

01:35:37.380 --> 01:35:39.800
 Lohnt sich das im Vergleich zu Gzip?

01:35:39.800 --> 01:35:44.300
 Ja, auf jeden Fall. Also, das, äh, das auf jeden Fall,

01:35:44.560 --> 01:35:57.160
 eh, lohnt sich und, und holt noch mehr raus, weil Brodli ist ja, äh, so, die haben, die haben ein eigenes Dictionary eingebaut für so Programmier-Dinge, so.

01:35:57.160 --> 01:36:06.560
 Während Gzip ja eher so ein allgemeiner Kompressor ist, ist Brodli wirklich für so Programmier-Ottos wie uns, äh, maßgeschneidert.

01:36:06.560 --> 01:36:11.640
 Ich meine, es ist aber auch das, was zum Einsatz kommt bei WoV 2, wenn ich so richtig informiert bin.

01:36:11.640 --> 01:36:14.080
 Äh, ja, kann gut sein, ja, ich glaub schon.

01:36:14.560 --> 01:36:26.440
 Und, ähm, genau, die Unterstützung von Brodli ist aber jetzt nicht so richtig gut, ähm, aber das kann man sich einkaufen, wenn man sich, äh, zum Beispiel in Cloudflare.

01:36:27.160 --> 01:36:31.820
 CDN vor die eigene Seite klemmt, dann, äh, kriegt man das halt frei Haus.

01:36:31.820 --> 01:36:40.560
 Die sind ja echt krass. Da gibt's auch HTTP 3 und, äh, so diese ganzen Späße.

01:36:42.960 --> 01:36:48.940
 Ich hab jetzt grad mal geguckt, Brodli, laut Can I Use, sieht das eigentlich ganz gut aus.

01:36:48.940 --> 01:36:53.840
 Also wir haben hier, ich, was, was fehlt jetzt bei den aktuellen Browsern?

01:36:53.840 --> 01:36:56.760
 Äh, ich mein, ich glaub, du meintest eher selberseitig, ne?

01:36:57.020 --> 01:36:58.700
 Ach so, okay, ah ja.

01:36:58.700 --> 01:37:01.380
 Also da hat's leider noch.

01:37:01.380 --> 01:37:03.160
 Da muss natürlich, der Server muss natürlich mitspielen.

01:37:03.160 --> 01:37:11.000
 Ich hab jetzt schon öfter gesehen, ähm, es gibt ja auch irgendwie so, äh, sagen wir mal, in die Buildchain eingebaute Brodli-Kompressoren,

01:37:11.080 --> 01:37:14.740
 sodass man es direkt irgendwie als Brodli noch extra nebendran legt und sowas.

01:37:14.740 --> 01:37:19.260
 Aber ja, stimmt, der Server ist natürlich am besten, wenn der Server das von sich aus alles, äh, machen kann.

01:37:19.260 --> 01:37:20.200
 Ja.

01:37:20.200 --> 01:37:25.000
 Ja, aber in der Tat, also wenn du das natürlich vorkomprimieren kannst, ist halt auch super, ne?

01:37:25.000 --> 01:37:28.460
 Also dann sparst du dir auch noch dieses On-the-Fly-Komprimieren.

01:37:28.460 --> 01:37:32.220
 Das, äh, das dauert nicht lange, aber es dauert eben auch nochmal ein bisschen.

01:37:32.220 --> 01:37:34.840
 Das, das geht dann quasi ab von der Time-to-First-Byte.

01:37:34.840 --> 01:37:40.180
 Ähm, und dann kann das theoretisch jeder, jeder Web-Server verschicken,

01:37:40.300 --> 01:37:43.400
 wenn er den passenden, äh, Header mit, mit dazu passt.

01:37:43.400 --> 01:37:46.820
 Ja, kann man auch machen.

01:37:46.820 --> 01:37:53.900
 Genau, aber zum Beispiel so Dienste wie Netlify, die, äh, die setzen, glaube ich, auf Amazon Cloudfront,

01:37:53.900 --> 01:37:56.920
 die haben noch kein Brodli zum Beispiel.

01:37:56.920 --> 01:37:58.720
 Mhm.

01:37:58.720 --> 01:38:00.740
 Die werden auch immer die Ohren vollgejammert.

01:38:00.740 --> 01:38:04.580
 Kann ja so schwer eigentlich nicht sein, oder?

01:38:04.580 --> 01:38:05.440
 Sag ich jetzt mal.

01:38:05.440 --> 01:38:07.240
 Sag das mal unserem Hoster.

01:38:07.240 --> 01:38:07.820
 Anscheinend.

01:38:08.540 --> 01:38:11.580
 Frag, frag, frag, frag, frag, frag, frag, frag, frag die mal, wie sieht's eigentlich aus mit Brodli?

01:38:11.580 --> 01:38:12.380
 Dann werden wir mal sehen.

01:38:12.380 --> 01:38:13.780
 Mhm.

01:38:13.780 --> 01:38:18.960
 Ähm, ich weiß nicht, du, du kennst den ja besser als ich, Konstantin.

01:38:18.960 --> 01:38:23.640
 Also, ähm, ja, diese On-the-Fly, also ich glaub, dass das Brodli, äh, das muss ich mal gucken,

01:38:23.640 --> 01:38:26.300
 ob das, vielleicht, wir haben einen neuen Server bekommen vor ein paar Monaten erst,

01:38:26.800 --> 01:38:49.940
 ob das jetzt vielleicht die Extension da, ähm, ob das jetzt vielleicht die Extension da, ähm, installiert ist, also wir verarbeiten ja viel mit PHP, ähm, und da sind wir halt darauf angewiesen, dass die, äh, Brodli-Extension da mit drin ist, beziehungsweise halt im Apache auch mit drin ist, ähm, ich weiß jetzt gar nicht, wie der letzte Stand war, also ich, was ich auf jeden Fall machen kann, ist, äh, die halt vorkomprimieren, das mach ich auch bei uns im Build-Step, und dann liegen die halt zusätzlich ab, und wenn der Browser das kann, dann kriegt er die ausgeliefert.

01:38:50.220 --> 01:38:50.920
 Ja, cool.

01:38:50.920 --> 01:38:51.380
 Ja.

01:38:51.380 --> 01:38:55.860
 Aber so On-the-Fly haben wir da jetzt gar nicht, weil's damals, glaub ich, nicht ging.

01:38:55.860 --> 01:38:59.140
 Da müsste ich mal nachschauen, was ich da getan hab inzwischen.

01:38:59.140 --> 01:39:00.640
 Mhm, ja.

01:39:00.640 --> 01:39:20.180
 Gut, und dann hab ich noch so einen, so ein, äh, sagen wir mal, so ein bisschen, äh, äh, äh, ein Tipp, der so ein bisschen so ein Nischen, äh, Thema ist, ähm, die, wenn man Bilder in seinem, äh, in seinem HTML,

01:39:20.180 --> 01:39:33.940
 drin hat, dann, äh, und der Browser identifiziert das Ganze, identifiziert das Ganze so als zusammenhängenden Block, dann wird er diesen Block erst rendern, sobald er das Bild, äh, dekodiert hat, damit er das quasi in einem Schlag machen kann.

01:39:33.940 --> 01:39:44.780
 Äh, äh, da kann man auch ein bisschen, also den Browser kann man auch dazu bringen, eben alles aus das Bild ein bisschen früher schon rauszurücken, indem man dem Bild ein Decoding gleich async-Attribut gibt.

01:39:44.780 --> 01:39:53.960
 Äh, äh, dann entbindet man ihn sozusagen von dieser, äh, Pflicht, das irgendwie in einem Rutsch alles, äh, fertig zu bauen.

01:39:53.960 --> 01:40:02.340
 Ähm, genau, ist halt so, sehr edge-case-ig, aber kann man auf jeden Fall, also es schadet auch nicht, das draufzupacken.

01:40:02.500 --> 01:40:08.780
 Ich wollte gerade sagen, ist wie, wie Loading gleich Lazy, oder? Eigentlich auf alle Images, äh, Loading gleich Lazy und, äh, Decoding.

01:40:08.780 --> 01:40:11.780
 Ja, nee, Loading gleich Lazy, äh, nicht auf alle Bilder.

01:40:11.780 --> 01:40:12.520
 Ah, okay.

01:40:12.840 --> 01:40:27.300
 Genau, das willst du nicht tun, weil da kommen wir jetzt zum quasi nächsten Punkt, äh, das ist nämlich der Largest Contentful Paint, das ist sozusagen nach dem First Contentful Paint, gibt's dann irgendwann so den größten Paint, der auf deiner Seite stattfindet.

01:40:27.440 --> 01:40:33.900
 Und das ist halt tatsächlich häufig, äh, irgendwie so ein Hero-Bild oder irgendwie ein fettes Logo.

01:40:33.900 --> 01:40:42.180
 Ähm, genau, und, äh, da, da solltest du eben genau kein Loading gleich Lazy benutzen.

01:40:42.360 --> 01:40:55.740
 Ähm, das hat den Hintergrund, dass, ähm, dass der Browser, der muss ja wissen, wo das Bild ist, um dann entscheiden zu können, ob das jetzt nah genug im Viewport ist oder nicht, ähm, um es zu laden.

01:40:55.740 --> 01:41:06.420
 So, das ist ja so die, die Idee von dem Lazy Loading, das heißt, er weiß, hier ist mein Viewport, da ist das Bild und ab diesem, dieser Distanz, also jetzt kommt's gleich ins Bild, da muss ich's jetzt laden.

01:41:07.700 --> 01:41:23.920
 Ähm, das kann er ja gerade zu Beginn überhaupt noch gar nicht machen, wenn er das, äh, weil er dafür das CSS erstmal laden, parsen und er muss dann auch den, das, äh, das Layout überhaupt machen, um dann zu wissen, wo das Bild ist.

01:41:23.920 --> 01:41:37.680
 Und, äh, wenn das Bild eben ein kritisches Bild ist, dann, äh, würde auch der, der, dieser Pre-Parser, der Ressourcenscanner, würde halt nicht loslaufen, weil der eben einfach zu blöd wäre, dieses, dieses, dieses,

01:41:37.700 --> 01:42:01.420
 Layouten durchzuführen und das zu entscheiden und das auf die lange Bank schicken, äh, schieben und darum musst, musst du Bilder, die eben so oben im Viewport sind, wo du das halt schon weißt, ähm, die solltest du halt mit, äh, entweder gar nicht mit Loading gleich Lazy ausstatten oder eben mit Loading gleich Eager, was ja quasi so quasi das Umgedrehte ist und, aber auch der Default der Browser.

01:42:03.060 --> 01:42:03.720
 Gut zu wissen.

01:42:03.720 --> 01:42:14.040
 Genau, aber sonst, also davon abgesehen, also von denen, also was alle anderen Bilder angeht, auf jeden Fall, äh, Loading Lazy, supergut.

01:42:14.040 --> 01:42:28.740
 Genau, und, äh, dann bei dem Largest Contentful Paint Bild, ähm, da ist, äh, das würde man idealerweise auch vorladen, äh, auch wieder mit so einem Link-Rail-Preload.

01:42:28.740 --> 01:42:47.800
 Ähm, ähm, da kannst du nur das Problem haben, dass, also klassischerweise, wenn du diese Link-Rail-Preloads hast, dann hast du ja nur einen href und wenn du ein responsives Bild hast, da hast du ja so ein Source-Set oder du hast vielleicht irgendwie direkt ein Picture-Element, ähm, dann lässt sich das ja nicht mehr abbilden.

01:42:47.800 --> 01:42:49.920
 Ähm, oder es hat ein Sizes-Attribut noch dazu.

01:42:49.920 --> 01:43:02.920
 Und tatsächlich gibt's, äh, äh, äh, im Chrome-Browser und vielleicht irgendwann auch in anderen Browsern, ähm, gibt's, äh, gibt's das auch, dass du, äh, responsive Bilder vorladen kannst.

01:43:03.040 --> 01:43:11.980
 Und dann hast du, dann schattest du dieses Link-Rail-Preload-Ding nicht mit einem href aus, sondern mit, äh, Image-Source-Set als Attribut und Image-Sizes.

01:43:11.980 --> 01:43:31.600
 Ähm, ähm, und dann, äh, kannst du die, dann, dann lädt er eben, dann sucht, pickt er sich eben das passende Format in der passenden Größe raus und preloadet auch das, sodass dann später dein responsives Bild, das dann ein Hero-Bild ist, eben schnell sein, äh, sein Bild anzeigen kann.

01:43:32.160 --> 01:43:32.460
 Cool.

01:43:32.460 --> 01:43:34.080
 Piu.

01:43:34.080 --> 01:43:38.220
 Muss ich später nochmal, nochmal anhören, anhören, die Folge.

01:43:38.220 --> 01:43:41.040
 Echt wieder wahnsinnig viel Neues heute dabei.

01:43:41.040 --> 01:43:41.780
 Sehr gut.

01:43:41.780 --> 01:44:02.120
 Genau, und, äh, ansonsten würde ich noch empfehlen, es gibt einen schönen Talk von Jack Archibald und, äh, ähm, das SOMA, äh, oder SOMA, ähm, zu, ähm, verschiedenen Bildformaten, wo die so JPEG zeigen und WebP und AVIV, ähm, der echt,

01:44:02.120 --> 01:44:25.580
 super cool ist, so wie eigentlich alles von denen, die macht übrigens auch einen Podcast, ähm, genau, und, äh, ja, da sind so ein paar Details, zum Beispiel, dass es halt AVIV und WebP natürlich cooler sind als JPEG, weil die kleiner sind, aber teilweise, dann wiederum den Nachteil haben, dass sie zum Beispiel nicht progressiv rendern können, weil sie eigentlich, äh, Ableitung von Videoformaten sind, die sowas gar nicht vorsehen und so.

01:44:25.640 --> 01:44:36.820
 Genau, und, genau, und je nach Szenario ist es vielleicht auch gar nicht so schlecht, ein gut komprimiertes JPEG zu nehmen und auf WebP zum Beispiel zu pfeifen, äh, genau.

01:44:38.280 --> 01:45:01.560
 Jo, und dann gibt es noch, äh, was Neues, das ist auch ganz brandneu, ähm, das kann man sozusagen, äh, Test-Driven in, in Chrome auch, ähm, das ist das Importance-Attribut, ähm, also man kann auf, äh, auf Excel-Ressourcen dieses Importance-Attribut setzen,

01:45:01.560 --> 01:45:23.380
 und dann kann man Low, Medium und High, ähm, ähm, äh, als Wert setzen und klassischerweise sortiert der, sagt der Browser, CSS ist das Wichtigste und Fonts und dann, äh, kommt JavaScript und so Bilder, die sind gar nicht so wichtig und am unwichtigsten sind, ähm, ähm, äh, Ajax-Requests zum Beispiel.

01:45:24.520 --> 01:45:40.340
 Aber wenn du jetzt so ein Hero-Bild hast und du wirklich, du willst so, hier, Browser, gib Vollgas, ich hau das, du sollst es direkt laden, dann kannst du halt hingehen und dieses Importance-Attribut auf dieses Bild und seinen Preload-Tag draufsetzen

01:45:40.340 --> 01:45:54.720
 und das sozusagen dem künstlich eine, eine höhere Importance geben, also quasi den, den Regler auf 11 drehen und der Browser wird dann eher vielleicht ein JavaScript, äh, erstmal hinten anstellen, um sich erstmal um dieses Bild zu kümmern.

01:45:56.480 --> 01:46:15.120
 Genau, und das kann man jetzt schon sozusagen ausprobieren, äh, und das funktioniert so, dass man sich für, also bei Google für einen Origin-Trial anmelden kann, das ist sozusagen, man sagt, ich, äh, hier, cooles neues Feature, ich will das mal testen mit meinen Usern, ähm, bitte gib mir einen, ich möchte mich hier anmelden und dann kriegst du einen Key

01:46:15.120 --> 01:46:36.900
 und den packst du in deinen HTML-Source-Code, äh, als Token rein und, äh, dann ist deine, deine Seite sozusagen, gelau listet für dieses, äh, noch in der Entwicklung befindliche Feature und die sagen, im Gegenzug musst du uns aber Feedback geben, also dein, dein Token läuft immer nach so und so vielen Wochen aus

01:46:36.900 --> 01:46:50.740
 und dann sagen die dann, äh, entweder unser, unser Origin-Trial ist dann erstmal beendet oder du kannst es nochmal verlängern, aber nur, wenn wir von dir auch ein bisschen irgendwie, äh, gutes Feedback kriegen, wie das denn jetzt alles funktioniert hat bei dir.

01:46:50.740 --> 01:46:51.540
 Geschickt gemacht.

01:46:51.540 --> 01:46:57.560
 Das ist so strange. Ich muss mich anmelden, um ein Chrome-Feature mit meinen Nutzern testen zu können.

01:46:57.560 --> 01:47:06.680
 Genau, weil das, äh, ansonsten, äh, das wäre das auch für dich, wäre das nur erreichbar, indem du in die, äh, in deine Chrome-Flags gehst

01:47:06.680 --> 01:47:13.940
 und da dann irgendwelche experimentellen Web-Plattform-Features aktivierst, aber das wäre dann ja nur was, was du selber austesten könntest, aber wenn du.

01:47:13.940 --> 01:47:20.320
 Ja, aber das ist ja bei allen anderen Features auch so, finde ich, äh, also, fände ich ja okay, wenn nur ich das ausprobieren kann.

01:47:20.320 --> 01:47:23.380
 Also, finde ich, finde ich schon abenteuerlich irgendwie.

01:47:23.380 --> 01:47:36.640
 Ja, ich glaube, es gibt halt so bestimmte Features, da möchte man, äh, bevor man die dann sozusagen, äh, so absegelt, wie die sind, äh, möchte man schon einfach ein bisschen mehr Daten,

01:47:36.680 --> 01:47:43.940
 sammeln, so draußen, aber eben das Feature noch nicht auf die Welt loslassen, weil sonst passiert halt, passieren halt so

01:47:43.940 --> 01:47:51.700
 diese typischen Dinge, dass halt auf einmal irgendwelche Web-Kit-Prefixen, Sachen überall benutzt werden, die eigentlich irgendwie noch nicht mal fertig waren.

01:47:51.700 --> 01:48:04.780
 Aber das ist schon, das ist schon abenteuerlich. Das heißt, wenn ich jetzt, ich muss mich da anmelden, damit Google in den Browsern meiner Nutzer das Feature automatisch anschaltet, aber nur auf meiner Seite.

01:48:05.200 --> 01:48:05.940
 Genau.

01:48:05.940 --> 01:48:12.080
 Wow, okay, das, das finde ich schon sehr fancy. Weiß ich nicht, ob ich das gut finde.

01:48:12.080 --> 01:48:13.460
 Ja.

01:48:13.460 --> 01:48:25.240
 Ja, wenn du es nicht gut findest, musst du es auch nicht machen. Also, es kann auch sein, dass du, äh, dass du woanders, äh, tatsächlich diese Features, solche Features nutzt, ähm, ohne es zu merken.

01:48:26.240 --> 01:48:36.380
 Nee, ich finde das Feature an sich schon gut. Ähm, nur die Art, wie, äh, damit umgegangen wird dann von Googles Seite, finde ich irgendwie, keine Ahnung, vielleicht gibt es da ja echt einen guten Grund, habe ich jetzt, erschließt sich mir jetzt nicht so ganz.

01:48:36.380 --> 01:48:41.840
 Ja, die wollen eben den Finger draufhalten noch. Also, die wollen das wieder einfangen können, wenn es irgendwie alles doof ist.

01:48:41.840 --> 01:48:48.460
 Ja, es ist letzten Endes ja nur ein Attribut, was ich ins HTML reinschreibe, wenn ich das jetzt richtig verstanden habe, ne?

01:48:49.040 --> 01:48:49.640
 Ja, genau.

01:48:49.640 --> 01:49:14.320
 Ja, okay. Na gut. Aber das ist auf jeden Fall interessant, kannte ich noch nicht. Ähm, es würde, würde die Einstiegshürde für, ich kann, äh, ja, ich brauche verrücktes Tooling, um irgendwie die, äh, die Reihenfolge beeinflussen zu können, oder die, die Wichtigkeit, ähm, sehr, sehr, sehr senken, dass ich einfach nur das mit HTML-Attributen steuern kann, was ich an sich eine gute Sache finde.

01:49:14.320 --> 01:49:17.980
 Genau, also JavaScript ist, ähnlich einfach wie Loading Lazy.

01:49:19.040 --> 01:49:36.400
 Ja, genau. Also JavaScript ist, äh, was die Dinge angeht, einfach, äh, so das völlig falsche Pferd, was einfach daran liegt, dass es, äh, dass bis das JavaScript da ist, also das, das dauert ja, das geht zwar für uns gefühlt schnell, aber für den Browser sind das ja Äonen, bis er das, äh, an den Start gebracht hat.

01:49:37.400 --> 01:49:40.360
 Und da ist halt der Zug für, für sowas schon abgefahren.

01:49:40.360 --> 01:49:41.700
 Mhm.

01:49:41.700 --> 01:49:44.680
 Genau.

01:49:44.680 --> 01:49:53.240
 Jo, das wäre der Largest Contentful Paint, ähm, den man damit auf jeden Fall deutlich beschleunigen könnte.

01:49:54.040 --> 01:49:59.800
 Und dann gibt's, äh, so eine Batterie an so Metriken, die irgendwie alle so am Ende aufs Gleiche hinauslaufen.

01:49:59.800 --> 01:50:14.220
 Das ist, äh, die Time-to-Interactive, äh, Total-Blocking-Time und First-Input-Delay, die alle letztlich, äh, sozusagen sabotiert werden durch die, durch, durch die Menge JavaScript, die man auf seiner Seite hat.

01:50:14.600 --> 01:50:28.020
 Ähm, größtenteils zumindest, ähm, äh, äh, was auch da so ein bisschen dazu zählt, ist, äh, also, das im Prinzip, wie lange ist der Browser dann beschäftigt mit Dingen, die ein Browser so tut.

01:50:28.020 --> 01:50:44.000
 Und, äh, das ist, ähm, in der Mehrzeit der, der Fälle JavaScript irgendwie Parsern und Ausführen, äh, und auch ein Stück weit, äh, Rendering, also, da der Single-Threaded ist, kann der, wenn er halt da irgendwie aufwendig layouten und rendern und

01:50:44.000 --> 01:50:53.800
 painten muss, dann, dann muss er das eben auch mit dem einen Thread machen und dann, äh, blockiert das genauso. Und dann, dann kann der nicht reagieren auf User-Input oder so.

01:50:53.800 --> 01:51:13.400
 Genau, also, da ist eigentlich die, die, die Devise, so viel JavaScript rauswerfen, wie es, wie möglich. Ähm, das geht ja mittlerweile, also, das, wir haben es jetzt gesehen, Loading gleich Lazy und so, das macht ganz viel Dinge überflüssig. Ich finde auch so CSS-Features wie

01:51:13.400 --> 01:51:41.900
 Scroll-Snapping, damit kann man schon, also mit sehr wenig JavaScript schon so irgendwie tolle Karussells bauen. Das war nicht ganz perfekt, also sowas wie so ein unendliches Karussell, das dann immer wieder von vorne anfängt, also indem man trotzdem immer nur nach rechts weiter scrollt, so sowas geht halt einfach nicht. Genau, aber, ähm, das ist vielleicht so ein Kompromiss, den man, den man eingehen kann, damit man einfach nicht, äh, so viel JavaScript immer auf die User drauf wirft.

01:51:42.800 --> 01:51:59.380
 Genau, und, äh, was, was auch hilft, ist, ähm, ähm, modernes ES6 aus, ausliefern, ähm, und wenn man ältere Browser bedienen will, dann gibt's ja auch noch die Möglichkeit, für die zusätzlich das zu transpilieren, und dann gibt's ja dieses

01:51:59.380 --> 01:52:03.360
 Differential Loading, ich weiß nicht, habt ihr damit schon was zu tun gehabt? Ja, ne?

01:52:03.920 --> 01:52:14.920
 Also, das ist ja quasi das ES6 für die Browser-Leads, die es können, und, äh, und dann halt, äh, polyfillst und nur in den Browsern das lädst, was gepolyfillt werden muss, äh, was du in den Browsern auch brauchst.

01:52:15.720 --> 01:52:25.700
 Genau, ja, da gibt's ja entsprechende, so, äh, Attribute, die man auf das Script-Element setzen kann, die so als Weiche fungieren, sozusagen, zwischen beiden Welten.

01:52:26.720 --> 01:52:56.700
 Genau, wobei man das, äh, genau, so bei, äh, für die modernen Browser würde man dann Script-Type-Module ja machen, ähm, da muss man nur wissen, dass, äh, diese Sachen gehen immer nur asynchron zu laden, also nicht blockierend, wenn man seinen JavaScript irgendwie so blockierend in der Seite braucht, eventuell, das kommt ja vor, so kleine Teile, die man auf jeden Fall braucht, dann, äh, dann kann man keinen Type-Module benutzen, ähm, genau, aber ansonsten,

01:52:56.700 --> 01:53:04.040
 entspräche ein Type-Module-Skript, ein Standard-Skript, was, äh, das, äh, das Differ-Attribut trägt.

01:53:04.040 --> 01:53:26.680
 Genau. Ähm, was ich dann auch noch ganz gerne mache, ist, dass ich, ähm, dass ich auch nicht alle Komponenten auf der Seite auf einmal initialisiere, sondern, ähm, mit einem Intersection-Observer ähnlich wie bei den Lazy-Bildern gucke, wo, wo ist diese Komponente und erst, wenn sie dann so langsam so in den spannenden Bereich kommen, dann sage ich, okay, jetzt,

01:53:26.680 --> 01:53:38.700
 komm, dann, jetzt kannst du sie initialisieren, damit die dann gleich fertig ist und je nachdem, auf so einer sehr langen Seite gibt's vielleicht auch ganz viele Komponenten, die nie initialisiert werden, äh, in diesem Lifecycle.

01:53:41.420 --> 01:53:55.280
 Genau, und, äh, dann gibt's, äh, gibt's noch so ein paar JavaScript-APIs, die, die so ein bisschen, die, die auch so helfen, äh, Last vom Browser zu nehmen oder das Ganze so zu gestalten, dass der, dass der nicht irgendwie so an seine Grenzen kommt.

01:53:55.420 --> 01:54:08.200
 Das eine ist, äh, hier, Request-Idle-Callback, dass man sagt, hör mal, äh, mach du was zu machen musst, wenn du irgendwann aber nichts mehr zu tun hast, dann könntest du diese Funktionen da mal ausführen für mich.

01:54:09.440 --> 01:54:16.020
 Ähm, da kann man auch sagen, so, da kann man noch zusätzlich als Parameter sagen, aber spätestens nach fünf Sekunden oder so.

01:54:17.340 --> 01:54:31.680
 Und, äh, dann gibt's noch so neue, neue APIs, zum Beispiel von Facebook, die haben die Is-Input-Pending-API, das heißt, da könnte man in seinem JavaScript abfragen, hey, hat der User eigentlich hier schon was, hat der was geklickt gerade?

01:54:31.960 --> 01:54:35.500
 Also erwartet der, dass jetzt irgendwie das User-Interface reagiert auf ihn?

01:54:35.500 --> 01:54:38.540
 Und die sagt dann so, ja oder nein?

01:54:38.540 --> 01:54:43.880
 Und bei nein, alles klar, dann können wir weiter hier Vollgas geben und den Thread blockieren.

01:54:43.880 --> 01:54:55.840
 Und wenn der User aber geklickt hat, dann würde, würde der, könnte man in seinem Code dann eben sagen, okay, gut, äh, dann, ähm, mach ich halt irgendwie per Set-Timeout oder Request-Idle-Callback eine Pause,

01:54:56.740 --> 01:55:06.280
 dass der sein, sein quasi visuelles Feedback bekommt, dass der happy ist, dass die Seite irgendwie reagiert hat auf, auf seinen, äh, Input und dann macht man eben weiter.

01:55:06.280 --> 01:55:12.620
 Ach, sehr cool. Aber das ist alles noch Zukunftsmusik, ne? Also, Request-Idle-Callback?

01:55:12.620 --> 01:55:14.580
 Äh, ne, ist drin. Ja, gibt's alles schon.

01:55:14.580 --> 01:55:18.360
 Oh ja, tatsächlich. Cool, noch nie was davon gehört.

01:55:18.360 --> 01:55:26.720
 Ne, ich auch nicht. Also, ich, ich hab immer so wieder das Gefühl, es gibt so viel, äh, und es kommt immer mehr dazu, was man einfach noch nicht kennt und nicht weiß.

01:55:26.740 --> 01:55:31.320
 wo ich glaub, man muss, äh, einfach so ein bisschen ablegen im Hinterkopf, wenn man's dann mal braucht.

01:55:31.320 --> 01:55:36.880
 Ähm, ich hab jetzt auch grad, äh, kurz, äh, nachgeschaut, MDN-Window-Request-Idle-Callback.

01:55:36.880 --> 01:55:39.600
 Genau, da bin ich auch grad drauf. Äh, ja.

01:55:39.600 --> 01:55:45.340
 Also, ist experimental, aber ist tatsächlich, äh, gut verbreitet. Ja. Also, eigentlich komplett nutzbar.

01:55:48.380 --> 01:56:00.940
 Genau, gibt's schon echt lange, aber irgendwie so, ich glaub, der, die anderen Browser, die, die springen nicht so richtig auf den Zug auf, aber dann, dann nutzt man da eben, äh, Set-Timeout oder irgendwie so was.

01:56:00.940 --> 01:56:09.320
 Ja, Safari ist da wieder so ein bisschen der, der Bösewicht, da muss man's erst, äh, enablen, als Experimental, aber die anderen, die haben's alle.

01:56:10.360 --> 01:56:11.720
 Der Böse. Schade, schade.

01:56:11.720 --> 01:56:12.200
 Der Böse.

01:56:12.200 --> 01:56:14.720
 Safari-I-E.

01:56:14.720 --> 01:56:16.060
 Nee, oder nee.

01:56:16.060 --> 01:56:17.680
 Safari ist da nur I-E-E.

01:56:17.680 --> 01:56:35.340
 Genau, und, äh, dann, äh, das, das wär jetzt so im Prinzip so, was blockiert die Seite und, äh, was geht halt, äh, der Userin oder dem User schwer auf den Keks, dass die Seite irgendwie nicht reagiert, ähm, so das, was man da an Maßnahmen treffen kann.

01:56:36.340 --> 01:57:01.400
 Ähm, und dann gibt's, äh, noch was, dass, das einen, äh, schwer auf die Palme bringt, das ist, ähm, wenn's Layout-Shifts gibt's auf der Seite, also, wenn quasi, so klassischerweise, komm auf eine Seite und dann ploppt irgendwie ständig irgendwie alles auseinander, weil Dinge nachgeladen werden und, äh, man fängt an zu lesen und das, äh, ploppt dann irgendwie in eine andere Ecke und, ähm, so.

01:57:02.200 --> 01:57:08.440
 Man kann mit der Seite erst mal gar nicht arbeiten, man lädt die und legt sein Smartphone erst mal beiseite und dann eine Minute später ist sie endlich fertig.

01:57:08.440 --> 01:57:25.280
 Das sind halt Layout-Shifts, äh, die, äh, die schwer an die Psyche gehen und, äh, deshalb sagt Google eben, äh, die, die messen wir jetzt und dann, äh, ja, wenn du zu viel davon hast, dann strafen wir dich ab.

01:57:25.760 --> 01:57:26.140
 Zurecht.

01:57:26.140 --> 01:57:27.900
 Oha.

01:57:27.900 --> 01:57:41.420
 Und das, genau, ähm, und dafür gibt's, äh, das kannst du auch selber machen im Browser, es gibt nämlich den Performance-Observer, den kannst du befragen, der sagt dir dann, wo über Layout-Shifts stattgefunden haben und welche Elemente beteiligt waren.

01:57:42.700 --> 01:57:58.600
 Und, ähm, genau, also da muss man sich eben Gedanken machen, wie kann ich die vermeiden, da kommt's so ein bisschen drauf an, äh, was sind das für Elemente, die diese Layout-Shifts verursachen, ähm, und dann davon abhängig kann man eben verschiedene Lösungsstrategien gehen.

01:57:58.600 --> 01:58:14.980
 Also eine Sache ist ja, äh, dass man irgendwie, äh, Bilder einbindet und weil man die responsiv einbindet, äh, macht man seinem CSS eine Widz auf 100% und weil, damit die dann nicht verzerrt sind, sagt man bei Hide Auto.

01:58:15.760 --> 01:58:16.740
 Genau, so weit, so gut.

01:58:16.740 --> 01:58:39.640
 Nur jetzt ist es so, dass der Browser eben diese Hide noch nicht kennt, bis er das Bild nicht geladen hat, weil dann, so anhand der Bilddatei sieht er dann, ah, guck an, äh, das ist jetzt so das Seitenverhältnis von diesem Bild, also ergibt sich die Höhe automatisch, so, und dann ploppt das eben rein und alles da drunter wird weggeschoben und schon sind wir wütend.

01:58:39.640 --> 01:58:45.740
 Ähm, und da gibt's, äh, jetzt auch seit einiger Zeit.

01:58:45.760 --> 01:59:15.580
 Da weiß ich aber nicht, ob der Browser Support schon vollständig ist, dieses Aspect Ratio, diese CSS Property, die man da draufsetzen kann, oder, ähm, was ich auch gerne gemacht habe, als es die noch nicht gab, ist, dass ich, ähm, dass ich ein responsives Bild habe, da, ähm, da hast du das, äh, Source Set Attribut, mit dem du das befütterst und in das Source Attribut habe ich ein SVG geinlined, also quasi ein, äh, ein SVG, das

01:59:15.580 --> 01:59:25.320
 quasi gar keinen Inhalt hat, das einfach nur eine bestimmte Größe aufspannt und das, das habe ich quasi per Data URI da rein, in das Source

01:59:25.320 --> 01:59:35.060
 reingeinlined und, äh, das lädt ja dann sofort, äh, und steht erstmal parat, bis dann die echten Bilder über das Source Set reinkommen.

01:59:35.060 --> 01:59:37.560
 Genau.

01:59:38.180 --> 01:59:39.180
 Es wird immer verrückter.

01:59:39.180 --> 01:59:52.180
 Ja, und dann gibt's natürlich, äh, gibt's noch so andere Dinge wie, also da hatten wir bei der Rheinischen Post natürlich auch viel mit zu tun, das ist, ähm, äh, Werbebanner, die, das ist ja auch eine, also, was da im Hintergrund

01:59:52.180 --> 02:00:01.920
 passiert, das will auch gar keiner wissen, aber im Prinzip ist das so, so, das, das, das geht so über so, was weiß ich, wie viele Marktplätze, wird ein Slot sozusagen feil geboten und

02:00:01.920 --> 02:00:20.600
 Und wer kriegt irgendwann den Zuschlag und spielt eine Werbung aus und es ist völlig unklar, wie groß diese Werbung ist, also es gibt so bestimmte Kandidaten, die da rauskommen können, also, so das Bewerberfeld ist schon ungefähr bekannt, aber was, wer am Ende dann da, äh, auftaucht, das weiß man nicht.

02:00:20.600 --> 02:00:37.300
 Und deswegen, äh, ist es klassischerweise so, dass so diese Werbeslots früher, die haben keine Größe bekommen, das hat sich ergeben durch die Werbung, die dann da raus, äh, die dann da auf einmal aus der Torte hüpft und schon hatte man eben wieder so ein Layout-Shift dadurch.

02:00:38.880 --> 02:00:57.640
 Genau, und, äh, wir haben das bei der Reischen Post und das machen auch viele so gelöst, dass wir sagen, äh, wir haben einen Container, den wir, so ein Platzhalter-Container, den wir da, den wir an der Stelle, wo die Werbung mal kommen wird, aufziehen und der ist so groß wie die größte Werbung, die da kommen könnte.

02:00:58.560 --> 02:01:19.460
 Und, äh, wenn die kommt, dann ist ja alles cool und wenn eine kleinere kommt, dann ist, äh, dann lassen wir die per Position-Sticky einfach so ein bisschen da drin wandern, also dann, dann wandert die beim Scrollen mit und sobald der Container dann so aus dem Bild geht, dann zieht der quasi die Werbung wie an so einem, äh, Regenschirm-Griff so mit sich raus.

02:01:19.460 --> 02:01:24.080
 Gesehen hab ich das schon, ja, und, ah, ich dachte, das ist einfach nur so ein Effekt halt.

02:01:24.620 --> 02:01:28.320
 Ich habe immer gedacht, das ist, dass die Werbung ein bisschen nerviger wird und man sie länger sieht.

02:01:28.320 --> 02:01:30.500
 Das kann ja sein, dass es auch dazu gehört.

02:01:30.500 --> 02:01:32.380
 Aber das sagen die nicht rein zu.

02:01:32.380 --> 02:01:34.880
 Ja, klar, natürlich.

02:01:34.880 --> 02:01:38.080
 Ja, das habe ich auf jeden Fall schon so gesehen und es hat mich genervt.

02:01:38.080 --> 02:01:42.840
 Aber jetzt verstehe ich ja, wahrscheinlich so ein Layout-Sprung hätte mich vielleicht mehr genervt.

02:01:42.840 --> 02:01:44.780
 Ja, genau.

02:01:44.780 --> 02:01:46.980
 Und das siehst du auch.

02:01:46.980 --> 02:01:54.580
 Also nicht nur die randische Postseite, auch ganz viele andere Newsseiten sind echt viel angenehmer zu konsumieren geworden.

02:01:54.620 --> 02:02:09.460
 Finde ich, seit Google diese, seine Metriken veröffentlicht hat und auch so hinterher ist, weil die tatsächlich ja einen Bezug zu guter Nutzerzufriedenheit haben.

02:02:09.460 --> 02:02:11.220
 Und ich merke das auch.

02:02:11.220 --> 02:02:15.040
 Also früher haben mich Newsseiten einfach nur wütend gemacht.

02:02:15.040 --> 02:02:21.680
 Und mittlerweile, ich finde, sie sind jetzt noch nicht die Krone der Schöpfung.

02:02:22.400 --> 02:02:27.500
 Also das werden sie erst, wenn man dann tatsächlich ein zahlungsfürchtiges Abo hat, dann muss ich sagen, riecht sie gut.

02:02:27.500 --> 02:02:33.760
 Aber es ist auf jeden Fall, es ist in Ordnung und so, damit kann man arbeiten so.

02:02:33.760 --> 02:02:38.920
 Ja stimmt, unter dem Gesichtspunkt habe ich das noch gar nicht betrachtet, dass das wirklich gut sein kann für mich als Endnutzer,

02:02:38.920 --> 02:02:43.520
 wenn Google da so drauf pocht und sagt, wir strafen euch ab und ihr rankt nicht mehr so gut.

02:02:43.840 --> 02:02:49.440
 Weil die Leute, die ihre Seite mit Werbung vollklatschen, damit sie möglichst viel verdienen, die wollen ja auch möglichst viele Klicks auf ihre Seite haben.

02:02:49.440 --> 02:02:54.440
 Und die sind ja auch interessiert daran, dann wieder weiter oben zu ranken und wollen nicht abgestraft werden.

02:02:54.440 --> 02:02:57.940
 Also müssen sie was tun, damit mich die Werbung auch nicht mehr so nervt, weil alles rumhüpft.

02:02:57.940 --> 02:02:58.980
 Cool.

02:02:59.240 --> 02:03:05.840
 Und die haben speziell für die Nachrichtenseiten haben sie noch so einen weiteren Köder sozusagen ausgelegt.

02:03:05.840 --> 02:03:14.940
 Und zwar, wenn du in der mobilen Suche bist, dann kriegst du so ein News-Karussell, je nachdem, erstmal eingeblendet.

02:03:15.140 --> 02:03:20.620
 Und früher war es so, dass nur AMP-Seiten sich qualifiziert hatten, da drin aufzutauchen.

02:03:20.620 --> 02:03:29.840
 Und darum müssen auch alle armen News-Seiten-Programmierer immer noch AMP-Varianten ihrer Templates bauen und weinen dabei ganz bitterlich.

02:03:31.800 --> 02:03:50.360
 Genau, und seit ein paar Monaten sagt Google, nee, also wenn eure Core-Web-Vitals, also diese Metriken, wenn die passen, wenn die im grünen Bereich sind, dann braucht ihr keinen AMP, dann kommt auch eure normale Seite ins Karussell rein.

02:03:50.360 --> 02:04:00.600
 AMP ist ja, glaube ich, eh tot, oder? War doch irgendwie vor einer Weile, dass es hieß, dass Google das so stark geforciert hat, dass es jetzt doch eigentlich tot ist.

02:04:01.220 --> 02:04:04.340
 Ja, wäre auf jeden Fall nicht, also wäre schon okay.

02:04:04.340 --> 02:04:11.620
 Also da ist aus dem AMP-Kosmos ist schon so das ein oder andere Coole so rausgekommen.

02:04:11.620 --> 02:04:26.960
 Also die, das ist ja dann oft so, das war ja früher bei Microsoft schon so, dass irgendwie die Outlook-Web-Access-Abteilung gesagt hat, hey, Internet Explorer-Abteilung, baue mal irgendwas ein, wo wir Daten später nachziehen können.

02:04:26.960 --> 02:04:32.840
 Und dann haben die gesagt, cool, machen wir, wir nennen das dann irgendwas mit XML, dann finden es alle geil und wir bauen es ein.

02:04:33.640 --> 02:04:36.200
 Und so kam halt das XML-Http-Request.

02:04:36.200 --> 02:04:39.040
 Und so ist es bei Google ja auch.

02:04:39.040 --> 02:04:43.580
 Also dann ruft die Google-Maps-Abteilung an und will ein Feature haben.

02:04:43.580 --> 02:04:53.780
 Und genauso hat halt die AMP-Abteilung so einige coole Features auch erdacht und eben dann auch bekommen.

02:04:54.780 --> 02:04:56.140
 Die wir aber auch nutzen können.

02:04:56.140 --> 02:04:59.020
 Ja.

02:04:59.020 --> 02:05:03.000
 Ja, ich glaube, das darf jetzt gehen.

02:05:04.420 --> 02:05:05.700
 Ja, ich denke auch.

02:05:05.700 --> 02:05:21.160
 Genau, also ich denke, dass wir auch da bald gar nicht, wirklich nicht mehr viel von sehen, weil auch tatsächlich die ganzen Nachrichtenseiten froh sind, dass sie sozusagen diese extra Branch nicht weiter pflegen müssen und die langsam abschalten.

02:05:21.160 --> 02:05:22.940
 Genau.

02:05:22.940 --> 02:05:25.440
 Bin ich froh, dass ich mich da nie eingearbeitet habe.

02:05:25.440 --> 02:05:31.960
 Ich war schon mal kurz davor wegen irgendeinem Projekt und dann ist es doch nicht zustande gekommen und jetzt bin ich echt froh.

02:05:31.960 --> 02:05:41.920
 Ich glaube, so ist es vielleicht noch okay, wenn man sagt, ich setze halt auf AMP auch tatsächlich als Framework, um meine Seite zu bauen.

02:05:41.920 --> 02:05:46.620
 Also die tatsächliche Seite, nicht noch ein Klon von der Seite für Google.

02:05:46.620 --> 02:05:51.500
 Dann glaube ich, kann das schon okay sein.

02:05:51.820 --> 02:05:55.480
 Also am Ende ist es auch nur ein Framework mit bestimmten Schwerpunkten.

02:05:55.480 --> 02:06:04.660
 Genau, aber es ist dennoch, glaube ich, irgendwie eher auf dem Rückzug als auf dem, noch irgendwie weiter auf dem Vormarsch.

02:06:08.740 --> 02:06:24.160
 Genau, das sind die Layout-Shifts und da ist es so, dass die einfach, die werden, da misst Google über eine gewisse Zeit nach dem Laden und zählt die dann eben alle zusammen und zwar auch nur die, die auch in deinem Viewport passieren.

02:06:24.880 --> 02:06:30.620
 Wenn die irgendwie unterhalb des Viewports passieren, ist das ja egal, das stört ja auch keinen und darum werden die nicht mitgezählt.

02:06:30.620 --> 02:06:43.380
 Und da musst du halt gucken, dass du in der Summe nicht zu viel, zu viele Layout-Shifts hast und die werden, die kriegen dann so einen, so einen quasi so einen Weight, so ein Gewicht.

02:06:43.380 --> 02:06:49.840
 Und das hängt davon ab, wie groß ist denn dieser, der Bereich, der da weggeschoben wurde durch dieses Dings.

02:06:50.880 --> 02:06:57.840
 Und je größer der ist, desto höher das Weighting oder das Gewicht.

02:06:57.840 --> 02:06:59.560
 Okay.

02:06:59.560 --> 02:07:05.600
 Ja, und dann kommen wir zur Rendering-Performance an sich.

02:07:05.600 --> 02:07:08.540
 Also die, da hat man ja gesagt, die kann den Browse auch blockieren.

02:07:09.700 --> 02:07:28.700
 Und da hatten wir ja auch eingangs über DOM-Tremap gesprochen, denn genau je umfangreicher der DOM-Baum ist und je tiefer, desto länger ist der Browser beschäftigt, einfach weil das so quasi so ein bisschen so in Wellen durch das DOM durchgeht.

02:07:28.700 --> 02:07:35.460
 Und wenn hier was irgendwie größer wird, dann drückt das irgendwas anderes weg und das ist einfach dann viel Arbeit.

02:07:35.460 --> 02:07:42.520
 Dementsprechend geht es schneller, wenn man da nicht komplett eskaliert.

02:07:42.520 --> 02:07:47.240
 Und ich hatte aber auch gesagt, man kann, man kann auch.

02:07:47.240 --> 02:07:47.660
 Ich glaube, wir sind schuldig.

02:07:47.660 --> 02:07:53.300
 Ja, also vielleicht bei SVG, weiß ich nicht.

02:07:53.300 --> 02:07:57.000
 Die haben ja, die arbeiten ja nach anderen Regeln, da geht das ja vielleicht.

02:07:58.120 --> 02:08:04.840
 Genau, aber ihr könnt auch, ihr könnt euch auch vielleicht, ihr könnt auch faul sein und sagen, hey, wir lassen das einfach, wie es ist.

02:08:04.840 --> 02:08:09.260
 Und, und ihr könnt dann bestimmte Joker ziehen.

02:08:09.260 --> 02:08:13.120
 Zum Beispiel könnt ihr, gibt es ja die CSS-Contain-Property.

02:08:13.120 --> 02:08:14.960
 Ich glaube, die hattet ihr auch mal besprochen.

02:08:14.960 --> 02:08:17.580
 Habe ich mir auch nochmal notiert, dass wir das nochmal ansprechen, sehr gut.

02:08:17.580 --> 02:08:18.940
 Ja, genau.

02:08:18.940 --> 02:08:27.980
 Und da sagst du, also da muss man gucken, das ist auch ein Stück weit so ein Footgun, also ein Ding,

02:08:27.980 --> 02:08:30.180
 mit dem man sich auch schon mal in den Fuß schießen kann.

02:08:30.180 --> 02:08:41.040
 Aber man kann, man gibt, man nutzt das in CSS und sagt dann zum Beispiel Contain Paint oder Contain Layout.

02:08:41.660 --> 02:08:44.280
 Und man gibt dem Browser dann bestimmte Garantien.

02:08:44.280 --> 02:08:52.360
 Also man sagt, egal was in diesem Element jetzt so stattfindet, das Layout bleibt, wie es ist und es bleibt stabil.

02:08:52.360 --> 02:09:04.800
 Und du musst irgendwie nicht mit irgendwie allem rechnen, sondern kannst sozusagen einen Shortcut nehmen beim Layouten dieses Elements und andere Elemente, die die Contain Property nutzen.

02:09:05.800 --> 02:09:09.980
 Und der andere Joker, den ihr ziehen könnt, ist Content Visibility.

02:09:11.300 --> 02:09:12.920
 Das habe ich aufgeschrieben, perfekt.

02:09:12.920 --> 02:09:14.520
 Super.

02:09:14.520 --> 02:09:22.580
 Das ist im Prinzip ein Lazy Rendering von, ja, des Layout Trees.

02:09:22.840 --> 02:09:33.900
 Also du kannst Elemente mit Content Visibility auto markieren und der Browser wird sie erst dann anfangen zu rendern, wenn sie eben deinem Viewport zu nahe kommen.

02:09:34.080 --> 02:09:39.740
 Also ähnlich wieder wie bei dem Lazy Bilderladen und genau.

02:09:39.740 --> 02:09:55.440
 Und das Einzige, wo man da drauf achten muss, ist, dass man dem, es gibt noch eine zweite Eigenschaft, ich will gerade, die ist Intrinsic Size, glaube ich, oder sowas.

02:09:57.840 --> 02:10:02.880
 Die muss man vergeben, damit man eine Platzhalterhöhe erstmal für dieses Element hat.

02:10:02.880 --> 02:10:08.620
 Weil wenn man die nicht vergibt, dann kollabieren die alle zu so einen Pixel oder null Pixel hohen Etwassen.

02:10:08.620 --> 02:10:15.640
 Und wenn man seine ganze Seite damit ausstattet, dann wird die geladen.

02:10:16.560 --> 02:10:25.180
 Und dann liegen diese, im Zweifelsfall, alle Elemente quasi wie so ein Akkordeon, das zusammengedrückt wurde, oben in deinem Viewport.

02:10:25.180 --> 02:10:29.840
 Dadurch, dass sie im Viewport liegen, sagt der Browser, ich muss die alle jetzt painten.

02:10:29.840 --> 02:10:33.180
 Und dann zeichnet er die alle.

02:10:33.180 --> 02:10:34.060
 Das willst du nicht.

02:10:34.060 --> 02:10:37.900
 Du willst ja wirklich nur, du willst ja nur die Oberen painten.

02:10:37.900 --> 02:10:44.040
 Und darum musst du denen quasi so eine künstliche Höhe geben, eine künstliche Ausdehnung in der Höhe.

02:10:44.040 --> 02:10:47.320
 Und da kannst du im Prinzip irgendeinen Wert nehmen.

02:10:47.320 --> 02:10:48.300
 Das ist völlig egal.

02:10:48.300 --> 02:10:53.780
 Hauptsache irgendwie, ich sag mal so, mindestens 1000 Pixel wäre nicht schlecht.

02:10:53.780 --> 02:10:55.940
 So oder, genau.

02:10:55.940 --> 02:11:01.000
 Und dann passiert halt dieser Fall nicht.

02:11:01.640 --> 02:11:10.540
 Also Content Visibility und auch mit der Intrinsic Size, das habe ich auf unserer, also auf meiner Firmenseite auch mal eingesetzt, nachdem wir es in der Folge drüber hatten.

02:11:10.540 --> 02:11:15.420
 Und das hat tatsächlich auch bei Lighthouse dann ein paar Pünktchen direkt mal mehr gegeben.

02:11:15.420 --> 02:11:17.660
 Also das ist echt was, wenn man sich da ein bisschen mit beschäftigt.

02:11:17.660 --> 02:11:22.640
 Und zumindest gerade mal so Sachen wie, klar, Hero weiß ich, der ist oben und alles andere.

02:11:22.640 --> 02:11:26.680
 Da bin ich mir zu 100% sicher, dass das erst nach Scrollen auftaucht.

02:11:26.680 --> 02:11:29.480
 Da kann man schon tatsächlich performance-mäßig was rauskitzeln.

02:11:30.920 --> 02:11:32.460
 Ja, genau.

02:11:32.460 --> 02:11:45.940
 Und am besten, also bei den oberen Sachen, wo du eh weißt, die sind am Anfang schon da, da setzt du dann keine Content Visibility drauf, weil auch wieder so, da muss er dann irgendwie erstmal rausfinden, ob das gerendert werden muss.

02:11:45.940 --> 02:11:50.340
 Und wenn du das eh schon weißt, dann muss er das, dann nimmst du es einfach weg.

02:11:50.340 --> 02:11:52.140
 Genau.

02:11:53.300 --> 02:11:55.140
 Werde ich auf jeden Fall bei uns mal einbauen.

02:11:55.140 --> 02:12:01.340
 Das werde ich auf jeden Fall mal mit experimentieren, weil ich glaube, das könnte tatsächlich eins unserer Probleme lösen.

02:12:01.340 --> 02:12:02.520
 Ja.

02:12:05.840 --> 02:12:21.060
 Genau, und dann haben wir eigentlich dann renderingmäßig haben wir noch die, also jetzt haben wir ja gerade darüber gesprochen, wie können wir dem Browser generell so vielleicht so initiale Last wegnehmen, nachdem er die Seite zum ersten Mal gerendert hat.

02:12:22.180 --> 02:12:26.140
 Da gibt es aber noch so Dinge wie eben flüssige Animationen und Co.

02:12:26.140 --> 02:12:39.160
 Das kennt ihr wahrscheinlich alle schon, also es gibt einfach bestimmte CSS-Eigenschaften, die lassen sich prima an eine Grafikkarte wegdelegieren und manche nicht.

02:12:39.160 --> 02:13:00.260
 Also eigentlich die Mehrzahl nicht, das heißt, wenn man etwas sehr performant, also sagen wir mal mit 60 oder 120 Frames pro Sekunde jetzt bei den neuen Apple-Geräten relevant animieren möchte, dann gibt es eigentlich nur die Transform-Eigenschaft, Opacity und die Filter.

02:13:00.260 --> 02:13:22.740
 Die sind alle Hardware beschleunigt und das macht die Grafikkarte halt auf der linken Pobacke und genau, deswegen kann man mal gucken, da gibt es so viele Tricks, wie man irgendwie Dinge am Ende mit diesen Eigenschaften animieren kann, obwohl man im ersten Moment vielleicht denkt, das geht gar nicht.

02:13:22.740 --> 02:13:46.880
 Also so Sachen wie, ich möchte die Hintergrundfarbe ändern, aha, dann machst du einfach zwei Elemente und du änderst einfach, die animierst die Opacity von beiden quasi gegenläufig und dann hast du quasi dein, oder du nutzt den Hue-Filter, um das Farbrad zu drehen, dann hast du das auch, also anstatt eben die Background-Color zu animieren.

02:13:49.760 --> 02:14:06.920
 Genau, wenn man diese Hardware-beschleunigten Sachen animiert, dann ist es so, dass in dem Moment, wo du die Animation loskickst, dann muss der Browser, dann merkt der Browser, aha, cool, alles klar, ich muss das jetzt an die Grafikkarte geben.

02:14:06.920 --> 02:14:21.640
 Dann extrahiert er, dann extrahiert er dieses eine Element sozusagen aus der Zeichenfläche, macht er aus zwei Zeichenflächen, also einen Composite-Layer macht er da aus der einen und schickt die dann in die Grafikkarte, die die dann weich animiert.

02:14:21.640 --> 02:14:30.240
 Und wenn die Animation zu Ende ist, dann passiert das Umgekehrte, dass er diese Composite-Layer nimmt und wieder zusammenbackt mit der ursprünglichen, die unten drunter liegt.

02:14:30.920 --> 02:14:39.320
 Und dieser Vorgang, den merkt man manchmal, dass der Browser irgendwie mal kurz quasi stehen bleibt, um diese Arbeit zu verrichten.

02:14:40.120 --> 02:14:48.000
 Und das kannst du, dem kannst du schon vorgreifen, indem du sowas machst wie eben Transform Translate Z.

02:14:48.000 --> 02:14:49.880
 Also das ist so der Klassiker.

02:14:49.880 --> 02:14:52.500
 Ich benutze immer gerne Backface Visibility Hidden.

02:14:52.500 --> 02:14:56.440
 Das setzt sich drauf, weil das ist so eine Property, die kein Schwein braucht.

02:14:57.240 --> 02:15:09.140
 Und die, die einem, die, die einem dann auch nicht in die Quere kommt später, also, weil wenn man Transform animiert und muss immer dran denken, Translate Z noch irgendwie beizubehalten, nervt.

02:15:09.140 --> 02:15:18.660
 Genau, und damit, damit zwingt man quasi dieses Element von Anfang an in so einem Compositing-Layer, aus der es auch nicht herauskommt.

02:15:18.800 --> 02:15:25.040
 Und damit hat man, spart man dem Browser später die Arbeit, das quasi rauszuziehen und reinzubacken wieder.

02:15:25.040 --> 02:15:35.200
 Moritz, ich glaube, das ist die Lösung für unser Performance-Problem mit unserem Glow-Effekt-Easter-Hack-Gedöns, wo wir ein Bild haben und dann noch irgendwelche Glows drüber.

02:15:35.600 --> 02:15:40.420
 Also wenn wir da Backface Visibility draufsetzen und damit Compos-Gedöns haben wir schon.

02:15:40.420 --> 02:15:43.100
 Ja, ich befürchte, das haben wir schon.

02:15:43.100 --> 02:15:44.880
 Aber vielleicht ist es nicht auf dem richtigen Element.

02:15:44.880 --> 02:15:51.420
 Das besteht ja aus einer Myriade an verschachtelten, warte mal einen Moment, ich gucke gerade kurz nach.

02:15:51.420 --> 02:15:56.060
 Also bei mir ist es ja, bei mir ist es ja superflüssig.

02:15:56.060 --> 02:15:58.340
 Außer während wir streamen.

02:15:58.340 --> 02:16:01.040
 Wenn wir streamen und wir machen unsere Seite auf, dann ist es vorbei.

02:16:01.040 --> 02:16:06.000
 Das ist das H1-Element und das hat schon Backface Visibility hidden.

02:16:06.000 --> 02:16:07.380
 Okay.

02:16:07.380 --> 02:16:10.360
 I'm sorry, Dave.

02:16:10.360 --> 02:16:12.660
 I can't do that.

02:16:12.660 --> 02:16:14.920
 Schade, schade.

02:16:14.920 --> 02:16:17.900
 Das ist es leider nicht, das hatten wir schon ausprobiert.

02:16:17.900 --> 02:16:23.520
 Ich weiß aber, ich habe aber glaube ich das Problem gelöst, dass das in Safari ein bisschen komisch aussieht.

02:16:23.520 --> 02:16:28.720
 Da muss ich nochmal drauf gucken, weil da ist, wenn man es nämlich animiert, sodass dieses Wow kommt, verschwindet.

02:16:28.720 --> 02:16:32.160
 bei diesen Zeichen, die animiert werden, der Glow.

02:16:32.160 --> 02:16:34.140
 Warum auch immer.

02:16:34.140 --> 02:16:37.040
 Das ist, glaube ich, so ein Safari-E-Bug.

02:16:37.040 --> 02:16:37.800
 Ja, muss ich gerade sagen.

02:16:37.800 --> 02:16:48.020
 Das Gute ist, der, also wir beide, also Konstantin und ich, wir haben das ja auch noch nie bemerkt als Windows-User.

02:16:48.020 --> 02:16:52.960
 Ja, ich benutze den Safari eigentlich auch nur zum Testen, ja und halt auf dem iPhone.

02:16:52.960 --> 02:16:55.800
 Da ist es halt sichtbar, da habe ich ja keine Wahl.

02:16:57.100 --> 02:17:19.200
 Aber gerne, also an dich, Shep, oder auch an alle Hörer und Hörerinnen, wenn ihr eine Idee habt, wie man bei uns diese Animation mit diesem Glow, bei WoWiRsen ist vorne auf der Startseite, wenn ihr, dass das performanter geht und nicht irgendwie die Seite in die Knie zwingt oder den Rechner in die Knie zwingt, gerne mal ein bisschen rumspielen.

02:17:19.380 --> 02:17:26.980
 Und wenn das irgendwie noch performanter geht und man da noch zwei Sachen hinschreiben kann oder irgendwas weglassen, dann gerne mal melden, weil da haben wir schon ein bisschen dran rumgedoktert.

02:17:26.980 --> 02:17:29.340
 Wir haben jetzt nichts, derzeit noch nichts gefunden.

02:17:29.340 --> 02:17:32.460
 Und wie gesagt, Backface Visibility Hidden ist da auch drauf.

02:17:32.580 --> 02:17:38.540
 Vielleicht muss man mal rumspielen, dass es vielleicht das falsche Element ist und da innen drin mal ein bisschen noch rum vorwerken, ja.

02:17:38.540 --> 02:17:40.980
 Ich schaue mir das auf jeden Fall mal an.

02:17:40.980 --> 02:17:42.780
 Also tatsächlich ist mir das auch aufgefallen.

02:17:42.780 --> 02:17:52.120
 Also wenn ich eure Seite aufmache, dann sobald das quasi aus der Sichtfläche gescrollt ist und der Browser das nicht mehr zeichnen muss, dann wird es halt deutlich flüssiger.

02:17:52.300 --> 02:17:55.360
 Also da hat er schon ein bisschen dran zu knapsen.

02:17:55.360 --> 02:18:01.880
 Also bei mir, ich höre es jetzt gerade wieder, ich hatte sie kurz auf und mein Rechner dreht den Lüfter hoch und ich mache sie zu und ein paar Sekunden später ist es wieder gut.

02:18:01.880 --> 02:18:13.580
 Ja, vielleicht ist es tatsächlich, vielleicht muss man auf die einzelnen Buchstaben gehen und da den Style, das Backface Visibility noch, weil das stimmt, das sind ja die Elemente, die animiert werden.

02:18:14.300 --> 02:18:17.440
 Es ist nur auf dem Parent der Zeit.

02:18:17.440 --> 02:18:19.920
 Ja, das wäre cool.

02:18:19.920 --> 02:18:24.440
 Also wenn du da mal drauf gucken könntest und da irgendwie eine Idee hast, sehr, sehr gerne her damit.

02:18:24.440 --> 02:18:26.740
 Ja, mache ich auf jeden Fall.

02:18:26.740 --> 02:18:40.880
 Genau und in den Shownotes oder vielleicht, je nachdem, ob du die reinmacht oder nicht, ich habe hier noch einen Link zu einem ziemlich alten YouTube-Video, wo aber auch nochmal so quasi erklärt wird, wie rendern Browser eigentlich,

02:18:41.680 --> 02:18:47.960
 wie painten die, dass sie so Kacheln vorgehen und das packen wir alles rein, auf jeden Fall.

02:18:47.960 --> 02:18:54.120
 Fand ich sehr, sehr cool, also damals und ist immer noch meine Referenz.

02:18:54.120 --> 02:19:06.840
 Genau, das sind so die Sachen, die wir jetzt, die so sozusagen zu unmittelbar, zu unserem, zu unserer Arbeit als Frontend-Menschen gehört.

02:19:07.980 --> 02:19:13.340
 Dann kann man noch so, gibt es noch so ein paar Kleinigkeiten, die wir noch so machen können, um so die letzten Register zu ziehen.

02:19:13.340 --> 02:19:19.140
 Also so Gatsby und Co. machen das, dass man so ein bisschen so preloadet und prefetched.

02:19:19.440 --> 02:19:29.880
 Wenn man jetzt irgendwie so denkt, ja, Leute, die, die irgendwie zum Beispiel mit dem Mauscursor so sich schon auf so einen Link zu bewegen, da könnten wir ja schon mal ein Prefetch starten,

02:19:30.740 --> 02:19:36.980
 so dass dann, wenn der Link geklickt wird, patsch, die nächste Seite einfach schon schneller da ist.

02:19:36.980 --> 02:19:41.960
 Da kann man so gerade so längere Serververarbeitungszeiten ganz gut mit verdecken.

02:19:44.160 --> 02:19:50.800
 Genau, also man, da gibt es auch eine Library, die heißt Quicklink, die genau das macht, die man einbinden kann.

02:19:50.800 --> 02:19:59.240
 Und neben dem Prefetchen gibt es noch die Möglichkeit im Chrome-Browser auf jeden Fall des Pre-Renderns.

02:19:59.440 --> 02:20:03.280
 Ich weiß nicht, ob ihr das noch kennt von früher, also ganz früher gab es das mal.

02:20:03.280 --> 02:20:16.520
 Da konnte man Link-Rel-Pre-Render machen und dann hat der Browser tatsächlich im Hintergrund die Seite gezogen und in einem quasi unsichtbaren Tab schon gerendert.

02:20:16.520 --> 02:20:17.900
 Und dann ausgetauscht.

02:20:17.900 --> 02:20:21.720
 Wir nutzen eine Library, die heißt Instant-Page.

02:20:21.720 --> 02:20:24.480
 Die andere, die du jetzt gesagt hast, wie ist die? Quicklink?

02:20:24.480 --> 02:20:26.080
 Genau, Quicklink.

02:20:26.160 --> 02:20:26.600
 Klang sehr ähnlich, ne?

02:20:26.600 --> 02:20:29.480
 Die kannte ich jetzt noch nicht, aber ich glaube, das macht genau das Gleiche.

02:20:29.480 --> 02:20:34.980
 Also einfach dieses Prefetch-Meta reinsetzen, sobald ich eine gewisse Zeit über einem Link mich aufhalte.

02:20:34.980 --> 02:20:38.200
 Genau, und da gibt es auch, auf Mobile hat man das ja nicht.

02:20:38.200 --> 02:20:42.920
 Da gibt es dann andere Strategien, zum Beispiel, dass man da auch wieder mit dem Intersection-Observer schaut,

02:20:42.920 --> 02:20:52.240
 kommt so ein Link gerade in den Viewport rein und dann lädt der eben all die Links, die jetzt gerade frisch in den Viewport reinkommen, die Prefetch da dann.

02:20:52.240 --> 02:20:55.960
 Ist vielleicht dann nicht ganz so effizient.

02:20:56.160 --> 02:21:02.880
 Aber irgendwie am Ende, wenn es hilft, manchmal hilft viel, viel.

02:21:02.880 --> 02:21:08.620
 Also kennst du das Instant-Page? Instant.Page, glaube ich, ist sogar die Seite davon.

02:21:08.620 --> 02:21:13.480
 Nee, aber das wird vielleicht so ein bisschen Richtung Turbolinks gehen und so Zeugs?

02:21:14.540 --> 02:21:17.460
 Nee, das ist tatsächlich das mit diesem Prefetching.

02:21:17.460 --> 02:21:18.720
 Okay.

02:21:18.720 --> 02:21:22.740
 Also das macht genau das, was Konstantin gerade gesagt hat.

02:21:22.740 --> 02:21:29.340
 Also sobald ich über einen Link haver, kriegt er das Prefetch-Attribut, wenn ich das richtig weiß.

02:21:29.340 --> 02:21:32.400
 Und das hat wohl auch eine Mobile-Strategie.

02:21:33.100 --> 02:21:39.480
 Und das ist so ein Fire-and-Forget-Skript, was man einfach in die Seite reinschmeißt und das macht er dann automatisch für alle Links.

02:21:39.480 --> 02:21:42.080
 Und das hat tatsächlich uns einiges an Performance gebracht.

02:21:42.520 --> 02:21:46.660
 Also ich habe hier einen Artikel gefunden, den schreibe ich mir auch mal auf die Shownotes.

02:21:46.660 --> 02:21:50.360
 Quicklink versus Instant-Page versus Flying-Pages.

02:21:50.360 --> 02:21:53.060
 Das ist eine Comparison, was die alles können.

02:21:53.060 --> 02:21:59.400
 Respect User-Connection Support Safari-Browser kann zum Beispiel Instant-Page nicht, kann aber Quicklink und Flying-Pages dafür.

02:21:59.880 --> 02:22:03.580
 Also generell hat Flying-Pages irgendwie alles grün und die anderen beiden haben ganz viel rot.

02:22:03.580 --> 02:22:05.960
 Ist das vielleicht ein Artikel von Team?

02:22:05.960 --> 02:22:12.280
 Stop-Peloading on Slow Response zum Beispiel und sowas.

02:22:12.280 --> 02:22:14.720
 Also da sind noch coole erweiterte Feature dabei.

02:22:14.720 --> 02:22:15.860
 Vielleicht müssen wir das mal austauschen.

02:22:15.860 --> 02:22:20.720
 Also ich schreibe es auf jeden Fall mal, habe es uns auch ins Trello gesetzt und kommt auch in die Shownotes.

02:22:20.720 --> 02:22:27.320
 Ich kann auf jeden Fall sagen, dass Instant-Page auf den Browsern, die ich normalerweise verwende, uns wirklich was gebracht hat.

02:22:27.320 --> 02:22:30.660
 Also so, ohne dass ich es jetzt gemessen habe, direkt so gefühlte Performance.

02:22:30.660 --> 02:22:32.760
 Ich klicke auf den Link und er ist einfach schneller da.

02:22:32.760 --> 02:22:38.880
 Allerdings im Zusammenspiel mit, wenn wir da jetzt gerade schon noch kurz hingehen, mit P-Jacks.

02:22:38.880 --> 02:22:50.060
 Also das ist ja so ein, das ist das, was du vorhin meintest, wo dann halt Richtung Turbolinks geht, dass da auch der Content ausgetauscht wird asynchron.

02:22:50.060 --> 02:22:52.900
 Aber halt auf normalen Links.

02:22:53.800 --> 02:22:58.740
 Und ich habe jetzt aber gemerkt, dass das verursacht dann doch einige Probleme, was Accessibility angeht.

02:22:58.740 --> 02:23:01.380
 So mit Fokus-Management eben.

02:23:01.380 --> 02:23:03.820
 Auch Usability.

02:23:03.820 --> 02:23:17.920
 Aber ich bin jetzt halt, weil ich mir jetzt mal jetzt genauer angeschaut habe, habe ich gemerkt, ja so gerade Fokus-Management und Scroll-Position mit Hashes und so, das ist so ein Ding.

02:23:18.000 --> 02:23:19.800
 Das geht mit dem nicht, genau.

02:23:19.800 --> 02:23:28.560
 Deswegen wollte ich auch mal fragen, ob du das kennst, also so Turbolinks-Ansätze, würdest du sagen, das findest du gut oder bringt das was aus deiner Sicht?

02:23:29.300 --> 02:23:43.580
 Ja, also ich glaube, wenn du das, ich glaube, wenn du die pre-geloaded hast in deinem Cache, dann ist es eigentlich egal, fast, also dann ist es wahrscheinlich genau gleich schnell.

02:23:44.620 --> 02:24:00.320
 Mit dem Unterschied, dass natürlich die klassische Seitennavigation barrierefreier ist erstmal, weil das so, damit kann halt jeder Mensch mit assistiven Technologien irgendwie was anfangen mit diesem Szenario.

02:24:01.140 --> 02:24:09.940
 Ich glaube, bei Turbolinks und Co., ich glaube, da würde ich wahrscheinlich mich nach einer Lösung umsuchen, umgucken, die vielleicht auch sowas wie Dom Diffing macht.

02:24:09.940 --> 02:24:30.480
 Ich glaube, dass die, beziehungsweise ich weiß nicht, ob die das vielleicht auch teilweise sogar machen, sodass je nachdem der Fokus eben da bleibt, wo er gerade ist und ich ihn dann vielleicht kontrolliert woanders hin lenken kann und aber nicht so dieses, ich zieh dir den Teppich unter den Füßen weg mäßige.

02:24:32.840 --> 02:24:44.000
 Ja, also wir haben das in erster Linie deswegen eingesetzt, weil wir einen Player auf der Seite haben und wir wollten, dass der weiterlaufen kann, wenn man auf der Seite navigiert, also mit einem Podcast-Player.

02:24:44.000 --> 02:24:50.420
 Das war der Hintergrund, warum wir das eigentlich gemacht haben, also weniger aus Performance-Gründen, sondern eigentlich Visibility an der Stelle.

02:24:50.420 --> 02:24:51.620
 Ja, das ist echt eine coole Idee.

02:24:51.620 --> 02:24:54.020
 Genau.

02:24:54.020 --> 02:24:55.740
 Das ist sehr gut.

02:24:56.240 --> 02:25:04.760
 Aber ich kann auf jeden Fall nur sagen, wer jetzt zum Beispiel P-Jacks benutzt oder Turbolinks, man holt sich damit eine Menge Probleme ins Haus, die man erst mal nicht sieht.

02:25:04.760 --> 02:25:09.000
 Erst mal sieht es total fancy aus, funktioniert, ich schmeiße da ein Skript rein, zack, alles super.

02:25:09.000 --> 02:25:13.100
 Aber ich habe schon einige Bugs gehabt, wo ich erst mal dachte, Mensch, was ist denn das?

02:25:13.100 --> 02:25:19.000
 Und dann guckt man in den Netzwerk, Tabs 6, ach stimmt ja, die Seite wird ja gar nicht komplett neu geladen, da wird ja nur ein Teil.

02:25:19.000 --> 02:25:25.480
 Und dann, also man zieht sich da mit einer Menge Probleme an Land, die erst mal unsichtbar sind, also mit Vorsicht zu genießen.

02:25:26.140 --> 02:25:36.040
 Gut testen mit allen möglichen Use Cases und auch mal mit dem Screenreader, Usability, ja, Accessibility, das muss man sich gut angucken und gut überlegen, ob man das will.

02:25:36.040 --> 02:25:37.400
 Ja.

02:25:37.400 --> 02:25:39.820
 Genau.

02:25:39.820 --> 02:25:45.860
 Genau, und wenn ihr dann völlig crazy seid, also es gibt auch noch, es gibt Pre-Render, da muss man nicht crazy sein.

02:25:45.860 --> 02:25:48.860
 Jetzt kommen die guten Sachen, völlig crazy, das klingt super.

02:25:48.860 --> 02:25:54.940
 Genau, das Pre-Render ist tatsächlich nicht mehr so crazy wie früher, das hatte nämlich wirklich ein paar Nachteile.

02:25:56.040 --> 02:26:08.620
 Ähm, ähm, ähm, das neue Pre-Render, das es jetzt wieder gibt, das arbeitet einfach so, dass es die, äh, die Seite zieht und da dann auch wiederum alle Ressourcen dieser Seite schon mal zieht.

02:26:08.860 --> 02:26:17.920
 Im Gegensatz zu Pre-Fetch, dass, das ja wirklich nur die eine verlinkte Ressource zieht und die dann nicht passt und durchsucht nach weiteren, äh, Ressourcen.

02:26:17.920 --> 02:26:34.440
 Das macht halt Pre-Render, das heißt also, wenn du ein HTML-Element, äh, pre-renderst, dann, äh, gibt's auch da wieder diesen Ressourcenscanner, der darüber, äh, hechelt und der dann noch die ganzen anderen Sachen einsammelt, also Bilder und so, die dann noch dazugehören.

02:26:34.440 --> 02:26:38.720
 Ähm, das zusammenbauen, das findet dann erst statt nach der Navigation.

02:26:40.440 --> 02:26:51.940
 Genau, und das alte Pre-Render hat ja wirklich im Hintergrund alles schon fertig gemacht, da, äh, wurde, äh, wenn du das falsche, äh, Tracking-Skript hattest, dann schon ein Besuch getrackt und all so Kram.

02:26:51.940 --> 02:26:56.480
 Ähm, ähm, und, und das hat halt auch, äh, ordentlich, ist auch ordentlich auf die Batterie gegangen.

02:26:59.560 --> 02:27:04.920
 Hilf mir mal kurz, ich hab das grad kurz gegoogelt, ähm, ist das der Link-Type-Pre-Render?

02:27:04.920 --> 02:27:06.680
 Genau, ja.

02:27:06.680 --> 02:27:09.420
 Also, äh, Link-REL-Pre-Render.

02:27:09.420 --> 02:27:17.840
 Ja, genau, ich mein, ja, das, äh, das ist, äh, ja, und der MDN heißt es Link-Types-Pre-Render, ja, genau, mit REL-Attribut, äh, REL-Pre-Render, okay, alles klar.

02:27:18.980 --> 02:27:22.060
 Okay, das ist nur fürs Link-Element, wenn ich das jetzt richtig sehe.

02:27:22.060 --> 02:27:24.400
 Okay, alles klar.

02:27:24.400 --> 02:27:25.800
 Dankeschön.

02:27:25.800 --> 02:27:35.280
 Genau, und das, das, was, äh, was ich schon geteasert hatte als, äh, komplett crazy, das, äh, das ist ein, äh, ein Konzept, das nennt sich, äh, Speculative-Pre-Fetching.

02:27:35.280 --> 02:27:45.900
 Und, äh, da speist du entweder in Echtzeit oder beim Bauen, wenn du einen statischen Seiten-Generator hast, Daten von Google Analytics in deinen, äh, Bild-Prozess rein.

02:27:46.760 --> 02:27:57.480
 Und, äh, du sagst dann, okay, typischerweise, äh, Besucher, die diese Seite besuchen, die gehen zu, in großen Teilen danach zu der Seite und zu der und zu der Seite.

02:27:57.480 --> 02:27:59.380
 Da brauche ich halt quasi.

02:27:59.380 --> 02:28:01.120
 Kunden, die die es kauften, kauften auch.

02:28:01.120 --> 02:28:02.040
 Genau.

02:28:02.040 --> 02:28:08.880
 Und, äh, die entsprechenden Pre-Fetches, die backst du dann eben mit in diese Seite rein.

02:28:08.880 --> 02:28:10.280
 Genau.

02:28:10.280 --> 02:28:15.960
 Und da gibt's auch einen ganz schönen Vortrag, den, wo ich hier auch einen Link hab und eine Library, die heißt, äh, Guess.

02:28:16.760 --> 02:28:18.680
 Einfach nur Guess.

02:28:18.680 --> 02:28:31.400
 Die den Umgang mit, äh, mit Google Analytics Daten auch für uns, also mit der API für uns, äh, Frontend-Lurche ein bisschen einfacher machen.

02:28:33.280 --> 02:28:36.000
 Das finde ich tatsächlich, das ist, das ist wirklich abgefahren.

02:28:36.000 --> 02:28:39.500
 Ich hab jetzt gedacht, jetzt kommt irgendwas, was ich jetzt mal eben einbaue, da bin ich mir jetzt nicht so sicher.

02:28:39.500 --> 02:28:41.460
 Das finde ich tatsächlich auch, äh, wirklich crazy.

02:28:41.460 --> 02:28:48.140
 Aber eine interessante Idee, also gerade so für, ich könnte mir das super vorstellen, für so richtig große Shopping-Seiten oder so was.

02:28:48.140 --> 02:28:55.000
 Ähm, äh, also irgendwas, irgendwas, wo es wirklich eine Rolle spielt, wo es wirklich viele Navigationsmöglichkeiten gibt.

02:28:55.760 --> 02:28:58.100
 Ähm, dass das echt was bringen kann.

02:28:58.100 --> 02:29:01.640
 Aber ich weiß nicht, jetzt so für unsere kleine Podcast-Seite ist das wahrscheinlich eher nix.

02:29:01.640 --> 02:29:03.520
 Klingt erstmal nicht so.

02:29:03.520 --> 02:29:06.560
 Also klingt nach zu viel Aufwand für zu wenig, äh, Nutzen.

02:29:06.560 --> 02:29:10.460
 Ich hab schon gedacht, einen Kandidaten im Hinterkopf, eine Seite von einem Kunden.

02:29:10.460 --> 02:29:17.960
 Ja, oder eine große, eine große News-Seite, irgendwas, wo, wo du in eine Million Richtung navigieren kannst und da dann auch viel Content, äh, dahinter steckt.

02:29:17.960 --> 02:29:24.560
 Irgendwie eine Seite halt mit, mit, mit 20 Bildern dann und, äh, wenn du woanders hingehst, dann irgendwie noch was anderes und Diagramme, keine Ahnung was.

02:29:24.560 --> 02:29:28.020
 Kann ich mir schon vorstellen, dass es echt was bringt, aber ich glaub für uns erstmal nicht.

02:29:28.020 --> 02:29:28.700
 Ja, cool.

02:29:30.660 --> 02:29:40.940
 Genau, ist auf jeden Fall, äh, genau, es ist cool und macht irgendwie Spaß, äh, so, äh, so, die, den Gedankengängen da zu folgen, braucht man wahrscheinlich nicht.

02:29:40.940 --> 02:29:44.380
 Ja, aber interessant, äh, auf was für Ideen die so kommen, ne?

02:29:44.380 --> 02:29:45.360
 Also, äh, ja.

02:29:45.360 --> 02:29:56.000
 Ich weiß gar nicht, ob ich da jetzt drauf gekommen wäre, äh, irgendwie so, so Analytics-Daten, äh, in mein, äh, Pre-Fetching oder Pre-Rendering mit, mit einzubinden und das ist eigentlich ein ziemlich guter Gedanke.

02:29:56.000 --> 02:30:12.860
 Ja, ich hab ja die These, dass das, äh, alles, dass das sind, äh, Leute, die, äh, neue Themen für neue Talks auf Performance-Konferenzen brauchen und die dann irgendwie, äh, so die wildesten Ideen durchspielen, bis dann so, ah ja, da könnte ich jetzt aber mal einen Vortrag zu machen.

02:30:15.360 --> 02:30:23.160
 Genau. Ja, das war's jetzt so, äh, von, von uns Frontend, äh, so, so aus unserem Frontend-Kosmos.

02:30:23.160 --> 02:30:31.760
 Jetzt, äh, wäre die Frage, ob ihr noch irgendwie ganz kurz über das HTTP-Protokoll reden wollt, da gibt's jetzt auch nicht ganz so viel zu sagen, das können wir ja auch schnell zusammenfassen.

02:30:31.760 --> 02:30:32.420
 Ja, klar.

02:30:32.420 --> 02:30:45.220
 Oder ob's, äh, genau, also, ähm, so, ich, ich glaube, so gang und gäbe ist ja jetzt so, würde ich sagen, HTTP 2, das hat jetzt ja dann doch, das endlich mal geschafft hat,

02:30:45.220 --> 02:31:09.540
 HTTP 1, 1.1 abzulösen, was der Vorgänger war und so jetzt im, im Aufwind, äh, oder das nächste große Ding ist, äh, HTTP 3, ähm, und, äh, genau, die, die Frage ist, also, was, äh, was hat, äh, oder was, warum braucht man 3, was hat eigentlich 2 cooler gemacht, was 1 nicht konnte?

02:31:09.540 --> 02:31:22.600
 Und, äh, und, äh, grob zusammengefasst, also, eins stammt halt noch aus den 90ern, das ist so quasi so das Fundament von, von Tim Burner, Burners Lees erste HTML-Seite so ungefähr, also, da war es 0.9.

02:31:23.360 --> 02:31:37.280
 Und, äh, die haben einfach, äh, das Protokoll gar nicht, äh, ersonnen, um, um unsere Use Cases von heute mit, äh, teilweise über 100 Requests pro einzelner Seite eben bedienen zu können.

02:31:37.280 --> 02:31:44.700
 Und, äh, das, äh, das hat einfach an allen Ecken und Enden dann, äh, angefangen, übelst, äh, zu, zu klemmen.

02:31:44.700 --> 02:31:56.820
 Und, äh, genau, darum, äh, gab's eben, wurde HTTP 2 damals unter dem Namen, ähm, Speedy-Protokoll von, von Google ersonnen.

02:31:57.480 --> 02:32:03.980
 Ähm, und dann zusammen mit eben den entsprechenden anderen Beteiligten, äh, standardisiert.

02:32:03.980 --> 02:32:19.720
 Und, ähm, genau, und dass es HTTP 3 gibt, liegt, äh, daran, dass, äh, HTTP 2 viele gute Ideen hatte, aber manche von denen sich einfach nicht tatsächlich in der Praxis umsetzen ließen.

02:32:19.720 --> 02:32:45.180
 Äh, äh, und, äh, das hat, äh, damit zu tun, dass, ähm, HTTP 2 über TCP läuft, genau wie das HTTP 1, und, ähm, TCP ist, ähm, ein relativ, äh, sagen wir mal, äh, overgemanagetes Protokoll, das der Netzwerkstack des Betriebssystems sozusagen unter seinen Fittichen hat.

02:32:45.760 --> 02:32:53.980
 Und, äh, äh, das heißt, also ein großer Teil des, äh, des Ablaufes, äh, liegt nicht so in der Hand der, der Web-Server.

02:32:53.980 --> 02:33:02.540
 Die müssen das wegdelegieren ans Betriebssystem, und, äh, wenn das, ähm, wenn der Netzwerkstack vom Betriebssystem schlecht programmiert ist,

02:33:02.540 --> 02:33:12.460
 oder wenn das irgendwie andere Vorstellungen hat davon, wie TCP laufen muss, dann, äh, gehen ganz viele der, der Features von HTTP 2 auch kaputt.

02:33:13.460 --> 02:33:31.320
 Ähm, ähm, also zum Beispiel, äh, was ein Problem ist, ist halt, ähm, dass, dass da auch so Buffer gibt, äh, und wenn die, wenn die Buffer, äh, voll sind, dann, und der, äh, das System merkt so, ah, jetzt würde ich aber gerne eine andere Datei senden,

02:33:31.480 --> 02:33:37.080
 Dann geht das nicht mehr, weil erst mal muss dieser Buffer, der da schon da ist, der muss dann erst mal abgearbeitet werden.

02:33:37.080 --> 02:33:39.960
 Das nennt man dann so, äh, First-in-Line-Blocking.

02:33:39.960 --> 02:33:50.280
 Das heißt, man hat dann irgendein Deppen, so irgendein Datenpaket, der vorne steht, den eigentlich keiner mehr haben will, aber der steht schon da, der wurde schon auf die Rampe draufgeschnallt und wird gleich verschossen.

02:33:50.280 --> 02:33:59.640
 Ähm, und daran lässt sich auch nichts mehr ändern. Ähm, und deswegen hat man gesagt, nee, TCP ist irgendwie doof.

02:34:00.200 --> 02:34:23.120
 Das, äh, lasst uns auf UDP wechseln. Äh, das ist zwar, bei UDP gibt's halt keine Garantien, dass irgendwie Pakete ankommen und so, das ist, äh, wirklich so sehr barebone-mäßig unterwegs, ähm, aber der Vorteil ist halt, dass die HTTP-3-Implementierungen, ähm, sehr viel Freiheiten haben, wie sie, was sie dann da on top noch machen.

02:34:23.120 --> 02:34:29.580
 Und die rüsten dann selber so Dinge nach, dass die eben gewährleisten, dass wirklich auch alle Datenpakete ankommen.

02:34:29.580 --> 02:34:35.560
 Alles, was UDP eben nicht macht und dafür ist halt der Teil, der im Betriebssystem implementiert ist, sehr schlank.

02:34:35.560 --> 02:34:46.440
 Ähm, und im Prinzip ist es so, dass HTTP-3 gar nicht so viel andere Features hat als HTTP-2, aber die eben einfach auf die Straße kriegt.

02:34:46.440 --> 02:34:53.100
 Ähm, und deshalb ist das sozusagen die ideologische Fortführung von HTTP-2.

02:34:53.120 --> 02:34:57.320
 Und deswegen kam's ja auch relativ, äh, kurz nach dem anderen.

02:34:57.320 --> 02:35:01.620
 Also, so lange ist ja HTTP-2 noch gar nicht so etabliert.

02:35:01.620 --> 02:35:01.800
 Ja.

02:35:01.800 --> 02:35:09.700
 Und, äh, wenn man, wenn man kann, dann sollte man entsprechend auch auf HTTP-3, ähm, wechseln.

02:35:09.700 --> 02:35:14.260
 Das wird auch von allen gängigen Browsern unterstützt, wenn ich das so richtig im Kopf hab.

02:35:15.600 --> 02:35:20.320
 Genau, und, äh, ja, wir es jetzt schon haben.

02:35:20.320 --> 02:35:20.980
 Gerade mal geschaut.

02:35:20.980 --> 02:35:24.100
 Safari, mal wieder Experiment, Experimental Feature.

02:35:24.100 --> 02:35:32.560
 Ja, gut, aber das, das ändert ja nichts daran, dass der, äh, dass der, ähm, der Servers anbieten kann.

02:35:32.860 --> 02:35:33.500
 Ja, also.

02:35:33.500 --> 02:35:34.880
 Ja, klar.

02:35:34.880 --> 02:35:35.460
 Ja, genau.

02:35:35.460 --> 02:35:37.420
 Also, das ist ja tatsächlich, da geht ja nichts kaputt.

02:35:37.420 --> 02:35:45.440
 Ähm, und, äh, ich hab jetzt grad mal geguckt, Podcast-Seite, ähm, eigentlich alle Requests über HTTP-2 immerhin.

02:35:45.440 --> 02:35:51.480
 Aber da kannst du deinen, kannst du unseren Hoster auch mal, nochmal anhauen und sagen, was ist denn mit drei hier?

02:35:51.540 --> 02:35:58.800
 Die da schon soweit sind, ich mein, ich weiß ja nicht, was euer Hoster ist, aber ich glaube, das ist für viele noch so ein bisschen, bisschen too much.

02:35:58.800 --> 02:36:08.800
 Bei einem, bei einem kleinen Hoster, der, äh, schon auch auf, auf spezielle Wünsche eingeht und so, also den kann ich schon mal anhauen und sagen, hey, wie schaut's denn aus, kannst du das nachrüsten oder so?

02:36:08.800 --> 02:36:10.020
 Okay.

02:36:10.020 --> 02:36:10.720
 Das ist schon ganz gut.

02:36:10.720 --> 02:36:12.580
 Ja, das klingt gut.

02:36:12.660 --> 02:36:26.240
 Ich guck mal, was Uberspace macht, ähm, ja, auch HTTP-2, ja, und bei denen ändert sich, wenn die sowas mal haben, ähm, erfahrungsgemäß, äh, mit ihren CentOS-Kisten erst mal lange nix.

02:36:26.240 --> 02:36:34.220
 Ich weiß nicht, ob die da so ein Modul dann mal nachinstallieren, aber immerhin HTTP-2, das ist ja auch schon mal viel besser als 1.1 war, glaub ich, vorher, gell?

02:36:34.220 --> 02:36:35.860
 Ja, genau.

02:36:35.860 --> 02:36:39.440
 Ja, nee, ist schon so ein riesen, äh, Zugewinn.

02:36:39.440 --> 02:37:00.100
 Ich, ähm, hab da auch noch einen älteren Vortrag, den, den wir auch mal verlinken können, den man auch, äh, ohne mich, äh, da quatschen zu hören, eigentlich ganz gut, äh, so durchgehen kann, die Slides, und da wird, da, da wird einem nochmal klar, so, was, was sind halt so einfach die, die Vorteile von HTTP-2 und eben dann natürlich auch HTTP-3, genau.

02:37:00.100 --> 02:37:04.920
 Ist das der HTTP-Headers-The-Hidden-Champions-Vortrag?

02:37:04.920 --> 02:37:07.560
 Äh, nee, das ist, äh, oder ist das ein anderer?

02:37:07.560 --> 02:37:07.880
 Okay.

02:37:08.840 --> 02:37:18.000
 Genau, die sind, der ist auch okay, der Vortrag, genau, aber den, den ich hier gerade in den Chat, in den Jitsi-Chat geworfen hab, der ist das.

02:37:18.000 --> 02:37:20.380
 Okay.

02:37:20.380 --> 02:37:22.800
 Haben wir noch was?

02:37:22.800 --> 02:37:31.900
 Nee, sonst, äh, weiß ich nicht, was, was, äh, was fällt euch noch ein? Also, vielleicht noch irgendwie ...

02:37:31.900 --> 02:37:34.200
 Ich weiß gar nicht, ich glaube, Caching hatten wir noch nicht.

02:37:35.340 --> 02:37:47.720
 Ja, da würde ich einfach mal verweisen auf den, auf einen sehr coolen, langen Artikel vom Harry Roberts auch, der hat die da alle mal abgehandelt, da müsste ich mal den Link nochmal raussuchen.

02:37:49.000 --> 02:38:12.880
 Ähm, ähm, genau, ähm, ja, äh, letztlich, ähm, Cache-Control-Header setzen, die, diese Expires-Header, das ist ja so oldschoolig, der, das merkt man auch daran, dass der Expires-Header, äh, nicht nur das Datum wissen will, wann eine Ressource expiert, sondern auch tatsächlich dann noch von dir den Wochentag wissen möchte.

02:38:13.040 --> 02:38:22.100
 Den musst du dann auch mit übermitteln. Ähm, genau, und der Cache-Control-Header, das ist so der, der Header, der, der da irgendwie wichtig ist.

02:38:22.640 --> 02:38:49.080
 Und da gibt's so verschiedene Settings, die du da setzen kannst, also tatsächlich relativ viele, äh, manche, die ein Caching tatsächlich unterbinden, was du vielleicht machen möchtest, wenn du eine Seite hast, die vielleicht deinen Account-Daten von dem User anzeigt, und du möchtest halt nicht, dass die in, äh, irgendwelchen Proxy-Caches gecached werden auf dem Weg, dann sagst du, nee, diese Seite bitte auf gar keinen Fall cachen irgendwo.

02:38:49.080 --> 02:39:00.280
 Und dann gibt's eben, äh, äh, äh, zum Beispiel könntest du auch schreiben Immutable, das ist das Gegenteil davon, das heißt also, diese Seite wird sich niemals ändern.

02:39:00.280 --> 02:39:09.440
 Nie, nie, nie, niemals. Du musst, Browser, du brauchst die nie wieder anfragen. Ähm, der wird allerdings, glaube ich, nur von Firefox unterstützt.

02:39:10.140 --> 02:39:25.600
 Genau, und für alle anderen würdest du, ähm, ähm, einen Max-H-Wert setzen, der halt einfach sehr groß ist, also zum Beispiel ein Jahr, das ist dann, das ist dann ja auch so ungefähr so, wie, wie wenn der für immer, äh, gelten würde.

02:39:26.140 --> 02:39:38.000
 Und dann gibt's noch einen ganz schönen Header, der ist, äh, vielleicht interessant für, für Leute, die so dynamisch per PHP, äh, äh, äh, genammerte Content-Seiten haben.

02:39:38.660 --> 02:39:59.720
 Da hat man das ja manchmal so, dass die, äh, serverseitig auch eingestellt sind, so nach fünf Minuten, bitte, nimm, nimm nicht mehr den Cache, sondern rendere die neu, ähm, also da wird quasi der Cache, äh, leer gemacht, sobald ein User nach dieser gecacheden Zeit dann die nächste Anfrage macht.

02:40:00.420 --> 02:40:07.460
 Aber das führt dazu, dass eben diese Seite dann erstmal neu generiert wird und für diesen einen User, die Userin, eben die Antwort einfach länger dauert.

02:40:07.460 --> 02:40:28.520
 Und da kann man, äh, sagen, äh, Cache Control und dann stale while revalidated und das bedeutet, ähm, die, äh, also, äh, nimm erstmal das Alte und, äh, dann beim nächsten Mal fragst du, fragst du erstmal, fragst du nochmal an und dann kriegst du die neuere Version.

02:40:29.800 --> 02:40:32.500
 Hm, ja, okay.

02:40:32.500 --> 02:40:44.260
 Ähm, was wir auf jeden Fall an Caching noch haben, ein ganz anderes Caching, du hast jetzt, äh, Browser-Caching, vom Browser-Caching gesprochen und wie man, ähm, das, wie man das, äh, quasi einrichten kann.

02:40:44.260 --> 02:40:56.160
 Was wir noch machen bei uns, bei unserer Podcast-Seite ist, äh, ein, ein Caching der Seiten quasi, also wir, wir hinterlegen, äh, statische HTML-Seiten, ähm, für die Inhalte.

02:40:56.700 --> 02:41:14.500
 Also eigentlich hängt hinten, hinten dran ein WordPress, das eigentlich dynamisch, äh, die Seiten zusammengeneriert, äh, da sich da aber nicht, nicht besonders viel ändert, ähm, haben wir da, äh, ein Caching-Plugin und das macht, das macht schon performance-mäßig auch echt viel aus, äh, wenn man da einfach nur das HTML rüberschieben muss.

02:41:14.900 --> 02:41:28.460
 Das muss man immer aufpassen, wenn man was dran verändert, dass man dann mal, da kann man drüber stolpern, ich sag's mal so, dass man dann denkt, wo ist denn eigentlich mein Change, ah, ich muss den Cache nochmal leeren, äh, dass das alles nochmal neu gebaut wird.

02:41:29.500 --> 02:41:32.020
 Ist das dieses, äh, W3-Total-Cache, was ihr benutzt?

02:41:32.020 --> 02:41:34.480
 Das haben wir bei uns.

02:41:34.480 --> 02:41:35.400
 Moment, ich weiß gar nicht, welches.

02:41:35.400 --> 02:41:36.140
 Also wir haben ja auch ein WordPress.

02:41:36.140 --> 02:41:37.680
 Warte.

02:41:37.680 --> 02:41:41.800
 Äh, äh, das ist ja so relativ bekannt.

02:41:41.800 --> 02:41:46.360
 Ähm, wir haben, wir hatten verschiedene, wir haben WP-Super-Cache.

02:41:47.320 --> 02:41:57.860
 Und das Total-Cache hatten wir auch, aber ich glaube, da gab's ein Problem, ähm, oder wir hatten ein vermeintliches Problem, was, glaub ich, dann gar nicht damit zusammenhing, wegen der verschwundenen, äh, Impressums-Links und so.

02:41:57.860 --> 02:42:00.060
 Ach so, ja, das kann sein, dass wir das ...

02:42:00.060 --> 02:42:02.020
 Aber das lag dann irgendwie doch an einem anderen Plugin, glaub ich.

02:42:02.020 --> 02:42:04.220
 Mittlerweile wissen wir, dass es an Podlove selbst liegt.

02:42:04.220 --> 02:42:05.920
 Stimmt, Podlove war's.

02:42:05.920 --> 02:42:17.060
 Also es liegt an Podlove, äh, das ist ein bekanntes Problem, aber im Zusammenspiel mit anderen Plugins, das ist ein ganz verrücktes Problem, was, ich glaub ich, äh, weiß ich nicht, ob sie es mittlerweile, äh, gelöst haben, aber ich kann mich erinnern, dass ich,

02:42:17.060 --> 02:42:40.420
 als ich bei denen zu Gast war, da gab's das Problem auf jeden Fall noch, ähm, genau, aber ja, genau, WP-Super-Cache und, äh, funktioniert eigentlich echt gut und, äh, ist schlank irgendwie und tut alles, was wir so brauchen und das hat auch echt einen großen Performance-Gewinn gebracht, so, also auch in der gefühlten Performance, die ist mir immer sehr wichtig, also, dass ihr so einen Link klickt und dass das irgendwie snappy anfühlt.

02:42:40.420 --> 02:42:41.360
 Ja.

02:42:41.360 --> 02:42:45.100
 Ja, nee, das stimmt, das bei euch, das flutscht.

02:42:46.800 --> 02:43:10.800
 Ja, und es ist natürlich jetzt auch eine Frage, die, die, die, vielleicht müssen wir das mal analysieren, warum denn eigentlich genau, also können wir da was rausnehmen, was wir jetzt an Technologien, ich würde sagen, es sind so drei Dinge, die bei uns zusammenspielen, das ist einmal das, äh, was ich gerade gesagt hab, das, das HTML-Caching, dass wir die HTML-Files statisch hinterlegen, ähm, dann, äh, das Instant-Page und dieses P-Jacks, das eben, ähm, asynchron nachlädt.

02:43:10.800 --> 02:43:22.400
 Und du hast ja jetzt vorhin schon gesagt, naja, das P-Jacks, vielleicht macht das gar nicht so viel aus. Das wäre was, wäre ein Test, den ich gerne mal fahren würde. Ich habe ja gesagt, wir haben das nicht deswegen eingebaut, sondern damit der Player weiter abspielen kann.

02:43:22.800 --> 02:43:35.200
 Aber trotzdem würde es mich mal interessieren, ob das vielleicht gar nicht notwendig wäre, dann würden wir vielleicht, kann man vielleicht über eine andere Lösung mit dem Player irgendwie mal nachdenken, weil das ist, äh, das macht mir gerade Ärger an verschiedenen Stellen, das Ding.

02:43:35.200 --> 02:43:52.820
 Okay. Es gibt ja diese Media-Session-API, glaube ich, also wo ihr zumindest auf, äh, Mobilgeräten, äh, könnt, kann man damit quasi eine Audiodatei ans Betriebssystem wegdelegieren und ich glaube, das überlebt eben auch Seitenwechsel, äh, meine ich.

02:43:52.820 --> 02:43:56.440
 Media-Session-API, meine Güte.

02:43:56.440 --> 02:44:03.680
 Das ist auch immer sowas gelesen, wo wir das, dass wir auch mal irgendwie, hey, das müssten wir da eigentlich mal machen und dann haben wir uns halt wieder hingelegt.

02:44:03.680 --> 02:44:09.300
 Aber wahrscheinlich muss das dann der, der Player auch unterstützen, ne? Da können wir wahrscheinlich nicht einfach irgendwie einsapfen.

02:44:09.300 --> 02:44:12.760
 Tja, dann machen wir mal Feature-Request, ich kenne die Leute.

02:44:12.760 --> 02:44:20.520
 Sag ich, hey, hier, Potlov-Player, mach doch, mach doch, bau das doch mal ein, das wäre doch super.

02:44:20.520 --> 02:44:24.040
 Machen wir nur großzügige Spende hintendran.

02:44:26.440 --> 02:44:31.440
 Ja, so einen 100-Euro-Schein reinlegen als Lesezeichen von E-Mail.

02:44:31.440 --> 02:44:34.040
 So ein paar Bitcoins.

02:44:34.040 --> 02:44:35.460
 Ja.

02:44:35.460 --> 02:44:41.780
 Scheine, das kennt doch heutzutage schon keiner mehr von den fancy Leuten, da muss doch irgendwie, muss irgendwie was Digitales sein.

02:44:41.780 --> 02:44:46.460
 Ja, meine Kinder wollen auch keine Scheine haben, die wollen immer Geld, Münzen haben.

02:44:46.460 --> 02:44:50.620
 Die sind halt total enttäuscht, wenn ich denen irgendwie im Schein da vor der Nase wedle.

02:44:52.180 --> 02:45:02.940
 Münzen sind ja auch so aus, aus, auf lange Sicht, wenn dann irgendwann die Apokalypse kommt, glaube ich, das Beste, weil da hast du wenigstens noch irgendwie Edelmetall rumliegen, alles andere kannst du vergessen.

02:45:04.400 --> 02:45:06.280
 Ich glaube, das ist auch, denke ich, deren Gedanke.

02:45:06.280 --> 02:45:08.160
 Ja, genau.

02:45:08.160 --> 02:45:10.260
 Wie Kinder halt so sind.

02:45:10.260 --> 02:45:11.920
 Ja, ja, genau.

02:45:11.920 --> 02:45:20.280
 Ich kann aber schon verstehen, also, ich versuche jetzt mal, mich in mein kindliches Ich rein zu versetzen, das haptische Erlebnis ist bei Münzen das Geilste.

02:45:20.280 --> 02:45:20.560
 Ja, klar.

02:45:21.020 --> 02:45:26.380
 So, das ist irgendwie schwer und das kann ich irgendwo hinwerfen und das macht Geräusche, wenn man mehrere hat und das klappert irgendwie.

02:45:26.380 --> 02:45:28.540
 Das ist viel interessanter als ein Schein, also auf jeden Fall.

02:45:28.540 --> 02:45:32.700
 Ja, und so eine Piratenschatzkiste mit Scheinen ist ja irgendwie auch Käse, ne?

02:45:32.700 --> 02:45:36.920
 Ja, das sieht natürlich mit Münzen viel besser aus, keine Frage, ja, auf jeden Fall.

02:45:36.920 --> 02:45:39.820
 Und es glitzert und das ist ja schon, das ist schon gut.

02:45:39.820 --> 02:45:49.880
 Da hat man vielleicht sogar, und es gibt ja jetzt, gab es ja früher bei der D-Mark nicht, jetzt kommen die Opas vom Krieg und so, aber wir haben ja Münzen, die zwei verschiedene Farben haben in einem.

02:45:49.880 --> 02:45:51.260
 Wie verrückt ist das denn?

02:45:51.260 --> 02:45:55.920
 Und das ist schon auf jeden Fall spannender als so ein komischer, schnöder Schein.

02:45:55.920 --> 02:45:57.040
 Ja.

02:45:57.040 --> 02:45:59.360
 Ne, so ist es auch.

02:45:59.360 --> 02:46:06.900
 Okay, ich habe noch eine kleine Sache, wo ich einfach fragen wollte, ob du das schon mal ausprobiert hast, weil ich habe gerade noch mal geschaut und das ist so gut wie gar nicht.

02:46:06.920 --> 02:46:14.240
 unterstützt, aber es ist auch so ein Performance-Thema, gerade auf Mobile Devices vielleicht, und zwar Prefers Reduced Data.

02:46:14.240 --> 02:46:15.720
 Hast du damit schon mal rumgespielt?

02:46:15.720 --> 02:46:18.840
 Ja, habe ich tatsächlich schon gemacht.

02:46:18.840 --> 02:46:36.520
 Und zwar bei der rheinischen Post-Seite, da schalte ich das Werbung-Laden ab, wenn du mit einer langsamen Verbindung auf die Seite kommst, damit, wenn du da irgendwie irgendwo in der Wallachei sitzt,

02:46:36.920 --> 02:46:41.880
 und News lesen willst, weil die Werbung würde ja auch dann sowieso nicht mehr durchkommen.

02:46:41.880 --> 02:46:42.860
 Ja.

02:46:42.860 --> 02:46:53.240
 Insofern kann ich dann auch einfach sagen, okay, komm, lass das mit der Werbung einfach sein, dann können wir wenigstens die eine der zwei Teile laden.

02:46:54.040 --> 02:46:54.480
 Genau.

02:46:54.480 --> 02:46:58.620
 Also als PM würde ich jetzt sagen, warum nicht nur die Werbung laden und die News weglassen?

02:46:58.620 --> 02:47:00.940
 Ja, das stimmt wohl.

02:47:00.940 --> 02:47:03.740
 Du hast zu lange bei der falschen Firma gearbeitet, tut mir leid.

02:47:03.740 --> 02:47:05.140
 Ja.

02:47:07.520 --> 02:47:18.080
 Ja, würde mich auch nicht wundern, wenn die Werber das mit dem Augenzwinkern, das nicht nur ganz humoristisch gemeint ist, auch mal fragen würden, tatsächlich, ja.

02:47:18.080 --> 02:47:26.680
 Aber es ist, glaube ich, noch nirgends ohne Flag angeschaltet, wenn die Daten bei Can I Use stimmen.

02:47:26.900 --> 02:47:32.060
 Also Edge und Chrome hinterm Flag und alle anderen noch gar nicht, also.

02:47:32.060 --> 02:47:33.700
 Ja.

02:47:33.700 --> 02:47:42.640
 Ich habe nicht die Media Query benutzt, die du jetzt hier gerade vor dir offen hast, sondern es gibt ja die Network API in den Chrome-Browsern.

02:47:42.640 --> 02:47:43.980
 Die gibt es ja schon ziemlich lange.

02:47:44.700 --> 02:47:58.980
 Ja, und da, man kann auch über Clientins, wenn man die aktiviert, also das Clientins sind dann so, die kann man anfordern und dann sagt man, Browser schickt mir als HTTP-Header deine Verbindungsgeschwindigkeit von nun an.

02:47:58.980 --> 02:48:06.260
 Genau, aber ich habe die JavaScript API genutzt, weil die Werbung ja sowieso über JavaScript dann initialisiert wird.

02:48:06.260 --> 02:48:20.080
 Und da gibt es die Save-Data-Property und wenn die eben, ich weiß nicht, ob die True ist oder 1, dann sage ich, nee, Quatsch, bei Save-Data, doch, eventuell da auch.

02:48:20.080 --> 02:48:31.200
 Und ich sage Effective Connection Type, wenn der irgendwie 2G ist oder Slow 3G, dann lass das einfach sein mit der Werbung.

02:48:31.200 --> 02:48:34.960
 Genau, und das soll jetzt auch als Media Query kommen.

02:48:36.100 --> 02:48:46.820
 Genau, weil ich habe jetzt tatsächlich nur CSS Media Query gemeint, aber stimmt, ich erinnere mich, dass ich damit auch in der Vergangenheit mal was zu tun hatte, wo es um Performance-Messungen ging.

02:48:46.820 --> 02:48:53.960
 Da ging es, glaube ich, um, wollen wir unter bestimmten Netzwerkbedingungen denn Videos überhaupt anbieten, zum Beispiel.

02:48:53.960 --> 02:49:02.640
 Ja, stimmt, also es gibt so viele APIs, es ist einfach so unübersichtlich, aber das ist tatsächlich was, was man sich mal anschauen kann.

02:49:02.640 --> 02:49:08.700
 Finde ich tatsächlich interessant, dass man im Browser Informationen bekommen kann über die aktuelle Verbindung.

02:49:08.700 --> 02:49:12.940
 Das ist auf jeden Fall sehr, unter Umständen, je nachdem, was man baut, ein sehr mächtiges Tool.

02:49:12.940 --> 02:49:15.980
 Man kriegt, glaube ich, eh viel zu viele Informationen.

02:49:15.980 --> 02:49:18.760
 Das ist ja auch schon fast das Privacy-Ding.

02:49:18.760 --> 02:49:21.360
 Genau, das ist auch tatsächlich der Grund, warum.

02:49:21.360 --> 02:49:38.280
 Ja, die Firefox-Menschen und die Safari-Menschen, die, die haben auch abgelehnt, das zu implementieren, eben weil, einfach mit zunehmender Menge Daten, die halt, die sich auch vielleicht von Gerät zu Gerät unterscheiden, kann man, kann man dich halt tracken.

02:49:38.340 --> 02:49:42.460
 Und die versuchen das so ein bisschen, cool ist das natürlich egal.

02:49:42.460 --> 02:49:58.080
 Ja, genau, die ist jetzt, die, die, die arbeiten an einem zweiten, also an einer quasi V2 davon, weil auch teilweise die Werte nicht immer so brauchbar sind, wie man sich das wünscht, die da rauskommen.

02:49:59.680 --> 02:50:04.340
 Genau, und dann arbeiten sie auch an ihrer, an einer Privacy-Sandbox.

02:50:04.340 --> 02:50:16.920
 Ich glaube, das Konzept bei denen ist dann, dass bestimmte APIs, die zählen ein oder zahlen ein in diese, in diese, in diese Privacy-Sandbox.

02:50:16.920 --> 02:50:21.620
 Und wenn du eine gewisse Menge erreicht hast, dann sagen die so, jetzt mehr Infos kriegst du nicht.

02:50:22.140 --> 02:50:27.300
 Und dann, wenn, wenn für dich halt die Network-Information-API wichtig ist, dann darfst du die halt abfragen.

02:50:27.300 --> 02:50:38.020
 Und jemand anderes darf eine andere API abfragen, aber keiner von euch kann eben alle abfragen und damit sozusagen einen Fingerabdruck erzeugen von einem Besucher.

02:50:38.020 --> 02:50:39.400
 Interessantes Konzept, ja.

02:50:39.760 --> 02:50:54.800
 Ja, Fingerprinting ist es, also klar, da hilft natürlich jedes einzelne, jede einzelne Information und dann, ja, das ergibt total Sinn, dass man sagt, hey, du darfst nur, von den 25 darfst du nur zwei oder so oder fünf oder weiß ich, keine Ahnung, wie sie das machen wollen, aber ja, ist eine gute Idee.

02:50:56.820 --> 02:51:05.260
 Ja, genau, die anderen Hersteller fanden das auch doof, genau, die lösen das irgendwie anders, genau.

02:51:05.260 --> 02:51:14.540
 Aber es ist halt besser als nichts, also dann kann man zumindest bei den Browsern, die auf Chromium laufen, das sind ja auch ein paar, kann man dann, kann man was machen.

02:51:14.540 --> 02:51:21.960
 Ja, ich meine ja auch mit nicht unerheblichem Marktanteil, also von daher bringt das dann auf jeden Fall schon was.

02:51:24.400 --> 02:51:40.200
 Okay, ich habe jetzt hier auf der Liste noch stehen, Testing, also wenn ich jetzt vielleicht nicht einfach alles in meine Seite einbauen will, sondern mal rausfinden will, was ist, was könnte denn überhaupt schieflaufen, was für Tools würdest du denn da empfehlen?

02:51:40.200 --> 02:51:45.820
 Also ich meine, Lighthouse hatten wir jetzt schon, ich glaube, das kennen ja viele auch, da gibt es ja die Performance-Tests.

02:51:45.820 --> 02:51:51.420
 Gibt es denn noch was weiteres, was du benutzt, was du empfehlen würdest?

02:51:52.420 --> 02:52:08.980
 Also was, was ich richtig, richtig gut finde, ist Webpage-Tests auch, das gibt es auch schon sehr, sehr lange und das, das sieht erstmal gar nicht so knorke aus, weil das Design so altbacken ist, ich weiß nicht, wobei die gerade daran auch arbeiten.

02:52:10.420 --> 02:52:25.420
 Aber das ist so quasi, das kartografiert deinen kompletten Ladevorgang und auch was so alles geschieht und wann welche Ressourcen gezogen werden, wo es Weiterleitungen gibt, wo es irgendwie festhingen.

02:52:27.280 --> 02:52:34.940
 Mach dir halt so ein Waterfall-Chart, sag dir, wann JavaScript gelaufen ist, welche Dateien dieses JavaScript ausgeführt.

02:52:34.940 --> 02:52:43.540
 Und nimmt dir auch ein Video auf, wenn du möchtest, von dem Ladevorgang, das du dann in so einer Zeitlupe dir angucken kannst.

02:52:45.320 --> 02:53:00.020
 Das ist tatsächlich alt, ich kenne das auch noch von früher und ich war gerade erstaunt, das Design ist tatsächlich, das hat sich auf jeden Fall geändert, dass die so mit Dark und mit Schatten und Glow und so, das ist auf jeden Fall ein bisschen anders, als wie ich es in Erinnerung hatte.

02:53:00.280 --> 02:53:23.000
 Ja, also das Projekt, das war glaube ich eigentlich nur von einem Typen von Padminen ein Projekt, der auch Helfer hatte, aber so im Prinzip so ein Ein-Mann-Ding, das wurde halt gekauft von irgendwas, Strange Loop glaube ich, und die stecken jetzt da Geld rein und die stellen auch Leute an und das ist echt cool.

02:53:23.000 --> 02:53:47.240
 Also weil es einfach so ein gutes Tool ist und das bildet auch die Basis für viele andere Tools, also neben Lighthouse, es gibt halt Lighthouse zum einen und Webpages, die sind die Basis für sowas wie Speedcurve oder Caliber, das sind ja auch so Services, wo man im Prinzip, wo man seine Seiten dann einpflegen kann und vielleicht auch Konkurrenzseiten einpflegen kann.

02:53:47.240 --> 02:54:05.520
 Und dann sagt man, mach einmal am Tag einen Test aus Frankfurt mit einem mobilen Chrome Browser und dann kannst du auch so Performance Budgets einstellen und sagen, hier, sag Bescheid, wenn irgendwie, wenn wir die Latte reißen.

02:54:06.160 --> 02:54:10.960
 Oder du kannst eben dann vergleichen, wie stehst du denn gegenüber der Konkurrenz.

02:54:10.960 --> 02:54:18.340
 Und noch ein anderes Tool, was ich total gut finde, ist Treo, Treo SH.

02:54:18.340 --> 02:54:24.100
 Die machen auch sowas ähnlich wie Speedcurve und Caliber.

02:54:24.100 --> 02:54:31.060
 Mit allem Unterschied, die zapfen auch diesen Chrome User Experience Report an.

02:54:31.060 --> 02:54:50.980
 Das ist ja, also Google hat ja angefangen, irgendwie so vor vier Jahren, Telemetriedaten aller Chrome User von ihren Seiten besuchen mit Ladevorgängen und allem Zip und Zap in ihre BigQuery-Datenbanken einzuspeisen.

02:54:50.980 --> 02:55:02.900
 Und jeder Mann und Frau kann jetzt hingehen und sagen, ich frage diese Daten ab und mach da Abfragen drauf.

02:55:02.900 --> 02:55:11.160
 Zum Beispiel, keine Ahnung, wie hat sich mein CLS-Score im Laufe der Zeit verändert oder was auch immer.

02:55:12.160 --> 02:55:25.060
 Und das Coole ist, also du könntest ja auch irgendwie weiter mit Lighthouse und so Tools arbeiten, aber das sind alles sozusagen Laborwerkzeuge, die unter ganz klaren Bedingungen arbeiten.

02:55:25.060 --> 02:55:33.940
 Und was in diesen Chrome User Experience Daten drinsteckt, sind sozusagen die Erfahrungen, die tatsächlichen Erfahrungen der Besucher.

02:55:35.980 --> 02:55:43.500
 Und das kann ja stark divergieren, also es nennt man ja dann Real User Monitoring oder RAM abgekürzt.

02:55:43.500 --> 02:55:48.640
 Und es gibt auch RAM-Tools, die man sich installieren kann, die sind halt einfach sauteuer.

02:55:49.980 --> 02:55:58.660
 Und das ist eine ziemlich clevere Idee von den Trio-Leuten, eben diese Chrome User Experience Report Daten dafür heranzuziehen.

02:55:58.660 --> 02:56:12.600
 Genau, die sind jetzt auch nicht geschenkt, aber deutlich günstiger, als wenn man so ein klassisches RAM-Tool in seine Seite hängen würde, das dann eben diese Metriken sammelt.

02:56:14.820 --> 02:56:18.600
 Ich habe es mir gerade mal angeschaut, ja, ganz billig ist es nicht.

02:56:18.600 --> 02:56:22.220
 Ich glaube, so 79 Euro oder so im Monat.

02:56:22.220 --> 02:56:24.980
 79 ist das, ist das Starter-Paket, genau.

02:56:24.980 --> 02:56:30.960
 Aber ich habe dann 30 Pages und 10.000 Scan-URLs.

02:56:30.960 --> 02:56:33.600
 Okay, das heißt Daily.

02:56:33.600 --> 02:56:38.640
 Amount of URLs in your site mems to scan daily for new Crux data.

02:56:40.600 --> 02:56:45.100
 Genau, Crux ist jetzt der Chrome User Experience Report.

02:56:45.100 --> 02:56:47.660
 Die müssen halt auch Geld an Chrome abdrücken.

02:56:47.660 --> 02:56:53.500
 Also wenn du die BigQuery benutzt, du hast, glaube ich, so ein Freikontingent von, keine Ahnung, so ein paar Abfragen.

02:56:53.500 --> 02:56:59.680
 Aber irgendwann sagt Google dann auch, so mit all seinen Cloud-Services, da kann es ja auch schnell mal teuer werden.

02:57:00.300 --> 02:57:03.400
 Das heißt, die müssen halt auch ein bisschen Kohle an Google dann abdrücken.

02:57:03.400 --> 02:57:15.280
 Die müsstest du aber auch abdrücken und trotz, also wenn du diese Daten regelmäßig abfragst und es aber trotzdem günstiger als einen echten RAM-Anbieter zu nehmen.

02:57:16.360 --> 02:57:25.620
 Aber das ist tatsächlich echt cool, weil ich, die haben ja so Demoseiten, wo man sich die Daten so angucken kann, wo quasi das Tool geshowcased wird.

02:57:25.620 --> 02:57:35.660
 Und wir haben zum Beispiel Applecom, wo ich sehen kann, dass der Performance-Lighthouse-Score, Moment,

02:57:35.660 --> 02:57:50.020
 am 12. November deutlich besser wurde für eine kurze Zeit und zwar von 50 auf 60, aber dann wieder runterging nach zwei Tagen.

02:57:50.020 --> 02:57:53.300
 Haben die da ihren Shop neu gestückt wieder oder was?

02:57:53.300 --> 02:57:56.080
 Ja, irgendwie haben dann die Performance gleich wieder schlecht gemacht.

02:57:56.080 --> 02:58:06.220
 Ja, interessant. Also es sieht echt aus wie ein interessantes Tool, wenn man das Kleingeld hat und das wichtig ist für die Performance,

02:58:06.220 --> 02:58:08.780
 dann ist es vielleicht echt was, was man sich mal angucken kann.

02:58:08.780 --> 02:58:18.520
 Ja, vielleicht so für Agenturen cool, die halt irgendwie für viele Kunden die Seiten monitoren wollen oder irgendwie so.

02:58:18.520 --> 02:58:24.380
 Weitere Beispiele, zum Beispiel noch GitHub kann man sich angucken.

02:58:25.460 --> 02:58:26.900
 Ikea.com, Reddit.

02:58:26.900 --> 02:58:33.520
 Ja, was halt auch schön ist, ist, wenn du, wenn du dich da anmeldest, du kriegst halt sofort rückwirkend Daten,

02:58:33.520 --> 02:58:38.020
 weil die werden sowieso gesammelt über deine Seite von den ganzen Chrome-Usern.

02:58:38.020 --> 02:58:41.620
 Außer deine Seite wird nie besucht, von denen dann ist natürlich, gibt es keine Daten.

02:58:41.620 --> 02:58:52.280
 Das heißt also, du musst jetzt nicht irgendwie abwarten, bis, bis du erst mal so über den Tag die ersten Messergebnisse eintrudeln nach dem Anmelden

02:58:52.280 --> 02:58:57.300
 und dann, sondern du kannst schon sofort in die Vergangenheit gucken.

02:58:59.720 --> 02:59:05.760
 Wobei das natürlich auch noch ein Ding ist, dass man diesen Chrome-User-Experience-Report sich mal direkt anschauen kann.

02:59:05.760 --> 02:59:11.720
 Ich meine, wenn du sagst, so ein paar Abfragen darf ich einfach so schon machen, ohne Geld zu bezahlen,

02:59:11.720 --> 02:59:14.080
 das ist vielleicht auch was, womit man mal rumspielen kann.

02:59:15.060 --> 02:59:18.800
 Ja, interessant. Kannte ich auch nicht bis eben. Cool.

02:59:18.800 --> 02:59:25.440
 Ich glaube, ich werde da auch noch zum Performance-Optimierer und Fan und mache die ganzen Tag nichts mehr anderes.

02:59:25.440 --> 02:59:26.400
 Ja, da macht das scheiß Spaß.

02:59:26.400 --> 02:59:28.540
 Wir machen jetzt nur noch Performance.

02:59:28.540 --> 02:59:28.880
 Eben.

02:59:28.880 --> 02:59:32.260
 Warte mal, ab, wie ich sagst dir, am Ende komprimierst HTML.

02:59:35.220 --> 02:59:37.840
 Ja, um alles rauszuholen.

02:59:37.840 --> 02:59:49.480
 Ja, aber dann auf der anderen Seite ist es schon interessant, wenn man jetzt so, also ich stelle mir das interessant vor, wenn du jetzt Performance-Engineer bist, sage ich mal,

02:59:49.480 --> 02:59:55.740
 also jemand, der sich hauptsächlich um Performance kümmert und du musst jetzt an so Apple-Shop-Seiten arbeiten.

02:59:57.080 --> 03:00:04.040
 Da kloppt er, der kloppt sich doch dann den ganzen Tag mit den Designern, die sagen, hey, wir brauchen hier aber 27 hochauflösende Bilder

03:00:04.040 --> 03:00:15.900
 und drei Videos, die alle nahtlos ineinander übergehen beim Scrollen und da, keine Ahnung, 30 Megabyte bei einmal runterscrollen, runterladen.

03:00:15.900 --> 03:00:23.340
 Ja, das Gute bei Performance ist, dass man ja meistens auch den Support der Geschäftsführung bekommt.

03:00:24.340 --> 03:00:30.720
 Weiß ich nicht, wie es bei Apple ist, so, ich glaube, dass dann so die Designer da, dass die auch eine starke Rolle spielen.

03:00:30.720 --> 03:00:35.820
 Aber so grundsätzlich, das ist halt so irgendwie messbar.

03:00:35.820 --> 03:00:44.780
 Jeder kann da mit seinem, das Lighthouse drauf loslassen und Google sagt, hier für Suchmaschinen wichtig und dann, das ist ja immer das Totschlag-Argument.

03:00:44.780 --> 03:00:49.140
 Okay, bei Apple vielleicht nicht, die brauchen nicht in der Suchmaschine sein.

03:00:49.140 --> 03:00:53.540
 Genau, das weiß halt jeder, was er da eingeben muss.

03:00:54.340 --> 03:00:56.760
 Oder sie, genau.

03:00:56.760 --> 03:01:09.120
 Aber das ist halt einfach das Schöne bei Performance, dass das gut messbar ist und dass das eben so eine starke Beziehung zu Suchmaschinenoptimierung hat.

03:01:09.120 --> 03:01:13.140
 Und die ist ja irgendwie für alle so die heilige Kuh.

03:01:13.140 --> 03:01:15.480
 Da darf man nicht schlechter werden.

03:01:18.920 --> 03:01:31.540
 Wohingegen Accessibility auch ein super Thema ist, aber so, ja, kann man nicht so, okay, man kann auch Messwerkzeuge drauf loslassen, aber so, das war's dann auch.

03:01:31.540 --> 03:01:32.840
 Die sind halt nicht vollständig.

03:01:32.840 --> 03:01:35.300
 Das geht nicht ohne so einen echten Audit.

03:01:35.960 --> 03:01:38.520
 Und die Suchmaschine interessiert es auch nicht.

03:01:38.520 --> 03:01:42.140
 Und darum interessiert es den Geschäftsführer dann nicht.

03:01:42.220 --> 03:01:48.320
 Da könnte ich jetzt noch viel drüber reden.

03:01:48.320 --> 03:01:52.280
 Jetzt gerade aus aktuellem Anlass, aber das ist alles noch geheim.

03:01:55.680 --> 03:02:01.240
 Ja, da könnte man eine ganze Sendung zu machen zu Accessibility und Geschäftsführern.

03:02:01.240 --> 03:02:03.800
 Ich sag's nur mal so.

03:02:03.800 --> 03:02:05.240
 Genau.

03:02:05.240 --> 03:02:12.300
 Was ich jetzt noch nachtragen würde und dann, ich weiß nicht, ob dann, dann kommt die obligatorische Frage gleich, ob noch was fehlt.

03:02:12.300 --> 03:02:20.160
 Aber ich hätte jetzt noch ein kleines Tool, das mir auch in dem Harry Roberts Talk über den Weg gelaufen ist, was ich auch schon mal, glaube ich, gesehen habe, aber nie so wirklich getestet habe.

03:02:20.320 --> 03:02:38.200
 Nämlich dieses ctcss, das ist ein kleines css-File, beziehungsweise es gibt es auch als Bookmarklet, sodass ich es mir einfach schnell auf meiner Seite einbinden kann, sofern meine Security-Richtlinien das nicht verbieten, was ich heute auch dann gleich gemerkt habe an einer Seite, die ich testen wollte.

03:02:38.200 --> 03:02:48.080
 Das einem Informationen über den Head gibt und ob da Sachen vielleicht in der falschen Reihenfolge sind, so aus Performance-Sicht.

03:02:48.080 --> 03:02:57.300
 Und das finde ich ziemlich nett, weil das ist so, das hat, das ist so, ich mag ja so Single-Purpose-Tools, die ihre Sache einfach gut machen und irgendwie nicht überladen sind.

03:02:57.300 --> 03:03:03.640
 Und das lade ich in die Seite rein und dann kriege ich direkt Text angezeigt, hey, du hast hier, tausch doch mal das.

03:03:03.640 --> 03:03:09.060
 Oder du hast hier diesen, diesen kleinen Fehler gemacht, das könntest du irgendwie beheben mit bla.

03:03:09.700 --> 03:03:12.560
 Fand ich echt nett und klein und schnell gemacht.

03:03:12.560 --> 03:03:15.140
 Also kann man einfach drauf drücken.

03:03:15.140 --> 03:03:27.320
 Wie gesagt, wenn du Security-Richtlinien hast, die das verbieten, dass irgendwie fremdes CSS injectet wird, dann muss man ein bisschen alternative Taktik wählen als das Bookmarklet, aber dann kriegt man das auch hin.

03:03:27.320 --> 03:03:34.060
 Und fand ich irgendwie nett, dass man da so schnell so direkte Handlungsanweisungen kriegt.

03:03:34.920 --> 03:03:39.440
 Ja, genau, das wollte ich noch nachreichen als Performance-Test-Tool.

03:03:40.700 --> 03:03:59.640
 Ja, ich hatte das Problem, dass ich habe, wenn man das auf einer Seite wie der Rheinischen Post ausführt, dann dadurch, dass die ganzen Third-Party-Sachen ihre Skripte nachträglich per JavaScript einhängen, hat das Tool dann auf einmal ganz viel Alarm geschlagen, weil irgendwelche Reihenfolgen nicht korrekt waren.

03:04:00.300 --> 03:04:08.080
 Die, die aber jetzt zu Beginn der Seite, als sie geladen wurde, die waren an und noch gar nicht da, die wurden halt quasi nachträglich dynamisch reingepackt.

03:04:08.080 --> 03:04:16.940
 Und das kann das Tool natürlich logischerweise dann nicht mehr voneinander unterscheiden und ist dann bei mir übelst steil gegangen.

03:04:18.080 --> 03:04:31.260
 Genau, das nur so als Disclaimer, dass man gucken muss, also sind das jetzt die angemeckerten Sachen, waren die von Anfang an drin, weil es geht ja wirklich nur um diesen initialen Render-Prozess.

03:04:31.260 --> 03:04:32.200
 Genau.

03:04:32.200 --> 03:04:33.760
 Ja, genau.

03:04:33.780 --> 03:04:36.940
 Da hast du schon viel Rot bei uns, was man ausführt.

03:04:36.940 --> 03:04:54.700
 Ja, ich, achso, ich dachte, ich hätte heute schon ein paar Sachen da gefixt und ich habe nämlich Dinge im Header umpositioniert, aber WordPress erlaubt einem ja auch nur so bedingt in diese Geschichten einzugreifen, was ein bisschen blöd ist, ehrlich gesagt.

03:04:54.700 --> 03:05:06.340
 Weil ich würde ja gerne, ich habe ja gerne volle, zu hundertprozentige Kontrolle über alles, weil ich will da mal ein Attribut reinschreiben und will da mal die Reihenfolge A, B, B, A umstellen und das geht halt bei WordPress.

03:05:06.340 --> 03:05:14.600
 Also mir ist es nicht bekannt, dass es da einen einfachen Weg gibt, dass ich da in die WordPress-eigenen Header-Geschichten eingreifen kann.

03:05:15.340 --> 03:05:32.960
 Was wir tatsächlich hatten, war das Title-Tag ganz weit unten, weil unser Custom-Blog, den wir bei uns im Template reinladen, über dem WordPress, ich weiß gar nicht, über diesem WordPress-Hook war, der die WordPress-Header-Sachen reinpackt.

03:05:32.960 --> 03:05:35.540
 Und da ist das Title-Tag nämlich ganz oben.

03:05:35.540 --> 03:05:40.460
 Das heißt aber, das war dann, begann dann erst nach unserem ganzen Social-Blog und so weiter.

03:05:41.800 --> 03:05:49.200
 Und wir haben auch noch Render-Blocking-JavaScript im Head und ja, es ist da, da ist, da kann man noch eine Menge machen.

03:05:49.200 --> 03:05:52.240
 Ich gucke ja mal rein.

03:05:52.240 --> 03:05:54.340
 Ich habe da, ich glaube ich sehr, oh je.

03:05:54.340 --> 03:05:57.680
 Genau.

03:05:57.680 --> 03:06:02.280
 Ja, ich bin ja, nee, ich bin ja froh, wenn wir da ein bisschen Feedback kriegen.

03:06:02.280 --> 03:06:09.740
 Wir können auch nicht auf alles immer gucken, aber wenn da irgendjemand was findet, was man irgendwie schnell mal ändern kann, gerne her damit immer.

03:06:10.320 --> 03:06:11.920
 Ja, klar.

03:06:11.920 --> 03:06:16.540
 Ist ja bei Accessibility auch so, ist bei allem Möglichen ist das so.

03:06:16.540 --> 03:06:21.600
 Also ich, ich mache das auch nicht alles richtig, auf gar keinen Fall.

03:06:21.600 --> 03:06:30.800
 Das ist einfach, also auch, auch wenn jetzt jemand hier die Sendung gehört hat und diese ganzen Themen, das muss man auch nicht alles machen.

03:06:31.540 --> 03:06:44.320
 Das sind ja auch einfach nur so quasi Anregungen und irgendwie Futter, damit man so die nächste, so einfach immer wieder sich was rauspicken kann und, und dann irgendwie sich damit beschäftigen kann.

03:06:45.820 --> 03:06:56.680
 Was ich gerade sagen wollte, war, wenn ihr das nicht alles morgen auf eurer Seite eingebaut habt, dann dürft ihr keine weitere Podcast-Folge von uns hören oder irgendwie sowas.

03:06:56.680 --> 03:06:58.040
 Irgendeine schlimme Strafe gibt es dann.

03:06:58.040 --> 03:07:02.480
 Im Stream machen wir dann, ey, was könnt ihr, nein, Spaß natürlich nicht.

03:07:04.660 --> 03:07:10.180
 Wir sind ja, bei uns findet man mit Sicherheit, wenn man genau hinguckt und alle Tools drüber laufen lässt, auch noch einige Probleme.

03:07:10.180 --> 03:07:13.960
 Also es ist ganz normal, dass man einfach nicht alles immer hinkriegt.

03:07:13.960 --> 03:07:14.360
 Ja.

03:07:14.360 --> 03:07:16.640
 Oder sich an allen, was Practices hält.

03:07:16.640 --> 03:07:18.560
 Guckt euch mal unsere Podcast-Seite an.

03:07:18.800 --> 03:07:21.940
 Ich glaube, das ist echt die Worst.

03:07:21.940 --> 03:07:24.200
 Gesagt, getan.

03:07:24.200 --> 03:07:29.860
 Ja, war da nicht schon vor langer Zeit, jetzt lege ich mal den Finger in die Wunde, ein Redesign geplant?

03:07:29.860 --> 03:07:31.720
 Ja, ja, genau.

03:07:31.720 --> 03:07:34.720
 Ja, das ist halt, ihr wisst, wie das ist.

03:07:34.720 --> 03:07:34.840
 Ja.

03:07:34.840 --> 03:07:35.680
 Oder vielleicht auch nicht.

03:07:35.680 --> 03:07:36.260
 Ja.

03:07:36.260 --> 03:07:41.240
 Doch, weil Redesign werden wir nie eins machen.

03:07:41.240 --> 03:07:42.360
 Richtig.

03:07:42.360 --> 03:07:47.680
 Wir haben halt irgendwann mal damit angefangen, es hat lang genug gedauert, das Design zu machen.

03:07:47.760 --> 03:07:50.580
 Wir arbeiten aber auch, nee, also es ist ein iterativer Prozess.

03:07:50.580 --> 03:07:59.020
 Also ich glaube, es vergeht keine Woche, wo ich nicht irgendeine Codezeile, meistens sind es ganz kleine Sachen, eine Codezeile anpasst bei uns, unserem WordPress-Template.

03:07:59.020 --> 03:08:04.360
 Aber ich glaube, ein Redesign, so ein richtiges wird es so schnell nicht geben.

03:08:04.360 --> 03:08:13.920
 Da müsste man so viel, da hängt so viel dran mittlerweile an diesem Design, wenn man da, also da müsste man, nee, nee, das ist keine gute Idee.

03:08:13.920 --> 03:08:15.840
 Nee, das weiß Coca-Cola auch zum Beispiel.

03:08:15.840 --> 03:08:21.920
 Einfach beim Original bleiben und das, und hoffen, dass es gut genug war.

03:08:21.920 --> 03:08:30.240
 Ja, nee, also sieht auf jeden Fall schon deutlich nach mehr aus als hier unser Ding.

03:08:30.400 --> 03:08:42.240
 Wobei uns ist ja auch so ein bisschen, ist ja quasi so eine verhohene Piepelung der tatsächlichen W3-Specs, wie die eben aufgebaut sind.

03:08:42.980 --> 03:08:45.600
 Aber das dient nicht immer der Lesbarkeit.

03:08:45.600 --> 03:08:46.440
 Und ja.

03:08:46.440 --> 03:08:48.980
 Ich finde es aber an sich eigentlich auch ein gutes Konzept.

03:08:48.980 --> 03:08:58.660
 Also das passt sehr gut, es ist gut durchgezogen und man könnte bestimmt, also da würde ich auch wahrscheinlich gar nicht jetzt anfangen, ein komplettes Redesign zu machen,

03:08:59.140 --> 03:09:09.420
 sondern sich vielleicht mal Refactoring-UI vornehmen und dann überlegen, wo kann man denn jetzt das so, wie es ist, irgendwie verbessern und ein bisschen besser lesbar machen.

03:09:09.940 --> 03:09:17.040
 Ich weiß, die Standardtexte und die Working Drafts, die sind nicht so gut lesbar, man muss ja aber nicht dabei bleiben.

03:09:17.040 --> 03:09:26.300
 Und ich glaube, man kann, also ich würde persönlich, wenn ich jetzt da ein Redesign machen würde, ich würde versuchen, das Konzept beizubehalten und nur so ein bisschen mehr Struktur reinbringen.

03:09:28.160 --> 03:09:31.260
 Ja, und auch auf Mobile ein bisschen cooler optimiert.

03:09:31.260 --> 03:09:41.580
 Ich meine, wir sind ja 2010 gestartet, da war das so mit Mobile und, also Mobile First war, glaube ich, noch nicht so etabliert.

03:09:41.580 --> 03:09:45.600
 Das war halt so, uh, was Neues.

03:09:45.600 --> 03:09:48.800
 Genau, das haben wir noch nicht ganz so ernst genommen.

03:09:48.800 --> 03:09:57.700
 Wir haben auch nicht Mobile First gearbeitet, ganz ehrlich, also das fällt mir immer noch extrem schwer, muss ich sagen.

03:09:58.160 --> 03:10:03.240
 Wenn man mit Big Screen aufgewachsen ist, dann ist das ...

03:10:03.240 --> 03:10:09.680
 Siehst du, deswegen machen der Konstantin und ich das mit unseren Laptops, weil wir Mobile First arbeiten.

03:10:09.680 --> 03:10:10.700
 Ja.

03:10:10.700 --> 03:10:18.160
 Okay, das lassen wir mal so stehen.

03:10:18.160 --> 03:10:21.860
 Konstantin, das ist kein Argument dafür, dass du jetzt weiter mit deinem ...

03:10:21.860 --> 03:10:24.120
 Nee, ich möchte schon wieder einen gescheiten PC haben.

03:10:24.120 --> 03:10:27.900
 Ich habe ja eigentlich das Beste aus beiden Welten.

03:10:28.160 --> 03:10:32.320
 Ähm, ich habe ja einen 13-Zoll-Laptop-Monitor.

03:10:32.320 --> 03:10:37.580
 Äh, und aber dann halt, äh, ein 27-Zoll-4K-Display nebendran stehen.

03:10:37.580 --> 03:10:38.860
 Mhm.

03:10:38.860 --> 03:10:39.680
 Also ...

03:10:39.680 --> 03:10:43.520
 Das Argument lasse ich nicht so richtig gelten.

03:10:43.520 --> 03:10:50.860
 Ja, das Problem ist nur, wenn ich das hätte, dann würde ich ja wieder anfangen zu weinen, wenn ich nicht zu Hause säße.

03:10:50.860 --> 03:10:58.220
 Ja, ähm, das ist tatsächlich, äh, das ist tatsächlich, äh, das ist tatsächlich, glaube ich, ein Problem.

03:10:58.220 --> 03:11:05.480
 Ich habe hier meine ganze Bude auf hochauflösende Displays umgestellt und ich befürchte, ich kann da auch nicht mehr so richtig zurück.

03:11:06.420 --> 03:11:21.120
 Also wenn ich jetzt, äh, irgendwie, ich weiß ja nicht genau, wie dein Arbeitsalltag aussieht, wenn ich jetzt, ähm, regelmäßig irgendwie an fremden Monitoren oder an fremden Rechnern irgendwie arbeiten müsste, äh, dann würde mir das wahrscheinlich schon schwerfallen.

03:11:21.120 --> 03:11:26.080
 Da würde ich vielleicht mir mein 4K-Display irgendwie, äh, in den Rucksack packen und mitnehmen oder so.

03:11:27.080 --> 03:11:32.460
 Ja, es fehlt mir auch so ein Hoverboarden des, äh, 27-Zoll-Displayers, man so vor sich her schieben kann.

03:11:32.460 --> 03:11:35.620
 Nee, warum nicht so zum Aufziehen, so wie so eine Leinwand, so prüpp.

03:11:35.620 --> 03:11:37.960
 Ja, so ein Aufsteller.

03:11:37.960 --> 03:11:38.900
 So stelle ich mir das vor.

03:11:38.900 --> 03:11:45.460
 Ja, genau, so ein aufrollbares Display, das ich einfach so zusammenrollen kann, in den Rucksack packen und ...

03:11:45.460 --> 03:11:49.120
 Nein, noch so ein kleines Stativ oder keine Ahnung, das hängt man vielleicht an die Decke oder so.

03:11:49.120 --> 03:11:55.500
 Das, äh, ja, ich habe, ich habe ja echt mir von OLED zum Beispiel viel, äh, viel erhofft.

03:11:55.500 --> 03:12:02.100
 Da gab es irgendwann mal so ein, so ein YouTube-Video, was so ein bisschen viral gegangen ist, wo irgendwie, da war irgendwie gerade Fußball-WM oder sowas.

03:12:02.100 --> 03:12:10.120
 Und, ähm, dann hat halt jemand das so ein bisschen hingefakt, dass irgendwie, da zieht einer neu in die Wohnung ein und will dann irgendwie schnell das Fußballspiel gucken.

03:12:10.120 --> 03:12:12.740
 Und er rollt einfach nur so ein Poster an die Wand.

03:12:12.740 --> 03:12:15.440
 Und dann, äh, ist das der Monitor und dann geht's da los.

03:12:15.440 --> 03:12:19.120
 Ich habe halt gedacht, ja, das ist vielleicht in fünf Jahren Realität oder so.

03:12:19.120 --> 03:12:21.260
 Wann wird das gewesen sein? 2012, 2013?

03:12:21.940 --> 03:12:25.940
 Wir haben immer noch nichts Ansatz, äh, im Ansatz in der Richtung.

03:12:25.940 --> 03:12:26.180
 Ja, stimmt.

03:12:26.180 --> 03:12:29.180
 OLED sollte das können, ja.

03:12:29.180 --> 03:12:30.260
 Eigentlich mal.

03:12:30.260 --> 03:12:36.540
 Es gibt ja auch so Displays, die irgendwie so ein bisschen irgendwie aufklappbar und, und, und, äh, schräg.

03:12:36.540 --> 03:12:45.500
 Und aber sowas mit Tapete, ich habe halt echt gedacht, im Jahr 2020, äh, gibt's gar keine normale Tapete mehr,

03:12:45.580 --> 03:12:51.800
 sondern es ist einfach alles OLED und deine ganze Bude kann, du kannst halt einfach einen Strand vor der Tür haben oder keine Ahnung was,

03:12:51.800 --> 03:12:54.060
 was deine Wand halt gerade anzeigt, ne?

03:12:55.760 --> 03:13:00.100
 Ich hatte von so einem Typen gelesen, der das mit, äh, mit so einer VR-Brille macht.

03:13:00.100 --> 03:13:03.280
 Der hat, glaube ich, irgendwie so fünf virtuelle Monitore.

03:13:03.280 --> 03:13:07.740
 So, äh, auf einmal hat er ein Terminal und so seine IDE und so Zeugs.

03:13:07.740 --> 03:13:13.520
 Und, äh, genau, der, der, der macht das jetzt eben über so eine 3D-Brille,

03:13:13.520 --> 03:13:17.220
 die ja dann, die, die auch ziemlich gut ist und hochauflösend.

03:13:18.220 --> 03:13:22.880
 Äh, und ich glaube, sein größter Bildschirm hat irgendwie vier Meter Diagonal oder so.

03:13:22.880 --> 03:13:25.420
 Ja, warum auch nicht?

03:13:25.420 --> 03:13:31.960
 Ich meine, ähm, in der VR-Brille, äh, ist mein Bildschirm so groß wie die Welt.

03:13:31.960 --> 03:13:36.780
 Also, finde ich, äh, ja, verstehe ich auch nicht.

03:13:36.780 --> 03:13:42.800
 Habe ich auch mal gedacht, als irgendwie diese, diese Google Glasses, äh, dieses Video rauskam,

03:13:42.800 --> 03:13:47.140
 wo einer so eine ganz normale Brille aufhatte und das war so komplett, äh, Augmented Reality.

03:13:47.140 --> 03:13:48.500
 Und ich dachte so, ja, ja, genau.

03:13:48.500 --> 03:13:50.960
 Aber das ist auch nie was geworden.

03:13:50.960 --> 03:13:56.660
 Also, ich bin schon sehr oft enttäuscht worden von irgendwelchen Produktvisionen, die nix wurden.

03:13:56.660 --> 03:13:59.020
 Ja, ähm, ach, Mann.

03:13:59.020 --> 03:14:01.480
 Ja, wirklich jetzt mal.

03:14:01.480 --> 03:14:02.140
 Echt, hey.

03:14:02.140 --> 03:14:03.920
 Was, was sollen das?

03:14:03.920 --> 03:14:06.800
 Was ist, wie, was ist denn das für ein Leben ohne OLED-Tapete?

03:14:06.800 --> 03:14:08.720
 Echt?

03:14:08.720 --> 03:14:10.800
 Komm, lass uns die Sendung einfach beenden.

03:14:10.800 --> 03:14:12.100
 Das ist jetzt alles so mies.

03:14:12.100 --> 03:14:14.960
 Ich bin einfach nur noch sauer und enttäuscht.

03:14:14.980 --> 03:14:17.500
 Nein, nein, nein, jetzt kommen noch, jetzt kommen noch die geilen Sachen.

03:14:17.500 --> 03:14:18.820
 Ah, stimmt.

03:14:18.820 --> 03:14:19.500
 Genau.

03:14:19.500 --> 03:14:22.680
 Außer, außer wir haben, außer wir haben, außer wir haben zu Performance noch was vergessen,

03:14:22.680 --> 03:14:24.080
 aber wir haben schon viel drüber geredet.

03:14:24.080 --> 03:14:27.140
 Vielleicht haben wir noch, wenn wir noch irgendwas vergessen haben, dann ist jetzt die letzte

03:14:27.140 --> 03:14:28.320
 Chance, das nachzutragen.

03:14:29.200 --> 03:14:34.900
 Genau, oder die Hörerinnen und Hörer fragen das einfach in euren Kommentaren und oder auf

03:14:34.900 --> 03:14:37.640
 Twitter oder vielleicht auch Twitch.

03:14:37.640 --> 03:14:40.900
 Da müsst ihr das nur über Twitch dann wieder weiterleiten.

03:14:40.900 --> 03:14:42.500
 Kriegen wir hin.

03:14:42.500 --> 03:14:43.960
 Genau, aber wir haben ja auch schon mal gesprochen.

03:14:43.960 --> 03:14:49.000
 Vielleicht bist du bei Twitch bei uns ja mal mit dabei und wir gucken dann mal so live-Performance-mäßig

03:14:49.000 --> 03:14:49.800
 irgendwie Sachen an.

03:14:49.800 --> 03:14:50.820
 Da hatten wir ja mal drüber gesprochen.

03:14:50.820 --> 03:14:53.060
 Überfall ich dich jetzt hier live im Podcast nochmal.

03:14:53.500 --> 03:14:56.140
 Das können wir natürlich in Zukunft mal machen.

03:14:56.140 --> 03:15:02.480
 Ich weiß nicht genau, ob das dieses Jahr noch was wird, aber das wäre auf jeden Fall

03:15:02.480 --> 03:15:04.440
 eine Sache, die wir gerne mal angehen würden.

03:15:04.440 --> 03:15:05.540
 Das wäre eine coole Geschichte.

03:15:05.540 --> 03:15:06.760
 Ja.

03:15:06.760 --> 03:15:11.260
 Ne, dann machen wir dann auch den Rückkanal für die HörerInnen und ZuschauerInnen.

03:15:11.260 --> 03:15:11.600
 Genau.

03:15:11.600 --> 03:15:13.520
 Ja, top.

03:15:13.520 --> 03:15:13.960
 Gute Idee.

03:15:13.960 --> 03:15:16.600
 Ihr habt es gehört, Kommentare schreiben.

03:15:16.600 --> 03:15:20.320
 Haben wir ja noch nie gesagt, dass wir das machen sollen.

03:15:20.320 --> 03:15:20.900
 Nein, auch schon lange nicht mehr.

03:15:20.900 --> 03:15:21.620
 Genau.

03:15:21.620 --> 03:15:27.480
 Und es gibt auch noch ein paar mehr Tipps, wenn ihr Geld spendet an, wo wir sind es vorne.

03:15:27.480 --> 03:15:27.840
 Genau.

03:15:27.840 --> 03:15:28.360
 Oder Biere.

03:15:28.360 --> 03:15:34.840
 Also wir, also der Konstantin, der findet nichts schlimmer.

03:15:34.840 --> 03:15:36.700
 Der regt sich richtig auf.

03:15:36.700 --> 03:15:40.160
 Und je höher die Spende ist, ja, umso schlimmer findet der das.

03:15:40.620 --> 03:15:44.700
 Wenn ihr den richtig auf die Palme bringen wollt, dann müsst ihr so 50 Euro spenden oder

03:15:44.700 --> 03:15:44.820
 so.

03:15:44.820 --> 03:15:45.240
 Och nee.

03:15:45.240 --> 03:15:46.480
 Dann dreht er richtig am Rad.

03:15:46.480 --> 03:15:46.760
 Haben wir auf.

03:15:46.760 --> 03:15:51.080
 Das haben wir auf Twitch mal gemacht.

03:15:51.080 --> 03:15:54.000
 Und dann kamen tatsächlich kleine Spenden rein.

03:15:54.000 --> 03:15:56.920
 Ja, also man muss wirklich, man muss mit psychologischen Tricks arbeiten.

03:15:56.920 --> 03:15:57.540
 Ja.

03:15:57.540 --> 03:16:00.800
 Ja, cool.

03:16:00.800 --> 03:16:04.380
 Okay, Performance können wir zumachen, das Kapitel.

03:16:04.380 --> 03:16:07.880
 Ich denke, da haben wir auf jeden Fall Futter geliefert, oder?

03:16:07.880 --> 03:16:08.520
 Auf jeden Fall.

03:16:08.660 --> 03:16:12.100
 Mein Kopf ist ganz, also vielleicht liegt es auch daran, dass ich noch krank bin, aber

03:16:12.100 --> 03:16:14.480
 es fühlt sich alles wattig an, das ist so viel Input.

03:16:14.480 --> 03:16:19.040
 Aber ich weiß nicht, wann wir zum letzten Mal um diese Uhrzeit noch aufgenommen haben.

03:16:19.040 --> 03:16:23.560
 Ich glaube noch nie, also ich glaube, Mitternacht haben wir noch nie geknackt.

03:16:23.560 --> 03:16:24.460
 Und da laufen wir jetzt gerade hin.

03:16:24.460 --> 03:16:25.960
 Noch ist es nicht ganz, aber wir haben es fast.

03:16:25.960 --> 03:16:28.480
 Aber wir sind jetzt, wir kommen jetzt wirklich Richtung Ende.

03:16:28.480 --> 03:16:29.040
 Endspurt, genau.

03:16:29.380 --> 03:16:30.560
 Aber vorher kommt noch...

03:16:30.560 --> 03:16:39.560
 Das ist geil, geil, geil, geil, geil, geil, geil, geil.

03:16:39.560 --> 03:16:42.880
 Perfekt, ausnahmsweise mal so grammatikalisch korrekt.

03:16:42.880 --> 03:16:46.200
 Perfekt eingebunden.

03:16:46.200 --> 03:16:49.940
 Als ob wir es nicht schon hundertmal gehört hätten und wissen würden, was da für ein Text kommt.

03:16:49.940 --> 03:16:51.380
 Aber ich vergesse es trotzdem immer wieder.

03:16:52.780 --> 03:16:55.420
 Möchtest du beginnen oder soll ich, Shep?

03:16:55.420 --> 03:17:04.520
 Ich kann ja mal loslegen und zwar mein Geilteil, was ich ziemlich geil finde, ist NVIDIA GeForce Now.

03:17:04.520 --> 03:17:05.060
 Kennt ihr das?

03:17:05.060 --> 03:17:07.940
 Ah, darüber haben wir sogar hier schon mal gesprochen, ja.

03:17:07.940 --> 03:17:09.000
 Ah ja, okay.

03:17:09.000 --> 03:17:19.980
 Genau, das ist im Prinzip, du hast eine Kiste in der Cloud mit einer fetten CPU und einer brutal fetten NVIDIA Grafikkarte.

03:17:20.800 --> 03:17:23.100
 Tatsächlich ist es eigentlich eine Tesla-Karte, die da drin steckt.

03:17:23.100 --> 03:17:32.240
 Und genau, du zahlst, zahlst jetzt, weiß ich nicht, ich zahle irgendwie so, sagen wir mal, sieben Euro im Monat vielleicht.

03:17:32.240 --> 03:17:42.620
 Und was du machen kannst, ist, dass du, also im Gegensatz zu dem, zu Google Stadia, was es gibt, musst du, kaufst du da keine Spiele,

03:17:42.620 --> 03:17:52.860
 sondern die docken an, an deinen Steam-Account oder deinen Epic-Account oder auch hier GOG, glaube ich, und vielleicht auch noch einen anderen.

03:17:52.860 --> 03:18:00.840
 Und du kannst halt auf dieser Kiste die Spiele dann spielen und die werden im Prinzip übers Internet gestreamt.

03:18:01.840 --> 03:18:10.940
 Allerdings nur, ich glaube, also bei mir in 1080p, aber dann mit allen Schiebereglern oben, mit Raytracing und hast du nicht gesehen.

03:18:11.660 --> 03:18:18.620
 Und ich glaube, es gibt jetzt ganz neu auch mit 4K, wenn ich mich nicht irre, so als neues Produkt, das dann auch ein bisschen mehr kostet.

03:18:19.840 --> 03:18:28.800
 Ja, nicht ganz. Warte, ich gucke gerade nach. Es ist, also ich glaube, es ist noch nicht raus. Ich habe nämlich mich bei diesem Programm angemeldet.

03:18:28.800 --> 03:18:35.000
 Und sobald, das ist irgendwann im Dezember, glaube ich, verfügbar. Es ist QHD, ist die höchste Auflösung, wenn ich es richtig sehe.

03:18:35.000 --> 03:18:38.440
 Also 2560 mal 1140.

03:18:38.440 --> 03:18:40.200
 Ah ja.

03:18:40.200 --> 03:18:44.580
 Also zumindest ist das das Höchste, was mir hier angezeigt wird. Und ich glaube, das war auch das, genau.

03:18:44.580 --> 03:18:52.720
 Und ich glaube, das kommt dann aber darauf an, wie viel FPS man haben will. Das gibt es dann, glaube ich, nur mit 60.

03:18:52.720 --> 03:19:04.540
 Wenn man mehr haben will, dann nimmt man halt, genau, also 1080p und da kriegt man dann aber auch 120 FPS theoretisch. Angeblich. Also das ist noch nicht raus.

03:19:04.540 --> 03:19:07.080
 Ja, das hängt ja auch ein bisschen von deiner Leitung ab.

03:19:07.080 --> 03:19:13.560
 Ja, genau. Nutze ich auch. Ich habe auch Kritikpunkte da dran.

03:19:13.560 --> 03:19:22.920
 Also ich finde das an sich genau das Richtige, weil man will sich vielleicht gar keine fette Gaming-Kiste irgendwie hinstellen und zockt, aber manchmal ganz gerne Runde, auch irgendwie mit hübscher Grafik.

03:19:24.140 --> 03:19:35.500
 Aber es gibt halt einige Spiele nicht, wo ich dachte so, das hätte ich jetzt gerne mal ausprobiert. Ah ja, nee, geht nicht. Also was von den Shops, die du vorhin erwähnt hast, was ich jetzt noch hinzufügen würde, wäre Uplay.

03:19:35.500 --> 03:19:48.800
 Da gibt es auch einige, aber eben, ich weiß nicht, ob es da alle gibt von Ubisoft. Aber ich habe halt gedacht, ja, ich würde gerne mal, mein letztes Fußball-Simulationsspiel, was ich gespielt habe, war Frankreich 98.

03:19:48.800 --> 03:19:56.880
 Ja, so alt bin ich. Und ich hätte gerne mal so ein aktuelles FIFA einfach nur mal ausprobiert. Das gibt es aber einfach nicht.

03:19:57.840 --> 03:20:09.740
 Geht einfach nicht. Und das fand ich dann irgendwie ein bisschen schade. Und es waren am Anfang mehr Spiele drin und irgendwann haben Spielehersteller gesagt, hey, wir wollen es gar nicht, dass unsere Spiele da drin sind.

03:20:09.740 --> 03:20:20.200
 Und ich denke mir so, es kann euch doch scheißegal sein, ob ich mein Spiel, was ich gekauft habe bei Steam, auf einer Cloud-Gaming-Kiste spiele oder auf meinem Rechner zu Hause.

03:20:20.200 --> 03:20:25.380
 Was habt ihr da überhaupt? Also da würde mich mal interessieren, was ein Gericht dazu sagt, ob die das überhaupt verbieten dürfen.

03:20:25.380 --> 03:20:32.320
 Weil letzten Endes habe ich das Spiel gekauft. Auf was für einer Kiste ich das Spiel soll? Müsste denen eigentlich egal sein, finde ich.

03:20:33.040 --> 03:20:41.900
 Naja. Was ich nervig finde an dem aktuellen Modell ist noch, dass bei mir die Grafikeinstellungen immer wieder zurückgesetzt werden bei vielen Spielen.

03:20:41.900 --> 03:20:47.520
 Also jedes Mal, wenn ich starte, ist es wieder auf so einem Low-Level-Setting und ich muss dann immer wieder hochziehen.

03:20:47.520 --> 03:20:56.160
 Aber angeblich ist das auch eins der Features für das teurere Programm, was dann, glaube ich, so 15 Euro im Monat kostet oder so. Ich weiß es nicht genau.

03:20:56.160 --> 03:20:59.060
 Aber zahlst du gerade oder machst du kostenlos derzeit?

03:20:59.600 --> 03:21:00.480
 Ich zahle.

03:21:00.480 --> 03:21:01.280
 Ja.

03:21:01.280 --> 03:21:01.500
 Okay.

03:21:01.500 --> 03:21:08.360
 Also ich bin da in diesem Founders, ich bin genau Gründungsmitglied Founders-Ding.

03:21:08.360 --> 03:21:09.320
 Ja, das habe ich auch.

03:21:09.320 --> 03:21:19.320
 Genau, da war das noch relativ günstig ganz am Anfang. Und ich glaube, wenn man jetzt den Vertrag da abschließt, dann zahlt man da auch schon ein bisschen mehr.

03:21:21.220 --> 03:21:34.940
 Also ich glaube, als Founder hat man auf jeden Fall keine Wartezeit, wenn man spielt. Ansonsten, man kann, glaube ich, es gibt auch eine kostenlose Mitgliedschaft, dann kann man auch spielen, aber da hat man eine gewisse Wartezeit und nur eine gewisse Session-Länge, glaube ich. Und dann wird das abgeklemmt.

03:21:36.560 --> 03:21:36.860
 Genau.

03:21:36.860 --> 03:21:54.160
 Sonst alternativ für dein Fußballspiel gibt es ja jetzt auch den Xbox Game Pass. Der ist ja quasi das Gleiche von Microsoft. Da hast du dann im Prinzip Xboxen in so Cloud-Infrastruktur und streamst das. Vielleicht findest du dein Fußballspiel da eher.

03:21:54.160 --> 03:22:17.500
 Also, ja, das kann gut sein. Ja, ich wollte jetzt halt, es ist wie bei den anderen, bei den Videostreaming-Plattformen. Am Anfang hast du gedacht, oh ja, Netflix und damit hast du dann irgendwie alles. Und dann hat man irgendwie noch Amazon dazu und dann irgendwie noch Disney Plus und wie sie alle heißen. Und eigentlich will man ja gar nicht. Eigentlich hätte man ja gern ein großes, wo alles drin ist. Aber das hat es wahrscheinlich nie gegeben.

03:22:18.460 --> 03:22:21.580
 Dann gab es ja mal Discovery rausgenommen bei Netflix.

03:22:21.580 --> 03:22:24.600
 Ja, ich hab genau an das auch gerade gedacht, ja.

03:22:24.600 --> 03:22:25.700
 Unglaublich.

03:22:25.700 --> 03:22:30.820
 Jetzt soll ich mir auch noch von MGM jetzt auch noch ein Paket holen.

03:22:30.820 --> 03:22:31.840
 Nix, nix gibt's.

03:22:31.840 --> 03:22:41.100
 Also, nur für Discovery schließe ich, also ich mein, ich hab's auch geschaut und ich find die Serie gut, aber nur für eine Serie schließe ich jetzt nicht noch irgendwas extra ab.

03:22:41.100 --> 03:22:47.960
 Da warte ich dann und ärgere mich drüber und sag, was das alles für doofe Menschen sind, die sich das ausdenken.

03:22:48.460 --> 03:22:49.600
 Geldgehrige Menschen.

03:22:49.600 --> 03:22:50.340
 Kapitalismus.

03:22:50.340 --> 03:22:54.440
 Ja, in Star Trek ist das ganze Problem mit Kapitalismus.

03:22:54.440 --> 03:22:58.400
 Ausgerechnet die Serie, ja, die, äh, naja.

03:22:58.400 --> 03:23:01.160
 Genau, nur bei den Ferengi, da ist das noch.

03:23:01.160 --> 03:23:11.900
 Aber was ich sagen muss, da wir ja gerade so die Zukunft gebasht haben, weil es keine OLED-Tapeten gibt, aber diese, diese Streaming-Geschichte, ähm, also das find ich echt faszinierend, dass das, dass das geht.

03:23:11.900 --> 03:23:18.320
 Ja, auch in der Auflösung und in der Qualität und gerade beim Spiel ja auch mit, mit diesem geringen Delay.

03:23:18.320 --> 03:23:21.000
 Also, das find ich echt genial, dass das geht.

03:23:21.000 --> 03:23:30.880
 Also, ich hab mit, äh, mit, äh, anspruchsvolleren Kunden, äh, mal gesprochen, also so jüngere Gamer, die ganz gern kompetitiv, äh, zocken und auch so gegen andere.

03:23:31.720 --> 03:23:41.640
 Die sind so mittelbegeistert davon, die sagen auch schon, ah, das ist schon ganz gut, aber es ist schon, ich merk's schon, auf der eigenen Kiste ist es dann schon nochmal besser und irgendwie schneller und da hab ich einen Vorteil.

03:23:41.640 --> 03:23:53.700
 Ähm, aber für mich, äh, als alten Casual-Gamer, der eigentlich fast nur Kampagnen spielt und nie gegen andere und wenn, dann ist mir das auch egal, dann verliere ich sowieso.

03:23:54.540 --> 03:24:06.880
 Ähm, ist das perfekt, das ist genau das Richtige, weil ich mir eben eine Menge Geld spare durch Gaming-Kiste, äh, die ich jetzt nicht brauche und auch Platz und auch, naja, gut, Strom zahle ich natürlich, äh, woanders.

03:24:06.880 --> 03:24:21.520
 Ähm, ja, aber ich mein, alleine schon dieses Gefühl, jetzt gibt's irgendwie eine neue Grafikkarte, jetzt muss ich mir eine neue Gaming-Kiste kaufen, das fällt einfach komplett weg, weil ich mich mit der Hardware überhaupt nicht auseinandersetze.

03:24:21.520 --> 03:24:28.120
 Also, das macht irgendjemand anderes irgendwo im Rechenzentrum, da, wo die dicken Kisten einfach gut belüftet stehen können, das ist einfach eine sehr gute Idee.

03:24:28.120 --> 03:24:30.440
 Ja.

03:24:30.440 --> 03:24:34.980
 Ja, und die Karten kosten ja auch, äh, einen Arm und ein Bein gerade, ne?

03:24:34.980 --> 03:24:36.080
 Ja.

03:24:36.080 --> 03:24:39.080
 Ja, und sind, wenn sie überhaupt verfügbar sind, ne?

03:24:39.080 --> 03:24:48.120
 Also, wenn du jetzt so was Aktuelles haben willst, irgendwie so eine, keine Ahnung, GeForce 3080, äh, ich glaub, da hast du, hast du Glück, wenn du überhaupt eine kriegst, jetzt mal, egal, was sie kostet.

03:24:49.120 --> 03:24:49.300
 Ja.

03:24:49.300 --> 03:24:53.140
 Oder ist das noch so? Ich glaub schon, dass das, äh, hat sich, glaub ich, nicht großartig geändert.

03:24:53.140 --> 03:24:54.600
 Ne.

03:24:54.600 --> 03:24:56.260
 Okay.

03:24:56.260 --> 03:24:57.160
 Genau, find ich super.

03:24:57.160 --> 03:24:57.840
 Ja.

03:24:57.840 --> 03:24:59.780
 Deshalb, geil Teil.

03:24:59.780 --> 03:25:01.420
 Cool.

03:25:01.420 --> 03:25:01.720
 Yes.

03:25:02.040 --> 03:25:25.440
 So, wir haben vorhin schon über die Beyond Tellerrand, äh, gesprochen, äh, eine der besten Web-Konferenzen, die es so gibt, meiner Meinung nach zumindest, und, äh, meine, meine, meine Tassen in meinem Schrank, äh, rekrutieren sich fast ausschließlich aus Beyond Tellerrand-Tassen, äh, einfach weil sie auch sehr hübsch sind, also nicht nur, weil, wer ist, äh, geschenkter Gaul und so, sind einfach sehr, sehr, sehr hübsche Tassen.

03:25:26.320 --> 03:25:35.760
 Ähm, und die war jetzt mal wieder in Düsseldorf und, äh, da sind jetzt auch schon die ersten Videos rausgekommen und ich weiß nicht, ob das jetzt schon alle sind, bin ich mir nicht sicher.

03:25:35.880 --> 03:25:57.100
 Es sind so zehn oder so, äh, zehn, elf Videos, äh, von den Konferenztalks, kostenlos zum Anschauen und, äh, wir packen den Vimeo-Link, explizit den Vimeo-Link in die Shownotes, den gibt's auch auf YouTube, ähm, aber ich find, Vimeo hat, kriegt zu wenig Liebe allgemein, YouTube ist da so groß und dann kann man mal wieder die Leute zu Vimeo schicken, meiner Meinung nach.

03:25:57.100 --> 03:26:21.920
 Und ich hab mir auch schon einige angeschaut, ähm, und, äh, möchte zum Beispiel hervorheben, was ich wirklich großartig fand, ähm, also neben dem Talk von Harry Roberts, der natürlich super war, den haben wir jetzt schon mehrfach angesprochen, äh, von, äh, Bianca Berning, äh, äh, Variable Fonts, what the fuck, äh, fand ich echt richtig gut, weil wenn man, äh, Variable Fonts, ähm, weiß gar nicht, haben wir das vorhin angesprochen?

03:26:21.920 --> 03:26:37.740
 Ich glaub nicht, äh, ist auch egal, äh, äh, das ist auf, gibt auf jeden Fall einen sehr tollen Einstieg und sehr einfach zu verstehen, ein Einstieg, was das eigentlich ist und wie das funktioniert, äh, sehr visuell supergut nachzuvollziehen, ähm, und danach fragt man sich, warum es überhaupt jemals was anderes gegeben hat.

03:26:37.740 --> 03:26:45.960
 Also, äh, den auf jeden Fall anschauen, aber auch alle anderen, in die ich reingeschaut hab, wie immer großartig, äh, wirklich einfach eine tolle Veranstaltung.

03:26:45.960 --> 03:26:47.120
 Genau.

03:26:47.120 --> 03:26:49.760
 Das war mein Geilteil.

03:26:51.220 --> 03:26:52.020
 Heißt das etwa?

03:26:52.020 --> 03:26:53.100
 Wir sind am Ende.

03:26:53.100 --> 03:26:55.740
 Ja, jetzt, jetzt kommt was, wovor ich ein bisschen Angst hab, wer konzentriert hat.

03:26:55.740 --> 03:27:02.540
 Wir haben in der letzten Folge einen, äh, einen, äh, einen Endschingel, Endschingel endlich mal, äh, produziert.

03:27:02.540 --> 03:27:03.060
 Oh Gott.

03:27:03.060 --> 03:27:03.700
 Oh Gott.

03:27:03.700 --> 03:27:04.100
 Oh Gott.

03:27:04.100 --> 03:27:04.440
 Oh Gott.

03:27:04.440 --> 03:27:08.900
 Und ich hab, äh, wir haben sogar noch so Soundeffekte aufgenommen.

03:27:08.900 --> 03:27:09.260
 Oh.

03:27:09.260 --> 03:27:13.340
 Und ich hab das alles einfach, äh, zusammengepackt, bisschen durcheinander gewürfelt.

03:27:13.340 --> 03:27:13.680
 Ah, das ist zusammengeschnitten.

03:27:13.680 --> 03:27:13.980
 Mhm.

03:27:13.980 --> 03:27:14.880
 Oh Gott.

03:27:14.880 --> 03:27:17.240
 Das wollen wir, wollen wir zum Ende schreiten.

03:27:17.240 --> 03:27:20.760
 Vielleicht gibt's das nur, dieses eine Mal zu hören, weil ich danach sag, weil ich es danach,

03:27:20.760 --> 03:27:24.180
 ich, ich, ich werd's, äh, zensieren danach wahrscheinlich.

03:27:24.180 --> 03:27:27.560
 Wir haben ja gesagt, ich schick's hin und her, also das ist die, die Erstfassung, die

03:27:27.560 --> 03:27:28.420
 Rohversion, okay?

03:27:28.420 --> 03:27:29.940
 Ich lass's einfach mal laufen.

03:27:29.940 --> 03:27:30.960
 Ui.

03:27:33.360 --> 03:27:34.180
 Das Ende.

03:27:34.180 --> 03:27:34.220
 Das Ende.

03:27:34.220 --> 03:27:38.900
 Mega.

03:27:38.900 --> 03:27:39.900
 Das ist super.

03:27:39.900 --> 03:27:40.820
 Das lassen wir so.

03:27:40.820 --> 03:27:41.160
 Ja?

03:27:41.160 --> 03:27:41.820
 Gut.

03:27:41.820 --> 03:27:45.800
 Das können wir so lassen, ja.

03:27:45.800 --> 03:27:48.500
 Vielleicht, vielleicht, vielleicht lege ich noch, vielleicht lege ich noch so einen tiefen

03:27:48.500 --> 03:27:49.220
 Subbass drunter.

03:27:49.320 --> 03:27:52.720
 Ja, ja, ja, genau, also wir pimpen das noch ein bisschen, aber dann freut mich schon.

03:27:52.720 --> 03:27:57.140
 Genau, ich hätte gerne noch so eine, äh, wie, wie, wie nennt man das, die, die Ehrfurchts,

03:27:57.140 --> 03:28:00.920
 äh, die, die Ehrfurchts, äh, die Ehrfurchts, äh, das Ehrfurchtsregister, das wird noch gezogen,

03:28:00.920 --> 03:28:05.980
 ähm, mit, mit bisschen Rumgebrumme oder so, aber dann ist das, glaube ich, schon, passt

03:28:05.980 --> 03:28:06.860
 zu uns, ich sag's mal so.

03:28:06.860 --> 03:28:09.780
 Haben wir doch, haben wir nicht irgendwann mal gesagt, die Folge, in der wir, äh, ein

03:28:09.780 --> 03:28:11.120
 Endschickle haben, das wird unsere letzte.

03:28:11.120 --> 03:28:11.740
 Oh, oh.

03:28:11.740 --> 03:28:12.960
 Oh, oh.

03:28:12.960 --> 03:28:15.260
 Okay, äh, tschüss.

03:28:15.260 --> 03:28:20.580
 Ach ja, es ist genau 0 Uhr jetzt gerade.

03:28:20.580 --> 03:28:21.660
 Mensch.

03:28:21.660 --> 03:28:23.220
 Wir hören auf mit einer Schnapszahl.

03:28:23.220 --> 03:28:25.460
 Es ist nämlich, Mensch, Folge 33, ne?

03:28:25.460 --> 03:28:26.260
 Also, 33.

03:28:26.260 --> 03:28:27.480
 Und 0 Uhr 0.

03:28:27.480 --> 03:28:29.140
 Wir könnten, wir könnten nur einen Schnaps trinken.

03:28:29.140 --> 03:28:30.500
 Ach Gott.

03:28:30.500 --> 03:28:32.800
 Nee, nee.

03:28:32.800 --> 03:28:33.860
 Begeisterung ist groß.

03:28:33.860 --> 03:28:34.720
 Lass mal lieber.

03:28:35.160 --> 03:28:37.660
 Okay, ich, äh, ich, ich, ich, ich trinke, ich trinke einen für euch mit.

03:28:37.660 --> 03:28:38.600
 Okay, alles klar.

03:28:38.600 --> 03:28:39.220
 Das ist gut.

03:28:39.220 --> 03:28:40.400
 Ich trinke, ich trinke einen für euch mit.

03:28:40.400 --> 03:28:42.920
 Ja, super, wunderbar.

03:28:42.920 --> 03:28:43.880
 Mensch, oh, Wahnsinn.

03:28:43.880 --> 03:28:44.140
 Mensch.

03:28:44.140 --> 03:28:44.420
 Mensch.

03:28:44.420 --> 03:28:49.680
 So viel Input wieder und so viel Neues, ähm, neue APIs, neue Techniken, Wahnsinn.

03:28:49.680 --> 03:28:50.680
 Cool.

03:28:50.680 --> 03:28:56.360
 Ja, vielen, vielen Dank, Shep, dass du dabei warst und, äh, uns noch viel beigebracht hast,

03:28:56.360 --> 03:28:57.180
 was wir noch nicht kannten.

03:28:57.180 --> 03:29:02.140
 Das war jetzt wirklich Gold wert, äh, und ich hoffe, dass ihr Hörer und Hörerinnen, äh, auch

03:29:02.140 --> 03:29:07.360
 noch was lernen könnt, aber ich, naja, ihr wisst das natürlich alles schon, wir waren

03:29:07.360 --> 03:29:08.700
 die Einzigen, die das noch nicht wussten.

03:29:08.700 --> 03:29:09.500
 Bestimmt.

03:29:09.500 --> 03:29:09.800
 Genau.

03:29:09.800 --> 03:29:13.460
 Ja, schön, dass du dir Zeit genommen hast.

03:29:13.460 --> 03:29:14.540
 Sehr interessant.

03:29:14.540 --> 03:29:15.020
 Gerne, gerne.

03:29:15.020 --> 03:29:16.100
 Ja, hat Spaß gemacht.

03:29:16.100 --> 03:29:17.440
 Das freut mich.

03:29:17.440 --> 03:29:18.440
 Vielen Dank für die Einladung.

03:29:18.440 --> 03:29:19.660
 Sehr gerne.

03:29:19.660 --> 03:29:23.340
 Und, genau, wir sehen uns, äh, hier in diesem Internet.

03:29:23.340 --> 03:29:24.380
 Auf jeden Fall.

03:29:24.380 --> 03:29:24.620
 Genau.

03:29:24.620 --> 03:29:28.000
 So, das hört auch mal bei Working Draft rein.

03:29:28.000 --> 03:29:29.340
 Ja, auf jeden Fall nochmal an der Stelle.

03:29:29.340 --> 03:29:31.920
 Da hört ihr, da könnt ihr den, äh, den Shep regelmäßig hören.

03:29:31.920 --> 03:29:34.920
 Vielleicht nicht immer so elaboriert, aber.

03:29:34.920 --> 03:29:36.960
 Quatsch.

03:29:36.960 --> 03:29:42.920
 Ja, bei uns, äh, traditionsgemäß, hat der Gast das letzte Wort.

03:29:42.920 --> 03:29:43.380
 Ja.

03:29:43.380 --> 03:29:45.160
 Möchtest du noch was pluggen, oder?

03:29:45.160 --> 03:29:46.760
 Kannst du gerne jetzt.

03:29:46.980 --> 03:29:48.920
 Ich, nee, ich hab nichts zu pluggen.

03:29:48.920 --> 03:29:53.980
 Ich, äh, finde es, äh, auf jeden Fall krass, dass wir so eine lange Folge eingetütet haben.

03:29:53.980 --> 03:29:54.740
 Hätte ich nicht gedacht.

03:29:54.740 --> 03:30:01.560
 Äh, deswegen auch nicht nur Hut ab an uns, sondern auch an die Menschen, die das, äh, vielleicht bis zu diesem Zeitpunkt durchgehört haben.

03:30:01.560 --> 03:30:03.200
 Ähm, genau.

03:30:03.200 --> 03:30:10.000
 Und ihr könnt ja auch mal Feedback geben, ob das jetzt von der Länge her mehr zu eurem, äh, zum Weg zur Arbeit passt, als die kurzen Folgen.

03:30:10.000 --> 03:30:10.300
 Vielleicht.

03:30:10.300 --> 03:30:11.800
 Genau.

03:30:11.800 --> 03:30:13.240
 Super.

03:30:13.240 --> 03:30:14.700
 Ähm, bis bald.

03:30:14.700 --> 03:30:15.240
 Bis dann.

03:30:15.240 --> 03:30:15.800
 Ciao.

03:30:16.980 --> 03:30:17.980
 Ciao.