Wo wir sind jetzt vorne, Folge 50, from the H to the T to the M to the L, Teil 1.
Herzlich willkommen bei Wo wir sind, ist vorne.
Frontend Fakten Frotzeleien, der Late Night Frontend Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jungleur Konstantin Groß.
Hello in 2023, wir sind zurück.
Hallöchen.
Ja, erster Podcast des Jahres und wir haben schon Ende Januar.
Mensch.
Ja, wir sind halt einfach faule Säcke.
So ist es eben.
Ja, wir haben uns den Schönheitsschlaf gegönnt, von dem ihr hier nichts seht.
Ja, ich meine, hat zwar nichts gebracht, aber wir haben es versucht.
Ja, dafür sind wir jetzt hoffentlich frisch erholt und motiviert, ne?
Ja, total.
Also los geht's.
Los geht's.
Ja, dann machen wir noch Bier, bevor wir die Retro schalten.
Machen wir noch Bier, machen wir noch Bier.
Ich habe heute ein, ich habe vorhin schon mal gelesen auf der Flasche und war ein bisschen überrascht
und habe mich dann gefragt, wieso heißt es so?
Also Zwickel steht groß drauf, aber Aktien, Zwickel, Kellerbier.
Warum Aktien?
Aktien, Zwickel.
Oder wird es vielleicht dann anders ausgesprochen in dem Fall, Aktien oder Aktien?
Oder kann man da Aktien kaufen?
Es ist vielleicht naturbelassenes, hefetrübes, unfiltriertes Bier.
Das ist wieder in so einer schönen Plöbbel-Flasche.
Gut.
Und 5,3 Prozent, so, das ist meins.
Ja, ich habe eins aus Bayern mitgebracht, wo ich über Silvester war, und zwar von der Brauerei
Kamba Handwerk, Imperial IPA.
Ein Imperial India Pale Ale.
Und habe dann gesehen, oh, 8,9 Prozent.
Das ist ein starkes Bier.
Also es könnte, Imperial, genau.
Also es könnte Richtung Ende hin, wenn ich anfange zu lallen oder sehr müde wirke, dann wisst ihr warum.
Also alles wie immer.
Also eigentlich wie immer, nur vielleicht noch stärker.
Noch stärker wie immer, okay, machen wir mal.
Lange Rede, kurzes Bier.
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.
Dass diese Plöbbel-Flaschen manchmal irgendwie sehr unbefriedigend sind und deswegen schüttel ich jetzt so ein bisschen.
Das ist, wenn das Gummi so klebt.
Dann macht das erst mal so.
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.
Ja, okay, das ist der Trick, ein bisschen schütteln, nicht so, dass es komplett überläuft.
Das Mikrofon hat übersteuert, das ist ein gutes Zeichen.
Es war schon, okay, das merke ich mir jetzt, das hat sehr gut funktioniert.
Wollen wir noch kurz durchs Portal anstoßen?
Sehr gut.
Alles klar, so, schauen wir mal.
Konstantin trinkt schon, ich warte noch.
Ja, das schmeckt schon sehr stark.
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.
Mag spannend.
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.
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.
Ja, total witzig.
Warte.
Ja, da kommt dann sowas, ähm, sowas Rauchiges irgendwie raus, das finde ich gut.
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.
Wir haben ja auch gesagt, wer weiß wann, ob wir jemals einen Endschingel haben, und wir haben einen.
Stimmt.
Ich tippe.
So, gut, es ist auf der Liste, ich muss sowas immer sofort machen, sonst vergesse ich's.
Okay.
So.
Ähm.
Dann würde ich sagen, können wir.
Legen wir los.
Machen wir.
BW S.I.V. präsentiert die Retrospektive.
Ein bisschen klingt's nach Monty Python, muss ich jetzt sagen.
Das hab ich jetzt, das merk ich jetzt grad irgendwie zum ersten Mal, oder vielleicht hab ich's da schon mal gesagt.
Ist irgendwie total irgendwie, ich muss das sehr an Monty Python denken bei dieser Musik.
Ist aber auch so nehm alten, äh, diese alten Nachrichten-Reels aus Amerika.
Ja.
Dann stammt das.
Ja, du darfst den Anfang machen.
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.
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.
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.
Also, äh, vor, vor einiger Zeit wurde Pocket Casts aufgekauft von Automatic, das ist die Firma, die ja auch WordPress, äh, vorantreibt, ja, ja.
Also, ich mein, also, ich, mit WordPress wusste ich aber, dass die, äh, Pocket Casts aufgekauft haben, wusste ich nicht. Krass.
Und damals war, glaub ich, tatsächlich auch schon das Ziel, ähm, dass das irgendwann Open-Sourced wird.
Ah, okay. Und, äh.
Trotz der, äh, Pale-Geschichte, ne? Das war, wurde irgendwann eingeführt, so, es gibt jetzt irgendwie Subscriptions und so.
Und trotzdem waren sie es Open-Sourced.
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.
Ähm, keine Ahnung, aber auf jeden Fall wurden die übernommen von, äh, von Automatic.
Krass.
Ä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.
Mhm.
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.
Ich will mein eigenes releasen, aber ich kann zum Beispiel lernen, wie macht man denn was?
Genau, wie macht man sowas, äh, und so, dass es am Schluss nach sauberer, schöner Software aussieht, ja.
Das weiß man ja gar nicht, ob das sauber und schön ist am Ende.
Naja, der Code nicht, aber ich meine, man kennt ja die App.
Genau, also, es sieht halt einfach nach einer, nach einer fertigen, gestandenen App aus, ja.
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.
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.
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.
Ähm, und von daher dachte ich mir, erwähne ich das mal, ähm, ich kann es immer noch uneingeschränkt empfehlen.
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.
Und, äh, die Statistiken dazu sagen mir dann irgendwie, ich hab hier 100 Jahre schon gespart, deswegen.
Genau, das, dachte ich mir, ist, äh, vielleicht erwähnenswert.
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.
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.
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?
Ja, keine Ahnung.
Doch, doch.
Ich frag mich immer, wie machen die eigentlich Geld? Ich mein, die haben auch schon so, so, so Paid-Geschichten, ne, aber schon krass.
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,
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,
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.
Ah, was ist das? War das das Security-Plugin?
Das kann sein, das ist das Security.
Ja.
Genau.
Das dazu.
Interessant.
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.
Ich bin hier innerhalb vom Haus umgezogen, im Stream konnte man's schon, äh, begutachten, hat sich optisch ziemlich verändert.
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
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.
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
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.
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
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,
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.
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.
Nee, nee, nee, du hast das falsch ausgesprochen, das ist ein SIP-Telefon.
Ein SIP-Telefon.
Da, da tropft's immer raus, man weiß nicht so genau was, aber.
Ja, du hast dich gewundert, was das ist, als ich dir ein Screenshot geschickt hab.
Ja.
Was ist das denn mit diesem Kabel da dran?
Diesem Spiralkabel, sowas sieht man, hab ich mal im Museum gesehen.
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.
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.
Ä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.
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.
Egal.
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.
Ich hab natürlich ein Clown gefrühstückt mal wieder, es ist einfach.
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.
Und bei diesen Shelly-Produkten ist das echt ganz cool, weil die wirklich einfach eine HTTP-API haben.
Äh, eine REST-API, da kann ich einfach einen Request hinschicken und zack, kann ich das Ding an- und ausschalten über einen Parameter.
Und das ist ziemlich cool, weil simpler geht's nicht und so mag ich das eigentlich am liebsten.
Und, ähm, jetzt hab ich diese Aktion, oder?
Ja, genau, also Action-URL nennt sich's, also klingt wie ein Webhook bei Git zum Beispiel.
Ja, ja, ja.
Ä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.
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.
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.
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?
Ja.
Äh, dieses, so ein Display, eigentlich nur ein Touch-Display zum, zum Steuern von, von Streams.
In das Telefon reinprogrammieren.
Das könnte ich theoretisch auch mal machen, also ich könnte mir Buttons machen, um die Szenen zu wechseln in OBS-Studio.
Aber ich, ich glaube, das ist ein bisschen übertrieben.
Aber ich finde das schon.
Aber geil, aber geil wär's schon.
Ja, ja, ja, irgendwie reizt mich schon, aber die Zeit, äh, hab ich glaube ich nicht.
Das ist so wie, dass Leute Doom überall versuchen zum Laufen zu kriegen.
Ja, vielleicht krieg ich auch Doom da drauf.
So programmierst du dir halt ein Stream-Deck auf deinem Telefon, ich find's ziemlich cool.
Ja, wäre theoretisch.
Also ich glaube, ich glaube, da würden, da würden sich Leute, äh, finden, die zuschauen im Stream, während du das machst.
Dann, ja, dann lass es uns doch mal in Angriff nehmen.
Also komm schon mal.
Ich hab schon überlegt, eigentlich wäre das sogar was zum Zeigen mal bei einem Vortrag.
Also irgendwie bei einer, bei einer Konferenz irgendwie so hier.
Total, total.
Ich hab hier ein Online-Ehrlich und hier ist mein Telefon und, äh, wie hab ich das gemacht?
Mal gucken, mal gucken.
Absolut, mal gucken.
Also total, also das wär, das wär, das wär, da, damit krieg ich, krieg ich bei der Gulasch-Programmier-Nacht unter.
Kein Problem.
Ja, wenn's bis dahin steht, gucken wir mal.
Auf jeden Fall.
Ähm, ja, apropos, wenn wir gerade schon über Konferenzen reden, ne, im Stream haben wir's schon gesagt, aber hier glaube ich noch nicht.
Äh, wir sind, äh, auf der Beyond Tellerrand anzutreffen.
Genau.
Am 17. und 18. April in Düsseldorf.
Ähm, also kommt da hin, ist eine coole Konferenz, hab ich gehört, du warst schon, ich war noch nicht.
Ähm, ich war schon, schon öfter, als ich Finger, nee, das stimmt nicht, als ich Finger an einer Hand hab.
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.
Genau. Ähm, und, genau, merkt euch das einfach, wenn ihr da Zeit habt und Lust habt.
Das werden wir auf jeden Fall machen und, ähm, das wird wahrscheinlich, warte mal, hast du gesagt, 17. oder 18. ist die Konferenz, ne?
Genau.
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.
Ä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.
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.
Äh, Sonntag ist da, denke ich, ganz praktisch, ne?
Dass man, äh, ja, Düsseldorf ist auch immer ganz schön, ist auf jeden Fall so oder so eine Reise wert.
Ich war jetzt im April noch nie da, glaube ich, ich war sonst immer im Mai, da war das Wetter immer toll.
Äh, schauen wir mal.
Aber ich meine, äh, der Klimawandel hilft uns, wir haben sowieso bald nur noch gutes Wetter.
Von daher ist es ja noch egal.
Genau, also da auf jeden Fall, da kommen, da kommen noch Informationen noch ganz genauer, wenn wir das abgesprochen haben.
Ähm, das könnten wir eigentlich demnächst mal machen.
Ja.
Ich hab da, äh, ja, da kann ich dir später im Nachgang noch was erzählen.
Okay.
Ähm, da, da, ich hab da, ja, vielleicht haben wir es bald, bald geklärt.
Okay, alles klar.
So.
Okay.
Sollen wir zum Nächsten?
Ja.
Ähm, das hatten wir jetzt auch schon zweimal im Stream.
Entschuldigung, dass ich das immer sage, ich weiß, es gibt Leute, die das nervt.
Ä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.
Ä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.
Ähm, und, äh, ich hab mir dann gedacht, ja, ich, ich guck da irgendwie mal rein.
Ä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.
Das war damals noch nicht public, mittlerweile ist es public.
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.
Ähm, und wahrscheinlich ist es für manche jetzt schon irgendwie all der Käse, aber für mich war das neu.
Ähm, da sich nämlich in dem GitHub-Repo, die haben da, ähm, Stackblitz mit angebunden.
Es gibt aber auch viele andere Anbieter für, für sowas.
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,
baut irgendwie das NPM-Gedöns zusammen und zeigt mir dann sofort ein Preview von der App mit Live-Daten.
Und, ähm, das fand ich eine sehr beeindruckende Geschichte.
Also, das kann ich auf jeden Fall nur mal empfehlen, äh.
Also, für mich war es auch kein alter Käse, als du es gezeigt hast und ich fand's auch total genial.
Also, ich, ich hatte es echt begeistert.
Also, so wünscht man sich das eigentlich.
Genau, man muss dafür natürlich, äh, also, das Repo zu sehen muss man, naja, wahrscheinlich, geht wahrscheinlich ohne GitHub-Account.
Also, ich pack auf jeden Fall das Repo mal rein.
Ähm, also, das, das ist schwer zu beschreiben.
Man muss das, man muss das mal gesehen und erlebt haben.
Und deswegen, äh, rufe ich euch auf, probiert es mal aus.
Ihr braucht dafür einen Stackblitz-Account, aber der kostet nichts.
Ä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.
Den drückt ihr und dann passiert die restliche Magie im Browser, sofern ihr bei Stackblitz eingeloggt seid.
Ähm, ähm, und dann habt ihr einfach sofort eine, eine fertige Entwicklungsumgebung mit, mit, äh, Reload, wie heißt das, Hot?
Ja, Hot, oder Hot Module Reloading.
Hot Module Reloading, also, das heißt, ich kann irgendwie ein File ändern und sofort wird, wird, ähm, die Preview geupdatet und so weiter.
Extrem beeindruckend und quasi, ich würde das nennen, Zero, äh, Zero-Time-Onboarding-Workflow oder so.
Es ist wirklich quasi, ich drück mir auf den Knopf und dann kann ich sofort loslegen.
Also, so macht es doch Spaß, womit zu machen bei Open Source Software.
Genau.
Weil du hast irgendwie, du willst eine Kleinigkeit fixen und du musst dich nicht erstmal in das komplette Dev-System einarbeiten,
irgendwelche Inkompatibilitäten bei dir, äh, bekämpfen und so, sondern einfach, zack, du bist im Code,
du kannst direkt die Änderung sehen und kannst, kannst das committen auf einem neuen Branch und, äh, machst, machst einen Merge-Request, also, perfekt.
Also, die, der Schmerz, der damit vermieden wird, du hast es grad schon so teilweise angesprochen, ist,
also, wie oft habe ich schon bei Open Source mir überlegt, ah, mache ich da jetzt mit?
Und das ist dann oft schon daran gescheitert, dass ich mir die Entwicklungsumgebung irgendwie aufsetze.
Weil selbst wenn das irgendwie mit Docker oder so gemacht war, wo es, wo man angeblich nichts mehr machen muss,
ich einfach nur, ja, wir, den Container, irgendwelche Scheißfehler sind dann doch geflogen und dann weiß ich nicht.
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
und dann musst du noch dich dreimal im Kreis drehen.
Wenn es überhaupt in der Beschreibung steht und du nicht einfach feststellst, ah, okay, unter Windows funktioniert das gar nicht,
weil es noch nie jemand unter Windows getestet hat.
Genau, genau.
Und wenn das aber alles im Browser läuft, dann hast du dieses Problem einfach nicht.
Das läuft irgendwie da in dieser vordefinierten Umgebung und die ganzen Leute, die da irgendwie kontributen,
die benutzen das auch jeden Tag.
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.
Das habe ich jetzt noch nicht mitbekommen, dass irgendwas kaputt war, aber der ist dann relativ hoch, weil dann keiner mehr weiterentwickeln kann.
Du kannst sowas natürlich trotzdem bei dir lokal betreiben, wenn du willst.
Klar, ja.
Aber du hast immer die Möglichkeit, das einfach direkt alles im Browser zu machen.
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.
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.
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.
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.
Also dich so langsam rantasten.
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.
Also es ist einfach irre.
Kann ich auf jeden Fall nur empfehlen, mal anschauen.
Ist eine total coole Sache, im Stream habe ich es schon gezeigt, Konstantin hat es schon mal gesehen.
Aber das ist, das ist auf jeden Fall, das ist was.
Und wie gesagt, da gibt es nicht nur Stackblitz, die das anbieten.
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.
Und ich glaube, das ist ein Ding.
Das wird, das wird was.
Das wird, also diese Technologie, man kommt, glaube ich, irgendwann nicht mehr dran vorbei.
Der nächste Schritt, bevor uns die AI dann ablöst.
Genau, das habe ich auch schon gesagt.
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.
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.
Ja, also das auf jeden Fall mal anschauen, weil ich glaube, dass demnächst wird Development, wird andersrum.
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.
Genau, PNPM, ganz wichtig.
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.
Ah ja, okay. Da hatte ich ja auch schon mal hier drüber berichtet.
Gut.
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.
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.
Und dann anders stylen kann, oder was auch immer man damit machen möchte.
Und dann habe ich es in Folge 49 nochmal aufgegriffen in der Retro, weil ich direkt was damit gemacht hatte.
Und irgendwie kam dann die Frage auf, da waren wir uns dann beide nicht sicher, auf welche Felder.
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.
Aber andererseits kann ich ja aber auch Text eingeben, aber halt nur in diesem Overlay.
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.
Wo ich sämtliche Input-Typen, die mir eingefallen sind, und eine Text-Area mal reingebaut habe.
Und dann mit dem Selektor, äh, Pseudo-Selektor, äh, Read-Write, äh, eine Outline von Solid-Red-One-Pixel gesetzt habe.
Sodass man dann sieht, ähm, welche Elemente tatsächlich diese Outline erhalten, und so weiß man dann, was da alles greift.
Und nochmal per JavaScript dann gelockt, ähm, den, äh, Read-Write-Selektor, um zu gucken, welche, welche Elemente da alle auftauchen.
Ja, genau.
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.
Egal, vergiss es.
Äh, äh, es stimmt nämlich, weil, ja, ich, egal, das ist nicht so wichtig.
Können wir mal spüren.
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.
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.
Ja, hätte man noch als Placeholder, äh, oder so.
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.
Ah, okay.
Ist ja, ist ja, das ist ja bei Self-Closing oder, wie, wie haben wir, wie habe ich, wie habe ich vorhin gelernt?
Wobei ich letztens irgendwas gelesen habe, dass das jetzt angeblich geht bei Input-Elementen, aber ich, äh.
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?
Na, gute Frage, bei Input, bevor, und, und, was?
Bei manchen geht's.
Bei Input-Color zum Beispiel geht's.
Er sagt, er zeigt das tatsächlich in dem Button an.
Ach, okay.
Ähm.
Ja, das ist, das ist noch, äh, ein, ein, ein wilder Case.
Okay.
Ja, ob das so, äh, in dem Button so Sinn macht, naja.
Egal.
Ähm, genau, bei, bei, bei, äh, Input-Type-Checkbox und Radio geht's auch.
Genau.
Darüber bin ich mal gestolpert, ja.
Da, das hat mir, das hat mir auch mal jemand zugetragen, so von wegen, hey, da kann man jetzt irgendwie, äh.
Zum Styling.
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.
Ähm, genau, weil das geht jetzt mit Before und After und das ist ziemlich gut.
Weil da, da hast du dann am Ende tatsächlich, ich kann's nur mit CSS, äh, dir das zurecht basteln.
Genau.
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?
Da sieht man's.
Finde ich sehr hübsch.
Ähm, genau.
So, und dann noch, äh, noch mal ein kleiner Punkt, äh, von mir.
Ich hatte, äh, es in der letzten oder vorletzten Folge, hatte ich als Geilteil, äh, Onesies, Slash, äh, Jumpsuits.
Ähm, weil ich, wie gesagt hab, ist einfach so für, für die kalten Wintertage sehr bequem.
Und ich hatte damals ja noch mehrere Bestellungen laufen und hab viele anprobiert und, äh, Stoff gefühlt, äh, und so.
Und hab jetzt tatsächlich, ähm, viel, ich hab extrem viele wieder zurückgeschickt, weil ich da sehr picky war.
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.
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.
Aber ich glaub, die haben da auch welche, weiß ich, weiß ich, kann ich natürlich nicht sagen, ob die dann gut sind.
Das ist auf jeden Fall sehr bequemer Stoff, das ist so ein bisschen mit Stretch.
Gibt's in verschiedenen Farben, gibt's irgendwie in schwarz und, äh, in dunkelblau, grau, hellgrau, dunkel, genau.
Blau, hellgrau, dunkelgrau, äh, dunkelgrau, mein Gott, ich kann nicht mehr sprechen.
Ähm, ja, und das ist echt, äh, ein bequemes Ding, was irgendwie gute Laune macht, wenn's irgendwie kalt ist.
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.
Generell, äh, muss ich sagen, Wornsee, das ist einfach, das ist einfach eine sehr gute Idee, so für den Winter.
Ähm, ja, man ändert so ein bisschen komische Blicke, wenn man damit rausgeht.
Ä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.
Da hast du eh die Kontrolle über dein Leben verloren, ne?
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.
Der hat ein paar, der hat ein paar clevere Sachen gesagt, aber ich würde nicht mit allem übereinstimmen, was er so gesagt hat.
Ä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.
Ä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.
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.
Ä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.
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.
Wie kann das denn sein?
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.
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.
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.
Sehr gut.
Genau, ähm, genau, äh, Link in den Shownotes, wirklich immer reingucken, ähm, wir haben zwei hübsche Motive, ähm, ja, einfach machen. Ja.
Damit bin ich ferschnull-Retro.
Ja, dreht er durch, gute halbe Stunde ist doch. Super.
Aber für so viele Punkte war das schnell.
Dann gehen wir direkt weiter.
Die Property der Woche.
Blip.
Das ist das Beste.
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.
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.
Ähm, also, grob gesagt, man kann damit die, die Browser-History manipulieren und da neue Einträge einfügen oder, äh, den aktuellen überschreiben.
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.
Also, History-Punkt-Scroll-Restoration.
Und, ähm, hab ich noch nie gehört, was, was kann man denn damit machen?
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.
Wenn ich zurückgehe, dann stellt der Browser die Scroll-Position auf der Seite wieder her.
Versucht es zumindest.
Versucht es zumindest, genau.
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.
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.
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.
Ähm, vielleicht habe ich das aber nicht und will das auch gar nicht, weil das irgendwie abhängt von irgendwelchen Dateneingaben, was auch immer.
Ähm, ich mag dieses Verhalten nicht.
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.
Und das finde ich halt das Coole am, am Web von heute, ähm, ich habe die Möglichkeit, es zu beeinflussen.
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.
Ä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.
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.
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.
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.
Und, ähm, das sogar in dem Fall mit CSS, ähm, und das finde ich einfach, ja, cool.
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.
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.
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.
Und da kann man es sich jetzt einfach anschauen.
Ah, das muss ich gleich mal ausprobieren.
So, und jetzt gehen wir weiter.
Ah ja, cool.
It works.
Die simple Demo funktioniert auf jeden Fall, sehr gut.
Ä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.
Also, das Ding hat nicht, das Ding hat nicht tausend Optionen, sondern, da kommen wir gleich noch zu, zu tausend Optionen.
Ja.
Ihr wisst ja noch gar nicht, was das Thema heute ist.
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.
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.
Was, ne, entscheidet, was, ne?
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.
Hier ist WWS IV mit dem Tagesthema.
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.
Ja, ich habe im Soundboard das gesucht, wo das nächste ist, ja.
Ja.
WTF, Digga.
So, das ist mir jetzt aber ...
Unangenehm.
Das kannte ich noch gar nicht.
Ist neu.
Vielleicht müssen wir dazu noch was sagen, kurz.
Jetzt sind kleine Soundbites, die der Konstantin mit seiner Tochter aufgenommen hat.
Genau, jetzt müssen wir wieder den Stream referenzieren, aber da haben wir es halt schon vorgestellt.
Meine Tochter hat von der Weide sich auf meinen Stuhl gesetzt und hat sich meine Kopfhörer aufgezogen,
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.
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 ...
Unangenehm.
Genau.
Aber es ist eigentlich unangenehm, das ist sehr gut. Wir reiten hier voll die Jugendsprache. Das ist natürlich sehr gut.
Ja, vielleicht fallen mir da noch ein paar ein, muss ich mir überlegen. Aber die Auswahl ist schon sehr, sehr gut, muss ich sagen.
Kommen noch ein paar im Laufe der Sendung. Aber wir wollen es ja nicht gleich betreiben.
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.
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.
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.
Und wir haben schon länger mal überlegt, ob wir nicht irgendwie mal eine Reihe machen, so ein bisschen in Richtung Grundlagen.
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.
Und wir versuchen, ich gebe kein Versprechen ab, dass wir es bis zum Ende durchziehen, aber wir versuchen, die mal wirklich alle zu besprechen.
Und zwar nicht nur oberflächlich, ne?
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?
Und dann sind wir wirklich mal so die komplette Liste alphabetisch durchgegangen, ne?
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.
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.
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.
Das ist dort so ein bisschen gruppiert, quasi von Kopf bis Fuß oder bis Inhalt.
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.
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?
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.
Genau.
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.
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.
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 ...
Weiß ich nicht, Digga.
Also wir flechten das hier heute ein. Es ist ja, es ist ja richtig, richtig toll.
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.
Und zwar, ähm, für diejenigen, die gar nicht wissen, wie das, wie HTML genau funktioniert, machen wir jetzt nochmal einmal, einmal Grunddefinition.
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.
Ä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.
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.
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.
Das nur mal so als Baseline, wie hat, wie HTML so an sich, wie die Syntax funktioniert.
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.
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.
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.
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.
Ähm, gut, aber wir müssen jetzt erstmal anfangen, damit, äh, damit ihr auch was zum Feedback, äh, geben habt.
Ä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.
Das haben wir schon gesagt, kommt auch in die Shownotes, der Link.
Und, ähm, wir nehmen uns da jetzt heute zur Brust die ersten drei Bereiche, und zwar Mainroot, Document Metadata, äh, und Sectioning Root.
Das sind die, das sind die drei Bereiche.
Und da kommen wir dann insgesamt tatsächlich auf acht verschiedene Elemente, jeder von uns vier.
Ähm, und ich würde einfach mal beginnen, äh, mit dem Mainroot, mit dem HTML-Element.
Ähm, das ist das HTML-Element, das um alles drumherum liegt, das im Prinzip definiert, hier in mir kommt jetzt HTML.
Ä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.
Das ist eine Regel. Äh, zu Head und Body kommen wir noch.
So, jetzt habe ich hier einen Klammern hinten dran, äh, muss mit Sternchen versehen.
Mhm.
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.
Und, ähm, der Client, oder zumindest modernere Clients, ähm, die quasi implizieren.
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.
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.
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.
Und dass es ein Head und ein Body geben muss, aber muss es nicht.
Äh, wenn das HTML da ist.
Aber egal.
Echt? Äh, hab ich jetzt noch nicht ausprobiert, ja?
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.
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.
Gut, das stimmt, ja.
Genau. Ähm, so. Willst, willst du deinen Root noch hier anbringen?
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,
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.
Mhm, aber das nur am Rande.
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.
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,
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.
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.
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.
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
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.
Und das kann man sich da schön, schön rauslutschen.
Rauslutschen.
Ähm, ja.
Ich war, ich war fertig.
Ach so, das war's, okay.
Das, das war's, das war's zum HTML-Tag, ja.
Gut, dann, äh, das nächste ist schon eine nächste Kategorie, ne?
Das Mainroot hat nur dieses eine Element.
Genau.
Dann kommen wir zu Document Metadata und, äh, da die Sachen hier immer, ich glaube, alphabetisch angeordnet sind, ne?
Ja.
Genau.
Äh, kommt jetzt als nächstes das Base-Element.
Ich meine aber, dass das Base-Element im Head zu verorten ist, oder?
So ist es.
Hab ich jetzt aber, hast du das gesehen, aber ich hab's jetzt nicht explizit irgendwo gelesen, aber ...
Oh, ich bin mir nicht zu 100 Prozent sicher, ob's nicht auch woanders sein darf.
Ich meinte aber, es müsste, müsste da drin sein.
Äh, okay, äh, okay.
A Head that doesn't contain another Base-Element ist die Voraussetzung.
Also ja, das muss im Head sein.
Gut.
Ich kann nochmal nachgelesen.
Okay.
Perfekt.
Also was, was macht das?
Das Base-Element, ähm, da kann ich zwei Attribute draufsetzen.
Äh, und zwar HREF, so wie ich's eben, Moritz hat vorhin schon Link-Tag erwähnt, äh, HREF eben setzen kann, eine Verlinkung.
Ä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,
ä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.
Ä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.
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.
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.
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.
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.
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.
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.
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.
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.
Genau.
Und dann muss ich das gar nicht mehr über Link hinschreiben.
Und nur dann, wenn du es nicht willst, genau.
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.
Interesting. Also wahrscheinlich fehlt mir der Anwendungsfall dafür, aber interessant trotzdem.
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.
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.
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.
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.
Ähm, und so kann ich das abfragen.
Ä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?
Dann das Base-Element raussuchen und so, sondern ich kann bei jedem x-beliebigen Node eben das rauskriegen, was der Href ist.
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.
Hm.
Und so wie bei, ähm, bei Head oder Body oder HTML ist es da auch, es sollte nur ein Base-Element geben.
Ä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.
Alle anderen werden ignoriert.
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.
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.
Aber wenn das erste Base-Element zum Beispiel nur ein Href hat und kein Target, dann greift das Target auch nicht.
Also das ist missverständlich formuliert. Es ist so, nur vom ersten Base-Element die Angaben, also Href oder Target, werden akzeptiert.
Es ist auch schon weg.
Für euch getestet.
Muss ich sagen, äh, oh Mann.
Es ist relativ, also, es wäre nicht so extrem unwahrscheinlich, dass ihr Base niemals braucht.
Das wollte ich noch an der Stelle sagen.
Das kann sehr gut sein, dass man das einfach niemals braucht.
Aber, aber wir gehen jetzt alle durch und wir gucken uns alle, alle Besonderheiten an und alles, was es darüber zu wissen gibt.
Ja, da müsst ihr jetzt durch. Wir übrigens auch.
Ja, noch eins zum Abschluss zu dem Base, dann ist es aber auch schon durch.
Ähm, wichtig zu wissen, das trifft auch auf Anchor-Links zu.
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.
Wenn ich aber ein Base-HRef gesetzt habe, geht er auf die andere Seite entsprechend.
Und dazu hab ich auch, äh, ein kleines Code-Pen gebastelt, um das zu demonstrieren.
Das könnte, ähm, auf die Füße fallen, um die Umständen.
Ja.
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?
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.
Ja.
Dann sind wir mit Base auch durch.
Ja, wieder was gelernt.
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.
Ich find das, äh, da muss, äh, vielleicht hat da noch jemand Beispiele, Anwendungsfälle, wo das wichtig war oder so.
Also, das war ja, glaub ich, extrem wichtig bei Frames, bei Framesets früher.
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.
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ß.
Und deswegen sollte man, deswegen versuch ich, darauf nicht einzugehen.
Man kann ganz viel über alten Kram erzählen, aber.
Ja, und wenn wir, wenn wir Webopas vom, vom alten Kram erzählen, dann denken sich die jungen, hippen Programmierer nur.
BTF, Digga.
Ja.
Du sitzt halt immer noch am Windows und Meckers.
Genau.
So.
Gut, ähm, dann gehen wir zum nächsten, oder?
Oder bist du fertig mit Bass, ne?
Also, dann kommen wir jetzt zu Head.
Ä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.
Ähm, aber Head wäre eigentlich logischerweise vor Bass gekommen, aber egal.
Aber mit Head sind wir relativ schnell durch.
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.
Ähm, da vielleicht noch ein kleiner, kleiner merkwürdiger Hinweis für Leute, die das mal ausprobieren wollen.
Man kann eigentlich jedes Tag in HTML sichtbar machen.
Es gibt nur manche, die standardmäßig, oder ich weiß nicht, sag ich jetzt was Falsches?
Ä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.
Also, Script- und Style-Elemente zum Beispiel kann man auch sichtbar machen.
Script- und Style kann man sichtbar machen.
Man kann dann zum Beispiel gleich Style-Elemente, ne, wenn man sie darstellen will.
Man kann auch Head sichtbar machen und Link sichtbar machen, wenn man das möchte, das, das, das geht alles.
Also, das habe ich vorhin, das habe ich vorhin noch ausprobiert.
Naja, standardmäßig, äh, das ist wie der Käse-Quatsch, den wir hier erzählen.
Also, das stimmt zwar, aber man sollte das einfach nicht tun.
Head, alles was im Head ist und Head selbst ist standardmäßig unsichtbar, da kommen Meta-Informationen rein.
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.
Ä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.
Weil das eingebundene Element eigentlich an sich keinen Title braucht, weil es quasi von der, von der, von der Host-Seite erbt.
Ähm, ja.
Beziehungsweise ja nirgends dargestellt wird, also es wird halt nur das von der, äh.
Genau, wird nirgends dargestellt.
Aber mehr gibt es dazu eigentlich auch erstmal nicht zu sagen.
Das war jetzt so eins, dass das relativ schnell abgehandelt war, da ist auch der MDN, äh, Eintrag sehr kurz.
Das wird sich bei, bei meinem nächsten noch ändern.
Also, weil du, äh, gesagt hast ja eigentlich Käse und so, und brauchen wir nicht wissen, aber ich finde, es ist schon,
es schafft schon ein Verständnis dafür, ne, dass im Endeffekt alles Elemente sind und dass eben nur manche von,
einen, einen Standard-Stil haben, der vom Browser vorgegeben wird.
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,
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.
Und das kann ich eben machen, weil das sind ganz normale Tags, das ist keine Magie.
Genau, es ist nur wirklich der, der Standard-CSS-Style im Browser, der Head und Sachen darin, ähm, versteckt.
Und wenn man das, äh, da CSS drüber schreibt, das sagt, nee, zeig mir das an, dann geht es.
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.
Und das sind, äh, Tags vom, äh, Typ Link.
Und, wofür brauchen wir die also?
Oder was, was, was ist das überhaupt? Was macht so ein Link?
Und was linkt das eigentlich, wenn Link im Namen steckt?
Also, es bildet die Beziehung ab zwischen dem aktuellen Dokument, das offen ist, und beliebigen externen Ressourcen.
Ä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.
Ä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.
Ähm, daher kannte ich das, aber da gibt's noch, noch ganz viel anderes, was ich noch nicht so, äh, bewusst wahrgenommen hatte.
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.
Das war mir nicht bewusst, dass ich in dem Link-Tag tatsächlich ein Media-Query schon, also irgendwie MinWid oder sowas angeben kann.
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.
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.
Und ich hab eine CSS-Datei nur für Breakpoints.
Und dann ist es ja Quatsch, die für alle zu laden, wenn ich sie gar nicht brauch.
Also irgendwie, ich hab eine für Tablet-Breakpoint, eine für, äh, Smartphone-Breakpoint.
Und so kann ich dann eben sicherstellen, die wird auch nur dann geladen, wenn ich in dem Breakpoint bin.
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.
Also das muss man im Hinterkopf behalten, aber vielleicht ist der Fall, äh, auch einfach zu vernachlässigen, dass das jemand macht.
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.
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.
Das heißt, dann wird eine Ressource vorgeladen.
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,
aber vielleicht, ne, will ich die von irgendwie, von meinem eigenen CDN, das aber auf einem anderen, auf einer anderen TLD.
Fonts ist vorne Punkt.
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?
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.
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.
Funky.
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.
Okay, gut, nee, das finde ich, das finde ich echt.
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
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.
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.
Ja, klar, generell gehört schon, aber nicht auf dem Link.
Ja, nicht beim Link, nicht beim Link, ja.
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.
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.
Ähm, muss man gar nicht, kann man das Hidden-Ding nutzen, und das ist auch gleich viel semantischer.
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.
Mhm. Ähm, das sollte man vielleicht einfach im Hinterkopf behalten, wenn man das weiß, das kann man bewusst einsetzen, aber man sollte es wissen.
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.
Das heißt, ARIA-Hidden ist dann wirklich nur für den Screenreader-Hidden, aber ansonsten da?
Genau, ist visuell sichtbar, aber der Screenreader überspringt das, ganz genau.
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,
Hä, diese Information, die kommt jetzt doppelt und dreifach, das brauchst du ja gar nicht.
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.
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.
Also mach ich den Aria hidden, das heißt, der ist sichtbar.
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?
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,
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...
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.
Also, mach, mach einen Podcast-Clip, bitte.
Genau.
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,
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.
Mhm.
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.
Ä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.
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.
Und das hat mich interessiert, das wollte ich ausprobieren.
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
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.
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.
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.
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.
Ä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.
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.
Während die andere, ähm, ich seh gerade vier.
Ein und zwei, oder vielleicht, ja, aber jedenfalls im einstelligen Bereich auf jeden Fall.
Ja, die andere hat bei mir zwar einundzwanzig jetzt in dem Fall, klar, ist immer ein bisschen unterschiedlich.
Und klar, in dem Fall ist das nicht schlimm, weil 20 Millisekunden, eine Millisekunde, ja, ist vernachlässigbar.
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.
Und da kann das halt vielleicht dann schon nerven, dass das ein bisschen lange dauert zum Nachladen.
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.
Und da kann ich dem Browser einfach schon mal ein bisschen Vorsprung geben.
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.
Das ist ja, ich wollt grad sagen, das ist so ein totales Performance-Ding.
Und das Graceful-Fallback dafür ist halt einfach, ne, der Browser hat's halt nicht gecached, er macht halt einfach sein, sein Ding.
Wenn du sicher bist, dass du was nachladen willst.
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.
Oder eben ein JSON-Objekt, das riesengroß ist mit ganz vielen Daten, muss ich halt in dem Type dann entsprechend angeben.
Beziehungsweise, das macht, glaub ich, auch Content-Sniffing, wenn ich das nicht per Content-Policy verhindere.
Und dann kann ich da eben schon mal Zeit sparen.
Und das ist, da bin ich vorhin erst drauf gestoßen und das war mir nicht bewusst.
Und ich hab aber schon Anwendungsfälle, definitiv, dafür.
Und, ja, find ich cool, dass das geht.
Und hab ich jetzt neu gelernt.
Kannte ich auch nicht.
Und ich, das ist aber echt ein Ding, das muss ich mir mitnehmen.
Das muss in meinen Werkzeugkoffer, in meinen Webzeugkoffer rein.
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.
Ja, ja.
Weil da große Datenmengen auch geladen werden.
Ja, nur, dass es relativ statisch ist momentan noch.
Aber vielleicht muss es nicht statisch sein.
Vielleicht ist das jetzt der Anreiz, Dinge nachzuladen, weil sie ja schneller nachladen können.
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.
Und das wäre vielleicht echt ein Ding, was man da einsetzen könnte.
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.
Und du weißt aber, es wird keine große Verzögerung geben, weil zumindest die modernen Browser werden das vorgeladen haben.
Und das finde ich eine ziemlich coole Sache.
Ja, ja, absolut.
Cool.
Das ist wirklich cool.
Genau, also, Demo kommt in die Shownotes.
Dann gibt es noch, statt rel-pre-log, gibt es noch rel-pre-fetch.
Das ist für den Fall, dass die Ressource auf einer nachfolgenden Seite benötigt wird, nicht auf der aktuellen Seite.
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.
Du meinst Instant.Page.
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.
Dass das auch intern schon mal vorrendert. Und dann muss das nur noch geswappt werden, sobald ich tatsächlich auf diese Ressource zugreife.
Ich muss dazu noch kurz sagen, unser Caching funktioniert irgendwie trotzdem nicht mehr.
Ja, das ist ein bisschen traurig.
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.
Das war quasi, man hat es gar nicht gemerkt.
Das war mal rasend schnell und ich weiß nicht genau, warum das Caching nicht mehr richtig funktioniert.
Okay, müssen wir uns mal angucken.
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.
Okay, schade.
Ich habe schon, ja, egal.
Ja, genau.
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.
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.
Das ist ein Security-Ding.
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.
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.
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.
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.
Genau.
Das sind, also alles, äh, alles, äh, viel Performance-Sachen.
Ja.
Bei dem Link und es ergibt auch total Sinn.
In dem Fall Un-Performance-Sachen, wenn ich, wenn ich das Rendern blockiere, aber, ähm, ja, einfach von der Priorität.
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.
Okay, du bist fertig mit Link.
Genau.
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?
Ä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.
Ähm, also so für, für den ganzen Rest sozusagen.
Ä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.
Genau, oder auch das Base, was wir vorhin hatten, Base hat auch keinen Enttag.
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.
Ä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.
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.
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.
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.
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.
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.
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.
Genau, kannst du vielleicht mit einem eigenen Prefix versehen, so wie diese OG-Doppelpunkt-Dinger, dass man es so abkapselt vielleicht.
Aber man kann eigentlich alles da reinmachen.
Du kannst alles machen.
Also, alles, was in einem Attribut drinsteht.
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.
Nämlich zum Beispiel Viewport beim Name und dann so was wie, bei Content kommt so With Device, With Initial Scale, User Scalable.
Ganz wichtig für HTML-E-Mails.
Ganz wichtig.
Da habe ich das ganz viel benutzt.
Dann gab es irgendwelche Bugs, dass dann den Outlook das aber irgendwie.
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.
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.
Also, klein gemacht, sodass man sie dann zoomen muss.
Und ganz wichtig, bitte nicht User Scalable No oder irgendwie die Max-Mind-Scaler, Max-Scaler auf 1.0.
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.
Also, das ist einfach absolut, ja, böse, das zu unterbinden.
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.
Ich will, ich muss den Content lesen können und dann muss ich den auch ranzoomen können.
Danke, dass du das sagst, sonst hätte ich es gesagt.
Es ist viel besser, das von jemandem zu hören, der richtig sauer wird.
Ja, der halt betroffen ist, also ich brauche das wirklich manchmal.
Genau, also User Scalable No, das ist im Prinzip keine Option, wenn ihr das einsetzt, dann kriegt ihr es mit uns zu tun.
Dann komme ich persönlich vorbei, ja.
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.
Ich sage dir, das wird passieren.
Fick die Henne!
Das haben wir jetzt überhört, dass ein kleines Kind das gesagt hat.
Keine bösen Wörter.
Genau, Meta-Daten-Versuchmaschinen hatte ich schon angerissen mit Description, es gab früher auch mal noch Keywords.
Ich weiß gar nicht, ob das Google überhaupt noch interessiert.
Ich glaube, dass Description und Keywords beides nicht mehr benutzt wird, weil es ja dann diese zusätzlichen ...
Ja, aber da gibt es doch diese Dublin-Core-Geschichte und ich glaube, die werden benutzt.
Description ist definitiv der Text, der bei Google angezeigt wird unter dem Titel.
Da bin ich mir ganz, ganz, ganz sicher.
Also zumindest hat, glaube ich, DC-Core Priorität und dann vorweg auf Description.
Könnte sein.
Ja, aber ganz, ganz sicher ist das, das haben wir bei uns auch so ein, ganz, ganz sicher ist die Description der Text.
Also wenn du nichts anderes Vergleichbares angibst, ist das der Text, der da angezeigt wird.
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.
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?
Ich weiß gar nicht, ob Google das noch interessiert.
Also ich glaube, offiziell hält sich da Google schon dran.
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.
Also WordPress-Seiten kannst du immer noch so einstellen, dass sie nicht indexiert werden.
Aber das ist hier mit der Robots-TXT auch.
Du musst dich halt darauf verlassen, dass das gutartige Bots sind, die das berücksichtigen.
Weil jeder bösartige Bot wird halt nicht sagen, oh, disallow from, oh, schade, ja, dann nicht.
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.
Also wenn ihr dem Roboter, dem Meta-Name-Robots-Content-No-Index-No-Follow schreibt, dann ist es trotzdem öffentlich.
Also da muss man sich nicht dran halten, das war mal so ein Ding.
Ich weiß nicht, ob das überhaupt, falls ein SEO-Hohepriester oder Priesterin, nee, hohe Priester, nein, dunkle, ganz wichtig, dunkle Priester,
falls geheime dunkle SEO-MagierInnen zuhören, erhält uns mal, ob das immer noch ein Ding ist,
ob man noch glaubt, dass das irgendwie was hilft oder ist das total verallt.
Das stand in einem Artikel mit drin, ich dachte, ah ja, stimmt, ich erinnere mich, das war mal irgendwie so ein Ding,
aber da ich mich mit SEO überhaupt gar nicht beschäftige bei meiner Arbeit, wirklich so gar nicht,
weil alles, was ich mache, hinter einem Login ist und nur unsere interne Suchmaschine im Prinzip da Sachen indexiert
und da, glaube ich, das keine Rolle spielt, ja, habe ich keine Ahnung, ob das irgendwie noch State of the Art ist oder nicht.
Okay, so, und jetzt kommen wir zu dem Bereich, der mich ein bisschen überrascht hat bei Meta.
Und zwar, man kann bei Meta nicht nur irgendwie, was hatte ich oben, Charset angeben und name,
sondern als erstes Attribut auch HTTP-Equiv, was für Äquivalent steht, Äquivalent.
Gesehen habe ich das schon so oft und mir war nie so wirklich klar, was das macht.
Und ich kann dir genau sagen, wo ich das schon mal gesehen habe, welche Anwendungsfall ich davon kannte.
Also, den habe ich auch, das war da unten, und zwar HTTP-Equiv ist gleich Refresh, Content 5, Semikolon URL gleich Pfad.
Genau, also statt per PHP-Header-Location zum Beispiel zu setzen oder irgendwie anders serverseitig, kann ich das auch per HTML machen.
Also, du kannst also quasi eine HTML-Weiterleitung machen auf eine andere Seite, was du aber auch machen kannst.
Also, dieses Content, diese Zahl, sind Sekunden, ja.
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.
Das heißt, da war der Link die Seite selbst und die hat sich alle paar, so und so viele Sekunden automatisch neu geladen.
Seiten, die oft was Neues hatten, das gibt es heute gerade nicht mehr.
Also, sie verlassen jetzt dieses Angebot, sie werden in fünf Sekunden automatisch weitergeleitet, sowas.
Wozu auch immer diese Seite angezeigt wird.
Das ist so ein Pseudosecurity-Ding.
Ja, rechtliche Absicherung, damit man wirklich ganz deutlich macht.
Genau, aber das ist tatsächlich noch relativ aktuell.
Hatte ich jetzt gerade, habe ich jetzt gerade festgestellt, dass Microsoft Teams genau so etwas eingebaut hat, jetzt erst seit kurzem.
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.
Wenn man irgendwie in den Teams-Chat einen Link reintut, hat Microsoft schon den Link getrackt.
Aber seit kurzem ist da so eine komische Seite zwischengeschaltet.
So von wegen, wir prüfen jetzt diesen Link.
Ich weiß nicht genau, was da passiert.
Ob die das dann tatsächlich gegen irgendwelche Malware-Listen hauen oder sowas.
Ich weiß nicht, aber das ist genau so eine Seite, wie man das kennt.
Zum Beispiel auch bei diversen Portalen.
Facebook, keine Ahnung, ganz, ganz viele haben solche Zwischenschaltzeiten.
Sollt ihr nicht machen, braucht man nicht.
Aber genau, also Refresh.
Und dann habe ich überlegt, was ist HTTP-Equivalent?
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.
Falls man keine Möglichkeit hat, den Server entsprechend zu konfigurieren.
Genau, falls man keine Möglichkeit hat, den Server ...
Die Frage ist nur, warum man sich dann nicht an den Headern orientiert hat.
Weil der Header heißt ja nicht wirklich Refresh, der heißt ja Location.
Und X-Bias gibt's ja, warte mal, gibt's X-Bias als Header?
Das nimmst du mir hier alles vorweg, aber ist okay.
Achso, sorry.
Nein, es passt schon.
Genau, du hast es im Prinzip schon gesagt.
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 ...
Achso, du schreibst das dann, du hast dir das wirklich genau so notiert, ja.
Okay.
Ich hab mir das genau so notiert, ja, genau.
Ich lese es gerade, ja.
Dann wird das vom Server genommen, ja.
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.
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.
Aber es gibt nur eine bestimmte kurze Liste von Headern, die da funktionieren.
Da geht nicht jeder Header, du kannst nicht jeden Header damit setzen.
Aber das war die Idee dahinter.
Ähm, genau, was du vorhin schon gesagt hast, HTTP expires, damit kannst du quasi Cache-Header setzen.
Wobei natürlich die Frage ist, wenn's eh statisch ist, weil's keinen Server hat, dann ist ja, also ...
Hm.
Es ist für den Fall sinnlos.
Außer die Datei wird in regelmäßigen Abständen durch ein Programm oder so was neu geschrieben mit neuen Inhalten.
Dann möchte ich vielleicht wirklich nicht, dass der Browser das kennt.
Man merkt schon ein bisschen, aus welcher Zeit das stammt.
Ja.
Das ist nämlich, das ist sehr, sehr alt, aber das gibt es immer noch und offenbar schon funktioniert's auch immer noch.
Auch hier expires und dann Content in Klammern, äh, Content in Anführungszeichen, die Anzahl der Sekunden, ne, wieder.
Und das ist tatsächlich ein Vorteil im Vergleich zu Server-Headern, weil da kann ich es nicht setzen, ne.
Also da kann ich nur sagen, die Location ist so, aber da wird schon, bevor der Rest ausgeliefert wird, wird schon weitergeleitet.
Und das ist tatsächlich, das hätte ich normalerweise sonst per JavaScript machen müssen, dass ich nach fünf Sekunden weiterleite.
Ähm, ich lese mal noch ein paar weitere vor, die auch noch gehen würden.
Ähm, du kannst auch noch Mimetypes mit Content-Type, äh, definieren.
Ähm, Default-Style, da weiß ich nicht, da hab ich nicht genau nachgelesen, was das tut.
Mimetypes mit Content-Type.
Mhm.
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?
Das müsste, das müsste gehen.
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.
Ähm, ähm, und es geht wohl auch Content-Security-Policy.
Ach.
Darüber hatten wir es, ja.
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.
Genau, und vieles mehr.
Also da lohnt es sich auf jeden Fall mal, ähm, den MDN-Artikel durchzulesen.
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.
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.
Und dann hab ich mich erinnert an Self-HTML.
Ich weiß gar nicht, da haben wir vor Älionen auch mal drüber gesprochen.
Self-HTML war früher so die deutsche HTML-Referenz, wo du irgendwie so lernen kannst, wie man Webseiten macht.
Und das gibt es immer noch.
Und ich fand tatsächlich, äh, den Artikel zu Meta-Tag dort sehr erhellend und sehr, sehr gut, sehr, sehr gut geschrieben.
Auch ein bisschen akademisch, aber deutsch-akademisch verstehe ich ein bisschen besser als englisch-akademisch.
Ähm, und da waren deutlich mehr Beispiele, die ich irgendwie praxisnäher fand, als das, was im MDN-Artikel steht.
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.
Schaut mal bei Self-HTML dabei, äh, also wiki.selfhtml.org.
Da gibt es einige sehr gute Sachen auf, auf, sehr gut im Deutsch geschrieben.
Also, das kann ich auf jeden Fall empfehlen.
Schaut da mal rein.
Das ist, ähm, ich glaub, das ist immer noch ein Ding.
Also, wenn, wenn man, wenn man, äh, nicht nur die akademischen Beschreibungen von der MDN haben will.
Ich find auch die Beispiele oft bei MDN sehr, sehr abgedreht und wenig praxisnah.
Also, das ist auf jeden Fall hier noch mein Tipp an der Stelle.
Self-HTML mal wieder angucken.
Also, ich hab grad das mal ausprobiert, hier auf CodePen.
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.
Ich glaube, dass das aus der Zeit kommt, wo ich, äh, vielleicht unterscheiden können wollte zwischen X-HTML und HTML.
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 ...
Der wär super.
Ja.
Image-JPEG.
Aber das sollte nicht gehen, ne, das müsste den ...
Ne.
Gut. So, das zum Meta-Tag, was sich, äh, was sich echt als überraschend erwiesen hat für mich.
Ich weiß nicht, ich weiß nicht, ich muss ja sagen, es gibt über 100 gültige HTML-Tags. Wir haben jetzt heute acht.
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.
Wir gucken mal, was als nächstes anstehen würde und wie viel das sind und, und wie wir es vielleicht komprimieren.
Ja.
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,
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.
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.
Okay. Gut, dann, äh, kommen wir zu meinem letzten, nee, meinem vorletzten, ähm, Style.
Das hast du dich schon, das hast du dich schon gefreut.
Ja, ich dachte, das ist schon vorbei, aber ich weiß nicht. Ähm, Style.
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.
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.
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.
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.
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.
Ä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.
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?
Nee, das ist bei Style dabei, ich hab grad den Artikel nochmal auf.
Und, äh, bei Style kann ich auch REL setzen.
Nee, das gehört, glaub ich, wirklich zu, das gehört wirklich zu dem.
Nee, aber Title gibt es bei Style.
Das hab ich grad, hat mich grad auch gebundert, das kommt da tatsächlich, das ist schon richtig.
Warum gibt's das denn dann da?
Alternative Style-Sheets.
Ja, dann, dann ist das doch das.
Dann ist das doch das, was ich meinte.
Äh, Alternative Style-Sheet, genau, für den Title.
Ach so, genau, aber wann der Browser das, okay, dann, dann, das sind zwei Sachen.
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.
Also ich kann, ähm, nicht nur, ähm, REL, ähm, gleich Style-Sheet angeben, sondern ich kann Alternative als Keyword noch Leerzeichen getrennt davor setzen.
Und dann kann ich auch das Titel-Attribut oder Title-Attribut benutzen, um dem einen Namen zu geben.
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.
Oder ein besonders abgespecktes oder wie auch immer.
Ä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.
Ähm, genau.
Also das ist auch nix, was man heute jetzt noch unbedingt bräuchte, aber, äh, ja, gut zu wissen. Oder auch nicht.
Ja, doch, auf jeden Fall.
Okay, ja, das war's auch schon zu den Styles. Ich mein, da drin ist dann halt ganz normal.
Mein, mein, mein CSS.
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.
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.
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.
Ja, weil Style-Duplizieren ist eher.
Unangenehm.
Genau.
Ja, also das war's auch schon.
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,
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.
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.
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.
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.
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.
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.
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.
Oder auch entscheidet, wenn ich jetzt irgendwie bei einer Suchmaschine suche Google oder so, gehe ich da überhaupt hin.
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.
Ja, bislang haben wir eigentlich nur über total uninteressante Sachen geredet, weil die sieht man alle nicht.
Genau.
Könnte man so sagen.
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.
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?
Gott, das darfst du keinem sagen.
Nein, das habt ihr wieder vergessen, das hat Konstantin niemals gesagt.
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.
Um Gottes Willen, erzähl nicht so viel.
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.
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.
Braucht man heute echt eigentlich nur für HTML-Elements maximal.
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.
Ja, und nochmal unnützes Wissen, das zugrunde liegende Interface für das Body-HTML-Element ist das, ähm, HTML-Body-Element-Interface.
Und da kann ich einige On-Event-Händler draufsetzen, also hat On-Event, also On-Load und On-Was-I-Was-Properties.
Setz doch denen nicht so Quatsch ins Ohr.
Und das ist aber, ja, ist einfach nur unnützes Wissen, aber man hat's dann mal gehört.
Und das sind, und das ist aber, da weiß ich zum Beispiel auch nicht, warum macht man sowas?
Das sind eigentlich nur Aliase auf die gleichen, äh, On-Irgendwas-Händler auf dem Window-Objekt, auf der Window-Globalen.
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.
Und das einfach sofort wieder vergessen und einfach besser direkt das Window-Objekt verwenden.
Weil ich's gelesen hab in dem Artikel und dachte, krass, wieder was gelernt über das Body-Element, was ich sofort vergessen kann.
Und das wollte ich unbedingt mit euch teilen.
Okay, na gut.
Haben wir jetzt überhaupt gesagt, dass das Body-Element das ist, das um die eigentlichen Inhalte drumherum liegt?
Genau, das öffnet den Content, ja.
Da kommt der eigentliche Inhalt rein, der dann später auf der Seite sichtbar ist.
So, aber das ist unser Cliffhanger, das ist unser Cliffhanger und das andere erfahrt ihr später in einer anderen Folge.
Genau, und zu den restlichen Sachen, die Konstantin gesagt hat, möchte ich noch kommentieren.
BTF, Digger!
So, gut, dann sind wir am Ende.
Die Menschen haben doch fast zwei Stunden damit gefüllt.
Und wir sind noch nicht ganz am Ende, ne?
Es kommt noch was.
Und das waren jetzt nur acht Tags.
Ich glaube schon, dass wir bei einigen, also bei gerade so Textauszeichnungen, da kommen wir schnell durch.
Aber, und das ist auch der Grund, warum wir heute nicht weitergegangen sind als das.
Ich habe weitergelesen, ich kann jetzt schon mal einen Ausblick geben, was demnächst dann kommt.
Das nächste wäre Content-Sectioning, der Bereich bei der MDN.
Und da steckt in den einzelnen Elementen, wie zum Beispiel Article-Aside, Footer-Header, relativ viel drin, auch wenn die so unscheinbar klingen.
Ich glaube fast, dass wir diesen Block auch noch mal teilen müssen. Ich glaube, dass wir da vielleicht nicht mal alles schaffen.
Müssen wir mal gucken.
Das ist, ähm, die kommen so unscheinbar daher.
Aber da steckt eine Menge Semantik drin in den Gang.
Genau, das ist viel Semantik.
Aber deswegen ist es gut, vielleicht die mal richtig zu verstehen.
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.
Und das ist jetzt vielleicht ein Artikel.
Aber so richtig möchte ich das gerne mal verstehen, was eigentlich, wann wirklich der beste Einsatzzweck ist.
Deswegen freue ich mich da eigentlich schon drauf.
Okay, gut, ich freue mich so halb.
Auf die Vorbereitung freue ich mich nicht.
Okay, gut, dann schließen wir jetzt den, äh, äh, Content-Thema-Teil ab.
Den Themenbereich und, äh, gehen dann zu ...
Das ist schon okay.
Zu das Geil-Teil.
Zu Beginn zu das Geil-Teil.
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.
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.
Ich hab mich schon gewundert, weil da waren vorher mehr Sachen drin und dann plötzlich war nur noch ein Link drin.
Es ist, äh, es hat sich immer wieder gewechselt, weil ich gedacht hab, nee, ah, das, ja, nee, jetzt kommt wieder auf die Seite.
Alles zu geil, eins geiler als das andere.
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.
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?
Weil da im alten Jahr hab ich nämlich schon angefangen, da was reinzuschreiben.
Und zwar, das ist jetzt heute, ähm, was für Musiker oder solche, die es werden wollen, doofer Spruch.
Äh, aber, äh, ist, ist ganz ernst so gemeint.
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.
So, ich, ich lese jetzt einfach mal nur ein paar Tools vor davon.
Und die sind alle, also, ich muss dazu sagen, die sind, das ist sehr hübsch gemacht, die Seite.
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?
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.
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.
Welche Töne sind denn da drin und wie funktioniert es denn?
Und dann habe ich auch noch Noten, aber ich habe auch noch ein Klavier und ich kann es mir dann auch einmal anhören.
Ä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.
Das ist natürlich jetzt schon so eher, das verstehe ich auch nur so zur Hälfte, das kann ich jetzt direkt schon sagen.
Ähm, dann, äh, ein kleiner Sequencer, mit dem man Musik basteln kann, indem man einfach Kästchen anklickt und dann verschiedene Instrumente hat.
Und dann kann ich, dann kann ich auch nur sagen, was für ein Synth sollte es sein.
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.
Ähm, das behaupte ich jetzt einfach, weil anders, anders kann man, also da sind auch wirklich Synthesizers da irgendwie mit drin.
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.
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.
Oder kann auch sagen Random und dann kommt irgendein komischer Beat raus.
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.
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.
Ä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.
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.
Ä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.
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.
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.
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.
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,
ä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,
Also ein Intervall-Trainer ist da mit drin.
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.
Ah ja, perfekt, ja.
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,
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.
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.
Und sowas, ah, sowas find ich cool.
Und das ist einfach mit Herzblut und schön gemacht und, wow.
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.
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.
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.
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.
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
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.
Sehr, sehr, sehr cool.
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.
Juh, oh, wir haben was vergessen.
Wir haben was vergessen.
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.
Wir haben den Werbeblock total vergessen.
Ja, den dachte ich, äh, machen wir jetzt, äh, am Ende.
Also jetzt erst mal, also, dass wir jetzt das Ende machen.
Das ist natürlich taktisch unklug, das ist taktisch unklug, ne, den, den, den Werbeblock am Ende zu machen.
Eigentlich muss man den irgendwo reinmachen, wo die Leute, wo die Leute richtig davon genervt sind.
Ich schneid ihn mitten rein, ohne Vorwarnung.
Nein.
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.
Wir können auch deinen nochmal laufen lassen, aber, ähm.
Ah, den machen wir dann nächstes Mal.
Okay, okay.
Den machen wir dann nächstes Mal.
Dann, äh, machen wir es jetzt vor dem Ende noch, jetzt noch.
Achso, machen wir es, äh, oder?
Achso, ja, dann, ja, dann, ja, dann jetzt.
Okay, dann möchte ich euch, äh, äh, kurz einen, einen wichtigen Aufruf, äh, meiner Tochter vorspielen.
Wenn euch der Podcast gefällt, dann findet Ken.
Mein Name ist Konstantin Groß und ich unterstütze diesen Aufruf.
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.
Also, also, also wer jetzt nicht dahin schmilzt und tut, was Konstantins Tochter sagt, dann weiß ich auch nicht mehr.
Das ist ja eigentlich, eigentlich, das ist, äh, es ist eigentlich Audiodiabetes, was man hier in die Ohren gespült bekommt.
Vielleicht denken die Leute aber auch eher so, unangenehm.
Da werden Kinder, äh, für, für solche Zwecke missbraucht.
Es ist dein Kind, das dafür missbraucht wird, dass es das Licht, äh, die Verantwortung, ja, die Verantwortung.
Es war ja sogar irre Idee, wenn ich das richtig verstanden habe.
Genau, genau.
Gut, aber, dann kommt es jetzt.
Ja.
Das Ende.
Hm.
Heute hat's mich gar nicht so sehr gestört.
Man ist so ein Acquired Taste.
Der End-Jingle.
Acquired Taste, man fühlt sich dran.
Ja, genau.
Ja, Mensch, dann ist, glaube ich, alles gesagt, oder?
Wir haben es geschafft.
Ah, apropos alles gesagt.
Der Alles-Gesagt-Podcast
hat seine eigene Folgenlänge-Rekord neu aufgestellt.
War der Rekord mit Rezo, oder?
Der Rekord war mit Rezo.
Ja, Mist, ich sehe es jetzt gerade gar nicht,
weil ich die Folge, weil ich schon angefangen habe anzuhören.
Auf jeden Fall, der neue Folge, also daran müsste,
warum sage ich das?
Weil wir ja schon gehört haben,
unser Podcast wäre zu lange.
Da müsst ihr mal alles gesagt hören.
Der neue Folgen-Rekord liegt bei über neun Stunden.
Neun, neun, neun Komma, weiß ich nicht genau.
Warte mal, ich habe den doch auch.
Ich werde es mir angreifen.
Vielleicht noch mal gucken, wie lange genau.
Ja, guck mal, wenn du noch nicht angefangen hast,
weil bei mir, ich sehe da jetzt gerade nicht mehr
die Gesamtdauer der Folge.
Da steht nämlich, also, ich bin bei acht,
ich kann es mal so sagen, ich bin bei acht, drei und,
nee, ich bin bei 53 Minuten
und es verbleiben noch acht Stunden 23.
Also neun Stunden 16.
Neun Stunden 16.
Krass.
Ja, das ist was.
Ja, haben wir noch,
hatten wir noch ein bisschen was anzuhören.
Das machen wir auch mal.
Dagegen sind wir relativ kurz.
Ja, tatsächlich.
Unsere längste Folge geht so ungefähr die Hälfte davon.
Können wir uns mal ein Beispiel nehmen
und vielleicht mal einen Gast oder eine Gästin einladen?
In der nächsten Folge machen wir einfach alle HTML-Administe fertig.
Dann kriegen wir die auch hin.
Oh Gott, oh Gott.
Nein, das würde ich selber.
Oh Gott, da müsste ich jetzt schon anfangen vorzubereiten.
Ne, wir lesen einfach nur die MNN vor.
Oder Self-HTML, das ist auf Deutsch.
Wir lassen, was machen wir noch nicht selber?
Das lassen wir von der AI vorlesen.
Okay, können wir auch machen.
Und schon haben wir null ZuhörerInnen.
Gut.
Aber das Schöne ist, beim Podcast sehen wir das nicht,
wie viele Leute bis zum Schluss hören.
Und das interessiert uns auch gar nicht,
weil jetzt wäre der Moment im Stream,
wo die Leute dann abschalten und man dann sieht,
oh, jetzt sind es noch drei.
Genau.
Und davon sind zwei wir.
Ja.
Und dann sagen wir.
So, okay, dann bringen wir es jetzt zu Ende.
Macht's gut, schön, dass ihr dabei wart.
Ja, bis zum nächsten Mal.
Bis zum nächsten Mal.
Und ja, macht's gut.
Ciao.
Bis zum nächsten Mal.