Wo wir sind, ist vorne, Folge 62. Heute geht's um die Mutter aller HTML-Elemente.
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-Jongleur Konstantin Groß.
Hello, hello, hello. Willkommen zurück aus unserer Winter-Sylvester-Weihnachtspause.
Jetzt gibt's wieder Podcast.
Erste Folge im neuen Jahr.
Yes. Ich hab mich gerade so gefreut, das Intro zu hören.
Ich war gerade so, ich hör das ja so, naja, ich hör das jetzt so privat jetzt nicht so, ist nicht in meiner Playlist drin.
Aber ja, fand ich jetzt irgendwie, fand ich gut, hat mir gerade Spaß gemacht, das wieder zu hören.
Vor allem so einmal, einmal das Podcast, das Podcast-Intro ist nämlich auch anders als das, nee, es stimmt gar nicht.
Nee, es ist eigentlich das Gleiche, ja.
Wir haben auch das, aber trotzdem irgendwie, es war, es fühlt sich irgendwie anders an.
Ja, beim Stream müssen wir irgendwie mehr machen und gucken, Szenenwechsel und blablabla, da ist man irgendwie nicht so aufs Hören konzentriert.
Ja, ich finde unser Intro immer noch gut und das ist, wir haben es nicht verändert seit Beginn.
Ja, es ist nicht so, dass man sich satt hört und so irgendwann, also geht mir zumindest so.
Zumindest wir nicht.
Ja, finde ich, ihr vielleicht schon.
Vielleicht habt ihr ja schon auch irgendwie so euren Podcatcher so eingerichtet, dass die ersten so und so viele Sekunden weggeschnitten werden.
Aber dann müssten wir vielleicht mal so einen ganz fiesen, langen Text ganz am Anfang sprechen, damit der das komplett durcheinander bringt.
Genau, nächstes Mal.
Ich habe das tatsächlich bei manchen Podcasts, wo ich wusste, das Intro kommt oder das irgendwas davor ist, tatsächlich auch schon so gemacht, dass ich das Intro ...
Ja, einfach nochmal 15 Sekunden gespart am Anfang.
Kann auf jeden Fall empfehlen, falls ihr euch das Outro noch nie bis zum Schluss angehört habt, das würde ich empfehlen, dass man das mindestens einmal gemacht hat.
Und vor allem über den Webplayer auf unserer Seite.
Vor allem über den ... Ich weiß gar nicht, ob das noch funktioniert.
Doch, doch, müsste eigentlich.
Ich habe es schon lange nicht mehr gemacht, aber eigentlich müsste es noch funktionieren.
Schon lange nicht mehr getestet.
Ah, ich sehe gerade, der Konstantin trinkt aus einer Star Wars-Tasse.
Ja, ich habe mir noch einen koffeinfreien Espresso gemacht.
Ein koffeinfreier Espresso?
Also, ich trinke einfach gerne Kaffee und Espresso.
Und wenn ich den aber irgendwie nach zwei, drei nachmittags trinke, dann schlafe ich ewig nicht.
Ja, das kann ja auch gut sein.
Dementsprechend trinke ich gerne abends mal einfach noch so einen koffeinfreien.
Das hatte ich jetzt ... Jetzt verlabern wir uns schon wieder.
Das hatte ich jetzt die letzten Tage auch mal, wo ich gar nicht zum Ende kam.
Und bis um ... Und das war gar nicht wegen Koffein, glaube ich.
Ich bin in so ein AI-Loch gefallen.
Aber da sind wir eigentlich schon in der Retro.
Stimmt, da könnten wir in der Retro noch drüber sprechen.
Mein AI-Loch.
Okay, ja, dann schiebst du das noch rein.
Aber dann können wir doch bei Getränken gleich weitermachen, oder?
Machen wir bei Getränken gleich weiter, genau.
Ja, heute trinke ich mal wieder ganz unspektakulär, aber tatsächlich gekühlt, und ich weiß gerade gar nicht, ob ich es gut finde, was Gekühltes zu trinken, einen Augustiner, dem ich irgendwann mal sponsoren sollte, oder diesen Podcast.
Das wäre irgendwie mal angemessen sollte.
Kann man mal anregen.
Genau.
Der Podcast Alkoholismus geht also weiter.
Du trinkst wahrscheinlich wieder was Alkoholfreies.
Genau, ich habe mir mitgebracht aus dem Urlaub ein Salzburger Stiegel 0,0 Freibier.
Ja, das heißt, es war leider nicht kostenlos wahrscheinlich.
Nee, leider nicht.
Ja, dann machen wir mal noch kurz die ASMR-Öffnungsrunde.
Bei dir klang es, also mein Öffner, der öffnet sehr gut, aber er ist soundmäßig nicht so, der macht es irgendwie nicht so gut.
Das klingt bei dir immer besser.
So, nein.
So, stoßen wir noch an.
Zu wohl.
Das klang irgendwie nicht so gut, gell?
Man hat gehört, dass die andere...
Bisschen dumpf.
Ja, es war ein bisschen dumpf.
Es war, hm.
Naja, so ist das manchmal, wenn man durchs Portal anstößt, das klappt halt nicht immer.
Das schmeckt jetzt gerade ein bisschen komisch durch den Kaffee, den ich kurz vorher noch getrunken habe.
Okay.
Aber gut.
Ja, dann können wir doch direkt zur Retro kommen, oder?
Yes.
Dann mache ich mal den Anfang.
Und ich habe beim Vorbereiten so gedacht, eigentlich habe ich gar nicht wirklich eine Retro.
Ich habe ja letzte Folge schon erwähnt, dass ich jetzt schon eine Weile krankgeschrieben bin, auch immer noch krankgeschrieben bin.
Und dementsprechend mache ich gerade einfach nichts an Entwicklung und habe da nicht so viel jetzt entwicklungstechnisch drüber zu sagen.
Aber dann dachte ich mir, wir haben schon im Stream öfter mal so eine EntwicklerInnen-Therapiestunde gemacht.
Und das kam eigentlich immer ganz gut an.
Und dann mache ich stattdessen einfach so ein kleines Public-Service-Announcement und appelliere an euch.
Unsere Branche, so IT und Entwicklung, ist ja irgendwie ein bisschen anfällig für so Anxiety, Depression, Burnout.
Das ist ja fast schon vielleicht eine Berufskrankheit.
Zumindest ist es sehr weit verbreitet.
Und ja, wollte ich einfach mal sagen, nochmal appellieren, achtet auf eure Gesundheit, egal ob körperlich oder psychisch.
Und sucht euch Hilfe, scheut euch da nicht und sprecht mit KollegInnen drüber, wo ihr vielleicht sehen werdet, hey, den anderen geht es ganz genauso.
Zumindest war das immer so das Echo im Stream, was wir so bekommen haben.
Genau.
Und das wollte ich einfach nur loswerden.
An der Stelle noch, ich bin mir jetzt gerade nicht sicher, ob das im Podcast gesagt wurde, in der Aufnahme oder als die Mikros schon aus waren.
Bei der Aufnahme der letzten Folge hat der Matthias dazu auch noch was gesagt.
Ich weiß nicht genau, ob es da irgendwie, ob er Research dazu gelesen hat.
Er hat ja irgendwie gemeint, dass es da offenbar auch so die Annahme gibt, dass das oft auftritt in unserer Branche,
weil man in ganz vielen Bereichen der digitalen Welt nie fertig ist.
Also weil man immer nur am Strampeln ist und immer noch ein Feature und noch und dies und das.
Es gibt aber nie ein Fertig.
Es gibt nie ein, so wie, ich hatte das jetzt gerade vor kurzem, war sehr befriedigend, einen Raum streichen.
Also erstens, nachdem das Nervige abgeschlossen ist, Abkleben und sowas, Farbe aufbringen.
Ich sehe sofort ein Resultat.
Ich nehme, ich tauche die Rolle in den Farbeimer.
Und fahre damit daran entlang.
Und genau da, wo ich jetzt die Farbrolle entlanggerollt habe, sieht jetzt die Wand schon neu aus.
Und wenn ich mit dem Raum fertig bin, dann habe ich vielleicht, nachdem er getrocknet ist, nochmal zwei, drei Stellen auszubessern.
Und dann ist der fertig.
Und dann streiche ich den die nächsten zehn Jahre nicht mehr.
Dann habe ich wirklich was geschafft.
Ein fertiges Produkt.
Also ich kenne das auch sehr, sehr gut.
Ich habe ja auch auf der Arbeit so Langzeitprodukte, die über Jahre hinweg entwickelt werden, wo es immer neue Features gibt oder alte Sachen ausgebaut werden.
Da muss irgendwie was geupdatet werden und so weiter.
Man ist nie fertig.
Es gibt nie den Moment, wo ich sagen kann, das lege ich jetzt weg zu den Akten.
Das ist irgendwie in der IT.
Ich glaube, das ist, wenn man Agenturarbeit macht, noch eher so.
Da gibt es das öfter.
Aber auch nie so, dass man dann mal sagt, jetzt habe ich was geschafft, jetzt ruhe ich mich mal aus.
Jetzt war ich besonders gut die letzten drei, fünf, siebenundzwanzig Wochen.
Und jetzt sage ich mal, okay, jetzt habe ich es mir mal verdient, mich mal jetzt drei Monate auf die faule Haut zu legen, weil ich jetzt halt richtig ordentlich was geschafft habe.
Gut, okay, das ist ja dann so ein Anstellungs- und Selbstständigkeitsding auch wieder.
Also in der Selbstständigkeit kannst du vielleicht eher sagen, okay, das hat mir so viel Geld reingebracht, jetzt mache ich drei Monate nix.
Das ist halt der Kabinett.
Wenn du angestellt bist, dann kommt halt schon wieder das nächste Projekt.
Gut, ich meine, es kann schon sein, dass ein Projekt mal irgendwann wirklich fertig ist, weil es einfach halt tot ist.
Aber sonst weißt du ja nie, kommt noch mal jemand an und sagt, ah, bei dem, was wir da gemacht haben, da müssen wir jetzt noch das und das hinzufügen und so.
Da kann immer wieder was kommen.
Und es ist halt einfach, digital kann ich halt nicht anfassen.
Also wenn ich einen Stuhl geschreinert habe, dann steht er da und dann sitze ich da vielleicht jeden Tag drauf.
Oder ich gucke jeden Tag, wenn auch nur unterbewusst, halt diese Wand an, die ich gestrichen habe.
Aber so eine digitale Sache, die ist halt einfach, die ist da irgendwo.
Und wenn ich die Festplatte falsch rüttel, dann ist die weg.
Also die ist nicht greifbar.
Also macht immer Backups, Leute.
Ich habe hier noch, ah, das könnten wir vielleicht auch noch announcen.
Machen wir vielleicht am Ende.
Genau.
So, dann, Moment, ich muss es jetzt noch hier kurz.
Tippel.
So, tippel, tippel, genau.
Dann kommt mein erster Retropunkt.
Also, jetzt sind ja ein paar Wochen vergangen seit unserer letzten Folge.
Und ich habe, glaube ich, davor auch mal gesagt, dass ich im Prinzip jetzt, ich bin ja im Sabbatical immer noch, auch noch bis einschließlich Juni.
Und ich habe relativ wenig programmiert in der Zeit, habe viel andere Sachen gemacht, hatte den Kopf auch woanders und hatte auch den, habe auch, glaube ich, in der letzten Folge gesagt, es fehlt mir irgendwie gar nicht so.
Und es stört mich eigentlich gerade gar nicht, nichts Technisches zu machen.
Und muss sagen, das hat sich jetzt komplett gedreht.
Und zwar so kurz vor Silvester habe ich dann angefangen, mein eigenes Blog zu bauen, mein neues, zu finden unter moritzgießmann.de slash blog mit oder ohne abschließendem Slash, wie ihr wollt.
Wichtig. Ich finde, das ist ein wichtiges Usability-Feature, weil es gibt Seiten, die gehen kaputt, wenn der schließende, der hintere Slash fehlt oder nicht fehlt, je nachdem, wie man es halt gebaut hat.
Wichtig ist halt, dass der Server entsprechend weiterleitet und du nicht, wenn sonst hast du Duplicate-Content.
Genau.
Und immer schön den Canonical-Link setzen, damit Google auch weiß, wo die Seite hingehört.
Ja, also ich habe einen Blog jetzt gebaut, das ist, wie gesagt, zu finden unter moritzgießmann.de slash blog.
Da blogge ich halt so rein, was mir so einfällt.
Bisher waren es hauptsächlich technische Themen, Sachen, die ich auch gemacht habe in der Vergangenheit teilweise.
Ich habe zum Beispiel nochmal gebloggt über ein Firefox-Theme, was ich mal gebaut habe.
Habe gebloggt über Eleventy.
Ich habe das Blog mit Eleventy gebaut und Pico CSS.
Fand ich irgendwie ganz nett, irgendwie mal was Neues auszuprobieren.
Habe ich nämlich beides vorher noch nie eingesetzt, aber kannte es schon so aus der Ferne.
Habe gebloggt über, vielleicht auch ein bisschen kontrovers über Accessibility, AI nutzen, um Accessibility zu verbessern.
Da sind sich auch nicht so alle einig, ob das eine gute Idee ist.
Genau.
Das gibt es jetzt.
Das abonniert ihr jetzt alle.
Den Feed davon ist ja klar.
Und verlinkt fleißig da drauf, da würde ich mich extrem drüber freuen, weil Google jetzt irgendwie das noch nicht alles indexiert hat und mich das ein bisschen nervt, muss ich sagen.
Obwohl ich Sitemap eingereicht habe und sogar einzelne Seiten gesagt habe, ey, indexiert es doch mal.
Ja, das dauert.
Irgendwie hat das jetzt noch, also auf meiner Seite war zugegebenermaßen jetzt auch sehr lange, sehr wenig Content und alles sehr statisch und es hat sich nur ganz selten was geändert.
Und ich kann es verstehen, dass ich jetzt quasi in der Google-Schublade, da ändert sich nix bin, da gucken wir alle halbe Jahr mal vorbei.
Aber ich habe jetzt sogar eine Sitemap eingereicht, die auch alle Links beinhaltet und auch bei Google, ah ja, wir haben hier diese 27 Links jetzt und trotzdem indexiert es nicht.
Also ich bin da ein bisschen, also ich brauche Backlinks, Leute, ich brauche Backlinks, Backlinks, Backlinks.
Und oder halt auch Besuche, also wenn Google dann feststellt, okay, da kommen wirklich organische Besucher auf die ...
Aber woher wollen die wissen, woher wollen die wissen, dass ich besuche?
Google weiß doch alles.
Ich habe kein Google-Tracking bei mir eingebaut, sondern nur Matomo.
Ich habe kein, kein, äh, wie heißt das?
Dann sind es vielleicht wirklich Backlinks, die da ...
Schon vergessen, wie das, Google Analytics hieß das, ja, das habe ich früher auch verwendet.
Aber ich habe jetzt gerade vor kurzem gesehen, dass ich mein, äh, PIVX-slash-Matomo schon seit, glaube ich, über zehn Jahren im Einsatz habe.
Ah ja, krass.
Was krass ist, da kann man auch schön Zahlen zurückverfolgen und so.
Das ist schon richtig lang am Start.
Also hier bei mir gibt es Google-freies Tracking und wenn ihr gar kein Tracking wollt, schaltet den Do-No-Track-Header ein und das wird respektiert von meinem, äh, von meinem Matomo.
Oder schaltet den Ad-Docker ein, dann ist das auch weg.
Also ich will, ich will nur ein bisschen was über Browser rausfinden und selbst wenn ihr das, wenn ihr das nicht wollt, dann empfinde ich das auch nicht raus.
Das ist alles in Ordnung.
So, und, äh, andere Dinge, die ich auch noch gemacht habe, ähm, vielleicht kennt der eine oder die andere das Tool, äh, wir sprechen auch später nochmal kurz drüber, äh, Contrast-Ratio.com, was es mal gab, Contrast-Ratio.com, wo man sich Farbkontraste ausrechnen lassen konnte, ob die den Barrierefreiheitsrichtlinien entsprechen.
Und, äh, wer die Seite kennt und in letzter Zeit mal drauf war, hat festgestellt, dass die jetzt auf so ein SEO-Dings umleitet, weil die Lea, die das gebaut hat, hat das, äh, hat wohl ein gutes Angebot bekommen und hat das Teil dann verkauft.
Es war ein echt geiles Tool, aber es war auch noch, ähm, auf GitHub und es war unter der MIT-Lizenz. Und dann habe ich mir gedacht, hey, ähm, das muss nicht sein, das kann es ja jetzt wieder geben, ganz ohne SEO-Tracking-Kram, bla bla bla.
Und hab das, äh, auch, ich hab auch Lea Bescheid gesagt, also, es ist nicht so, dass ich das jetzt heimlich gemacht hätte, auch wenn ich die, äh, das laut der Lizenz dürfte, hab es wieder online gebracht, in der alten Version, hab da jetzt eigentlich auch quasi keine Änderungen dran gemacht, das funktioniert immer noch genauso wie früher.
Vielleicht, äh, vielleicht verbessere ich es irgendwann noch ein bisschen. Unter contrast-ratio.org, da könnt ihr jetzt eure Kontraste ausrechnen lassen, ähm, live. Und man, was das, was ich eigentlich finde, was das coolste Feature da dran ist, ist, dass man, ähm, wenn man Farben eingegeben hat, auch einen Link da drauf bekommt, auf die Seite mit den entsprechenden Farben und dem Ergebnis.
Das heißt, ich krieg dann so ein, ähm, ähm, ein Anchor, äh, hinten dran gebaut, hinter die URL und kann dann tatsächlich auch auf das Ergebnis der beiden Farben verlinken, was ich, äh, ziemlich cool finde.
Genau, das zu Dingen, die ich getan hab, und ich hab auch schon viele Blogartikel geschrieben, seit ich, ähm, das Blog habe, das, der Blog, das ist, glaub ich, immer noch nicht geklärt, ähm.
Ich sag's mal so, mal so.
Mal, mal so, mal so. Ich glaub, ich glaube, die offizielle Schreibweise ist, ähm, eckige Klammer auf, das Pipe.
Der, eckige Klammer zu, Blog.
Genau.
Ich glaub, das ist, ähm, okay, gut, dann, äh, kommen wir zum Nächsten.
Ja, RSS hattest du, hast du gerade abgehakt, ist das, hattest du das schon, ist das an mir vorbeigeflogen?
Ja, den Feed, den Feed abonnieren.
Ah, den Feed abonnieren.
Okay.
Den Feed abonnieren, weil, ähm, Feeds einfach eine tolle Sache sind und viel besser als Social Media und alles andere.
Der Feed, der geht niemals woanders hin. Der Feed ist gut, der Feed füttert euch.
Feed ist sehr gut.
Der Feed, der Feed ist einfach, ist einfach pure Liebe. Nutzt den Feed.
Danke, Feed.
Ja, ja, da ich, wie gesagt, keine Retro hab, mach ich jetzt dafür noch eine kleine Ankündigung, ähm, falls der, die eine oder andere, äh, halt nur Podcast hört, ähm, aber vielleicht doch mal in den Stream schauen will.
Ach, das wollte ich mich bei meinem ersten Teil noch sagen. Also, wenn ihr sonst niemanden zum Reden habt, dann kommt doch mal in unseren Stream. Da gibt's immer viele Gleichgesinnte und wir schweifen da gerne auch mal von, äh, anderen Themen ab, wie wir das so tun und reden dann über EntwicklerInnen-Probleme. Ähm, und, äh, ja, ansonsten lohnt sich's vielleicht auch reinzuschauen Ende Mai oder Mitte, Mitte Mai eigentlich.
Doch, doch, doch. Ja, natürlich. Äh, und zwar gibt's, äh, bei, bei Twitch so Stream-Goals, Sub-Goals, ähm, und dann haben wir aus Spaß gesagt, ja, komm hier, wenn wir 100 Subs zusammenkriegen, machen wir einen Hot-Tab-Stream.
Und man muss dazu sagen, vielleicht muss man mal erklären für die Nicht-Twitch-KennerInnen. Was das ist überhaupt, ja.
Ähm, also ein Sub ist tatsächlich, ist quasi wie so eine Art bezahltes Abonnement. Man bekommt da dann bestimmte, äh, Emotes, so heißt es da so, also bestimmte Emojis, die wir da bereitstellen. Das ist eigentlich so, und ich glaub, keine Werbung dann, ähm, im Stream.
Ja.
Ähm, ich glaub, das sind so die Sachen, die man dafür in erster Linie kriegt. Und, äh, genau, man kann aber auch welche verschenken. Also, man, man, äh, muss nicht unbedingt das nur für sich machen, man kann auch sagen, hey, ich schenke der Community.
Also, es ist was, wo wir ein bisschen Geld für kriegen und Jeff Bezos wahrscheinlich noch mehr als, als wir dann jeweils. Genau.
Und wir haben da aus Spaß gesagt, ähm, Jahrhundert, ähm, das, so gleichzeitig, das kriegen wir eh nicht und haben dann so hintendran, also vielleicht muss man das zu Twitch auch noch erklären, auf Twitch gibt's, ähm, ich glaube, es sind in erster Linie, äh, Menschen mit, äh, mit Brüsten, sag ich mal.
Ich will das jetzt mal nicht, nicht, nicht werten, sondern es sind erst ja die Menschen mit Brüsten, die, ähm, ganz gerne, ähm, das als Hauptcontent ihres Streams machen und dann so leicht bekleidet in, ähm, in so Mini-Schwimmbecken sitzen, so in, in ihrem Wohnzimmer und dann halt so im Wasser und dann, keine Ahnung, irgendwelche Sachen da machen.
Also, es ist alles, es ist alles, äh, FSK 12, behaupte ich, aber es ist schon irgendwie so ein bisschen, so ein bisschen anzüglich und das nennt sich so grob Hot Tub Stream.
Ich glaube, warte mal, wie heißt die Kategorie auf Twitch?
Gibt's da eine eigene Kategorie dafür?
Es gibt, es gibt mittlerweile eine eigene Kategorie, ich weiß es nicht mehr genau.
Und es ist manchmal so ein Witz, den man halt so macht, naja, dann machen wir halt mal einen Hot Tub Stream.
Und wir haben halt damals hingeschrieben, bei 100 Subs, und wir hatten halt vorher immer so 10, 15 parallel oder so, äh, ich glaube, das ist, oder vielleicht auch mal 20.
Und haben gesagt, bei 100 machen wir auch einen Hot Tub Stream, ja, und dann, dann kam Weihnachten oder so irgendwie die Vorweihnachtszeit um die Ecke.
Und dann hat, äh, einer unserer Stammzuschauer 60 rausgehauen und dann ein anderer, ah ja, komm, da steht irgendwie, jetzt fehlen noch 40, da mach ich jetzt noch die anderen 40 und dann ist es passiert und jetzt müssen wir sowas auch machen.
Aber es wird auch FSK 12.
Es wird auch FSK 12.
Ich weiß nicht, ob ich mich jetzt trauen würde, weiter runterzugehen.
Ähm, ja, und dann werden wir bei Konstantin im Keller einen kleinen Pool aufbauen und dann ...
Da so Pool-Sachen machen halt.
Ich weiß nicht genau, was das dann bedeutet.
Müssen wir da mal gucken.
Ja, das sehen wir dann mal.
Wir sammeln noch Ideen, wenn ihr Ideen habt, was wir da machen können, dann nur her damit.
Genau.
Okay.
Dann haben wir das angekündigt und mir ist es jetzt schon ein bisschen peinlich.
Ich weiß nicht, ich glaube, die Podcast-Zuhörerschaft ist ein bisschen anders gestrickt als die Leute, die eh schon auf Twitch sind und den ganzen Kram kennen.
Aber okay, jetzt haben wir es angekündigt.
Müssen wir zustehen.
Okay, das tun wir jetzt ganz aufrecht.
Okay.
Gut, dann vielleicht noch, was ich gerade vorhin noch spontan hinzugefügt habe, das AI-Loch, in das ich gefallen bin.
Ich hatte vor ein paar Tagen, ähm, habe ich mir gedacht, ich habe mir viel von AI jetzt programmieren lassen.
Und dann dachte ich, kann das eigentlich auch komplexe Sachen.
Und dann bin ich, das war nach dem Stream abends, als wir den letzten Stream gestreamt haben, habe ich noch irgendwie so ein Video geguckt auf YouTube und dachte so, Mensch, aber AI, sag mal, ChatGPT, kann das eigentlich auch so richtig komplexe Sachen programmieren?
Das ist ein Spiel zum Beispiel. Und dann habe ich versucht, von ChatGPT mir programmieren zu lassen, ein Tetris-Spiel. Und das Spielfeld sind Checkboxen auf einer HTML-Seite.
Hast du es dir eigentlich schon angeschaut?
Ich habe es, ich spiele es gerade.
Du spielst es gerade? Ah, deswegen macht es klack, klack, klack.
Ich muss sagen, es hat nur seine Eigenheiten.
Ja, man kann die Checkboxen halt auch noch bedienen, ne?
Während des Spiels.
Man kann die Checkboxen auch noch bedienen während des Spiels. Ja, es hat aber auch noch andere Eigenheiten.
Ähm, zum Beispiel, wenn man mehrere Lines auf einmal cleart, dann geht immer erst nur eine weg und dann, wenn der nächste Block fällt, die nächste und so.
Man könnte sagen, das ist eine Spezialregel.
Das habe ich aber, aber wenn man, ich habe auch den Chatverlauf mit ChatGPT in meinem Blog-Artikel dazu verlinkt, wo man, wo man komplett nachlesen kann, was, meine Konversation mit dem Ding.
Ähm, ich, ich habe sehr, sehr, sehr verzweifelt versucht, dem Teil beizubringen, dass die Regeln da falsch sind und habe dann gesagt, ja, wie sind denn die Regeln von Tetris da, was das angeht?
Ah, die sind so und so und entspricht dieser Code dem? Ich habe wirklich versucht, es wie einem Kind zu erklären, dass das falsch ist und es hat mir dann aber Code zurückgeliefert, der immer wieder kaputt gegangen ist.
Ja, Mist.
Und dann habe ich dabei belassen.
Ja, das ist so das Ding oft bei ChatGPT, ne, du drehst dich immer wieder im Kreis und sagst, hey, das ist falsch, mach's bitte so, aber es passiert einfach nicht.
Also letztens habe ich was gesehen, du kannst ja mittlerweile mit der, äh, mit der Bezahlversion auch Bilder generieren lassen und da war dann irgendwie, ich will das und das Gericht und dann hat das immer irgendwie Erbsen dazu gemacht und dann, nein, ich möchte keine Erbsen, lass die Erbsen weg, zack, nächstes Bild, immer noch Erbsen da.
Was ist das Grüne da auf dem Bild? Das sind Erbsen. Lass sie weg.
Sie waren wieder da.
Ich habe, ich habe vor kurzem jetzt gerade ein witziges Bild gesehen und ich weiß nicht, ob es Fake war, ähm, äh, es war auf jeden Fall, warte mal, was war das, Dolly?
Ähm, und zwar hat da jemand gesagt, ähm, mal mir mal ein Bild von einem, von einer Eggplant, ja?
Mhm.
Ähm, also Auberjine.
Ja.
Aber es war halt eine Blume, die als, die als Blüte entspiegelt hat.
Mit Eiern? Ach was?
Okay.
Ich weiß nicht, ob es Fake war, ich fand's, ich fand's sehr, sehr gut.
Ähm, genau, also ich, ich hab da, ich hab da bis um halb, also wenn man, wenn man, wenn man ChatGPT, wenn man sich da mal verquatscht sozusagen, das ist wirklich, ich hab mich da gefühlt wie in früheren, alten, äh, Chatzeiten.
Ja.
Ich hab da wirklich bis um halb fünf da gesessen und versucht, dem Ding das beizubringen, hab nebenher noch diesen Blogartikel geschrieben, weil bei längerem Code, ähm, da braucht es dann auch manchmal ein bisschen.
Und dann gibt's nur die Hälfte aus und sagt, ah ja, hier ist übrigens der übrige Code, der hat sich nicht geändert. Und ich sag, naja, oh Mann, gib mir doch bitte den kompletten Code.
Also wer, wer die, wer die Konversation nachlesen will, da kann man das alles drin sehen.
Ähm, hat aber am Ende erstaunlich gut geklappt.
Ja, ich find's echt, echt erstaunlich, ja. Also auch mit der Beschleunigung und dass man,
ne, so Sachen nochmal zurückschieben kann, ne, also wenn du wartest, bis es auf der Höhe ist und dann schiebst du es nochmal nach links und so.
Dass das geklappt hat, hat mich auch gewundert, dass das geht.
Ähm, er hat mir auch am Anfang nur bestimmte Teile, ähm, eingebaut, gar nicht alle, die es bei Tetris gibt.
Und ich musste ihm zweimal sagen, mach doch mal bitte alle Teile, die es bei Tetris gibt. Ach, was gibt's denn noch? Ah ja, okay, gut, mach mal das.
Und dann hat er aber auch gewusst, was noch fehlt tatsächlich.
Okay.
Also hat gesagt, ah ja, stimmt, ähm, ich hab jetzt momentan nur das, äh, das T-Teil.
Äh, du kriegst jetzt auch noch das lange, also das ist, und, ah, und da hat er auch Namen dafür dann sich, äh, gefunden, die es offenbar gibt im Netz.
Also sowas wie das S-Teil und das Z-Teil und das L-Teil, äh, es ist, äh, ja, also man kann es eigentlich ganz gut spielen, muss ich sagen.
Ja, wirklich, also, wenn man dreht, wenn man dreht, wenn man dreht, verhält es sich ein bisschen anders als das originale Tetris, weil es sich dann manchmal in eine Richtung dreht, statt dass es an der gleichen Stelle bleibt.
Okay.
Ähm, es sind so kleine Details, aber es funktioniert erstaunlich gut und ich find's, ja, ganz witzig. Ich hab auch so ein Scoreboard noch mit eingebaut, das in Local Storage schreibt, beziehungsweise ChatGBT hat das gemacht, ähm, für mich.
Äh, genau. Der Score ist leider auch ein bisschen doof, also du kriegst nicht mehr Punkte, wenn du jetzt zum Beispiel vier Lines, äh, clearst.
Du kriegst dann einfach, als hättest du vier einzelne, du kriegst keinen Bonus oder so.
Okay.
Kann man aber alles noch einbauen, ne? Also.
Ja, klar.
Und der Code, den könnt ihr euch, äh, einfach angucken, der ist, äh, ja, genau, könnt ihr euch, also, verlinkt ist es in meinem Blogartikel, schaut's euch an, ist ziemlich viel Code geworden, sind irgendwie ein paar hundert Teilen.
Das hat sich dann schnell, ne?
Ja, ja. Und, äh, vor allem, also, Spiellogik ist gar nicht so einfach. Also, da, da passiert, da passiert was.
Ähm, und ich fand's auch interessant, also, ich fand, falls es euch interessiert, der Code, guckt euch mal an, wie es zum Beispiel, ähm, definiert, wie die einzelnen, ähm, Steine aussehen, die es da gibt, nenn ich das jetzt mal, diese einzelnen Teile, was für eine Form die haben.
Das ist ganz interessant, ähm, sich anzugucken.
Spoile ich jetzt nicht, guckt's euch einfach mal alle im JavaScript von, äh, von dem Spiel und, ja.
Dann vielleicht ist auch genug mit dem AI-Loch, in das ich gefallen bin.
Das Ergebnis war ein Blogpost, den ich immer geschrieben hab, während ich gewartet hab, dass der Code, äh, rauskommt von ChatGPT, ähm, und eben das Spiel, das ihr einfach mal ausprobieren könnt.
Und in dem Blogpost geh ich auch noch so ein bisschen drauf ein, ähm, die Nutzung von AI und so, da hab ich mir nämlich währenddessen auch noch so ein bisschen Gedanken drüber gemacht, ist das eine gute Idee, dass es sowas gibt, ähm, und so weiter.
Ich find's nämlich, es ist kein so, es ist kein so einfach zu wackerndes Thema, ehrlich gesagt, diese ganze AI-Sache.
Aber sehr witzig, also, ich bin echt begeistert, dass das überhaupt, was Funktionierendes rausgehauen hat am Schluss.
Ganz witzig ist, und das hab ich auch immer im Blogartikel noch geschrieben, ähm, ganz am Anfang ging es nicht eine Weile.
Und ich hab dann so gesagt, ja, Mensch, ähm, du, das geht nicht.
Doch, doch, das geht.
Du, das geht nicht, doch, doch, ey, das sollte eigentlich schon gehen.
Und ich so, bist du dir sicher, dass das geht?
Ja, ja.
Und dann hab ich den Code geguckt und hab gesehen, das hat alle, aus welchem Grund auch immer, alle Checkboxen auf Display None gesetzt.
Hä? Okay.
Und dann, und dann hab ich gesagt, du, ähm, wenn ich jetzt ein menschlicher Spieler bin, du hast jetzt das auf Display None gesetzt, wenn ich jetzt ein menschlicher Spieler bin, wie soll ich denn jetzt das spielen, wenn ich nix sehe?
Ah, ja, okay, gut.
Und dann, es las sich so ein bisschen wie, naja, so ein dummer Mensch sitzt da jetzt gerade.
Ich als Computer hab natürlich vollkommen verstanden, dass das die ganze Zeit funktioniert.
Ach, wenn der es sehen muss, na gut, dann muss er, dann sieht er es halt.
Aber na gut, wenn es sein muss.
Diese blöden Menschen.
Diese blöden Menschen, unglaublich, ja, ja.
Okay.
Okay, Mensch, jetzt haben wir uns aber nochmal verquatscht, ne?
Oh, ja.
Das passiert uns doch sonst nie.
Nee, Mensch, das, also, komm, weiter geht's.
Aber dafür haben wir keine Property.
Wir haben keine Property, weil wir machen dafür nur Attribute heute, fast.
Nein, nur Attribute heute.
Ihr wisst doch, ihr wisst doch gar nicht, worum es geht, gell?
Nee, deswegen machen wir jetzt erstmal den Jingle ab.
Okay.
Hier ist WWS IV mit dem Tagesthema.
Okay, dann machen wir die Werbung hinterher.
Zack, voll über den Mund gefahren.
Ach, stimmt, ja, die machen wir dann jetzt vorm Ende.
Die Werbung, unsere Sendungsnotizen, behaupte ich, sind die längsten Sendungsnotizen, die wir jemals hatten,
abgesehen von den Fragen an die Gäste.
Die waren immer lang, aber das ist wirklich, äh...
So, um was geht's heute?
Die Mutter aller HTML-Elemente, hab ich's vorhin genannt.
Genau, und der Titel der Folge, heute haben wir den mal schon, äh, schon vorher festgelegt.
A-Tag to rule them all.
Aha.
Das ist nicht nur A-Tag im Sinne von ein Tag, sondern das, das A-Tag.
Es geht um, um Links.
Und, äh, Links machen ja eigentlich das Web erst zum Web, ne?
Also, das, das, das, dieses Verlinken auf andere Dokumente, das, das bildet ja das Netz.
Und dementsprechend wäre das, das Netz ohne, ohne Links auch nicht das, was es heute ist.
Wäre schwierig, wenn man den Sinn verlinken könnte.
Und, äh, deswegen, also es ist, da muss man vielleicht auch nur dazu sagen, die Fortsetzung unserer HTML von A bis ZZ-Reihe.
Und wir haben heute gesagt, wir machen nur dieses eine Tag, weil es darüber so unglaublich viel zu erzählen gibt, dass wir nicht noch andere Dinge reinpacken.
Und nachdem wir jetzt schon eine halbe Stunde retro gemacht haben, war das echt eine gute Entscheidung.
Wir können's ja, wir können's ja nochmal kurz, ich kann's nochmal kurz aufgreifen, was du vorhin, was du vorhin noch gesagt hast, äh, bevor wir aufgenommen haben.
Ähm, meinte so, ah ja, was, wie, äh, ich, ich hab, ich hatte mir halt die Doku schon angeschaut und meinte, du, ich glaub, wir machen heute nur, nur ein Tag.
Wirklich, es, es geht nicht, es geht nicht mehr.
Und das, ja, wach, was, was, nur eins, es kann doch gar nicht so viel sein.
MDN aufgemacht, so, ups, okay, da gibt's schon einiges sozusagen.
Ähm, genau, also, vielleicht noch, äh, warum, dass, äh, noch so, äh, für die, die's nicht wissen, ähm, es geht um das Tag, das einfach nur A heißt.
Und, äh, das heißt Anchor, also Anchor, ne?
Mhm.
Ähm, ähm, das muss man vielleicht noch dazu sagen, ähm, und das ist bekannt als der Link.
Es gibt auch ein Link-Tag, das tut aber was völlig anderes, das hatten wir auch schon.
Ja.
In einer, in einer anderen Folge.
Ähm, genau, aber das, das Link-Tag ist was anderes, das A ist das, wo man draufklickt, ähm, und dann komm ich irgendwo hin.
Und dann, oder es passiert was, es gibt auch tatsächlich Fälle, in denen erlaubt ist, dass was passiert und ich nirgendswohin komme.
Ähm, dazu kommen wir aber später noch.
Genau, und das ist eins der, der ältesten HTML-Elemente auch, ne?
Weil's halt eben so die Basis ist, ähm, ich, es gäbe ja einfach sonst kein Internet, weil selbst wenn ich bei Google was suche,
dann komm ich ja nur auf die Ergebnisse, weil ich da wo draufklick und dann da hingeleitet werde.
Also, es ist, ne, einzelne Dokumente, die müsste man ja sonst irgendwie indexieren.
Und, äh, deswegen ist das so das, das Rückgrat des, äh,
Webs eigentlich, ne?
Ich muss gerade mal gucken, es wäre vielleicht, das haben wir tatsächlich, oder das hab ich nicht recherchiert.
Ähm, das müsste Bestandteil der ersten HTML-Spezifikation schon gewesen sein.
Ja.
Ähm, weil das ja eigentlich, also, äh, das Web kommt ja so aus der Richtung, Wissenschaftler wollen, ähm, Abhandlungen schreiben und Querverweise machen.
Das war ja, glaub ich, so die ursprüngliche Idee.
Und, ähm, ich hab ich sie ja, ja, also, äh, Jens Meiert, falls du zuhörst, du weißt es bestimmt, schreib es doch mal in die Kommentare.
Ähm, ich weiß, dass du so Sachen weißt.
Ähm, aus welchem, als bestimmt HTML 1.0, äh, muss das schon drin gewesen sein?
Ähm, weil das ist ja quasi, wie, wie Konstantin schon gesagt hat, ähm, das macht das Web dabei, weil wir hatten ja schon mal drauf verlinkt auf die allererste, äh, HTML-Seite, die es gab.
Ich pack den Link nochmal hier in die Shownotes rein.
Ja, bitte.
Zack.
So, ähm, ich hab auch ...
Und da sieht man auch schon drin, da sind auch Links drin.
Ne, also, das war ...
Genau.
Ist genau das.
Äh, ist auch die Info.zern.ch, wo ja das Internet erfunden wurde.
Und das ist das erste LML ...
Achtung, das World Wide Web.
Da, da, da kriegen wir sonst Ärger von den schlauen ZuhörerInnen.
Es geht um das World Wide Web, das da erfunden wurde, das Internet, das gab es vorher.
Ach so, ja, gut, ja, ja, ja, ja.
Für die, die das ganz genau nehmen, wir wissen das auch übrigens.
Auch wenn wir nicht immer so schlau sind bei allen Sachen, das wissen wir.
Das ist was, womit man auch auf Partys, ähm, sich unbeliebt machen und, äh, angeben kann.
Wenn man sagt, was, Internet?
Meinst du das World Wide Web?
Oder umgekehrt, je nachdem.
Also, schlag mal nach, was, was genau ist.
Und dann, äh, damit kann man schön angeben und sich unbeliebt machen.
Ähm, genau.
Ich habe zu dem ganzen Thema auch eine Demo gebaut, äh, die ich vielleicht immer mal wieder jetzt hier referenzieren werde.
Die kommt auch in die Shownotes.
Das ist was, äh, einfach, das hab ich auch jetzt ...
Ich mach sowas auch immer für mich, um noch mal, ähm, zu verstehen, wie Sachen eigentlich funktionieren, weil man nicht immer alles im Kopf hat.
Ähm, und jetzt könnte man sagen, ja, links ist doch ganz einfach, ähm, das ist doch irgendwie so ein A-Element und das hat so ein H-Ref oder H-Ref.
Äh, äh, Hyper, Hypertext? Hyperreference? Hypertextreference? Ich weiß gar nicht genau.
Ähm, ist, ist das, äh, Attribut. Ähm, und da schreibst du halt, äh, die, den Pfad zu einer anderen Seite rein und damit hat sich die Sache doch erledigt. Das war's doch, Konstantin. Oder?
Ja, fertig.
Fertig.
So, damit kommen wir zum Ende.
Fertig.
Warte, End-Dschingel? Nein, Spaß.
Schön wär's, ja.
Wenn dem so wäre, dann hätten wir nicht, wie vorhin schon gesagt, die längsten Sendungsnotizen, ähm, die wir bisher, ähm, also ich würde jetzt, ja, ihr kennt unsere Sendungsnotizen nicht. Ich behaupte einfach mal, dass dem so ist. Äh, wir haben sie auch diesmal gemeinsam angefertigt. Manchmal haben wir es schon getrennt gemacht, dass jeder seinen eigenen Bereich hat und der andere durfte nicht reingucken.
Äh, diesmal haben wir es so ein bisschen gemeinsam gemacht und, ähm, dann, äh, hangeln wir uns doch jetzt mal so langsam durch, was das A-Element so alles kann und was es so für Attribute hat.
Genau, also wir hangeln uns durch die einzelnen Attribute und dann hast du nachher noch so ein paar Zusätze. Aber jetzt machen wir erstmal die Attribute durch.
Ich, also später vielleicht, vielleicht ganz kurz so, als Table of Contents, ähm, wir gehen die Attribute durch, ähm, und dann am Ende spreche ich noch ein bisschen über Styling und auch über Barrierefreiheit.
Äh, also, weil das halt auch sehr miteinander zu tun, viel miteinander zu tun hat. Also, es soll halt schon in erster Linie darum gehen, wie funktioniert es und was kann man damit machen, so effektiv, aber auch am Ende noch so ein bisschen.
Ähm, was soll man nicht damit machen und, ähm, wie sollte es denn möglichst, möglichst aussehen? Also auch nicht nur jetzt hard HTML, sondern auch noch so ein bisschen, äh, geht noch so ein bisschen.
CSS streifen wir auch noch so ein bisschen, äh, vereinzelt. Genau, also wir beginnen mal mit dem Download, äh, Attribut in der alphabetischen Reihenfolge und das kann ich setzen, um dem Browser zu sagen, äh, diese Datei, die da verlinkt ist, die soll nicht angezeigt werden, die soll runtergeladen werden.
Und entweder setze ich einfach nur das Download-Attribut leer oder ich gebe einen Dateinamen da drin an und das war was, wo wir beide kurz drüber gestolpert sind, weil wir dachten, es gibt ein File-Name, äh, Attribut zusätzlich, aber den File-Name, den gibt man im Download-Attribut, äh, mit an.
Oder man lässt ihn eben weg, dann wird der Dateiname übernommen, der in dem, in dem Harf mit drin ist oder der Browser kümmert sich selber drum, weil ich kann ja zum Beispiel auch eine Blob-URL, äh, benutzen, statt tatsächlich eine Datei zu referenzieren.
Und alle, ja?
Mach, mach weiter.
Und alle, äh, JavaScript-Lösungen, die es so gibt mit, äh, hier droppt diese kleine paar KB-Datei rein und dann kannst du irgendwie Dateien runterladen lassen, die basieren intern darauf, dass ein Link erstellt wird mit Download-Attribut, ähm, und da drin dann,
dann eine Blob-URL landet und die dann mit einem emulierten Klick, äh, wird dieser Download dann ausgelöst.
Ähm.
Dazu gibt's noch ein interessantes Detail, worüber ich gestolpert bin in der Spec, nämlich wenn man in, warum auch immer man das tun sollte, in diesen, äh, neuen Download-Namen ein Slash oder ein Backslash reinpackt, was zu Problemen führen kann, äh, konvertiert der Browser das zu einem Underscore, beide Zeichen.
Genau, weil sonst ist ja ein, äh, Directory-Separator.
Und dann, äh, ne, würdest du einen Ordner anlegen, das willst du ja nicht haben.
Aber ich, ich wüsste zwar nicht, wieso man das tun sollte, aber die HTML-Specs, die gehen ja oft sehr, die versuchen alles, äh, auszumerzen.
Naja, es könnte ja jemand machen und dann würdest du auf fremden Computern irgendwelche Ordner erstellen. Das wär, wär ja nicht so.
Fand ich, äh, fand ich ein spannendes Detail.
Ja, und die Browser fiel dann, glaub ich, auch noch je nach System, worauf sie laufen, auch noch andere Zeichen raus, die halt nicht erlaubt sind in der Teilnahme.
Ich hab mich grade noch gefragt, ob wir noch so generell, äh, bevor wir jetzt noch weiter tiefer in die Attribute einsteigen, ob wir noch generell was sagen sollen, was, äh, weil das eigentliche Attribut ist ja href und da drin können ja auch schon unterschiedliche Dinge passieren.
Ähm, ich weiß nicht, ob du das jetzt später in den Notizen noch hattest.
Ja, das kommt ja als nächstes tatsächlich schon, das href-Attribut, dann lass uns das doch gleich machen.
Ach so, okay, ja, dann, äh, ja, ich hab gerade…
Wenn es jetzt am Ende erst gekommen wäre, hätte man es vielleicht vorziehen können, weil es wirklich so das, äh, das Attribut schlechthin ist, aber wir können eigentlich alphabetisch vorgehen, weil das kommt als nächstes schon.
Vielleicht noch ein Detail, zumindest, ich hab das nicht überprüft, muss ich dazu sagen, ich hab das in der, in der Spec gelesen, ähm, das Download-Attribut, also der Download, der funktioniert nur auf Same Origin.
Das heißt, ich kann jetzt nicht, wenn ich Download mache, irgendwelche anderen Dateien runterladen von anderen Webseiten.
Geprüft hab ich's nicht, ob es geht.
Hab ich auch nicht, nee.
Aber das, das stand, das stand auf jeden Fall da.
Gut, und dann kommen wir jetzt zu dem eben erwähnten, href, magst du, äh, das angehen, weil da bist du, glaub ich, auch ein bisschen mehr in die Tiefe gegangen als ich.
Ähm, ja, also, es ist halt eine, dazu hab ich auch ganz, äh, oder einige, einige, ähm, Demos gebaut auf der Demoseite, ähm, damit man mal sieht, was es denn alles so für Links gibt.
Da sind noch ganz viele andere Sachen dabei. Ähm, also im href-Attribut, da kann ich natürlich einen Link intern, äh, auf der Seite machen, irgendwie mit Slash, oder das hat, ich muss auch gar kein Slash irgendwie reinschreiben ins href-Attribut.
Ich kann einfach den anderen, kann einfach eine andere HTML-Seite, wenn sie im selben Pfad liegt, ähm, referenzieren.
Genau, wenn du einen Slash nämlich davor setzen würdest, würdest du das, äh, Document-Root nehmen, also, äh, nur die Domain und den Port und dann direkt da hinten dran anhängen.
Was manchmal auch nicht ganz unpraktisch ist, weil du dann direkt, ne, wenn du irgendwie außerhalb, also du hast einen Unterordner und da liegt irgendwie die, die Web-App drin oder so,
Und du willst aber wirklich verlinken auf, auf was, was auf der Domain selbst liegt, ne, dann einfach Slash davor.
Ähm, und was auch noch wichtig ist, das haben wir in Folge 50, äh, bei den, bei Back-to-the-Root, bei dem Root-Element und den ganzen Meta-Elementen im Header angesprochen.
Das ist das Base-Tag und das hat halt Auswirkungen auf die relativen Links, ne.
Wenn ich da ein Base setze, dann geht's eben nicht von dem Web-Root aus, sondern eben von diesem Base, was ich da angegeben habe.
Genau, also der einfachste Fall wäre quasi, ich hab, bin zum Beispiel in einer Datei, die heißt index.html und ich gehe auf eine Datei, die direkt, eine HTML-Datei, die direkt im gleichen Ordner liegt
und die heißt zum Beispiel, keine Ahnung, ähm, about.html und dann schreibe ich einfach about.html in das href-Attribut rein und dann kann ich, dann ist der Link gültig, so.
Ähm, man kann auch auf externe Seiten verlinken, da wird's natürlich dann eigentlich noch viel interessanter, also ich meine, äh, ja, ich kann auch wo ganz anders hin linken,
das heißt, ich kann jetzt zum Beispiel von, äh, wo wir sind, ist vorne.show auf moritzgießmann.de verlinken, ähm, da muss ich aber allerdings noch mehr, noch mehr Sachen angeben, also ich muss den, eigentlich den kompletten Pfad mit HTTP angeben, mit HTTP.
Genau, das Protokoll, Domain, Eventualport und eben den Pfad zur Datei.
Genau, manche Seiten brauchen noch so ein komisches WWW, obwohl sich das mittlerweile zum Glück weitestgehend abschafft, ähm, genau.
Dann, dann kann ich zu einer externen Seite linken.
Was auch geht, ist, dass ich innerhalb der, oder, hm, egal ob extern oder intern oder innerhalb derselben Seite oder innerhalb derselben Page, ist jetzt ein bisschen wild,
man kann auch auf bestimmte Bereiche verlinken mit einem Ankerlink, mit einem sogenannten.
Ähm, das heißt, ich, wenn ich jetzt, das einfachste Beispiel ist, ich habe einen Bereich auf derselben Seite, auf der ich gerade bin,
den ich mit einer ID in HTML markiert habe, also, ähm, zum Beispiel, ähm, die ID Anker oder die ID Konstantin oder was auch immer.
Es gibt irgendein Element mit einer, mit einer ID und einem Namen und dann schreibe ich in das href Attribut Raute und dann den Ankernamen.
Und dann springe ich dahin, dann ist das quasi ein Seiteninterner Link.
Das kann ich aber auch mit anderen Seiten machen.
Ich kann also auch alles, ich kann zum Beispiel die, wenn ich jetzt, äh, wie ich vorhin gesagt habe, ähm, die, die interne Seite, irgendeine andere HTML-Seite im gleichen Pfad mit Raute hinten dran,
hinter, hinter den, äh, hinter den, äh, Pfad, also hinter, hinter den Dateinamen, Raute hinten dran und, ähm, dann, äh, den ID-Namen.
Dann springe ich tatsächlich auf diese Seite und direkt zu diesem, äh, Punkt.
Das kann ich aber auch mit externen Links machen, das ist eigentlich egal, es geht überall.
Voraussetzung ist natürlich auch, dass auf der Zielseite es ein Element mit dieser ID gibt.
Ich möchte, möchte noch kurz einschieben, äh, falls sich der oder die eine oder andere wundert, ähm, das, was wir bisher gesagt haben, dürfte den meisten bekannt sein.
Also, das ist ja wirklich so die, die Basis des Webs.
Aber wir sind für alle da, auch für komplette Neulinge, Quereinsteiger.
Deswegen gehen wir das wirklich in, in dem Detail und auf der Ebene durch.
Aber es kommt auch gleich noch, bevor hier das Knöpfchen gedrückt wird, um das Attribut zu überspringen, es kommt gleich noch was.
Das, äh, hatte ich in der Form schon mal irgendwo gesehen, aber mich noch nie so damit beschäftigt und das ist ziemlich, ziemlich krass.
Also, vielleicht dranbleiben.
Vielleicht, vielleicht dranbleiben.
Aber ich glaube, jetzt kommt tatsächlich noch was, äh, bei der Doku, das hast du rein, bin ich jetzt, äh...
Zum, zum Href, genau, ja.
Genau.
Soll ich dann mal weitermachen?
Ja, machen wir weiter.
Das ist nämlich genau das, was ich meinte, Textfragments.
Ähm, dass ich einer Seite mitgeben kann, dass nach einem bestimmten Text gesucht wurde, der gehighlighted werden soll.
Ach.
Ja, ach, war für dich, äh, auch neu.
Okay.
Das wusste ich auch nicht.
Und zwar, ich hab das schon gesehen teilweise bei Suchen, jetzt nicht bei Google, ich weiß gar nicht, ob Google das, ähm, macht.
Ich glaube nicht.
Aber bei anderen Seiten, da suchst du was und auf der Seite selbst, auf der Zielseite wird dann tatsächlich Text hervorgerufen.
Und das ist eine ganz krasse Syntax, also das ist auch so ein, wie ein Sprunglink, also mit dem, mit dem Hash, mit der Raute, äh, getrennt.
Und dann die Syntax Doppelpunkt, Tilde, das ist dieses geschweifte Ding, was es im Spanischen über dem N gibt.
Ähm, und nochmal Doppelpunkt.
Und dann kann ich da verschiedene Parameter wieder angeben, also Text ist gleich und dann eine Zeichenkette, Komma getrennt, ein Prefix, ein Text Start und optional Text End und ein Suffix.
Und was ich, ja, was ich da machen kann, also was ich damit sage ist, hebe diesen Text auf der Seite hervor und zwar, äh, Prefix sagt eben, gibt den Text an, der davor ist, bevor die Markierung startet.
Text Start ist der Anfang des Textes, Text End, das Optionale, dann eben der Ende, das Ende des Textes und ein Suffix, das nicht mehr mit in der Markierung drin ist, was aber halt eben auch matcht.
Und, ähm, damit kann ich halt eben, also ich wüsste jetzt nicht, was man das sonst brauchen würde, aber halt eben für Suchergebnisse, wo ich dann draufklicke und genau an die Textstelle komme und die auch noch hervorgerufen wird, nach dem, was ich zum Beispiel gerade gesucht habe.
Ähm, oder ich möchte jemandem was highlighten und schicke ihm dann den Link entsprechend.
Und, angeblich scrollen die Browser dann auch an die entsprechende Stelle gleich hin.
Ich habe das vorhin mobil getestet, da hat es nicht funktioniert, es hat zwar diese Hervorhebung gemacht, das ist dann in, in Chrome ist das so pink hervorgehoben, ähm, aber es hat nicht hingescrollt.
Weiß nicht, woran es jetzt lag, ob das nur mobil ist, äh, Desktop habe ich jetzt gar nicht getestet.
Genau, aber das ist schon sehr advanced, also ich, ich wusste, dass es sowas gibt, ich habe diese Syntax schon mal gesehen, ich dachte nur, das wäre dann irgendwie so eine, äh, selbst gebastelte JavaScript-Lösung, aber dass das wirklich nativ in den Browsern unterstützt wird.
Äh, nicht in allen, aber, ähm, wir können auch mal gucken, hier bei Can I Use Fragment Directive, also Safari und Firefox unterstützen es nicht, aber die ganzen Chromium-Browser machen das.
Und der Samsung-Internet, äh, weiß ich gar nicht, auf was basiert der denn eigentlich?
Ist das auch, äh, Chromium?
Jedenfalls kann der das auch, sogar Opera Mobile kann das.
Ja, es ist, ja, es ist, ja, das Samsung-Internet, ach, wer benutzt eigentlich, wahrscheinlich viel mehr Leute, als man denkt.
Als man so denkt, ja, richtig.
Ähm, ja, ich habe auch, bis ich ein iPhone benutzt habe, nicht gedacht, dass viele Leute den Safari benutzen und dann, naja, jetzt nutze ich ihn auch und man denkt gar nicht mehr drüber nach.
Also noch, äh, noch ein paar Anmerkungen, ähm, steht auch hier auf der MDN-Seite, am besten guckt man sich das wirklich mal auf der MDN-Seite an, die wir natürlich verlinken,
weil es, äh, doch vom Hören her vielleicht ein bisschen schwer zu verstehen ist.
Also wichtig ist, dass die einzelnen Texte, äh, mit Prozent encoded werden, ja, also Lehrzeichen ist dann Prozent 20, ähm, das Komma muss encoded werden,
weil ja eben Text-Star, Text-and-Prefix und Suffix mit Kommas getrennt werden, oder Kommata getrennt werden.
Ähm, die Matches sind Case-Insensitive und, äh, genau, also es greift zum Beispiel nicht in I-Frames, äh, das gibt halt so ein paar, ähm,
Einschränkungen dabei.
Ich glaube, ich brauche das für meinen Blog, weil mein Blog hat so eine, äh, so eine Funktion mit drin,
dass, ähm, automatische Überschriften so einen Ankerlink nebendran kriegen, den man, den man dann klicken kann mit so einem Hash,
das hast du vielleicht auf bestimmten Seiten schon mal gesehen, das war da automatisch mit dabei.
Das könnte man dadurch eigentlich ersetzen und dass man den, dass man diesen Mechanismus gar nicht mehr braucht und diesen extra,
beziehungsweise, dass der dann quasi auf das Textfragment automatisch verlinkt.
Ja.
Hm.
Und auf der, auf der MN-Seite sind auch verschiedenste Beispiele, ähm, dann auf example.com kennt man ja diese Beispielseite vielleicht,
wo da einfach nur ein kleiner Text steht, ähm, das Wörtchen for Highlighter zum Beispiel.
Und dann halt auch Beispiele mit Textstart und Textend, Prefix, Suffix und so weiter.
Und man kann wohl auch mehrere, äh, hintereinanderhängen, mehrere.
Funktioniert das auch?
Ja.
Also du kannst mal auf die MN-Seite, wenn du wie gesagt nicht mit Safari drauf bist, sondern Chrome,
kannst du unten bei Examples mal gucken, auf die Texte draufklicken und dann, äh, siehst du das Highlighted.
Also auch auf Desktop springt es bei mir aber nicht dahin.
Sehe ich jetzt gerade.
Also das Springen, das funktioniert nicht, das macht wahrscheinlich auch wieder jeder Client irgendwie.
anders, ähm, aber das Markieren funktioniert.
Also bei mir wird, ähm, bin ich mir nicht so sicher, ob es markiert.
Also wenn du auf den ersten Text mal example.com und Text for, da ist bei mir, das steht ja,
this domain is for use in bla bla bla.
Und da ist das for bei mir markiert.
Nee, funktioniert bei dir nicht?
Bei mir tatsächlich, bei mir tatsächlich nicht, nee.
Dann funktioniert das vielleicht auf Mac OS nicht, aber es steht hier bei can I use nicht dabei,
warum das ist irgendwie.
Interesting.
Ja, das muss ich mir auf jeden Fall, das ist, das sieht super mächtig aus.
Das muss ich mir unbedingt mal angucken, äh, im Nachgang.
Ja.
Ich habe jetzt gerade festgestellt, dass, äh, noch verschiedene Sachen haben, die da mit
reinkommen, die ich aber woanders in unserer Sendungstitzen hatte.
Deswegen habe ich die jetzt gerade mal noch verschoben, also nicht wundern.
Ähm.
Okay.
Äh, noch eine Sache zu dem, äh, zu der, äh, Markierung.
Die lässt sich auch mit einem CSS-Pseudo-Element entsprechend stylen.
Doppelpunkt, Doppelpunkt, Target minus Text ist das.
Und damit kann man dann dem Ganzen noch einen anderen Style als diesen Standard-Style verpassen.
Was man, okay, da muss ich dann vielleicht jetzt gerade noch kurz ergänzen.
Ähm, man kann auch, es gibt auch den Target, äh, Pseudo-Selektor.
Ist das ein Pseudo-Selektor?
Ja, so ein Pseudo-Selektor.
Ähm, mit dem man das Element markieren kann oder damit mit dem Element Dinge tun kann, ähm,
das per ID verlinkt ist, wenn ich auf dem Target dann lande, also auf dem, was hinter, was hinter dem, was hinter der Raute steht.
Das heißt, ich kann zum Beispiel was, was ganz Naives machen, wie wenn ich jetzt eine Überschrift,
wenn jetzt eine Überschrift die ID hat, dann kann ich die zum Beispiel farbig hinterlegen, sobald ich sie anspringe.
Ähm, damit ich dann auch sehe, das ist jetzt der Bereich.
Damit kann man aber auch noch ganz andere, äh, interessante Sachen machen.
Also nur Target, nicht Target Text, sondern einfach nur Target.
Äh, lohnt sich auch mal anzuschauen, kann man viele interessante Geschichten damit machen.
Okay, ähm, was ich jetzt bei der Recherche auch noch rausgefunden habe, was ich auch nicht kannte vorher, waren Media Fragments.
Und es ist jetzt nicht so richtig klar, ob die denn jetzt funktionieren und wenn, wenn überhaupt wo und wie.
Aber, ähm, da gab es zum Beispiel die Idee, dass man, ähm, an einen Link, äh, zum Beispiel, wenn es ein Link auf ein Video ist, ein Timestamp mit dranhängt.
Also zum Beispiel, äh, in dem Fall, gut, da, auf, also, es gibt ein Beispiel auf, äh, web.dev, da ist es das Source, äh, da ist es das Source-Element mit einem Source-Attribut, aber das ist nämlich, glaube ich, egal, das müsste man auch im A-Element verwenden können, rein theoretisch.
Das heißt, ich habe hier, äh, das Video, äh, Chrome.web.m, äh, Raute t minus, äh, t ist gleich 5,10.
Also ich nehme mal an, dass das Minuten und Sekunden sind, ähm, ähm, aber warte mal, Hours, Minutes and Seconds, genau.
Also man könnte auch 0,0, Doppelpunkt, 0,1, Doppelpunkt, 0,5, das wäre dann bei, äh, Minute 1 und 5 Sekunden.
So, also das ist, dass man quasi einen standardisierten Weg hat, wie man, äh, bei, ähm, Medien direkt an einen bestimmten Timestamp springt.
Bei YouTube gibt es das ja zum Beispiel, äh, da kann man das machen, man kann Links verschicken, aber ich glaube nicht, dass das ein Webstandard ist, ähm, und, äh, ich kenne das auch von media.ccc.de, also die Vorträge vom Chaos Computer Club oder die Videos vom Chaos Computer Club, ähm, da kriege ich auch in der URL immer angezeigt, ähm, an welcher, äh, an welchem Timestamp man gerade ist, aber ich glaube, das ist ein anderer Standard.
Ich kann jetzt keine Aussage darüber treffen, ob das wirklich funktioniert.
Nee, ich habe es mal ausprobiert, bei mir hat es in Chrome nicht funktioniert.
Ich habe Artikel dazu gefunden, dass das war mal so eine Idee, aber irgendwie wurde das nicht umgesetzt, sei an der Stelle mal erwähnt, also mit, mit Grain of Salt genießen, aber ich fand die Idee gut, es gehört zu den Fragments dazu, also quasi tatsächlich standardisierte Fragments für bestimmte Medientypen, wenn ich darauf verlinke, was ich eine interessante Sache finde.
Also man, man könnte dadurch halt zum Beispiel auch, äh, Daten sparen, die übertragen werden, wenn ich weiß, ich brauche bei dem Video sowieso nur den Ausschnitt von da bis da, ähm, Voraussetzung ist halt, dass der Server auch das, äh, den, den Range-Header,
auch unterstützt. Ganz genau.
Ja, und, äh, weil dann halt im Server gesagt wird, liefern nur diesen Teil von dieser Mediendatei überhaupt aus.
Da stolpert ihr, da stolpert ihr definitiv drüber, wenn ihr mal eine Webseite baut, in der ihr ein Video mit dem Video-Tag einbindet und dann, ähm, in dem Video hin und irgendwo hinspringen wollt, an eine bestimmte Stelle und merkt, oh, das geht ja gar nicht.
Ähm, dann, äh, dann, äh, dann muss euer Server noch konfiguriert werden, dass er Range-Requests akzeptiert.
Da stolpert man irgendwann mal drüber, wenn man mit Videos zu tun hat, weil das möchte man ja dann schon doch, dass das geht.
Ähm, genau. Ich hab jetzt hier die Notizen geschrieben, ich mach dann gleich auch noch die anderen Protokolle.
Ich hab's gesehen, ja.
Ja, ich dachte mir schon, dass das eigentlich da hin muss. Ich dachte, du hast halt der Einfachkeit halber das nur unten angefügt.
Nee, ich hatte das, ich hatte das tatsächlich, ich hab nicht, ich hab vorher in unseren Sendungsnotizen, wir sind hier komplett transparent, es wird auch nichts rausgeschnitten, zum Leidwesen von euch.
Ihr müsst euch den ganzen Käse jetzt anhören.
Ähm, hatte ich nicht auf dem Schirm, dass wir das href-Attribut tatsächlich als eigenes Attribut hinterlegt hatten.
Das hab ich nicht gesehen, dass der Konstantin das passenderweise gemacht hat.
Und, ähm, deswegen hatte ich das unten irgendwo angefügt mit den weiteren Protokollen.
Ähm, genau.
Also, auch in meiner Demo hab ich nämlich angefangen, ähm, was man nämlich auch machen kann, ist, in dem href-Attribut kann man nicht nur auf Seiten verlinken, sondern man kann auch andere Protokolle angeben.
Also, nicht nur HTTP, was das Standardprotokoll ist, ähm, sondern ich kann zum Beispiel auch eine E-Mail, eine E-Mail-Adresse hinterlegen und, ähm, wenn der Browser und das Betriebssystem entsprechend konfiguriert sind und standardmäßig sollte das eigentlich überall so sein, wenn man ein E-Mail-Programm hat, ich glaube sogar, nee, das kommen wir später noch zu, das geht auch, es können auch Webseiten, äh, können auch Protokolle, äh, registrieren, hab ich rausgefunden.
Ähm, also, wie funktioniert das?
Wie kann ich, wie kann ich auf eine E-Mail-Adresse verlinken?
Das ist auch eher Basiswissen, aber ich behaupte, ich, vielleicht ist was dabei, was auch noch nicht alle jetzt wissen.
Also, ganz einfach ist es, ich schreibe, äh, als Protokoll rein in das href-Attribut mailto als ein Wort, klein geschrieben, Doppelpunkt und dann die E-Mail-Adresse.
Das ist so die, die einfachste Variante.
Dann geht, falls ich in dem Betriebssystem, in dem ich mich befinde, ein Standard-E-Mail-Programm definiert habe, geht das E-Mail-Programm auf, äh, mit einer Mail, die an diese Mail-Adresse adressiert ist, die ich da hinterlegt habe.
Man kann auch mehrere EmpfängerInnen definieren.
Das macht man dann, indem man, ähm, Kommas dazwischen packt zwischen die einzelnen E-Mail-Adressen.
Ganz einfach, so.
Das klingt jetzt noch simpel.
Jetzt gehen wir noch ein bisschen weiter.
Man kann aber auch schon Text, man kann auch, äh, Blödsinn, ähm, man kann auch CC-Empfänger mit reinpacken.
Das geht auch.
Und das, da wird es dann interessant.
Da packe ich dann nämlich, ähm, die E-Mail-Adresse an, die es standardmäßig gehen soll.
Ich habe gar nicht geschaut, ob man nur CC machen kann.
Das wäre auch interessant.
Ergibt keinen Sinn, nur CC zu machen.
Also, ich habe die Standard-E-Mail-Adresse, an die es gehen soll, Fragezeichen, CC ist gleich und dann die, äh, CC-E-Mail-Adresse.
Da könnte ich auch dann mehrere reinpacken mit Komma getrennt.
Das Ganze geht auch mit BCC, also Blind Carbon Copy, ähm, wo dann, äh, die anderen nicht mitbekommen, dass ich das auch noch dahin weiterleite.
Ähm, man kann aber auch tatsächlich Text mit übergeben, der an bestimmte Stellen in die E-Mail standardmäßig schon mit reingeschrieben wird.
Aber man kann zum Beispiel einen Betreff, eine Betreffzeile schon mitgeben, indem ich, äh, auch wieder Fragezeichen, ähm, nee, Quatsch, ist Blödsinn, es ist wie bei URL-Parametern.
Also, der erste kommt mit Fragezeichen, die weiteren kommen mit dem Kaufmanns und, ähm, also in dem Fall, ähm, ähm, habe ich E-Mail-Adresse, Fragezeichen, Subcheckt und dann kann ich einfach einen Text hinschreiben, der dann im Betreff tatsächlich landet, direkt, ähm, bei der Mail, wenn ich, wenn ich das Mail-Programm öffne.
Ähm, man kann tatsächlich sogar auch einen Standard-Inhalt schon vorgeben, indem man Body als Parameter mit reinpackt.
Ähm, und man kann auch das alles miteinander kombinieren und ich habe da auch auf der Demo-Seite eine Demo, wo ich zwei, äh, normale E-Mail-Adressen, zwei Kopie-Adressen, zwei Blindkopie, der Betreff ist ausgefüllt.
Und ich habe auch noch den, äh, den Body-Text mit ausgefüllt, wo dann wirklich alles mit drin ist.
Ähm, ja, gib ihm einfach alles und wir haben das tatsächlich bei mir auf der Arbeit in einem Projekt, äh, eingesetzt, nämlich, wir haben, ähm, eine ganz, ganz simple, ähm, äh, Artikel-Melden-Funktion implementiert.
Und, ähm, da wir uns es uns sparen wollten, dafür jetzt auch noch ein Backend und ein Formular und irgendwie was zu bauen, haben wir gesagt, hey, wir sind doch hier in der Firma, wir haben doch alle eine E-Mail-Adresse, wir machen das einfach per Mail.
Und du kriegst dann einfach deine Mail schon quasi vorausgefüllt mit diversen dynamischen Parametern, wo dann quasi in dem, ähm, in dem Betreff und in dem Content-Text auch schon die ID und der Link zu dem entsprechenden Artikel mit drin steht.
Das heißt, du klickst da einfach drauf, hast deine Mail schon vorausgefüllt, musst nur noch reinschreiben, ähm, ist sogar tatsächlich auch eine mehrere Empfängerliste, also irgendwie alle in meinem Team, ähm, musst nur noch quasi im Text reinschreiben, warum du jetzt diesen Artikel melden möchtest.
Das gibt's auch öfter mal bei App-Feedback, wenn da so ein Feedback-Link drin ist, wo dann wirklich schon drinsteht, äh, System Android, äh, App-Version so und so, was halt einfach beim Debuggen hilft.
Und klar könnte man das jetzt irgendwie in ein Formular packen, aber, ähm, ja, E-Mail ist ja gut zumindest für unsere Generation noch so der Standard-Kommunikationsweg.
Das heißt ja, dass so die nachfolgenden Generationen mit E-Mail auch schon gar nichts mehr anfangen können.
Aber zumindest so im, ähm, äh, Corporate-Kontext hat man ja eigentlich immer die E-Mail-Adresse.
Und dann, warum, warum dann irgendwie was Aufwendigeres machen, wenn's sowas auch tut.
Genau.
Was es auch noch gibt, ist, ähm, und das ist für Mobile besonders interessant, oder für Geräte, die telefonieren können, ist es, äh, das TEL, äh, Protokoll.
Das heißt, ich kann auch einfach reinschreiben, statt wie jetzt eben Mail to TEL, Doppelpunkt und dann eine Telefonnummer und ein Gerät, das telefonieren kann und das unterstützt.
Und das sind, glaub ich, eigentlich alle Handys, die so da draußen unterwegs sind.
Wenn ich da drauf drücke, dann wird, äh, direkt, werd ich gefragt, möchtest du diese Nummer anrufen?
Dann drück ich drauf und dann, äh, geht das sofort.
Das ist ziemlich praktisch, wie ich finde.
Es gab auch mal eine Idee, Fax, weil wir es, weil wir es schon öfter drüber hatten.
Wir haben ja auch eine Faxnummer, an denen man uns einen Fax schreiben kann, ähm, und, äh, im Stream, auch wenn wir darüber notifiziert, wenn, äh, wenn ein Fax reinkommt.
Es gab auch mal die Idee, ein Faxprotokoll damit einzuführen, ähm, das wurde allerdings dann, äh, abgelehnt und da haben sie gesagt, nee, nimm doch dann TEL, das passt dann schon.
So, du kannst dann halt dann auch von mir aus dem Fax da hinschicken.
Ähm, äh, äh, gibt's auch eine Diskussion oder gibt's auch in dem, äh, in dem, äh, IETF, äh, RFC, äh, dazu zu dem Fax, äh, beziehungsweise zu dem TEL, äh, fand ich ganz interessant.
Ähm, das vorhin in der Recherche nochmal zu lesen.
Ähm, es gibt auch noch weitere Protokolle, also man kann eigentlich beliebig, oh, wo ist jetzt mein Protokoll gelandet?
Ich hab's irgendwo hingezogen und jetzt ist es verschwunden. Ähm, also was ich auch auf jeden Fall schon auf Seiten gesehen hab, ist zum Beispiel IRC, da wird dann IRC-Client angesprochen, aber das sind dann weitere Protokolle, funktionieren dann, vor allem dann, wenn, ähm, die registriert sind im Betriebssystem.
Oder, ich habe auch gesehen, und das hab ich selbst noch nie gemacht, vielleicht hast du da schon Erfahrung mit, ähm, es gibt auch, man kann auch, es gibt auch eine Möglichkeit, dass Webseitenprotokolle registrieren können im Browser und ich glaube, Gmail zum Beispiel macht das.
Man kann, glaube ich, Gmail fragt einen, glaube ich, möchtest du Mail-to-Links in Gmail öffnen? Und dann kann tatsächlich sogar eine Webseite entsprechende Links annehmen, wenn ich das richtig weiß.
Genau, wenn der Browser das unterstützt, also Safari kann das zum Beispiel nicht, aber im, im Chrome kann man, äh, Gmail als Standard einrichten.
Genau, aber die Methode dafür ist, äh, Register-Protokoll-Händler-Methode haben wir auch in den Shownotes einen Link, falls ihr das machen wollt. Ähm, es gibt da alle möglichen Protokolle, also, ähm, Mobile-Apps machen das ganz gerne, dass, äh, das dann, äh, Link zum Beispiel, also die registrieren die Protokolle nicht im Browser, sondern, äh, im Betriebssystem selbst, wenn eine App installiert wird, zum Beispiel Facebook hat das früher so gemacht, ich weiß nicht genau, ob sie es immer noch, wahrscheinlich machen sie es auch immer noch so,
Da gab es dann das Facebook-Protokoll, ähm, und wenn es Links gab, die, äh, mit dem Facebook-Protokoll verlinkt waren, dann sind die, haben die sich in der App geöffnet, sofern die App eben vorhanden ist.
Was man noch dazu sagen muss, äh, bei Custom-Schemes, ähm, die müssen anfangen mit Web-Plus und dann eine Zeichenfolge, die nur aus ASCII-Buchstaben bestehen darf, äh, Lowercase.
Und ansonsten gibt es halt eine, eine Reihe Vorgefertigter eben, die wir jetzt schon genannt haben, Mail-to, äh, Tel und so weiter, FTP kann ich benutzen, FDPS, äh, Bitcoin gibt es hier noch, Magnet, falls, äh, wenn man Bitcoin nutzt, kennt man das, ähm, und noch diverse andere.
Es gibt ganz, ganz viele theoretisch, äh, die man, die man verwenden kann, aber wie gesagt, die Voraussetzung dafür, dass sie funktionieren, ist, dass im Betriebssystem oder von irgendeiner Webseite da etwas drauf registriert wurde, ähm, und ihr das auch freigegeben habt.
Standards, also über die Standards haben wir jetzt gesprochen und theoretisch kann jeder sein eigenes Protokoll da erfinden und, äh, wie zum Beispiel, ja, Facebook zum Beispiel, genau.
Ich glaube, damit, äh, haben wir die Protokollgeschichte durch. Ich hab dazu auch, äh, in unserer Demo für die ganzen Mail-to-Geschichten und Telefon, ah, eins hab ich noch vergessen, haha, ich hab noch eins vergessen, ähm, SMS, das kannte ich nämlich bis heute auch nicht.
Ah ja.
Das SMS-Protokoll, das heißt, ihr schreibt, äh, in, in, in das Haref, SMS-Doppelpunkt, ähm, mit, mit einer Nummer und dann, äh, geht tatsächlich, also auf dem iPhone hab ich's heute tatsächlich noch ausprobiert, dann geht tatsächlich die Nachrichten-App oder die Standard-SMS-App auf mit, ähm, der Nummer schon vorausgefüllt und dann kann ich eine Nachricht, äh, schicken.
Normalerweise gibt's sowohl SMS als auch SMS-To.
Was da der Unterschied ist, keine Ahnung.
SMS-To.
Okay, das könnt ihr ja mal ausprobieren, ob SMS bei euch auch funktioniert.
Wieso hatte ich das denn eigentlich, ah, das hab ich nur in der Demo, in die Demo reingepackt, das hab ich aber gar nicht in unsere Show Notes reingepackt.
Mensch, da war ich irgendwie nachlässig.
Das tue ich, das hole ich jetzt noch nach, dass wir das nicht vergessen.
Okay, dann können wir zum, zum nächsten Attribut kommen, glaube ich, oder haben wir noch was?
Nee, das war's dazu, glaube ich.
Da war schon einiges jetzt, nur das Haref-Attribut, was da schon alles, was da schon alles geht.
Hei, hei, hei, hei, hei.
Ja, dann ist, äh, Haref-Lang ist dann das nächste und da kann ich, mein Ernst, vielleicht schon festlegen, welche Sprache das Zieldokument hat.
Und das ist das gleiche, was ich da benutzen kann, wie in dem globalen Lang-Attribut.
Das heißt, da gibt's auch eine RFC dazu, Tags for Identifying Languages, wo festgelegt ist, in welchem Format die vorliegen müssen.
Das können wir auch noch verlinken auf das globale Lang-Attribut.
Und das dient halt dazu, dass hauptsächlich Suchmaschinen oder sonst irgendwie maschinell ausgewertete, auswertende Dinge wissen, in welcher Zielsprache das ist.
Und, äh, wir hatten's, glaub ich, beim, beim Link-Attribut auch, äh, in der anderen Folge schon drüber, über diese Canonical-Links und, äh, dass ich da eben auch festlegen kann, diese Seite in diversen Sprachen liegt unter dieser URL und da setzt man dann auch das, das Lang-Attribut.
Genau, ich glaub, mehr gibt's dazu jetzt gar nicht groß zu sagen. Ich werd jetzt nicht alle Language Codes vorlesen, die da erlaubt sind.
Was? Wieso?
Wir haben noch Zeit.
Äh, wir haben noch, wir haben genug Zeit.
Ja, außer du hättest noch irgendwas dazu, aber ich glaub, das war tatsächlich jetzt so ganz kurz und schmerzlos.
Nein, da gibt's tatsächlich, glaub ich, nicht, nicht mehr, nicht mehr dazu zu sagen.
Sehr gut.
Außer, ihr habt noch was dazu, schreibt's gerne in die Kommentare. Bing, bing, bing.
Ich hab bei Kommentare, denke ich, wenn ich sage, schreibt's in die Kommentare, da denke ich auch immer an das blöde Ding mit der Glocke.
Drückt auf die Glocke.
Was auch immer für eine Glocke, es gibt bei uns keine Glocke im Podcast, aber drückt einfach mal, drückt einfach mal auf die Glocke.
Ah, da ist sie.
Du bist gerade eingefallen, wir haben doch hier auch ein Soundboard, Mensch.
Hat gerade jemand draufgedrückt?
Ja.
Verrückt, wie ist das denn passiert?
Ah, okay.
Dann haben wir als nächstes Ping.
Das war mir tatsächlich auch neu.
Das hab ich weder vorher irgendwie gesehen, noch drüber gelesen.
Also das hatte ich einfach gar nicht auf dem Schirm.
Könnte auch daran liegen, dass es in Firefox standardmäßig deaktiviert ist und dementsprechend wahrscheinlich auch nicht so die Verbreitung hat.
Und was macht das?
Es sendet, wenn ich auf einen Link klicke, auf die im Ping-Attribut hinterlegte URL, oder ich glaube, es können auch mehrere URLs sein, ein Post-Request.
Das heißt, man kann's vielleicht schon ahnen, es ist hauptsächlich eigentlich zum Tracking.
Ich wüsste jetzt keinen anderen Anwendungsfall, warum ich bei Klick auf einen bestimmten Link irgendeine andere URL benachrichtigen können wollte.
Das ist gut, dass du's sagst, weil ich hab jetzt gerade mich mit dem Thema beschäftigt auf meiner Seite, auf meinem Blog.
Ha, das wäre vielleicht die Lösung für eins meiner Probleme gewesen.
Man muss manchmal, manchmal muss man sich echt zwingen, Probleme nochmal zu googeln, dass man auf Lösungen kommt, auf die man sonst vielleicht nicht kommen würde.
Da baut man irgendwelche komischen Dinge drumherum.
Aber wie gesagt, Firefox standardmäßig nicht und funktioniert halt wirklich nur bei nativen A-Elementen.
Also jetzt nicht irgendwas mit JavaScript.
Das heißt, wenn, dann würde man ja wahrscheinlich eine Lösung wollen, die bei allem funktioniert.
Also auch bei Buttons, die ich klicke oder so, ne?
Ja.
Aber es ist halt wirklich nur bei Link-Klick.
Und so ein bisschen zum technischen Hintergrund.
Also es gibt auch einen CSS-Tricks-Artikel, den ich dazu verlinke.
Was da passiert, ist halt, wie gesagt, ein Post-Request an diese URL oder URLs.
Der Body ist dann nur das Wort Ping.
Und das Request kriegt auch noch ein paar Header mit.
Also Content-Type wird auf Text-Ping gesetzt.
Und die Header Ping-From und Ping-To werden dann auch mitgesendet.
Also Ping-From ist dann eben die Seite, von der dieser Link ausgeklickt wurde.
Und Ping-To ist eben die Seite, auf die dieser Ping gesendet wurde.
Genau.
Und dann, ja, also die Frage ist, wozu braucht man das?
Und ist das nicht auch irgendwo ein Sicherheitsrisiko, dass da irgendwelche Requests im Hintergrund ablaufen?
Und vielleicht auch ein Datenschutz-Ding, ne?
Weil muss ich dem User nicht irgendwie sagen, dass da irgendwas passiert, wo Requests hingeschickt werden?
Und dann bin ich darauf gestoßen, dass das tatsächlich eingesetzt wurde als eine DDoS-Methode.
Also Direct Denial of Service.
Da gab es irgendwie Distributed, nicht Direct, Distributed Denial of Service Attacke.
Und zwar war das wohl hauptsächlich, ging es da um WeChat-User im asiatischen Bereich.
Aber ich wüsste nicht, warum das nicht jemand auch anderweitig ausprobieren sollte.
Also irgendwie Werbung geschaltet oder halt irgendwie auf ganz normal wirkenden Seiten Links gestreut, die aber eben alle einen Ping auf eine bestimmte Seite geschickt haben.
Und dadurch wurden auf diese Seite irgendwie stündlich 70 Millionen Requests geschickt oder so.
Und natürlich der Server-Alarm gelegt.
Also das ist schon irgendwie clever, ne?
Weil du nutzt halt wirklich, normalerweise läuft es ja eher so, du hast halt deine Gruppe an Script-Kiddies, die da mitmachen bei dem Denial of Service.
Und die haben dann alle irgendwelche Tools, die speziell ganz viele Requests hinschicken.
Aber dass du andere nutzt, ahnungslose NutzerInnen nutzt, um eben für dich diese vielen Requests dahin zu schicken,
Was halt auch dazu führt, dass du ja nicht als einzelner Verursacherin irgendwie ausfindig gemacht werden kannst.
Das ist schon irgendwie clever.
Also die sind schon immer sehr findig, was so Sachen angeht.
Wie kann ich denn irgendwas missbrauchen zu irgendwelchen Schandtaten und zu meinem Vorteil?
Okay, das bedeutet, ich habe jetzt gerade überlegt, ich erinnere mich, dass wir genau so ein Problem mal hatten.
Der Klassiker ist, glaube ich, beim Tracking, du möchtest bei dem Aufruf eines Links, möchtest du rausfinden, welcher es ist und möchtest deinem Tracking-Tool Bescheid sagen.
Übrigens genau dieser Link wurde gerade geklickt, an genau dieser Stelle.
Nicht irgendeiner auf der Seite, wenn du fünf Stellen hast, wo auf dieselbe Sache verlinkt wird, sondern genau dieser, damit du weißt, ah, das klickt gut.
Stimmt, ja.
Das müsste man halt über Parameter dann irgendwie noch mit dranhängen.
Genau, das musst du mit Parametern dann machen, aber mit, wenn du es versuchst, mit JavaScript den Klick abzufangen oder sowas, das klappt manchmal, aber halt nicht immer, weil manchmal bist du dann schon auf der neuen Seite, das ist so ein, da ist so ein Race Condition Ding, das hatte ich schon öfter, das, da kriegst du nicht jeden Klick dann, aber das mit dem Ping-Attribut, es ist halt nur Shame, dass es nicht in Firefox funktioniert.
Die werden ihre Gründe haben, warum sie es hinter dem Flag noch haben, schon sehr, sehr lange übrigens, seit Version 3, ist das schon hinter einem Flag?
Ja, ich glaube, dass das irgendwie gut, ob das jetzt genau stimmt.
Disabled by default for privacy reasons steht bei Can I Use.
Aha, okay, mhm.
Das haben, also die haben das nicht aus, weil es noch nicht ausreichend getestet ist, sondern weil sie es nicht haben wollen, weil sie es eigentlich blöd finden.
Ja.
Kann ich nachvollziehen, würde aber einige Tracking-Probleme lösen.
Klar, natürlich, die wollen nicht, dass man Tracking-Probleme löst und dafür sind, das sind ja auch die Guten irgendwo.
Muss man halt, aber es gibt, das Dumme ist halt, es gibt halt andere Möglichkeiten, wie man es dann trotzdem machen kann und man hat dann eigentlich, an der Stelle würde ich behaupten, ich weiß nicht, was jetzt, wäre mal interessant, falls jemand von Mozilla zuhört und dazu mehr weiß, würde mich das tatsächlich interessieren.
Weil, so der Standard-Use-Case, ich finde, raus, auf welchen Link geklickt wurde und auch, ich muss kein komisches JavaScript drumherum bauen und keine Parameter oder sowas, sondern es gibt noch was anderes, wo das ein Privacy-Problem ist, dann bitte gerne mal melden.
Vielleicht ist ja auch die DDoS-Geschichte, die du gerade erwähnt hast, weshalb das nicht eingebaut wurde.
Hier steht, for privacy reasons, das ist, glaube ich, auch so, ist sogar verlinkt, aber ich kann nicht auf dieses Pop-Up drauf, Scheiße, for privacy reasons.
Ah, ich will da draufklicken, aber es geht immer weg.
Gut, ihr müsst nicht jetzt meine Kämpfe mit Can I Use mitbekommen.
Ich finde es total spannend und wenn das überall funktionieren würde, das wäre tatsächlich für Tracking in Game Changer, sofern man ethisch korrekt trackt, sag ich mal so.
So, dann gehen wir weiter zum Nächsten.
Referral-Policy haben wir da als Nächstes.
Und da hat irgendwas schon bei mir geklingelt, ich kannte das Attribut jetzt an sich nicht,
aber die Werte haben mir irgendwie was gesagt und ich dachte eigentlich, dass wir das im Kontext von CSP, also Content Security Policy, mal hatten.
Habe ich jetzt allerdings nichts mehr dazu gefunden, krass, jetzt ist das Wort weg, einen eigenen HTTP-Header, Referral-Policy, wo ich genau die gleichen Werte eben setzen kann, die ich in diesem Attribut auch eingeben kann.
Also die lauten No Referral, No Referral, When Downgrade, das heißt, es wird eine sichere Verbindung benötigt.
Ich möchte jetzt nicht alle Werte einzeln durchgehen, weil das kann man sich eh nicht merken.
Am besten einfach auf der Seite schauen, aber es geht halt immer darum, was für Informationen werden mitgeschickt mit dem Referral, beziehungsweise wird ein Referral mitgeschickt oder nicht.
Same Origin heißt eben, es wird nur mitgeschickt, wenn das Link-Target auf der gleichen Domain liegt.
Und ja, da kann ich das halt einstellen, was, wenn der Referral mitgesendet wird, man nicht.
Das war es dazu eigentlich auch schon, weil wie gesagt, es macht keinen Sinn, da jetzt alles im Detail vorzulesen.
Genau, das nächste Attribut, Rel, Relation, da ist es im Prinzip ähnlich, wir werden da jetzt nur ein paar vorlesen oder ein paar behandeln, was man damit machen kann.
Weil wenn man sich, und da könnte man tatsächlich eine eigene Podcast-Folge zu machen, wenn man sich den MDN-Artikel zum Rel-Attribut anguckt, dann sieht man, da gibt es irgendwie, keine Ahnung, 20, 30 verschiedene, die nicht alle für Links gelten, aber auch für andere Elemente.
Also manche nur für das Link-Tag zum Beispiel oder auch Form-Elementen.
Da gibt es unfassbar viele, vielleicht seien aber jetzt mal noch ein Beispiel oder ein, zwei Beispiele genannt. Ich weiß nicht, machen wir von oben nach unten?
Können wir machen, ja. Also die für Link hatten wir, glaube ich, auch schon eben in dieser Meta-Folge, bei dem Link-Tag, mit Prefetch und so weiter.
Das heißt, wir gucken jetzt mal, was hier speziell für Links ist, übrigens nicht nur für das Art-Tag, sondern auch für das Area-Tag in Image-Maps, die ja immer noch technisch funktionieren.
Ich meinte im Trello von oben nach unten.
Ach so. Du meinst gar nicht direkt die MDN-Tabelle?
Nee, nee, nee, nee. Das ist, glaube ich, das ist viel zu viel, ja.
Das ist viel zu viel, das ist viel zu viel.
Genau, also eins, was wir auch schon mal angesprochen haben, sogar schon in Folge 5, das ist die Kombination Target-Blank, zum Target-Attribut kommen wir gleich noch,
und dass man eben ja nicht will, dass Informationen über die zu öffnende Seite an externe Seiten weitergegeben werden.
Und dass man deswegen, also aktuell, die Browser heutzutage machen das standardmäßig auch nicht mehr,
aber um das wirklich definitiv zu unterbinden, sollte man eben rel gleich noOpener mit an den Link hängen,
also an das A-Attribut hängen, damit eben diese Opener-Informationen dann nicht weitergegeben werden.
Also das wäre dann das Erste.
Ja, genau. Es gibt zum Beispiel auch noch No Referrer, das ist genau das, was drinsteht.
Das heißt, eine Zielseite kriegt den Referrer von der Seite, wo der Link herkommt, nicht.
Das ist auch so ein Tracking-Ding.
Man kann normalerweise, wenn man einfach nur einen Link setzt, ohne irgendwelche Attribute, einfach nur ganz normaler Link auf eine andere Seite,
dann kriegt die Zielseite mit, wer hat denn wo auf den Link geklickt.
Finde ich eigentlich immer total interessant, weil ich dann sehen kann, wer hat denn jetzt irgendeinen Blogartikel oder irgendein Tool von mir verlinkt,
Wo kommt's denn eigentlich her? Finde ich immer spannend, manche wollen das nicht.
Weiß ich nicht, unter Umständen ist es ein Privacy-Problem, wenn man zum Beispiel jetzt irgendwie aus einem geschlossenen System oder so kommt.
No Referrer unterbindet das.
Es müsste das Gleiche im Endeffekt sein, als ob ich jetzt die Referrer-Policy auf No Referrer setze.
Also das hat wahrscheinlich die gleiche Auswirkung.
Was halt nur wichtig ist, weil man findet gerade oft in älteren Schnipseln, von wegen,
da, wenn ich überprüfen will, wo jemand herkommt, so, ja, nimm doch den Referrer-Header.
Man muss halt wissen, der ist nicht immer befüllt oder ist heutzutage immer seltener befüllt,
weil eben aus irgendwelchen Privacy-Bedenken heraus der Referrer gar nicht mehr mitgegeben wird.
Also darauf darf man sich nicht verlassen.
Aber es gibt halt auch offenbar, ja, und da stolper ich immer wieder drüber, sehr viele Methoden,
die einfach ganz ohne so verrückte Technik funktionieren, mit irgendwas, ich muss irgendwas anderes machen,
sondern einfach im HTML gebe ich irgendwas ein, irgendein Attribut.
Wir hatten ja auch schon die Geschichte, dass man CSP-Geschichten auch in HTML direkt machen kann und sowas.
Finde ich verrückt und abgefahren, finde ich cool.
Das heißt, es gibt was mit einer niedrigen Einstiegshürde, wo ich mich jetzt nicht mit HTTP-Headern beschäftigen muss,
gleich wenn ich jetzt nur irgendwie eine Webseite baue und trotzdem so ein Feature, wenn es mir wichtig, nutzen kann.
Oder halt eben vielleicht gar nicht die technischen Möglichkeiten habe, weil ich gar nicht den Server so weit konfigurieren kann, darf, warum auch immer.
Genau, ich habe jetzt noch, wir haben ja gesagt, es gibt so eine halb endlose Liste an REL-Geschichten, die man für Links machen kann.
Da sind auch viele Sachen dabei, wo ich so dachte, das gibt es jetzt schön, passt das irgendjemand, nutzt das wirklich jemand?
Oder sagen wir mal so, ich kann das da reinschreiben, um so ein bisschen mehr semantische Informationen zu hinterlegen,
Aber gibt es wirklich ein System, das damit was anfängt?
Und eins davon, ich habe mir jetzt einfach nochmal eins rausgegriffen, weil ich mir da ganz gut vorstellen konnte, in welchem Kontext es verwendet wird.
Zum Beispiel REL, PREV und NEXT für Bereiche auf einer Webseite, die quasi einen vorherigen Schritt und einen nächsten Schritt haben.
Oder so ein Paging, könnte ich mir gut vorstellen, dass das da, oder Klassiker, bei uns auf der Podcast-Seite gibt es die vorherige Podcast-Folge unter der jeweiligen Podcast-Folge, in der man sich gerade befindet.
Und die nächste Podcast-Folge, und da würde man eventuell REL, PREV und NEXT machen, das ist cool.
Dann hat man irgendwie semantische Informationen irgendwie noch mit dabei, aber bei Semantik, finde ich, ist immer auch die Frage, was passiert damit?
Wird damit irgendwas gemacht? Dann kümmere ich mich darum. Also gibt es irgendein Tool, das damit was anfängt, dass das passt, das dann sagt, hey, cool, ich weiß jetzt mehr über die semantische Struktur dieser Seite, oder gibt es da einfach gar nichts?
Und da gibt es einige in dieser Liste, wo ich so dachte, ob das jetzt wirklich irgendwo verwendet wird, Terms of Service zum Beispiel, gibt es als Attribut noch.
Ja, ich habe dann auch, wir haben vorhin schon kurz vor der Aufnahme drüber gesprochen, ich habe dann auch gemeint, wo zieht man denn eigentlich die Grenze? Also warum haben die Dinge jetzt einen eigenen REL und andere Dinge, die vielleicht auch noch Sinn machen würden, keine Ahnung, Table of Contents vielleicht, oder so, wenn es dann eine eigene Seite gibt.
Warum gibt es das nicht? Also es ist halt die Frage, wie sinnvoll das ist. Und ich habe jetzt noch nie so darauf geachtet, aber wäre mir interessant zu wissen, ob, weil Terms of Service und Privacy Policy oder Privacy Policy, je nachdem, auf welchem Englisch man es ausspricht, die hat ja eigentlich jede Seite.
Aber nutzt irgendjemand tatsächlich dieses REL-Attribut entsprechend? Muss ich mal darauf achten? Werde ich mal in Zukunft ab und zu in den Quellcode gucken?
Also ich glaube, am bekanntesten ist das REL-Attribut an sich, wenn man es jetzt nicht auf Links bezieht, vielleicht vom REL-Stylesheet im Link-Attribut, wenn man ein CSS verlinkt.
Das sei vielleicht nur noch mal erwähnt, das habt ihr da vielleicht auch schon mal gesehen, falls ihr jetzt noch nicht so erfahren seid. Aber da ist es, glaube ich, sehr, sehr präsent. Da wird es oft verwendet.
Wie gesagt, es gibt aber sehr, sehr, sehr viele Geschichten bei REL, aber das ist eine andere Geschichte und die soll ein andermal erzählt werden.
Ich glaube, die haben wir sogar schon erzählt.
Die ganze REL-Geschichte?
Nee, nicht die komplette REL-Geschichte, nee, aber Link-REL-Stylesheet.
Naja, die haben wir schon erzählt, aber die ganzen anderen, also da gibt es wirklich, die Liste ist wirklich, ich habe es nicht erzählt.
REL-Lativ lang.
REL-L...
Alright, gut, nächstes Attribut, oder?
Jawohl, Target ist das nächste und da gibt es ein paar vordefinierte Werte, die mit Unterstrichen markiert sind oder man setzt es auf einen spezifischen, jetzt weiß ich, habe ich den Artikel gerade nicht mehr offen,
Browsing-Context, glaube ich, heißt das. Also wenn ich zum Beispiel einen Frame oder einen I-Frame heutzutage benamt habe, dann kann ich eben sagen, dann kann ich den Namen angeben von diesem I-Frame und dann wird das in dem I-Frame drin geladen.
Oder es gibt eben diese speziellen Werte, also Self, um das im gleichen Frame zu laden, Blank, um es in einem neuen Tab heutzutage früher in einem neuen Fenster zu öffnen.
Top gibt es noch, das heißt, wenn ich schon in dem Frame-Context mich bewege, dann soll es ganz oben, also im äußersten Kontext geöffnet werden und unterstrich Parent, ich glaube, das waren dann alle.
Das haben wir auch in der Besprechung oder im letzten Podcast, ich bin mir gerade nicht sicher, ob wir es in der Folge auch oder ob wir, wir haben noch relativ lange danach gequatscht mit dem Matthias, ob wir es da, ich glaube, wir haben es später besprochen.
Es ist auch relativ kontrovers in der Entwicklerszene, ist Target Blank für externe Links auf einer Seite, ist das in Ordnung oder nicht?
Weil manche sagen, nein, auf keinen Fall, ich möchte nicht bevormundet werden, ich möchte auf jeden Fall selbst entscheiden können, öffne ich das im neuen Fenster oder nicht.
Das ist so eine, ich glaube, es ist halt einfach, man kann es nicht pauschal sagen, weil da, glaube ich, jeder eben so seine Präferenz hat.
Also bei mir ist zum Beispiel, ich mag das gar nicht, wenn sich externe Links im gleichen öffnen, weil ich dazu tendiere, das zu schließen und dann plötzlich meine Seite weg ist und ich dann wieder mit STRG-Shift-T, wenn ich im Desktop bin, das mir wieder aufmachen muss, weil ich nicht drauf geachtet habe, ob das jetzt in dem neuen aufging oder nicht.
Also ich mag das eigentlich schon, dass ich weiß, wenn ich auf einen Link klicke innerhalb der Seite, dann bewege ich mich in dem gleichen Tab und externe Sachen haben für mich eigentlich extern aufzugehen.
Aber das sehen andere Leute wahrscheinlich wieder anders.
Und dann können, dann die würden jetzt argumentieren, also ich habe es auf meinem Blog auch eingebaut, weil ich der Meinung bin, dass das so sein sollte.
Die würden dann argumentiert, ja, dann kannst du es doch mit der mittleren Maustaste einfach immer im neuen Tab öffnen, was du im neuen Tab öffnen willst.
Das Ding ist, bei einem Link weiß man nicht immer, wo er hinzeigt.
Ist er auf derselben Seite oder geht er woanders hin?
Ja, dann muss ich erst vorher gucken in der Adressliste, also in diesem Pop-Over, was dann aufgeht.
Auf dem Desktop muss ich es dann mit Long-Press und Menü und extra im neuen Tab öffnen machen.
Also, ja.
Ja.
Wie gesagt, ich glaube, das kann man nicht allgemeingültig sagen.
Ich glaube, jeder sagt, ja, das sollte auf jeden Fall so und so sein, standardmäßig, weil, je nachdem, was er für eine Präferenz hat oder sie.
Ja.
Ja, also, ich habe auch angeregt, als ich gemerkt habe, dass der Matthias das irgendwie so ein bisschen blöd findet, wenn man das macht, sage ich, naja, gut, vielleicht sollte man mal ein Browser-Plugin schreiben für die Leute, vielleicht könnte das Chat-GPT einfach mal machen, ein Browser-Plugin schreiben.
Ich habe jetzt gerade die Tage versucht, ein Browser-Plugin mit Chat-GPT, das kriegt das bestimmt hin mit zwei Prompts.
Das eben genau das sagt, hey, Target Blank, wenn du das irgendwo findest, schmeiß das einfach mal raus. Also, für die Leute, die Target Blank scheiße finden, wird das einfach überall rausgelöscht. Ich kann immer selbst entscheiden.
Ja, oder halt eben Links, die entweder relativ sind oder mit der gleichen Domain anfangen, die sollen immer, also, ohne Target Blank und andere sollen mit Target Blank automatisch geöffnet werden. Ja, also, das ging schon, kann man schon machen, ja.
So, Moment. Das ist notiert, das Plugin gibt es dann gleich in drei Stunden.
Alles klar, du hast bis Sonntag bist du veröffentlicht, dann hast du Zeit.
Das ist so ein Einzeigen.
Ja, Chat-GPT hat so lange Zeit.
Genau.
Gut, okay, habe ich gerade zu Target noch was? Nee, ich glaube, ja, es wird kontrovers diskutiert, das mit dem Target Blank.
Und, ja, es kommt vielleicht noch was zur Geschichte, vielleicht kennen die Älteren unter euch das noch, wo das ursprünglich eigentlich herkommt.
Frame, hat der Konstantin vorhin gesagt.
Früher gab es ja Seiten, vielleicht eine kleine Geschichtsstunde noch, für die Leute, die noch, die, sagen wir mal so, in den letzten 10 bis 15 Jahren angefangen haben, Web zu machen.
Weil ich glaube, man muss schon davor dabei gewesen sein, um, das ist älter als 15 Jahre.
Früher gab es Seiten, die aus Framesets bestanden.
Und was bedeutet das? Das war, dass man konnte eine Seite zusammenbauen aus mehreren kleinen Unterseiten, die dann auf einer Seite gemeinsam angezeigt wurden.
Ich glaube, so kann man das in etwa nennen.
Das heißt, ich hatte ein Frameset, das hatte dann verschiedene Frames, die dann wiederum gesagt haben, ja, in diesem Frame wird diese Seite angezeigt, in diesem Frame wird diese Seite angezeigt.
Und das war eigentlich auch irgendwie eine logische Geschichte, zu einer Zeit, wo das Web oder die Internetverbindungen noch sehr, sehr langsam waren, wollte man möglichst wenig laden.
Das heißt, zum Beispiel die Navigation war in einem eigenen Frame, die wurde quasi nie neu geladen, aber die Navigation hat Links in einem anderen Frame aufgerufen und nur der, wo du da neu geladen hast.
Ja, dann hatte ich vielleicht sogar noch einen Header und einen Footer noch, der immer gleich geblieben ist.
Und dann konnte ich halt wirklich nur den Content austauschen.
Das war schon eine clevere Idee für damals.
Eigentlich smart und clever, genau.
Und eigentlich aus heutiger Sicht, es wird, interessanterweise übernehmen ja so Backend-Frameworks genau diese Aufgabe mittlerweile.
Nur, dass man halt sagt, ja, scheiß drauf, wir haben eine Bandbreite, ist eh da, kostet nix.
Wir spielen einfach denselben Content auf den ganzen Seiten immer wieder aus.
Also die Idee dahinter ist eigentlich gar nicht so schlecht.
Gut, und bei Single-Page-Apps, da tauschst du halt dann wirklich nur den Main-Content aus, wenn du irgendwo draufklickst, ne?
Aber letzten Endes war die Idee gar nicht so schlecht.
Es war halt überhaupt nicht accessible und es war furchtbar zu programmieren.
Aber genau aus dieser Zeit stammt diese ganze Target-Geschichte, weil man den nämlich natürlich irgendwie angeben musste bei meinem Link,
wenn ich jetzt ein Frameset habe, in welchem Frame soll sich das denn eigentlich jetzt öffnen?
Da stammt das so ein bisschen her.
Genau, Geschichtsstunde Ende.
Dann haben wir als nächstes das Type-Attribut.
Und da steht auch dabei No-Build-In-Functionality.
Also das macht eigentlich nix.
Man kann dann Mime-Type angeben.
Beziehungsweise habe ich jetzt gelernt, heutzutage sagt man da Media-Type dazu, manchmal auch Content-Type.
Also das ist alles das Gleiche.
Aber es heißt jetzt wohl offiziell Media-Type und nicht mehr Mime-Type.
Und ich weiß nicht, ob das bei Downloads vielleicht je nach Endgerät nochmal irgendwie einen Unterschied macht.
Ja, keine Ahnung.
Ist auch wieder halt so ein Meta-Ding.
Ich kann da halt mitgeben, was es ist.
Und vielleicht klingt sich irgendwo ein Skript ein, das dann wieder anhand dessen entscheidet,
oder irgendeine Extension, was damit gemacht werden soll.
Oh je, jetzt kommt der große Blog, der mit Movies übertitelt ist.
Weil ich, ich muss nochmal Mime-Mime-Mime.
Ich befürchte, nein, das wird wahrscheinlich nicht so extrem lang dauern.
Aber jetzt kommt echt tatsächlich ein großer Blog in unseren Shownotes, wo eigentlich, das habe ich alles vorhin noch hingeschrieben.
Und deswegen hat sich der Aufnahmestart, das kriegt ihr auch nicht mit von dem Podcast, noch um eine halbe Stunde verzögert.
Ja, du hast halt dein Steckenpferd ausgepackt und so den, das ist was für dich, da hätte ich gar nicht dran gedacht, so Accessibility-Thematik.
Und da hast du dich halt natürlich drauf gestürzt.
Steht aber auch im MDN-Artikel tatsächlich drin, großer Bereich.
Also denkt man, man ist jetzt schon fertig mit Links.
Ah, siehst du, dann habe ich das wahrscheinlich einfach übersehen.
Also jetzt kommt tatsächlich Barrierefreiheit generell, aber auch noch ein bisschen CSS.
Wie sollte man sowas stylen und was sollte man nicht tun und was sollte man tun?
Und was sind denn so ein paar Best Practices noch, was Links angeht?
Was jetzt, das Ganze ist jetzt nicht so hardcore technisch, aber wir steigen jetzt einfach mal ein.
Also was gibt es denn zum Beispiel noch so für spezielle Links, die die Barrierefreiheit verbessern?
Das sind nämlich zum Beispiel Skip-Links.
Vielleicht habt ihr das schon mal gehört.
Skip-Links sind eigentlich nur Anker-Links, die aber noch üblicherweise auf jeder Seite platziert werden
und einem ermöglichen, dass man zu einem anderen Teil der Seite direkt springen kann.
Skip-Links sollten möglichst das erste Element auf der Seite sein, ganz, ganz oben.
Dass man quasi, wenn man jetzt mit der Tastatur navigiert, dass man direkt zu dem Skip-Link kommt
und dann, der dann zum Beispiel sowas sagt, ja, Skip-to-Navigation, Skip-to-Content oder sowas,
je nachdem, wie viele Bereiche ich da habe.
Ich habe jetzt gerade vorher nochmal einen Artikel gelesen, der gesagt hat, meistens reicht ein Skip-Link aus,
nämlich Skip-to-Content, weil die Navigation ist ja meistens sowieso direkt oben.
Das heißt, die folgt im besten Falle, wenn die Seite gut strukturiert ist, direkt danach.
Man könnte zum Beispiel auch sowas, wenn man jetzt eine Suche hat, Skip-to-Search oder sowas,
wäre vielleicht noch sinnvoll, wenn man eine Suchfunktion hat, die gefunden werden soll.
Ich habe vor vielen, vielen, vielen Jahren mal animierte Skip-Links gebaut,
weil die üblicherweise sind Skip-Links so gebaut, dass sie für die normalen,
normal ist vielleicht ein blödes Wort, für sehende und nicht tastaturnutzende SeitenbesucherInnen unsichtbar sind,
weil die brauchen die normalerweise nicht.
Und die sind dann auf eine Art versteckt, sodass sie quasi erst sichtbar werden, wenn sie fokussiert werden.
Und ich habe da vor vielen, vielen Jahren mal eine Demo gebaut,
die die so ein bisschen dann von oben rein animieren.
Die fahren dann so von oben in die Seite rein.
Das kann man auch auf andere Art machen.
Es wird auf jeden Fall in den Shownotes verlinkt.
Es ist ein uraltes Skip-Link-Demo.
Ich weiß gar nicht genau, ich glaube, das habe ich sogar noch damals bei JS, wie hieß die Seite?
JS Fiddle?
JS Fiddle gebaut.
Das gibt es, glaube ich, auch immer noch.
Und da gab es CodePen noch nicht und sogar noch zu CodePen umgezogen,
weil ich gedacht habe, das ist so eine Demo, die würde ich gerne behalten.
Er hat den Test der Zeit, glaube ich, bestanden.
Ich habe vor kurzem noch mal eine kleine Mini-Änderung daran gemacht.
Aber das ist was, was ich, glaube ich, heute immer noch auf einer Seite so einsetzen würde.
Ich komme jetzt über das CSS, da kann man streiten, ob das jetzt super elegant ist,
aber es funktioniert.
Man kann es quasi so einfach in eine Seite reinknallen, hat man Skip-Links.
Wie gesagt, funktioniert genau mit dem Anker-Link-Prinzip.
In den Shownotes kommt auch noch ein Link zu einem Artikel von WebAIM zu Skip-Links,
wo ich auch vorhin das noch mal gelesen habe, von wegen, ja, meistens braucht man nur einen und so.
Was Barrierefreiheit angeht, da sind auch Link-Texte sehr, sehr wichtig.
Also ich meine, wir haben bisher jetzt nur über so die technischen Eigenschaften von Links gesprochen,
aber der Text, der verlinkt wird, ist eigentlich auch total wichtig.
Also es gibt zum Beispiel, vielleicht kann man es daran ganz gut erklären,
auf dem Mac mit VoiceOver, dem Screenreader, dem Eingebauten,
gibt es das sogenannte Rotor-Menü.
Und das mache ich auf mit einem Shortcut und darin befinden sich verschiedene Tools,
wo ich mir bestimmte Bereiche der Seite auflisten kann,
von der Webseite, auf der ich bin, ohne dass ich den Rest davon dazwischen habe.
Ich kann zum Beispiel, ich habe zum Beispiel einen Bereich, wo alle Überschriften aufgelistet werden.
Ich kann sagen, hey, gib mir mal bitte alle Überschriften und dann kann ich sagen,
Überschrift, damit kann ich sehr, sehr schnell navigieren und dann kann ich sagen, ja, geh bitte da hin und dann geht er auf der Seite dahin. Das gibt es auch für Links. Und jetzt stellt euch mal vor, ich habe jetzt 27 Links auf der Seite, weil ich da lauter, ich bin jetzt auf der Startseite von einem Portal oder so, ich habe 27 Links auf der Seite, die alle den Linktext haben, mehr lesen.
So, und dann gehe ich in dieses Rotor-Menü und sage, ja, gib mir mal bitte Links der Seite. Und dann höre ich, mehr lesen, mehr lesen, mehr lesen, mehr lesen, mehr lesen, mehr lesen. Und das würde auch passieren, wenn ich auf die Seite gehe und mit der Tabulator-Taste von Link zu Link oder von interaktivem Element zu interaktivem Element springe. Ist einfach Quatsch.
Also das ist visuell, wenn ich den visuellen Kontext verstehe, ist das eventuell okay mit dem mehr lesen. Sobald ich aber nur was vorgelesen bekomme und nur den Linktext, in dem Linktext nur das drinsteht, ist das absolut nicht zu gebrauchen.
Weil ich nämlich immer den Kontext dazu brauche. Also ich meine, das Rotor-Menü war jetzt nur ein Beispiel, aber üblicherweise ist es so, wenn ich irgendwas suche, wo ich hin möchte auf der Seite, also wirklich weiter navigieren möchte,
Ich nutze die Tabulator-Taste auf der Tastatur und springe zum nächsten interaktiven Element. Dann höre ich, ah, mehr lesen. Und dann gehe ich nochmal weiter, mehr lesen.
Und das ist natürlich kompletter Unsinn. Das bringt mir gar nichts an der Stelle. Das heißt, gebt euren Linktexten, macht sinnvolle Linktexte.
Und wenn ihr so ein mehr lesen habt und ihr jetzt visuell das Problem habt, da muss irgendwie jetzt, ich möchte das visuell nicht anders haben oder da passt jetzt kein größerer Link hin,
Aber ich möchte vielleicht trotzdem den Leuten, die darauf angewiesen sind, da was anbieten, dann macht wenigstens noch ein ARIA-Label dazu.
Oder am besten finde ich eigentlich immer besser, funktioniert zuverlässiger irgendwie ein Span-Element in den Link noch rein, der das versteckt wird visuell, aber der Screenreader lesen kann.
Also nicht Display-None nehmen dafür und dann halt sagen, vielleicht wenn es jetzt eine Liste mit Artikeln ist oder so, was jetzt typischerweise oft so ist, dann einfach den Titel von dem Artikel noch mit da reinschreiben.
Mehr lesen, Doppelpunkt, Doppelpunkt und dann der Link, der Titel von dem Artikel und dann verstehe ich das schon.
Oder was noch ein anderes Beispiel wäre, was ich auf jeden Fall auch schon mal gesehen habe, war, stell dir vor, ihr seid eine Mail-Client, wo es eigentlich immer eine Liste mit den Links gibt.
Wenn da jetzt immer steht, Mail öffnen.
Die Mails, weißt du?
25 Mails.
Die Linkliste zu den Mails.
Äh, zu den Mails, genau, Linkliste zu den Mails.
Wenn da jetzt bei jedem Link steht, Mail öffnen, das bringt mir einfach überhaupt nichts.
Ich kann mir aus dem Kontext, wenn ich jetzt drauf schaue, erschließen, ah, okay, bei dieser Mail ist das der Betreff und so.
Das ist aber, wenn ich jetzt nur was höre, sehr schwer zu erschließen, was ist denn jetzt der Kontext von diesem Link?
Welcher ist es denn jetzt?
Ist es das, was vorne dran vorgelesen wurde oder das, was hinten dran vorgelesen wurde?
So, das ist nicht unbedingt immer klar, ne?
Deswegen auch an der Stelle vielleicht einfach, wenn wir jetzt bei dem Beispiel bleiben, den Betreff in unsichtbarem Text mit dazu packen.
Dann ist das ganz klar, dann gibt es da überhaupt keine, keinen Zweifel.
Ah, Mail lesen, ähm, Betreff, bla, bla, bla, bla.
Und dann ist klar, um welche Mail geht es da eigentlich.
Genau, und generell so mehr lesen Links, ich finde die, oder, oder auch ganz beliebt, hier Links.
Mehr Informationen findet ihr, verlinkt hier.
Ähm, dann wenigstens, formuliert den Satz um und macht wenigstens, verlinkt wenigstens mehr Informationen.
Ich kenne mich schuldig, dass ich sowas bestimmt auch schon so gebaut habe.
Auch, ich auch, es ist, wenn man so, wenn man so, wenn man so, wenn man sowas schreibt, dann ist das im Kopf so drin, dass man das macht und dann, es ist manchmal auch gar nicht so einfach, habe ich gemerkt, den Satz dann so umzuformulieren, dass er dann trotzdem immer noch elegant klingt.
Und dass du vor allem halt auch nicht so einen riesigen Text da hast. Also du willst ja meistens was Kurz und Knackiges und willst vielleicht nicht jetzt hier die Infobroschüre downloaden, komplett verlinken und dann ist die blau und unterstrichen.
Also, genau.
Ja.
Ich finde aber, dass es auch ein Usability-Feature ist, wenn nicht das Wort hier verlinkt ist, es ist nicht nur Barrierefreiheit.
Ich finde, wenn tatsächlich genau verlinkt ist, muss ja kein ewig langer Text sein, ähm, was ich wirklich auffinde.
Also, ich glaube, das ist vielleicht so generell die Regel, ähm, auch Usability, nicht nur Barrierefreiheit.
Wenn du einen Link-Text machst, versuche immer in dem Link-Text zu beschreiben, wo komme ich denn da jetzt hin.
Und hier ist nichts, wo ich weiß, wo ich hinkomme, sondern verlinke das, wo du hinkommst.
Und da muss man so ein bisschen, das muss man ein bisschen trainieren, dass man es ins Hirn reinkriegt, dass man, dass man das so ein bisschen automatisiert, dass man immer da dran denkt, ähm, nicht so einen Quatsch, einen Quatsch-Text zu verlinken, sag ich mal, sondern wirklich im Link-Text das Link-Ziel zu beschreiben.
Dann hast du auch, wenn, wenn man das mal im Kopf hat, dann hat man auch nie das Problem, dass das nicht mehr, dass das barrierefreiheitsmäßig ein Problem wäre.
Und ich finde, mir hilft das, mir hilft das als normaler Nutzer auch, ähm, normal ist ein schlimmes, falsches Wort, das müssen wir rausschneiden, nein, schneiden wir nicht raus, habe ich mich jetzt versprochen.
Nein, als, äh, als jemand, der jetzt keine, keine, ähm, keinen Screenreader benutzen muss, ähm, hilft es auch, wenn ich weiß, was da jetzt genau verlinkt ist.
Und hier, ja, okay, ich klicke mal drauf, hier, so, mehr lesen.
Okay, gut, dann kommen wir noch ein bisschen zu Styling.
Ähm, man sollte links auf keinen Fall, äh, die Focus oder Focus-Visible-Styles wegnehmen, das ist irgendwie so ein beliebter Sport, dass man irgendwie, früher im Firefox, äh, hatten die dann so einen gepunkteten Rahmen, das fand ein Designer blöd.
Äh, und dann wurde der weggenommen, äh, mittlerweile ist es ja so, dass man das machen kann, wenn man Focus-Visible trotzdem definiert, dann ist das okay, weil dann das mit der Tastatur, mittlerweile gibt es da eine Lösung für, die, wo der Browser dann tatsächlich versucht zu erkennen, ähm, ist das jetzt, äh, ein Klick,
Klick auf den Link, ist der jetzt nur irgendwie durch den Klick fokussiert? Oder bin ich mit der Tastatur dahin gekommen? Ähm, das heißt, es gibt da mittlerweile gute Alternativen. Ähm, macht es einfach nicht. Focus, Focus-Styles sollten da bleiben.
Ähm, ähm, und wenn ihr mich glücklich machen wollt und ein bisschen kleinen Bonus noch kriegen wollt, dann stylt auch Visited und Active, äh, Zustände von den Links. Ähm, das finde ich, finde ich immer nett, wenn eine Seite das macht, wenn ich sehe, ah, da war ich schon mal, so.
Also gerade bei, bei so Artikeln, äh, Dokument, äh, ja, oder Dokumentation, jetzt MDN oder so, ne, da ist schon ganz gut zu sehen, hab ich, wo, bis wohin hab ich mich denn da schon mal durchgeklickt? In so einer Riesen-Link-Liste.
Genau, das wäre dann Visited. Und Active ist der Zustand, wenn ich, während ich gerade draufklicke, da hab ich früher, ähm, eigentlich immer so als, als Standard genommen, dass das ganze Ding sich dann so ein Pixel nach unten bewegt.
Dass ich quasi wirklich so merke, ah, ich bin jetzt, jetzt klick da jetzt gerade runter, ich klicke jetzt gerade drauf, so. Ähm, das hat natürlich dann unter Umständen noch das Problem, das muss man, da muss man dann aufpassen. Ähm, man darf den dann nicht einfach eins nach unten schieben mit Margin oder so.
Ähm, weil dann nämlich quasi, weil, weil, weil dann Dinge, ne, in dem Fall dann, weil unter Umständen ich dann mit der Maus am Ende über einen Punkt bin, der gar nicht mehr verlinkt ist, wenn ich das Ganze so mache, wenn er sich nach unten schiebt beim Klick.
Ähm, da muss man aufpassen, dass die Klickfläche, äh, bleibt. Ähm, und ich meine, wenn ihr, wenn, wenn es gut usable sein soll und man Links verstehen soll, was sie sind, dann am besten auch unterstreichen.
Also, das würde ich, das ist einfach die Best Practice im Web, wenn du, wenn du Links erkennen willst, lass sie einfach unterstrichen.
Ich weiß, viele machen das so, dass sie erst beim Mouse-Over, äh, unterstreichen. Da würde ich dann sagen, ähm, wie oft nutzt ihr euer Phone, um irgendwelche, oder Touch-Geräte, um irgendwelche Webseiten zu benutzen?
Ähm, da hast du nämlich dann einfach keine Unterstreichung mehr.
Das heißt, der Link muss eindeutig, ähm, erkennbar sein, dass es, dass es nicht der normale Text ist.
Und, ähm, da gibt es auch Barrierefreiheitsrichtlinien dazu, die erspare ich euch jetzt. Ich schicke euch auf ein Tool, äh, den WebAim-Link-Contrast-Checker.
Und, äh, wenn man da mal mit den Farben ein bisschen rumspielt, dann merkt man es gar nicht so einfach, weil nämlich, wenn man es genau nimmt, ähm, der normale Text muss ja zur Text, zur Seite, zum Seitenhintergrund oder zu dem Hintergrund, auf dem sich der Text gerade befindet, ähm, ähm, einen gewissen Kontrastwert haben.
Aber die Link-Farbe muss auch einen gewissen Minimalkontrast haben zu dem normalen Text und aber auch zum Hintergrund.
Und das kann dann unter Umständen schon ganz interessant werden, wenn man dann auch noch Fokuszustand mit reinzieht, ähm, wenn, falls der auch nur eine Farbe wäre, was eine schlechte Idee ist, man sollte bei Fokus immer eine Outline oder sowas, äh, verwenden, ja.
Angenommen, man würde jetzt den Fokuszustand auch nur per Farbe machen, macht es nicht, dann müsste das auch nochmal einen gewissen Kontrastwert haben und da gehen einem dann irgendwann die Farben aus.
Das wird dann irgendwann ein bisschen schwierig, das ist bei drei Farben schon schwierig, wenn man sich diesen Checker anguckt, bis vielleicht gerade drauf, ähm, die haben jetzt da halt diese Hardcore-Standard-Web-Farben genommen, Hintergrund weiß, Body-Text-Color schwarz und Link-Color einfach krasses Blau, das geht dann noch, ja.
Aber sobald man da mal ein bisschen rumspielt, merkt man so, oh.
Das ist echt, der Bereich ist sehr klein, in dem man da rumspielen kann.
Ich hab's auch grad mal umgedreht, schwarzer Hintergrund und weiß und dann muss die Link-Farbe, boah, das ist echt, dann schiebst du irgendwie so ein paar Pixel rüber und dann ist schon wieder Fail.
Deswegen, ähm, Links unterstrichen lassen, weil dann hab ich quasi ein eindeutiges Merkmal, womit ich den Link erkennen kann und dann muss ich mir nicht so viel Gedanken darum machen.
Ja.
Äh, um die Farbe.
Ähm, genau, das ist gar nicht, ist gar nicht so einfach.
Ja.
Ähm, genau, zu Kontrasten vielleicht noch, äh, weil ich vorhin, weil ich vorhin schon mal angesprochen hab, hier nochmal Contrast-Ratio.org, äh, sei hier erwähnt.
Ähm, genau, da könnt ihr Kontraste checken.
Das hat jetzt den dritten, quasi diesen dritten Parameter nicht mit drin.
Wenn ich jetzt irgendwie einen Link noch hab zum Text, das müsst ihr dann extra checken oder nicht.
Nutzt dafür dann, wenn ihr das braucht, einfach den WebAIM, Link-Contrast-Checker, der ist, äh, ziemlich cool.
Gibt's auch Color-Picker und dann kannst du irgendwie rumziehen und dann, genau.
So, ähm, vielleicht ganz kleines Detail, wir haben, ich hab grad schon von Fokus-Indikatoren, äh, gesprochen, Outline oder sowas.
Auch die brauchen einen, äh, 3 zu 1 Kontrastwert, äh, laut den Web-Content-Accessibility-Guidelines.
Das heißt, äh, die dürfen auch nicht irgendwie so ganz, äh, in einem ganz, äh, in einer ganz zarten Farbe sein, sondern am besten hat der Fokus-Indikator einfach dieselbe Farbe wie die Textfarbe.
Dann habt ihr kein Problem, wenn die Textfarbe schon den richtigen Kontrastwert zum Hintergrund hat.
Fokus, äh, Ring einfach in der gleichen Farbe machen, ähm, dann, äh, dann passt das alles schon.
Ähm, noch so ein Barrierefreiheits-Ding ist, Links sollten auch einen gewissen Abstand zueinander haben.
Ähm, ich glaube, der ist nicht so richtig, ich weiß nicht, ob der richtig definiert ist, aber so, dass man nicht aus Versehen den falschen Link drücken könnte.
Das heißt, also, wenn man jetzt, wenn man jetzt drüber nachdenkt, jemand hat zum Beispiel Parkinson, ähm, hat eh schon Probleme jetzt irgendwie ein Touch-Display zu bedienen oder so, ähm, man sollte ein bisschen Abstand haben.
Also, wenn so Links direkt aneinandergeklatscht sind, auch mit der Maus, finde ich das unangenehm, weil man dann, ähm, also Link-Flächen generell, äh, sollten gut treffbar sein.
Warte mal, hab ich das eigentlich noch? Ah, warte mal, das zieht mal nach oben noch.
Genau.
Da hat auch Google recht hohe Ansprüche. Also, bei unserer Firmenseite zum Beispiel meckert es immer an, dass auf, äh, Mobile.
Links irgendwie zu nah beieinander wären, aber ich hab noch nicht so ganz rausgefunden, welches jetzt genau meint.
Okay.
Ja, dann, äh, finden wir das vielleicht mal gemeinsam raus.
Interessanterweise, es kommt eigentlich mein Ton grad gut bei dir ein, ich muss nochmal was fragen.
Okay, dann ist alles in Ordnung, weil gerade irgendwie, äh, die Upload-Rate mal wieder runtergegangen ist, so wie ich das im Stream auch manchmal kenne.
Ja, nee, ist alles okay, Bild und, äh, Togen.
Irgendwas war, irgendwas war gerade. Egal.
Äh, machen wir weiter. Ähm, also, in der WCAG wird auch empfohlen, dass, ähm, Link-Größen, also die, die Touch-Flächen und ausgenommen ist Text.
Text darf so sein, wie Text ist, der sollte natürlich generell eine gewisse Größe haben, dass man ihn lesen kann.
Also, ich würde sagen, mindestens 16 Pixel, äh, oder ein RAM, würde ich auf jeden Fall empfehlen für Textgröße, jetzt mal abgesehen davon.
Ähm, aber Link-Größen, wenn nicht, wenn es kein Text ist, wird empfohlen 44 mal 44 Pixel, äh, äh, ja, CSS-Pixel, äh, mindestens.
Ähm, und ich glaube auch, so manches, äh, Hamburger-Icon, äh, verstößt dagegen.
Und das ist auch total okay, aus meiner Sicht, äh, wenn das Icon selbst nicht so groß ist, aber die Klickfläche sollte so groß sein.
Das heißt, man kann ja auch durchaus mit Padding oder so bei einem Element, ähm, die Klickfläche noch größer machen als das Visual-Element selbst.
Und ich, auch das finde ich, ist eigentlich, man kann jetzt sagen, es läuft unter dem Bereich Barrierefreiheit, ähm, eigentlich auch ein, ähm, ein User-Experience-Feature, weil ich es auch gut finde, wenn ich was gut treffen kann.
Wenn ich nicht, wenn ich so das Gefühl habe, ich muss es nicht perfekt genau treffen, sondern ich kann auch ein bisschen daneben tippen und es ist immer noch okay.
Das ist auch teilweise bei nativen Apps so, ja, du, du musst dann irgendwie das X, du musst es exakt treffen.
Ich habe teilweise sogar das Gefühl, selbst wenn du in den Zwischenraum des Buchstabens klickst, manchmal greift es nicht, nein, du musst auf die Linie des X treffen, sonst geht das nicht zu.
Oder gerade irgendwie auch bei Werbung, wo das ja absichtlich eingesetzt wird, dass du eigentlich auf das X klicken willst, aber natürlich erwischst du das X nicht, sondern du klickst auf den Werbebanner.
Das hasse ich.
Wozu gibt es dann das X überhaupt, ne?
Das ist die gute Frage.
Ähm, okay, dann, äh, kommen wir noch zu, äh, noch zu einem guten Thema, Linkmissbrauch, habe ich es mal genannt.
Ähm, nutzt Links für nichts anderes als Links.
Und die beschriebenen Protokolle, die wir jetzt heute hatten, die standardmäßig, ähm, da mit drin sind.
Was meine ich damit? Ähm, Links sind keine Buttons und Buttons sind keine Links und nur weil man draufklicken kann, es nicht automatisch ein Link ist.
Links werden ganz gerne verwendet für irgendwelche JavaScript-Aktionen auszuführen.
Irgendwie so On-Click-Händler, das kann sein, dass da ein On-Click direkt drin steht in einem A-Element oder auch, dass es irgendwie per JavaScript draufgelegt wurde als Event-Listener.
Das ist einfach keine gute Idee. Ähm, macht JavaScript-Sachen, nehmt dafür einen Button oder nehmt dafür, ja, im besten Fall, eigentlich nehmt für JavaScript,
Sachen, die auf der Seite passieren sollen, nehmt dafür einfach ein Button-Element. Das ist dafür gemacht.
Der Link ist dafür, für die beschriebenen Protokolle, das nehme ich, das sage ich extra, weil, ähm, da ich nicht unbedingt, wenn ich jetzt ein Mail-To-Protokoll habe, nicht unbedingt auf eine andere Seite komme.
Also, kommt auf eine andere Seite oder es wird eins der Protokolle ausgeführt und ich lande dann entweder auf einer anderen Seite oder in einem Mail-Programm oder es wird irgendwo angerufen oder so.
Aber macht kein JavaScript-Kram damit, irgendwie sowas, äh, was, was, ich habe hier genau in der Demo, die ich gebaut habe, ähm,
habe ich auch noch ein paar Beispiele, äh, die habe ich mal, äh, genannt, Mist, den man nicht machen sollte, ähm, und dann habe ich hier sinnloser JavaScript-Link und Quatsch.
Äh, ähm, und das eine Beispiel ist halt, äh, ein JavaScript-Link, der hat im href-Attribut tatsächlich, das gibt es ja manchmal, ein JavaScript-Doppelpunkt-Void.
Äh, äh, nicht, nicht machen, nicht machen, ähm, und noch viel schlimmer ist es ein Link, der gar kein href-Attribut hat und Non-Click-Händler einfach nur draufliegen hat.
Der wird dann ja nicht mal, die Browser, ähm, helfen einem da eigentlich, dass man sowas nicht macht, indem sie zum Beispiel keinen Handcursor dann, ähm, äh, da zeigen.
Ähm, und auch in dem Fall jetzt, obwohl die Links bei mir standardmäßig unterstrichen sind, nicht unterstreichen, um so zu, von wegen, klickt da, klickt da einfach nicht drauf.
Ähm, Leute machen, aber die sagen, oh, was, ah, Quatsch, super, ähm, dann muss ich das halt per CSS wieder drauflegen und die Unterstreichung.
Nee, macht das einfach nicht, nutzt dafür einfach kein Link-Element.
Äh, alles schon gesehen.
Alles schon, viel zu oft gesehen, es geht auch irgendwie nicht weg, ich hab sogar das Gefühl, dass diese ganze, ich mach JavaScript-Links, warum, aber warum dann überhaupt, warum nehm ich dann nicht einfach konsequenterweise ein Span-Element oder so?
Machen die Leute auch noch viel schlimmer fast.
Wegen der Semantik.
Und man kann's nicht, man kann's nicht fokussieren mit der Tastatur wahrscheinlich und das muss ich, oh Gott, ah, nein.
Ja, muss halt Tab-Index dann setzen.
Hört euch, hört euch die Folge Semantik HTML an, äh, die ist schon ein bisschen älter, äh, wenn ihr darüber noch ein bisschen mich schlecht gelaunt abrenten hören wollt.
Da hab ich auch, glaub ich, viel Redeanteil gehabt in der Folge.
Ähm, dann vielleicht noch, äh, zum Abschluss der Bereich, ich hab ihn mal guter Ton, ähm, genannt.
Ähm, Links, die nicht zu HTML-Seiten oder zu, zu anderen Pages, äh, zeigen.
Wenn ihr wollt, dass ich da glücklich bin und viele andere auch, ähm, dann schreibt das dazu, dass es ein PDF ist oder eine Echse oder sowas.
Schreibt einfach in Klammern Pfeiltyp oder sowas oder PowerPoint oder so.
Ähm, macht das, kennt, kennzeichnet das.
Und, äh, wenn das was Größeres ist, dann am besten auch noch dazu schreiben, ähm, wie groß das Ding ist, was ich mir nämlich dann gleich runterlade.
Weil das wird nämlich dann ziemlich sicher passieren, wenn der Browser damit nichts machen kann, wenn es jetzt eine PowerPoint ist oder ein Excel oder eine Excel-Datei, dann wird man, äh, wird das runterladen.
Und wenn ich da jetzt gerade, ähm, 500 MB-Exe runterlade, während ich gerade im Zug bin und damit mein Datenvolumen kille, dann ist das vielleicht cool, wenn ich es vorher weiß.
Weil, das weiß ich nämlich unter Umständen nicht.
Ähm, und eine Sache, die spreche ich explizit jetzt nicht an, jetzt habe ich es schon angesprochen, aber die spreche ich jetzt nicht an, äh, in dem MDN-Artikel gibt es auch noch einen ganzen Blog, ähm, ARIA-Rolls, ähm, bei Links, was eigentlich kompletter Quatsch ist, ähm, also, da steht dann, ja, wenn das das href-Attribut hat, dann darf man folgen, der ARIA-Rolls darf der Link da nicht, vergesst einfach ARIA-Rolls bei Links.
Nutzt Links einfach als Links, dann braucht ihr keine ARIA-Rolls und vergesst einfach, dass es ARIA gibt bei Links, nutzt Links einfach als das, was wir jetzt gerade beschrieben haben und dann ist alles gut.
Und dann, ähm, sparen wir uns einfach das ganze Gedöns damit und, ähm, ja, dann ist alles fein und, äh, wir sind jetzt vielleicht dann auch tatsächlich fertig mit dem Thema, kann das sein?
Fertig mit dem Brocken.
Ich muss gerade mal, ich muss gerade mal gucken. Wow, oh Gott, wir haben schon, gut, ich weiß, wir haben ein bisschen angefangen aufzunehmen, ein gutes Stück, bevor die eigentliche Aufnahme startet, aber ich kann ja jetzt mal disclosen, ähm, mein, äh, Aufnahme-Recording-Counter ist jetzt gerade bei einer Stunde 50.
Bei mir 1,45, weil ich hab nochmal gestoppt und nochmal gekriegt, also, genau.
Also sind's vielleicht fünf Minuten weniger, ähm, aber ich, man kann jetzt nicht sagen, dass wir uns jetzt bei dem Thema groß verquatscht hätten.
Wir haben bei der Retro-Wissen schon, ja, aber beim Thema sind wir relativ gut durchgezogen jetzt.
Und das heißt, es gibt einfach viel zu sagen über Link und wir sind jetzt gar nicht in diese ganze Rail-Geschichte zum Beispiel eingestiegen.
Genau, es gäbe noch mehr zu sagen, also.
Ich würde jetzt nicht behaupten, dass wir jetzt alles haben. Wir haben uns jetzt, äh, kann man jetzt direkt auch sagen, äh, vorhin schon gesagt, an dem MDN-Artikel zum A-Element entlanggehangelt.
Und ich will jetzt nicht ausschließen, dass in irgendeinem Aspekt noch was steht, was wir jetzt nicht mit drin haben.
Gut möglich. Also.
Der Chef wird wieder in die Kommentare schreiben.
Der Chef schreibt jetzt wieder, ah, ihr habt noch, ihr habt noch diese 27 Attribute vergessen und man kann noch übrigens diese Schweinereien damit machen.
Äh, bitte gerne, falls ihr noch was habt, ähm, was ihr findet, was noch dazugehören sollte, gerne auch irgendwelche komischen Schweinereien, Standardabweichungen.
Ähm, wir haben jetzt übrigens den kompletten Blog, den es noch gäbe, ähm, Deprocated-Sachen in der MDN, den haben wir komplett übersprungen.
Stimmt.
Da gab's auch noch mal ganz, ganz, ganz viel, was man dazu noch hätte sagen können, aber das ist alles alter Quatsch, den, den man jetzt eigentlich nicht mehr wissen muss.
Also, falls ihr an Geschichte interessiert seid, dann könnt ihr da gerne noch mal einsteigen in der MDN und könnt euch da noch mal ein paar Sachen angucken.
Das haben wir jetzt weggelassen, weil es wäre, ihr habt ja jetzt schon gemerkt, ähm, das war jetzt schon viel, das wäre noch extremer explodiert, also, genau.
Und im Gegensatz zu anderen Podcasts teilen wir das dann nicht auf in zwei Folgen, sondern ihr kriegt das in einer.
Stichelt, stichelt.
Ja, dann, äh, würde ich sagen, machen wir kurz Werbung und dann kommen wir zum Geilteilen, oder?
Ah, noch Werbung, genau, noch Werbung.
Hey, hey du, schön, dass du da bist.
Na, öfter hier?
Dir gefällt, was du hörst und du magst es am liebsten werbefrei und unabhängig?
Dann freuen wir uns sehr über ein paar Euro in unserem digitalen Strumpfband unter www.iv.de
slash spende auf www.iv.de slash unterstützen findest du noch circa 69 weitere Wege, uns zu supporten.
Wir danken dir.
Ich musste gerade sehr lachen, ihr habt es vielleicht auch gehört, weil wir schneiden da sowas auch nicht raus.
Ähm, der Konstantin hat die ganze Zeit währenddessen Instrumente mitgespielt, hat Air Drums gespielt und Air Klavier.
Es war einfach sehr schön.
Also genauso, wie man sich das vorstellen würde, wie jemand ein Instrument spielt, wenn so ein Song halt kommt.
Genau, so ein Sex-Song, nenne ich das jetzt mal.
Ja, oder so Bar, Bar-Piano.
Lass mich, lass mich in meinem Gedanken, dass es einfach zu dieser Musik findet Sex statt.
Okay.
Wenn auch nur im Kopf.
Aber er findet statt.
Dann wird's jetzt geil.
Das Geiltein.
Geiltein.
Oh Gott.
Ich hab ja schon vor 100 Jahren gesagt, ich müsste das nochmal neu aufnehmen, aber ich glaube, es muss immer so bleiben.
Nein, nein, nein, nein, das bleibt so.
Nein, weil ich weiß, dieser Effekt, den ich da draufgelegt hab, und dann weiß ich genau, dass es da, ach ja, ist egal.
Ich hab das ins iPad eingesprochen damals, mit dem iPad-Mikrofon und hab dann gegeben, was ging um den Ton, egal.
Ja, das kann ich geändert, das bleibt.
Ja, wir haben zwei Geilteile, ne?
Ich fang mal an mit meinem, das hab ich, äh, ich hab letztens, also im letzten Stream hab ich irgendwie erwähnt, dass ich zur Zeit gerade eine Serie schaue, so eine Doku-Serie vom WDR.
Und das hat irgendwie erstaunlich viel Anklang gefunden, ich hab das so nebenbei erwähnt, und dann kam irgendwie, oh, gibt's da neue Folgen?
Und irgendwie drei, vier ChatterInnen haben dann plötzlich da drauf eingestiegen, obwohl das nur so eine Randnotheel sein sollte.
Und dann dachte ich, Mensch, das wäre doch vielleicht auch ein Geilteil wert.
Wir stellen ja hier immer wieder Sachen vor, die auch gar nichts mit Technik zu tun haben.
Und in dem Fall ist es eben eine Doku-Serie, und zwar Feuer und Flamme.
Da werden die Feuerwachen von Bochum, zumindest in den späteren Staffeln, ich glaub Staffel 1 und 2 sind Gelsenkirchen noch, werden da begleitet.
Und zwar vom eingehenden Anruf oft bis, ne, dann kommen die da runtergerutscht an ihren Stangen, so wie man das sich vorstellt, passiert das tatsächlich.
Und da werden halt die Einsätze gezeigt, also Brände oder auch Türöffnungen, manchmal auch nur technische Hilfeleistungen, wenn Personen irgendwie getragen werden müssen.
Und auch nicht nur immer irgendwie was mit Feuer oder so zu tun hat, sondern auch wirklich Notarzt oder RTW, also Rettungswageneinsätze.
Weil nämlich, wie ich dadurch gelernt habe, das auch von Bundesland zu Bundesland unterschiedlich ist.
Und in Nordrhein-Westfalen ist es so, dass diese Rettungswegen direkt der Feuerwehr unterstellt sind.
Das heißt, das läuft da alles dort in die Zentrale, man ruft dann die Feuerwehr und dann schicken die einen Rettungswagen raus, wo die Leute auch in Feuerwehr, da steht überall Feuerwehr drauf.
Obwohl das Rettungswagen ist, was man bei uns hier vom DRK und sowas kennt, weiß ich nicht, ob es das da oben dann auch gibt zusätzlich.
Und wenn es ganz schlimm ist, kommt dann der Notarzt noch dazu.
Und dann geht es halt wirklich von Wohnungsbränden über Unfälle auf der Autobahn und alle möglichen.
Aber auch das Leben auf der Wache, wie das so ist, was die da so machen, wenn die dann ja essen oder was die machen, wenn sie gerade nichts zu tun haben, wie die trainieren und so.
Bitte?
Das Leben auf der Wache.
Ja, ja, die sind ja wirklich, die haben ja dann teilweise so 24-Stunden-Schichten, die schlafen ja dann da auch.
Genau, wenn du Berufsfeuerwehr bist, genau, dann bist du ja da.
Genau, also das Berufsfeuerwehr.
Viel Idle-Time wahrscheinlich.
Und die schlafen dann und dann mitten in der Nacht geht halt der Alarm los und dann zack, schnell raus aus den Betten und mittags wird gegessen.
Und wahrscheinlich kommt genau dann natürlich ein Alarm, wenn die gerade eigentlich am Essen sind.
Also es ist echt cool zu sehen, wie die Leute auch da so hingekommen sind.
Also für viele ist das ja, glaube ich, auch so ein Kindheitstraum.
Ich will mal Feuerwehrmann werden, Feuerwehrfrau werden.
War jetzt bei mir nicht.
Also ich bin gar nicht so ein Feuerwehr-Nerd irgendwie.
Aber trotzdem finde ich die Serie irgendwie echt cool.
Einfach auch so, weil, glaube ich, auch die Wertschätzung fehlt, was die eigentlich so auf sich nehmen für uns als Gesellschaft.
Ich meine, klar, die kriegen auch ihr Geld, das ist auch ihr Beruf.
Aber das ist schon echt ein Knochenjob, was die da machen.
Wenn die dann irgendwie mit Sauerstoffflasche auf dem Rücken und schwere Montur und dick eingepackt irgendwo hingehen, wo es noch mehrere hundert Grad hat und dann auch noch irgendwie Treppen steigen in der Montur und so und dann mit den Schläuchen hantieren.
Also das ist schon, ja, alle Achtung.
Und sie erwähnen auch immer wieder, wie wichtig auch die freiwillige Feuerwehr ist, die halt dann zur Unterstützung kommt.
Die spielen halt nicht nur Feuerwehrs, sondern die sind halt wirklich, die sind dann in dem Moment, wenn die da zugerufen werden, sind die Teil des Teams.
Und wie wichtig es halt auch ist, dass die dann wieder Ressourcen freigeben können, dass die freiwillige Feuerwehr was übernimmt und dann wieder Einsatzkräfte freigegeben werden.
Also macht einfach irgendwie Spaß, das zu schauen.
Wir haben das jetzt angefangen von Staffel 1.
Es gibt aktuell sieben Staffeln, sind jetzt, glaube ich, bei Staffel 5.
Hat da was zu tun.
Genau, haben wir jetzt mal so gebinged und, ja, ist einfach irgendwie cool.
Er erinnert mich ein bisschen an Notruf, aber ich glaube, das war ja nicht echt.
Früher auf RTL in den 90ern.
Ah ja, gut, das war wahrscheinlich eher so RTL gespielt.
Ja, so wie ja RTL-Sachen halt sind.
Ja, hier irgendwelche Richter und irgendwelche komischen Pfand, nee, wie heißt es, Eintreiber oder so.
Ja, ja, aber Notruf war halt tatsächlich, da ging es um so Rettungskräfte.
Aber ich bin mir nicht sicher, inwiefern das echt war.
Nachgestellt wahrscheinlich.
Genau.
Aber das ist halt wirklich echt.
Also, ne, da ist auch Pietät vorher gemacht.
Jetzt nicht so wie bei vergleichbaren Ami-Serien, wo dann halt irgendwie schön draufgehalten wird.
Ähm, sondern, ne, es wird verpixelt.
Äh, die Leute werden nur mit Zustimmung da auch wirklich gezeigt.
Ähm, und, äh, ja.
Also, ist wirklich, äh, cool gemacht und interessant auch mal zu sehen.
Man lernt, äh, viel Neues auch, wie schwer es zum Beispiel ist, neue Elektrofahrzeuge, äh, zu löschen.
Dass die dann 24 Stunden in Wasser getaucht werden müssen, weil du anders nicht verhindern kannst, dass der Akku dann weiter immer wieder sich entzündet.
Ja, also, kann ich mir empfehlen.
Also, falls ihr mal ein zuverlässiges Feuer braucht, zündet ein E-Auto an.
Pst.
Genau.
Ich weiß nicht, ich kann ja auch positive Dinge haben.
Okay, gut.
Ähm, genau, dann kommt von mir noch ein Geilteil.
Äh, ich bin, ich hab ja mein, äh, mein neues Blog mit Eleventy gebaut.
Und dabei bin ich da drüber gestolpert und ich werde jetzt das nicht so weit ausführen, wie wir im Stream da abgebogen sind.
Da sind wir ja in jede, jede, jede Gelegenheit, haben wir da genutzt.
Ähm, und zwar, also, mein Geilteil sind GitHub Codespaces.
Ähm, das kannte ich nämlich bis dahin nicht.
Und ich bin drauf gestoßen über, ähm, also für Eleventy gibt es so, ähm, Project Starters, in denen schon bestimmte Dinge für einen gemacht werden.
Sodass man nicht von Null starten muss mit diesem, mit diesem System, sondern es gibt halt eben zum Beispiel, ich glaub, das ist auch von der, ähm, von dem Eleventy-Macher selbst-maintaint, ist Eleventy-Base-Block, heißt das.
Und ich wollte halt einen Blog bauen und dachte mir, ja, das klingt irgendwie gut, da kann man was drauf aufbauen.
Und dann hab ich in GitHub, auf GitHub, ähm, in dem Repository von dem Eleventy-Base-Block einen Knopf gesehen, den ich nicht kannte vorher von GitHub.
Und dachte ich mir, ich drück immer mal gerne auf Knöpfe, die ich nicht kenne.
Das ist halt so ein grüner Knopf, der will, dass man da drauf drückt.
Ähm, also im Dark-Theme sticht der sehr hervor und, äh, der heißt Use this Template und, ähm, also der Link kommt dazu, kommt auch, ähm, in die Shownotes.
Und wenn ich da drauf drücke, dann geht so ein kleines Menü auf und dann kann ich sagen Create New Repository oder Open Code in Codespace.
Und wenn ich das mache, dann, äh, passiert so was Ähnliches, wie wenn ich bei GitHub in dem Repository einfach nur Punkt drücke.
Es öffnet sich ein Faust-Code im Browser.
Das ist so weit, so gut.
Das kennen wir schon oder zumindest ich kannte das schon.
Was bei diesen Codespaces aber anders ist, ist, ich kann darin auch Dinge im Terminal machen.
Ähm, das bedeutet, da wird tatsächlich irgendwo eine Kiste für mich, äh, gebaut.
Nicht nur das, ich habe nicht nur Zugriff auf das Repository und kann da ein Code ändern, sondern ich kann da zum Beispiel auch Sachen hinterlegen, die da im Terminal passieren sollen.
In dem Fall wird nämlich zum Beispiel direkt, ohne dass ich was machen muss, ein NPM-Install aufgerufen.
Das passt, das läuft dann auch auf dieser Kiste, die irgendwo in der Cloud rumschwebt.
Ähm, und dann kriege ich tatsächlich sogar auch, wenn ich möchte, kann ich mir dann so ein Development-Server starten und den kann ich direkt im Browser dann auch aufrufen.
Das heißt, ich habe eine komplette Entwicklungsumgebung im Browser.
Ähm, ich hatte das schon mal, äh, glaube ich, auch im Podcast erwähnt, ähm, bei, als ich mit, ähm, an dem Elk mitentwickelt, ja, mitentwickelt ist ein bisschen übertrieben.
Ich habe in den Language-Files ein bisschen was angepasst, in den Deutschen, ähm, und viel mitgeredet und hatte viel Meinung.
Ihr kennt mich ja.
So, und, äh, da gab es dieses Stack-Blitz, das war jetzt aber nichts, was in GitHub integriert war.
Jetzt gibt es aber ein Tool, das tatsächlich von GitHub in GitHub integriert ist, äh, wo ich genau solche Sachen machen kann.
Ich kann dann auch direkt da committen ins Repository.
Gut, das geht mit, äh, wenn ich einfach Punkt drücke im Repository geht es auch.
Aber ich kann tatsächlich die Anwendung da auch laufen lassen, äh, install machen, äh, NPM-Install machen und alles Mögliche.
Das heißt, ich habe quasi ein Null-Setup-Entwicklungsumgebung, wenn ich jetzt jemanden neu reinhole, der daran mitentwickeln möchte.
Gerade für Open-Source-Projekte ist das, glaube ich, ziemlich cool.
Dann habe ich quasi, der braucht gar nichts auf seinem Rechner, der muss sich nichts aufsetzen, ähm, der muss nichts installieren.
Irgendwie, der muss keine Readme irgendwie durchmachen mit, äh, du musst jetzt hier, äh, dies und dies und dies und dies und dann kannst du so und dann geht's vielleicht und dann musst du noch die Umgebungsvariablen setzen und dann geht's.
Nee, musst du nicht.
Du kannst sowas vor, komplett vorkonfigurieren und, äh, an deinem Repository dranhängen und das kann jeder verwenden und das ist eine ziemlich coole Sache, ähm, wie ich finde.
Natürlich wird man jetzt da dann noch mehr an die Plattform GitHub, äh, gebunden durch sowas, ähm, muss man sich überlegen, ob man das will.
Aber, ähm, um mal eben eine kleine Änderung irgendwo zu machen an irgendeinem Projekt, finde ich das wirklich genial und das, da kann man dann auch direkt, äh, wie gesagt, einen Server starten und dann auch die Auswirkungen davon sehen, das finde ich ziemlich gut.
Einfach auch, um zu schauen, äh, kriege ich den Bug vielleicht selbst gefixt, ist das viel Aufwand, wenig Aufwand, äh, ohne dass ich das jetzt komplett bei mir auschecken muss, weil es geht einfach auch schneller, das dort, äh, zu installieren und ich finde es auch ziemlich cool.
Natürlich, klar, wenn du, ähm, du hast irgendwie drei parallel, kannst du kostenlos laufen lassen, das finde ich schon mal immerhin cool.
Wenn du halt mehr willst und dann irgendwie auch Zustände, glaube ich, speichern können willst und so, dann bitten die dich natürlich auch zur Kasse, aber an sich finde ich das cool, dass es auf jeden Fall schon mal frei nutzbar ist.
Ja.
Gut, Geilo, Teilo, Endo, haben wir da mit und dann kommen wir jetzt zu dem, zu einem Lieblings-Jingle.
Das Ende.
Ja, das war's mal wieder, schön war's.
War der erste Podcast des Jahres und wir kündigen auch gleich schon mal an, dass der nächste kurzzeitig der letzte wieder wird.
Also wir haben noch einen Podcast in Planung, bevor Moritz sich wieder auf die große Reise um die Welt macht.
Ich glaube in dem Fall tatsächlich so um die halbe Welt.
Ja, also ich sag's mal so, ja, die halbe, aber irgendwie weiter weg kann man dann fast nicht sein, so.
Ja.
Von zu Hause.
Genau, und da gibt's noch eine Folge voraussichtlich am 4. Februar und ein paar Streams gibt's vorher noch.
Genau, Streams haben wir noch einige geplant.
Und dann, danach müssen wir mal gucken, wann's dann wieder weitergeht.
Genau, also ich kann ja vielleicht mal sagen, ich bin, so wie es jetzt geplant ist, im Mai dann wieder da und im Mai gibt's ja auch den Hot-Hub-Stream und im Mai, denke ich, werden wir dann auch nochmal einen Podcast machen, aber da gibt's jetzt noch kein genaues Datum.
Aber ihr wisst ja, ihr seid's ja mittlerweile gewohnt von uns.
Wir sind unsere einzige, unsere Regelmäßigkeit ist, dass wir unregelmäßig erscheinen mittlerweile.
Früher haben wir das ja mal geschafft mit alle zwei Wochen, das ist jetzt leider, aufgrund aller möglichen Umstände schaffen wir das nicht immer.
Ja, ich hoffe, ihr verzeiht's uns und bleibt uns trotzdem gewogen und hört mal wieder rein und hört auch mal vielleicht alte Folgen noch, falls ihr die noch nicht gehört habt.
Und hinterlasst mal auch schöne Sternebewertungen bei Podcast-Portalen, gerne auch bei Spotify, da sind wir jetzt ja mittlerweile auch, weil wir müssen, weil ihr wolltet, das so.
Ja, empfehlt uns weiter an KollegInnen.
Genau, empfehlt uns weiter.
Ja, ich bin gerade am überlegen, fehlt noch irgendwas?
Kauft unsere T-Shirts, geht mal auf unsere Unterstützenseite und guckt mal, was ihr da so machen könnt.
Da gibt es einiges, wie ihr uns weiterhelfen könnt.
Und ich habe noch eine kleine Geschichte in eigener Sache.
Ich werde dazu auch noch einen kleinen Post schreiben, die Tage.
Wie bin ich, wieso habe ich das denn vorhin aufgeschrieben, weil wir irgendwas hatten mit Retro?
Also, ich habe auf jeden Fall noch Sticker.
Es gibt ja bei uns immer Sticker.
Ihr könnt immer Sticker haben von uns, wenn ihr uns das Porto schickt und eure Adresse.
Dann kriegt ihr WWS-IV-Sticker und auch gerne Spaghetti-Java-Skript-Sticker.
Und ich werde jetzt demnächst die Tage noch eine Aktion machen.
Noch andere Sticker.
Ich habe die tatsächlich mal sortiert und fotografiert.
Ich habe nämlich eine riesen Stickertüte mit allen möglichen Stickern, die ich über die Jahre gesammelt habe auf Konferenzen und auf diversen Events und so weiter.
Ich gucke gerade so ein bisschen nach links, weil da liegen sie nämlich gerade.
Und ich habe mir so gedacht, ich habe auch noch so ein paar für mich aufgehoben, aber es sind unglaublich viele, wo ich mir sicher bin, die werde ich selbst nie irgendwo hinkleben.
Und es wäre vielleicht, also ich finde, es ist eine gute Auswahl an Stickern, weil ich nehme nicht jedes Firmenlogo an Stickern mit.
Ich nehme eigentlich nur welche mit, wo ich denke, ah, das ist ja eigentlich ganz cool.
Also es ist durch meinen Filter schon mal durchgelaufen.
Durch meinen, finde ich, ganz gut Filter, ist es schon mal durchgelaufen.
Und vielleicht gibt es ja auch jemanden, der die gut findet und dann muss ich sie nicht wegwerfen.
Und ich werde da demnächst auf jeden Fall, folgt mir auf Mastodon, genau, Mastodon Social, findet ihr auf meiner Webseite moritzgießmann.de, findet ihr meinen Mastodon Account, folgt mir da.
Da werde ich auf jeden Fall jetzt vielleicht, wahrscheinlich ist es schon passiert, wenn die Podcast-Folge rauskommt, weil ich hatte vor, das jetzt auch am Wochenende noch zu machen, werde ich einen Post veröffentlichen, wo die ganzen Sticker drauf sind.
Und dann ist tatsächlich der Deal einfach gegen Porto oder auch, wenn ihr mögt, auch gegen kleine Spende, wie ihr wollt.
Könnt ihr das bei mir bestellen, solange der Vorrat reicht?
Da sind wirklich ein paar witzige Sachen dabei.
Ich habe zum Beispiel noch so einen Sag-Nein-zu-Inline-Sticker zum Beispiel.
diverse aus dem Chaos-Umfeld irgendwie witzige, wer das hackt, ist doof und, keine Ahnung, noch ein paar witzige, ihr werdet es dann sehen, genau.
In eigener Sache, wie gesagt, bis die Podcast-Folge erscheint, ist der Post wahrscheinlich schon erschienen auf Mastodon, könnt ihr euch das mal anschauen und dann euch einfach bei mir melden, falls ihr da was haben wollt.
Genau. Und für die, die keinen Mastodon haben, keine Ahnung, müssen wir noch einen anderen Weg finden, weil nee, ich weiß ja, ich weiß ja, dass es ein paar Personen gibt, die uns sehr gewogen sind und gerne den Podcast hören und auch im Stream dabei sind, die keinen Mastodon haben und uns dann per Mail schreiben.
Falls ihr tatsächlich sagt, oh ja, Moritz, wir vertrauen deinem Geschmack so sehr, du hast bestimmt ganz tolle Sticker, zeig doch mal, dann könnt ihr uns auch gerne eine E-Mail schreiben, weil E-Mail habt ihr wahrscheinlich, schreibt uns gerne auch eine E-Mail, dann antworte ich euch da drauf, dann kriegt ihr das Foto, dann könnt ihr da mal reinschauen.
Genau. Und wie gesagt, Porto sollte drin sein und dann kriegt ihr das, wenn ihr wollt, kostenlos.
Genau, damit haben wir die Sticker-Sache abgegeben. Eigentlich hätte man auch in zwei Sätzen sagen können, ne?
Ich hab mich jetzt dreitausendmal wiederholt. Das wären ja nicht wir, wenn wir das kurz abgehandelt hätten.
Okay, dann.
Das war die erste Folge, 2024.
Wow.
Ja.
Gut, ja, und ich würde sagen, dann ist sie hiermit beendet.
Genau.
Ja, dann vielen Dank fürs Zuhören und bis zum nächsten Mal.
Und hört das Outro mal bis zum Schluss.
Genau.
Bis dann.
Ciao.