WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: HTML von a bis z-z I: Back to the root
Publishing Date: 2023-01-29T10:00:00+01:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/html-von-lta-bis-ltz-z-i-back-to-the-root/

00:00:00.080 --> 00:00:05.460
 Wo wir sind jetzt vorne, Folge 50, from the H to the T to the M to the L, Teil 1.

00:00:05.460 --> 00:00:21.820
 Herzlich willkommen bei Wo wir sind, ist vorne.

00:00:21.820 --> 00:00:28.640
 Frontend Fakten Frotzeleien, der Late Night Frontend Talkshow rund um Webdesign und Entwicklung.

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

00:00:54.940 --> 00:01:00.620
 Hello in 2023, wir sind zurück.

00:01:00.620 --> 00:01:01.620
 Hallöchen.

00:01:01.620 --> 00:01:06.320
 Ja, erster Podcast des Jahres und wir haben schon Ende Januar.

00:01:06.320 --> 00:01:07.400
 Mensch.

00:01:07.400 --> 00:01:09.820
 Ja, wir sind halt einfach faule Säcke.

00:01:09.820 --> 00:01:11.240
 So ist es eben.

00:01:11.420 --> 00:01:17.720
 Ja, wir haben uns den Schönheitsschlaf gegönnt, von dem ihr hier nichts seht.

00:01:17.720 --> 00:01:21.680
 Ja, ich meine, hat zwar nichts gebracht, aber wir haben es versucht.

00:01:21.680 --> 00:01:27.520
 Ja, dafür sind wir jetzt hoffentlich frisch erholt und motiviert, ne?

00:01:27.520 --> 00:01:29.040
 Ja, total.

00:01:29.040 --> 00:01:30.320
 Also los geht's.

00:01:30.320 --> 00:01:31.300
 Los geht's.

00:01:31.340 --> 00:01:34.420
 Ja, dann machen wir noch Bier, bevor wir die Retro schalten.

00:01:34.420 --> 00:01:35.580
 Machen wir noch Bier, machen wir noch Bier.

00:01:35.580 --> 00:01:41.760
 Ich habe heute ein, ich habe vorhin schon mal gelesen auf der Flasche und war ein bisschen überrascht

00:01:41.760 --> 00:01:44.140
 und habe mich dann gefragt, wieso heißt es so?

00:01:44.140 --> 00:01:48.660
 Also Zwickel steht groß drauf, aber Aktien, Zwickel, Kellerbier.

00:01:48.660 --> 00:01:49.460
 Warum Aktien?

00:01:49.460 --> 00:01:50.180
 Aktien, Zwickel.

00:01:50.180 --> 00:01:54.700
 Oder wird es vielleicht dann anders ausgesprochen in dem Fall, Aktien oder Aktien?

00:01:54.700 --> 00:01:58.120
 Oder kann man da Aktien kaufen?

00:01:58.120 --> 00:02:03.500
 Es ist vielleicht naturbelassenes, hefetrübes, unfiltriertes Bier.

00:02:03.500 --> 00:02:07.700
 Das ist wieder in so einer schönen Plöbbel-Flasche.

00:02:07.700 --> 00:02:08.560
 Gut.

00:02:08.560 --> 00:02:11.640
 Und 5,3 Prozent, so, das ist meins.

00:02:11.640 --> 00:02:16.700
 Ja, ich habe eins aus Bayern mitgebracht, wo ich über Silvester war, und zwar von der Brauerei

00:02:16.700 --> 00:02:20.060
 Kamba Handwerk, Imperial IPA.

00:02:20.180 --> 00:02:22.200
 Ein Imperial India Pale Ale.

00:02:22.200 --> 00:02:25.760
 Und habe dann gesehen, oh, 8,9 Prozent.

00:02:25.760 --> 00:02:27.540
 Das ist ein starkes Bier.

00:02:27.540 --> 00:02:29.720
 Also es könnte, Imperial, genau.

00:02:29.720 --> 00:02:38.840
 Also es könnte Richtung Ende hin, wenn ich anfange zu lallen oder sehr müde wirke, dann wisst ihr warum.

00:02:38.840 --> 00:02:40.660
 Also alles wie immer.

00:02:40.660 --> 00:02:43.620
 Also eigentlich wie immer, nur vielleicht noch stärker.

00:02:43.620 --> 00:02:46.420
 Noch stärker wie immer, okay, machen wir mal.

00:02:46.420 --> 00:02:47.520
 Lange Rede, kurzes Bier.

00:02:48.520 --> 00:02:55.820
 Warte mal, ich habe ja im letzten Streamen gelernt, wir streamen übrigens auch auf Twitch, falls du das noch nicht weißt, liebe Zuhörerin.

00:02:57.440 --> 00:03:02.040
 Dass diese Plöbbel-Flaschen manchmal irgendwie sehr unbefriedigend sind und deswegen schüttel ich jetzt so ein bisschen.

00:03:02.040 --> 00:03:03.380
 Das ist, wenn das Gummi so klebt.

00:03:03.380 --> 00:03:04.540
 Dann macht das erst mal so.

00:03:04.540 --> 00:03:12.540
 Das kann ich natürlich jetzt von hier aus nicht beeinflussen, aber ich habe jetzt mal ein bisschen, ein kleines bisschen geschüttelt in der Hoffnung, dass jetzt ein sehr befriedigendes Geräusch kommt.

00:03:13.960 --> 00:03:18.680
 Ja, okay, das ist der Trick, ein bisschen schütteln, nicht so, dass es komplett überläuft.

00:03:18.680 --> 00:03:20.700
 Das Mikrofon hat übersteuert, das ist ein gutes Zeichen.

00:03:20.700 --> 00:03:25.100
 Es war schon, okay, das merke ich mir jetzt, das hat sehr gut funktioniert.

00:03:25.100 --> 00:03:26.680
 Wollen wir noch kurz durchs Portal anstoßen?

00:03:26.680 --> 00:03:27.420
 Sehr gut.

00:03:27.420 --> 00:03:32.620
 Alles klar, so, schauen wir mal.

00:03:32.620 --> 00:03:35.260
 Konstantin trinkt schon, ich warte noch.

00:03:35.260 --> 00:03:37.740
 Ja, das schmeckt schon sehr stark.

00:03:37.740 --> 00:03:49.680
 Hui, also so, ich mag ja IPA, aber also es ist schon diese fruchtige Note, aber sehr, wie soll ich sagen, schon noch ein bisschen herb und sehr, sehr stark.

00:03:49.680 --> 00:03:50.900
 Mag spannend.

00:03:51.640 --> 00:03:59.400
 Also ich mag meins, muss ich sagen, das ist wieder so, das ist so ein Bier, das so ein bisschen was im Verborgenen hält, finde ich.

00:03:59.400 --> 00:04:12.400
 So auf den ersten, so der Geschmack, ich weiß gar nicht genau, wie die Bierexperten das nennen, also der Geschmack, den man so als erstes im Mund hat, ist so ein bisschen säuerlich, aber es entfaltet sich so hintenrum dann so, so ein bisschen.

00:04:12.400 --> 00:04:15.780
 Ja, total witzig.

00:04:15.780 --> 00:04:17.020
 Warte.

00:04:20.020 --> 00:04:25.520
 Ja, da kommt dann sowas, ähm, sowas Rauchiges irgendwie raus, das finde ich gut.

00:04:25.520 --> 00:04:34.000
 So, das packe ich mal jetzt auf die Bierliste, weil irgendwann wird es noch unser Bierpaket geben, wer weiß, ob wir das jemals schaffen, aber.

00:04:34.000 --> 00:04:38.500
 Wir haben ja auch gesagt, wer weiß wann, ob wir jemals einen Endschingel haben, und wir haben einen.

00:04:38.500 --> 00:04:39.960
 Stimmt.

00:04:44.700 --> 00:04:45.580
 Ich tippe.

00:04:45.580 --> 00:04:49.580
 So, gut, es ist auf der Liste, ich muss sowas immer sofort machen, sonst vergesse ich's.

00:04:49.580 --> 00:04:51.760
 Okay.

00:04:51.760 --> 00:04:52.920
 So.

00:04:52.920 --> 00:04:53.900
 Ähm.

00:04:53.900 --> 00:04:57.220
 Dann würde ich sagen, können wir.

00:04:57.220 --> 00:04:58.020
 Legen wir los.

00:04:58.020 --> 00:04:58.820
 Machen wir.

00:04:58.820 --> 00:05:06.680
 BW S.I.V. präsentiert die Retrospektive.

00:05:09.320 --> 00:05:12.440
 Ein bisschen klingt's nach Monty Python, muss ich jetzt sagen.

00:05:12.440 --> 00:05:16.020
 Das hab ich jetzt, das merk ich jetzt grad irgendwie zum ersten Mal, oder vielleicht hab ich's da schon mal gesagt.

00:05:16.020 --> 00:05:20.460
 Ist irgendwie total irgendwie, ich muss das sehr an Monty Python denken bei dieser Musik.

00:05:20.460 --> 00:05:24.880
 Ist aber auch so nehm alten, äh, diese alten Nachrichten-Reels aus Amerika.

00:05:24.880 --> 00:05:25.480
 Ja.

00:05:25.480 --> 00:05:26.320
 Dann stammt das.

00:05:26.320 --> 00:05:29.040
 Ja, du darfst den Anfang machen.

00:05:29.180 --> 00:05:50.940
 Ja, ähm, es hat sich jetzt ein bisschen was angesammelt, ähm, und wir haben zwar einiges im Stream auch schon besprochen, aber da wir wissen, dass, äh, nicht alle die, oder dass die, dass die Schnittmenge zwischen Podcast-ZuhörerInnen und Stream-ZuschauerInnen, ähm, so, nicht so groß ist, äh, hat sich halt jetzt einfach über die Zeit ein bisschen was angesammelt und müssen wir jetzt durch.

00:05:51.320 --> 00:06:00.360
 Hab's vorhin sogar schon noch ein bisschen weniger gemacht, dass, dass es nicht zu hart wird, weil, naja, aber ich weiß ja, dass es auch Menschen gibt, die, äh, die unser Gelaber viel lieber mögen als das Thema.

00:06:00.360 --> 00:06:19.120
 Ja, ähm, der erste Punkt, und der ist jetzt auch leider schon ein bisschen alt, ähm, aber ich hab gedacht, weil wir hier im Podcast sind und ich halte es für hervorhebenswert, ähm, Pocket Casts, die, äh, Podcast-Software, die ich hier schon mal empfohlen hab, also mit der ich immer meine Podcasts höre, ist jetzt Open-Source geworden.

00:06:19.280 --> 00:06:29.880
 Also, äh, vor, vor einiger Zeit wurde Pocket Casts aufgekauft von Automatic, das ist die Firma, die ja auch WordPress, äh, vorantreibt, ja, ja.

00:06:29.880 --> 00:06:35.120
 Also, ich mein, also, ich, mit WordPress wusste ich aber, dass die, äh, Pocket Casts aufgekauft haben, wusste ich nicht. Krass.

00:06:35.120 --> 00:06:41.600
 Und damals war, glaub ich, tatsächlich auch schon das Ziel, ähm, dass das irgendwann Open-Sourced wird.

00:06:41.600 --> 00:06:43.320
 Ah, okay. Und, äh.

00:06:43.320 --> 00:06:48.680
 Trotz der, äh, Pale-Geschichte, ne? Das war, wurde irgendwann eingeführt, so, es gibt jetzt irgendwie Subscriptions und so.

00:06:48.680 --> 00:06:50.140
 Und trotzdem waren sie es Open-Sourced.

00:06:50.140 --> 00:06:58.840
 Hm, das mit dem Pay, das war schon lange, bevor sie übernommen wurden. Ich weiß nicht, ob das jetzt raus, ob das jetzt so bleibt, äh, oder nicht, bin ich mir nicht sicher.

00:06:58.840 --> 00:07:04.740
 Ähm, keine Ahnung, aber auf jeden Fall wurden die übernommen von, äh, von Automatic.

00:07:04.740 --> 00:07:04.960
 Krass.

00:07:05.060 --> 00:07:13.640
 Äh, und genau, ist jetzt, äh, ist jetzt Open-Sourced. Also, was heißt das? Ich glaub nicht, dass das ganze Projekt Open-Sourced wird. Soweit ich weiß, sind's erst mal die Apps.

00:07:13.640 --> 00:07:14.500
 Mhm.

00:07:14.500 --> 00:07:40.960
 Also, es gibt jetzt ein GitHub-Repository, ich kann es auch mal noch hier in die Schaunots, äh, als, als Link packen. Moment. Äh, es gibt ein GitHub-Repository für die iOS-App und eins für die Android-App. Und ich finde es eigentlich immer total cool, wenn so, sagen wir mal, gestandene Software Open-Source, äh, zu Open-Source freigegeben wird, weil, dann kann man zumindest mal reingucken. Ich will, ich will ja vielleicht gar nicht irgendwie das Ding jetzt angreifen oder irgendwie so ein eigenes releasen.

00:07:40.960 --> 00:07:44.220
 Ich will mein eigenes releasen, aber ich kann zum Beispiel lernen, wie macht man denn was?

00:07:44.220 --> 00:07:49.120
 Genau, wie macht man sowas, äh, und so, dass es am Schluss nach sauberer, schöner Software aussieht, ja.

00:07:49.120 --> 00:07:51.760
 Das weiß man ja gar nicht, ob das sauber und schön ist am Ende.

00:07:51.760 --> 00:07:53.560
 Naja, der Code nicht, aber ich meine, man kennt ja die App.

00:07:53.560 --> 00:07:57.900
 Genau, also, es sieht halt einfach nach einer, nach einer fertigen, gestandenen App aus, ja.

00:07:57.900 --> 00:08:10.780
 Genau, es ist ja schon manchmal so, dass man so denkt, haja, wie würde man denn jetzt so ein Element hier irgendwie bauen? Und ich meine, klar, das ist jetzt natürlich Native-Code, das hat jetzt mit HTML und CSS ziemlich sicher relativ wenig zu tun. Ähm, also, ich hab nicht in den Code reingeschaut.

00:08:10.860 --> 00:08:18.120
 Ich hab gar nicht, könnte Web-App sein, ich geh aber davon aus, dass es das nicht ist. Äh, es sind wahrscheinlich, ähm, ist wahrscheinlich Native-Code für iOS und für Android.

00:08:18.120 --> 00:08:26.620
 Aber ich find das immer total interessant, ähm, wenn sowas Open-Source wird, also sowas, sowas Ernsthaftes, sowas, was erfolgreich ist, weil man sich da bestimmt viel abgucken kann.

00:08:26.620 --> 00:08:31.320
 Ähm, und von daher dachte ich mir, erwähne ich das mal, ähm, ich kann es immer noch uneingeschränkt empfehlen.

00:08:31.420 --> 00:08:43.680
 Ich nutze auch die Free-Version, die reicht mir völlig aus zum Podcast hören und das Killer-Feature, das hab ich ja schon mal angesprochen, äh, ist das Zeit, also die Stille überspringen, ähm, das ist wirklich grandios.

00:08:43.680 --> 00:08:48.500
 Und, äh, die Statistiken dazu sagen mir dann irgendwie, ich hab hier 100 Jahre schon gespart, deswegen.

00:08:48.500 --> 00:08:52.500
 Genau, das, dachte ich mir, ist, äh, vielleicht erwähnenswert.

00:08:52.660 --> 00:09:01.220
 Sehr cool. Und, äh, wird vielleicht auch dazu führen, dass noch das eine oder andere coole Feature den Weg reinfindet, was, äh, in Closed-Source-Entwicklung vielleicht einfach nicht so priorisiert worden wäre.

00:09:01.220 --> 00:09:11.660
 Aber wenn jemand dann sich findet, der es, das macht, sehr schön zu sehen, dass, ähm, ja, dass, dass, dass man auch den Schritt gehen kann, was, äh, was schon kommerziell ist, dann doch Open-Source zu machen.

00:09:12.360 --> 00:09:33.920
 Ja, und vor allem auch, äh, ich find das, ich find das ja echt schon, ähm, beeindruckend, wie, wie, äh, Automatic, äh, in Form wahrscheinlich immer noch von diesem Matt Mullenweg, oder ich weiß nicht genau, wie man den Nachnamen ausspricht, äh, dass der das so durchzieht über so eine lange Zeit, aber auch mit WordPress, also, dass er, also ich mein, haben die nicht auch Tumblr übernommen? War das nicht so?

00:09:33.920 --> 00:09:34.800
 Ja, keine Ahnung.

00:09:34.800 --> 00:09:35.720
 Doch, doch.

00:09:35.720 --> 00:09:41.900
 Ich frag mich immer, wie machen die eigentlich Geld? Ich mein, die haben auch schon so, so, so Paid-Geschichten, ne, aber schon krass.

00:09:42.200 --> 00:10:12.000
 Man hat so ein bisschen das Gefühl, ich, ich kann jetzt nichts, nichts persönlich über, über den Matt sagen, oder über Automatic, weil ich nicht so richtig viel mitkriege, aber das ist ja manchmal auch ganz gut, wenn man nicht so viel von was mitkriegt, dann bedeutet das, die machen zumindest nicht ganz viel Scheiße die ganze Zeit, ähm, und, äh, ich hab, aber das sind immer coole Moves, also Gravatar zum Beispiel ist auch Automatic und, äh, free for all und, und, und, und hat noch nie irgendwie, gut, die werden da wahrscheinlich irgendwie Daten einsammeln, aber, äh, trotzdem, also, das ist so viel, ich hab auch festgestellt,

00:10:12.040 --> 00:10:20.960
 dass die, ähm, dass die, ähm, WordPress-Plugins auch, ich weiß nicht, ob die übernehmen irgendwann oder ob sie selbst bauen, halt so richtig gute WordPress-Plugins, ähm, machen sie halt auch selbst, also, es ist,

00:10:20.960 --> 00:10:31.720
 es ist gut, ich hab, was war das? Ich hab vor kurzem bei einem der WordPress-Plugins, das wir einsetzen, wo ich dachte, das ist eigentlich schon fett, ähm, hab ich dann gesehen, ah, das ist von Automatic selbst.

00:10:32.260 --> 00:10:34.400
 Ah, was ist das? War das das Security-Plugin?

00:10:34.400 --> 00:10:35.720
 Das kann sein, das ist das Security.

00:10:35.720 --> 00:10:36.700
 Ja.

00:10:36.700 --> 00:10:38.280
 Genau.

00:10:38.280 --> 00:10:39.520
 Das dazu.

00:10:39.520 --> 00:10:40.120
 Interessant.

00:10:40.120 --> 00:10:49.600
 Ja, ähm, ich, äh, ich, äh, hab schon gestreamt hier aus dem Raum, aber ich, äh, podcaste gerade zum ersten Mal aus meinem neuen Büro.

00:10:50.200 --> 00:10:56.040
 Ich bin hier innerhalb vom Haus umgezogen, im Stream konnte man's schon, äh, begutachten, hat sich optisch ziemlich verändert.

00:10:56.040 --> 00:11:04.360
 Nicht mehr die, die alte Dia-Projektor-Leinwand im Hintergrund, damit man mein Chaos im Zimmer nicht sieht, äh, sondern es sieht jetzt echt schick aus, hab's mir hier gemütlich gemacht

00:11:04.360 --> 00:11:12.040
 und geh hier auch jetzt gerne arbeiten und ich hab so ein bisschen dachte, wenn ich jetzt da schon mir ein neues Büro einrichte, dann, äh, möchte ich so ein paar Spielereien einbauen.

00:11:12.040 --> 00:11:23.680
 Ich mein, das eine waren natürlich hier Lichter für den, äh, für den Stream, ähm, also die Yeelights, die ich ja eh schon hatte, ansteuerbar, äh, hab ich jetzt noch ergänzt hier durch so eine LED, äh, Leiste, durch so eine indirekte, das sieht ganz cool aus

00:11:23.680 --> 00:11:32.380
 und lässt sich auch im Stream farblich steuern. Ähm, mein Ringlicht hier steht jetzt endlich nicht mehr so an der Dachschräge, dass man's eigentlich gar nicht richtig, äh, wahrnimmt und so.

00:11:32.480 --> 00:11:45.440
 Und dann hab ich, äh, ich bin jetzt quasi direkt im Treppenhaus, das heißt, die Gefahr, also die, die Frequenz, in der hier Leute vorbeilaufen könnten und eventuell stören, die ist höher als vorher, ähm, aber wenn niemand da ist, bin ich dafür schon abgeschottet

00:11:45.440 --> 00:12:02.120
 und trotzdem dachte, ich möchte gerne nach außen hin zeigen, ich bin gerade beschäftigt, nehm grad Podcast auf oder ich, ich streame gerade und hab mir dann so ein On-Air-Schildchen bestellt, wie es das beim, beim Radio außer, außerhalb von den Studios gibt und, ähm, dachte dann, ja, cool, On-Air-Schildchen ist mit so einem USB-C-Stecker,

00:12:02.320 --> 00:12:11.020
 dann brauch ich noch so eine, äh, steuerbare, äh, Steckdosenleiste oder halt so ein, so ein Steckerstrom, ähm, und dann kann ich das über die App steuern.

00:12:11.680 --> 00:12:22.160
 Und dann dachte ich, ah, aber man kann das ja noch cooler machen, ich hab ja ein, äh, SIP-Telefon, SIP, ähm, also so ein, so ein Voice-Over-IP-Telefon.

00:12:22.620 --> 00:12:25.060
 Nee, nee, nee, du hast das falsch ausgesprochen, das ist ein SIP-Telefon.

00:12:25.060 --> 00:12:25.760
 Ein SIP-Telefon.

00:12:25.760 --> 00:12:29.320
 Da, da tropft's immer raus, man weiß nicht so genau was, aber.

00:12:29.320 --> 00:12:32.680
 Ja, du hast dich gewundert, was das ist, als ich dir ein Screenshot geschickt hab.

00:12:32.680 --> 00:12:33.180
 Ja.

00:12:33.180 --> 00:12:35.580
 Was ist das denn mit diesem Kabel da dran?

00:12:35.580 --> 00:12:40.140
 Diesem Spiralkabel, sowas sieht man, hab ich mal im Museum gesehen.

00:12:40.140 --> 00:12:48.240
 Ja, dann hab ich mal geguckt so, das Ding ist ja ans Internet angebunden, kann man das denn irgendwie, kann man da Sachen abfangen, was da passiert, ob ein Anruf kommt oder so.

00:12:48.680 --> 00:13:11.460
 Dann hab ich gesehen, auf der Web-Oberfläche, die das Ding hat, da kann ich direkt Action-URLs hinterlegen, also eine ganz normale HTTP-URL, ähm, die aufgerufen wird, wenn was Bestimmtes passiert, also Telefon vom Hörer nehmen, Telefonhörer wieder auflegen, ähm, es kommt ein Anruf rein, ich nehme einen Anruf an, ich lehne den Anruf ab, ich beende den Anruf, da kann ich bei jeder Aktion, äh, was ausspielen oder ansteuern lassen.

00:13:13.020 --> 00:13:23.080
 Ähm, äh, diese, dieser Plug, den ich hab, und, äh, jetzt wollte ich mich noch bedanken bei jemandem, der auf Twitter mir den empfohlen hat, oder auf Mastodon, ich weiß jetzt nur den Namen nicht mehr, ähm, ein Shelly Plug ist das.

00:13:23.080 --> 00:13:30.980
 Ach so, ach, ein Shelly heißt der, heißt der Stecker, aber ich weiß nicht mehr, wer das war, war das der, ein Fabian, glaube ich, ach so.

00:13:30.980 --> 00:13:31.340
 Egal.

00:13:31.340 --> 00:13:36.080
 Ja, okay, Shelly Plug S heißt das Ding, also ich verlinke das natürlich auch mit, mit Ref-Links in den Shownotes, wer es kaufen möchte.

00:13:36.080 --> 00:13:38.660
 Ich hab natürlich ein Clown gefrühstückt mal wieder, es ist einfach.

00:13:39.740 --> 00:13:49.960
 Und die Dinge sind ganz cool, weil die sich, ähm, also für, für viele Sachen braucht man dann oft, äh, irgendwelche Note-Packages, wenn man es nicht selber ansteuern will, die dann mit, mit TCP irgendwie eine Verbindung aufbauen und was weiß ich.

00:13:49.960 --> 00:13:54.720
 Und bei diesen Shelly-Produkten ist das echt ganz cool, weil die wirklich einfach eine HTTP-API haben.

00:13:54.720 --> 00:14:00.260
 Äh, eine REST-API, da kann ich einfach einen Request hinschicken und zack, kann ich das Ding an- und ausschalten über einen Parameter.

00:14:00.260 --> 00:14:03.700
 Und das ist ziemlich cool, weil simpler geht's nicht und so mag ich das eigentlich am liebsten.

00:14:03.700 --> 00:14:07.360
 Und, ähm, jetzt hab ich diese Aktion, oder?

00:14:07.360 --> 00:14:11.720
 Ja, genau, also Action-URL nennt sich's, also klingt wie ein Webhook bei Git zum Beispiel.

00:14:11.720 --> 00:14:12.420
 Ja, ja, ja.

00:14:12.420 --> 00:14:19.820
 Ähm, und das heißt, wenn ich jetzt einen Anruf bekomme oder ich einen Anruf tätige, dann geht außen das On-Air-Licht an und wenn ich den wieder auflege, dann geht's aus.

00:14:20.040 --> 00:14:28.840
 Und dann hab ich festgestellt, ich kann ja eigene Buttons auch noch belegen in meinem Display und jetzt kann ich über Buttons in meinem Telefon-Display kann ich auch das Licht an- und ausschalten.

00:14:28.840 --> 00:14:39.320
 Und man könnte das soweit treiben, ähm, wir haben jetzt auch bei OBS-Studio ein bisschen umgebaut, äh, mit dem wir ja streamen, wo du jetzt auch von externen Szenen wechseln kannst und sowas, was ganz cool ist.

00:14:39.320 --> 00:14:45.320
 Und das könnte ich theoretisch auch mal, also ich könnte mir so einen, äh, wie heißen die, Elgato-Stream-Deck, ne, heißt das?

00:14:45.320 --> 00:14:45.740
 Ja.

00:14:46.040 --> 00:14:50.100
 Äh, dieses, so ein Display, eigentlich nur ein Touch-Display zum, zum Steuern von, von Streams.

00:14:50.100 --> 00:14:51.160
 In das Telefon reinprogrammieren.

00:14:51.160 --> 00:14:54.980
 Das könnte ich theoretisch auch mal machen, also ich könnte mir Buttons machen, um die Szenen zu wechseln in OBS-Studio.

00:14:54.980 --> 00:14:57.320
 Aber ich, ich glaube, das ist ein bisschen übertrieben.

00:14:57.320 --> 00:14:58.520
 Aber ich finde das schon.

00:14:58.520 --> 00:15:00.220
 Aber geil, aber geil wär's schon.

00:15:00.220 --> 00:15:03.960
 Ja, ja, ja, irgendwie reizt mich schon, aber die Zeit, äh, hab ich glaube ich nicht.

00:15:03.960 --> 00:15:06.880
 Das ist so wie, dass Leute Doom überall versuchen zum Laufen zu kriegen.

00:15:06.880 --> 00:15:08.000
 Ja, vielleicht krieg ich auch Doom da drauf.

00:15:08.000 --> 00:15:11.620
 So programmierst du dir halt ein Stream-Deck auf deinem Telefon, ich find's ziemlich cool.

00:15:11.620 --> 00:15:12.620
 Ja, wäre theoretisch.

00:15:12.620 --> 00:15:18.020
 Also ich glaube, ich glaube, da würden, da würden sich Leute, äh, finden, die zuschauen im Stream, während du das machst.

00:15:18.020 --> 00:15:20.620
 Dann, ja, dann lass es uns doch mal in Angriff nehmen.

00:15:20.620 --> 00:15:21.200
 Also komm schon mal.

00:15:21.200 --> 00:15:24.520
 Ich hab schon überlegt, eigentlich wäre das sogar was zum Zeigen mal bei einem Vortrag.

00:15:24.520 --> 00:15:26.640
 Also irgendwie bei einer, bei einer Konferenz irgendwie so hier.

00:15:26.640 --> 00:15:27.520
 Total, total.

00:15:27.520 --> 00:15:30.900
 Ich hab hier ein Online-Ehrlich und hier ist mein Telefon und, äh, wie hab ich das gemacht?

00:15:30.900 --> 00:15:31.920
 Mal gucken, mal gucken.

00:15:31.920 --> 00:15:32.520
 Absolut, mal gucken.

00:15:32.520 --> 00:15:37.180
 Also total, also das wär, das wär, das wär, da, damit krieg ich, krieg ich bei der Gulasch-Programmier-Nacht unter.

00:15:37.180 --> 00:15:37.660
 Kein Problem.

00:15:37.660 --> 00:15:39.700
 Ja, wenn's bis dahin steht, gucken wir mal.

00:15:39.700 --> 00:15:40.220
 Auf jeden Fall.

00:15:40.220 --> 00:15:46.080
 Ähm, ja, apropos, wenn wir gerade schon über Konferenzen reden, ne, im Stream haben wir's schon gesagt, aber hier glaube ich noch nicht.

00:15:46.080 --> 00:15:48.820
 Äh, wir sind, äh, auf der Beyond Tellerrand anzutreffen.

00:15:48.820 --> 00:15:49.500
 Genau.

00:15:49.500 --> 00:15:52.040
 Am 17. und 18. April in Düsseldorf.

00:15:52.040 --> 00:15:56.520
 Ähm, also kommt da hin, ist eine coole Konferenz, hab ich gehört, du warst schon, ich war noch nicht.

00:15:56.800 --> 00:16:02.040
 Ähm, ich war schon, schon öfter, als ich Finger, nee, das stimmt nicht, als ich Finger an einer Hand hab.

00:16:02.040 --> 00:16:18.640
 An einer Hand, okay. Ähm, und, äh, also es klingt auch alles ganz cool, so von deinen Erzählungen und, äh, lohnt sich bestimmt auf jeden Fall und selbst wer nicht zur Konferenz kommen möchte oder kann, ähm, sich nicht leisten will oder kann, ähm, man trifft uns bestimmt auch davor und danach irgendwie an und, äh, wir machen für einen ZuhörerInnen-Treffen.

00:16:19.080 --> 00:16:22.640
 Genau. Ähm, und, genau, merkt euch das einfach, wenn ihr da Zeit habt und Lust habt.

00:16:22.640 --> 00:16:27.920
 Das werden wir auf jeden Fall machen und, ähm, das wird wahrscheinlich, warte mal, hast du gesagt, 17. oder 18. ist die Konferenz, ne?

00:16:27.920 --> 00:16:28.280
 Genau.

00:16:28.280 --> 00:16:37.600
 Das wird dann, also wir haben angepeilt und das ist jetzt noch nicht so 100% sicher, würde ich, wollte ich gerne auch mit dem, äh, Veranstalter absprechen, ob, äh, ob er irgendwie noch eine bessere Idee hat.

00:16:37.600 --> 00:16:46.660
 Ähm, wir würden das wahrscheinlich am Tag vor der Konferenz machen, am Sonntag, den 16. ziemlich sicher, irgendwie nachmittags, abends, äh, für Menschen, die schon in der Stadt sind.

00:16:47.220 --> 00:16:51.600
 Oder die vielleicht auch für den Tag hinkommen, aber sich nicht extra Urlaub nehmen für, für die Konferenz, weil sie eh nicht hingehen.

00:16:51.600 --> 00:16:53.800
 Äh, Sonntag ist da, denke ich, ganz praktisch, ne?

00:16:53.800 --> 00:16:57.980
 Dass man, äh, ja, Düsseldorf ist auch immer ganz schön, ist auf jeden Fall so oder so eine Reise wert.

00:16:57.980 --> 00:17:02.040
 Ich war jetzt im April noch nie da, glaube ich, ich war sonst immer im Mai, da war das Wetter immer toll.

00:17:02.040 --> 00:17:03.360
 Äh, schauen wir mal.

00:17:03.360 --> 00:17:07.300
 Aber ich meine, äh, der Klimawandel hilft uns, wir haben sowieso bald nur noch gutes Wetter.

00:17:07.300 --> 00:17:09.320
 Von daher ist es ja noch egal.

00:17:09.320 --> 00:17:15.840
 Genau, also da auf jeden Fall, da kommen, da kommen noch Informationen noch ganz genauer, wenn wir das abgesprochen haben.

00:17:15.840 --> 00:17:17.940
 Ähm, das könnten wir eigentlich demnächst mal machen.

00:17:17.940 --> 00:17:19.140
 Ja.

00:17:19.140 --> 00:17:22.620
 Ich hab da, äh, ja, da kann ich dir später im Nachgang noch was erzählen.

00:17:22.620 --> 00:17:22.800
 Okay.

00:17:22.800 --> 00:17:27.020
 Ähm, da, da, ich hab da, ja, vielleicht haben wir es bald, bald geklärt.

00:17:27.020 --> 00:17:28.000
 Okay, alles klar.

00:17:28.000 --> 00:17:29.560
 So.

00:17:29.560 --> 00:17:30.880
 Okay.

00:17:30.880 --> 00:17:32.140
 Sollen wir zum Nächsten?

00:17:32.140 --> 00:17:32.540
 Ja.

00:17:32.540 --> 00:17:35.980
 Ähm, das hatten wir jetzt auch schon zweimal im Stream.

00:17:35.980 --> 00:17:38.720
 Entschuldigung, dass ich das immer sage, ich weiß, es gibt Leute, die das nervt.

00:17:39.380 --> 00:18:00.220
 Äh, und zwar, ähm, hab ich, äh, so zwischen den Jahren oder Anfang Feiertage, ähm, mal so ein bisschen reingeguckt in die Entwicklung von, ähm, dem, ähm, Open Source Client, äh, Mastodon Client Elk.

00:18:00.220 --> 00:18:09.260
 Ähm, das ist so ein Twitter-artiges Interface, was es mir den Umstieg leichter gemacht hat, äh, von Twitter zu Mastodon, weil das, weil da sehr viel sehr ähnlich ist.

00:18:09.260 --> 00:18:14.280
 Ähm, und, äh, ich hab mir dann gedacht, ja, ich, ich guck da irgendwie mal rein.

00:18:15.280 --> 00:18:23.260
 Ähm, weil mich einfach es interessiert hat, wie die so entwickeln und da gab's irgendwie so ein Discord-Channel und dann hab ich sofort irgendwie Zugriff aufs Repo gekriegt.

00:18:23.260 --> 00:18:25.460
 Das war damals noch nicht public, mittlerweile ist es public.

00:18:25.460 --> 00:18:34.520
 Und, äh, da hab ich dann so ein bisschen die Zukunft gesehen, wie ich Frontend-Development, so, wie ich mir die Zukunft vorstelle oder wie das irgendwie, wie das sein könnte.

00:18:34.520 --> 00:18:39.460
 Ähm, und wahrscheinlich ist es für manche jetzt schon irgendwie all der Käse, aber für mich war das neu.

00:18:39.460 --> 00:18:45.920
 Ähm, da sich nämlich in dem GitHub-Repo, die haben da, ähm, Stackblitz mit angebunden.

00:18:45.920 --> 00:18:48.600
 Es gibt aber auch viele andere Anbieter für, für sowas.

00:18:48.600 --> 00:18:58.960
 Und das, ähm, synkt dann das GitHub-Repo direkt rein, öffnet ein VSCode im Browser, startet direkt auf irgendeiner Maschine in der Cloud den Server,

00:18:58.960 --> 00:19:05.440
 baut irgendwie das NPM-Gedöns zusammen und zeigt mir dann sofort ein Preview von der App mit Live-Daten.

00:19:05.440 --> 00:19:09.140
 Und, ähm, das fand ich eine sehr beeindruckende Geschichte.

00:19:09.300 --> 00:19:11.360
 Also, das kann ich auf jeden Fall nur mal empfehlen, äh.

00:19:11.360 --> 00:19:15.600
 Also, für mich war es auch kein alter Käse, als du es gezeigt hast und ich fand's auch total genial.

00:19:15.600 --> 00:19:17.280
 Also, ich, ich hatte es echt begeistert.

00:19:17.280 --> 00:19:19.140
 Also, so wünscht man sich das eigentlich.

00:19:19.140 --> 00:19:25.280
 Genau, man muss dafür natürlich, äh, also, das Repo zu sehen muss man, naja, wahrscheinlich, geht wahrscheinlich ohne GitHub-Account.

00:19:25.280 --> 00:19:27.280
 Also, ich pack auf jeden Fall das Repo mal rein.

00:19:27.280 --> 00:19:29.860
 Ähm, also, das, das ist schwer zu beschreiben.

00:19:29.860 --> 00:19:32.520
 Man muss das, man muss das mal gesehen und erlebt haben.

00:19:32.520 --> 00:19:35.400
 Und deswegen, äh, rufe ich euch auf, probiert es mal aus.

00:19:35.400 --> 00:19:38.800
 Ihr braucht dafür einen Stackblitz-Account, aber der kostet nichts.

00:19:39.140 --> 00:19:47.980
 Äh, und dann geht ihr einfach auf das GitHub-Repo, das kommt in die Show Notes, ähm, und, äh, da gibt's einfach nur einen Knopf Open in Code Flow.

00:19:47.980 --> 00:19:54.620
 Den drückt ihr und dann passiert die restliche Magie im Browser, sofern ihr bei Stackblitz eingeloggt seid.

00:19:55.320 --> 00:20:02.940
 Ähm, ähm, und dann habt ihr einfach sofort eine, eine fertige Entwicklungsumgebung mit, mit, äh, Reload, wie heißt das, Hot?

00:20:02.940 --> 00:20:05.420
 Ja, Hot, oder Hot Module Reloading.

00:20:05.420 --> 00:20:12.280
 Hot Module Reloading, also, das heißt, ich kann irgendwie ein File ändern und sofort wird, wird, ähm, die Preview geupdatet und so weiter.

00:20:12.760 --> 00:20:20.000
 Extrem beeindruckend und quasi, ich würde das nennen, Zero, äh, Zero-Time-Onboarding-Workflow oder so.

00:20:20.000 --> 00:20:23.060
 Es ist wirklich quasi, ich drück mir auf den Knopf und dann kann ich sofort loslegen.

00:20:23.060 --> 00:20:26.300
 Also, so macht es doch Spaß, womit zu machen bei Open Source Software.

00:20:26.300 --> 00:20:26.420
 Genau.

00:20:26.420 --> 00:20:31.780
 Weil du hast irgendwie, du willst eine Kleinigkeit fixen und du musst dich nicht erstmal in das komplette Dev-System einarbeiten,

00:20:31.780 --> 00:20:37.720
 irgendwelche Inkompatibilitäten bei dir, äh, bekämpfen und so, sondern einfach, zack, du bist im Code,

00:20:37.720 --> 00:20:45.100
 du kannst direkt die Änderung sehen und kannst, kannst das committen auf einem neuen Branch und, äh, machst, machst einen Merge-Request, also, perfekt.

00:20:45.100 --> 00:20:50.520
 Also, die, der Schmerz, der damit vermieden wird, du hast es grad schon so teilweise angesprochen, ist,

00:20:51.020 --> 00:20:53.700
 also, wie oft habe ich schon bei Open Source mir überlegt, ah, mache ich da jetzt mit?

00:20:53.700 --> 00:20:58.700
 Und das ist dann oft schon daran gescheitert, dass ich mir die Entwicklungsumgebung irgendwie aufsetze.

00:20:58.700 --> 00:21:04.100
 Weil selbst wenn das irgendwie mit Docker oder so gemacht war, wo es, wo man angeblich nichts mehr machen muss,

00:21:04.100 --> 00:21:08.940
 ich einfach nur, ja, wir, den Container, irgendwelche Scheißfehler sind dann doch geflogen und dann weiß ich nicht.

00:21:08.940 --> 00:21:13.980
 Und dann heißt, ja, und wenn du auf dem Betriebssystem bist, dann musst du dies und dann musst du dies und dann musst du das noch machen

00:21:13.980 --> 00:21:15.580
 und dann musst du noch dich dreimal im Kreis drehen.

00:21:15.580 --> 00:21:20.720
 Wenn es überhaupt in der Beschreibung steht und du nicht einfach feststellst, ah, okay, unter Windows funktioniert das gar nicht,

00:21:20.760 --> 00:21:22.260
 weil es noch nie jemand unter Windows getestet hat.

00:21:22.260 --> 00:21:22.840
 Genau, genau.

00:21:22.840 --> 00:21:27.180
 Und wenn das aber alles im Browser läuft, dann hast du dieses Problem einfach nicht.

00:21:27.180 --> 00:21:32.180
 Das läuft irgendwie da in dieser vordefinierten Umgebung und die ganzen Leute, die da irgendwie kontributen,

00:21:32.180 --> 00:21:33.580
 die benutzen das auch jeden Tag.

00:21:33.580 --> 00:21:42.220
 Das heißt, es ist ziemlich sichergestellt, dass es auch funktioniert, weil wenn da was kaputt geht, dann geht es für alle kaputt und dann ist der Druck, das zu fixen.

00:21:42.220 --> 00:21:47.380
 Das habe ich jetzt noch nicht mitbekommen, dass irgendwas kaputt war, aber der ist dann relativ hoch, weil dann keiner mehr weiterentwickeln kann.

00:21:48.140 --> 00:21:51.200
 Du kannst sowas natürlich trotzdem bei dir lokal betreiben, wenn du willst.

00:21:51.200 --> 00:21:51.820
 Klar, ja.

00:21:52.280 --> 00:21:55.300
 Aber du hast immer die Möglichkeit, das einfach direkt alles im Browser zu machen.

00:21:55.300 --> 00:22:07.120
 Und das fände ich halt, ich sehe das so ein bisschen als die Zukunft des Developments, weil du nämlich so, wenn du jetzt irgendwie in einem Team arbeitest, in null Zeit einfach Leute onboarden kannst.

00:22:07.420 --> 00:22:12.540
 Die müssen erst mal gar nichts über die Infrastruktur wissen, die müssen ja nicht eine Woche den Rechner einrichten, das kenne ich tatsächlich so.

00:22:12.540 --> 00:22:21.540
 Also da ist eine Woche teilweise noch wenig, was ich schon so erlebt habe, sondern hier, Link zum Repo, klick da drauf, los geht's.

00:22:21.540 --> 00:22:32.460
 Und dann kannst du auch irgendwie, ohne irgendwie was kaputt zu machen, einfach direkt, da du auch direkt die Preview hast von der App, kannst du auch einfach mal irgendwo Code drin rumschreiben und gucken, was passiert.

00:22:32.460 --> 00:22:34.000
 Also dich so langsam rantasten.

00:22:35.860 --> 00:22:44.240
 Und ich glaube, die haben das auch so eingerichtet, dass du halt dann daraus einfach, wenn du da was committest, dann wird, glaube ich, auch direkt ein neuer Branch aufgemacht und so.

00:22:44.240 --> 00:22:45.320
 Also es ist einfach irre.

00:22:45.320 --> 00:22:47.780
 Kann ich auf jeden Fall nur empfehlen, mal anschauen.

00:22:47.780 --> 00:22:51.700
 Ist eine total coole Sache, im Stream habe ich es schon gezeigt, Konstantin hat es schon mal gesehen.

00:22:51.700 --> 00:22:55.420
 Aber das ist, das ist auf jeden Fall, das ist was.

00:22:55.420 --> 00:22:58.880
 Und wie gesagt, da gibt es nicht nur Stackblitz, die das anbieten.

00:22:59.200 --> 00:23:08.320
 Es gibt auch noch irgendwie Code, wie hieß das nochmal, Codespaces, ich glaube von GitHub und dann gibt es, es gibt noch diverse andere Anbieter für sowas.

00:23:08.820 --> 00:23:11.160
 Und ich glaube, das ist ein Ding.

00:23:11.160 --> 00:23:13.520
 Das wird, das wird was.

00:23:13.520 --> 00:23:19.820
 Das wird, also diese Technologie, man kommt, glaube ich, irgendwann nicht mehr dran vorbei.

00:23:19.820 --> 00:23:23.140
 Der nächste Schritt, bevor uns die AI dann ablöst.

00:23:23.200 --> 00:23:24.200
 Genau, das habe ich auch schon gesagt.

00:23:24.200 --> 00:23:37.000
 Also bevor die, das ist der letzte Schritt zur Convenience, bevor die AI komplettes Coding übernimmt, ist, sind solche integrierten Entwicklungsumgebungen im Web, in der Cloud, keine Ahnung.

00:23:37.000 --> 00:23:43.640
 Ich denke, es gibt, glaube ich, auch Lösungen, die man bei sich selbst hosten kann, wenn man jetzt nicht auf irgendwelche Cloud-Anbieter da vertrauen will.

00:23:44.340 --> 00:23:52.540
 Ja, also das auf jeden Fall mal anschauen, weil ich glaube, dass demnächst wird Development, wird andersrum.

00:23:52.540 --> 00:24:02.140
 Wenn du ein Projekt aufsetzt, das nicht so eine Technologie verwendet, dann werden die Leute irgendwann sagen, warum, das ist ja viel zu umständlich, muss ich hier alles bei mir NPM installen, das will ich doch gar nicht.

00:24:03.080 --> 00:24:05.920
 Genau, PNPM, ganz wichtig.

00:24:05.920 --> 00:24:15.360
 Ja, das machen die da, das wäre das lokale Setup. Das ist zum ersten Mal, dass ich das in the wild gesehen habe, ist, dass wenn du das lokal aufsetzt, dieses Elk, dann sollst du es mit PNPM machen.

00:24:15.360 --> 00:24:18.560
 Ah ja, okay. Da hatte ich ja auch schon mal hier drüber berichtet.

00:24:18.560 --> 00:24:20.720
 Gut.

00:24:20.720 --> 00:24:33.460
 Okay. Dann kommt noch mein letzter Retro-Punkt. Und zwar muss ich nochmal, oder möchte ich nochmal was aufgreifen, was ich in der letzten Folge schon mal aufgegriffen habe.

00:24:33.460 --> 00:24:49.100
 Ursprünglich haben wir in Folge 48 hast du das als Property der Woche vorgestellt, Read, Write, CSS, wo man Eingabefelder, egal welchen Typs, in die man was eingeben kann, eben selektieren kann.

00:24:49.100 --> 00:24:51.860
 Und dann anders stylen kann, oder was auch immer man damit machen möchte.

00:24:51.860 --> 00:24:57.180
 Und dann habe ich es in Folge 49 nochmal aufgegriffen in der Retro, weil ich direkt was damit gemacht hatte.

00:24:57.180 --> 00:25:02.360
 Und irgendwie kam dann die Frage auf, da waren wir uns dann beide nicht sicher, auf welche Felder.

00:25:02.360 --> 00:25:08.020
 Ich glaube, es ging um das Color-Input, wo wir nicht sicher waren, gilt das da auch, weil es ja eigentlich nur ein Picker ist.

00:25:08.020 --> 00:25:12.060
 Aber andererseits kann ich ja aber auch Text eingeben, aber halt nur in diesem Overlay.

00:25:12.060 --> 00:25:17.180
 Und dann habe ich gedacht, ich baue einfach mal eine Demo, die verlinke ich natürlich, und die habe ich dir auch ins Trello gepackt.

00:25:17.480 --> 00:25:24.300
 Wo ich sämtliche Input-Typen, die mir eingefallen sind, und eine Text-Area mal reingebaut habe.

00:25:24.300 --> 00:25:32.900
 Und dann mit dem Selektor, äh, Pseudo-Selektor, äh, Read-Write, äh, eine Outline von Solid-Red-One-Pixel gesetzt habe.

00:25:32.900 --> 00:25:40.460
 Sodass man dann sieht, ähm, welche Elemente tatsächlich diese Outline erhalten, und so weiß man dann, was da alles greift.

00:25:40.460 --> 00:25:50.380
 Und nochmal per JavaScript dann gelockt, ähm, den, äh, Read-Write-Selektor, um zu gucken, welche, welche Elemente da alle auftauchen.

00:25:51.380 --> 00:25:52.980
 Ja, genau.

00:25:52.980 --> 00:26:01.700
 Warte mal, ich muss jetzt gerade ganz kurz noch was reinhacken, weil ich jetzt gerade noch eine fiese Idee hatte, wie man, ah, schade, ah, das geht nicht.

00:26:01.700 --> 00:26:02.740
 Egal, vergiss es.

00:26:03.200 --> 00:26:07.660
 Äh, äh, es stimmt nämlich, weil, ja, ich, egal, das ist nicht so wichtig.

00:26:07.660 --> 00:26:08.540
 Können wir mal spüren.

00:26:08.540 --> 00:26:19.000
 Auf jeden Fall sieht man dann, dass dann, äh, also außer dem Color-Input, Radio, äh, Checkbox, Range, File und Button, beziehungsweise Input, ähm, oder Reset, ist ja auch ein Button.

00:26:19.640 --> 00:26:30.560
 Ich habe gerade, ich hätte den Dingern gerne Labels gegeben, dass man sofort auch sieht, was, was ist, weil bei diesen ganzen Inputfeldern, die einfach nur Textfelder sind quasi, sieht man nicht auf den ersten Blick, welches jetzt welches ist, steht nicht dabei.

00:26:30.560 --> 00:26:32.640
 Ja, hätte man noch als Placeholder, äh, oder so.

00:26:32.640 --> 00:26:40.480
 Und ich habe gerade, ich habe gerade, ja, ja, zum Beispiel, ich habe, ja, ich habe gerade natürlich was Dummes versucht, ich habe nämlich versucht, ein Before da drauf zu hängen und das geht natürlich nicht.

00:26:40.480 --> 00:26:40.960
 Ah, okay.

00:26:41.320 --> 00:26:46.700
 Ist ja, ist ja, das ist ja bei Self-Closing oder, wie, wie haben wir, wie habe ich, wie habe ich vorhin gelernt?

00:26:46.700 --> 00:26:50.740
 Wobei ich letztens irgendwas gelesen habe, dass das jetzt angeblich geht bei Input-Elementen, aber ich, äh.

00:26:50.740 --> 00:26:56.780
 Das geht teilweise, ja, aber wenn das Text ist, äh, weiß ich nicht, äh, wo, wo wird denn der dann angezeigt bei einem Input-Text?

00:26:56.780 --> 00:27:01.700
 Na, gute Frage, bei Input, bevor, und, und, was?

00:27:01.700 --> 00:27:02.540
 Bei manchen geht's.

00:27:02.540 --> 00:27:05.300
 Bei Input-Color zum Beispiel geht's.

00:27:05.300 --> 00:27:07.740
 Er sagt, er zeigt das tatsächlich in dem Button an.

00:27:07.740 --> 00:27:08.420
 Ach, okay.

00:27:08.420 --> 00:27:09.400
 Ähm.

00:27:10.660 --> 00:27:13.260
 Ja, das ist, das ist noch, äh, ein, ein, ein wilder Case.

00:27:13.260 --> 00:27:15.280
 Okay.

00:27:15.280 --> 00:27:17.860
 Ja, ob das so, äh, in dem Button so Sinn macht, naja.

00:27:17.860 --> 00:27:18.900
 Egal.

00:27:18.900 --> 00:27:23.240
 Ähm, genau, bei, bei, bei, äh, Input-Type-Checkbox und Radio geht's auch.

00:27:23.240 --> 00:27:24.600
 Genau.

00:27:24.600 --> 00:27:24.920
 Genau.

00:27:24.920 --> 00:27:26.000
 Darüber bin ich mal gestolpert, ja.

00:27:26.000 --> 00:27:30.760
 Da, das hat mir, das hat mir auch mal jemand zugetragen, so von wegen, hey, da kann man jetzt irgendwie, äh.

00:27:30.760 --> 00:27:31.400
 Zum Styling.

00:27:31.400 --> 00:27:39.440
 Man braucht, genau, man braucht keine extra Elemente mehr oder sowas, um irgendwie so ein, so ein, so ein Check-Häkchen selbst zu, zu stylen oder sowas.

00:27:40.000 --> 00:27:43.040
 Ähm, genau, weil das geht jetzt mit Before und After und das ist ziemlich gut.

00:27:43.040 --> 00:27:48.460
 Weil da, da hast du dann am Ende tatsächlich, ich kann's nur mit CSS, äh, dir das zurecht basteln.

00:27:49.720 --> 00:27:50.060
 Genau.

00:27:50.060 --> 00:27:57.020
 Okay, also kommt, äh, wie gesagt, in die Shownotes, vielleicht kann man das so ein bisschen als Cheat-Cheat, wenn man mal wieder drüber nachdenkt, äh, wo greift das denn überall?

00:27:57.020 --> 00:27:58.580
 Da sieht man's.

00:27:58.580 --> 00:28:00.060
 Finde ich sehr hübsch.

00:28:00.060 --> 00:28:03.060
 Ähm, genau.

00:28:03.520 --> 00:28:06.880
 So, und dann noch, äh, noch mal ein kleiner Punkt, äh, von mir.

00:28:06.880 --> 00:28:16.860
 Ich hatte, äh, es in der letzten oder vorletzten Folge, hatte ich als Geilteil, äh, Onesies, Slash, äh, Jumpsuits.

00:28:16.860 --> 00:28:20.620
 Ähm, weil ich, wie gesagt hab, ist einfach so für, für die kalten Wintertage sehr bequem.

00:28:20.620 --> 00:28:26.940
 Und ich hatte damals ja noch mehrere Bestellungen laufen und hab viele anprobiert und, äh, Stoff gefühlt, äh, und so.

00:28:26.940 --> 00:28:32.080
 Und hab jetzt tatsächlich, ähm, viel, ich hab extrem viele wieder zurückgeschickt, weil ich da sehr picky war.

00:28:32.080 --> 00:28:40.660
 Hab aber jetzt was gefunden, was ich persönlich gut fand, ähm, und das sei natürlich als, äh, Affiliate-Link noch eingebaut in diese Folge.

00:28:40.660 --> 00:28:49.980
 Und zwar ist das, ähm, hab ich von Amazon, ähm, 8 to 9 Herren Sweat Jumpsuit, äh, ich hab jetzt leider keine, keine Alternative für Damen.

00:28:50.160 --> 00:28:53.940
 Aber ich glaub, die haben da auch welche, weiß ich, weiß ich, kann ich natürlich nicht sagen, ob die dann gut sind.

00:28:53.940 --> 00:28:57.720
 Das ist auf jeden Fall sehr bequemer Stoff, das ist so ein bisschen mit Stretch.

00:28:57.720 --> 00:29:04.960
 Gibt's in verschiedenen Farben, gibt's irgendwie in schwarz und, äh, in dunkelblau, grau, hellgrau, dunkel, genau.

00:29:04.960 --> 00:29:08.520
 Blau, hellgrau, dunkelgrau, äh, dunkelgrau, mein Gott, ich kann nicht mehr sprechen.

00:29:08.520 --> 00:29:14.140
 Ähm, ja, und das ist echt, äh, ein bequemes Ding, was irgendwie gute Laune macht, wenn's irgendwie kalt ist.

00:29:14.140 --> 00:29:19.060
 Und es ist immer noch verdammt kalt, also von daher, ähm, könnt ihr ja mal gucken, vielleicht ist das ja was für euch.

00:29:19.700 --> 00:29:25.000
 Generell, äh, muss ich sagen, Wornsee, das ist einfach, das ist einfach eine sehr gute Idee, so für den Winter.

00:29:25.000 --> 00:29:32.480
 Ähm, ja, man ändert so ein bisschen komische Blicke, wenn man damit rausgeht.

00:29:32.480 --> 00:29:41.640
 Äh, ich empfehle, wenn ihr die verhindern wollt, ich mein, wahrscheinlich sowieso, wenn's kalt ist, äh, wenn man eine Jacke anzieht, dann sieht's nur noch aus wie eine Jogginghose und dann, äh, dann merkt das keiner.

00:29:41.660 --> 00:29:43.360
 Da hast du eh die Kontrolle über dein Leben verloren, ne?

00:29:43.360 --> 00:29:53.820
 Aber das, ja, obwohl ich, äh, gut, Karl Lagerfeld ist jetzt, äh, können wir wann, können wir wann anders nochmal drüber reden, aber über den hab ich auch mein Vorbild.

00:29:53.820 --> 00:30:00.660
 Der hat ein paar, der hat ein paar clevere Sachen gesagt, aber ich würde nicht mit allem übereinstimmen, was er so gesagt hat.

00:30:00.660 --> 00:30:06.680
 Ähm, der hat zum Beispiel, glaub ich, auch keinen Wecker gehabt, da bin ich, äh, von der, von der Geschichte bin ich großer Fan.

00:30:07.300 --> 00:30:31.100
 Ähm, genau, und dann, wo wir jetzt schon bei Textilien waren, ähm, schließen wir die Retro noch mit Textilien ab, und zwar, ähm, wir haben jetzt, und das, wer uns auf Social Media folgt, also, äh, das böse Tee von, von Space Karen oder, ähm, oder Mastodon, ähm, der hat wahrscheinlich schon mitbekommen, dass wir jetzt mittlerweile neues Merch haben.

00:30:31.100 --> 00:30:47.760
 Wir haben jetzt, äh, ein neues Motiv in unserem Shop Front und End, schaut euch das mal an, kommt auch in die Shownotes, ähm, ja, ähm, wir mögen's, wir tragen's, ähm, einfach kaufen und uns glücklich machen und selbst auch glücklich werden.

00:30:47.760 --> 00:30:59.760
 Äh, übrigens, was ich, äh, was ich gehört habe, ähm, zu unserem Merch, das, das wollte ich nochmal, wollte ich nochmal kurz erwähnen, weil unser Merch, das ist, das ist einfach gut, wir schauen nämlich nicht auf die, wir schauen nicht auf die Marge.

00:30:59.760 --> 00:31:19.840
 Für uns ist die Marge eigentlich bei sowas egal, wir wollen irgendwie was von uns, ähm, in die, in die weite Welt rausbringen und, ähm, als in der Weihnachtszeit, äh, jemand Merch von uns bestellt hat, äh, hat die Person gesagt, hm, das Merch von den anderen im gleichen Shop, genau das gleiche Ding, ist ja viel teurer.

00:31:20.480 --> 00:31:21.460
 Wie kann das denn sein?

00:31:21.460 --> 00:31:33.560
 Da hab ich gesagt, naja, man kann eine Marge verhandeln, ähm, und wir haben die halt extrem niedrig gesetzt, weil uns das Geld jetzt an der Stelle nicht so wichtig ist, sondern wir wollten halt, dass die Leute irgendwie T-Shirts oder Hoodies von uns haben können.

00:31:33.920 --> 00:31:48.800
 Also, bei anderen ist die Marge offenbar höher, weil, warum sollte der Preis sonst teurer sein, ähm, vom gleichen Produkt, also wirklich, äh, exakt das gleiche T-Shirt, nur mit einem anderen Aufdruck und ich weiß ziemlich sicher, weil ich mit den Leuten von dem Shop gesprochen habe, dass das Druckverfahren immer das gleiche ist.

00:31:48.800 --> 00:32:00.420
 Bei allen, also, sollte der Druck an sich jetzt keine, keinen Preisunterschied ausmachen. Ähm, also, kauft bei uns, da ist es günstiger. Spart ihr Geld.

00:32:00.420 --> 00:32:02.560
 Sehr gut.

00:32:02.560 --> 00:32:13.240
 Genau, ähm, genau, äh, Link in den Shownotes, wirklich immer reingucken, ähm, wir haben zwei hübsche Motive, ähm, ja, einfach machen. Ja.

00:32:13.240 --> 00:32:16.360
 Damit bin ich ferschnull-Retro.

00:32:16.380 --> 00:32:19.080
 Ja, dreht er durch, gute halbe Stunde ist doch. Super.

00:32:19.080 --> 00:32:21.660
 Aber für so viele Punkte war das schnell.

00:32:21.660 --> 00:32:23.320
 Dann gehen wir direkt weiter.

00:32:23.320 --> 00:32:27.060
 Die Property der Woche.

00:32:27.060 --> 00:32:30.460
 Blip.

00:32:30.460 --> 00:32:32.740
 Das ist das Beste.

00:32:32.740 --> 00:32:44.380
 Ja, ich bin, ich bin diese Woche, äh, auf was gestoßen und dachte, das nehme ich mal direkt als Property der Woche, und zwar eine Property auf dem, äh, History-Objekt, auf dem Globalen.

00:32:45.100 --> 00:32:51.380
 Und zwar hatte ich da was mit Replace-State gemacht, vielleicht können wir da auch mal eine Folge dazu machen, zu dieser ganzen History-AP-Geschichte.

00:32:51.380 --> 00:33:01.160
 Ähm, also, grob gesagt, man kann damit die, die Browser-History manipulieren und da neue Einträge einfügen oder, äh, den aktuellen überschreiben.

00:33:01.380 --> 00:33:09.660
 Und dann habe ich gesehen, ach, weil ich hatte was auf MDN nachgeschaut, ähm, und hab da gesehen, da gibt's noch ein Property Scroll-Restoration.

00:33:10.600 --> 00:33:12.820
 Also, History-Punkt-Scroll-Restoration.

00:33:12.820 --> 00:33:17.280
 Und, ähm, hab ich noch nie gehört, was, was kann man denn damit machen?

00:33:17.280 --> 00:33:32.580
 Und jetzt ist es so, ähm, wenn ich zurücknavigiere auf eine Seite, und zwar jetzt unabhängig davon, ob ich jetzt irgendwie Replace-State oder was, ähm, genutzt hab, ähm, oder ob ich einfach auf eine, auf eine andere Seite wechsle, ähm, durch den Link.

00:33:32.880 --> 00:33:38.180
 Wenn ich zurückgehe, dann stellt der Browser die Scroll-Position auf der Seite wieder her.

00:33:38.180 --> 00:33:40.080
 Versucht es zumindest.

00:33:40.080 --> 00:33:41.360
 Versucht es zumindest, genau.

00:33:41.360 --> 00:33:48.480
 Wenn das eine statische Seite ist, ist es in der Regel kein Problem, und dann will ich das ja wahrscheinlich auch, damit man nicht wieder komplett dahin scrollen muss.

00:33:48.480 --> 00:34:00.860
 Wenn das jetzt aber eine dynamische Seite ist, die dann erst Sachen nachlädt und die dann vielleicht beim Zurücknavigieren nicht da sind, was ich theoretisch machen könnte, das habe ich zum Beispiel gemacht mit Replace-State, da kann man ja so ein State-Objekt übergeben.

00:34:01.280 --> 00:34:17.140
 Und dann gucke ich, da habe ich mir Dinge abgespeichert, und sobald die Seite wieder, äh, mit Pop-State geladen wird, oder halt nach dem Laden der Seite, gucke ich, was ist denn da, ähm, drin, also History.State, und, ähm, reagiere dann entsprechend drauf und lade dann die Inhalte direkt nach, und dann sieht wieder alles so aus wie vorher.

00:34:17.140 --> 00:34:22.580
 Ähm, vielleicht habe ich das aber nicht und will das auch gar nicht, weil das irgendwie abhängt von irgendwelchen Dateneingaben, was auch immer.

00:34:22.580 --> 00:34:24.420
 Ähm, ich mag dieses Verhalten nicht.

00:34:24.420 --> 00:34:34.840
 Und früher wäre das so ein klassischer Fall gewesen, na, manche Browser machen es so, andere machen es so wahrscheinlich, ähm, und beeinflussen kann ich es nicht groß, selbst wenn die sich jetzt alle einig wären, aber ich kann es zwar halt nicht beeinflussen.

00:34:35.200 --> 00:34:39.940
 Und das finde ich halt das Coole am, am Web von heute, ähm, ich habe die Möglichkeit, es zu beeinflussen.

00:34:39.940 --> 00:34:49.080
 Und zwar kann ich das History.ScrollRestoration, ähm, auf Auto setzen, das ist dann der Default-Wert, und es wird halt, äh, dann versucht, diesen Punkt wieder herzustellen.

00:34:49.080 --> 00:34:59.920
 Ähm, oder ich kann ihn auf Manual setzen, und das heißt, die, das wird nicht restored, sondern ich lande am, oben, am Top der Seite und muss dann halt wieder, äh, manuell hinscrollen.

00:34:59.920 --> 00:35:08.300
 Oder ich könnte mit einem Skript sagen, okay, wenn, wenn, also wenn ich zurücknavigiere, dann, äh, scrollt es immer da und dahin und lädt dann erst die Inhalte nach oder wie auch immer.

00:35:09.300 --> 00:35:20.340
 Und damit kann ich das beeinflussen, ja, und das ist, äh, eine Kleinigkeit und wahrscheinlich eher eine Edge-Case, wenn man das mal braucht, aber so generell finde ich es einfach cool, dass wir heute die Möglichkeit haben, solche Kleinigkeiten auch zu beeinflussen.

00:35:20.340 --> 00:35:30.320
 Genauso wie dieses, ähm, was wir auch schon mal hier hatten, dieses, ähm, äh, Smooth-Scrolling, ne, dass man sagen kann, springt es hin oder scrollt es hin, und auch da haben wir die Möglichkeit zu sagen, ich möchte das oder ich möchte das nicht.

00:35:30.320 --> 00:35:35.660
 Und, ähm, das sogar in dem Fall mit CSS, ähm, und das finde ich einfach, ja, cool.

00:35:36.620 --> 00:35:47.860
 Ja, ich, ich kann das nicht. Also, ich habe jetzt auf jeden Fall was gelernt, äh, abgespeichert in, ähm, wenn ich irgendwann nochmal drüber nachdenke, dann stimmt, da war doch was nochmal in den Shownotes nachgucken.

00:35:47.860 --> 00:36:01.360
 Genau, genau. Und das ist, äh, ich habe eine kleine Demo, die habe ich nicht selber gemacht, in dem Fall, ähm, äh, die verlinke ich auch, ist eine Seite, wo man, äh, scrollen kann und dann entweder mit einem Link oder mit einem Push-State-Button dann auf eine andere Seite, äh, ähm, navigiert.

00:36:01.980 --> 00:36:09.540
 Und dann kann man eben vorher toggeln, die, die Scroll-Restoration-Auto oder Manual, und, äh, je nachdem, wenn ich zurückkomme, sehe ich dann den Effekt.

00:36:09.540 --> 00:36:11.680
 Und da kann man es sich jetzt einfach anschauen.

00:36:11.680 --> 00:36:14.220
 Ah, das muss ich gleich mal ausprobieren.

00:36:14.220 --> 00:36:16.740
 So, und jetzt gehen wir weiter.

00:36:16.740 --> 00:36:19.440
 Ah ja, cool.

00:36:19.440 --> 00:36:20.580
 It works.

00:36:21.060 --> 00:36:23.860
 Die simple Demo funktioniert auf jeden Fall, sehr gut.

00:36:23.860 --> 00:36:32.360
 Äh, ja, ich habe, ich habe gerade überlegt, aber ich habe den MDN-Eintrag dann auch gesehen, habe gesehen, der ist, der ist relativ kurz und das ist ja eigentlich auch gut.

00:36:32.360 --> 00:36:38.520
 Also, das Ding hat nicht, das Ding hat nicht tausend Optionen, sondern, da kommen wir gleich noch zu, zu tausend Optionen.

00:36:38.520 --> 00:36:38.800
 Ja.

00:36:38.800 --> 00:36:41.260
 Ihr wisst ja noch gar nicht, was das Thema heute ist.

00:36:44.440 --> 00:36:52.980
 Tausend Optionen, die neu sind für uns, das kommt gleich noch. Aber ja, das finde ich, finde ich so ein kleines, nettes Ding. Ähm, genau richtig für unsere Property der Woche.

00:36:52.980 --> 00:37:02.060
 Okay, dann kommen wir jetzt zum Thema tatsächlich. Oder ist noch das, äh, entscheidetisch drin. Wir haben heute aber keinen Gast und keine Gäste.

00:37:02.060 --> 00:37:03.060
 Was, ne, entscheidet, was, ne?

00:37:03.060 --> 00:37:09.980
 Das ist hier in dem Soundboard drin. Ja, eben, deswegen muss ich jetzt gerade gucken, wo jetzt der, der Jingle fürs Tagesthema ist. So, jetzt habe ich ihn aber gefunden.

00:37:09.980 --> 00:37:14.700
 Hier ist WWS IV mit dem Tagesthema.

00:37:14.700 --> 00:37:25.760
 Ah, das ist so witzig, weil ich habe gerade gedacht, hä, wir haben doch ein Trello, wo unsere Themen drinstehen, du orientierst dich ja im Soundboard.

00:37:25.760 --> 00:37:29.360
 Ja, ich habe im Soundboard das gesucht, wo das nächste ist, ja.

00:37:29.360 --> 00:37:32.100
 Ja.

00:37:32.100 --> 00:37:33.600
 WTF, Digga.

00:37:33.600 --> 00:37:37.860
 So, das ist mir jetzt aber ...

00:37:37.860 --> 00:37:38.820
 Unangenehm.

00:37:39.980 --> 00:37:43.480
 Das kannte ich noch gar nicht.

00:37:43.480 --> 00:37:43.920
 Ist neu.

00:37:43.920 --> 00:37:46.620
 Vielleicht müssen wir dazu noch was sagen, kurz.

00:37:46.620 --> 00:37:51.160
 Jetzt sind kleine Soundbites, die der Konstantin mit seiner Tochter aufgenommen hat.

00:37:51.160 --> 00:37:56.140
 Genau, jetzt müssen wir wieder den Stream referenzieren, aber da haben wir es halt schon vorgestellt.

00:37:56.140 --> 00:38:02.280
 Meine Tochter hat von der Weide sich auf meinen Stuhl gesetzt und hat sich meine Kopfhörer aufgezogen,

00:38:02.680 --> 00:38:18.460
 meinen Mikrofonarm zu sich hingezogen und hat gesagt, so, ich mache jetzt Podcast, ich bin jetzt der Papa und du bist das Kind und hat dann angefangen ins Mikrofon zu reden und ich habe dann schnell eine Aufnahme gestartet und dann kamen diverse lustige Sound-Schnipsel zustande.

00:38:19.240 --> 00:38:29.340
 Wunderschön. Wirklich, wirklich ihr Herz aller Liebst. Und wenn ihr euch mal fragt, wer das Kind ist, was damit redet, das ist Konstantins Tochter, die gesagt hat, dass die Sachen manchmal ...

00:38:29.340 --> 00:38:30.220
 Unangenehm.

00:38:30.220 --> 00:38:30.520
 Genau.

00:38:34.520 --> 00:38:43.400
 Aber es ist eigentlich unangenehm, das ist sehr gut. Wir reiten hier voll die Jugendsprache. Das ist natürlich sehr gut.

00:38:43.400 --> 00:38:49.240
 Ja, vielleicht fallen mir da noch ein paar ein, muss ich mir überlegen. Aber die Auswahl ist schon sehr, sehr gut, muss ich sagen.

00:38:49.240 --> 00:38:52.120
 Kommen noch ein paar im Laufe der Sendung. Aber wir wollen es ja nicht gleich betreiben.

00:38:52.120 --> 00:39:01.380
 So, aber das Thema heute. Wir haben das schon länger auf unserer Liste stehen und ich bin ein bisschen gespannt, ob wir es schaffen, das bis zum Ende durchzuziehen.

00:39:01.380 --> 00:39:07.560
 Und ich kann jetzt auch nicht versprechen, dass wir jede Podcast-Folge jetzt dazu machen oder ob wir da mal ein paar andere Sachen zwischen reinmachen.

00:39:07.560 --> 00:39:23.020
 Aber wir haben uns mal überlegt, wir sind ja oft schon auf einem relativ hohen Level unterwegs und man muss relativ viel Vorwissen haben, um irgendwie, glaube ich, also oft ist es so, dass man relativ viel Vorwissen haben muss, um zu verstehen, was wir hier so reden.

00:39:24.520 --> 00:39:32.040
 Und wir haben schon länger mal überlegt, ob wir nicht irgendwie mal eine Reihe machen, so ein bisschen in Richtung Grundlagen.

00:39:32.040 --> 00:39:47.440
 Und da ich ja großer Fan bin von HTML und dass man versteht, was man da tut und der Konstantin, glaube ich, auch, haben wir uns überlegt, wir machen mal eine Reihe zu HTML-Tags, HTML-Elementen und gehen die mal so ein bisschen durch.

00:39:47.440 --> 00:39:55.800
 Und wir versuchen, ich gebe kein Versprechen ab, dass wir es bis zum Ende durchziehen, aber wir versuchen, die mal wirklich alle zu besprechen.

00:39:56.520 --> 00:39:58.200
 Und zwar nicht nur oberflächlich, ne?

00:39:58.200 --> 00:40:06.160
 Also wir haben das ja auch im Stream schon mal gemacht, dass wir gesagt haben, okay, wir haben dieses, ein Spiel gespielt, ne? Wie viele HTML-Elemente fallen dir ein?

00:40:06.160 --> 00:40:09.880
 Und dann sind wir wirklich mal so die komplette Liste alphabetisch durchgegangen, ne?

00:40:09.880 --> 00:40:16.440
 Deswegen haben wir auch gesagt, irgendwie von A bis WBR, weil WBR wäre so das letzte Tag im Alphabet, das es tatsächlich gibt.

00:40:17.580 --> 00:40:21.940
 Und dann haben wir aber wirklich nur ganz schnell, ah ja, das ist das, okay, das ist das, ah, das kannte ich noch nicht, ah, das ist das.

00:40:21.940 --> 00:40:28.720
 Und jetzt haben wir wirklich mal gedacht, okay, wir lesen jetzt wirklich die MDN-Artikel zu allen durch und haben uns dann auch dort an der Reihenfolge orientiert.

00:40:28.720 --> 00:40:34.400
 Das ist dort so ein bisschen gruppiert, quasi von Kopf bis Fuß oder bis Inhalt.

00:40:35.880 --> 00:40:47.620
 Und gehen das jetzt mal in der Reihenfolge durch und zwar wirklich jedes Element in Tiefe oder halt, also jetzt nicht hundertprozentig tief, aber halt schon nicht nur an der Oberfläche kratzend.

00:40:47.620 --> 00:41:00.900
 Und dementsprechend haben wir uns jetzt heute mal nur, ich glaube, acht sind es insgesamt, ne? Jeder hat vier, weil wir mal, wir wollten es nicht übertreiben und uns wirklich darauf konzentrieren und mal gucken, wie lang das überhaupt geht, ne?

00:41:00.900 --> 00:41:07.000
 Da fehlt mir auch so das Gefühl dafür. Und dann gucken wir mal, wie viel war so in Zukunft, ob wir das weiterführen, auch auf Basis eures Feedbacks.

00:41:07.000 --> 00:41:08.440
 Genau.

00:41:08.440 --> 00:41:08.720
 Genau.

00:41:08.720 --> 00:41:28.240
 Ich wäre sehr, ich wäre auf jeden Fall sehr gespannt, was ihr, wie ihr das findet. Und ich würde da gerne, ich würde mich sehr über Kommentare freuen, sowohl von Leuten, die das alles, die schon tief im Thema drin sind, als auch von, vielleicht hört ja auch jemand zu, dem das jetzt sehr hilft, irgendwie HTML zu lernen oder der noch am Anfang steht.

00:41:29.240 --> 00:41:43.080
 Weil ich glaube, dass wir das ein oder andere Detail da mit drin haben werden, was man vielleicht noch nicht so kennt oder zumindest auch bei Tags, oder das nutze ich doch irgendwie jeden Tag, aber wo es trotzdem irgendwie noch so kleine Details gibt, die man vielleicht noch nicht auf dem Schirm hat.

00:41:43.080 --> 00:41:49.920
 Ja, also manche Sachen liest man und weiß sofort, okay, das ist das und das. Und andere Sachen, wenn du mich fragst, was macht das eigentlich, dann muss ich sagen ...

00:41:49.920 --> 00:41:51.320
 Weiß ich nicht, Digga.

00:41:54.380 --> 00:41:58.960
 Also wir flechten das hier heute ein. Es ist ja, es ist ja richtig, richtig toll.

00:41:58.960 --> 00:42:11.560
 Ich habe als ersten Punkt hingeschrieben, kleine Einleitung zur HTML allgemein. Ich weiß nicht, ob man ... Doch, doch, wir machen jetzt einmal HTML 101. Ganz, ganz, ganz schnell.

00:42:12.000 --> 00:42:18.640
 Und zwar, ähm, für diejenigen, die gar nicht wissen, wie das, wie HTML genau funktioniert, machen wir jetzt nochmal einmal, einmal Grunddefinition.

00:42:18.640 --> 00:42:28.560
 HTML sind, sind so Tags, über die reden wir gleich, äh, also bestimmte, bestimmte Namen und die stehen eigentlich immer in Spitzenklammern oder größer, kleiner Zeichen.

00:42:29.420 --> 00:42:41.540
 Ähm, also zum Beispiel, ähm, ein klassisches Element wäre zum Beispiel ein A, da steht dann Spitze, also würde dann so funktionieren, ich versuche es jetzt mal audiomäßig zu erklären, Spitze Klammer auf, A, Spitze Klammer zu.

00:42:41.540 --> 00:42:53.760
 Dann kommt irgendein Inhalt, irgendein Text, das wäre jetzt in dem Fall ein Link. Ähm, und, äh, wenn ein Tag, äh, geschlossen wird, dann ist, äh, Spitze Klammer auf, Slash, A, Spitze Klammer zu.

00:42:53.760 --> 00:43:17.780
 So, und was es dann noch gibt, äh, sind Attribute, die sind in dem öffnenden Tag mit drin, ähm, mit einem Leerzeichen getrennt vom Elementnamen, ähm, und das kann zum Beispiel, jetzt keine Ahnung, bei, bei, bei A wäre es jetzt zum Beispiel Hypertext Reference, also href, ähm, und dann kommt hinter dem Attribut Namen immer ein istgleich und dann, äh, Anführungsstriche und darin steht dann der Attributwert.

00:43:17.780 --> 00:43:23.560
 Das nur mal so als Baseline, wie hat, wie HTML so an sich, wie die Syntax funktioniert.

00:43:23.560 --> 00:43:33.980
 Vielleicht starten wir mit uns mit dieser Folge auch schon so ein bisschen unsere Miniserie, was wir mal, äh, also als Idee, als Hirngespinst hatten, so eine komplette Beginnerserie zu machen, ne, so komplett für Anfänger.

00:43:33.980 --> 00:43:44.720
 Aber ich hoffe, dass auch was dabei ist, ähm, also ich, ich hab beim Durchlesen jedenfalls einige Sachen gelesen, die mir so nicht bewusst waren und deswegen hoffe ich, dass auch für die alten Hasen, äh, trotzdem noch das eine oder andere Interessante dabei ist.

00:43:44.720 --> 00:43:53.120
 Ging mir, ging mir ganz genauso, also da waren, da waren Sachen dabei, wo ich dachte, ah krass, äh, ja, das hab ich irgendwie schon mal gesehen, aber dass das irgendwie so funktioniert, äh, genau.

00:43:53.120 --> 00:44:06.340
 Also bin mal gespannt und ich, ich würde mich echt über das Feedback freuen von, von allen, von allen Richtungen, wie ihr das jetzt dann findet, ähm, ob, ob ihr das zu detailliert findet, keine Ahnung, einfach mal, äh, einfach mal in die Kommentare schreiben, würde mich sehr freuen.

00:44:06.340 --> 00:44:10.960
 Ähm, gut, aber wir müssen jetzt erstmal anfangen, damit, äh, damit ihr auch was zum Feedback, äh, geben habt.

00:44:10.960 --> 00:44:20.600
 Ähm, und die Bereiche, über die wir jetzt heute sprechen, sind, äh, also wir, wir hangeln uns, äh, entlang an der HTML, äh, Liste, an der Elementliste von MDN.

00:44:20.680 --> 00:44:22.560
 Das haben wir schon gesagt, kommt auch in die Shownotes, der Link.

00:44:22.560 --> 00:44:33.080
 Und, ähm, wir nehmen uns da jetzt heute zur Brust die ersten drei Bereiche, und zwar Mainroot, Document Metadata, äh, und Sectioning Root.

00:44:33.080 --> 00:44:35.580
 Das sind die, das sind die drei Bereiche.

00:44:35.580 --> 00:44:40.000
 Und da kommen wir dann insgesamt tatsächlich auf acht verschiedene Elemente, jeder von uns vier.

00:44:40.000 --> 00:44:46.020
 Ähm, und ich würde einfach mal beginnen, äh, mit dem Mainroot, mit dem HTML-Element.

00:44:46.020 --> 00:44:53.800
 Ähm, das ist das HTML-Element, das um alles drumherum liegt, das im Prinzip definiert, hier in mir kommt jetzt HTML.

00:44:53.800 --> 00:45:04.640
 Ähm, äh, es muss der, der, der Spec nach, so wie ich das, äh, gelesen habe, genau ein Head-Element und ein Body-Element enthalten.

00:45:04.640 --> 00:45:07.640
 Das ist eine Regel. Äh, zu Head und Body kommen wir noch.

00:45:07.960 --> 00:45:11.240
 So, jetzt habe ich hier einen Klammern hinten dran, äh, muss mit Sternchen versehen.

00:45:11.240 --> 00:45:12.200
 Mhm.

00:45:12.200 --> 00:45:25.380
 Es ist nämlich kein Muss, also das, äh, habe ich auch erst irgendwie vor drei Jahren oder sowas mal erfahren in einem Artikel, ich glaube auf einem Google-Developer-Blog, ähm, dass sowohl HTML als auch Head, als auch Body optional sind.

00:45:25.380 --> 00:45:31.500
 Und, ähm, der Client, oder zumindest modernere Clients, ähm, die quasi implizieren.

00:45:31.980 --> 00:45:45.300
 Das heißt, ähm, wenn ich das Dokument beginne mit Skript, äh, mit Link und Skript und Style-Blöcken, dann packt das die automatisch in einen Head und, oder ein Title-Element, ähm, und den restlichen Content automatisch in einen Body und außenrum setzt es in HTML.

00:45:46.300 --> 00:45:59.420
 Und dann kann ich mir die eigentlich sparen. Ich frage mich nur, also ist es das wert, um da noch ein paar, ich bin ja ein Freund von Kilobytes rauslutschen, ne, aber da frage ich mich, muss, muss man sich das sparen oder kann man nicht einfach sagen, okay, das ist die Struktur, äh, macht's einfach so.

00:46:00.700 --> 00:46:07.160
 Du hast aber gerade gesagt, dass man HTML weglassen kann, ich habe aber davon gesprochen, dass es ein HTML gibt. Und dann zumindest so ist es.

00:46:07.160 --> 00:46:10.200
 Und dass es ein Head und ein Body geben muss, aber muss es nicht.

00:46:10.200 --> 00:46:12.840
 Äh, wenn das HTML da ist.

00:46:12.840 --> 00:46:15.580
 Aber egal.

00:46:15.580 --> 00:46:17.700
 Echt? Äh, hab ich jetzt noch nicht ausprobiert, ja?

00:46:17.700 --> 00:46:28.720
 So stand, nein, äh, ob das, Moment, ob das funktioniert am Ende, ist nochmal eine ganz andere Sache, weil die Browser ja, was HTML angeht, äh, sehr, äh, nett sind zu einem.

00:46:28.720 --> 00:46:40.680
 Ich meine, die versuchen, die schließen dir Tags, die du nicht geschlossen hast und alles mögliche. Also, wenn's nur darum geht, was man wirklich muss, im Sinne, im, im technisches Muss, das ist nochmal ein anderes, als, äh, wie die Speck das sagt.

00:46:40.680 --> 00:46:41.420
 Gut, das stimmt, ja.

00:46:41.420 --> 00:46:46.300
 Genau. Ähm, so. Willst, willst du deinen Root noch hier anbringen?

00:46:46.300 --> 00:46:58.500
 Achso, ja, genau, das hab ich auch noch notiert und da hat der Moritz gleich gesagt, das ist ja aber CSS, ähm, aber da wollte ich mir, ich dachte, wenn wir über das Root-Element sprechen, dann kann man vielleicht auch anmerken, dass man per CSS mit dem, äh, Root, Pseudoselektor, also Doppelpunkt,

00:46:58.500 --> 00:47:13.680
 Root, das, äh, das Wurzelelement selektieren kann, was halt bei HTML dann das HTML-Element ist und das dann zum Beispiel nutzen kann, um globale, äh, Custom-CSS-Properties, äh, da drauf zu setzen, die man dann im, äh, im restlichen Dokument in anderen Selektoren dann wiederverwenden kann.

00:47:13.880 --> 00:47:15.020
 Mhm, aber das nur am Rande.

00:47:15.020 --> 00:47:33.260
 Genau, dann, ähm, gibt es Attribute, die man da drauf versetzen, äh, drauf setzen kann, ähm, zum Beispiel, äh, wenn man XML geparste Dokumente hat, was, weiß ich nicht, wenn du jetzt eine normale Webseite baust, äh, wo du nicht explizit mit einem XML-Parser drüber gehst, brauchst du das nicht.

00:47:33.500 --> 00:47:48.500
 Kannst du aber XML-NS, XML-Namespace als Attribut, ähm, vergeben und da eben dann, äh, den, äh, den Namespace eintragen. Ähm, oder was sehr, sehr sinnvoll ist, auf jeden Fall ist das Lang-Attribut für Language. Ähm, das, äh, ist auf,

00:47:48.500 --> 00:48:06.620
 auf jeden Fall, äh, sinnvoll, nicht nur für Suchmaschinen, sondern auch für, ähm, aus Accessibility-Gründen für Screenreader, ähm, dass man die Sprache, die Hauptsprache von dem Dokument festlegt, ähm, in der der Inhalt vorliegt, ähm, also einfach als, als Metainformation, ähm, was für eine Sprache liegt der Inhalt vor.

00:48:06.620 --> 00:48:17.860
 Wenn es Bereiche gibt auf der Seite, die dann in einer anderen Sprache sind, dann kann man das Lang-Attribut da auch nochmal auf ein Extra-Element legen, äh, aber es sollte eigentlich im HTML-Element immer ein Lang-Attribut sein.

00:48:18.140 --> 00:48:28.820
 Das ist keine Pflicht, also das, der, der, soweit ich weiß, der Validator fliegt nicht auf die Fresse, äh, wenn du das nicht machst, aber es ist sehr, sehr, sehr empfohlen, also.

00:48:28.820 --> 00:48:47.780
 Und ich find's auch, ähm, cool, was ich ganz gerne mache in so Multisprach-Kontexten, also irgendwie eine WordPress-Seite, die mit, äh, Multilanguage irgendwie läuft oder so, oder eine andere Seite, die einfach in mehreren Sprachen vorliegt, ähm, wenn ich dann die JavaScript-Internationalization-AP benutze, um, äh, Währungsbeträge zu

00:48:47.780 --> 00:49:07.480
 Formatieren oder auch Datumsformate oder so, ähm, dass ich mir dann eben vom, vom Root-Element, äh, das Lang-Attribut rausnehme, um das als Locale zu nehmen, äh, für die entsprechenden Funktionen und, äh, so dann für den User, wenn der es auf Englisch liest, dann entsprechend englische Formate hab und, ähm, wenn er es auf Deutsch liest, äh, deutsche Formate.

00:49:07.860 --> 00:49:09.760
 Und das kann man sich da schön, schön rauslutschen.

00:49:09.760 --> 00:49:12.320
 Rauslutschen.

00:49:12.320 --> 00:49:17.420
 Ähm, ja.

00:49:17.420 --> 00:49:19.540
 Ich war, ich war fertig.

00:49:19.540 --> 00:49:20.880
 Ach so, das war's, okay.

00:49:20.880 --> 00:49:23.380
 Das, das war's, das war's zum HTML-Tag, ja.

00:49:23.380 --> 00:49:27.520
 Gut, dann, äh, das nächste ist schon eine nächste Kategorie, ne?

00:49:27.520 --> 00:49:29.400
 Das Mainroot hat nur dieses eine Element.

00:49:29.400 --> 00:49:29.940
 Genau.

00:49:29.940 --> 00:49:36.280
 Dann kommen wir zu Document Metadata und, äh, da die Sachen hier immer, ich glaube, alphabetisch angeordnet sind, ne?

00:49:36.280 --> 00:49:36.520
 Ja.

00:49:36.520 --> 00:49:37.160
 Genau.

00:49:37.160 --> 00:49:40.200
 Äh, kommt jetzt als nächstes das Base-Element.

00:49:40.960 --> 00:49:45.840
 Ich meine aber, dass das Base-Element im Head zu verorten ist, oder?

00:49:45.840 --> 00:49:46.420
 So ist es.

00:49:46.420 --> 00:49:51.200
 Hab ich jetzt aber, hast du das gesehen, aber ich hab's jetzt nicht explizit irgendwo gelesen, aber ...

00:49:51.200 --> 00:49:54.120
 Oh, ich bin mir nicht zu 100 Prozent sicher, ob's nicht auch woanders sein darf.

00:49:54.120 --> 00:49:57.100
 Ich meinte aber, es müsste, müsste da drin sein.

00:49:57.100 --> 00:50:00.600
 Äh, okay, äh, okay.

00:50:00.600 --> 00:50:05.040
 A Head that doesn't contain another Base-Element ist die Voraussetzung.

00:50:05.040 --> 00:50:06.920
 Also ja, das muss im Head sein.

00:50:06.920 --> 00:50:07.800
 Gut.

00:50:07.800 --> 00:50:09.300
 Ich kann nochmal nachgelesen.

00:50:09.300 --> 00:50:09.540
 Okay.

00:50:10.200 --> 00:50:10.520
 Perfekt.

00:50:10.520 --> 00:50:11.700
 Also was, was macht das?

00:50:11.700 --> 00:50:15.780
 Das Base-Element, ähm, da kann ich zwei Attribute draufsetzen.

00:50:15.780 --> 00:50:23.660
 Äh, und zwar HREF, so wie ich's eben, Moritz hat vorhin schon Link-Tag erwähnt, äh, HREF eben setzen kann, eine Verlinkung.

00:50:23.660 --> 00:50:34.680
 Ähm, und das gibt dann, ähm, an bei relativen Links, also nicht mit, mit Protokoll HTTP oder HTTPS beginnend und auf eine externe Seite leitend,

00:50:34.680 --> 00:50:47.840
 äh, sondern, äh, mit vielleicht Punkt- oder Punkt-Punkt-Navigation, äh, aus dem, äh, eine Ebene höher, ähm, oder aus dem gleichen Dokument quasi gegen Unterordner, also relative Links, da gibt es die Basis an.

00:50:47.920 --> 00:51:03.000
 Ähm, also auf was bezieht sich das? Normalerweise bezieht sich das auf das aktuelle Dokument, wo das liegt, und ich kann das aber auch überschreiben, indem ich jetzt sage, es soll sich immer alles, ähm, zum Beispiel auf meinen, äh, auf den Root von, von der Domain beziehen.

00:51:03.660 --> 00:51:08.460
 Das ist was, wo ich, wo ich, wo ich glaube, dass es nicht so häufig verwendet wird, ne? Also das war früher, glaub ich.

00:51:08.460 --> 00:51:18.000
 Ich hab's tatsächlich im Einsatz, glaub ich, bei unserer Seite, ja, ähm, aufgrund der Art und Weise, wie da die, die Seitenstruktur zusammengebaut wird.

00:51:18.260 --> 00:51:41.840
 Und ich da sicher gehen möchte, dass ich auf jeden Fall immer das, das, äh, Seiten-Root als Basis habe, äh, unabhängig von der Verschachtelung in der, in der URL, weil das quasi, also wir haben dann ein eigenes Rooting-Server-seitig, ähm, was dann sich einfach aus der URL, äh, aus den, quasi auch der Anzahl der, der Slashes, dann die Seite so zusammenbaut, welche Unterkategorien, was weiß ich.

00:51:42.000 --> 00:51:52.120
 Und so weiß ich halt, ich bin immer, äh, auf dem Seiten-Root basierend. Äh, muss man halt dran denken, wenn man dann irgendwo einen relativen Link hat, der halt dann vom Dokument ausgehen soll, da muss dann auf jeden Fall die absolute URL drin stehen.

00:51:52.120 --> 00:52:06.120
 Genau. Und das zweite ist das Target-Attribut, das ich setzen kann, äh, und damit geb ich an, für alle Links, die kein eigenes Target-Attribut haben, ähm, in welchem Kontext sich der, der, die Ziel-URL öffnen soll.

00:52:06.120 --> 00:52:23.260
 Also im gleichen Fenster oder in einem Frame, falls ich noch Frames einsetze oder falls ich, äh, einen benamten I-Frame irgendwie habe, ähm, oder eben aus dem Frame ausbrechend, äh, unterstrich Top oder eben unterstrich Blank, um ein neues Fenster, beziehungsweise Top meistens heute, ähm, zu öffnen.

00:52:23.260 --> 00:52:30.080
 Und das ist einfach, da, da geb ich den Standard fest und, äh, wenn ich's doch mal anders haben will, dann muss ich das überschreiben.

00:52:30.140 --> 00:52:40.780
 Krass, man könnte, das war mir gar nicht so richtig klar, ich könnte also, wenn ich will, dass alle Links auf meiner Seite sich in einem neuen Tab öffnen, könnte ich, könnte ich Base-Target-Blank machen.

00:52:40.780 --> 00:52:41.000
 Genau.

00:52:41.000 --> 00:52:42.320
 Und dann muss ich das gar nicht mehr über Link hinschreiben.

00:52:42.320 --> 00:52:43.820
 Und nur dann, wenn du es nicht willst, genau.

00:52:43.820 --> 00:52:58.560
 Also schon eine Seite, die zum Beispiel nur eine Linkliste enthält auf Externe, kann ich mir dann sparen, das überall hinzuschreiben, sondern ich sag generell alle, alle ausgehenden Links und nur auf meiner eigenen Navigation setz ich dann bei den vier Links, die ich vielleicht hab, äh, dann, dann Target-Self oder so.

00:52:59.400 --> 00:53:04.600
 Interesting. Also wahrscheinlich fehlt mir der Anwendungsfall dafür, aber interessant trotzdem.

00:53:04.600 --> 00:53:16.300
 Also ich hab's wie gesagt, also gerade früher, äh, öfter gebraucht, ähm, und hab's bei uns noch im Einsatz, aber, ähm, ja, wenn man sowieso überall absolute URLs nimmt, dann braucht man's gar nicht.

00:53:17.900 --> 00:53:26.880
 Dann, äh, jetzt kommen wir zu den Sachen, äh, wo ich dann schon gedacht hab, so, ach krass, okay, Base-Tag dachte ich so, okay, gibt's gar nicht so viel dazu zu sagen und, ähm, ähm, äh, da weiß ich alles drüber.

00:53:26.880 --> 00:53:46.540
 Aber man kann bei allen Nodes, also bei allen HTML-Elementen, die ja, äh, Subset oder, oder, oder, oder, äh, Typ von, von einem Node sind, kann ich, äh, node.base-Uri, äh, abfragen, den Parameter per JavaScript und kriege dann die Base-Uri zurück.

00:53:46.540 --> 00:53:57.000
 Und im, äh, Default-Fall, ähm, fällt die quasi zurück auf Window-Location-Href, äh, was ja eben dem Default-Fall entspricht, dass ich von, von dem aktuellen Dokument ausgehe.

00:53:57.000 --> 00:53:58.780
 Ähm, und so kann ich das abfragen.

00:53:58.780 --> 00:54:07.240
 Ähm, dann brauch ich mir nämlich nicht, äh, quasi mit Document-Query-Selector das Base-Element, also hab ich das nämlich mal gemacht, wo ich dann dachte, okay, was ist denn gerade mein Base?

00:54:07.240 --> 00:54:13.040
 Dann das Base-Element raussuchen und so, sondern ich kann bei jedem x-beliebigen Node eben das rauskriegen, was der Href ist.

00:54:13.460 --> 00:54:29.440
 Beziehungsweise wenn der Href überschrieben wird, dann wäre er in dem Fall eben auch anders, also bei dem Link, wenn der Href explizit gesetzt ist, äh, das Target, äh, nee, Quatsch, äh, gut, Target auch, aber, ähm, um den Base-Href ging's, ja, Base-Uri, äh, dann kann ich das da eben rüber abfragen.

00:54:29.440 --> 00:54:31.260
 Hm.

00:54:31.260 --> 00:54:40.960
 Und so wie bei, ähm, bei Head oder Body oder HTML ist es da auch, es sollte nur ein Base-Element geben.

00:54:41.580 --> 00:54:50.940
 Ähm, es kann, also ich glaub, man kann mehrere nehmen, es fliegt einem wohl nicht um die Ohren, aber es ist halt so, dass nur das allererste Base-Element berücksichtigt wird.

00:54:50.940 --> 00:54:52.240
 Alle anderen werden ignoriert.

00:54:52.240 --> 00:55:07.120
 Ist in dem MDN ein bisschen missverständlich geschrieben, weil da steht, ähm, es, das erste wird berücksichtigt, aber es steht da, äh, wenn's mehrere gibt, wird nur das erste Target oder Href berücksichtigt.

00:55:07.120 --> 00:55:14.700
 Und das klingt für mich so, als könnte ich ein Base-Tag mit Href nehmen und eins mit Target und dann würde es trotzdem beides, äh, akzeptieren.

00:55:14.700 --> 00:55:20.900
 Aber wenn das erste Base-Element zum Beispiel nur ein Href hat und kein Target, dann greift das Target auch nicht.

00:55:21.480 --> 00:55:29.360
 Also das ist missverständlich formuliert. Es ist so, nur vom ersten Base-Element die Angaben, also Href oder Target, werden akzeptiert.

00:55:29.360 --> 00:55:30.460
 Es ist auch schon weg.

00:55:30.460 --> 00:55:31.400
 Für euch getestet.

00:55:31.560 --> 00:55:33.340
 Muss ich sagen, äh, oh Mann.

00:55:33.340 --> 00:55:41.780
 Es ist relativ, also, es wäre nicht so extrem unwahrscheinlich, dass ihr Base niemals braucht.

00:55:41.780 --> 00:55:43.740
 Das wollte ich noch an der Stelle sagen.

00:55:43.740 --> 00:55:46.960
 Das kann sehr gut sein, dass man das einfach niemals braucht.

00:55:46.960 --> 00:55:52.700
 Aber, aber wir gehen jetzt alle durch und wir gucken uns alle, alle Besonderheiten an und alles, was es darüber zu wissen gibt.

00:55:52.720 --> 00:55:54.600
 Ja, da müsst ihr jetzt durch. Wir übrigens auch.

00:55:54.600 --> 00:55:58.840
 Ja, noch eins zum Abschluss zu dem Base, dann ist es aber auch schon durch.

00:55:58.840 --> 00:56:02.720
 Ähm, wichtig zu wissen, das trifft auch auf Anchor-Links zu.

00:56:02.720 --> 00:56:17.640
 Also, wenn ich innerhalb von einem Dokument auf ein, ein Fragment zugreifen will, also ein Element, das mit einem ID-Attribut versehen ist, zum Beispiel ID top, und ich verlinke dann auf Raute top oder Hash top, ähm, ne, um innerhalb von dem Dokument zu verlinken.

00:56:17.640 --> 00:56:23.700
 Wenn ich aber ein Base-HRef gesetzt habe, geht er auf die andere Seite entsprechend.

00:56:23.700 --> 00:56:28.400
 Und dazu hab ich auch, äh, ein kleines Code-Pen gebastelt, um das zu demonstrieren.

00:56:28.400 --> 00:56:31.760
 Das könnte, ähm, auf die Füße fallen, um die Umständen.

00:56:31.760 --> 00:56:32.380
 Ja.

00:56:32.380 --> 00:56:44.560
 Oder bei Formularen irgendwie, wenn ich, äh, Form-Action, äh, dann irgendwie auf den Leerstring setze, was dann ja auch automatisch das, äh, Dings, und ich glaube, da greift es, warte mal, greift es da auch oder greift es da nicht?

00:56:44.560 --> 00:56:51.600
 Also, es war jedenfalls, äh, ist, ist zum Beispiel ein Ding halt, ne, bei Formularen muss ich da dran denken, dass das eventuelle Implikationen hat.

00:56:51.600 --> 00:56:54.260
 Ja.

00:56:54.260 --> 00:56:55.840
 Dann sind wir mit Base auch durch.

00:56:55.840 --> 00:56:58.180
 Ja, wieder was gelernt.

00:56:58.180 --> 00:57:08.880
 Also, Base ist so was, was ich quasi fast in keinem Projekt bisher gesehen habe, äh, und, aber es ist dann, wenn's dann da ist, dann hat das große Auswirkungen.

00:57:09.020 --> 00:57:14.560
 Ich find das, äh, da muss, äh, vielleicht hat da noch jemand Beispiele, Anwendungsfälle, wo das wichtig war oder so.

00:57:14.560 --> 00:57:19.320
 Also, das war ja, glaub ich, extrem wichtig bei Frames, bei Framesets früher.

00:57:19.320 --> 00:57:30.100
 Aber, äh, ich würde auch versuchen, ähm, so alten Kram rauszuhalten, weil, äh, der, der erstens ist der unnötig für uns, der, der klaut uns nur irgendwie Hirnspeicher.

00:57:30.100 --> 00:57:44.200
 Ja, ähm, und der soll auch euch, äh, die ihr das jetzt vielleicht lernt, nicht irgendwie beeinflussen, weil das Web gibt's jetzt schon eine Weile und es gibt eine Menge Sachen von früher, die wir jetzt noch wissen, die aber eigentlich überhaupt gar keinen Nutzen mehr haben, was man das weiß.

00:57:44.200 --> 00:57:48.420
 Und deswegen sollte man, deswegen versuch ich, darauf nicht einzugehen.

00:57:48.420 --> 00:57:50.840
 Man kann ganz viel über alten Kram erzählen, aber.

00:57:50.840 --> 00:57:55.860
 Ja, und wenn wir, wenn wir Webopas vom, vom alten Kram erzählen, dann denken sich die jungen, hippen Programmierer nur.

00:57:55.860 --> 00:57:57.240
 BTF, Digga.

00:57:57.240 --> 00:57:57.720
 Ja.

00:57:57.720 --> 00:58:00.340
 Du sitzt halt immer noch am Windows und Meckers.

00:58:00.340 --> 00:58:00.680
 Genau.

00:58:00.680 --> 00:58:01.580
 So.

00:58:01.580 --> 00:58:06.760
 Gut, ähm, dann gehen wir zum nächsten, oder?

00:58:06.760 --> 00:58:08.440
 Oder bist du fertig mit Bass, ne?

00:58:08.440 --> 00:58:10.700
 Also, dann kommen wir jetzt zu Head.

00:58:10.700 --> 00:58:20.380
 Ähm, da ist jetzt die Reihenfolge ein bisschen komisch, weil sie dann innerhalb der, äh, was Konstantin schon gesagt hat, innerhalb der Blöcke ist sie, äh, ist sie alphabetisch.

00:58:20.840 --> 00:58:24.800
 Ähm, aber Head wäre eigentlich logischerweise vor Bass gekommen, aber egal.

00:58:24.800 --> 00:58:26.540
 Aber mit Head sind wir relativ schnell durch.

00:58:26.540 --> 00:58:38.960
 Head ist eigentlich nur ein, ein Rapper-Element für Meta-Informationen, die nicht angezeigt werden auf der Seite, oder zumindest die standardmäßig nicht angezeigt werden.

00:58:38.960 --> 00:58:43.780
 Ähm, da vielleicht noch ein kleiner, kleiner merkwürdiger Hinweis für Leute, die das mal ausprobieren wollen.

00:58:43.780 --> 00:58:47.420
 Man kann eigentlich jedes Tag in HTML sichtbar machen.

00:58:47.420 --> 00:58:51.700
 Es gibt nur manche, die standardmäßig, oder ich weiß nicht, sag ich jetzt was Falsches?

00:58:51.700 --> 00:58:59.000
 Ähm, es gibt, es gibt Leute, die das besser wissen als ich, aber soweit ich weiß, kann man jedes HTML-Element, auch das standardmäßig unsichtbar ist, auch sichtbar machen.

00:58:59.000 --> 00:59:01.780
 Also, Script- und Style-Elemente zum Beispiel kann man auch sichtbar machen.

00:59:01.780 --> 00:59:02.040
 Script- und Style kann man sichtbar machen.

00:59:02.040 --> 00:59:05.400
 Man kann dann zum Beispiel gleich Style-Elemente, ne, wenn man sie darstellen will.

00:59:05.540 --> 00:59:09.820
 Man kann auch Head sichtbar machen und Link sichtbar machen, wenn man das möchte, das, das, das geht alles.

00:59:09.820 --> 00:59:11.380
 Also, das habe ich vorhin, das habe ich vorhin noch ausprobiert.

00:59:11.380 --> 00:59:15.480
 Naja, standardmäßig, äh, das ist wie der Käse-Quatsch, den wir hier erzählen.

00:59:15.480 --> 00:59:18.140
 Also, das stimmt zwar, aber man sollte das einfach nicht tun.

00:59:18.140 --> 00:59:24.420
 Head, alles was im Head ist und Head selbst ist standardmäßig unsichtbar, da kommen Meta-Informationen rein.

00:59:24.520 --> 00:59:30.740
 Also, zum Beispiel Script kann da reinkommen, Script kann auch woanders hin kommen oder Link-Element oder Title-Element, das Title kommen wir gleich noch.

00:59:30.740 --> 00:59:48.440
 Ähm, und laut dem Standard muss ein Title-Element enthalten sein, ähm, außer, das war eine interessante Information, die ich nicht wusste, außer dieses Element wird nur per iframe eingebunden, dann ist Title wohl nicht wichtig.

00:59:49.040 --> 00:59:56.660
 Weil das eingebundene Element eigentlich an sich keinen Title braucht, weil es quasi von der, von der, von der Host-Seite erbt.

00:59:56.660 --> 00:59:58.240
 Ähm, ja.

00:59:58.240 --> 01:00:01.620
 Beziehungsweise ja nirgends dargestellt wird, also es wird halt nur das von der, äh.

01:00:01.620 --> 01:00:02.520
 Genau, wird nirgends dargestellt.

01:00:02.520 --> 01:00:05.680
 Aber mehr gibt es dazu eigentlich auch erstmal nicht zu sagen.

01:00:05.680 --> 01:00:11.140
 Das war jetzt so eins, dass das relativ schnell abgehandelt war, da ist auch der MDN, äh, Eintrag sehr kurz.

01:00:11.140 --> 01:00:14.480
 Das wird sich bei, bei meinem nächsten noch ändern.

01:00:14.480 --> 01:00:18.580
 Also, weil du, äh, gesagt hast ja eigentlich Käse und so, und brauchen wir nicht wissen, aber ich finde, es ist schon,

01:00:19.040 --> 01:00:25.060
 es schafft schon ein Verständnis dafür, ne, dass im Endeffekt alles Elemente sind und dass eben nur manche von,

01:00:25.060 --> 01:00:27.800
 einen, einen Standard-Stil haben, der vom Browser vorgegeben wird.

01:00:27.800 --> 01:00:36.160
 Also, aber am Ende sind alles Elemente und ich kann alle Elemente auch mit, mit Queries ansprechen, äh, und mir aus, mit, mit JavaScript dann fände ich jetzt,

01:00:36.160 --> 01:00:42.980
 oh, ich bastel einen Crawler oder, ähm, oder warum auch immer möchte ich auf der Seite mit JavaScript, äh, Informationen auslesen aus den Meta-Tags.

01:00:42.980 --> 01:00:46.520
 Und das kann ich eben machen, weil das sind ganz normale Tags, das ist keine Magie.

01:00:46.520 --> 01:00:54.100
 Genau, es ist nur wirklich der, der Standard-CSS-Style im Browser, der Head und Sachen darin, ähm, versteckt.

01:00:54.560 --> 01:01:00.180
 Und wenn man das, äh, da CSS drüber schreibt, das sagt, nee, zeig mir das an, dann geht es.

01:01:00.180 --> 01:01:10.180
 Genau, dann kommen wir zum, äh, nicht zum ersten, weil Base ist ja auch eins, aber zum, zum zweiten, äh, Element, das innerhalb des Head sich befinden kann.

01:01:10.540 --> 01:01:14.380
 Und das sind, äh, Tags vom, äh, Typ Link.

01:01:14.380 --> 01:01:17.900
 Und, wofür brauchen wir die also?

01:01:17.900 --> 01:01:20.540
 Oder was, was, was ist das überhaupt? Was macht so ein Link?

01:01:20.540 --> 01:01:23.300
 Und was linkt das eigentlich, wenn Link im Namen steckt?

01:01:23.300 --> 01:01:29.920
 Also, es bildet die Beziehung ab zwischen dem aktuellen Dokument, das offen ist, und beliebigen externen Ressourcen.

01:01:30.860 --> 01:01:55.340
 Ähm, und das können echt verschiedenste Dinge sein, und ich kannte das, äh, hauptsächlich so, ähm, ja gut, CSS einbilden, äh, einbilden, einbinden, ähm, mit dem REL-Attribut, also REL-Attribut für Relationship, und damit gebe ich eben an, was ist das für eine Beziehung zu dem anderen Dokument, und REL gleich Style Sheet, da kann ich eben sagen, aha, diese CSS-Datei, das ist ein Style Sheet für diese Seite.

01:01:55.900 --> 01:02:15.980
 Ähm, dann gibt's zum Beispiel auch noch Icon für Fav-Icons, ähm, aber das war so, also, ja, Style Sheet-Icons, vielleicht noch solche Sachen wie, äh, diese Seite, das hatten wir auch mal drüber, ne, wie man sich bei, bei, äh, Mastodon, ähm, ähm, äh, verifiziert, ne, dass man sagt, ja, okay, diese Seite, das bin tatsächlich ich, und bitte, ähm, mach mir ein grünes Häkchen hin.

01:02:15.980 --> 01:02:23.780
 Ähm, daher kannte ich das, aber da gibt's noch, noch ganz viel anderes, was ich noch nicht so, äh, bewusst wahrgenommen hatte.

01:02:23.780 --> 01:02:36.940
 Also zum einen das Media-Attribut, wenn ich, äh, ein, ein Link-REL-Style Sheet habe, da wusste ich nicht, dass das ein Medientyp sein kann, wie zum Beispiel Print oder Display, oder aber auch tatsächlich ein Media-Query.

01:02:36.940 --> 01:02:43.560
 Das war mir nicht bewusst, dass ich in dem Link-Tag tatsächlich ein Media-Query schon, also irgendwie MinWid oder sowas angeben kann.

01:02:43.560 --> 01:02:47.940
 Doch, das hab ich, glaub ich, schon mal gesehen, aber das hättest du mich jetzt gefragt, hätte ich gesagt, hab ich noch nie gesehen.

01:02:48.060 --> 01:02:57.500
 Weil so kann ich nämlich dann sicher gehen, dass, dass überhaupt diese, also keine Ahnung, ich hab vielleicht, ähm, ähm, mehrere CSS-Dateien, weil ich keinen Bundler hab bei dem Projekt oder so, ne.

01:02:57.500 --> 01:03:00.280
 Und ich hab eine CSS-Datei nur für Breakpoints.

01:03:00.280 --> 01:03:05.600
 Und dann ist es ja Quatsch, die für alle zu laden, wenn ich sie gar nicht brauch.

01:03:06.080 --> 01:03:10.420
 Also irgendwie, ich hab eine für Tablet-Breakpoint, eine für, äh, Smartphone-Breakpoint.

01:03:10.420 --> 01:03:15.140
 Und so kann ich dann eben sicherstellen, die wird auch nur dann geladen, wenn ich in dem Breakpoint bin.

01:03:15.140 --> 01:03:27.560
 Hat natürlich den Nachteil, wenn ich jetzt irgendwie meinen Screen rotiere, und das sind zwei verschiedene Breakpoints in zwei verschiedenen Dateien, oder ich nehm mein Browser-Fenster, zieh das groß und klein, dann muss die Ressource erstmal nachgeladen werden und dann, dann ruckelt's, ne.

01:03:27.560 --> 01:03:32.280
 Also das muss man im Hinterkopf behalten, aber vielleicht ist der Fall, äh, auch einfach zu vernachlässigen, dass das jemand macht.

01:03:32.600 --> 01:03:49.120
 Aber es geht jedenfalls, ich wusste nicht, dass das geht, ich kannte das mit dem Print und Display, sodass man sagen kann, ich hab ein spezielles Druck-Style-Sheet, wenn ich die Seite ausdrucke, möchte ich irgendwie die Navigation weghaben und so weiter, möchte nur den Artikel, ähm, in schöner Form ausdrucken und irgendwie anders stylen, ähm, aber dass das geht, wusste ich nicht, also auch da wieder was dazugelernt.

01:03:49.120 --> 01:04:02.480
 Und, ähm, dann bin ich auf noch mehr gestoßen, was ich so nicht kannte, ähm, also das Link war, glaub ich, somit das ergiebigste bei mir, und zwar, ähm, kann ich sagen, Rel ist gleich Preload.

01:04:02.600 --> 01:04:04.940
 Das heißt, dann wird eine Ressource vorgeladen.

01:04:04.940 --> 01:04:26.660
 Das kannte ich schon, aber ich kann dann spezifizieren das S-Attribut, also zum Beispiel S gleich Font und das Type-Attribut, und da geb ich dann halt Mime-Type an, also Font slash Wof2 zum Beispiel, und kann dann noch sagen Cross-Origin gleich Anonymous, ne, weil ich muss ja, ähm, auf eine andere Domain vielleicht, also eben Google Fonts, was ja jetzt das Thema war, was man eigentlich nicht machen sollte,

01:04:26.660 --> 01:04:31.320
 aber vielleicht, ne, will ich die von irgendwie, von meinem eigenen CDN, das aber auf einem anderen, auf einer anderen TLD.

01:04:31.320 --> 01:04:32.540
 Fonts ist vorne Punkt.

01:04:32.540 --> 01:04:40.740
 Genau, liegt auf einer anderen TLD oder auf einer anderen Sub-Domain, ähm, also muss ich halt sagen, hier, äh, Cross-Domain, äh, wie soll das gehandhabt werden?

01:04:41.220 --> 01:04:50.460
 Aber das ist ein Thema für sich. Aber jedenfalls kann ich das so genau definieren, sodass ich dann sicherstellen kann, okay, der Browser versteht, was er da lädt, von welchem Typ, und als was er das dann überhaupt laden soll.

01:04:51.900 --> 01:05:08.560
 Dann gibt es auch ein Disabled-Attribut auf dem Link-Tag, das wusste ich auch nicht, und ich kann ein Style-Sheet einbinden und kann aber sagen, das ist Disabled, und erst wenn, ja, und erst wenn ich dann per JavaScript irgendwie sage, aha, okay, das ist jetzt nicht mehr Disabled, dann wird das nachgeladen.

01:05:08.560 --> 01:05:09.600
 Funky.

01:05:10.680 --> 01:05:17.860
 Also wenn es beim Laden der Seite schon das Disabled-Attribut hat, wird es gar nicht geladen, äh, nee, das habe ich dem immer im DN-Artikel einfach geglaubt.

01:05:17.860 --> 01:05:19.900
 Okay, gut, nee, das finde ich, das finde ich echt.

01:05:19.900 --> 01:05:40.180
 Andere Sachen habe ich, da habe ich nachher noch Demos, aber, äh, das habe ich jetzt einfach, äh, habe ich gedacht, okay, wird schon so stimmen, ähm, und wie gesagt, wenn es beim Laden der Seite schon vorhanden ist, das Attribut, wird es gar nicht erst geladen, ansonsten, ähm, könnte ich es auch bei, bei, bei, bei, bei Document, äh, Content-Loaded, ähm, könnte ich dann sagen, okay, jetzt Disabled schnell, weil ich möchte es zwar geladen haben, aber

01:05:40.180 --> 01:06:01.840
 ich möchte es von Anfang an erst mal, äh, versteckt haben, und so könnte ich dann irgendwie bestimmte Stile halt, ähm, also ich könnte ein Dark-Mode zum Beispiel umschalten, wenn ich das nicht eh schon per, per Supports, äh, oder mit dieser Abfrage, ähm, ähm, äh, nach den, nach den User-Einstellungen, Dark-Mode oder Light-Theme, äh, haben möchte, oder einfach nicht habe, dann könnte ich theoretisch einen extra Style-Sheet dafür haben.

01:06:01.840 --> 01:06:08.500
 Es ist so krass, wie viele Details es immer gibt, die man eigentlich nicht auf dem Schirm hat, also das Erbild-Attribut nie gehört.

01:06:09.680 --> 01:06:11.320
 Ja, klar, generell gehört schon, aber nicht auf dem Link.

01:06:11.320 --> 01:06:13.500
 Ja, nicht beim Link, nicht beim Link, ja.

01:06:13.500 --> 01:06:31.540
 Genau. Ähm, so wie zum Beispiel, das hat jetzt mit keinem Spezifischen hier was zu tun, aber das Hidden-Attribut war mir auch nicht so bewusst, dass das verbreitet ist, und das kann man inzwischen eigentlich wirklich auch auf alle, also klar, Input-Type-Hidden, ne, kannte man, aber dass man wirklich alle HTML-Elemente mit, mit Hidden einfach verstecken kann.

01:06:31.680 --> 01:06:47.000
 Und dann nicht mehr irgendwie Style-gleich Display-None, ne, früher war das so, da hat man halt einen Inline-Style genommen, und selbst Feinde des Inline-Styles haben dann halt in dem Fall, naja, wenn's, wenn's jetzt nur von Anfang an ausgeblendet sein soll, ich möchte's irgendwann einblenden, naja, mach ich halt Inline-Style-Display-None.

01:06:47.400 --> 01:06:50.500
 Ähm, muss man gar nicht, kann man das Hidden-Ding nutzen, und das ist auch gleich viel semantischer.

01:06:50.500 --> 01:07:03.300
 Vorsicht, äh, an der Stelle sei nur gesagt, ähm, muss, da kommt der Accessibility-Mensch in mir raus, ähm, sowohl Dinge, die mit Display-None versteckt sind, als auch die, die das Hidden-Attribut haben, sind vor Screenreadern versteckt.

01:07:03.300 --> 01:07:10.600
 Mhm. Ähm, das sollte man vielleicht einfach im Hinterkopf behalten, wenn man das weiß, das kann man bewusst einsetzen, aber man sollte es wissen.

01:07:10.840 --> 01:07:20.160
 Wenn wir den Abschweif grade schon machen, was ist denn mit ARIA-Hidden? Sollte ich das dann da zusätzlich noch dazusetzen, oder war ist der Screenreader-Hidden eigentlich, okay.

01:07:20.160 --> 01:07:24.400
 Das heißt, ARIA-Hidden ist dann wirklich nur für den Screenreader-Hidden, aber ansonsten da?

01:07:24.400 --> 01:07:30.640
 Genau, ist visuell sichtbar, aber der Screenreader überspringt das, ganz genau.

01:07:30.640 --> 01:07:40.680
 Das kann durchaus sinnvoll sein, ich hab das in letzter Zeit, äh, recht häufig eingesetzt, ähm, an Stellen, wo ich halt tatsächlich mir die Seite mal angehört hab mit dem Screenreader und dachte so,

01:07:40.840 --> 01:07:44.520
 Hä, diese Information, die kommt jetzt doppelt und dreifach, das brauchst du ja gar nicht.

01:07:44.520 --> 01:07:57.160
 Also der Klassiker ist irgendwie, du hast so ein, ähm, irgendwie irgendwas Social-Media-Postartiges mit einem, äh, mit einem Avatar und dann vielleicht noch einen Text von dem Namen nebendran oder so.

01:07:57.360 --> 01:08:16.880
 Das ist absolut redundante Information für den Screenreader, weil beides zeigt auf dasselbe, der Link zeigt beides auf das Profil sozusagen, ja, ähm, der Avatar und, und der Link und dann sag ich, hey, den Avatar, den zu beschreiben, äh, das macht eh keiner, beziehungsweise die Funktion gibt's in Social Networks oft gar nicht.

01:08:17.240 --> 01:08:20.200
 Also mach ich den Aria hidden, das heißt, der ist sichtbar.

01:08:20.200 --> 01:08:27.820
 Ja, weil ansonsten, also du würdest vielleicht dem dann einen Alt, äh, Text geben von wegen, äh, Profilbild von Ed Konstantin, von Ed Groß Konstantin, ne?

01:08:27.820 --> 01:08:57.800
 Und dann hättest du Link, Titel, äh, Xing-Profil von Groß Konstantin, Avatar Groß Konstantin und dann vielleicht nochmal Ed Groß Konstantin, ja, und so kannst du das halt, äh, äh, kompletter Quatsch, an der Stelle Aria hidden is your friend, also, äh, es ist, es ist oft so ein Misconception, was ich jetzt festgestellt hab, auch im Austausch, äh, mit, mit, mit blinden Menschen, ähm, dass, es ist nicht immer nur das Hauptproblem, dass Information nicht bereitsteht, so im Sinne von,

01:08:57.800 --> 01:09:07.700
 da fehlt ein Alt-Text, ja, sondern es ist auch oft ein Problem, dass Dinge doppelt und fünffach kommen, was, was auch wahnsinnig nervig ist, weil, weil sie dann überhaupt nicht mit Büchstein...

01:09:07.700 --> 01:09:12.540
 Wenn wir im Stream wären, hätte ich jetzt gesagt, das, da mach mal ein Clip draus, weil das ist eine wichtige Information, die man immer wieder abrufen können sollte, ja.

01:09:12.540 --> 01:09:15.440
 Also, mach, mach einen Podcast-Clip, bitte.

01:09:15.440 --> 01:09:16.440
 Genau.

01:09:16.440 --> 01:09:27.480
 Ja, also, äh, genau, das ist der kurze Exkurs dazu, aber, ähm, bei diesem S-Attribut, da bin ich noch, äh, auf, auf andere Dinge gestoßen und das fand ich cool, das fand ich so cool, dass ich dann,

01:09:27.780 --> 01:09:38.240
 noch schnell, naja, schnell ist gut, äh, eine Demo dazu gebaut hab, und zwar gibt es S ist gleich Fetch zum Vorladen von, von Fetch oder XHR-Requests.

01:09:38.240 --> 01:09:39.680
 Mhm.

01:09:40.640 --> 01:09:56.660
 Das heißt, ich kann sagen, Link, rel gleich preload, as gleich fetch, dann übergebe ich vielleicht noch, ich weiß schon, ich krieg Json zurück oder ich krieg ne HTML-Seite zurück, also kann ich zum Beispiel type ist gleich text HTML, äh, machen.

01:09:57.160 --> 01:10:04.860
 Ähm, wichtig ist auch, dass ich dann in dem Fall auch dieses, äh, Cross-Origin-Attribut brauche, weil der Browser wissen muss, wie er, das behandeln soll.

01:10:06.320 --> 01:10:32.360
 Und dann kann ich tatsächlich eine, eine, eine Link, ähm, oder eine, eine, wie soll ich sagen, ein Ziel, das ich später per Fetch, wo ich sicher weiß, das werde ich so oder so nachladen, schon mal vom Browser vorladen lassen, bevor ich das JavaScript zeitig, wo ich vielleicht noch auf DOM ready oder auf Content loaded oder was auch immer warte, kann ich dem Browser das schon mal vorladen lassen.

01:10:32.360 --> 01:10:34.180
 Und das hat mich interessiert, das wollte ich ausprobieren.

01:10:34.180 --> 01:11:02.260
 Und was ich gemacht habe, ist diese, also ich hab's verlinkt, auch in den Shownotes, äh, CodePenDemo, da ist im HTML ist nur ein Link-Tag, ähm, rel preload, href ist gleich dann, wo wir sind, ist vorne, äh, .show, slash demos, ne, das ist alles eine Datei, und zwar die course2.php, die macht nix anderes als, äh, course Element, äh, äh, Request, also dieses Option Request, ähm, abfangen, ähm, und entsprechend zurückgeben, Header, äh, Cross-Origin, also Allowed, ne, gibt dann einfach

01:11:02.260 --> 01:11:12.440
 die, die aktuelle Seite wieder zurück, sodass ich dann auf jeden Fall zugreifen kann, weil normalerweise könnte ich ja per Fetch von CodePenDemo auf unsere Seite kein, kein, äh, Cross-Domain-Request machen.

01:11:12.440 --> 01:11:26.860
 So, das, das ist alles, was die macht, und das ist also die course2.php und die course1.php, oder nur course.php in dem Fall, ähm, sind genau das gleiche, die eine gibt course.php zurück als String einfach, und die andere course.php, damit man weiß, welche man geladen hat.

01:11:27.400 --> 01:11:36.460
 So, dann s gleich Fetch, courseOrigin gleich Anonymous, so, und das mach ich nur mit der course2.php, die course.php, die lade ich ganz normal ohne diesen Link-Tag.

01:11:36.900 --> 01:11:51.600
 Und alle beide werden ganz normal über ein Fetch-Request, dann diese URL eben auf die, auf die entsprechende PHP-Datei, und dann per, per then, äh, lasse ich mir zurückgeben, äh, die Response, also den Response-Text, den es zurückgegeben hat, äh, also den Dateinamen in dem Fall nur.

01:11:52.140 --> 01:12:05.200
 Ähm, und dann hab ich mir vorher gespeichert den aktuellen Unix-Timestamp und dann den Unix-Timestamp, ähm, zu dem Zeitpunkt, wo das Request fertig ist, und davon zieh ich das dann ab, sodass ich halt sagen kann, so lange hat das Request gedauert.

01:12:05.200 --> 01:12:22.460
 Und was man sieht in der, in der Konsole ist, dass das, ähm, course2.php, die ich über das Link-Tag mit, mit Preload und, äh, as Fetch, äh, eben angegeben hab, die dauert bei mir eine Millisekunde, maximal zwei Millisekunden, hab ich, glaub ich, äh, als längstes gehabt.

01:12:22.460 --> 01:12:24.100
 Während die andere, ähm, ich seh gerade vier.

01:12:24.100 --> 01:12:27.980
 Ein und zwei, oder vielleicht, ja, aber jedenfalls im einstelligen Bereich auf jeden Fall.

01:12:27.980 --> 01:12:32.080
 Ja, die andere hat bei mir zwar einundzwanzig jetzt in dem Fall, klar, ist immer ein bisschen unterschiedlich.

01:12:32.480 --> 01:12:38.260
 Und klar, in dem Fall ist das nicht schlimm, weil 20 Millisekunden, eine Millisekunde, ja, ist vernachlässigbar.

01:12:38.260 --> 01:12:44.440
 Aber ich mein, es gibt auch Seiten, die brauchen bis zum, äh, Time to first buy, ist ja immer so dieses Ding, ne, die brauchen ein bisschen länger.

01:12:44.440 --> 01:12:48.340
 Und da kann das halt vielleicht dann schon nerven, dass das ein bisschen lange dauert zum Nachladen.

01:12:48.340 --> 01:12:54.780
 Oder ich hab wirklich vielleicht große Daten, wo ich aber weiß, die will ich definitiv nachladen, weil ich lade sie deswegen nach, weil sie so groß sind, ja.

01:12:54.780 --> 01:12:57.700
 Und da kann ich dem Browser einfach schon mal ein bisschen Vorsprung geben.

01:12:58.040 --> 01:13:09.480
 Und das kann, je nachdem, wie lange die Seite generell braucht, um, um eben alles zu laden und das JavaScript auszuführen, kann das dazu führen, dass ich danach zumindest nicht noch eine zusätzliche Verzögerung hab.

01:13:10.020 --> 01:13:13.320
 Das ist ja, ich wollt grad sagen, das ist so ein totales Performance-Ding.

01:13:13.320 --> 01:13:19.220
 Und das Graceful-Fallback dafür ist halt einfach, ne, der Browser hat's halt nicht gecached, er macht halt einfach sein, sein Ding.

01:13:19.220 --> 01:13:21.600
 Wenn du sicher bist, dass du was nachladen willst.

01:13:21.620 --> 01:13:30.160
 Genau, also ich weiß, diese URL, die werd ich auf jeden Fall nachladen und das kann ein HTML-Snippet sein, das ich danach reinladen, eine Riesentabelle, die ich irgendwie verzögert nachladen will.

01:13:30.160 --> 01:13:37.920
 Oder eben ein JSON-Objekt, das riesengroß ist mit ganz vielen Daten, muss ich halt in dem Type dann entsprechend angeben.

01:13:38.260 --> 01:13:45.200
 Beziehungsweise, das macht, glaub ich, auch Content-Sniffing, wenn ich das nicht per Content-Policy verhindere.

01:13:45.200 --> 01:13:49.280
 Und dann kann ich da eben schon mal Zeit sparen.

01:13:49.280 --> 01:13:52.380
 Und das ist, da bin ich vorhin erst drauf gestoßen und das war mir nicht bewusst.

01:13:52.380 --> 01:13:56.400
 Und ich hab aber schon Anwendungsfälle, definitiv, dafür.

01:13:56.400 --> 01:14:00.100
 Und, ja, find ich cool, dass das geht.

01:14:00.100 --> 01:14:02.020
 Und hab ich jetzt neu gelernt.

01:14:02.480 --> 01:14:03.300
 Kannte ich auch nicht.

01:14:03.300 --> 01:14:07.760
 Und ich, das ist aber echt ein Ding, das muss ich mir mitnehmen.

01:14:07.760 --> 01:14:10.880
 Das muss in meinen Werkzeugkoffer, in meinen Webzeugkoffer rein.

01:14:10.880 --> 01:14:17.120
 Ja, ich könnte mir vorstellen, für das Projekt, an dem du sitzt, dass das da vielleicht auch teilweise zum Tragen kommen könnte.

01:14:17.120 --> 01:14:17.780
 Ja, ja.

01:14:17.780 --> 01:14:19.880
 Weil da große Datenmengen auch geladen werden.

01:14:19.880 --> 01:14:23.240
 Ja, nur, dass es relativ statisch ist momentan noch.

01:14:23.240 --> 01:14:26.440
 Aber vielleicht muss es nicht statisch sein.

01:14:26.440 --> 01:14:30.880
 Vielleicht ist das jetzt der Anreiz, Dinge nachzuladen, weil sie ja schneller nachladen können.

01:14:31.500 --> 01:14:40.640
 Also, wir haben die eine oder andere Stelle, wo wir schon ein Performance-Problem identifiziert haben, wo wir gerne mehr nachladen würden, damit wir schneller, damit der initiale Request schneller geht.

01:14:40.640 --> 01:14:44.120
 Und das wäre vielleicht echt ein Ding, was man da einsetzen könnte.

01:14:44.120 --> 01:14:50.360
 Dann kannst du es nämlich sogar so machen, dass du es dann halt erst tatsächlich dann laden lässt und einbaust, wenn du dahin gescrollt hast zum Beispiel.

01:14:50.360 --> 01:14:57.860
 Und du weißt aber, es wird keine große Verzögerung geben, weil zumindest die modernen Browser werden das vorgeladen haben.

01:14:57.860 --> 01:15:00.720
 Und das finde ich eine ziemlich coole Sache.

01:15:00.720 --> 01:15:02.220
 Ja, ja, absolut.

01:15:02.220 --> 01:15:03.840
 Cool.

01:15:03.840 --> 01:15:05.040
 Das ist wirklich cool.

01:15:05.040 --> 01:15:08.980
 Genau, also, Demo kommt in die Shownotes.

01:15:08.980 --> 01:15:11.800
 Dann gibt es noch, statt rel-pre-log, gibt es noch rel-pre-fetch.

01:15:13.760 --> 01:15:18.960
 Das ist für den Fall, dass die Ressource auf einer nachfolgenden Seite benötigt wird, nicht auf der aktuellen Seite.

01:15:19.680 --> 01:15:40.180
 Da kann ich dann, und da musste ich dran denken an unser, wir haben so ein Skript auf unserer Seite, wo wir sind, ist vorne.show, dass das Seitenladen beschleunigt, indem es genau dieses Prefetch, also ein Link-Attribut mit Prefetch, dynamisch in die Seite einbaut, sobald ich länger als x Millisekunden über einem Link havere.

01:15:40.300 --> 01:15:41.680
 Du meinst Instant.Page.

01:15:41.680 --> 01:15:56.540
 Genau, Instant-Page. Das beruht darauf. Das heißt, sobald ich da drüber habe, wird das eingefügt. Der Browser lädt die Seite schon mal vor, rendert sie, glaube ich, sogar schon mal vor. Das ist der Unterschied zwischen dem Preload und dem Prefetch, meine ich.

01:15:56.540 --> 01:16:04.600
 Dass das auch intern schon mal vorrendert. Und dann muss das nur noch geswappt werden, sobald ich tatsächlich auf diese Ressource zugreife.

01:16:04.600 --> 01:16:11.460
 Ich muss dazu noch kurz sagen, unser Caching funktioniert irgendwie trotzdem nicht mehr.

01:16:11.460 --> 01:16:13.900
 Ja, das ist ein bisschen traurig.

01:16:13.900 --> 01:16:25.960
 Ich weiß nicht genau, warum nicht mehr. Ich habe verschiedene Sachen ausprobiert, aber wenn du jetzt schnell klickst, ja, also wenn du nicht dieses, das ist wieder, das war schon mal viel besser.

01:16:25.960 --> 01:16:28.320
 Das war quasi, man hat es gar nicht gemerkt.

01:16:28.320 --> 01:16:33.000
 Das war mal rasend schnell und ich weiß nicht genau, warum das Caching nicht mehr richtig funktioniert.

01:16:33.000 --> 01:16:34.260
 Okay, müssen wir uns mal angucken.

01:16:34.260 --> 01:16:41.580
 Ja genau, das Caching-Plugin war das, was ich meinte, was von Automatic direkt ist. Das hat es irgendwann ein Update gegeben und seitdem ist es nicht mehr gut.

01:16:41.580 --> 01:16:42.520
 Okay, schade.

01:16:42.520 --> 01:16:43.640
 Ich habe schon, ja, egal.

01:16:43.640 --> 01:16:45.180
 Ja, genau.

01:16:45.180 --> 01:16:55.380
 Dann gibt es, okay, noch zwei Attribute noch schnell. Ich glaube, es gibt noch mehr Attribute. Ich habe dann aber irgendwann auch angefangen, das zu ignorieren und nicht alles durchzulesen. Also Integrity-Attribute.

01:16:55.380 --> 01:17:06.200
 Und das greift zurück auf, ähm, ach nee, das hat, glaube ich, mit den, nee, das hat mir den, das kommt erst später noch, das hat mir den, äh, mit diesen Content-Security-Dingern gar nichts zu tun.

01:17:06.200 --> 01:17:07.100
 Das ist ein Security-Ding.

01:17:07.100 --> 01:17:24.780
 Das Integrity-Ding ist einfach nur, das ist ein Base64-Hash, äh, von dem Dateienhalt, ähm, und damit kann ich überprüfen oder sicherstellen, dass, dass, dass, dass, dass die Ressource nicht verändert wurde auf dem Weg zu mir, dass, also irgendein Angreifer hier irgendwie man in the middle mäßig, äh, da Code ausgetauscht hat.

01:17:24.820 --> 01:17:39.280
 Das heißt, ich muss im Code hinterlegen, diesen Hash, der dann mit dem Dateienhalt übereinstimmt und dann weiß ich eben, also Libraries machen das zum Beispiel, wenn die sagen hier so, naja, du kannst das selbst hosten oder du nimmst das hier von unserem CDN, äh, hier einfach das Link-Tag einbauen.

01:17:39.280 --> 01:17:57.940
 Und da ist dann in der Regel auch so ein, so ein Integrity-Attribut mit dabei, ähm, das die halt vorkalkuliert haben und dann weiß ich, ich binde da nichts ein, was dann später irgendwas ganz anderem wieder entspricht oder die updaten dann die Datei, nachdem ich gesehen habe, dass die eigentlich sauber ist, weil dann würde der Browser verhindern, dass die geladen wird, weil das nicht mehr übereinstimmt.

01:17:59.540 --> 01:18:15.300
 Also Sicherheit for the win und dann gibt's noch Blocking gleich Render, damit kann ich sagen, dass, ähm, diese Ressource, das, das Rendern so lange blockieren soll, bis sie geladen ist, weil sie so essentiell wichtig ist, äh, dass, dass ich, dass ich die unbedingt brauche.

01:18:15.300 --> 01:18:17.400
 Genau.

01:18:17.400 --> 01:18:21.580
 Das sind, also alles, äh, alles, äh, viel Performance-Sachen.

01:18:21.580 --> 01:18:21.820
 Ja.

01:18:21.820 --> 01:18:23.840
 Bei dem Link und es ergibt auch total Sinn.

01:18:23.840 --> 01:18:29.520
 In dem Fall Un-Performance-Sachen, wenn ich, wenn ich das Rendern blockiere, aber, ähm, ja, einfach von der Priorität.

01:18:29.540 --> 01:18:39.520
 Also es gibt noch einen Attribut, mit dem ich wirklich auch die Priorität high oder low setzen kann, also da gibt's wirklich, ähm, noch einiges an Möglichkeiten und war mir zum Teil echt auch neu, ja.

01:18:39.520 --> 01:18:43.740
 Okay, du bist fertig mit Link.

01:18:43.740 --> 01:18:43.960
 Genau.

01:18:43.960 --> 01:18:55.940
 Jetzt kommt das, äh, das HTML-Tag, wo ich überrascht war über die Dinge, die es da gibt, ähm, weil ich das abgetan hab als, naja, das ist doch ganz easy und so, ne?

01:18:56.640 --> 01:19:14.800
 Ähm, und zwar das Meta-Tag, ähm, und viele kennen das wahrscheinlich für zum Beispiel, also das, ne, ganz allgemein, das ist für Metadaten, die nicht durch andere im Head verwendeten Elemente, wie zum Beispiel Link, Script und so weiter, abgebildet werden können.

01:19:15.360 --> 01:19:18.160
 Ähm, also so für, für den ganzen Rest sozusagen.

01:19:18.160 --> 01:19:36.800
 Ähm, es ist ein Tag, das kein End-Tag hat, ähm, also ein, ich hab, da hab ich ein neues Wort gelernt, ein Void-Element nennt man das, da gibt's auch einen, ähm, ähm, MDN-Eintrag zu Void-Elements, also das sind zum Beispiel, ähm, ähm, äh, BR, also alle, eigentlich alle, die kein schließendes Element haben.

01:19:36.800 --> 01:19:39.300
 Genau, oder auch das Base, was wir vorhin hatten, Base hat auch keinen Enttag.

01:19:39.300 --> 01:19:54.700
 Auch, auch Base, genau, oder Image oder HR oder Input, also alle Elemente, ähm, die kein schließendes Element haben, weil sie keinen Inhalt haben können, eigentlich, ähm, das ist eigentlich so, das, äh, das sind sogenannte Void-Elements, das wusste ich bis dahin auch nicht.

01:19:54.800 --> 01:20:11.800
 Ähm, und die übliche Verwendung, die man so kennt, also was, was auf jeden Fall in jeder, oder so gut wie in jeder Seite drin ist, ist zum Beispiel Charset, äh, ist gleich UTF-8, das ist eigentlich so der Standard mittlerweile, ich glaub, es gibt eigentlich, ich weiß gar nicht, ist das mittlerweile sogar so der Standard, dass man's gar nicht mehr in die Seite reinschreiben müsste rein theoretisch, weiß ich nicht.

01:20:11.800 --> 01:20:24.100
 Ich hatte mal noch gar nicht so lange her irgendwie den Fall, dass irgendwelche UTF-8-Zeichen, ich hab ne schnelle Demo gebastelt und irgendwie wurden die dann, äh, komisch zerhackt angezeigt und, äh, also der, also man sollte es einfach machen.

01:20:24.580 --> 01:20:54.300
 Genau, einfach machen, das ist mittlerweile total einfach geworden im Vergleich zu früher, jetzt muss ich doch nochmal Referenz, referenzieren, wie es früher war, früher gab's da verschiedenste Zeichensätze, die man da eintragen konnte und das hat dann unter Umständen Probleme gemacht mit Umlauten, also das war immer so das Ding, also sobald du ein Zeichen da rein hast, was nicht ASCII war, hast du unter Umständen Probleme gekriegt und dann, äh, wenn da irgendwie Daten vermischt wurden und keine Ahnung, also heutzutage Standard Charset UTF-8 als Meta-Tag, also Meta-Charset UTF-8, fertig, äh, und damit hat sich die Sache erledigt.

01:20:54.360 --> 01:21:06.960
 Das ist auf jeden Fall was, was eigentlich in jeder Seite wahrscheinlich drin ist und deswegen hab ich mich grad gefragt, ob das nicht eigentlich jetzt schon so Standard wäre, dass die Browser, ähm, das standardmäßig annehmen, wenn nichts da steht, aber ich weiß es, das weiß ich tatsächlich nicht.

01:21:07.360 --> 01:21:33.320
 Dann, wie das auch noch verwendet werden kann oder was man sehr, sehr viel sieht, ist Meta mit einem Name-Attribut und einem Content-Attribut. Und das können verschiedene sein. Da gibt es verschiedene Standards, die sich etabliert haben, zum Beispiel so für Suchmaschinen gibt es zum Beispiel Description, wo man dann so einen Beschreibungstext von der Seite reinschreibt.

01:21:33.320 --> 01:21:56.700
 Das wird normalerweise, bei Google ist das auch so, diese ersten zwei, drei Zeilen Text, die da angezeigt werden, nicht der Titel. Wichtig, der Titel kommt später noch. Oder Theme-Color gibt es zum Beispiel. Damit kann man so ein bisschen bestimmen, wie bestimmte Browser auf zum Beispiel Mobilgeräten, Hintergrundfarben von bestimmten Bereichen rendern. Oder man kann da auch selbst was erfinden.

01:21:57.280 --> 01:22:10.220
 Also, was ich in vielen Projekten schon gesehen habe, sind so Versionsnummern zum Beispiel oder so. Also, ich kann einfach sagen, Meta-Name-Version-Content gleich 1.3.37 oder so was.

01:22:10.220 --> 01:22:17.000
 Genau, kannst du vielleicht mit einem eigenen Prefix versehen, so wie diese OG-Doppelpunkt-Dinger, dass man es so abkapselt vielleicht.

01:22:17.180 --> 01:22:19.680
 Aber man kann eigentlich alles da reinmachen.

01:22:19.680 --> 01:22:20.720
 Du kannst alles machen.

01:22:20.720 --> 01:22:23.040
 Also, alles, was in einem Attribut drinsteht.

01:22:23.040 --> 01:22:34.800
 Früher gab es zum Beispiel Generator Frontpage 4.0, erinnere ich mich noch so ganz früher. So was kann man da auch machen. Aber es gibt natürlich auch noch ein paar Standards, die sich so etabliert haben, auch mit Name und Content.

01:22:35.480 --> 01:22:44.240
 Nämlich zum Beispiel Viewport beim Name und dann so was wie, bei Content kommt so With Device, With Initial Scale, User Scalable.

01:22:44.240 --> 01:22:46.160
 Ganz wichtig für HTML-E-Mails.

01:22:46.160 --> 01:22:47.560
 Ganz wichtig.

01:22:47.560 --> 01:22:49.240
 Da habe ich das ganz viel benutzt.

01:22:49.240 --> 01:22:52.600
 Dann gab es irgendwelche Bugs, dass dann den Outlook das aber irgendwie.

01:22:53.160 --> 01:22:59.380
 Genau. Also, das, was ich jetzt gerade hier gesagt habe, das wäre so was, was man für Responsive Web Designs braucht tatsächlich.

01:22:59.380 --> 01:23:08.740
 Wenn du das nicht machst, wenn du das nicht reinpackst, dann wird ziemlich sicher deine Seite auf dem Smartphone oder auf einem Small Screen runterskaliert.

01:23:08.740 --> 01:23:10.880
 Also, klein gemacht, sodass man sie dann zoomen muss.

01:23:10.880 --> 01:23:18.920
 Und ganz wichtig, bitte nicht User Scalable No oder irgendwie die Max-Mind-Scaler, Max-Scaler auf 1.0.

01:23:19.360 --> 01:23:26.840
 Bitte nicht machen. Ich hasse das, wenn das gemacht ist, weil es ist einfach, ich sehe schlecht, ich habe eine Brille und wenn ich die mal nicht auf habe, dann muss ich ranzoomen können.

01:23:26.840 --> 01:23:32.040
 Also, das ist einfach absolut, ja, böse, das zu unterbinden.

01:23:32.040 --> 01:23:38.040
 Auch wenn ich jetzt denke, ich will aber nicht, dass mein schönes Layout kaputt ist, da hast du als Designer oder Entwickler, da hast du nichts mitzureden.

01:23:38.040 --> 01:23:42.140
 Ich will, ich muss den Content lesen können und dann muss ich den auch ranzoomen können.

01:23:42.140 --> 01:23:44.140
 Danke, dass du das sagst, sonst hätte ich es gesagt.

01:23:44.140 --> 01:23:48.840
 Es ist viel besser, das von jemandem zu hören, der richtig sauer wird.

01:23:49.000 --> 01:23:52.480
 Ja, der halt betroffen ist, also ich brauche das wirklich manchmal.

01:23:52.480 --> 01:23:58.740
 Genau, also User Scalable No, das ist im Prinzip keine Option, wenn ihr das einsetzt, dann kriegt ihr es mit uns zu tun.

01:23:58.740 --> 01:24:00.540
 Dann komme ich persönlich vorbei, ja.

01:24:00.540 --> 01:24:07.780
 Und dann sage ich, da gibt es Stress, da gibt es Stress und Konstantins Tochter kommt auch noch vorbei und die wirft dann Dreck auf dein Haus.

01:24:07.780 --> 01:24:08.940
 Ich sage dir, das wird passieren.

01:24:08.940 --> 01:24:10.040
 Fick die Henne!

01:24:13.920 --> 01:24:16.300
 Das haben wir jetzt überhört, dass ein kleines Kind das gesagt hat.

01:24:16.300 --> 01:24:17.160
 Keine bösen Wörter.

01:24:17.160 --> 01:24:18.660
 Keine bösen Wörter.

01:24:18.660 --> 01:24:25.000
 Genau, Meta-Daten-Versuchmaschinen hatte ich schon angerissen mit Description, es gab früher auch mal noch Keywords.

01:24:25.000 --> 01:24:26.820
 Ich weiß gar nicht, ob das Google überhaupt noch interessiert.

01:24:26.820 --> 01:24:31.400
 Ich glaube, dass Description und Keywords beides nicht mehr benutzt wird, weil es ja dann diese zusätzlichen ...

01:24:31.400 --> 01:24:37.680
 Ja, aber da gibt es doch diese Dublin-Core-Geschichte und ich glaube, die werden benutzt.

01:24:37.680 --> 01:24:42.500
 Description ist definitiv der Text, der bei Google angezeigt wird unter dem Titel.

01:24:42.500 --> 01:24:44.500
 Da bin ich mir ganz, ganz, ganz sicher.

01:24:44.500 --> 01:24:50.920
 Also zumindest hat, glaube ich, DC-Core Priorität und dann vorweg auf Description.

01:24:50.920 --> 01:24:51.140
 Könnte sein.

01:24:51.140 --> 01:24:56.940
 Ja, aber ganz, ganz sicher ist das, das haben wir bei uns auch so ein, ganz, ganz sicher ist die Description der Text.

01:24:56.940 --> 01:25:02.640
 Also wenn du nichts anderes Vergleichbares angibst, ist das der Text, der da angezeigt wird.

01:25:02.640 --> 01:25:11.680
 Dann gibt es noch so was, ich weiß gar nicht, ob das tatsächlich noch ein Ding ist, das können wir die SEO, die dunklen SEO-Priester, können wir das mal sagen.

01:25:11.680 --> 01:25:20.820
 Meta-Name Robots, Content No Index No Follow oder Index Follow, also wo man der Suchmaschine im Prinzip sagt, darfst du das indexieren, darfst du da hin oder darfst du da nicht hin?

01:25:20.820 --> 01:25:22.220
 Ich weiß gar nicht, ob Google das noch interessiert.

01:25:22.220 --> 01:25:25.120
 Also ich glaube, offiziell hält sich da Google schon dran.

01:25:25.260 --> 01:25:31.440
 Wahrscheinlich landet es trotzdem bei deren Daten, weil die wollen ja alles haben, aber sie geben es dann, glaube ich, nicht in den Suchergebnissen aus.

01:25:31.440 --> 01:25:34.620
 Also WordPress-Seiten kannst du immer noch so einstellen, dass sie nicht indexiert werden.

01:25:34.620 --> 01:25:36.720
 Aber das ist hier mit der Robots-TXT auch.

01:25:36.720 --> 01:25:42.100
 Du musst dich halt darauf verlassen, dass das gutartige Bots sind, die das berücksichtigen.

01:25:42.100 --> 01:25:48.100
 Weil jeder bösartige Bot wird halt nicht sagen, oh, disallow from, oh, schade, ja, dann nicht.

01:25:50.100 --> 01:26:03.340
 Also ihr müsst euch sicher, also ihr könnt davon ausgehen, wenn ihr irgendwas ins Internet schreibt, öffentlich, ohne Authentifizierung zugreifbar, dann ist das öffentlich, egal was ihr in die Meta-Tags schreibt.

01:26:03.480 --> 01:26:11.100
 Also wenn ihr dem Roboter, dem Meta-Name-Robots-Content-No-Index-No-Follow schreibt, dann ist es trotzdem öffentlich.

01:26:11.460 --> 01:26:14.300
 Also da muss man sich nicht dran halten, das war mal so ein Ding.

01:26:14.300 --> 01:26:22.340
 Ich weiß nicht, ob das überhaupt, falls ein SEO-Hohepriester oder Priesterin, nee, hohe Priester, nein, dunkle, ganz wichtig, dunkle Priester,

01:26:22.340 --> 01:26:32.580
 falls geheime dunkle SEO-MagierInnen zuhören, erhält uns mal, ob das immer noch ein Ding ist,

01:26:32.700 --> 01:26:38.280
 ob man noch glaubt, dass das irgendwie was hilft oder ist das total verallt.

01:26:38.280 --> 01:26:42.400
 Das stand in einem Artikel mit drin, ich dachte, ah ja, stimmt, ich erinnere mich, das war mal irgendwie so ein Ding,

01:26:42.400 --> 01:26:47.480
 aber da ich mich mit SEO überhaupt gar nicht beschäftige bei meiner Arbeit, wirklich so gar nicht,

01:26:47.480 --> 01:26:56.200
 weil alles, was ich mache, hinter einem Login ist und nur unsere interne Suchmaschine im Prinzip da Sachen indexiert

01:26:56.200 --> 01:27:05.080
 und da, glaube ich, das keine Rolle spielt, ja, habe ich keine Ahnung, ob das irgendwie noch State of the Art ist oder nicht.

01:27:05.080 --> 01:27:11.240
 Okay, so, und jetzt kommen wir zu dem Bereich, der mich ein bisschen überrascht hat bei Meta.

01:27:11.240 --> 01:27:20.260
 Und zwar, man kann bei Meta nicht nur irgendwie, was hatte ich oben, Charset angeben und name,

01:27:20.260 --> 01:27:26.360
 sondern als erstes Attribut auch HTTP-Equiv, was für Äquivalent steht, Äquivalent.

01:27:26.360 --> 01:27:32.240
 Gesehen habe ich das schon so oft und mir war nie so wirklich klar, was das macht.

01:27:32.240 --> 01:27:41.520
 Und ich kann dir genau sagen, wo ich das schon mal gesehen habe, welche Anwendungsfall ich davon kannte.

01:27:41.520 --> 01:27:53.480
 Also, den habe ich auch, das war da unten, und zwar HTTP-Equiv ist gleich Refresh, Content 5, Semikolon URL gleich Pfad.

01:27:53.480 --> 01:28:00.400
 Genau, also statt per PHP-Header-Location zum Beispiel zu setzen oder irgendwie anders serverseitig, kann ich das auch per HTML machen.

01:28:00.400 --> 01:28:06.360
 Also, du kannst also quasi eine HTML-Weiterleitung machen auf eine andere Seite, was du aber auch machen kannst.

01:28:06.360 --> 01:28:11.080
 Also, dieses Content, diese Zahl, sind Sekunden, ja.

01:28:11.080 --> 01:28:23.640
 Du kannst aber auch, und das haben früher so Seiten gemacht, die öfter neue Informationen hatten, aber bevor es irgendwie so Polling mit JavaScript gab oder sowas, haben die sich automatisch refreshed.

01:28:23.640 --> 01:28:29.420
 Das heißt, da war der Link die Seite selbst und die hat sich alle paar, so und so viele Sekunden automatisch neu geladen.

01:28:29.420 --> 01:28:33.260
 Seiten, die oft was Neues hatten, das gibt es heute gerade nicht mehr.

01:28:33.260 --> 01:28:37.680
 Also, sie verlassen jetzt dieses Angebot, sie werden in fünf Sekunden automatisch weitergeleitet, sowas.

01:28:37.680 --> 01:28:39.520
 Wozu auch immer diese Seite angezeigt wird.

01:28:39.520 --> 01:28:40.720
 Das ist so ein Pseudosecurity-Ding.

01:28:40.720 --> 01:28:43.660
 Ja, rechtliche Absicherung, damit man wirklich ganz deutlich macht.

01:28:43.660 --> 01:28:47.160
 Genau, aber das ist tatsächlich noch relativ aktuell.

01:28:47.160 --> 01:28:54.400
 Hatte ich jetzt gerade, habe ich jetzt gerade festgestellt, dass Microsoft Teams genau so etwas eingebaut hat, jetzt erst seit kurzem.

01:28:54.500 --> 01:29:00.320
 Weil wir benutzen das bei uns auf der Arbeit Microsoft Teams und ich bin mir ganz sicher, dass die vorher auch schon die Links getrackt haben.

01:29:00.320 --> 01:29:04.600
 Wenn man irgendwie in den Teams-Chat einen Link reintut, hat Microsoft schon den Link getrackt.

01:29:04.600 --> 01:29:08.180
 Aber seit kurzem ist da so eine komische Seite zwischengeschaltet.

01:29:08.180 --> 01:29:11.240
 So von wegen, wir prüfen jetzt diesen Link.

01:29:11.240 --> 01:29:13.420
 Ich weiß nicht genau, was da passiert.

01:29:13.420 --> 01:29:16.880
 Ob die das dann tatsächlich gegen irgendwelche Malware-Listen hauen oder sowas.

01:29:17.380 --> 01:29:21.680
 Ich weiß nicht, aber das ist genau so eine Seite, wie man das kennt.

01:29:21.680 --> 01:29:24.160
 Zum Beispiel auch bei diversen Portalen.

01:29:24.160 --> 01:29:28.080
 Facebook, keine Ahnung, ganz, ganz viele haben solche Zwischenschaltzeiten.

01:29:28.080 --> 01:29:30.260
 Sollt ihr nicht machen, braucht man nicht.

01:29:30.260 --> 01:29:33.500
 Aber genau, also Refresh.

01:29:33.500 --> 01:29:37.940
 Und dann habe ich überlegt, was ist HTTP-Equivalent?

01:29:38.660 --> 01:29:50.880
 Und das bedeutet eigentlich nur, dass es als, also der Gedanke dahinter war, dass man HTTP-Header in HTML reinschreibt und die dann im Prinzip ausgewertet werden.

01:29:50.880 --> 01:29:53.040
 Falls man keine Möglichkeit hat, den Server entsprechend zu konfigurieren.

01:29:53.040 --> 01:29:55.860
 Genau, falls man keine Möglichkeit hat, den Server ...

01:29:55.860 --> 01:29:58.900
 Die Frage ist nur, warum man sich dann nicht an den Headern orientiert hat.

01:29:58.900 --> 01:30:01.980
 Weil der Header heißt ja nicht wirklich Refresh, der heißt ja Location.

01:30:04.760 --> 01:30:07.820
 Und X-Bias gibt's ja, warte mal, gibt's X-Bias als Header?

01:30:07.820 --> 01:30:09.460
 Das nimmst du mir hier alles vorweg, aber ist okay.

01:30:09.460 --> 01:30:10.120
 Achso, sorry.

01:30:10.120 --> 01:30:11.660
 Nein, es passt schon.

01:30:11.660 --> 01:30:14.380
 Genau, du hast es im Prinzip schon gesagt.

01:30:14.380 --> 01:30:23.080
 Das war tatsächlich, also als Ersatz, falls und falls der Server selbst einen Header setzt, der so heißt, dann wird, oder der genau diese Funktion hat ...

01:30:23.080 --> 01:30:25.660
 Achso, du schreibst das dann, du hast dir das wirklich genau so notiert, ja.

01:30:25.660 --> 01:30:26.200
 Okay.

01:30:26.200 --> 01:30:28.040
 Ich hab mir das genau so notiert, ja, genau.

01:30:28.040 --> 01:30:29.740
 Ich lese es gerade, ja.

01:30:29.740 --> 01:30:32.960
 Dann wird das vom Server genommen, ja.

01:30:32.960 --> 01:30:44.080
 Aber wofür das sinnvoll sein kann, ist, wenn du jetzt zum Beispiel keinen Server hast, es gab früher so Media-CDs mit irgendwelchen HTML-Sachen drauf.

01:30:44.080 --> 01:30:51.840
 Oder, keine Ahnung, du hast irgendwie aus irgendwelchen Gründen etwas, was lokal bei dir liegt, was nicht von einem Server ausgeliefert wird, dann kannst du das tatsächlich verwenden.

01:30:51.840 --> 01:30:55.640
 Aber es gibt nur eine bestimmte kurze Liste von Headern, die da funktionieren.

01:30:55.640 --> 01:30:58.140
 Da geht nicht jeder Header, du kannst nicht jeden Header damit setzen.

01:30:58.140 --> 01:30:59.440
 Aber das war die Idee dahinter.

01:30:59.440 --> 01:31:09.140
 Ähm, genau, was du vorhin schon gesagt hast, HTTP expires, damit kannst du quasi Cache-Header setzen.

01:31:09.140 --> 01:31:15.440
 Wobei natürlich die Frage ist, wenn's eh statisch ist, weil's keinen Server hat, dann ist ja, also ...

01:31:15.440 --> 01:31:15.660
 Hm.

01:31:17.220 --> 01:31:19.240
 Es ist für den Fall sinnlos.

01:31:19.240 --> 01:31:26.100
 Außer die Datei wird in regelmäßigen Abständen durch ein Programm oder so was neu geschrieben mit neuen Inhalten.

01:31:26.100 --> 01:31:28.360
 Dann möchte ich vielleicht wirklich nicht, dass der Browser das kennt.

01:31:28.360 --> 01:31:30.760
 Man merkt schon ein bisschen, aus welcher Zeit das stammt.

01:31:30.760 --> 01:31:30.920
 Ja.

01:31:30.920 --> 01:31:36.260
 Das ist nämlich, das ist sehr, sehr alt, aber das gibt es immer noch und offenbar schon funktioniert's auch immer noch.

01:31:36.260 --> 01:31:43.600
 Auch hier expires und dann Content in Klammern, äh, Content in Anführungszeichen, die Anzahl der Sekunden, ne, wieder.

01:31:43.980 --> 01:31:47.680
 Und das ist tatsächlich ein Vorteil im Vergleich zu Server-Headern, weil da kann ich es nicht setzen, ne.

01:31:47.680 --> 01:31:52.200
 Also da kann ich nur sagen, die Location ist so, aber da wird schon, bevor der Rest ausgeliefert wird, wird schon weitergeleitet.

01:31:52.200 --> 01:31:57.580
 Und das ist tatsächlich, das hätte ich normalerweise sonst per JavaScript machen müssen, dass ich nach fünf Sekunden weiterleite.

01:31:57.580 --> 01:32:01.060
 Ähm, ich lese mal noch ein paar weitere vor, die auch noch gehen würden.

01:32:01.060 --> 01:32:05.720
 Ähm, du kannst auch noch Mimetypes mit Content-Type, äh, definieren.

01:32:05.720 --> 01:32:11.880
 Ähm, Default-Style, da weiß ich nicht, da hab ich nicht genau nachgelesen, was das tut.

01:32:11.960 --> 01:32:14.180
 Mimetypes mit Content-Type.

01:32:14.180 --> 01:32:15.120
 Mhm.

01:32:15.120 --> 01:32:25.300
 Das heißt, ich könnte ein HTML-Dokument machen und dem sagen, du bist vom Typ Application JSON und im Body ist dann ein JSON-String?

01:32:25.300 --> 01:32:26.640
 Das müsste, das müsste gehen.

01:32:26.640 --> 01:32:35.380
 Dann gibt's noch tatsächlich das, äh, ne, das lass ich weg, XUA-Compatible, also da, da sollten sich nur die Archäologen ranwagen.

01:32:35.380 --> 01:32:41.080
 Ähm, ähm, und es geht wohl auch Content-Security-Policy.

01:32:41.080 --> 01:32:42.660
 Ach.

01:32:42.660 --> 01:32:43.740
 Darüber hatten wir es, ja.

01:32:43.740 --> 01:32:52.680
 Das kannst du wohl auch damit machen, was ich echt verrückt finde, dass du das direkt in HTML, äh, kannst du in eine CSP reinschreiben.

01:32:54.640 --> 01:32:56.260
 Genau, und vieles mehr.

01:32:56.260 --> 01:33:00.860
 Also da lohnt es sich auf jeden Fall mal, ähm, den MDN-Artikel durchzulesen.

01:33:00.860 --> 01:33:13.340
 Und da muss ich aber auch sagen, das kommt auch noch in die Shownotes, ähm, ich hab mir, ich bin, ja, mir ist schwer gefallen, den MDN-Artikel dazu zu lesen, weil das, ich fand, sehr, ähm, akademisches Englisch war.

01:33:13.780 --> 01:33:19.560
 Und, äh, und, äh, dann hab ich mir gedacht, hm, vielleicht find ich ja irgendwo anders noch eine, noch eine Beschreibung, die irgendwie für mich zugänglicher ist.

01:33:19.560 --> 01:33:21.700
 Und dann hab ich mich erinnert an Self-HTML.

01:33:21.700 --> 01:33:24.220
 Ich weiß gar nicht, da haben wir vor Älionen auch mal drüber gesprochen.

01:33:24.220 --> 01:33:30.400
 Self-HTML war früher so die deutsche HTML-Referenz, wo du irgendwie so lernen kannst, wie man Webseiten macht.

01:33:30.460 --> 01:33:31.500
 Und das gibt es immer noch.

01:33:31.500 --> 01:33:39.800
 Und ich fand tatsächlich, äh, den Artikel zu Meta-Tag dort sehr erhellend und sehr, sehr gut, sehr, sehr gut geschrieben.

01:33:39.800 --> 01:33:43.900
 Auch ein bisschen akademisch, aber deutsch-akademisch verstehe ich ein bisschen besser als englisch-akademisch.

01:33:43.900 --> 01:33:50.280
 Ähm, und da waren deutlich mehr Beispiele, die ich irgendwie praxisnäher fand, als das, was im MDN-Artikel steht.

01:33:50.280 --> 01:33:59.840
 Also, äh, falls ihr irgendwie mal, äh, auch das Gefühl habt, na, dieser MDN-Artikel, der ist jetzt irgendwie ein bisschen arg theoretisch und ich hätte gerne mal was Praktisches.

01:33:59.840 --> 01:34:04.220
 Schaut mal bei Self-HTML dabei, äh, also wiki.selfhtml.org.

01:34:04.220 --> 01:34:08.720
 Da gibt es einige sehr gute Sachen auf, auf, sehr gut im Deutsch geschrieben.

01:34:08.720 --> 01:34:10.720
 Also, das kann ich auf jeden Fall empfehlen.

01:34:10.720 --> 01:34:11.560
 Schaut da mal rein.

01:34:11.560 --> 01:34:14.320
 Das ist, ähm, ich glaub, das ist immer noch ein Ding.

01:34:14.320 --> 01:34:19.200
 Also, wenn, wenn man, wenn man, äh, nicht nur die akademischen Beschreibungen von der MDN haben will.

01:34:19.200 --> 01:34:23.840
 Ich find auch die Beispiele oft bei MDN sehr, sehr abgedreht und wenig praxisnah.

01:34:23.840 --> 01:34:25.940
 Also, das ist auf jeden Fall hier noch mein Tipp an der Stelle.

01:34:25.940 --> 01:34:27.220
 Self-HTML mal wieder angucken.

01:34:27.860 --> 01:34:30.260
 Also, ich hab grad das mal ausprobiert, hier auf CodePen.

01:34:30.260 --> 01:34:39.480
 Wenn ich, äh, das HTTP-Equivset mit Content-Type-Application-Json, also das verändert nichts, das wird dadurch nicht als, als Json irgendwie, äh, gepasst.

01:34:39.480 --> 01:34:44.660
 Ich glaube, dass das aus der Zeit kommt, wo ich, äh, vielleicht unterscheiden können wollte zwischen X-HTML und HTML.

01:34:45.660 --> 01:34:54.840
 Dass ich dann damit sagen konnte, okay, das ist ein X-HTML-Dokument oder ein HTML-Dokument. Also, beliebige Sachen kann ich da wohl nicht machen. Sonst könnte ich ja auch Image-JPEG oder sowas nehmen, ne, dann ...

01:34:54.840 --> 01:34:55.340
 Der wär super.

01:34:55.340 --> 01:34:56.100
 Ja.

01:34:56.100 --> 01:34:59.220
 Image-JPEG.

01:35:00.920 --> 01:35:03.640
 Aber das sollte nicht gehen, ne, das müsste den ...

01:35:03.640 --> 01:35:05.020
 Ne.

01:35:05.020 --> 01:35:12.820
 Gut. So, das zum Meta-Tag, was sich, äh, was sich echt als überraschend erwiesen hat für mich.

01:35:12.820 --> 01:35:19.740
 Ich weiß nicht, ich weiß nicht, ich muss ja sagen, es gibt über 100 gültige HTML-Tags. Wir haben jetzt heute acht.

01:35:19.740 --> 01:35:27.840
 Ja, äh, ja, aber ich glaube, es gibt schon so ein paar, weißt du, gerade so Auszeichnungssachen, äh, ich glaube, da, da kann man dann recht schnell drüber gehen.

01:35:27.840 --> 01:35:31.820
 Wir gucken mal, was als nächstes anstehen würde und wie viel das sind und, und wie wir es vielleicht komprimieren.

01:35:31.820 --> 01:35:32.740
 Ja.

01:35:32.740 --> 01:35:41.080
 Mal schauen. Aber so an sich finde ich es cool, wenn wir wirklich so, äh, back to basics, back to the root, äh, mal so alles mal genau angucken, weil halt einfach so viele Sachen, da hat man es ja auch schon mal drüber,

01:35:41.660 --> 01:35:53.220
 Es gibt inzwischen so viel, was man lernen kann, also auch bei, bei JavaScript, bei, bei CSS und wir sind teilweise so ein bisschen abgehängt, weil man gar nicht alles mehr mitbekommt, was sich verändert und was es gibt.

01:35:53.220 --> 01:36:08.660
 Und, ähm, deswegen ist es ganz cool, mal wirklich so einen Auffrischungskurs zu machen und gerade mit dem Fetch zum Beispiel vorhin, da haben wir beide was gelernt, was man wirklich im Alltag, ähm, jetzt auch gebrauchen kann und deswegen finde ich das eigentlich doch ein ganz cooles Format, aber ich bin auch gespannt auf eure, auf euer Feedback.

01:36:10.180 --> 01:36:17.240
 Okay. Gut, dann, äh, kommen wir zu meinem letzten, nee, meinem vorletzten, ähm, Style.

01:36:17.240 --> 01:36:18.580
 Das hast du dich schon, das hast du dich schon gefreut.

01:36:18.580 --> 01:36:22.120
 Ja, ich dachte, das ist schon vorbei, aber ich weiß nicht. Ähm, Style.

01:36:23.180 --> 01:36:33.540
 Und, ähm, Style, äh, gibt eben den, den Style, das Styling vor, also wie, äh, das, was ich in einem Style-Sheet in einer externen Datei schreiben kann, das kann ich eben auch in Style-Block packen.

01:36:34.240 --> 01:36:49.180
 Und, ähm, ähm, auch so ein Style-Block kann wieder das Media-Attribut haben und, ähm, da drin kann ich, äh, ein Media-Query auch wieder angeben oder eben der Default-Wert dafür ist all, also, ne, wird immer, immer, äh, ausgewertet.

01:36:49.300 --> 01:37:00.780
 Und, ähm, dann gibt es noch, und da kommen wir jetzt zu Content-Security-Policy, was ich vorhin angesprochen hatte, äh, wo ich irgendwie dachte, dass das bei diesem, ähm, Base64-Ding zum Tragen kommt.

01:37:00.980 --> 01:37:23.280
 Aber da gibt es das Attribut Nons und, äh, damit kann ich einen, einen beliebigen Wert festlegen, ähm, den ich dann mit Content-Security-Policy, und das ist Folge 48, wer das nochmal nachhören möchte, ähm, den ich, auf den ich dann dazugreifen kann, also, beziehungsweise den ich in diese Definition mit aufnehmen kann, an erlaubten Inline-Elementen.

01:37:23.480 --> 01:37:51.780
 Und so kann ich dann eben sicher gehen, wenn ich jetzt User-Content habe, ich meine, normalerweise sollte man den sowieso entsprechend, äh, validieren und HTML rausfiltern und was weiß ich, aber mit diesen Content-Security-Policy-Dingern kann ich eben schon das vorwegnehmen und sicherstellen, es kann auf jeden Fall kein Fremd-Content, kein Inline-Skript, kein Inline-CSS durch einen User eingeschleust werden, das dann ausgeführt wird, weil es eben abgelehnt wird, wenn dieses, äh, dieses Nons nicht, nicht vordefiniert ist als Style-Source.

01:37:51.780 --> 01:38:00.520
 Äh, genau, das ist ein Attribut, das ich setzen kann. Dann, ähm, das hatte ich auch erst gelernt im Zuge von dieser Content-Security-Policy, wo ich mich, mich mit beschäftigt hab.

01:38:00.520 --> 01:38:10.680
 So, dann gibt es ein Title-Attribut auf, ähm, ah nee, warte mal, das ist mir, glaub ich, verrutscht, das gehört noch zu dem, zu dem Link, oder?

01:38:10.680 --> 01:38:13.660
 Nee, das ist bei Style dabei, ich hab grad den Artikel nochmal auf.

01:38:13.660 --> 01:38:16.100
 Und, äh, bei Style kann ich auch REL setzen.

01:38:16.100 --> 01:38:19.480
 Nee, das gehört, glaub ich, wirklich zu, das gehört wirklich zu dem.

01:38:19.480 --> 01:38:21.480
 Nee, aber Title gibt es bei Style.

01:38:21.780 --> 01:38:25.520
 Das hab ich grad, hat mich grad auch gebundert, das kommt da tatsächlich, das ist schon richtig.

01:38:25.520 --> 01:38:27.300
 Warum gibt's das denn dann da?

01:38:27.300 --> 01:38:31.160
 Alternative Style-Sheets.

01:38:31.160 --> 01:38:33.140
 Ja, dann, dann ist das doch das.

01:38:33.140 --> 01:38:34.520
 Dann ist das doch das, was ich meinte.

01:38:34.520 --> 01:38:37.660
 Äh, Alternative Style-Sheet, genau, für den Title.

01:38:37.660 --> 01:38:41.200
 Ach so, genau, aber wann der Browser das, okay, dann, dann, das sind zwei Sachen.

01:38:41.280 --> 01:38:48.620
 Deswegen hab ich das wahrscheinlich auch vermischt, also das mit dem, ähm, ähm, mit dem REL Alternative Style-Sheet, das gehört eigentlich noch zum Link.

01:38:48.620 --> 01:38:57.740
 Also ich kann, ähm, nicht nur, ähm, REL, ähm, gleich Style-Sheet angeben, sondern ich kann Alternative als Keyword noch Leerzeichen getrennt davor setzen.

01:38:57.740 --> 01:39:03.200
 Und dann kann ich auch das Titel-Attribut oder Title-Attribut benutzen, um dem einen Namen zu geben.

01:39:04.100 --> 01:39:32.040
 Und bei Chrome macht das eigentlich nix, aber der Firefox unterstützt das, wenn ich im Firefox, da ist eine Demo verlinkt dann in den, in den Shownotes, ähm, da kann ich unter Ansicht, Webseiten-Stil, kann ich da Alternative Style-Sheets auswählen und könnte quasi dem User überlassen, ob er, ähm, zum Beispiel ein besonders buntes oder ein besonders kontrastreiches, was man inzwischen jetzt auch anders lösen kann, ähm, ähm, Style-Sheet halt irgendwie, äh, wählen möchte.

01:39:33.180 --> 01:39:35.500
 Oder ein besonders abgespecktes oder wie auch immer.

01:39:35.500 --> 01:39:44.220
 Ähm, das hab ich auch irgendwann mal spaßeshalber, glaub ich, irgendwo benutzt vor bestimmt 20 Jahren, ähm, als Firefox auch noch mein, mein Hauptbrowser war.

01:39:44.220 --> 01:39:46.340
 Ähm, genau.

01:39:46.340 --> 01:39:53.740
 Also das ist auch nix, was man heute jetzt noch unbedingt bräuchte, aber, äh, ja, gut zu wissen. Oder auch nicht.

01:39:53.740 --> 01:39:56.120
 Ja, doch, auf jeden Fall.

01:39:56.120 --> 01:40:02.160
 Okay, ja, das war's auch schon zu den Styles. Ich mein, da drin ist dann halt ganz normal.

01:40:02.260 --> 01:40:03.060
 Mein, mein, mein CSS.

01:40:03.060 --> 01:40:13.020
 Was aber nicht dargestellt wird, wie wir gelernt haben, äh, weil es einfach standardmäßig versteckt ist, aber wenn ich dem Display Block gebe, dann ist es, dann kann ich das sichtbar machen.

01:40:14.040 --> 01:40:28.620
 Und das ist zum Beispiel, wenn ich jetzt eine Seite hab, wo ich CSS zeigen möchte und ich möchte das CSS auch auf die Seite direkt anwenden sowieso schon, dann kann ich da, gut, jetzt ist wieder die Sache, ne, Style sollte eigentlich nicht im Body liegen, sondern sollte eigentlich im, im Head liegen, kann aber auch im Body liegen.

01:40:28.680 --> 01:40:40.900
 Die meisten Browser, die werden das trotzdem aus, werfen da auch keinen Fehler. Und dann könnte ich theoretisch sagen, ah, okay, wenn du das und das machen willst, dann ist hier der Style-Block. Und dann könnte ich den direkt schon sichtbar machen, ohne dass ich den Style nochmal duplizieren muss.

01:40:42.760 --> 01:40:45.800
 Ja, weil Style-Duplizieren ist eher.

01:40:45.800 --> 01:40:46.760
 Unangenehm.

01:40:46.760 --> 01:40:48.740
 Genau.

01:40:48.740 --> 01:40:51.860
 Ja, also das war's auch schon.

01:40:51.860 --> 01:41:15.620
 Ja, dann kommen wir zu meinem letzten, tatsächlich, weil ich aber angefangen, und zwar Title. Und das ist wieder relativ schnell abgehandelt, fand ich aber trotzdem, das ist, finde ich, eines der wichtigsten HTML-Elemente, weil das den Dokumententitel anzeigt, also das, was oben in der Kopfzeile vom Browser-Tab angezeigt wird,

01:41:15.620 --> 01:41:41.040
 oder auch als erste Zeile in den Suchmaschinen-Ergebnissen. Das ist echt extrem wichtig. Oder auch der Screenreader liest, wenn ich eine Seite lade, das als allererstes vor. Also das ist, das ist essentiell. Und da ist auch, da empfiehlt sich auch eine spezielle Reihenfolge, wenn man das will, dass das sinnvoll ist. Und zwar quasi so, wenn man, wenn man so möchte, umgedrehte Breadcrumbs würde ich das mal nennen.

01:41:45.440 --> 01:41:58.920
 Das ist relativ unkomplex, unsere Podcast-Seite. Wir haben halt quasi den Folgennamen als erstes im Title stehen, oder halt die Nummer, dann den Folgennamen und dann, wo wir sind, ist vorne. Also das ist unsere Seite ist.

01:41:59.000 --> 01:42:14.080
 Also so quasi, du bist hier im Kontext, wo wir sind, ist vorne. Aber du bist jetzt auf folgender Folge gelandet. Also so quasi nur eine Ebene. Du könntest da auch mehrere machen. Da muss man sich überlegen, wie viel da sinnvoll ist. Ich würde, glaube ich, nicht mehr als drei Ebenen im Title anzeigen. Ich glaube, ansonsten wird es ein bisschen wild.

01:42:14.920 --> 01:42:30.640
 Die MDN sagt, soll nicht zu kurz sein. Und ich glaube, das sagen auch die SEO, die dunklen SEO-Hohepriester, sagen auch, sollte nicht zu kurz sein. Ihr könnt auch mal überlegen, ob ihr ein Zwei-Wort-Ergebnis von Google anklicken würdet oder eher, wenn es ein ganzer Satz ist.

01:42:30.640 --> 01:42:48.440
 Ich glaube auch, da würde ich eher zu etwas ein bisschen Gesprächigerem tendieren, so rein vom Gefühl her. Genau. So, und was noch wichtig ist zu wissen, ist, dass das ist Text-Only. Das heißt, da könnt ihr irgendwie anderen HTML-Kram zwar reinschreiben, aber wird komplett ignoriert.

01:42:49.240 --> 01:42:58.840
 Und damit war es das eigentlich auch schon. Das Title-Attribut ist, äh, Title-Attribut, nicht Attribut, sondern Tag, in dem Fall, nicht, dass ich es falsch sage, ist sehr, sehr wichtig.

01:42:58.840 --> 01:43:07.580
 Wählt Weise, was da drin steht, weil das ist das Erste, womit man üblicherweise, wenn man auf eine Seite geht, mit zu tun hat.

01:43:07.580 --> 01:43:12.560
 Oder auch entscheidet, wenn ich jetzt irgendwie bei einer Suchmaschine suche Google oder so, gehe ich da überhaupt hin.

01:43:14.740 --> 01:43:32.560
 Okay, dann kommen wir jetzt schon tatsächlich zum Letzten. Und das ist, äh, quasi auch gleichzeitig der Anfang eines nächsten großen Abschnitts. Ähm, beziehungsweise ist hier in dem eigenen Abschnitt gelistet, aber es beginnt jetzt das eigentliche Dokument. Und zwar natürlich das Body-Tag.

01:43:32.560 --> 01:43:37.760
 Ja, bislang haben wir eigentlich nur über total uninteressante Sachen geredet, weil die sieht man alle nicht.

01:43:37.760 --> 01:43:38.520
 Genau.

01:43:38.520 --> 01:43:40.160
 Könnte man so sagen.

01:43:40.160 --> 01:43:50.100
 Da, jetzt, jetzt geht erst die eigentliche Seite für den, für den Menschen los, ne? Vorher war alles nur so Meta-Zeug eben für den, für, für, für Computer und für den Browser, dass er weiß, was er machen soll.

01:43:50.100 --> 01:43:57.160
 Genau, da ist auch wieder, da hab ich mich natürlich, äh, das ist tatsächlich optional theoretisch und wird dann impliziert, aber warum nicht?

01:43:57.160 --> 01:43:58.260
 Gott, das darfst du keinem sagen.

01:43:58.260 --> 01:44:01.240
 Nein, das habt ihr wieder vergessen, das hat Konstantin niemals gesagt.

01:44:01.240 --> 01:44:09.260
 Ja, da war ich auch überrascht, da gibt's gar nicht jetzt so viel eigentlich, äh, dazu zu dem Body-Element. Früher gab's aber immer viel. Früher war das noch viel wichtiger, als das jetzt heute ist.

01:44:09.260 --> 01:44:10.460
 Um Gottes Willen, erzähl nicht so viel.

01:44:10.460 --> 01:44:27.000
 Und zwar, ne, nur ganz schnell, es gab früher, äh, BG-Color für die Hintergrundfarbe, Text für die Textfarbe, dann A-Link für, für normale Links, V-Link, äh, für Visited Links, da konnte ich einfach dann, äh, RGB-Farben, RGB, RGB-Farbwerte angeben.

01:44:27.000 --> 01:44:36.240
 Und das, was wir heute mit CSS gemacht haben, das hat man früher dann damit gemacht, genauso auch Margin, da gab's dann Bottom-Margin, Left-Margin, Right-Margin, Top-Margin, und damit hat man das gemacht.

01:44:36.240 --> 01:44:39.160
 Braucht man heute echt eigentlich nur für HTML-Elements maximal.

01:44:39.160 --> 01:44:50.620
 Ja, äh, sorry, aber beim, beim, beim Body-Element gab's ansonsten so wenig, deswegen, äh, ja, hab ich so ein bisschen, wenigstens über die Historie noch ein bisschen was erzählt.

01:44:50.620 --> 01:44:59.180
 Ja, und nochmal unnützes Wissen, das zugrunde liegende Interface für das Body-HTML-Element ist das, ähm, HTML-Body-Element-Interface.

01:44:59.180 --> 01:45:07.420
 Und da kann ich einige On-Event-Händler draufsetzen, also hat On-Event, also On-Load und On-Was-I-Was-Properties.

01:45:07.420 --> 01:45:08.580
 Setz doch denen nicht so Quatsch ins Ohr.

01:45:08.580 --> 01:45:12.260
 Und das ist aber, ja, ist einfach nur unnützes Wissen, aber man hat's dann mal gehört.

01:45:12.260 --> 01:45:15.840
 Und das sind, und das ist aber, da weiß ich zum Beispiel auch nicht, warum macht man sowas?

01:45:15.840 --> 01:45:23.140
 Das sind eigentlich nur Aliase auf die gleichen, äh, On-Irgendwas-Händler auf dem Window-Objekt, auf der Window-Globalen.

01:45:23.140 --> 01:45:30.620
 Und da man Add-Event-Listener zum Beispiel auf diesem HTML-Body-Event auch gar nicht benutzen kann, sollte man das einfach gar nicht machen.

01:45:30.620 --> 01:45:34.940
 Und das einfach sofort wieder vergessen und einfach besser direkt das Window-Objekt verwenden.

01:45:34.940 --> 01:45:39.620
 Weil ich's gelesen hab in dem Artikel und dachte, krass, wieder was gelernt über das Body-Element, was ich sofort vergessen kann.

01:45:39.620 --> 01:45:41.580
 Und das wollte ich unbedingt mit euch teilen.

01:45:41.580 --> 01:45:44.240
 Okay, na gut.

01:45:44.240 --> 01:45:49.420
 Haben wir jetzt überhaupt gesagt, dass das Body-Element das ist, das um die eigentlichen Inhalte drumherum liegt?

01:45:49.420 --> 01:45:51.620
 Genau, das öffnet den Content, ja.

01:45:51.620 --> 01:45:56.480
 Da kommt der eigentliche Inhalt rein, der dann später auf der Seite sichtbar ist.

01:45:56.480 --> 01:46:04.120
 So, aber das ist unser Cliffhanger, das ist unser Cliffhanger und das andere erfahrt ihr später in einer anderen Folge.

01:46:05.540 --> 01:46:10.240
 Genau, und zu den restlichen Sachen, die Konstantin gesagt hat, möchte ich noch kommentieren.

01:46:10.240 --> 01:46:11.420
 BTF, Digger!

01:46:11.420 --> 01:46:16.580
 So, gut, dann sind wir am Ende.

01:46:16.580 --> 01:46:18.520
 Die Menschen haben doch fast zwei Stunden damit gefüllt.

01:46:18.520 --> 01:46:20.000
 Und wir sind noch nicht ganz am Ende, ne?

01:46:20.000 --> 01:46:20.800
 Es kommt noch was.

01:46:21.300 --> 01:46:23.920
 Und das waren jetzt nur acht Tags.

01:46:23.920 --> 01:46:29.640
 Ich glaube schon, dass wir bei einigen, also bei gerade so Textauszeichnungen, da kommen wir schnell durch.

01:46:29.640 --> 01:46:33.520
 Aber, und das ist auch der Grund, warum wir heute nicht weitergegangen sind als das.

01:46:34.400 --> 01:46:38.740
 Ich habe weitergelesen, ich kann jetzt schon mal einen Ausblick geben, was demnächst dann kommt.

01:46:38.740 --> 01:46:42.840
 Das nächste wäre Content-Sectioning, der Bereich bei der MDN.

01:46:43.920 --> 01:46:54.880
 Und da steckt in den einzelnen Elementen, wie zum Beispiel Article-Aside, Footer-Header, relativ viel drin, auch wenn die so unscheinbar klingen.

01:46:54.880 --> 01:46:58.400
 Ich glaube fast, dass wir diesen Block auch noch mal teilen müssen. Ich glaube, dass wir da vielleicht nicht mal alles schaffen.

01:46:58.400 --> 01:46:59.860
 Müssen wir mal gucken.

01:46:59.860 --> 01:47:02.900
 Das ist, ähm, die kommen so unscheinbar daher.

01:47:03.080 --> 01:47:05.440
 Aber da steckt eine Menge Semantik drin in den Gang.

01:47:05.440 --> 01:47:06.900
 Genau, das ist viel Semantik.

01:47:06.900 --> 01:47:09.820
 Aber deswegen ist es gut, vielleicht die mal richtig zu verstehen.

01:47:09.820 --> 01:47:18.020
 Weil, ganz ehrlich, ich bin mir auch, das ist auch manchmal eher so, ja, ich nehme mal das, ja, dann ist das jetzt mal eine Section.

01:47:18.020 --> 01:47:19.940
 Und das ist jetzt vielleicht ein Artikel.

01:47:19.940 --> 01:47:26.200
 Aber so richtig möchte ich das gerne mal verstehen, was eigentlich, wann wirklich der beste Einsatzzweck ist.

01:47:26.200 --> 01:47:28.560
 Deswegen freue ich mich da eigentlich schon drauf.

01:47:28.560 --> 01:47:32.040
 Okay, gut, ich freue mich so halb.

01:47:33.080 --> 01:47:34.860
 Auf die Vorbereitung freue ich mich nicht.

01:47:34.860 --> 01:47:43.460
 Okay, gut, dann schließen wir jetzt den, äh, äh, Content-Thema-Teil ab.

01:47:43.460 --> 01:47:49.640
 Den Themenbereich und, äh, gehen dann zu ...

01:47:49.640 --> 01:47:57.300
 Das ist schon okay.

01:47:57.300 --> 01:47:58.460
 Zu das Geil-Teil.

01:47:58.460 --> 01:48:01.080
 Zu Beginn zu das Geil-Teil.

01:48:01.480 --> 01:48:07.280
 Ja, fast alles, das kann man, ich finde, das kann man, das kann man schon, das ist die Sprache von der Straße, das kann man schon so sagen, finde ich.

01:48:07.280 --> 01:48:17.860
 Ja, und, äh, da waren, die, die Folge ist ja jetzt schon relativ, die letzte Folge ist relativ lang her und da standen schon fünf und andere Sachen drin.

01:48:17.980 --> 01:48:22.800
 Ich hab mich schon gewundert, weil da waren vorher mehr Sachen drin und dann plötzlich war nur noch ein Link drin.

01:48:22.980 --> 01:48:28.080
 Es ist, äh, es hat sich immer wieder gewechselt, weil ich gedacht hab, nee, ah, das, ja, nee, jetzt kommt wieder auf die Seite.

01:48:28.080 --> 01:48:29.560
 Alles zu geil, eins geiler als das andere.

01:48:29.560 --> 01:48:37.800
 Eins geiler als das andere und ich hab, am Ende gewinnt bei mir immer das, was ich am letzten, als letztes am geilsten fand, also, so.

01:48:38.220 --> 01:48:44.460
 Das ist jetzt das, was mir, das frischste, ihr kriegt hier nur das frische Zeug und nicht irgendeinen alten Kram aus dem alten Jahr, ne?

01:48:44.800 --> 01:48:47.760
 Weil da im alten Jahr hab ich nämlich schon angefangen, da was reinzuschreiben.

01:48:47.760 --> 01:48:55.400
 Und zwar, das ist jetzt heute, ähm, was für Musiker oder solche, die es werden wollen, doofer Spruch.

01:48:55.400 --> 01:48:57.960
 Äh, aber, äh, ist, ist ganz ernst so gemeint.

01:48:57.960 --> 01:49:12.700
 Und zwar, die Seite heißt muted.io, ähm, und die bietet ganz viele kleine Tools, die extrem mächtig sind, äh, die, die im Browser funktionieren, zum Musik machen oder Musik verstehen.

01:49:13.840 --> 01:49:18.420
 So, ich, ich lese jetzt einfach mal nur ein paar Tools vor davon.

01:49:18.420 --> 01:49:22.080
 Und die sind alle, also, ich muss dazu sagen, die sind, das ist sehr hübsch gemacht, die Seite.

01:49:22.080 --> 01:49:30.220
 Und die sind alle interaktiv und man kann sich bei den meisten auch was anhören, um, um dann zu verstehen oder mal zu hören, was ist denn das eigentlich?

01:49:30.220 --> 01:49:37.100
 Also, ich lese jetzt einfach nur mal ein paar von den Tools vor und dann, ein, zwei rufe ich vielleicht auf und dann gehe da mal ein bisschen ins Detail, was es ist.

01:49:37.200 --> 01:49:49.540
 Also zum Beispiel, ähm, ein Music Theory Cheat Sheet, ähm, wo man dann, äh, beliebige Akkorde, die es gibt, sich so, äh, einmal vorspielen lassen kann.

01:49:49.540 --> 01:49:51.920
 Welche Töne sind denn da drin und wie funktioniert es denn?

01:49:51.920 --> 01:49:56.000
 Und dann habe ich auch noch Noten, aber ich habe auch noch ein Klavier und ich kann es mir dann auch einmal anhören.

01:49:56.080 --> 01:50:13.700
 Ähm, dann zum Beispiel den Quintenzirkel, Circle of Fifths, ähm, mit, ich kann, ich kann da einmal rund drehen, ich kann da, ich kann da verschiedene Dinge, ähm, mit ausprobieren, draufklicken, mir anhören, wie verhalten sich die einzelnen, äh, die einzelnen Tonarten zueinander.

01:50:13.700 --> 01:50:18.020
 Das ist natürlich jetzt schon so eher, das verstehe ich auch nur so zur Hälfte, das kann ich jetzt direkt schon sagen.

01:50:19.080 --> 01:50:26.480
 Ähm, dann, äh, ein kleiner Sequencer, mit dem man Musik basteln kann, indem man einfach Kästchen anklickt und dann verschiedene Instrumente hat.

01:50:26.480 --> 01:50:29.480
 Und dann kann ich, dann kann ich auch nur sagen, was für ein Synth sollte es sein.

01:50:29.480 --> 01:50:36.380
 Ich würde, ich habe es nicht mehr im Detail von der Technik her angeschaut, aber ich würde behaupten, dass da viel Web-Audio-Up hier am Start ist.

01:50:36.380 --> 01:50:42.360
 Ähm, das behaupte ich jetzt einfach, weil anders, anders kann man, also da sind auch wirklich Synthesizers da irgendwie mit drin.

01:50:42.700 --> 01:50:55.740
 Dann gibt es auch einen kleinen Beat-Maker, wo ich, ähm, mir dann in verschiedensten, total interessanten Ansichten, also nicht nur diese Raster-Ansicht, sondern auch so ein Ding, was sich im Kreis dreht, kann ich Beats bauen mit verschiedenen Instrumenten.

01:50:55.740 --> 01:51:04.020
 Also hab dann irgendwie eine Bass-Drum, eine Hi-Hat, äh, und irgendwie noch eine Snare-Drum und einen Clap und dann kann ich mir irgendwie, äh, kann ich mir ein Beat zusammenbauen.

01:51:04.020 --> 01:51:06.980
 Oder kann auch sagen Random und dann kommt irgendein komischer Beat raus.

01:51:07.780 --> 01:51:18.400
 Komisch ist, glaub ich, wirklich das Wort. Ähm, und so weiter und so weiter. Es geht noch weiter. Äh, Diatonic Chord Player, Music Intervalls, also wo man auch Intervall hören testen kann.

01:51:18.400 --> 01:51:29.360
 Da gibt's auch so ein kleines Game, was man da spielen kann. Äh, Intervall Charts, Modes, Modi in Musik, das ist auch so ein Ding, so richtig tief in der Musiktheorie bin ich auch noch nicht eingestiegen.

01:51:29.840 --> 01:51:39.180
 Ähm, aber es gibt ja irgendwie noch so Tonarten, die nicht wirklich eigene Tonarten sind, sondern diese Modi von Tonarten, wo im Prinzip andere Intervallabstände drin, ähm, stattfinden.

01:51:39.180 --> 01:51:52.080
 Scales, äh, Key Signatures, Note Identification, ähm, alles mögliche, lauter, lauter verrücktes Zeug. Ähm, Circle of Thirds hab ich noch nie gehört, aber offenbar gibt's das auch.

01:51:52.080 --> 01:52:05.360
 Äh, äh, auf jeden Fall irgendwie mal auch, selbst wenn ihr kein, kein Musiker in seid und davon keine Ahnung habt, einfach mal reinklicken und mal ein bisschen anhören und so ein bisschen anfühlen, weil an sich das Tool ist, ist super cool gemacht.

01:52:05.360 --> 01:52:14.120
 Das sieht super aus, ähm, und es macht Spaß damit, einfach nur mal rumzuklicken, selbst wenn man jetzt in der Musiktheorie nicht drin ist. Und ich glaube, für Musiker ist es, äh, genial.

01:52:15.240 --> 01:52:35.040
 Ja, das ist, äh, sehr cool. Ich hab, äh, ich hab ja Musikabitur gemacht und ich hatte da für unsere Klasse, da gab's halt so ganz viele, ähm, ähm, Sachen, die wir machen mussten, also, ne, du kriegst irgendwie vorgegebene Takte und musst das dann zu Ende komponieren, aber halt im Kopf, ne, also du musst erst mal die Noten lesen und im Kopf die Melodie und dann musst du das zu Ende komponieren, dass es halbwegs schön klingt.

01:52:35.700 --> 01:52:42.260
 Oder Intervalle einfach erkennen, ne, also irgendwie, du kriegst zwei Noten vorgespielt auf dem Klavier und musst dann sagen, ah, das war jetzt ein kleines Herz und so.

01:52:42.260 --> 01:53:05.360
 Und da hab ich uns dann Trainingstools dazu auch gebaut, ne, ich hab damals ja schon programmiert so und, und halt so HTML, JavaScript-Tools gebaut und da hab ich eben genau sowas und das wäre auch ein Tool für die Seite, vielleicht kann man das mal vorschlagen oder vielleicht hab ich's auch übersehen, ähm, so ein, ein Intervall-Rate-Spiel, ne, also ich hab dann einfach einmal Noten aufgenommen, damals gab's noch keine Web-Audio-AP, ist schon eine Weile her, ähm, und hab dann halt,

01:53:05.360 --> 01:53:14.080
 äh, zufällig zwei Noten genommen und hab die dann abspielen lassen, ne, dann war halt irgendwie, da, da, und dann, ah, das ist eine Quinte, ich weiß es schon nicht mehr, vielleicht war's auch eine Quarte, aber, ne,

01:53:14.080 --> 01:53:16.000
 Also ein Intervall-Trainer ist da mit drin.

01:53:16.000 --> 01:53:30.620
 Intervall-Trainer ist auch mit drin, echt hab ich noch nicht, ja, ist mit drin, du musst auf Intervalls gehen, genau, und dann gehst du runter und dann sagst du Start Intervall-Identification-Game und dann Start-Game und dann hast du genau das, dann kriegst du einzelne Töne vorgespielt und dann kannst du sagen, was es ist.

01:53:30.620 --> 01:53:31.080
 Ah ja, perfekt, ja.

01:53:32.480 --> 01:53:41.900
 Also das ist, äh, mit sowas habe ich auch, äh, ich hab, ich hab ja auch mal was mit Musik, äh, einer Hochschule versucht, ich sag's mal so, ähm,

01:53:41.900 --> 01:53:56.320
 und da musste ich, äh, auch eine Aufnahmeprüfung, äh, machen und ich hab die tatsächlich auch bestanden damals und musste da auch Intervalle hören, aber nicht nur das, das ging ja auch noch, das ging ja noch ein bisschen weiter, ich glaub, man muss da noch irgendwelche, äh, simpelen Akkorde hören und, äh, egal, führt jetzt zu weit, also, äh, muss ich einiges machen.

01:53:56.320 --> 01:54:03.660
 Ja, da haben wir es schon gehabt, ja, wir können jetzt gar nicht selber schreiben brauchen, aber das ist so, da hat wahrscheinlich jemand ähnliche Situationen gehabt und hat gedacht, ah, cool, dann mach ich doch eine kleine Sammlung dazu.

01:54:03.660 --> 01:54:05.300
 Und sowas, ah, sowas find ich cool.

01:54:06.160 --> 01:54:09.640
 Und das ist einfach mit Herzblut und schön gemacht und, wow.

01:54:09.640 --> 01:54:27.240
 Ich hab das noch gar nicht, das ist, ich hab noch gar nicht alles angeklickt, es sind so unfassbar viele hier, Guitar-Fretboard, Bass-Fretboard, äh, wo du halt tatsächlich quasi eine Gitarre, den Gitarrenhals oder einen Basshals hast, wo du die einzelnen Noten spielen, äh, das ist, äh.

01:54:27.240 --> 01:54:35.660
 Vielleicht kann ich damit mal doch noch richtig Bassschlüssel lesen, das ist nach, nach 30 Jahren oder was Klavierspielen, das hab ich immer noch, kann ich immer noch keinen Bassschlüssel.

01:54:35.660 --> 01:54:57.180
 Ich hab dabei, äh, gelernt über mich selbst, weil ich, nur durch, nur durch blindes Rumklicken in diesen Tools, ähm, dass man, äh, mit, äh, den Major-Diatonic-Seventh-Chords von einer Tonart, in dem Fall, das Standard, der hier eingestellt ist, ist C, aber du kannst natürlich die Tonart da auch ändern in jede beliebige.

01:54:57.240 --> 01:55:26.560
 Dass die total gut, ähm, dass die total interessante Musik, äh, erzeugen, wenn man die einfach nur hintereinander reiht, in bestimmten Reihenfolgen, also, äh, ich bin hier auf diesem, äh, das ist das erste hier, dieses Music-Theory-Cheat-Sheet, und wenn du da runter scrollst, auf, in der rechten Spalte, ähm, da hast du C-Major-Diatonic-Chords, das sind, das sind ja die normalen, und dann hast du unten drunter C-Major-Diatonic-Seventh-Chords, und wenn du die in der beliebigen Reihenfolge nacheinander spielst, da kriegst du irgendwie so heutige Popmusik raus, war so mein Gefühl.

01:55:27.240 --> 01:55:39.840
 Das ist irgendwie so, ja, so, so mit einem, mit einem Siebener noch dabei, glaub ich, ist das jetzt so für die, für die Musik-Nerds. Ähm, ja, total cooles Tool, äh, kann ich jedem nur empfehlen, und es ist auch super hübsch gemacht, ich glaub, da kann man

01:55:39.840 --> 01:55:54.900
 auf ganz vielen Ebenen was lernen, also selbst wenn ihr euch die Musik gar nicht interessiert, dann schaut euch mal an, wie es technisch gemacht ist, ähm, und, ja, das Design ist auch hübsch gemacht, und so ein bisschen mit, mit so, mit so schönen, kleinen Animationen, ist einfach eine coole Seite.

01:55:55.300 --> 01:55:56.260
 Sehr, sehr, sehr cool.

01:55:56.260 --> 01:56:16.540
 Geil und heil und, ich hab mir gedacht, das ist, das, das ist was für uns beide auf jeden Fall, äh, weil wir ja beide irgendwie, äh, mit Musik stark verwandelt sind, und vielleicht auch für euch, äh, ich bin da zufällig drauf gestoßen, irgendwie, äh, irgendjemand bei Mastodon, äh, hat das geschrieben, ich dachte, äh, geil, äh, muss unbedingt hier in, äh, in den Podcast rein.

01:56:17.300 --> 01:56:20.120
 Juh, oh, wir haben was vergessen.

01:56:20.120 --> 01:56:21.100
 Wir haben was vergessen.

01:56:21.100 --> 01:56:21.800
 Wir haben was vergessen.

01:56:21.800 --> 01:56:34.340
 Ja, wir haben was, wir haben was total vergessen, weil, ähm, Mensch, äh, wie ist denn das, oder, oder hast du, hast du das, hast du das mit, ah, vielleicht hast du das auch noch, ich weiß nicht, ob ich dir jetzt was vorwegnehme.

01:56:34.340 --> 01:56:36.460
 Wir haben den Werbeblock total vergessen.

01:56:36.460 --> 01:56:39.140
 Ja, den dachte ich, äh, machen wir jetzt, äh, am Ende.

01:56:39.140 --> 01:56:42.460
 Also jetzt erst mal, also, dass wir jetzt das Ende machen.

01:56:42.460 --> 01:56:47.280
 Das ist natürlich taktisch unklug, das ist taktisch unklug, ne, den, den, den Werbeblock am Ende zu machen.

01:56:47.300 --> 01:56:50.400
 Eigentlich muss man den irgendwo reinmachen, wo die Leute, wo die Leute richtig davon genervt sind.

01:56:50.400 --> 01:56:53.460
 Ich schneid ihn mitten rein, ohne Vorwarnung.

01:56:53.460 --> 01:56:53.920
 Nein.

01:56:53.920 --> 01:56:58.420
 Ich weiß nicht, machen wir dann heute nur das Kurze, das, das Neue, machen wir dann heute nur das, machen wir heute nur das Kurze.

01:56:58.420 --> 01:57:01.100
 Wir können auch deinen nochmal laufen lassen, aber, ähm.

01:57:01.100 --> 01:57:02.320
 Ah, den machen wir dann nächstes Mal.

01:57:02.320 --> 01:57:02.800
 Okay, okay.

01:57:02.800 --> 01:57:03.420
 Den machen wir dann nächstes Mal.

01:57:03.420 --> 01:57:06.680
 Dann, äh, machen wir es jetzt vor dem Ende noch, jetzt noch.

01:57:06.680 --> 01:57:07.780
 Achso, machen wir es, äh, oder?

01:57:07.780 --> 01:57:09.860
 Achso, ja, dann, ja, dann, ja, dann jetzt.

01:57:09.860 --> 01:57:16.200
 Okay, dann möchte ich euch, äh, äh, kurz einen, einen wichtigen Aufruf, äh, meiner Tochter vorspielen.

01:57:17.120 --> 01:57:20.840
 Wenn euch der Podcast gefällt, dann findet Ken.

01:57:20.840 --> 01:57:24.900
 Mein Name ist Konstantin Groß und ich unterstütze diesen Aufruf.

01:57:24.900 --> 01:57:34.520
 Wie diese US-Politiker-Werbung immer, so, irgendwann sagt, der ist ganz toll und dann kommt, mein Name ist so und so und ich unterstütze diesen Aufruf.

01:57:35.360 --> 01:57:41.880
 Also, also, also wer jetzt nicht dahin schmilzt und tut, was Konstantins Tochter sagt, dann weiß ich auch nicht mehr.

01:57:41.880 --> 01:57:48.040
 Das ist ja eigentlich, eigentlich, das ist, äh, es ist eigentlich Audiodiabetes, was man hier in die Ohren gespült bekommt.

01:57:48.040 --> 01:57:50.800
 Vielleicht denken die Leute aber auch eher so, unangenehm.

01:57:50.860 --> 01:57:54.640
 Da werden Kinder, äh, für, für solche Zwecke missbraucht.

01:57:54.640 --> 01:58:01.660
 Es ist dein Kind, das dafür missbraucht wird, dass es das Licht, äh, die Verantwortung, ja, die Verantwortung.

01:58:01.780 --> 01:58:04.600
 Es war ja sogar irre Idee, wenn ich das richtig verstanden habe.

01:58:04.600 --> 01:58:06.500
 Genau, genau.

01:58:06.500 --> 01:58:09.780
 Gut, aber, dann kommt es jetzt.

01:58:09.780 --> 01:58:11.420
 Ja.

01:58:11.420 --> 01:58:14.520
 Das Ende.

01:58:14.520 --> 01:58:18.000
 Hm.

01:58:18.000 --> 01:58:20.520
 Heute hat's mich gar nicht so sehr gestört.

01:58:20.520 --> 01:58:22.440
 Man ist so ein Acquired Taste.

01:58:22.440 --> 01:58:23.360
 Der End-Jingle.

01:58:23.360 --> 01:58:27.100
 Acquired Taste, man fühlt sich dran.

01:58:27.100 --> 01:58:28.680
 Ja, genau.

01:58:28.680 --> 01:58:31.620
 Ja, Mensch, dann ist, glaube ich, alles gesagt, oder?

01:58:31.620 --> 01:58:33.900
 Wir haben es geschafft.

01:58:33.900 --> 01:58:35.600
 Ah, apropos alles gesagt.

01:58:35.600 --> 01:58:38.180
 Der Alles-Gesagt-Podcast

01:58:38.180 --> 01:58:44.740
 hat seine eigene Folgenlänge-Rekord neu aufgestellt.

01:58:44.740 --> 01:58:46.360
 War der Rekord mit Rezo, oder?

01:58:46.360 --> 01:58:49.020
 Der Rekord war mit Rezo.

01:58:50.520 --> 01:58:52.240
 Ja, Mist, ich sehe es jetzt gerade gar nicht,

01:58:52.240 --> 01:58:54.220
 weil ich die Folge, weil ich schon angefangen habe anzuhören.

01:58:54.220 --> 01:58:56.860
 Auf jeden Fall, der neue Folge, also daran müsste,

01:58:56.860 --> 01:58:57.780
 warum sage ich das?

01:58:57.780 --> 01:59:00.540
 Weil wir ja schon gehört haben,

01:59:00.540 --> 01:59:01.800
 unser Podcast wäre zu lange.

01:59:01.800 --> 01:59:03.940
 Da müsst ihr mal alles gesagt hören.

01:59:03.940 --> 01:59:06.160
 Der neue Folgen-Rekord liegt bei über neun Stunden.

01:59:06.160 --> 01:59:11.080
 Neun, neun, neun Komma, weiß ich nicht genau.

01:59:11.080 --> 01:59:12.160
 Warte mal, ich habe den doch auch.

01:59:12.160 --> 01:59:12.820
 Ich werde es mir angreifen.

01:59:12.820 --> 01:59:14.520
 Vielleicht noch mal gucken, wie lange genau.

01:59:14.520 --> 01:59:16.220
 Ja, guck mal, wenn du noch nicht angefangen hast,

01:59:16.220 --> 01:59:17.880
 weil bei mir, ich sehe da jetzt gerade nicht mehr

01:59:17.880 --> 01:59:19.900
 die Gesamtdauer der Folge.

01:59:20.020 --> 01:59:22.300
 Da steht nämlich, also, ich bin bei acht,

01:59:22.300 --> 01:59:23.920
 ich kann es mal so sagen, ich bin bei acht, drei und,

01:59:23.920 --> 01:59:25.760
 nee, ich bin bei 53 Minuten

01:59:25.760 --> 01:59:28.440
 und es verbleiben noch acht Stunden 23.

01:59:28.440 --> 01:59:29.360
 Also neun Stunden 16.

01:59:29.360 --> 01:59:31.540
 Neun Stunden 16.

01:59:31.540 --> 01:59:33.080
 Krass.

01:59:33.080 --> 01:59:34.760
 Ja, das ist was.

01:59:34.760 --> 01:59:38.960
 Ja, haben wir noch,

01:59:38.960 --> 01:59:41.180
 hatten wir noch ein bisschen was anzuhören.

01:59:41.180 --> 01:59:42.140
 Das machen wir auch mal.

01:59:42.140 --> 01:59:46.320
 Dagegen sind wir relativ kurz.

01:59:46.460 --> 01:59:47.200
 Ja, tatsächlich.

01:59:47.200 --> 01:59:47.220
 Ja, tatsächlich.

01:59:47.220 --> 01:59:50.160
 Unsere längste Folge geht so ungefähr die Hälfte davon.

01:59:50.160 --> 01:59:54.620
 Können wir uns mal ein Beispiel nehmen

01:59:54.620 --> 01:59:57.540
 und vielleicht mal einen Gast oder eine Gästin einladen?

01:59:57.540 --> 02:00:01.240
 In der nächsten Folge machen wir einfach alle HTML-Administe fertig.

02:00:01.240 --> 02:00:03.080
 Dann kriegen wir die auch hin.

02:00:04.020 --> 02:00:05.360
 Oh Gott, oh Gott.

02:00:05.360 --> 02:00:06.160
 Nein, das würde ich selber.

02:00:06.160 --> 02:00:08.680
 Oh Gott, da müsste ich jetzt schon anfangen vorzubereiten.

02:00:08.680 --> 02:00:11.860
 Ne, wir lesen einfach nur die MNN vor.

02:00:11.860 --> 02:00:13.440
 Oder Self-HTML, das ist auf Deutsch.

02:00:13.440 --> 02:00:14.920
 Wir lassen, was machen wir noch nicht selber?

02:00:14.920 --> 02:00:16.620
 Das lassen wir von der AI vorlesen.

02:00:18.220 --> 02:00:19.940
 Okay, können wir auch machen.

02:00:19.940 --> 02:00:22.480
 Und schon haben wir null ZuhörerInnen.

02:00:22.480 --> 02:00:23.720
 Gut.

02:00:23.720 --> 02:00:27.840
 Aber das Schöne ist, beim Podcast sehen wir das nicht,

02:00:27.840 --> 02:00:29.580
 wie viele Leute bis zum Schluss hören.

02:00:29.580 --> 02:00:30.620
 Und das interessiert uns auch gar nicht,

02:00:30.620 --> 02:00:32.080
 weil jetzt wäre der Moment im Stream,

02:00:32.080 --> 02:00:34.040
 wo die Leute dann abschalten und man dann sieht,

02:00:34.040 --> 02:00:36.480
 oh, jetzt sind es noch drei.

02:00:36.480 --> 02:00:38.100
 Genau.

02:00:38.100 --> 02:00:40.620
 Und davon sind zwei wir.

02:00:40.620 --> 02:00:42.300
 Ja.

02:00:42.640 --> 02:00:45.260
 Und dann sagen wir.

02:00:45.260 --> 02:00:47.960
 So, okay, dann bringen wir es jetzt zu Ende.

02:00:47.960 --> 02:00:50.600
 Macht's gut, schön, dass ihr dabei wart.

02:00:50.600 --> 02:00:51.680
 Ja, bis zum nächsten Mal.

02:00:51.680 --> 02:00:52.400
 Bis zum nächsten Mal.

02:00:52.400 --> 02:00:54.040
 Und ja, macht's gut.

02:00:54.040 --> 02:00:55.520
 Ciao.

02:00:59.520 --> 02:01:23.920
 Bis zum nächsten Mal.