HTML VON A BIS Z-Z VII: img, map und area

Wo wir sind ist vorne Folge 69. Heute sprechen wir in unserer HTML Serie über Image, Map und Area. Herzlich Willkommen bei Wo wir sind ist vorne. Frontend Fakten Frotzelein. Der Late Night Frontend Talkshow rund um Webdesign und Entwicklung. Es reden sich um Head und Kragen, HTML Fundamentalist Moritz Glanz und Javascript Jongleurin Sarah Groß.

Herzlich willkommen in 2025. Wir sind wieder da und wir machen wieder Podcast. Ja, ich lasse mir die Laune nicht verderben von der ganzen Welt und dem ganzen Kram, der irgendwie passiert. Es ist mir egal. Ich hab sogar Bier. Ich hab tatsächlich heute nur ein Glas Wasser und das schmeckt nicht mal. Ich habe das aus dem Wasserhahn rausgelassen und es schmeckt ganz komisch. Ich trinke heute einfach nichts. So, heute gibt es auch mal wieder Content. Ja. Ganz, ganz überraschenderweise.

Dann sage ich mal, was ich hier für ein Bier habe. Ich habe ein Stugge Craft Beer und drüber steht Beers Not Dead und das habe ich zu Weihnachten geschenkt bekommen von einem guten Freund von mir. Der hat mir aus seiner Heimat, aus Winterbach in der Pfalz, da macht jemand Craft Beer und ich zeige es mal kurz. So sieht es aus und da hatte ich vier verschiedene Sorten und das ist die Sorte Witt Spolt, aber Witt Spolt, Witt Bier, Bière Blanche und ich habe vorhin noch mal drauf gelesen,

was da drauf stand. Ich fand es ganz interessant, weil ich kannte jetzt Witt gar nicht. Wahrscheinlich sagen alle, was das kennst du nicht. Hier steht belgisches Weißbier, das seit den 50er Jahren vermisste in Deutschland. Fast unbekannte Pendant des bayerischen Weißbieres wurde vom belgischen Milchmann Pierre Selye 1965 wieder zum Leben erweckt. Seitdem erfrischt es wieder mit einer pikanten, orangigen, zitronigen Fruchtigkeit in Kombination mit einem cremigen Mundgefühl.

Richtig kalt genießen. Und jetzt kommt was, womit ich nicht gerechnet habe. Musikempfehlung, Doppelpunkt. Sonic Youth Sugar Cane. Kenn ich nicht, aber kann man ja mal reinhören. Fand ich interessant. Sehr cool. Passt auch Bier ist noch da. So, dass wir das wieder aufleben lassen, oder du zumindest. Und es ist auf jeden Fall regenbogig hier, guck mal. Die Geschichte hier habe ich schon gesehen, ist mir gleich auch gefallen. Sehr cool. Ja, ich habe noch zwei

andere Sorten. Ich hatte, genau, ein IPA habe ich schon getrunken und dann habe ich noch zwei andere, aber heute soll es dies hier sein. Back to the Roots. Wie wir das früher alles hatten, mit so verschiedenen Craft Beeren. Sehr schön. Auf jeden Fall eine 0,33er Flasche. Ich habe es vorhin, ich mache das immer, weil ich will, dass es ein bisschen zischt zumindest. Bewege ich die Flasche vorher so ein bisschen, damit es nicht übersprudelt und das habe ich mittlerweile ganz

gut raus, damit ihr auch was hören könnt hier. Also ich will auch den letzten Retro-Punkt noch nicht vorweg nehmen, aber es wird mehr Podcasts wieder geben dieses Jahr. Ich glaube, das kann man schon mal sagen, weil wir jetzt gerade dabei sind, so Back to the Roots und Craft Beer und das ist unser Ziel. Dann nimmst du doch nicht vor. Ne, nehme ich ja gar nicht. Dann stoßen wir noch kurz an durch das Portal. Genau, mit meinem ekligen Wasser bitte. Sehr gut, so. Genau,

wir setzen unsere HTML-Element-Serie fort. Überraschendes O. Das ist lecker. Das ist wirklich, also die Beschreibung ist schon ein bisschen übertrieben, aber das Fruchtige, das kann ich schon finden darin. Cool. Und würdest du sagen, es ist dem deutschen Weißbier ähnlich? Ne, überhaupt nicht. Das ist gut, weil ich mag kein Weißbier. Es ist ganz anders. Es ist auch

nicht trüb. Es ist ganz leicht trüb, aber eigentlich ist es in erster Linie durchsichtig, also durch eine Weißbierflasche kannst du nicht so durchgucken, wie ich jetzt hier gerade durchgucken kann. Und es schmeckt ganz anders, finde ich, als deutsches Weißbier. Also es geht eher in Richtung IPA auch, weil es ist so fruchtiger. Also finde ich gut. IPA finde ich toll. Mal gucken, dann haben wir das Bier geklärt. Dann können wir direkt weitergehen zur Retro, ne? Yes.

Ich hatte noch mal nachgucken müssen, weil ich mir nicht sicher war, aber ich glaube, das ist tatsächlich die erste Folge Podcast, die wir aufnehmen, wo ich meinen neuen Nachnamen habe, zumindest offiziell verkündet. Ich glaube, bei dem Weihnachtsintro war es, glaube ich, schon. Ja? Haben wir da schon drüber geredet? Sicher? Okay, Gott, ich will jetzt nichts wiederholen. Ich müsste jetzt auch noch mal nachhören. Ich meine das nicht. Ich glaube, da war es noch

nicht offiziell. Ach du, egal. Wir machen das jetzt einfach nochmal. Falls jetzt jemand davon überrascht ist, dass im Intro bei mir der Name Glanz ist und nicht mehr Gießmann. Ich habe meinen Nachnamen geändert, aber ich habe nicht geheiratet. Ich habe eine öffentlich-rechtliche Namensänderung. Es gibt dazu einen Blogartikel, wo ich so ein bisschen was über die Gründe schreibe und wie ich das gemacht habe. Wer mehr dazu interessiert, der kann sich den Blogartikel durchlesen. Genau,

der kommt in die Shownotes. Das dazu, glaube ich, muss man nicht viel mehr dazu sagen. Da ist alles drin. Cool. Schön, dass du auch was dazu geschrieben hast, dein Blog so aktiv nutzt. Naja. Also letztes Jahr, um die Zeit, da hatte ich ja gerade das Blog gelauncht, da hatte ich schon fünf oder sechs Artikel im Jahr geschrieben. Ich habe mich schon deutlich verlangsamt. Ja gut, dass der anfängliche Elan nachlässt. Ich glaube, das ist ja auch normal und nachweisbar.

Warum ist das eigentlich so? Warum gibt es eigentlich nicht Elan, der andersrum ist, das langsam anfängt und dann immer schneller wird? So wie bei Viren, so exponentielles Wachstum. Das wäre doch was. Ich glaube, das war bei CSS-Tricks so. Am Anfang gab es relativ wenige

Artikel, die waren aber sehr gut und sehr hochqualitativ. Und es sind immer mehr Artikel geworden, also bis es dann quasi abgekündigt wurde, sind es immer mehr geworden, zu allen möglichen Themen, wo mich das meiste nicht interessiert hat, bis dann irgendwann gekillt wurde. Aber der Output am Ende, das waren ja wirklich vier Artikel am Tag oder so, keine Ahnung. Und so viel guter Content war das nicht. Also so zu dem, wie es halt früher

war, die alten guten Artikel. Jetzt ist es ein bisschen wieder so wie früher. Das begrüße ich sehr. Aber wir können zum zweiten Retro-Punkt kommen. Genau. Und zwar wollte ich mal ein bisschen berichten, wie der Status quo ist bei meiner Linux-Geschichte. Ich bin ja umgestiegen. Jetzt bin ich auch gar nicht mehr sicher, ob ich das im Podcast oder im Stream erzählt hatte. Aber auch auf die Gefahr, dass wir uns da auch nochmal wiederholen. Ich habe die Schnauze voll für Windows und habe auf

Linux Mint gewechselt. Nach vielen Anläufen in den vergangenen, sage ich mal, 15 Jahren immer mal wieder zu versuchen auf Linux umzusteigen. Und dann hat dies nicht funktioniert und das nicht funktioniert, habe ich es jetzt tatsächlich geschafft. Und ich bin, das war jetzt ja so kurz vor Weihnachten, als ich das angefangen habe, und ich bin inzwischen wirklich, wenn

ich privat, rein privat am PC bin, komplett auf Linux. Und ich habe meinen Laptop auch einfach, da habe ich sogar nicht parallel zu Windows installiert, sondern da habe ich die Windows-Partition direkt platt machen lassen vom Installern. Habe dann Linux Mint drauf installiert. Habe auch das Gefühl, aus der alten Hardware holt das noch deutlich mehr raus, als Windows das macht, weil Windows halt einfach schon allein den Rahmen irgendwie

zukleistert mit tausend Prozessen. Und das Einzige ist halt wirklich, wenn ich was Geschäftliches mache, dann ist immer noch diese Geschichte mit dem Zeit-Tracking-Tool, mit dem eigenen, dass ich versucht habe, dann unter Linux zu kompilieren, dann festgestellt habe, okay, der Build-Prozess, der kompiliert aber unter Linux nicht, weil da ist irgendwie ein Bug in der alten Version und dann, wie es dann immer so ist, das aktualisiert, ach, das ist

mit dem nicht mehr kompatibel und das hat so einen Rattenschwanz hinterhergezogen, dass ich im Endeffekt jetzt dieses Tool gerade neu aufbaue mit einem aktuellen Stand, wie man das eben macht, mit Vite statt damals noch Webpack und so weiter. Aber es ist halt sehr viel Anpassungsaufwand, weil das dann dieses Vite-Electron-Template, das hat halt einen bestimmten Aufbau, der ist wieder anders, als es ursprünglich war und da bin ich am

rumziehen und so. Und das kostet einfach unheimlich viel Zeit, die ich jetzt aber aktuell nicht hatte. Und dann habe ich eben für das Geschäftliche halt doch wieder Windows genutzt oder teilweise halt dann die Zeiten nachgetragen, wenn ich gerade in Linux war und was gearbeitet habe. Aber es ist also für die privaten Sachen, das, was ich mache, da habe ich inzwischen echt alles und ich bin sehr zufrieden damit. Bis auf Podcast-Aufnahmen und Webcam.

Ja, genau. Ja, jetzt haben wir gerade, gerade wollte ich zum ersten Mal mit Reaper und Ultraschall unter Linux aufnehmen, diese Folge, und dann ist es an der Webcam gescheitert. Jetzt müsste man denken, naja, es ist ja Podcast, wozu Webcam, aber wir haben die immer laufen, damit wir uns einfach sehen, weil das irgendwie doch ein persönlicheres Gespräch ist, als wenn wir einfach, und wir uns auch nicht so ins Wort fallen, weil man halt doch sich sieht.

Man sieht, der andere nickt, der andere zeigt gerade mit der Hand, ich möchte auch noch was dazu sagen und so. Das ist auch angenehmer, glaube ich, beim Zuhören dann, dass man sich nicht so ständig unterbricht. Ihr merkt das nicht, aber wir merken das deutlich. Wir haben nämlich bei Corona, als wir die erste Remote-Folge aufgezeichnet haben, haben wir es ohne Bild gemacht und das war, wir haben dann relativ schnell gemerkt, nee, wir müssen da was ändern, das funktioniert so nicht.

Ich glaube, wir haben, glaube ich, sogar nur eine Folge so gemacht und dann haben wir festgestellt, nee, wir brauchen die Webcam und das ist einfach, das fühlt sich anders an. Ja. Absolut, genau. Was dein Linux angeht, ich habe jetzt gerade noch mal nachgeguckt, weil ich mir nicht sicher war, ob meine Erinnerung mich betrogen hat, dafür brauche ich auch keine so lange Erinnerung, da ist gerade gestern eine neue Major-Version rausgekommen für deinen Linux Mint. Kann das sein? Das kann sein, ja.

Das ist jetzt nicht ganz so verfolgt, ich wusste, da ist einer in den Startlöchern, aber ich habe jetzt, ich habe noch die alte drauf, also die letzte LTS ist, glaube ich, auch. Also du hast Linux Mint 22 Wilma und jetzt ist rausgekommen, warte, Moment, 22.1, ah, haben die so einen, Moment mal, wie funktioniert das? Die haben, glaube ich, so Codenamen, aber halt auch diese 22.02, 22 Punkt irgendwas.

Das ist jetzt Punkt eins, aber das hat einen extra eigenen Namen, die, die, okay, die meiner Versions kriegen offenbar so eigene Releases irgendwie, weil die letzte Major Version, also die 22.0 ist vom 25. Juli 2024, also ich kann mich erinnern, bei Ubuntu war es so, dass es, glaube ich, halbjährige, halbjährliche Releases gab und die wurden dann auch nach dem Monat benannt, in dem sie releast wurden. Da gab es immer die .04 und die .10, glaube ich.

Okay. Weiß ich jetzt nicht, wie das bei Linux Mint genau ist, aber ich glaube, es ist auch so ungefähr ein halbjährlicher Release, weil sich das ja an Ubuntu auch orientiert.

Aber es ist jetzt nur in meiner, in meiner Versions Change zumindest, aber es hat trotzdem einen neuen Namen gekriegt, heißt nämlich jetzt Xia, ich weiß nicht, ob ich es richtig ausspreche, aber die machen es, glaube ich, ähnlich wie, wie auch Ubuntu, dass sie das Alphabet von vorne nach hinten durchgehen und dann nach einem bestimmten, ich glaube bei Ubuntu sind es Tiere und die versuchen halt immer ein Tier zu finden mit den jeweiligen Nächsten.

Ja, wie Android das halt auch gemacht hat, mit Candy und so, ja. Aber das ist auch vorbei, bei Android gibt es keine, so Versionsnamen mehr, ne? Ja, schade, eigentlich war ich… Irgendwann ausgegangen. Ja und jetzt nochmal so die Frage, ist da jetzt alles irgendwie, du bist, du bist damit zufrieden?

Ich bin damit super zufrieden, ja, also jetzt die Geschichte mit der Webcam, wobei ich da anfänglich jetzt, als ich ein Windows gebootet hab, auch wieder Probleme hatte und die dann nochmal vom USB getrennt hab und nochmal eingesteckt hab und dann ging's erst, vielleicht funktioniert's auch nach dem nächsten Boot unter Linux, ich weiß es nicht. Ansonsten, wenn jemand Tipps hat, Elgato Facecam unter Linux zum Laufen zu bekommen, gerne her damit.

Aber ansonsten bin ich, ja, super zufrieden, es ist schnell, es sieht schick aus, ich vermiss aktuell nichts. Also ich hab, gut, klar, die Adobe Creative Suite, da bin ich halt dran gewöhnt, aber es gibt genug gescheite Open-Source-Software inzwischen, es gibt Audacity für Audiobearbeitung, wenn man jetzt nicht irgendwie krasse Multitrack-Geschichten und was weiß ich was braucht, wobei das glaube ich mittlerweile auch kann.

Ja, also, ich bereue die Entscheidung bisher nicht und nachdem ich grad eben erst beim Reboot dann Windows mit diesem blauen Bildschirm begrüßt hat und irgendwelche Aufräumaktionen und Updates und so, da habe ich wieder keine Lust mehr, da weiß ich, warum ich dann gewechselt bin. Ich bin sehr gespannt, wie du das weiter verfolgst, aber die Tatsache, dass du jetzt schon so lange dran bleibst und selbst jetzt immer noch sagst, ist sehr vielversprechend, ja.

Und auch, dass ich den Laptop wirklich platt gemacht habe und nicht dual installiert habe, also das ist schon mein Ziel. Und wie, da würde mich jetzt noch interessieren, weil ich ja auch mal so eine, wie soll ich sagen, so eine Linux-Zeit hatte und da auch so reingewachsen bin. Du hast immer gesagt früher, dass du eher so ein GUI-Mensch bist und in Linux ist es, kommt es ja öfter mal vor, dass man was mit der Command-Line machen muss.

Aber ich hatte, muss davor vorab noch sagen, ich hatte nie den Eindruck eigentlich, dass du davor zurückschreckst, sondern das, wenn du die Wahl hast, weil du ja auch NPM install und keine Ahnung, das hast du ja alles. Wobei ich da ja auch in den letzten Jahren dann erst reingewachsen bin. Bist ja letzten Endes aber nicht viel anders, ne? Ne, klar.

Man muss, das ist halt gewöhnungsbedürftig, dass man plötzlich für solche Dinge wie ich will was updaten oder sowas, dann die Kommandline braucht, ne? Muss man das unter Linux Mint? Ne, muss man nicht mehr. Also ich wollt grad sagen, bei Linux Mint ist so viel per GUI, also auch Systemeinstellungen, Paketmanager Update, Treiber Update, das hat alles ne GUI und da muss man eigentlich nicht viel machen.

Die Sachen, die halt bei mir da mit der Grafikkarte problematisch waren und so, klar, da musste ich halt ein bisschen in der Kommandleitung rumhacken, aber es ist schon, also Linux Mint würde ich sagen, ist ein sehr gut geeignetes Umsteigersystem, wenn man von Windows kommt, bis hin zu Windows E öffnet den File Manager und hier Windows Pfeiltasten, damit kann ich Fenster verschieben und so, das funktioniert alles, ohne dass ich mich da irgendwie groß

umgewöhnen muss und das find ich richtig cool und hat's mir sehr einfach gemacht. Die Frage aller Fragen, hast du wobbly Windows? Noch nicht, noch nicht. War jetzt nicht unbedingt die höchste Priorität, auch wenn du das nicht verstehen kannst. Das verstehe ich nicht, das muss das erste sein, was man installiert, wenn wobbly Windows nicht funktionieren, muss man sich eine andere Distribution suchen oder einen anderen.

Oh Gott, das will ich konfigurieren, dein System nicht kaputt für wobbly Windows. Ja, es gibt ja Backups. Wer nicht weiß, was wobbly Windows sind, also als ich mit Ubuntu angefangen habe und das war irgendwann 2008 oder so, 2007, 2008, da war das damals der heiße Scheiß, dass man sich so Desktop-Effekte installieren konnte, ich weiß nicht, ob es das auch für andere Desktops gab, in dem Fall war das für GNOME oder GNOME, keine Ahnung, wie man es richtig ausspricht.

Und da gab es eben unter anderem, dass die Fenster quasi wie so eine Art, die, die, also sie sind wackelig, wobbly, ja, aber man zieht sie so hinterher, es ist wie so, als würden man sie, würde man physisch ein Stück Stoff durch die Luft hinterherziehen und so wobbeln die dann so ein bisschen rum, aber man kann sie, es gibt da auch ganz verrückte Effekte, dass man, wenn das Fenster schließt, dass es abbrennt oder irgendwie so, wenn man zwischen

den, zwischen den einzelnen Desktops wechselt, dass das dann so ein 3D-Effekt ist und dass die ganzen einzelnen Desktops auf so einem Würfel drauf sind, der gespiegelt ist und hinten dran ist das Weltall und keine Ahnung, alle möglichen verrückten Effekte und das gab es damals schon, es hat damals schon recht gut funktioniert und ich muss sagen, wobbly Windows, wenn ich das haben könnte auf dem Mac, ohne dass mir das System kaputt macht,

das wäre das Einzige, wo ich aus dieser Zeit sagen würde, das würde ich mir vielleicht echt nochmal installieren, weil es war einfach irgendwie cool. Also gerade, wenn man so ein, der Klassiker, man hat ein Fenster, das ist klein und man klickt doppelt auf die Leiste oben, damit es groß wird und dann schwabbelt es so groß und wackelt noch so ein bisschen, wenn das schnell, wenn der Effekt schnell ist, dann ist es irgendwie einfach cool. Also

wobbly windows. Falls ihr euch das jetzt immer noch nicht vorstellen könnt, wir sind ja ein Audio-Podcast, dann gebt es mal bei YouTube ein, ihr werdet dann irgendwie eine Demo finden, wo ihr seht, wovon ich spreche. Genau. So, Linux fertig? Ja, Linux fertig. So, es hat sich ein bisschen was angesammelt. Wir haben ja schon länger keinen Podcast gemacht. Das andere, das ist jetzt schon ein bisschen älter, das nächste Thema, aber ich wollte es trotzdem

noch mal erwähnen. Ich habe ja mal irgendwann, warte, ich muss gerade überlegen, das war bei der JSConf 2018, glaube ich, habe ich damit angefangen. Damals kam ich von der JSConf ganz beschwingt zurück, beziehungsweise es war eigentlich dort schon, ich hatte einen Vortrag gesehen zur Web Audio API und habe dann gesagt, ich will jetzt irgendwas mit

der Web Audio API bauen, egal wie simpel es ist. Und der erste Gedanke, den ich dann hatte war, ich möchte einen Morse-Code-Generator damit schreiben, weil letzten Endes, das ist wirklich die simpelste, quasi die simpelste Implementierung, man macht einfach einen Sinuston

und der muss halt in bestimmten Zeitabständen irgendwie kommen. Also am Ende war es dann doch gar nicht so simpel, wie ich es mir vorgestellt habe, aber letzten Endes, was das Web Audio angeht, ein Sinuston abspielen ist quasi die simpelste Anwendung, da musst du quasi fast nichts davon verstehen. Und ihr wisst es ja vielleicht auch, ich steige nicht unbedingt immer extrem tief in so ein Thema ein, ich versuche immer die simpelste Demo zu bauen,

so auch hier. Und ich habe das Ding aber dann immer noch ein bisschen weiterentwickelt, ein bisschen anderes Design bekommen, jetzt finde ich, ist es recht rund, das Design ist zu finden auf meiner Website, Link kommt auch in die Shownotes, also moritzglanz.de slash morsecode, allerdings Code mit K, keine Ahnung, da hat es mich irgendwie geritten, das muss jetzt so heißen und dann hieß es so. Und ich hatte die ganze Zeit, fand ich es irgendwie

witzig, dass ich quasi aus Morsezeichen das Logo gebaut hatte. Also das Logo davon ist ein Gesicht, aber mit einem Punkt, Strich, Punkt. Ich hatte das aber ursprünglich tatsächlich auch mit den Unicode-Zeichen gebaut, aber das Gesicht sah so ein bisschen genervt aus, weil es war halt nicht, das Gesicht war tatsächlich ursprünglich Strich, Punkt, Strich und zwei Augen als Strich. Ist dann halt schon so ein bisschen genervter Gesichtsausdruck und dachte

mir, nee, das muss jetzt irgendwie neu. Und bei der Gelegenheit dachte ich mir, okay, bisschen freundlicheres Logo. Jetzt ist es Punkt, Strich, Punkt, aber ich habe es jetzt als SVG gemacht, aber ich habe jetzt auch noch weitere Options eingebaut. Man kann jetzt nämlich nicht nur die Lautstärke verändern, sondern die Frequenz auch in einem gewissen Bereich und man kann die Waveform, also Sinuswelle, Square-Triangle und Sword-Hoof kann man auch auswählen. Vibration

gab es vorher schon. Also wenn ich während des Abspiels die Frequenz ändere, dann habe ich das sofort. Ja, dann kann man quasi auch Musik mitmachen, wenn man möchte. Stimmt. Die Volume, das habe ich noch nicht gemacht, dass man das auch live laut und leise drehen kann, aber tatsächlich da was einzugeben in längerem Text, egal irgendein Quatsch und dann zwischendurch die Waveform und die Frequency zu ändern, da kann man voll Musik mitmachen. Das ist ja voll cool.

Also das geht sogar, also nicht nur vor dem nächsten Ton ändert sich das dann, sondern wenn ein langer Ton ist und ich ziehe das, dann macht es irgendwie so blblbl. Es ist absolut live. Das ist ja cool. Da habe ich dann auch eine Power of Chat GPT, implementiere mir das mal. Ah, so geht das. Das war mir ja tatsächlich so und da dachte ich mir,

ah, das kann ich super leicht implementieren. Und dann habe ich nicht nur das Logo getauscht, sondern auch noch mir überlegt, was für Features könnten da sinnvoll sein und das dann da noch mit reingebastelt. Ich habe damals ja so eine Vision gehabt, dass das Design irgendwie so ein bisschen aussehen soll, wie die New Yorker U-Bahn. Mittlerweile sieht es jetzt ein bisschen anders aus. Ich habe das nie so richtig hingekriegt, wie ich es wollte und jetzt bin ich eigentlich auch

mit dem Design irgendwie zufrieden. Das finde ich irgendwie ein nettes, kleines Mini-Tool, ganz ohne Werbung und irgendwie, sondern einfach, wer mal ein Morse-Code irgendwie audiomäßig bauen will, kann das machen. Und das Geile ist, in Browsern, die es unterstützen, es sind nicht so viele. Es sind, glaube ich, nur Android und da wahrscheinlich, weiß ich gar nicht, ob es da Chrome macht, kann man auch Vibrationen, Morse-Vibrationen kriegen. Das kann man in den

Optionen auch einschalten. Das ist allerdings nur, wenn es auf dem Device supported ist. Aber ich dachte mir halt, naja, ich habe jetzt hier irgendwie schon die Längen, die abgespielt werden. Das jetzt noch in Vibrationen zu übersetzen, ist halt echt ein leichtes, weil die Information ist schon da. Ich setze dieses Bau, dieses Ding zusammen. Das sagt ja jetzt so lange das, dann so lange Pause und so lange das, was ich damit am Ende mache,

ob ich da jetzt irgendeinen Ton abspiele oder die Vibration anschalte. Und Vibration ist einfach cool. Also das empfehle ich einfach mal auszuprobieren. Genau, das habe ich irgendwie so zwischen den Jahren irgendwie gemacht und das wollte ich einfach mal darauf hinweisen. Ich weiß, da fast niemand geht auf dieses Tool, weil nach Morse-Code.mit-K sucht halt auch keine Sau. Ist auch okay, aber geht doch mal da drauf und spielt mal ein bisschen mit rum. Vor allem mit diesem

Frequency, das habe ich dann auch. Ich habe sofort gemerkt, ich habe mit rum gespielt und dann so hin und her. Da kann man immer coole Sachen machen. Ich spiele die ganze Zeit mit der Frequenz. Also ich habe dann auch mich so ein bisschen musikalisch irgendwie wiedergefunden, bei so ein bisschen elektronischeren Sounds, wenn man dann irgendwie Sawtooth anmacht, statt Sinoswelle, dann klingt das auch plötzlich wie so ein kleiner Synthesizer und dann kann man

mit der Tonhöhe noch rumspielen. Und der Rhythmus kommt ja quasi von den Buchstaben. Ist irgendwie schon eine kreative kleine Geschichte. Also jetzt müssen wir schnell zum nächsten Thema, sonst schreibt die Sarah noch einen Welthit mit meinem Morse-Code-Generator. Genau, nächstes

kurzes Thema. Bei Working Draft gab es jetzt gerade eine Folge zum Barrierefreiheitsstärkungsgesetz, die sei an der Stelle empfohlen und ich bin auch darauf gestoßen, weil wir da erwähnt wurden und unsere Folge mit der Daniela Kubisch, unsere letzte Folge, das war nett, weil die haben auch über Accessibility-Overlays gesprochen und da sind wir auch vorgekommen sozusagen mit der Folge, mit der Daniela. Vielen Dank nochmal fürs Verlinken. Ich kann die Folge auch sehr empfehlen,

also der Chef spricht da mit der Sonja Weckenmann. Also ich muss sagen, ich habe mir unter einer Folge zum Barrierefreiheitsstärkungsgesetz was völlig anderes vorgestellt und ich fand es trotzdem super, weil es wurden Aspekte, es ist trockener Stoff, es wurden ganz viele trockene Aspekte beleuchtet, mit denen ich mich noch nie beschäftigt hatte. Somit, ja, welche Verordnung ist, greift denn da in was und seit wann ist das gültig und das sind eigentlich schon sehr

interessante Informationen. Ich muss von meiner Seite sagen, ich versuche Barrierefreiheit immer, ich will jetzt nicht sagen, dass andere das nicht machen, vorab Disclaimer wichtig, ich versuche es immer von der Benutzung her zu denken. Also ich lese natürlich auch die Standards und versuche mich daran zu halten, beziehungsweise die sind natürlich extrem nützlich in der Umsetzung und auch was für Regeln es gibt, aber ich bin da mehr so, ich versuche die Experience irgendwie,

soweit ich das eben verstehe und machen kann, gut zu machen. Und trotzdem sind diese ganzen rechtlichen Dinge, die da noch mit rein spielen. Ich meine klar, es ging um das Gesetz, aber welche Verordnung gilt denn jetzt wie und dann gibt es noch diese en-irgendwas-Verordnung, das ist aber nicht das Gesetz. Und wie spielt die WCAG damit rein, fand ich echt eine spannende Folge, würde ich an der Stelle ans Herz legen. Genau, kann man gut mal reinhören und die Sonja Weckenmann,

die ist eh super, also die haben wir ja auch schon bei der Biontelerant getroffen. Die schreibt auch ganz fantastische Artikel für Tollwerk, also sei an der Stelle sehr empfohlen. Dann haben wir noch ein Thema, da habe ich mal uns beide dran geschrieben, ein Retro-Thema, aber ich reiße es vielleicht jetzt, da ich jetzt gerade schon im Flash drin bin, reiße ich es noch mal kurz an.

Wir haben es auf dem Mastodon schon angekündigt. Wir haben nach dem letzten Twitch-Stream letztes Jahr noch mal darüber gesprochen, über Podcast versus Twitch und was macht uns Spaß und was ist wichtig und was kostet wie viel Zeit und wo haben wir das Gefühl kommt, also wir haben gemerkt, es ist zu viel gleichzeitig. Und wir haben vor allem den Podcast sträflich vernachlässigt,

das muss man schon auch mal so sagen. Wir haben den Podcast sehr vernachlässigt und deswegen haben wir jetzt gesagt, der Twitch-Stream, der ist jetzt nicht gekillt auf alle Zeit, aber wir lassen den jetzt erst mal ruhen. Wir werden jetzt erst mal nicht mehr bei Twitch streamen und dafür aber versuchen jetzt wieder regelmäßig, also so wie früher, alle zwei Wochen eine Podcast-Folge rauszuhauen. Wir werden nach wie vor uns nicht nehmen lassen, auch mal eine Woche ausfallen zu

lassen oder so. Wir sind da nicht so streng wie, ich muss da gerade an die Subscribe denken. Hallo Nikolas Wöhrl, falls du das hörst. Nikolas Wöhrl hat auf der Subscribe gesagt, wenn ihr einen Podcast machen wollt, dann macht es und lasst euch auf keinen Fall erklären, lasst euch auf keinen Fall sagen, man muss Podcast genauso machen, aber man muss regelmäßig veröffentlichen und darf auf keinen Fall was auslassen, womit er sich natürlich im selben Satz sozusagen widersprochen

hat. Nein, ich weiß, wie er es gemeint hat. Er hat gesagt, für ihn ist das so, wenn er was, wenn er irgendwie was konsumiert, dann braucht er da regelmäßig neuen Content, er möchte da nicht irgendwelche Pausen zwischendrin haben. Das wird bei uns jetzt dadurch wahrscheinlich nicht weggehen, es wird auch immer mal wieder so eine Pause geben, aber das ist jetzt auf jeden Fall,

der Stream wird es jetzt erst mal nicht mehr auffressen. Genau. Wir sind jetzt erst mal wieder hier im Podcast zu Hause und ich würde mich sehr freuen, wir haben im Stream ja immer sehr viel Feedback bekommen, so richtig Live-Feedback durch den Live-Chat da. Und wenn wir es irgendwie schaffen würden, das ein bisschen zum Podcast zu migrieren, gerne in die Kommentare

mal, gerne öfter mal Kommentare schreiben, da würden wir uns sehr drüber freuen. Auch wenn ihr Fragen habt, das wird auch mal Covid-19, das sind das Besprechte, das habe ich nicht ganz verstanden oder so. Und auch wenn wir es nicht beantworten können, vielleicht finden wir Gästinnen, die das können. Ja, also einfach, weil das war natürlich, also das klingt jetzt so, als hätte

uns der Stream nichts gebracht, das wollen wir jetzt natürlich nicht sagen. Also das war im Gegenteil, es war sehr schön, eben diese Interaktion zu haben, was halt was ganz anderes ist als beim Podcast. Aber das war halt einfach, wie gesagt, zu viel und auch viel Zeit, die natürlich bei so einem Stream, da kannst du halt nicht nach zwei Stunden schon sagen, so jetzt ist aber Schluss,

lassen. Da willst du ja dann doch irgendwie den ganzen Abend mit verbringen. Aber der Vorteil war halt eben diese Interaktion und das hat sehr viel Spaß gemacht und das fehlt so ein bisschen beim Podcast dafür. Und ja, wäre schön, wenn das in Zukunft noch ein bisschen mehr Austausch gibt. Genau, ganz genau. Also der Stream, ich muss es jetzt nochmal sagen, ich glaube es kam vorhin

vielleicht echt ein bisschen falsch rüber. Also ich habe das ja geliebt. Ich habe es ja wirklich geliebt, den Austausch, aber auch der Support auf vielen, vielen Ebenen, auch finanziell, der war unglaublich. Also wie die Twitch-Community uns Subs geschenkt hat und also wie die Verrückten, wirklich vielen, vielen, vielen Dank dafür nochmal. Das war unglaublicher Support. Also ich will jetzt nicht sagen, dass im Podcast der Support, doch ich muss es glaube ich sagen,

der finanzielle Support im Podcast, der war immer deutlich geringer als im Stream. Das ist so. Es ist jetzt nicht so, dass wir sagen, das ist jetzt schlimm, weil wir machen das ja, weil es uns Spaß macht und wir machen ja auch keine Werbung. Trotzdem würden wir uns darüber freuen, wenn wir da ab und zu mal ein bisschen supported werden, dass auch das Format weiterleben kann. Und das macht uns natürlich auch die Arbeit ein bisschen einfacher, weil wir die

Domain bezahlen können, die einfach viel zu teuer ist. Das muss doch das Showdomain sein. Macht sowas nicht. Ist jetzt kein Rieseninvest, aber so, da würden wir uns freuen, wenn wir ein bisschen was mit rübernehmen können von Twitch, das wäre schön. Spendenadressen und sowas, haben wir alles auf unserer Webseite unter www.scv.de. Aber da kommt später noch Werbung. Übrigens, die Werbung habe ich an eine andere Stelle geschoben. Du wirst es dann sehen. Ja, ich habe es schon gesehen.

Gut, alles klar. Gibt es noch was zu Twitch? Nee, also schön war es und es war bestimmt kein Abschied für immer, aber danke. Genau, und wer uns unbedingt wieder auf Twitch haben will, der muss uns einfach eine unerhört große Summe spenden mit dem Betreff. Macht doch mal wieder einen Twitch-Stream. Und dann machen wir wieder einen Twitch-Stream, weil wir sind natürlich, wie alle anderen auch, kann jeder sagen, was er will, käuflich. Käuflich zu erwerben im Internet.

Gut, dann hast du als nächstes eine Property dabei, ne? Jo. Du erinnerst dich sicher, dass wir mal zusammen ein JavaScript gebaut haben, dass die beliebte Funktionalität eine Text-Area wächst mit ihrem Inhalt nachrüstet. Und zwar so, wir haben es damals versucht, so möglichst abstrakt zu bauen, dass man es mit einem Data-Attribut einfach auf die Text-Area, dass man der Text-Area einfach ein Data-Attribut gibt und dann noch so ein Minimal-CSS dazu. Und dann sollte das einfach funktionieren, so.

Damals haben wir festgestellt, dass es gar nicht so wenig Edge-Cases gibt in dem ganzen Ding. Also, der Klassiker war, worauf wir dann irgendwann gestoßen sind oder worauf ich dann im Produktiveinsatz gestoßen bin, dass wenn zum Beispiel so eine Text-Area eine gewisse Höhe hat, dass es dann merkwürdige Effekte gibt. Wenn man was hinzufügt, wenn man nochmal Enter drückt, dann sprang das in manchen Browsern hin und her. Das war alles irgendwie nicht so ganz

ausgegoren. Ist ja aber auch was, und das haben wir damals dann schon so im Gespräch, weil erinnere ich mich, haben wir noch gesagt, aber wieso macht das eigentlich nicht der Browser für uns? Warum kann, also der Klassiker ist, du hast halt irgendwie so ein kleines Eingabefeld, Kommentarfeld im Blog, ja? Und du möchtest eigentlich jetzt standardmäßig nicht so viel

Platz vorreservieren dafür, sondern naja, so drei, vier, fünf Zeilen oder sowas. Aber wenn es größer, wenn es mehr wird, möchte ich nicht unbedingt scrollen müssen, sondern es wäre cool, wenn dann kein Scrollbalken kommen würde, sondern wenn die Textarea bis zu einer gewissen Größe einfach mitwächst oder vielleicht so groß, wie der Inhalt ist. Weil dann muss ich nicht rumscrollen und kann theoretisch alles irgendwie sehen. Immerhin konnte man ja das CSS-Resize-Property benutzen,

damit der User wenigstens das manuell hochziehen kann. Das war ja immerhin schon mal besser als hier scrollbar mit drei Zeilen, aber schön war es auch nicht. Genau. Und wenn es aber automatisch direkt mitwächst, ist halt cool. Deswegen haben das auch viele Seiten so implementiert. Und jetzt soll es was geben. Und ich muss dazu sagen, es ist noch nicht, es ist noch experimental. Und derzeit ist es aber schon in Chrome und Edge und allem, was da so irgendwie dazugehört,

ist es tatsächlich schon richtig implementiert. Auch nicht hinter Flag, genau. Nicht hinter Flag, schon richtig drin. Firefox und Safari haben es noch nicht. Und zwar heißt die CSS-Property dazu. Field-Sizing. Und der Standardwert, also wie es jetzt ist, das heißt, das Ding verändert die Größe nicht, das Field-Sizing fixt. Und wenn man Field-Sizing-Content nimmt, dann wächst das Ding mit. Und auch wenn man möchte, das muss man dann noch selbst festlegen,

also mit anderen CSS-Eigenschaften wie With zum Beispiel, auch in beide Achsen. Also nicht nur von oben nach unten, sondern wenn man möchte, auch in die Breite. Und interessanterweise, das kann man auf der MDN-Seite dann auch sehen, da sind ein paar Demos, das betrifft auch nicht nur Text-Areas, sondern auch ganz normale Input-Felder, die dann einfach in der Breite wachsen, wenn man das möchte, was auch immer. Ja, ich kann mir vorstellen, wo das sinnvoll ist. Ich

kann mir aber auch vorstellen, dass das Probleme machen könnte. Aber auch Select-Boxen, die ihre Breite verändern, je nachdem, welcher Value gerade ausgewählt ist. Das ist schon eine coole Sache und das ist genau so ein Webstandard, wie ich immer sage, sowas brauchen wir viel öfter, so ganz einfach. Der Browser nimmt mir was ab, der macht vielleicht kompliziertes Verhalten, was ich irgendwie sonst da hin programmieren möchte, macht er mir ganz einfach. Das ist irgendwie so wie Loading

Lazy für mich. Man muss nicht groß nachdenken. Ganz simpel kann ich einfach mit einer CSS-Eigenschaft das packe ich da drauf und zack geht es einfach. Und das ist das Schöne, dass wir jetzt an diesem Punkt sind, wo wir solche Sachen, so kosmetische Sachen einfach als Features bekommen, weil diese ganzen Layout-Geschichten und Grid und was weiß ich, das ist jetzt alles, das Layout kann man jetzt schön machen. Und dass man jetzt solche kleinen Details immer wieder bekommt in CSS,

das ist echt cool. Die haben doch unseren Podcast gehört, ich weiß gar nicht, ob wir damals im Podcast darüber gesprochen haben. Es kann auch sein. Ich glaube über das Text-Area weiß ich jetzt gar nicht. Aber wir hatten es schon öfter über Sachen und irgendwie ein paar Monate später war das dann da. Also vielleicht haben wir einfach immer so den Zeitgeist einfach erwischt. Nein, natürlich werden wir gehört. Ich überhöre uns jetzt komplett und sage, die haben uns zugehört.

Die alle Chrome-Entwickler hören uns auf Deutsch. Und ich habe dann einfach, vielleicht war ich da auch ein bisschen voreilig, die Demo, die wir damals gebaut hatten, einfach umgestellt auf eben Field-Sizing-Content und habe das JavaScript rausgeworfen und habe da aber auch hingeschrieben, dass es jetzt derzeit nur Chrome-only ist. Aber bei dieser Eigenschaft bin ich sehr zuversichtlich, dass das in den anderen Browsern ziemlich schnell nachgerüstet werden wird, weil ich glaube,

das ist an sich nicht kompliziert zu implementieren auf Browserseite. Wahrscheinlich viel einfacher als irgendwie auf JavaScript-Seite oder so. Und es ist so nützlich. Ich finde es wahnsinnig nützlich, das hätte schon immer so sein sollen. Also, ja. Schöne kleine Sache. So was lieb ich, ja. Und genau, die Demo habe ich jetzt auch nochmal. Ich weiß nicht, ob die jetzt wirklich so extrem viel, die ich damals gebaut hatte, die ich dann umgestellt habe, ob die jetzt so viel bringt.

Egal. Die ist auch mal verlinkt in den Shownotes. Könnt ihr ja mal gucken. Jetzt haben wir gerade gleichzeitig auf den Haken geklickt. Ja. Okay. Dann ist das auch durch und wir kommen schon in Anfangsstrichen zum Thema. Ich weiß gar nicht, wie viel haben wir denn schon auf der Uhr? 40 Minuten. Ja. Gut, dann muss ich jetzt noch das richtige Knöpfchen finden. Tagesthema, Tagesthema. Hier ist WWSIV mit dem Tagesthema. Das Tagesthema. Ja, wir machen weiter mit unserer

HTML-Serie, wie angekündigt. Und ich starte mal direkt ein mit dem Image-Tag. Genau, wir sind jetzt in diesem Abschnitt. Warte mal, ich muss mal noch mal die Elements ... Elements, HTML-Elements ... Wie hieß das bei MDN? Elements Reference. Wir sind ... Ich höre dir mal ein bisschen ... Genau, wir sind in dem Bereich Image und Multimedia. Wir haben uns jetzt

mal diese drei Sachen rausgesucht. Bilder, also Image-Tag und Map und Area, weil das zusammenpasst und damit das nicht so viel auf einmal wird und wir ein bisschen mehr in die Tiefe gehen können. Und ich denke, da bekommen wir auch einiges zusammen. Ich habe nämlich auch, obwohl ich dachte, naja, gut, Area, alter Hut, dann benutzt man ja kaum noch. Ich habe was dazugelernt. Aber jetzt kommen wir erst mal zu den Image-Attributen. Und ich gehe die auch mal,

ich glaube, ich gehe sie ... Was? Nee, Attribute. Ach so, du meinst die Attribute bei Image-Tag, die Attribute. Genau, also vielleicht ganz allgemein für die, die jetzt erst noch lernen und das vielleicht noch gar nicht wissen. Aber Image ist so basic. Egal, wir sagen es noch mal kurz. Image ist natürlich einfach, um ein Bild auf einer Webseite anzuzeigen. Ich weiß nicht, ob ihr es seht. Jetzt haben schon wieder ganz viele abgeschlossen. Egal, weiter geht's.

Genau, ich gehe mal die alphabetisch, glaube ich, sogar durch, die Attribute. Deswegen fangen wir mit dem Alt-Attribut an. Auch wenn man natürlich erst mal vielleicht eigentlich ein Bild angeben will. Aber wir machen es alphabetisch. Das Alt-Attribut. Da hatten wir es auch schon ganz oft drüber, zum Thema Accessibility. Wenn das Bild wichtig ist für die BesucherInnen,

dann sollte es, also es muss auf jeden Fall laut SPEC ein Alt-Attribut geben. Das darf leer sein, wenn es eben eine Grafik ist, die keinen informationellen Wert hat, sondern es ist bloß ein Icon. Aber nebendran steht eh nochmal der Text, der erklärt, was es ist oder sowas. Aber wenn es nicht selbsterklärend ist, dann sollte die Grafik entsprechenden Alt-Text besitzen, der für blinde oder seheingeschränkte Menschen beschreibt, was da zu sehen ist.

Also wenn das jetzt irgendwie ein Visual ist, das einfach nur, keine Ahnung, ein paar junge Leute, die am Schreibtisch sitzen, wenn das jetzt nicht zum Text irgendwie groß in Bezug hat, sondern einfach nur so ein Stimmungsbild ist, würde ich sagen, kann man sich vielleicht auch sparen. Wenn das jetzt eine Grafik ist, ein Diagramm, dann sollte da zumindest drin erklärt werden im Alt-Text, was ist das für ein Diagramm, was ist die Information, die ich aus diesem

Diagramm ziehen kann. Genau, also ich habe hier gerade noch einen Link ergänzt, die Geschichte, wann welches Alt-Attribut zu verwenden ist, wann man was reinschreiben soll und wie es sein soll, das ist gar nicht so einfach. Dafür hat das B3C aber den sogenannten Alt-Decision-Tree gebaut, der einem so ein paar Fragen stellt. Wenn man sich daran entlanghangelt, dann kommt man sehr schnell zu dem, wie sollte denn das Alt-Attribut für meinen Fall jetzt befüllt werden.

Das ist doch super, das finde ich eine tolle Idee, um sowas einzubauen in Content-Management-Systeme. Da sollte eigentlich, weil oft ist es so, ich lasse das leer, weil keine Ahnung, was soll ich denn da reinschreiben. Und wenn man da sowas hätte wie einen kleinen Wizard, der eben sagt, okay, du hast ein Bild eingefügt, enthält das Bild Text und so weiter, also dass man das einfach durchgeht und je nachdem, was du angibst, sagt es dir, ah ja, dann schreibt das und das rein.

Genau, also Old Decision Tree ist ein Go-To-Resource von mir, die ich ständig überall irgendwie rumwerfe, weil ich es fantastisch finde und weil viele Menschen nicht viel mehr, wenn sie überhaupt schon wissen, dass es ein Altattribut gibt und dass man es befüllen soll, dann hört es damit meistens schon auf. Also wie befüllen, in welchem Fall und wie man hier sieht,

es gibt dann ein paar, gibt ein paar Fälle, ist dann da, ja, aber es ist auch nicht schlimm. Dann kann man einfach da nachgucken, dann hangelt man sich durch die Fragen durch und ist dann ziemlich schnell bei der Antwort. Dann ist das nächste Cross-Origin. Also da geht es darum, wenn ich ein Bild einbinde von einer, also von einer anderen Domain, möchte ich zum Beispiel Cookies oder einen Authentication-Header, möchte ich die mit hinschicken? Sollte ich die von der

Seite übernehmen oder möchte ich das anonym anfragen? Und… Da habe ich nie drüber nachgedacht. Ich auch nicht. Ich glaube, dass ich das im Zusammenhang mit dieser Content Security Policy Geschichte schon mal gelesen hatte, aber ja, das ist eben speziell für Bilder, um zu sagen, keine Ahnung, das sind Bilder, die eben halt nur unter, wenn ich die entsprechenden Credentials habe, aufgerufen werden dürfen. Und damit ich das dann auch von der Seite aus kann,

kann ich dann eben die Cookies und so damit hinschicken. Genau. Dann, Decoding. Da haben wir, glaube ich, auch schon mal drüber gesprochen, als es darum ging, um so Optimierungen und so, so teilweise fast unnötige Optimierungen. Und zwar geht es da darum, ob der Browser auf dieses Bild vor dem nächsten Render-Event warten soll. Also wenn das nächste Rendering stattfindet der Seite, soll dieses Bild dabei berücksichtigt werden oder nicht? Also das Bild wird auf jeden

Fall geladen, aber das Decoden ist ja auch nochmal ein extra Schritt. Der dauert in der Regel zwar deutlich kürzer als das Laden selbst, aber es kann halt eine sichtbare Verzögerung verursachen. Also es ist nicht so, dass das Bild da im Browser jetzt den Main-Thread irgendwie verzögern würde. Das wäre ja Blödsinn, wenn du dann aufs Bild warten müsstest und danach wird erst der Content nachgeladen. Aber es kann eben von der, wie soll ich sagen, so visuell hat man das Gefühl, da ist

was verzögert und das kann man damit abfangen. Es macht aber wirklich wohl keinen wirklich messbaren Unterschied. Das klingt für mich nach eine große Firma, die irgendeinen ganz speziellen Anwendungsfall hatte, hat das in den Webstandard mit eingebracht, also für was ganz Spezielles. Interessanterweise der Artikel, den du verlinkt hast, sag ich gleich noch. Jetzt kommt nämlich das große Außer. Und zwar, wenn ich Bilder einfüge per JavaScript, dann kann das einen

Unterschied machen. Und der Anwendungsfall war tatsächlich die Google-Bildersuche. Wenn ich da auf ein Vorschaubild klicke und es öffnet sich dann das Bild in groß, dann hat das wohl geflaggert, weil das alte Bild, das kleine, die kleine Version wurde ausgeblendet und das neue Source-Attribut gesetzt. Aber dadurch gab es ein visuelles Flackern, weil das ja erst geladen und decoded werden musste. Und wenn du das Dynamisch-Pad-JavaScript sowieso machst, dann kannst

du dieses Decoding auch auslösen manuell, also indem du Decode aufrufst. Das steht auch in dem Artikel noch drin. Und dann eben das Bild erst einfügst, nachdem es decoded ist und dadurch dann erst irgendwie das austauscht. Genau. Also, interessant, der Artikel, den du dazu verlinkt hast. Ich habe nur ganz grob jetzt mal drüber geguckt und bin dann am letzten Satz hängen geblieben oder am vorletzten. Ja, Jake Archibald hat ja bei Google gearbeitet und ist

jetzt glaube ich bei, das darf ich nicht falsch sagen, bei Shopify. Er hat auf jeden Fall mittlerweile wieder ein Podcast mit Sorma und den kann ich auch sehr empfehlen. Ah ja, bei Shopify, genau, habe gerade nochmal nachgeschaut und die haben zusammen einen Podcast, der heißt Off the Main Thread, OTMT, und den kann ich sehr empfehlen. Das ist gerade momentan. Ich oute mich jetzt ganz

kurz. Ich habe ja irgendwann, ich weiß nicht, ob ich es schon mal gesagt habe, seit wir den Podcast hier haben, höre ich viel weniger Tech-Podcasts, weil ich so quasi meine eigene Dosis mir abhole, so an Specs und so. Ich habe dann irgendwie gemerkt, ich interessiere mich weniger dafür, jetzt selbst Podcasts dann noch im Tech-Bereich zu hören, aber für den mache ich mittlerweile

eine Ausnahme. Ich bringe auch nicht so oft neue Folgen, aber ich finde das immer sehr interessante und die gehen oft wahnsinnig in die Tiefe rein, weil die, ja, die, ich meine, die haben beide vorher bei Google gearbeitet, die sind da extrem tief in der Browser- und Standardentwicklung drin und das kann ich nur sehr empfehlen, hier an der Stelle, Shoutout OTMT, und dann mal reinhören, guter Podcast. Sorry, jetzt habe ich genug unterbrochen, das darfst du

nicht sagen. Genau, also am Schluss heißt es auch nochmal, der Performance-Unterschied, also es wird zwar auch hier gezeigt, mit den Performance-Tools und geguckt, wie gesagt, Images blockieren nicht den Main-Thread, aber dieses decoden und dann warten drauf, blockiert dann irgendwo eben doch, also am besten mal den Artikel durchlesen, um es genau zu wissen.

Aber bevor man sich um sowas kümmert, schreiben sie sogar explizit, LoadingGleichLazy, unser Lieblingsattribut, benutzt das und spiel vielleicht noch mit FetchPriority gleich high, da kommen wir auch gleich noch dazu und dann kannst du dich vielleicht, also das hat einen viel größeren Impact als jetzt diese Decoding-Geschichte zu verlagern.

Aber vielleicht ist es interessant, um es im Hinterkopf zu behalten, wenn ich Bilder per JavaScript dynamisch irgendwie einfüge, tut es ja eigentlich auch nicht weh, das Decoding zu machen. Ich habe überlegt, wenn wir nochmal einen Tech-Podcast machen über Frontend und wir brauchen noch einen Namen, dann nennen wir ihn Coding gleich lazy. Das passt dann auch zu dem JetGPT macht das für mich Mindset. Coding lazy, oh man, ich musste das kurz bei Mastodon jetzt raushauen.

Genau, wir kommen auch schon als nächstes zu FetchPriority, aber da will ich auch gar nicht so viel dazu sagen, weil wir haben das in unserer Folge 60, die auf Verlink, da haben wir ja schon mal drüber gesprochen und da geht es im Endeffekt nur darum, dass ich sagen kann, welche Bilder auf der Seite sind besonders wichtig, welche sind nicht so wichtig und kann dann eben sagen, die auf jeden Fall priorisieren und zuerst laden und dann die anderen.

Das ist eigentlich auch arg viel mehr gibt es dazu nicht zu sagen, wenn man jetzt nicht komplett in der Technik versinken will. Dann, und jetzt kommt das, was ich komplett neu gelernt habe, ISMAP. Es gibt ein Attribut auf Image Tags, ISMAP. Und das ist ein Boolean Attribut, das heißt entweder ist es gesetzt oder es ist nicht gesetzt. Das habe ich noch nie gehört.

Habe ich auch noch nie gehört, das gibt es aber schon seit, keine Ahnung, seit Urzeiten, also seit dem ersten, also Chrome 4, Safari 3.1, also wirklich Firefox 2, gut, IE weiß ich jetzt nicht, ist aber auch interessant. Hat das was mit Image Maps zu tun? Es hat was mit Image Maps zu tun, ja. Ich habe gerade überlegt, was könnte es sein? Und zwar, und jetzt halte ich fest, Server-Side-Image-Maps. What? Denkt man, ja. Also man darf das Attribut

nur setzen, wenn das Bild innerhalb von einem A-Tag ist, mit einem gültigen href. Und wenn ich da dann draufklicke, dann lande ich auf der URL, die im href angegeben ist, mit den Koordinaten, auf denen ich auf dem Bild geklickt habe, als Parameter oben angehängt. Und kann dann Server-Seitig entscheiden, wie ich da drauf reagieren möchte. The fuck? Ja, genau das. Also da ist dann Fragezeichen x, y angehängt an die URL. Und dann kann der Server entscheiden, je nachdem, wo geklickt

wurde, mache ich dies oder mache ich das. Okay, das klingt wie was wirklich Altes, weil wieso braucht man dafür ein Attribut? Also das könnte man ja auch von Hand machen, oder? Ja, aber dann brauchst du JavaScript. Ach so, Moment. Da, wo ich geklickt habe. Genau, also ausgehend von der linksoberen Ecke von dem Bild. Ach du Kacke. Die Koordinate, auf die ich geklickt habe in dem Bild. Das ist ja fancy. Ja, die wird dann angehängt.

Das ist ja fancy. Oh Gott, das dürfen wir ... Leute, falls ihr Werbung schreibt im Internet oder sowas, vergesst ganz schnell wieder, dass wir das hier ... Das ist nichts, ihr düftigen Podcastern. Da kannst du ja alle möglichen Schweinereien mitmachen. Also krass, nie gehört. Geil. Ich auch nicht. Und wie gesagt, das ist wirklich uralt. Es war irgendwo ... War ein Link auch, da stand dann, das gab es schon im Blablabla-Browser-Einspunkt-irgendwas oder so.

Also das ist wirklich uralt und ich habe es aber ... Entweder habe ich es komplett verdrängt, weil man einfach nicht mehr sowas häufig irgendwie braucht. Und zu anderen Image Maps kommen wir ja gleich noch. Genau. So viel dazu. Also war ich echt überrascht, dass ich da noch was Neues lerne, was Altes, Neues. Dann, Loading-Attribut hatten wir es gerade eben schon drüber und wir hatten

es auch in unserer Folge 2. So lange ist das schon her, dass wir das hatten. Das war eine der ersten Sachen, die wir da auch für uns neu entdeckt haben, durch unseren Podcast, durch den eigenen. Genau, Folge 2 auch verlinkt. Loading gleich lazy. Coole Sache. Nochmal ganz kurz umrissen. Heißt, das Bild wird erst geladen, wenn es in den sichtbaren Viewport gescrollt wird. Deswegen soll man es auch nur für Bilder, die also below the fold sind, beim Laden der Seite,

wo ich das erwarten kann, dass die below the fold sind, nur dann einsetzen. Weil wenn ich das Loading gleich lazy auf Bilder setze, die direkt schon beim Laden da sind, dann hat das wiederum Nachteile. Also dann habe ich keinen Performancegewinn, sondern ich habe eher einen Nachteil dadurch. Wobei ich auch sagen muss, also das ist für mich so gering. Ich habe da mal mit rumgespielt und ich habe jetzt nicht so sonderlich großen Nachteil gesehen. Aber gut,

so als Vorausregelmerken. Dann Referral Policy ist auch was, wo ich auf eine andere Folge verweisen kann. Das ist nämlich komplett analog zum A-Element, das wir ja schon hatten. Und das ist unsere Folge 62, wo wir uns eigentlich, glaube ich, nur um das A-Element auch gekümmert haben. Das heißt, da kann ich angeben, sollen Referral mitgeschickt werden, sollen Referral nur dann mitgeschickt werden, wenn es Same-Origin ist und so weiter. So, und jetzt kommen wir zu einem

bisschen größeren Blog. Und wo ich ganz froh war, dass ich den nochmal angegangen bin. Ich habe da drüber nämlich schon erzählt. Ich meine, auch im Podcast. Deine Notizen, die nehmen ja gar kein Ende. Ja, ich habe schon ein bisschen was da. Aber ich glaube, es dauert nicht so lange. Ich habe schon mal drüber erzählt, dass wir auf unserer eigenen Firmenseite, das wird alles dynamisch

generiert. Und wir haben auch die Bilder werden in verschiedene Größen generiert. Und wir haben teilweise auch so eine Art Direction, wo dann eben das Bild in der großen Größe ist der Text dann links davon. Und wenn das Bild aber schmaler wird, dann rutscht der Text im Bild oben drüber und so. Und das machen wir alles eigentlich mit Picture Element. Aber auch teilweise mit dem Image Element selbst, also Responsive Images, direkt mit Attributen. Da gibt es das Source Set, also

SRC Set Attribut und das Sizes Attribut. Und da habe ich schon darüber berichtet, wie kompliziert das schnell wird. Und ich dachte nur, vielleicht stelle ich mich nur blöd an, aber ich habe Artikel gefunden, unter anderem von Stefan Judis, aber auch von Chris. Und jetzt weiß ich, reimt es sich auf Lawyer oder nicht? Ja, auf Lawyer. Also Chris Coyer, nicht Coyer, wie wir, glaube ich, am Anfang gesagt haben. Die auch beide gesagt haben, okay, das ist einfach

messy und schnell kompliziert. Und ich erkläre mal kurz, warum. Also Source Set, da gebe ich verschiedene Bilder an und hinten dran dann eine Größe, also eine Zahl und die Unit W. Und das ist am Anfang erstmal verwirrend. Was soll das jetzt sein, das W? Warum sind es keine Pixel? Aber das W ist die tatsächliche Breite in der Bilddatei. Und die Pixel, die könnten ja aufgrund der Density oder so, könnten ja anders sein auf dem Screen. Da geht es also wirklich darum, dieses Bild hat

wirklich die intrinsische Breite von so und so viele Pixeln. Deswegen ist es diese eigene W, Unit for the Width. Und dann kann ich noch das Sizes Attribut angeben und da gebe ich Media Queries an, also reagiere auf die Viewport Breite und sage dann, wenn der Viewport kleiner ist oder größer ist als das, dann hat das Bild die und die Breite. Das dann aber wiederum in Pixel oder in VW, wenn ich will. Also wirklich, wie ist es dann in dem Zustand? So, und jetzt ist ja schon mal,

also erst mal ist ja schon mal komisch. Jetzt muss ich Media Queries plötzlich in einem Attribut da auch noch schreiben und warum kann ich das nicht im CSS machen? Und dann beziehen sich diese Media Queries auch noch auf den Viewport, aber nicht auf den Container. Und es wird halt ganz schnell, also ich muss wirklich das CSS quasi noch mal duplizieren. Und warum muss ich das machen? Weil der Browser erst nach dem Layout-Schritt weiß, welche Abmessungen das Bild hat. Und auch

das CSS ja vielleicht erst nachher geladen wird. Und zu dem Zeitpunkt einfach noch nicht klar ist, welche Größe wird das Bild da überhaupt haben. Und deswegen muss ich das dann noch mal wiederholen. Aber dann habe ich ja vielleicht verschiedene Breakpoints. Und wenn das Bild jetzt immer auf

die komplette Breite geht, dann ist das noch relativ einfach. Aber wenn das Bild zum Beispiel in der Masonry-Galerie ist und mal über die komplette Breite geht oder je nach Bilderanzahl, die da drin sind, dann vielleicht die Hälfte oder ein Drittel vom Bildschirm einnimmt und das letzte Bild vielleicht wieder die komplette Breite und so, da wird es dann halt ganz schnell kompliziert. Weil ich halt wissen muss, welche verschiedenen Größen kann denn dieses, oder ja, in jedem

Breakpoint, welche Größe nimmt denn dieses Bild ein. Also das muss ich genau planen und mir vorher halt eine Logik überlegen, die ich dann nicht nur im CSS umsetze, sondern eben auch zu dem Zeitpunkt, wo das Markup generiert wird, da schon mit berücksichtige. Und das ist echt so, das wird einfach so schnell, so komplex, dass ich gar nicht mehr den Überblick habe,

wann ist denn das Bild wie breit. Und gerade, wenn es dann ein Grid ist und automatisch dann irgendwie umbricht und so, dann kann ich das vielleicht vorher sogar gar nicht wissen, weil ich viel zu viele Zustände habe. Und jetzt könnte man sich denken, sind denn Container-Querys da nicht die Lösung dafür? Also das war auch gleich mein erster Gedanke, so naja, wir haben jetzt Container-Querys, kann man das nicht irgendwie verbinden? Und ich

bin natürlich nicht als als Einziger auf die Idee gekommen. Also es gibt, wie gesagt, Artikel von Stefan Judis und Chris Coyer, die ich auch verlinke. Stefan Judis hat geschrieben, should responsive images work with Container-Querys? Und Chris Coyer geht dann auf Cises gleich Auto ein, wo ich auch noch gleich drauf eingehe. Und die Antwort ist, ja, wäre natürlich cool,

wenn Container-Querys da die Abhilfe schaffen würden. Gibt aber eben halt auch wieder andere Dinge, die man berücksichtigen muss, wo man erst so, wenn man technisch da in der Tiefe drin ist, dann erst drauf kommt, okay, das macht eventuell wieder andere Probleme. Ja, aber das haben sie uns, bevor wir Container-Querys bekommen, auch jahrelang gesagt. Genau, da hieß es auch, das geht nicht. Das geht nie, das wird nie gehen. Das verrückt, das wird nie funktionieren.

Aber es gibt ein GitHub-Issue beim CSS-WG, also beim CSS-Standard zu dem Draft, oder beziehungsweise es ist ein Draft, das Issue, und zwar von Una Kravitz, auch wieder ein Name, den man ja so kennt und vielleicht auch von diversen Konferenzen als Speakerin kennt, die da eben geschrieben hat, Sources and Sizes Interaction with Container-Queries. Und da einfach mal so als Input so, ja, wie schaut's denn aus? Kann man da irgendwie mit bestimmten Container-Units was drin arbeiten?

Oder brauchen wir vielleicht ein Container-Attribut, wo man dann eben nicht die Media-Queries für den Viewport schreibt, sondern eben für den Container. Und das finde ich eigentlich einen ganz guten Ansatz. Also da gibt's natürlich eine Diskussion mit ewig viel Input unten drunter, den ich mir jetzt nicht komplett durchgelesen habe.

Und es gibt wohl, ja, verschiedene Überlegungen, vielleicht sind es nicht mal Probleme, aber einfach, wo man halt sagen muss, was ist denn der beste Weg, um das zu erreichen, und auf was muss man da achten, wo die Leute natürlich viel tiefer in der Technik drin sind, auch wie der Browser da intern arbeitet und so.

Genau, aber man sieht, es tut sich da was, und das wäre schon ziemlich cool, wenn das in Zukunft wirklich gehen würde, dass ich sage, okay, egal wie jetzt mein Viewport aussieht, aber wenn dieses Bild die und die Breite hat, und zwar wirklich die Breite am Schluss rausspuckt, dann soll der Inhalt sich verändern, dann möchte ich eine andere Auflösung haben, weil ich brauche für einen kleinen Screen, der keine große Retina-Auflösung hat, brauche ich, kann ich ein Low-Quality-Bild nehmen,

aber wenn ich natürlich irgendwie dreifach Auflösung habe, dann will ich gute Qualität und so weiter. Also das hätte uns viel Arbeit gespart für unsere Seite, wenn das schon wäre. Ich muss ganz ehrlich sagen, ich bin ja, ich versuche ja immer so faul zu entwickeln, wie es nur geht, und das ist ein Thema, wo ich mich bisher so gut wie nicht mit beschäftigt habe. Und ich habe irgendwie so das Gefühl, das ist noch nicht das Ende der Fahnenstange, das muss noch einfacher werden als das.

Finde ich eigentlich auch, ja. Aber da ist halt immer das Problem, wann weiß der Browser, wie da wirklich die Breite ist und so. Also du kannst halt nicht sagen, der Browser soll das einfach automatisch machen. Ich habe jetzt, jetzt dürfen die Leute, und jetzt ist gleich der Moment gekommen, wo wir sagen können, was, der hat doch keine Ahnung, ich muss einen Kommentar schreiben. Ich gebe euch jetzt das Futter.

Warum kann es nicht Teil des Bildes sein und das Bild kann quasi, der Browser kann entscheiden, wie viel Resolution er von dem Bild zieht. Ja, dafür bräuchte man ein neues Bildformat wahrscheinlich. Ich habe gerade so an die alten JPEG-Progressive-Loading-Bilder denken müssen. Falls du das noch kennst, das wurde ja erst in einer niedrigen Auflösung geladen und dann ist es immer schärfer geworden. Da muss man wirklich schon sehr alt sein, dass man das noch erlebt hat.

Aber jetzt stell dir vor, du machst mit deinem Bild gar nichts, du hast es in einem Format vorliegen, das erlaubt, dass quasi ein Browser sich Teile davon lädt und nicht immer die gesamte Datei. Aber das müsste also nicht nur das Bildformat unterstützen, sondern der Browser müsste das halt über Request-Header auch schon entsprechend anfordern. Also ähnlich wie zum Beispiel das Range-Request bei Medien-Dateien.

Ich möchte nicht das komplette Video, sondern ich möchte ab der und der Stelle und so lange. Genau, das wäre die Möglichkeit. Ich lehne mich sehr weit aus dem Fenster, weil wenn man, keine Ahnung, ob das irgendwie machbar ist, aber wir wissen ja alles, wo die Leute sagen, es ist nicht machbar, es geht irgendwann. Und ich habe halt nur gerade überlegt, so als Developer möchte ich mich um diesen ganzen Kram gar nicht kümmern müssen.

Wenn es nicht sein muss, ich würde gerne einfach, mein Workflow wäre am liebsten, ich lege in irgendeinem Format, das mein Bildprogramm oder mein Bildstep irgendwo rauswirft, das Bild einfach auf den Server von mir aus in einer sehr hochauflösenden Variante oder in einer Variante, die sehr viel Informationen hat.

Und der Browser zieht sich nicht einzelne Bilder sogar, sondern er zieht sich aus diesem Bild das, was er jetzt gerade braucht, abhängig von natürlich Regeln, die ich schon definieren muss. Ja, das ist schon, aber auch, dass ich dann am Ende, das wäre auch geil, oder?

Das wäre schon cool. Ich bin gerade überlegen, ob das das ursprüngliche Problem löst, weil du ja, also das Bild müsste quasi im Header trotzdem schon alle Abmessungen, die es rausspucken kann aus diesem Bild, wie auch immer das angelegt ist, müsste es schon mitliefern, weil das Problem ja ist, der Browser muss zum Beispiel wissen, wie ist die Aspect Ratio von dem Bild, in welcher Breite.

Gerade wenn es Richtung Art Direction geht, wo ich halt nicht das gleiche Bild hab, mit dem gleichen Aspect Ratio und nur anders groß, ja, sondern wo ich vielleicht wirklich im schmalen Zustand ist das Bild auch einfach ein bisschen höher, weil der Text oben drüber rutscht zum Beispiel.

Jetzt spinne ich einfach mal und sage, wenn wir eh schon ein Dateiformat haben, von dem sich unterschiedliche Dinge gezogen werden können, könnte man auch als ersten Request einen machen, der ganz klein ist, der mir nur diese Metainformationen gibt. So was wie Options, ne? Wie ein Options-Request auf die Bilddatei. Und vielleicht gleich schon mitliefern als Request-Header.

Ich hab die und die Pixeldichte und dann kriege ich nur für die, was angemessen ist, das zurück und dann könnte der Browser mit umgehen. Die Leute, die HTTP 2 gebaut haben, sagen ja, Requests kosten nichts mehr. Das ist jetzt ein bisschen übertrieben. Aber die sind natürlich nicht mehr so teuer, einzelne Requests, wie früher. Das heißt, man könnte das vielleicht schon ... Keine Ahnung, ich spinn jetzt grad nur irgendwas in die Zukunft rein.

Ich bin der faule Webdeveloper, der sich eigentlich um nix kümmern möchte und schon gar nicht um so was Komplexes. Und jetzt hab ich einfach nur mal was hier reingesponnen ganz schnell für euch. Und ihr dürft mir jetzt in den Kommentaren alle erklären, warum das absolut nicht möglich ist. Interessant ist übrigens, auf Stefans Seite, stefanjudes.com, wenn man eine Weile nicht mit der Seite interagiert, dann kommt ein Bildschirmschoner. Ja, das hab ich auch schon gesehen.

Ist das vorhin so hoch? Was ist das denn jetzt? Das ist die einzige Seite, die ich ... Und dann ändert sich auch irgendwas im Title, glaub ich, gell? Ja, hab ich nicht gesehen. Ich glaub, man sieht am Titel, der Title, da bewegt sich dann auch was, sodass man dann tatsächlich noch mal auf den Tab aufmerksam wird und dann den Bildschirmschoner sieht.

Ja, das ist die einzige Seite, die ich kenne, den Bildschirmschoner, aber es ist aber, glaub ich, tatsächlich eine JavaScript-Library, die er dafür findet. Screensaver.js, oder so. Das könntest du dir irgendwie ... Screensaver.js oder so was, ja. Gut, genau, also, die Media Craters beziehen sich auf den Viewport, nicht den Container, das hab ich gesagt. Dann kam noch eine andere Idee, Off-Size ist gleich Auto.

Der Catch war, dass du das nur benutzen kannst, wenn du's mit Loading gleich Lazy kombinierst. Weil du dann ja sowieso das Bild erst im Nachhinein lädst und erst dann die Abmessung weißt. Aber wenn du die dann weißt, dann kannst du mit Size ist gleich Auto eben auch drauf reagieren. Das war der Catch. Wenn du das benutzt, dann in Kombination mit Loading gleich Lazy. Und dann kann Chrome das aber jetzt eben auch, dass du diese ganzen Sizes nicht mehr angeben brauchst.

Das heißt, du sparst es dir zumindest für Bilder, die du below the fold hast. Was ja schon mal bei uns einen großen Unterschied machen würde. Weil wir haben ein großes Header-Bild oben und haben unten eben genauso ein Mesen wie mit unseren ganzen Projekten und so weiter. Bei Content-Heavy-Seiten sind die meisten wahrscheinlich below the fold. Aber halt leider erst in Chrome.

Und dann ist halt auch das Problem, für die anderen Browser würde ich ja eigentlich, also eigentlich war das da ungeschickt, dass sie das als neuen Wert von dem Sizes-Attribut gemacht haben, solange es eben halt nicht überall implementiert ist. Weil wenn ich jetzt Sizes gleich auto setze, dann habe ich halt in den anderen Browsern, die es nicht unterstützen, diese ganzen Informationen nicht mehr. Welche Sizes es dann tatsächlich gibt. Also das ist so ein bisschen, aber gut. Genau.

Dann habe ich hier auch verlinkt noch die verschiedenen Bug-Tracking beziehungsweise Intent-to-Implement, Intent-to-Ship-Tickets. Von Chromium, Firefox und WebKit. Chromium, wie gesagt, in 126 schon geschippt und Firefox und WebKit haben zumindest Interesse dran bekundet. Da habe ich einen doppelten Link drin, der kann raus. Und ja, mal gucken, wie lange das dauern wird, bis das kommt. Wäre jedenfalls cool, weil es einem doch die Arbeit sehr vereinfacht.

Dann kommen wir zu Width- und Height-Attributen. Und das kommt auch so ein bisschen damit jetzt zum Zug. Der Browser muss ja wissen, wie groß ist das Bild. Weil mit Width und Height gebe ich die Aspect Ratio vor, die das Bild hat, in dem Standardzustand, wenn es geladen wird.

Und dadurch, dass der Browser dann zumindest die Aspect Ratio weiß, und ja weiß, naja, wenn ich das jetzt auf die Breite von der Spalt hier aufspanne, dann habe ich die und die Höhe auf jeden Fall, kann ich Layout Shift reduzieren oder sogar komplett verhindern. Weil der Browser anhand dieser Aspect Ratio zumindest mal schon mal Anhaltspunkte hat, wie viel Platz muss ich denn dafür reservieren.

Deswegen ist es nicht unsinnig, Width und Height anzugeben, weil man könnte denken, naja, das wird ja eh alles, ich hau das Bild da rein und wird ja eh am Schluss dann per CSS gemacht.

Aber ich finde es zum Beispiel, manchmal lädt vielleicht das CSS nicht, manchmal hat man irgendwie Netzwerkprobleme, dann hast du da eine Seite, die ohne CSS dargestellt wird, du könntest eigentlich den Inhalt schon dir zuführen, aber du hast halt Bilder, die irgendwie 2000 Pixel breit sind und entsprechend sich halt dann auch aufspannen auf den kompletten Bildschirm. Ja, und es ist halt Quatsch, wenn es eigentlich nur so kleine Thumbnails sein sollen.

Gut, also Width und Height am besten angeben. UseMap, das passt perfekt, dass das jetzt mit U als letztes kommt, weil es ist eine gute Überleitung dann gleich zu deinem Abschnitt mit den Maps. Ich gebe da eben eine Raute gefolgt von dem Namen einer Map. Was ist eine Image-Map? Wissen wir gleich mehr. Das werden wir gleich erfahren. Gleich nach der 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 bwsiv.de slash spende. Auf bwsiv.de slash unterstützen findest du noch ca. 69 weitere Wege uns zu supporten. Wir danken dir. 69 Wege uns zu supporten in Folge Nummer 69. Also, jetzt könnt ihr euch mal überlegen, wer das eingesprochen hat. Vielleicht war ich es, vielleicht war ich es nicht. Vielleicht war es irgendjemand, vielleicht war es Manuel Neuer. Wir werden es nie herausfinden. Neujahrsvorsätze.

Und der völlig irritiert. Da müsste man Manuel schon selbst fragen. Neujahrsvorsätze. Es ist wirklich, das ist gut. Neujahrsvorsätze. Da müsste man Manuel schon selbst fragen. So, wir reden jetzt über Sachen, die alt sind. Die ich aber tatsächlich auch schon mal eingesetzt habe. Mehr dazu gleich. Und zwar reden wir jetzt über Image Maps. Weil das ja gut zu den Images passt, die wir jetzt gerade schon hatten. Und zwar ganz konkret über die beiden Tags Map und Area.

Die zusammengehören wie Passion Travel. Ich muss jetzt hier gerade noch mal meine Notizen umsortieren, weil ich merke gerade, es ergibt keinen Sinn. Also, was sind Image Maps? Ich habe ein Bild und ich möchte darauf Bereiche klickbar machen. Also Links auf irgendwas anderes, was auch immer. Aber ich möchte jetzt nicht einfach das komplette Bild verlinken, sondern ich möchte bestimmte Bereiche des Bildes auf unterschiedliche Ziele verlinken.

So ein Klassiker, der mir eingefallen ist, was man vielleicht schon mal gesehen hat, ist eine Karte, zum Beispiel von den USA oder von Deutschland. Und in Deutschland würde man die einzelnen Bundesländer irgendwie, kannst du dann verlinken auf die einzelnen, auf Seiten von den einzelnen Bundesländern oder eine Karte von den USA, die einzelnen Bundesstaaten. Sowas, das ist so ein Klassiker, das hat man vielleicht schon mal gesehen, so ein Element.

Ob das jetzt am Ende eine Image-Map war, das steht jetzt mal infrage, weil Image-Maps haben ein paar Probleme, weil sie einfach sehr alt sind und bestimmte Dinge damit einfach nicht gehen, die man jetzt heutzutage erwarten würde. Aber fangen wir mal einfach mit dem Map-Tag an. Das hat tatsächlich, also man braucht erstmal ein Image, das ist wichtig, du hast es gerade schon gesagt, ein Image mit dem Use-Map-Attribut.

Das gehört da dazu. Und dann habe ich nochmal das Map-Tag mit, interessanterweise, es wird verknüpft mit dem Image, was in dem Use-Map mit Raute-Name drinsteht. Und jetzt wird es interessant. In den Demos, die ich gefunden habe, steht eigentlich immer das Name-Attribut in dem Map-Tag. Das ist quasi, dadurch finden die sich. Aber ich habe ID ausprobiert und es geht auch. Also wenn du nur ID benutzt und Name weglässt, geht es trotzdem?

Nein, wenn ich einfach Name durch ID ersetze, hat es in meinem Browser auch funktioniert. Da steht nämlich in der Speck, wenn es ein ID-Attribut gibt, muss es identisch sein mit dem Name, was auch Sinn macht. Ich habe es ohne Name ausprobiert. Aber dass es auch ohne Name funktioniert, interessant. Wir können es gerne nochmal testen. In meiner Demo habe ich, glaube ich, eins dabei, wo ich es umgebaut habe. Das können wir gleich nochmal gucken.

Ich habe nämlich gedacht, dieses Name-Attribut, das wird doch eigentlich für nichts mehr so richtig verwendet. Das wurde früher ja auch für Anker-Links verwendet, da haben wir ja schon mal drüber gesprochen. Aber mittlerweile gibt es dafür eigentlich immer ID für solche Anwendungsfälle. Und mich hat jetzt einfach, ich war einfach am experimentieren. Ich wollte einfach wissen, geht das auch mit ID? Und bei mir hat es funktioniert. Können wir uns gleich in der Demo nochmal anschauen.

Und damit hat sich das Map-Tag eigentlich schon fast erledigt, weil das Map-Tag ist eigentlich nur ein Wrapper. Für die Areas, die dann da reinkommen. Vielleicht jetzt mal, bevor wir zu den Areas kommen, noch was, was mir eine Einschränkung von der ganzen Geschichte, die mir halt aufgefallen ist. Das letzte Mal, als ich drüber nachgedacht habe, eine Image-Map einzusetzen, habe ich dann relativ schnell gemerkt, dass das nicht responsive geht.

Also sobald sich die Größe des Bildes irgendwie verändert, passt sich die Map nicht an. Also ich habe jetzt noch rausgefunden, wenn man zoomt im Browser, dann funktioniert das durchaus. Also so ein Browsersoom, das geht. Da werden auch die Maps nicht vergrößert. Interessant, weil hier steht nämlich in der Speck drin, Note, Browsersoom features and transforms applied using CSS or SVG do not affect the coordinates. Also in meinem Fall, Browsersoom hat es zumindest dann doch berücksichtigt.

Browsersoom hat funktioniert, aber ich habe, vielleicht habe ich aber auch einen Fehler gemacht, ich will es nicht zu 100% ausschließen. Ich hatte den Fall, dass ich eine Demo kopiert hatte in CodePen rein, von der MDN tatsächlich, weil ich ein bisschen dran rumspielen wollte und hatte vergessen, das CSS mit zu kopieren, da im CSS stehen width und height Werte für das Bild. Und dann waren die Maps komplett verschoben und an der falschen Stelle.

Das sagt mir schon ziemlich deutlich, dass es nicht funktioniert, wenn ich jetzt in diesem Fall zumindest, und ich habe das auch schon mal versucht responsive zu machen, aber die Maps sind, also die areas, also die einzelnen Bereiche, die klickbar sind, die werden angegeben durch Pixel-Koordinaten. Und da kann ich jetzt nicht sowas sagen wie, wenn ich jetzt, keine Ahnung, Screen Size so habe, dann bitte andere Koordinaten.

Das könnte ich mit JavaScript irgendwie hinfummeln, aber ich habe da keine Möglichkeit. Zumindest könnte der Browser das ja auf die intrinsische Größe eben, wie wir gerade schon gelernt haben, vom Bild beziehen und dann entsprechend skalieren. Vielleicht habe ich einen Fehler gemacht. In meinem Fall hat das mit Width und Height, ist das schon kaputt gegangen. Mit Width und Height in CSS für das Bild ist die ganze Geschichte schon kaputt gegangen.

So, dann kommen wir zu Area. Und ich habe mir das Ganze mal ein bisschen genauer angeguckt. Also generell ist so eine Area einfach nur, ich denke so aus heutiger Sicht, hätte man auch einfach das Artec nehmen können dafür, weil es ist letzten Endes wie ein Link. Es hat auch ein Href-Attribut, muss es nicht haben, kommen wir gleich noch zu. Und ein Shape-Attribut und ein Coords-Attribut für Koordinaten.

Und weil wir das gerade nicht sehen, das hast du nämlich unten nicht ausgeführt. Es gibt auch noch andere Attribute, nämlich Download, dann wie gesagt Href, Ping, Referral Policy, Rel und Target. Und die sind komplett analog zu R-Tags und dementsprechend bis 62. Aber das war's nochmal. Genau, die sind komplett genauso, als wäre es ein R-Tag. Von daher habe ich das jetzt auch nicht extra aufgeführt, aber stimmt, danke, dass du es noch ergänzt hast.

Letzten Endes verhält sich das Ding sehr, sehr, sehr, sehr wie ein Link. Allerdings gibt es ein paar Unterschiede. Jetzt nicht nur diese Attribute. Ganz wichtig ist, dass das Ding ein Alt-Attribut kriegt, weil der Link hat nämlich sonst keinen Text. Für Screenreader zum Beispiel, der Link braucht einen Text. Und das Alt-Attribut hat man normalerweise ja nicht auf Links, aber bei dem Area-Tag gibt es das Alt-Attribut und das ist für Areas, die auch wirklich Links sind, muss das dabei sein.

Dann bei Shapes gibt es die Werte Rect, Circle, Poly und Default. Und Default ist nicht einfach leerlassen oder weglassen, sondern Default ist tatsächlich, man schreibt Default rein, das musste ich vorhin auch noch lernen. Also Rectangle, also ein Rechteck, ein Kreis, allerdings mir ist nicht bekannt, also es ist wirklich dann ein runder Kreis, man kann dann nicht sagen, eine Ellipse oder sowas, es ist dann einfach ein Kreis.

Oder halt Poly ist tatsächlich eine Freiform, die kann ich selbst definieren. Genau, immer alternierend x-y-Werte.

Genau, das erkläre ich gleich noch ganz genau, wie das funktioniert, weil da habe ich mir vorhin die Mühe gemacht, mir das nochmal genauer anzuschauen, weil ich das nämlich früher, jetzt muss ich gerade noch was anderes vorziehen, das habe ich nämlich früher, die Mühe habe ich mir damals nicht gemacht, das genau zu verstehen, wie es funktioniert, dabei ist es gar nicht so kompliziert.

Ich erinnere mich noch, bei meinem alten Arbeitgeber hatte ich mal den Fall, dass ich, und das ist jetzt wirklich lange her, das war, das ist 2011 gewesen sein oder so, hatte ich den Fall, dass ich hatte was, da habe ich drüber nachgedacht, eine Image-Map zu verwenden, ich weiß gar nicht, ob es am Ende tatsächlich zum Einsatz kam, weil wir kommen noch auf so ein paar Einschränkungen zu sprechen, die damals auch schon da waren.

Auf jeden Fall, ich wollte diese Image-Maps, und die waren relativ kompliziert, wollte ich nicht von Hand irgendwie jetzt diese Koordinaten mir raussuchen, aber Dreamweaver, vielleicht kennen es der eine oder andere noch, der schöne Editor, ich weiß gar nicht, eine IDE kann man nicht nennen, Web-Editor Dreamweaver von Adobe später, damals noch Macromedia, hatte ein Feature eingebaut, dass man sich diese Areas tatsächlich einfach zeichnen konnte auf dem Bild.

Und dann hat er mir die einfach gebaut, ich musste quasi gar nichts, konnte einfach irgendwie drauf rumzeichnen oder einzelne Punkte setzen und dann war das ganz easy.

Also wenn du jetzt zum Beispiel, also ich meine irgendwie ein Rechteck oder ein Kreis ist es noch easy, aber wenn du wirklich jetzt ganz viele so einzelne Punkte hast, wenn du jetzt zum Beispiel wirklich die Deutschlandkarte mit einzelnen Bundesländern hast, da hast du ein bisschen was zu tun, wenn du das einzeln machen willst, das willst du nicht von Hand machen.

So, also ich gehe jetzt mal auf die einzelnen Maps ein und wie, also auf die einzelnen Shapes und dann sage ich mal wie die Koordinaten funktionieren. Also es gibt, wie gesagt, dieses Coords Attribut, in dem Zahlen stehen getrennt von Kommas und je nachdem welches Shape es ist, es ist eine unterschiedliche Anzahl und die bedeuten was unterschiedliches.

Bei einem Rechteck, also Rect, sind es immer vier und zwar gibt die ersten beiden Koordinaten, geben den X und den Y Wert in dieser Reihenfolge des linken oberen Punktes des Rechtecks an und die beiden weiteren, also der dritte und der vierte Wert, wieder X und Y von dem Punkt rechts unten. Und ich habe dann kurz darüber nachgedacht, ah ja stimmt, es reicht um ein Rechteck zu zeichnen, man braucht nicht mehr, ich brauche die anderen beiden Punkte nicht, die ergeben sich daraus einfach.

Beim Circle ist es so, beim Circle gibt es drei Werte, der erste Wert ist der X-Wert, der zweite Wert ist der Y-Wert von dem Mittelpunkt des Kreises und der dritte Wert ist der Radius, alles in CSS-Pixeln, muss man dazu sagen. Und bei Poly, also Polygon, eine Freiform, kann ich eine beliebige Anzahl, vielleicht gibt es in der Spec auch irgendwie ein Max, was ich jetzt übersehen habe, aber ich glaube eine beliebige Anzahl oder auf jeden Fall eine sehr große Anzahl von Koordinaten.

Und das sind einfach einzelne Punkte, die ich setze auf dem Bild, und zwar immer zwei zusammen, X und Y, damit brauche ich natürlich X und Y, also das heißt immer zwei gehören zusammen, wieder ein Zweierpärchen. Trotzdem werden sie einfach hintereinander geschrieben, deswegen sieht es ein bisschen wild aus, wenn man so drauf guckt, sieht man jetzt nicht genau, was da passiert.

Genau, und da kann ich quasi wild Punkte setzen auf dem ganzen Bild, so viele wie ich will, wahrscheinlich, und das wäre vielleicht mal eine interessante Demo, mal zu gucken, bei wie vielen der Browser abstürzt oder ob es irgendwo ein Limit gibt, das sind ja immer schöne Experimente, die man machen kann.

Und da kann man beliebige Formen damit zeichnen, du kannst auch theoretisch einzelne Pixel, also theoretisch zieht der dir eine Linie zwischen den einzelnen Punkten, aber wenn der eine Pixel direkt neben dem anderen ist und schräg oben drüber oder so, dann geht das natürlich auch.

Ich hab auch mal für einen Auftraggeber Werbemittel gebaut, die transparent über der Seite liegen. Aber du weißt bestimmt für wen. Wo dann nur der Bereich klickbar sein sollte und das war dann auch immer, da kamen dann halt Grafiken von der Grafikabteilung und dann hieß es ja mach mal.

Und ich hab dann auch intern so wie Dreamweaver quasi, du konntest dann, hab ich so ein kleines Tool gebastelt, wo du einfach dann klicken konntest und so einen Pfad zeichnen konntest, damit man dann diese Umrisse da zeichnen kann, musste ich grad dran denken, weil das waren auch sehr viele Punkte teilweise, weil wenn das dann so Rundungen waren und das sollte halt wirklich so wenig wie möglich dann überdeckt werden, was man nicht klicken kann und dann musste ich das da immer so klick, klick, klick, klick.

Genau, also Vektoren hast du leider keine. Dazu ist der Standard zu alt. Ich nehme mal an, wenn heute jemand sowas nochmal bauen würde, würde es bestimmt eine Vektoroption geben. Das macht es natürlich dann nicht wirklich einfacher zu verstehen, weil ich finde so, ich zeichne mir ein Polygon anhand von XY-Werten, das ist noch relativ leicht durchschaubar. Bei Vektoren wird es dann relativ schnell haarig, wenn du dann irgendwie noch so die Biegung davon hast und sowas.

Wenn man dann mal versucht, in SVG zum Beispiel zu verstehen, was jetzt gerade das D-Attribut, was mir das sagen soll. Vielleicht noch angemerkt, sofern der Endpunkt nicht der Anfangspunkt ist, das stand explizit mit drin, dann macht der Browser das für einen, der schließt für einen dann quasi das Polygon. Es kann also nicht offen sein, es ist immer geschlossen. Es ist ja nett und hilft einem ein bisschen. Das heißt, man kann es nicht kaputt machen sozusagen.

Was einem dann relativ schnell auch noch auffällt ist, und das habe ich jetzt nochmal ausprobiert und nein, ich habe es immer noch nicht zum Laufen gekriegt, sowas wie ich möchte jetzt per Hover oder Focus eine Hintergrundfarbe hinterlegen, dass man die Area auch mal sieht. Das geht nicht.

Eine Outline geht, die ist auch standardmäßig da. Und wenn ihr schon immer mal eine Outline um einen Link in einer sehr verrückten Form sehen wolltet, dann müsst ihr euch solche Demos angucken, weil die Outlines, normalerweise sieht man sie halt immer nur in rechteckig oder vielleicht noch mit abgerundeten Ecken, aber nie Sternform.

Ist das cool, dass das funktioniert. Das geht damit aber. Aber sowas wie auf Hover oder Focus irgendwie die Backgroundcolor verändern, das geht dann zum Beispiel schon nicht. Und dann kommt man dann schon relativ schnell, wenn man das aber braucht bei sowas, kommt man schon relativ schnell wieder davon weg, Imagemaps mit Area und Map zu verwenden, sondern dann geht man eher in Richtung, man baut was mit einem SVG oder man kann auch, ja, weiß ich nicht, muss man dann gucken.

Vielleicht muss ja der Link nicht genau die Form haben, sondern die visuelle Repräsentation reicht oder so und dann kann man gucken, vielleicht setzt man irgendwie Punkte drauf und da ist dann der Link oder es gibt da verschiedene Möglichkeiten, je nachdem was für einen Anwendungsfeld man hat.

So, und dann habe ich mir gedacht, das ist ja schon alles sehr interessant, jetzt lese ich doch nochmal den richtigen Standard, nicht nur die MDN, weil ich war so angefixt, ich habe auch in meiner Demo, in der Demo, die ich kopiert hatte, war was drin, wo ich dachte, hä, das ergibt doch gar keinen Sinn, wieso ist das denn so?

So, und ich sage jetzt mal, und dann musste ich noch tiefer lesen, weil ich mir gedacht habe, das kann kein Zufall sein, sowas ist nicht, das ist keine Implementierungsunschärfe im Browser, das muss so gewollt sein. Was man nämlich auch machen kann, ist, man kann auch zwei Areas übereinander legen. Das klingt jetzt erstmal nicht so wild, aber wenn ich jetzt eine Area, und das ist in dem einen, vielleicht beschreibe ich mal visuell das eine Beispiel aus dem Standard.

Da habe ich ein Bild mit vier Symbolen nebeneinander. Es ist ein Stern, es ist ein Dreieck, es ist ein Kreis und es ist ein Quadrat, das aber in der Mitte eine quadratische Aussparung hat. Also quasi wie so eine dicke Linie, die quadratisch ist und einmal rum geht. Und dann habe ich mir dann gedacht, Moment mal, ist da jetzt wirklich in der Mitte ausgespart?

Und ja, das geht. Und zwar indem ich eine Area drüber lege, die eben kein href-Attribut hat. Kann ich wieder was aussparen? Und jetzt wird es verrückt und so bin ich überhaupt nur drauf gestoßen. Was würdest du jetzt sagen? Das ist eine blöde Frage, weil sonst würde ich nicht so doof fragen. Was würdest du sagen, in welcher Reihenfolge liegen die Areas übereinander? Also vom Gefühl her hätte ich jetzt gesagt, die eigentliche Fläche zuerst und dann das, was ausgeschnitten wird.

Du hast jetzt mehrere Areas im Code übereinander stehen, du hast jetzt Map und dann hast du Area, Area, Area, Area. Was schlägt was? Also stell dir vor, du hast jetzt zwei Areas, die sind deckungsgleich, die sind beide gleich groß und die, die zuerst im Code steht, enthält einen Link und die zweite nicht. Was gewinnt? Hm, das kommt drauf an, wie die Shapes davon sind. Die Shapes sind einfach, die liegen einfach übereinander.

Ja, aber, aber, aber stehen die über oder ist die eine komplett in der anderen enthalten oder? Die sind, ne, die sind ja nicht, das ist doch egal. Die Reihenfolge muss ja irgendwie determined werden. Okay, ich, ich spann dich nicht. Naja, aber das war das, was ich meinte. Also zuerst das eigentliche Viereck und dann das, was ausgeschnitten werden soll.

Ich glaube, ähm, den Areas ist scheißegal, ob sie einen Href haben oder nicht. Die verhalten sich alle gleich, nur das eine hat halt, wird halt nicht verlinkt, weil es keinen Href-Attribut hat. Achso. Es ist nicht wirklich ausgeschnitten. Es liegt nur über dem anderen drüber. Ah, okay. So, äh, aber jetzt kommt's. Ich, äh, vielleicht weißt du schon, worauf ich hinaus will. Ich hätte jetzt angenommen, instinktiv, naja, wir gehen in der Dornenreihenfolge von oben nach unten.

Und was ganz unten ist, liegt über dem, so wie man's kennt, ja? Also, wenn man HTML-Elemente alle übereinander platziert, über Position Absolut oder sowas, dann ist das ganz oben, was ganz, was im Code ganz unten steht. Da ist es aber genau umgekehrt. Ah, ah, okay. Ich seh's jetzt auch gerade. Als erstes kommt the hole in the red box. Und dann, ah, das ist ja verrückt.

Das ist wirklich, ich hab echt im Standard nochmal nachlesen müssen und da steht es explizit drin, es ist in der DOM-Reihenfolge umgekehrt. Verrückt. Ja, also das fand ich echt abgefahren. Und da dachte ich, okay, dann lohnt es sich vielleicht jetzt echt, dass ich da nochmal ein bisschen tiefer eingestiegen bin. Und ich bin mir ziemlich sicher, das ist wahrscheinlich schon immer so. Und das ist so tiefgreifend, das kannst du auch nie mehr ändern. Ne, klar, weil du Rückwärtskompatibilität hast.

Auf keinen Fall, genau. Und dass man Sachen ausspart, indem man nochmal was drüberlegt, was aber kein href-Attribut hat, oder in dem Fall dann wahrscheinlich auch kein alt-Attribut, weil das brauchst du dann auch nicht, ist irgendwie schon ein abgefahrener Hack. Somit kannst du aber halt eigentlich so ziemlich jeden Shape kannst du damit bauen, ohne dass du jetzt mehrere zusammenbauen müsstest.

Du kannst einfach Löcher rein definieren, indem du so einen Void, nenne ich das jetzt mal, drüberlegst. Genau. Was allerdings nicht passiert, logischerweise, ist, wenn man jetzt, also das finde ich ganz interessant, ich empfehle mal in der Demo, die ich da gebaut habe, ich muss dazu sagen, davon ist nur eine Sache von mir, die anderen habe ich mir aus anderen Demos zusammen kopiert, ich wollte es aber an einem Ort haben.

Ich finde es ganz cool, da mal mit Tab und Shift-Tab ein bisschen drumherum zu springen und dann quasi die Outlines zu sehen in so Shapes, das finde ich schon abgefahren. Und bei dem Quadrat sieht man dann auch, das Innen ist nicht ausgeschnitten, er hat einfach den Shape außen, dass man in das sich blicken kann. Stimmt, das ist nämlich ein Viereck und nicht, wie man es erwarten würde, dann den Ausschnitt auch mit einer Outline versehen.

Genau, der hat keine Outline, sondern das ist halt tatsächlich einfach nur, das ist nicht wirklich ausgeschnitten, da liegt halt nur was oben drüber, was nicht verlinkt ist. Also total abgefahren, ich glaube, ein Detail aus der MDN ist mir noch aufgefallen, den ich auch irgendwie interessant fand, wo ich nicht so richtig wusste, warum das so ist. Und zwar, das Area Element braucht ein Map drumherum, aber das muss nicht das direkte Eltern Element sein, das darf auch irgendwo weiter oben sein.

Und da habe ich mich gefragt, was will man denn da dazwischen noch haben, oder warum? Also da wäre ich auf Anwendungsfälle gespannt. Ja, aber Map kann doch nur Area enthalten. Na ja, offenbar kann es auch noch was anderes enthalten. Und da frage ich mich halt, was denn? Was passiert, wenn ich da noch Text reinschreibe? Also der Standard sieht es so vor. Ich weiß nicht, ob das jemals jemand ausprobiert hat, keine Ahnung. Aber das fand ich noch ein interessantes Detail.

Und dann wäre ich damit tatsächlich schon durch. Eine Sache ist mir noch eingefallen bei dem Rectangle, also wo auch wirklich Rectangle unten drin steht als Text, da sind die oberen zehn Pixel oder so nur klickbar. Und das untere nicht, ist das Absicht? Ist das auch zum Demonstrieren von dieser Reihenfolge wahrscheinlich, ne? Ähm, genau. Da wollte ich noch mal das mit der Reihenfolge, und das habe ich nicht dazugeschrieben, und dem Ich-spar-etwas-aus-Demonstrieren.

Ah ja, genau, also links und oben kann ich klicken. Und das andere, das Rect liegt aber drüber, ja, okay. Ja, genau. Ja, wenn die Reihenfolge andersrum ist, macht Sinn. Das hat mich irritiert, warum das nicht klickbar ist. Ja, es ist anders. Ich kenne nichts im Web, was irgendwie so rum ist. Es ist immer unten schlägt oben. Und da ist es genau umgekehrt. Das ist, ja, bemerkenswert.

Und da bin ich halt nur durch Zufall drauf gestoßen, weil ich gedacht habe, hä, bei diesem Rectangle-Demo, bei diesem, genau, dieser Kommentar ist mir aufgefallen. Hole in the Red Box, warum ist das das erste Element? Wie kann das eigentlich sein? Zu wichtiger Reihenfolge noch ein Nachtrag zum Sizes-Attribut bei Bildern. Das habe ich nämlich, glaube ich, vergessen zu sagen. Auch da ist die Reihenfolge wichtig, weil der Browser die Sizes durchgeht. Das ist ja eine Komma-separierte Liste.

Und die erste, die ihr findet, die greift. Also die erste, die matcht. Und alles dahinter wird ignoriert. Deswegen ist wichtig, welche Reihenfolge man da wählt, um zu gucken, ja, welches greift zuerst und welches nimmt an den Browser. Das noch als Nachtrag. Okay. Jetzt habe ich mir jetzt gerade aufgefallen, dass wir kein Guild-Teil auf dem Star haben. Ja, habe ich jetzt auch gerade erst gesehen. Und ich überlege, ob ich gerade ... Ach, weißt du, ich mache spontan.

Machst du spontan was. Sehr schön. Ich mache spontan noch eins. Dann mache ich den Guild-Teil-Trailer-Teaser-Challenge. Ja. Also, übrigens, warte. Ja, komm. Ich wollte nur sagen, ich wollte nur irgendwie noch abschließende Worte für das Thema finden. Wir haben jetzt Map, Area und Image uns heute angeschaut. Und das nächste Mal, wenn wir mit der Serie weitermachen, das muss nicht notwendigerweise die nächste Folge sein, dann werden wir uns Audio, Video und Track vornehmen.

Das sind nämlich die anderen, die noch zu diesem Block gehören. Das wollte ich eigentlich nur noch sagen. Was ist mit dem Picture-Element? Haben wir da nicht sogar schon mal drüber gesprochen? Bei Embedded Content ist das dann ... Das kommt dann nach dem Multimedia-Block, kommt dann Embedded Content, da ist eine Picture auch dabei. Ist ja aber eigentlich von der Reihenfolge her gut, weil wir jetzt ja dann quasi Image schon haben. Und das baut ja quasi so ein bisschen darauf auf.

Okay, dann jetzt aber. Jetzt. Das Geil-Time. Geil-Time. So. Was hast du dir aus dem Ärmel geschüttelt? Absolut muss ich vorweg schicken, weil wir hier keine Werbung machen. Absolut unbezahlte Werbung jetzt, also nicht jetzt denken ... Also, ich war zwischen den Jahren im Musical ... In Stuttgart. Stage-Musical. Ich glaube, wenn man Musicals mag, dann kennt man Stage-Entertainment. Zumindest wenn man in Baden-Württemberg lebt und Musicals mag. Ja, es gibt auch in Hamburg Stage-Entertainment.

Die machen das da auch. Also, wenn man irgendwie aus der Hamburger Ecke kommt, dann kennt man es vielleicht auch. Ich war schon mal in einem Stage-Entertainment-Musical. Das war damals Tanz der Vampire. Aber diesmal war ich in Die Eiskönigin. Ah, und? Und es war ganz bezaubernd. Es war ganz, ganz toll. Ich weiß gar nicht, ob ... Ja, darf man das irgendwie ... Doch, ich darf das. Ich darf das gut finden. Natürlich darfst du das gut finden. Du darfst auch im rosa Tutu tanzen, wenn du möchtest.

Ich hatte Pippi in den Augen die ganze Zeit. Ich habe auch hinterher mich noch mal mit der Musik ein bisschen beschäftigt. Ich muss sagen, die Stage-Musicals sind teuer. Es kostet viel Eintritt. Aber es ist jeden Cent wert, meiner Meinung nach. Ja, finde ich auch. Es ist unglaublich gut inszeniert. Es ist ja alles mit Live-Musik. Es wird live gesungen. Es ist eine Live-Band, Live-Orchester muss man dazu sagen, die auf Disney-Filmmusikniveau abliefern. Also alle.

Und dazu wird noch geschauspielert. Ich glaube, man kann eine Show nicht perfekter machen als das, was ich da gesehen habe. Es war einfach ganz toll. Und die Musik ist auch ganz toll. Ich muss sagen, die englischen Varianten liegen mir manchmal ein bisschen näher, wobei ich jetzt auch ganz tolle Kinderschauspielerinnen, die Elsa und Anna als Kinder spielen, gar keine so kleine Rolle gehabt. Die haben das fantastisch gemacht. Die haben auch ganz toll gesungen.

Die waren so zwischen acht und zehn oder so. Und die haben alle ganz toll abgeliefert. Es war wirklich ganz, ganz toll. Und vielleicht kennt man diejenige, die Elsa jetzt da in Stuttgart spielt, oder die Erstbesetzung, Hauptbesetzung von der Elsa. Und zwar ist das, die hat mal für Deutschland im Eurovision Song Contest den gloriosen letzten Platz gemacht. Ah, was? Die heißt Anne-Sophie. Vielleicht erinnert sich noch jemand dran. Okay. Warte mal.

Doch, ich glaube, die hat den letzten Platz gemacht. Ist auch egal. Die Elsa-Rolle spielt sie fantastisch. Und die singt auch unglaublich gut. Und das war alles ganz wunderbar. Und ich möchte generell dafür Werbung machen. Also wenn ihr irgendwie, wenn ihr euch für Musicals erweichen könnt und vielleicht irgendwo da aus der Gegend kommt, ich kann das nur ganz, ganz, ganz toll empfehlen. Es war ganz schön. Und das war mein spontan aus dem Ärmel geschütteltes Geilteil.

Und wenn ich daran denke, kriege ich wieder ein bisschen Pipi in die Augen. Es gibt noch was, was für unsere Tochter auch interessant sein könnte. Ich glaube, das ist sehr gut inszeniert für jung und alt. Und es gibt auch, glaube ich, am Tag zwei Vorstellungen. Es gibt eine, die wirklich ... Meistens mittags und abends. Eine mittags und eine ... Also die Abendvorstellung ist auch gar nicht so spät. Ich glaube, wann hat die? Um 18 Uhr begonnen oder so?

Also tatsächlich auch noch, würde ich sagen, kindertauglich. Mehr oder weniger. Ja. Genau. Also, es gibt auch eine schöne, habe ich dann hinterher gesehen, eine schöne kleine Doku vom SWR. Ah ja. Die das so ein bisschen begleitet haben bis zur Premiere hin. Das ist irgendwie so eine Dreiviertelstunde. Das kann ich auch nur empfehlen, sich das mal anzugucken. Vielleicht suche ich da den Link gleich noch raus. Da sieht man dann auch die Kids so ein bisschen.

Die sind natürlich doppelt und dreifach besetzt, weil die können natürlich nicht, die Kinder zwischen 8 und 10, die können nicht wochenlang am Tag zwei Vorstellungen spielen. Ist klar, da gibt es Mehrfachbesetzung von den Rollen. Und das ist alles ganz bezaubernd. Ja, das stand eh noch bei uns auf der Wunschliste. Also ich liebe ja Musicals auch total und habe zum Beispiel König der Löwen in London gesehen. Und da ist halt auch, Nala und Simba werden da auch von Kindern am Anfang gespielt.

Allein schon, wie die singen können in dem Alter schon und performen können auf der Bühne, fantastisch. Und auch, wer König der Löwen noch nicht gesehen hat, das finde ich, lohnt sich auch total. Weil da, also da habe ich auch schon Gänsehaut bekommen, direkt am Anfang. Man kennt das ja, dieses Nancingonia, was da gesungen wird. Und dann marschiert halt so ein riesengroßer Elefant durch den Gang in der Mitte, wo halt in jedem Bein quasi ein Mensch steckt.

Und dann bewegt der sich so grazil da durch die Menge und dann die Gazellen, die da springen. Also das ist auch total cool. Und weil du Tanz der Vampire gesagt hast, auch eins meiner absoluten Lieblingsmusicals. Ich glaube, ich weiß nicht, wie oft ich das, fünfmal, sechsmal habe ich das bestimmt schon gesehen. Finde ich auch super. Also ihr könnt euch dann schon mal überlegen, wie wird bei einem Musical eigentlich Olaf dargestellt. Oh ja, stimmt.

Und, aber noch viel krasser, also Olaf, ich nehme jetzt mal nichts vorweg, Olaf hat mich nicht so überrascht, aber was mich extrem überrascht hat, war das Rentier. Sven heißt es, glaube ich, gell? Das war wirklich sehr gut gemacht, muss ich sagen. Aber könnt ihr überlegen, wenn ihr mal dagegen seid, das ist auf jeden Fall eine Reise wert, würde ich sagen. Sehr schön. Dann sagt er uns Bescheid, dann gehen wir was trinken noch, wenn ihr in der Ecke seid. Also falls ihr von weiter her kommt. Genau.

So machen wir das dann. Gut. Okay, jetzt sind wir am Ende. Und deswegen kommt jetzt das Ende. Das Ende zum Ende. Wer hätte es gedacht. Ja, Mensch, jetzt haben wir wieder Podcast gemacht. Ich muss sagen, es ist schon ein bisschen entspannter als Stream, weil nicht so viel gleichzeitig passiert. Und ich bin ja eh leicht abgelenkt. Währenddessen ja. Die Vorbereitung ist deutlich intensiver. Das stimmt. Aber insgesamt finde ich jetzt, war das echt sehr entspannt.

Wir haben es schon länger nicht mehr gemacht. Vor allem nicht zu zweit. Mit Gast muss man sich ja nochmal anders konzentrieren. Aber ja, macht echt Spaß. Und ich freue mich da auch drauf, dass wir jetzt dieses Jahr gesagt haben, wir machen mal wieder ein bisschen hier Back to the Roots und machen mehr Podcast. Und ich hoffe, ihr freut euch darüber genauso wie wir. Ja, ihr habt ja keine Wahl. Naja, abschalten. Achso, stimmt. Peter Lustig ist auch noch da. Ja, genau.

Also ja, vielen, vielen Dank schon mal fürs Zuhören, falls ihr es bis hierher geschafft habt. Wir würden uns natürlich auch wie immer sehr freuen, wenn ihr uns auf Podcast-Portalen bewertet. Wir versuchen das auch immer zu lesen. Wie schon vorher gesagt, wir freuen uns auch über jegliche Unterstützung unter www.sev.de-unterstützen findet ihr viele, viele Wege, wie ihr das tun könnt.

Es muss auch gar nicht irgendwie finanziell oder so sein, sondern eine Bewertung auf Podcast-Portalen hilft uns ungemein. Oder erzählt anderen Leuten, dass es uns gibt. Das würde uns auch sehr freuen. Und wie schon gesagt, wir würden uns auch über Kommentare freuen zur Folge, falls wir irgendwo Quatsch erzählt haben oder falls ihr irgendwo nur sagen wollt, ah, coole Folge, sowas darf man auch schreiben. Ja, und dann bleibt mir eigentlich gar nichts weiteres hinzuzufügen.

Ja, ich habe auch nichts mehr groß zu sagen. Ich starte einfach schon mal das Outro. Vielen Dank fürs Zuhören und ja, wir hören uns jetzt wieder öfter. Macht's gut. Bis dann. Ciao. Ciao.