WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: HTML VON A BIS Z-Z VII: img, map und area
Publishing Date: 2025-01-24T19:38:49+01:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/html-von-a-bis-z-z-vii-img-map-und-area/

00:00:00.000 --> 00:00:07.780
Wo wir sind ist vorne Folge 69. Heute sprechen wir in unserer HTML Serie über Image, Map und Area.

00:00:07.780 --> 00:00:27.700
Herzlich Willkommen bei Wo wir sind ist vorne. Frontend Fakten Frotzelein. Der Late Night

00:00:27.700 --> 00:00:36.420
Frontend Talkshow rund um Webdesign und Entwicklung. Es reden sich um Head und Kragen,

00:00:36.420 --> 00:00:42.860
HTML Fundamentalist Moritz Glanz und Javascript Jongleurin Sarah Groß.

00:00:56.860 --> 00:01:08.980
Herzlich willkommen in 2025. Wir sind wieder da und wir machen wieder Podcast. Ja, ich lasse mir

00:01:08.980 --> 00:01:14.420
die Laune nicht verderben von der ganzen Welt und dem ganzen Kram, der irgendwie passiert.

00:01:14.420 --> 00:01:24.180
Es ist mir egal. Ich hab sogar Bier. Ich hab tatsächlich heute nur ein Glas Wasser und das

00:01:24.180 --> 00:01:29.100
schmeckt nicht mal. Ich habe das aus dem Wasserhahn rausgelassen und es schmeckt ganz komisch. Ich

00:01:29.100 --> 00:01:36.220
trinke heute einfach nichts. So, heute gibt es auch mal wieder Content. Ja. Ganz, ganz überraschenderweise.

00:01:36.220 --> 00:01:43.500
Dann sage ich mal, was ich hier für ein Bier habe. Ich habe ein Stugge Craft Beer und drüber

00:01:43.500 --> 00:01:50.700
steht Beers Not Dead und das habe ich zu Weihnachten geschenkt bekommen von einem guten Freund von mir.

00:01:50.700 --> 00:01:59.340
Der hat mir aus seiner Heimat, aus Winterbach in der Pfalz, da macht jemand Craft Beer und ich

00:01:59.340 --> 00:02:04.700
zeige es mal kurz. So sieht es aus und da hatte ich vier verschiedene Sorten und das ist die Sorte

00:02:04.700 --> 00:02:13.180
Witt Spolt, aber Witt Spolt, Witt Bier, Bière Blanche und ich habe vorhin noch mal drauf gelesen,

00:02:13.180 --> 00:02:16.900
was da drauf stand. Ich fand es ganz interessant, weil ich kannte jetzt Witt gar nicht. Wahrscheinlich

00:02:16.900 --> 00:02:21.700
sagen alle, was das kennst du nicht. Hier steht belgisches Weißbier, das seit den 50er Jahren

00:02:21.700 --> 00:02:25.940
vermisste in Deutschland. Fast unbekannte Pendant des bayerischen Weißbieres wurde

00:02:25.940 --> 00:02:33.660
vom belgischen Milchmann Pierre Selye 1965 wieder zum Leben erweckt. Seitdem erfrischt es wieder mit

00:02:33.660 --> 00:02:39.580
einer pikanten, orangigen, zitronigen Fruchtigkeit in Kombination mit einem cremigen Mundgefühl.

00:02:39.580 --> 00:02:44.640
Richtig kalt genießen. Und jetzt kommt was, womit ich nicht gerechnet habe. Musikempfehlung,

00:02:44.640 --> 00:02:51.960
Doppelpunkt. Sonic Youth Sugar Cane. Kenn ich nicht, aber kann man ja mal reinhören. Fand ich

00:02:51.960 --> 00:02:57.400
interessant. Sehr cool. Passt auch Bier ist noch da. So, dass wir das wieder aufleben lassen,

00:02:57.400 --> 00:03:00.920
oder du zumindest. Und es ist auf jeden Fall regenbogig hier, guck mal. Die Geschichte hier

00:03:00.920 --> 00:03:06.080
habe ich schon gesehen, ist mir gleich auch gefallen. Sehr cool. Ja, ich habe noch zwei

00:03:06.080 --> 00:03:10.720
andere Sorten. Ich hatte, genau, ein IPA habe ich schon getrunken und dann habe ich noch zwei

00:03:10.720 --> 00:03:15.760
andere, aber heute soll es dies hier sein. Back to the Roots. Wie wir das früher alles hatten,

00:03:15.760 --> 00:03:24.640
mit so verschiedenen Craft Beeren. Sehr schön. Auf jeden Fall eine 0,33er Flasche. Ich habe es

00:03:24.640 --> 00:03:29.520
vorhin, ich mache das immer, weil ich will, dass es ein bisschen zischt zumindest. Bewege ich die

00:03:29.520 --> 00:03:32.840
Flasche vorher so ein bisschen, damit es nicht übersprudelt und das habe ich mittlerweile ganz

00:03:32.840 --> 00:03:37.480
gut raus, damit ihr auch was hören könnt hier. Also ich will auch den letzten Retro-Punkt noch

00:03:37.480 --> 00:03:41.760
nicht vorweg nehmen, aber es wird mehr Podcasts wieder geben dieses Jahr. Ich glaube, das kann

00:03:41.760 --> 00:03:46.160
man schon mal sagen, weil wir jetzt gerade dabei sind, so Back to the Roots und Craft Beer und

00:03:46.160 --> 00:03:51.400
das ist unser Ziel. Dann nimmst du doch nicht vor. Ne, nehme ich ja gar nicht. Dann stoßen wir noch

00:03:51.400 --> 00:04:00.760
kurz an durch das Portal. Genau, mit meinem ekligen Wasser bitte. Sehr gut, so. Genau,

00:04:00.760 --> 00:04:07.320
wir setzen unsere HTML-Element-Serie fort. Überraschendes O. Das ist lecker. Das ist

00:04:07.320 --> 00:04:13.240
wirklich, also die Beschreibung ist schon ein bisschen übertrieben, aber das Fruchtige,

00:04:13.240 --> 00:04:21.720
das kann ich schon finden darin. Cool. Und würdest du sagen, es ist dem deutschen Weißbier ähnlich?

00:04:21.720 --> 00:04:27.800
Ne, überhaupt nicht. Das ist gut, weil ich mag kein Weißbier. Es ist ganz anders. Es ist auch

00:04:27.800 --> 00:04:34.920
nicht trüb. Es ist ganz leicht trüb, aber eigentlich ist es in erster Linie durchsichtig,

00:04:34.920 --> 00:04:38.480
also durch eine Weißbierflasche kannst du nicht so durchgucken, wie ich jetzt hier gerade durchgucken

00:04:38.480 --> 00:04:50.280
kann. Und es schmeckt ganz anders, finde ich, als deutsches Weißbier. Also es geht eher in

00:04:50.280 --> 00:04:58.120
Richtung IPA auch, weil es ist so fruchtiger. Also finde ich gut. IPA finde ich toll. Mal gucken,

00:04:58.120 --> 00:05:07.060
dann haben wir das Bier geklärt. Dann können wir direkt weitergehen zur Retro, ne? Yes.

00:05:07.060 --> 00:05:21.920
Ich hatte noch mal nachgucken müssen, weil ich mir nicht sicher war, aber ich glaube,

00:05:21.920 --> 00:05:27.120
das ist tatsächlich die erste Folge Podcast, die wir aufnehmen, wo ich meinen neuen Nachnamen habe,

00:05:27.120 --> 00:05:33.760
zumindest offiziell verkündet. Ich glaube, bei dem Weihnachtsintro war es, glaube ich,

00:05:33.760 --> 00:05:42.000
schon. Ja? Haben wir da schon drüber geredet? Sicher? Okay, Gott, ich will jetzt nichts wiederholen.

00:05:42.000 --> 00:05:52.400
Ich müsste jetzt auch noch mal nachhören. Ich meine das nicht. Ich glaube, da war es noch

00:05:52.400 --> 00:05:57.200
nicht offiziell. Ach du, egal. Wir machen das jetzt einfach nochmal. Falls jetzt jemand davon

00:05:57.200 --> 00:06:02.240
überrascht ist, dass im Intro bei mir der Name Glanz ist und nicht mehr Gießmann. Ich habe meinen

00:06:02.240 --> 00:06:06.200
Nachnamen geändert, aber ich habe nicht geheiratet. Ich habe eine öffentlich-rechtliche Namensänderung.

00:06:06.200 --> 00:06:10.400
Es gibt dazu einen Blogartikel, wo ich so ein bisschen was über die Gründe schreibe und wie

00:06:10.400 --> 00:06:18.400
ich das gemacht habe. Wer mehr dazu interessiert, der kann sich den Blogartikel durchlesen. Genau,

00:06:18.400 --> 00:06:24.160
der kommt in die Shownotes. Das dazu, glaube ich, muss man nicht viel mehr dazu sagen. Da ist alles

00:06:24.160 --> 00:06:30.200
drin. Cool. Schön, dass du auch was dazu geschrieben hast, dein Blog so aktiv nutzt.

00:06:30.200 --> 00:06:36.960
Naja. Also letztes Jahr, um die Zeit, da hatte ich ja gerade das Blog gelauncht, da hatte ich

00:06:36.960 --> 00:06:44.960
schon fünf oder sechs Artikel im Jahr geschrieben. Ich habe mich schon deutlich verlangsamt.

00:06:44.960 --> 00:06:50.280
Ja gut, dass der anfängliche Elan nachlässt. Ich glaube, das ist ja auch normal und nachweisbar.

00:06:50.280 --> 00:06:53.280
Warum ist das eigentlich so? Warum gibt es eigentlich nicht Elan, der andersrum ist,

00:06:53.280 --> 00:06:57.920
das langsam anfängt und dann immer schneller wird? So wie bei Viren, so exponentielles Wachstum.

00:06:57.920 --> 00:07:06.120
Das wäre doch was. Ich glaube, das war bei CSS-Tricks so. Am Anfang gab es relativ wenige

00:07:06.120 --> 00:07:12.800
Artikel, die waren aber sehr gut und sehr hochqualitativ. Und es sind immer mehr Artikel

00:07:12.800 --> 00:07:16.600
geworden, also bis es dann quasi abgekündigt wurde, sind es immer mehr geworden, zu allen

00:07:16.600 --> 00:07:20.920
möglichen Themen, wo mich das meiste nicht interessiert hat, bis dann irgendwann gekillt

00:07:20.920 --> 00:07:26.040
wurde. Aber der Output am Ende, das waren ja wirklich vier Artikel am Tag oder so, keine

00:07:26.040 --> 00:07:31.680
Ahnung. Und so viel guter Content war das nicht. Also so zu dem, wie es halt früher

00:07:31.680 --> 00:07:36.040
war, die alten guten Artikel. Jetzt ist es ein bisschen wieder so wie früher. Das begrüße

00:07:36.040 --> 00:07:39.920
ich sehr. Aber wir können zum zweiten Retro-Punkt kommen.

00:07:39.920 --> 00:07:46.760
Genau. Und zwar wollte ich mal ein bisschen berichten, wie der Status quo ist bei meiner

00:07:46.760 --> 00:07:51.400
Linux-Geschichte. Ich bin ja umgestiegen. Jetzt bin ich auch gar nicht mehr sicher,

00:07:51.400 --> 00:07:54.760
ob ich das im Podcast oder im Stream erzählt hatte. Aber auch auf die Gefahr, dass wir

00:07:54.760 --> 00:07:59.200
uns da auch nochmal wiederholen. Ich habe die Schnauze voll für Windows und habe auf

00:07:59.200 --> 00:08:04.200
Linux Mint gewechselt. Nach vielen Anläufen in den vergangenen, sage ich mal, 15 Jahren

00:08:04.200 --> 00:08:07.720
immer mal wieder zu versuchen auf Linux umzusteigen. Und dann hat dies nicht funktioniert und das

00:08:07.720 --> 00:08:13.360
nicht funktioniert, habe ich es jetzt tatsächlich geschafft. Und ich bin, das war jetzt ja so

00:08:13.360 --> 00:08:16.880
kurz vor Weihnachten, als ich das angefangen habe, und ich bin inzwischen wirklich, wenn

00:08:16.880 --> 00:08:22.880
ich privat, rein privat am PC bin, komplett auf Linux. Und ich habe meinen Laptop auch

00:08:22.880 --> 00:08:26.040
einfach, da habe ich sogar nicht parallel zu Windows installiert, sondern da habe ich

00:08:26.040 --> 00:08:31.480
die Windows-Partition direkt platt machen lassen vom Installern. Habe dann Linux Mint

00:08:31.480 --> 00:08:37.680
drauf installiert. Habe auch das Gefühl, aus der alten Hardware holt das noch deutlich

00:08:37.680 --> 00:08:41.320
mehr raus, als Windows das macht, weil Windows halt einfach schon allein den Rahmen irgendwie

00:08:41.320 --> 00:08:47.880
zukleistert mit tausend Prozessen. Und das Einzige ist halt wirklich, wenn ich was Geschäftliches

00:08:47.880 --> 00:08:51.720
mache, dann ist immer noch diese Geschichte mit dem Zeit-Tracking-Tool, mit dem eigenen,

00:08:51.720 --> 00:08:55.800
dass ich versucht habe, dann unter Linux zu kompilieren, dann festgestellt habe, okay,

00:08:55.800 --> 00:08:58.840
der Build-Prozess, der kompiliert aber unter Linux nicht, weil da ist irgendwie ein Bug

00:08:58.840 --> 00:09:02.760
in der alten Version und dann, wie es dann immer so ist, das aktualisiert, ach, das ist

00:09:02.760 --> 00:09:06.160
mit dem nicht mehr kompatibel und das hat so einen Rattenschwanz hinterhergezogen, dass

00:09:06.160 --> 00:09:10.280
ich im Endeffekt jetzt dieses Tool gerade neu aufbaue mit einem aktuellen Stand, wie

00:09:10.280 --> 00:09:14.840
man das eben macht, mit Vite statt damals noch Webpack und so weiter. Aber es ist halt

00:09:14.840 --> 00:09:21.040
sehr viel Anpassungsaufwand, weil das dann dieses Vite-Electron-Template, das hat halt

00:09:21.040 --> 00:09:26.120
einen bestimmten Aufbau, der ist wieder anders, als es ursprünglich war und da bin ich am

00:09:26.120 --> 00:09:30.240
rumziehen und so. Und das kostet einfach unheimlich viel Zeit, die ich jetzt aber aktuell nicht

00:09:30.240 --> 00:09:36.200
hatte. Und dann habe ich eben für das Geschäftliche halt doch wieder Windows genutzt oder teilweise

00:09:36.200 --> 00:09:39.720
halt dann die Zeiten nachgetragen, wenn ich gerade in Linux war und was gearbeitet habe.

00:09:39.720 --> 00:09:43.720
Aber es ist also für die privaten Sachen, das, was ich mache, da habe ich inzwischen

00:09:43.720 --> 00:09:45.480
echt alles und ich bin sehr zufrieden damit.

00:09:45.480 --> 00:09:49.440
Bis auf Podcast-Aufnahmen und Webcam.

00:09:49.440 --> 00:09:53.880
Ja, genau. Ja, jetzt haben wir gerade, gerade wollte ich zum ersten Mal mit Reaper und Ultraschall

00:09:53.880 --> 00:09:58.400
unter Linux aufnehmen, diese Folge, und dann ist es an der Webcam gescheitert.

00:09:58.400 --> 00:10:01.320
Jetzt müsste man denken, naja, es ist ja Podcast, wozu Webcam, aber wir haben die immer

00:10:01.320 --> 00:10:05.560
laufen, damit wir uns einfach sehen, weil das irgendwie doch ein persönlicheres Gespräch

00:10:05.560 --> 00:10:09.440
ist, als wenn wir einfach, und wir uns auch nicht so ins Wort fallen, weil man halt doch

00:10:09.440 --> 00:10:10.440
sich sieht.

00:10:10.440 --> 00:10:13.020
Man sieht, der andere nickt, der andere zeigt gerade mit der Hand, ich möchte auch noch

00:10:13.020 --> 00:10:14.020
was dazu sagen und so.

00:10:14.020 --> 00:10:17.800
Das ist auch angenehmer, glaube ich, beim Zuhören dann, dass man sich nicht so ständig

00:10:17.800 --> 00:10:18.800
unterbricht.

00:10:18.800 --> 00:10:20.600
Ihr merkt das nicht, aber wir merken das deutlich.

00:10:20.600 --> 00:10:23.840
Wir haben nämlich bei Corona, als wir die erste Remote-Folge aufgezeichnet haben, haben

00:10:23.840 --> 00:10:28.160
wir es ohne Bild gemacht und das war, wir haben dann relativ schnell gemerkt, nee, wir

00:10:28.160 --> 00:10:30.120
müssen da was ändern, das funktioniert so nicht.

00:10:30.120 --> 00:10:33.520
Ich glaube, wir haben, glaube ich, sogar nur eine Folge so gemacht und dann haben wir festgestellt,

00:10:33.520 --> 00:10:37.120
nee, wir brauchen die Webcam und das ist einfach, das fühlt sich anders an.

00:10:37.120 --> 00:10:38.120
Ja.

00:10:38.120 --> 00:10:39.120
Absolut, genau.

00:10:39.120 --> 00:10:42.440
Was dein Linux angeht, ich habe jetzt gerade noch mal nachgeguckt, weil ich mir nicht sicher

00:10:42.440 --> 00:10:47.160
war, ob meine Erinnerung mich betrogen hat, dafür brauche ich auch keine so lange Erinnerung,

00:10:47.160 --> 00:10:51.720
da ist gerade gestern eine neue Major-Version rausgekommen für deinen Linux Mint.

00:10:51.720 --> 00:10:52.720
Kann das sein?

00:10:52.720 --> 00:10:53.720
Das kann sein, ja.

00:10:53.720 --> 00:10:56.960
Das ist jetzt nicht ganz so verfolgt, ich wusste, da ist einer in den Startlöchern,

00:10:56.960 --> 00:11:01.360
aber ich habe jetzt, ich habe noch die alte drauf, also die letzte LTS ist, glaube ich,

00:11:01.360 --> 00:11:02.360
auch.

00:11:02.360 --> 00:11:11.520
Also du hast Linux Mint 22 Wilma und jetzt ist rausgekommen, warte, Moment, 22.1, ah,

00:11:11.520 --> 00:11:13.920
haben die so einen, Moment mal, wie funktioniert das?

00:11:13.920 --> 00:11:18.560
Die haben, glaube ich, so Codenamen, aber halt auch diese 22.02, 22 Punkt irgendwas.

00:11:18.560 --> 00:11:25.600
Das ist jetzt Punkt eins, aber das hat einen extra eigenen Namen, die, die, okay, die meiner

00:11:25.600 --> 00:11:31.660
Versions kriegen offenbar so eigene Releases irgendwie, weil die letzte Major Version,

00:11:31.660 --> 00:11:34.520
also die 22.0 ist vom 25.

00:11:34.520 --> 00:11:41.320
Juli 2024, also ich kann mich erinnern, bei Ubuntu war es so, dass es, glaube ich, halbjährige,

00:11:41.320 --> 00:11:48.280
halbjährliche Releases gab und die wurden dann auch nach dem Monat benannt, in dem sie

00:11:48.280 --> 00:11:49.280
releast wurden.

00:11:49.280 --> 00:11:53.040
Da gab es immer die .04 und die .10, glaube ich.

00:11:53.040 --> 00:11:54.040
Okay.

00:11:54.040 --> 00:11:56.840
Weiß ich jetzt nicht, wie das bei Linux Mint genau ist, aber ich glaube, es ist auch so

00:11:56.840 --> 00:12:01.120
ungefähr ein halbjährlicher Release, weil sich das ja an Ubuntu auch orientiert.

00:12:01.120 --> 00:12:06.720
Aber es ist jetzt nur in meiner, in meiner Versions Change zumindest, aber es hat trotzdem

00:12:06.720 --> 00:12:10.760
einen neuen Namen gekriegt, heißt nämlich jetzt Xia, ich weiß nicht, ob ich es richtig

00:12:10.760 --> 00:12:16.920
ausspreche, aber die machen es, glaube ich, ähnlich wie, wie auch Ubuntu, dass sie das

00:12:16.920 --> 00:12:20.040
Alphabet von vorne nach hinten durchgehen und dann nach einem bestimmten, ich glaube

00:12:20.040 --> 00:12:24.760
bei Ubuntu sind es Tiere und die versuchen halt immer ein Tier zu finden mit den jeweiligen

00:12:24.760 --> 00:12:25.760
Nächsten.

00:12:25.760 --> 00:12:28.080
Ja, wie Android das halt auch gemacht hat, mit Candy und so, ja.

00:12:28.080 --> 00:12:32.920
Aber das ist auch vorbei, bei Android gibt es keine, so Versionsnamen mehr, ne?

00:12:32.920 --> 00:12:35.800
Ja, schade, eigentlich war ich… Irgendwann ausgegangen.

00:12:35.800 --> 00:12:41.240
Ja und jetzt nochmal so die Frage, ist da jetzt alles irgendwie, du bist, du bist damit

00:12:41.240 --> 00:12:42.240
zufrieden?

00:12:42.240 --> 00:12:45.800
Ich bin damit super zufrieden, ja, also jetzt die Geschichte mit der Webcam, wobei ich da

00:12:45.800 --> 00:12:49.040
anfänglich jetzt, als ich ein Windows gebootet hab, auch wieder Probleme hatte und die dann

00:12:49.040 --> 00:12:53.560
nochmal vom USB getrennt hab und nochmal eingesteckt hab und dann ging's erst, vielleicht funktioniert's

00:12:53.560 --> 00:12:56.280
auch nach dem nächsten Boot unter Linux, ich weiß es nicht.

00:12:56.280 --> 00:13:00.160
Ansonsten, wenn jemand Tipps hat, Elgato Facecam unter Linux zum Laufen zu bekommen, gerne

00:13:00.160 --> 00:13:01.160
her damit.

00:13:01.160 --> 00:13:08.120
Aber ansonsten bin ich, ja, super zufrieden, es ist schnell, es sieht schick aus, ich vermiss

00:13:08.120 --> 00:13:09.640
aktuell nichts.

00:13:09.640 --> 00:13:16.040
Also ich hab, gut, klar, die Adobe Creative Suite, da bin ich halt dran gewöhnt, aber

00:13:16.040 --> 00:13:23.680
es gibt genug gescheite Open-Source-Software inzwischen, es gibt Audacity für Audiobearbeitung,

00:13:23.680 --> 00:13:28.800
wenn man jetzt nicht irgendwie krasse Multitrack-Geschichten und was weiß ich was braucht, wobei das glaube

00:13:28.800 --> 00:13:29.800
ich mittlerweile auch kann.

00:13:29.800 --> 00:13:35.080
Ja, also, ich bereue die Entscheidung bisher nicht und nachdem ich grad eben erst beim

00:13:35.080 --> 00:13:39.320
Reboot dann Windows mit diesem blauen Bildschirm begrüßt hat und irgendwelche Aufräumaktionen

00:13:39.320 --> 00:13:45.760
und Updates und so, da habe ich wieder keine Lust mehr, da weiß ich, warum ich dann gewechselt

00:13:45.760 --> 00:13:46.760
bin.

00:13:46.760 --> 00:13:52.480
Ich bin sehr gespannt, wie du das weiter verfolgst, aber die Tatsache, dass du jetzt schon so

00:13:52.480 --> 00:13:57.800
lange dran bleibst und selbst jetzt immer noch sagst, ist sehr vielversprechend, ja.

00:13:57.800 --> 00:14:01.080
Und auch, dass ich den Laptop wirklich platt gemacht habe und nicht dual installiert habe,

00:14:01.080 --> 00:14:02.080
also das ist schon mein Ziel.

00:14:02.080 --> 00:14:06.840
Und wie, da würde mich jetzt noch interessieren, weil ich ja auch mal so eine, wie soll ich

00:14:06.840 --> 00:14:10.640
sagen, so eine Linux-Zeit hatte und da auch so reingewachsen bin.

00:14:10.640 --> 00:14:17.720
Du hast immer gesagt früher, dass du eher so ein GUI-Mensch bist und in Linux ist es,

00:14:17.720 --> 00:14:20.480
kommt es ja öfter mal vor, dass man was mit der Command-Line machen muss.

00:14:20.480 --> 00:14:25.480
Aber ich hatte, muss davor vorab noch sagen, ich hatte nie den Eindruck eigentlich, dass

00:14:25.480 --> 00:14:30.600
du davor zurückschreckst, sondern das, wenn du die Wahl hast, weil du ja auch NPM install

00:14:30.600 --> 00:14:31.600
und keine Ahnung, das hast du ja alles.

00:14:31.600 --> 00:14:34.280
Wobei ich da ja auch in den letzten Jahren dann erst reingewachsen bin.

00:14:34.280 --> 00:14:36.480
Bist ja letzten Endes aber nicht viel anders, ne?

00:14:36.480 --> 00:14:37.480
Ne, klar.

00:14:37.480 --> 00:14:41.760
Man muss, das ist halt gewöhnungsbedürftig, dass man plötzlich für solche Dinge wie

00:14:41.760 --> 00:14:45.240
ich will was updaten oder sowas, dann die Kommandline braucht, ne?

00:14:45.240 --> 00:14:47.240
Muss man das unter Linux Mint?

00:14:47.240 --> 00:14:48.240
Ne, muss man nicht mehr.

00:14:48.240 --> 00:14:53.120
Also ich wollt grad sagen, bei Linux Mint ist so viel per GUI, also auch Systemeinstellungen,

00:14:53.120 --> 00:14:58.880
Paketmanager Update, Treiber Update, das hat alles ne GUI und da muss man eigentlich nicht

00:14:58.880 --> 00:14:59.880
viel machen.

00:14:59.880 --> 00:15:03.640
Die Sachen, die halt bei mir da mit der Grafikkarte problematisch waren und so, klar, da musste

00:15:03.640 --> 00:15:09.360
ich halt ein bisschen in der Kommandleitung rumhacken, aber es ist schon, also Linux Mint

00:15:09.360 --> 00:15:14.120
würde ich sagen, ist ein sehr gut geeignetes Umsteigersystem, wenn man von Windows kommt,

00:15:14.120 --> 00:15:21.880
bis hin zu Windows E öffnet den File Manager und hier Windows Pfeiltasten, damit kann ich

00:15:21.880 --> 00:15:25.040
Fenster verschieben und so, das funktioniert alles, ohne dass ich mich da irgendwie groß

00:15:25.040 --> 00:15:29.840
umgewöhnen muss und das find ich richtig cool und hat's mir sehr einfach gemacht.

00:15:29.840 --> 00:15:33.560
Die Frage aller Fragen, hast du wobbly Windows?

00:15:33.560 --> 00:15:34.560
Noch nicht, noch nicht.

00:15:34.560 --> 00:15:38.200
War jetzt nicht unbedingt die höchste Priorität, auch wenn du das nicht verstehen kannst.

00:15:38.200 --> 00:15:41.840
Das verstehe ich nicht, das muss das erste sein, was man installiert, wenn wobbly Windows

00:15:41.840 --> 00:15:45.680
nicht funktionieren, muss man sich eine andere Distribution suchen oder einen anderen.

00:15:45.680 --> 00:15:50.400
Oh Gott, das will ich konfigurieren, dein System nicht kaputt für wobbly Windows.

00:15:50.400 --> 00:15:52.920
Ja, es gibt ja Backups.

00:15:52.920 --> 00:15:58.600
Wer nicht weiß, was wobbly Windows sind, also als ich mit Ubuntu angefangen habe und

00:15:58.600 --> 00:16:05.600
das war irgendwann 2008 oder so, 2007, 2008, da war das damals der heiße Scheiß, dass

00:16:05.600 --> 00:16:09.880
man sich so Desktop-Effekte installieren konnte, ich weiß nicht, ob es das auch für andere

00:16:09.880 --> 00:16:13.880
Desktops gab, in dem Fall war das für GNOME oder GNOME, keine Ahnung, wie man es richtig

00:16:13.880 --> 00:16:14.880
ausspricht.

00:16:14.880 --> 00:16:23.720
Und da gab es eben unter anderem, dass die Fenster quasi wie so eine Art, die, die, also

00:16:23.720 --> 00:16:28.440
sie sind wackelig, wobbly, ja, aber man zieht sie so hinterher, es ist wie so, als würden

00:16:28.440 --> 00:16:33.700
man sie, würde man physisch ein Stück Stoff durch die Luft hinterherziehen und so wobbeln

00:16:33.700 --> 00:16:38.080
die dann so ein bisschen rum, aber man kann sie, es gibt da auch ganz verrückte Effekte,

00:16:38.080 --> 00:16:44.160
dass man, wenn das Fenster schließt, dass es abbrennt oder irgendwie so, wenn man zwischen

00:16:44.160 --> 00:16:48.520
den, zwischen den einzelnen Desktops wechselt, dass das dann so ein 3D-Effekt ist und dass

00:16:48.520 --> 00:16:52.240
die ganzen einzelnen Desktops auf so einem Würfel drauf sind, der gespiegelt ist und

00:16:52.240 --> 00:16:56.480
hinten dran ist das Weltall und keine Ahnung, alle möglichen verrückten Effekte und das

00:16:56.480 --> 00:17:01.840
gab es damals schon, es hat damals schon recht gut funktioniert und ich muss sagen, wobbly

00:17:01.840 --> 00:17:07.160
Windows, wenn ich das haben könnte auf dem Mac, ohne dass mir das System kaputt macht,

00:17:07.160 --> 00:17:10.500
das wäre das Einzige, wo ich aus dieser Zeit sagen würde, das würde ich mir vielleicht

00:17:10.500 --> 00:17:15.200
echt nochmal installieren, weil es war einfach irgendwie cool. Also gerade, wenn man so ein,

00:17:15.200 --> 00:17:19.180
der Klassiker, man hat ein Fenster, das ist klein und man klickt doppelt auf die Leiste

00:17:19.180 --> 00:17:23.640
oben, damit es groß wird und dann schwabbelt es so groß und wackelt noch so ein bisschen,

00:17:23.640 --> 00:17:27.800
wenn das schnell, wenn der Effekt schnell ist, dann ist es irgendwie einfach cool. Also

00:17:27.800 --> 00:17:32.320
wobbly windows. Falls ihr euch das jetzt immer noch nicht vorstellen könnt, wir sind ja

00:17:32.320 --> 00:17:39.360
ein Audio-Podcast, dann gebt es mal bei YouTube ein, ihr werdet dann irgendwie eine Demo finden,

00:17:39.360 --> 00:17:46.840
wo ihr seht, wovon ich spreche. Genau. So, Linux fertig? Ja, Linux fertig. So, es hat

00:17:46.840 --> 00:17:52.120
sich ein bisschen was angesammelt. Wir haben ja schon länger keinen Podcast gemacht. Das

00:17:52.120 --> 00:17:55.240
andere, das ist jetzt schon ein bisschen älter, das nächste Thema, aber ich wollte es trotzdem

00:17:55.240 --> 00:18:01.560
noch mal erwähnen. Ich habe ja mal irgendwann, warte, ich muss gerade überlegen, das war

00:18:01.560 --> 00:18:07.440
bei der JSConf 2018, glaube ich, habe ich damit angefangen. Damals kam ich von der JSConf

00:18:07.440 --> 00:18:10.640
ganz beschwingt zurück, beziehungsweise es war eigentlich dort schon, ich hatte einen

00:18:10.640 --> 00:18:15.240
Vortrag gesehen zur Web Audio API und habe dann gesagt, ich will jetzt irgendwas mit

00:18:15.240 --> 00:18:21.320
der Web Audio API bauen, egal wie simpel es ist. Und der erste Gedanke, den ich dann

00:18:21.320 --> 00:18:28.080
hatte war, ich möchte einen Morse-Code-Generator damit schreiben, weil letzten Endes, das ist

00:18:28.080 --> 00:18:33.560
wirklich die simpelste, quasi die simpelste Implementierung, man macht einfach einen Sinuston

00:18:33.560 --> 00:18:38.040
und der muss halt in bestimmten Zeitabständen irgendwie kommen. Also am Ende war es dann

00:18:38.040 --> 00:18:41.580
doch gar nicht so simpel, wie ich es mir vorgestellt habe, aber letzten Endes, was das Web Audio

00:18:41.580 --> 00:18:47.020
angeht, ein Sinuston abspielen ist quasi die simpelste Anwendung, da musst du quasi fast

00:18:47.020 --> 00:18:52.260
nichts davon verstehen. Und ihr wisst es ja vielleicht auch, ich steige nicht unbedingt

00:18:52.260 --> 00:18:56.740
immer extrem tief in so ein Thema ein, ich versuche immer die simpelste Demo zu bauen,

00:18:56.740 --> 00:19:01.060
so auch hier. Und ich habe das Ding aber dann immer noch ein bisschen weiterentwickelt,

00:19:01.060 --> 00:19:04.620
ein bisschen anderes Design bekommen, jetzt finde ich, ist es recht rund, das Design ist

00:19:04.620 --> 00:19:08.660
zu finden auf meiner Website, Link kommt auch in die Shownotes, also moritzglanz.de slash

00:19:08.660 --> 00:19:12.940
morsecode, allerdings Code mit K, keine Ahnung, da hat es mich irgendwie geritten, das muss

00:19:12.940 --> 00:19:19.740
jetzt so heißen und dann hieß es so. Und ich hatte die ganze Zeit, fand ich es irgendwie

00:19:19.740 --> 00:19:25.980
witzig, dass ich quasi aus Morsezeichen das Logo gebaut hatte. Also das Logo davon ist

00:19:25.980 --> 00:19:32.740
ein Gesicht, aber mit einem Punkt, Strich, Punkt. Ich hatte das aber ursprünglich tatsächlich

00:19:32.740 --> 00:19:38.740
auch mit den Unicode-Zeichen gebaut, aber das Gesicht sah so ein bisschen genervt aus,

00:19:38.740 --> 00:19:42.660
weil es war halt nicht, das Gesicht war tatsächlich ursprünglich Strich, Punkt, Strich und zwei

00:19:42.660 --> 00:19:48.780
Augen als Strich. Ist dann halt schon so ein bisschen genervter Gesichtsausdruck und dachte

00:19:48.780 --> 00:19:53.620
mir, nee, das muss jetzt irgendwie neu. Und bei der Gelegenheit dachte ich mir, okay, bisschen

00:19:53.620 --> 00:19:57.260
freundlicheres Logo. Jetzt ist es Punkt, Strich, Punkt, aber ich habe es jetzt als SVG gemacht,

00:19:57.260 --> 00:20:04.460
aber ich habe jetzt auch noch weitere Options eingebaut. Man kann jetzt nämlich nicht nur

00:20:04.460 --> 00:20:09.940
die Lautstärke verändern, sondern die Frequenz auch in einem gewissen Bereich und man kann die

00:20:09.940 --> 00:20:16.740
Waveform, also Sinuswelle, Square-Triangle und Sword-Hoof kann man auch auswählen. Vibration

00:20:16.740 --> 00:20:22.060
gab es vorher schon. Also wenn ich während des Abspiels die Frequenz ändere, dann habe ich das

00:20:22.060 --> 00:20:27.020
sofort. Ja, dann kann man quasi auch Musik mitmachen, wenn man möchte. Stimmt. Die Volume,

00:20:27.020 --> 00:20:31.500
das habe ich noch nicht gemacht, dass man das auch live laut und leise drehen kann,

00:20:31.500 --> 00:20:37.020
aber tatsächlich da was einzugeben in längerem Text, egal irgendein Quatsch und dann zwischendurch

00:20:37.020 --> 00:20:41.100
die Waveform und die Frequency zu ändern, da kann man voll Musik mitmachen. Das ist ja voll cool.

00:20:41.100 --> 00:20:44.980
Also das geht sogar, also nicht nur vor dem nächsten Ton ändert sich das dann,

00:20:44.980 --> 00:20:48.300
sondern wenn ein langer Ton ist und ich ziehe das, dann macht es irgendwie so blblbl. Es ist

00:20:48.300 --> 00:20:54.860
absolut live. Das ist ja cool. Da habe ich dann auch eine Power of Chat GPT, implementiere mir

00:20:54.860 --> 00:20:58.900
das mal. Ah, so geht das. Das war mir ja tatsächlich so und da dachte ich mir,

00:20:58.900 --> 00:21:03.020
ah, das kann ich super leicht implementieren. Und dann habe ich nicht nur das Logo getauscht,

00:21:03.020 --> 00:21:07.020
sondern auch noch mir überlegt, was für Features könnten da sinnvoll sein und das

00:21:07.020 --> 00:21:13.540
dann da noch mit reingebastelt. Ich habe damals ja so eine Vision gehabt, dass das Design irgendwie

00:21:13.540 --> 00:21:17.860
so ein bisschen aussehen soll, wie die New Yorker U-Bahn. Mittlerweile sieht es jetzt ein bisschen

00:21:17.860 --> 00:21:21.740
anders aus. Ich habe das nie so richtig hingekriegt, wie ich es wollte und jetzt bin ich eigentlich auch

00:21:21.740 --> 00:21:25.620
mit dem Design irgendwie zufrieden. Das finde ich irgendwie ein nettes, kleines Mini-Tool,

00:21:25.620 --> 00:21:30.900
ganz ohne Werbung und irgendwie, sondern einfach, wer mal ein Morse-Code irgendwie

00:21:30.900 --> 00:21:34.980
audiomäßig bauen will, kann das machen. Und das Geile ist, in Browsern, die es unterstützen,

00:21:34.980 --> 00:21:41.540
es sind nicht so viele. Es sind, glaube ich, nur Android und da wahrscheinlich, weiß ich gar nicht,

00:21:41.540 --> 00:21:47.540
ob es da Chrome macht, kann man auch Vibrationen, Morse-Vibrationen kriegen. Das kann man in den

00:21:47.540 --> 00:21:52.380
Optionen auch einschalten. Das ist allerdings nur, wenn es auf dem Device supported ist. Aber

00:21:52.380 --> 00:21:56.500
ich dachte mir halt, naja, ich habe jetzt hier irgendwie schon die Längen, die abgespielt

00:21:56.500 --> 00:22:00.980
werden. Das jetzt noch in Vibrationen zu übersetzen, ist halt echt ein leichtes,

00:22:00.980 --> 00:22:08.700
weil die Information ist schon da. Ich setze dieses Bau, dieses Ding zusammen. Das sagt ja

00:22:08.700 --> 00:22:12.020
jetzt so lange das, dann so lange Pause und so lange das, was ich damit am Ende mache,

00:22:12.020 --> 00:22:18.100
ob ich da jetzt irgendeinen Ton abspiele oder die Vibration anschalte. Und Vibration ist einfach cool.

00:22:18.100 --> 00:22:24.220
Also das empfehle ich einfach mal auszuprobieren. Genau, das habe ich irgendwie so zwischen den

00:22:24.220 --> 00:22:27.420
Jahren irgendwie gemacht und das wollte ich einfach mal darauf hinweisen. Ich weiß,

00:22:27.420 --> 00:22:33.580
da fast niemand geht auf dieses Tool, weil nach Morse-Code.mit-K sucht halt auch keine Sau. Ist

00:22:33.580 --> 00:22:39.260
auch okay, aber geht doch mal da drauf und spielt mal ein bisschen mit rum. Vor allem mit diesem

00:22:39.260 --> 00:22:42.820
Frequency, das habe ich dann auch. Ich habe sofort gemerkt, ich habe mit rum gespielt und

00:22:42.820 --> 00:22:47.180
dann so hin und her. Da kann man immer coole Sachen machen. Ich spiele die ganze Zeit mit der

00:22:47.180 --> 00:22:53.420
Frequenz. Also ich habe dann auch mich so ein bisschen musikalisch irgendwie wiedergefunden,

00:22:53.420 --> 00:22:56.660
bei so ein bisschen elektronischeren Sounds, wenn man dann irgendwie Sawtooth anmacht,

00:22:56.660 --> 00:23:04.180
statt Sinoswelle, dann klingt das auch plötzlich wie so ein kleiner Synthesizer und dann kann man

00:23:04.180 --> 00:23:07.900
mit der Tonhöhe noch rumspielen. Und der Rhythmus kommt ja quasi von den Buchstaben. Ist irgendwie

00:23:07.900 --> 00:23:13.180
schon eine kreative kleine Geschichte. Also jetzt müssen wir schnell zum nächsten Thema,

00:23:13.180 --> 00:23:23.380
sonst schreibt die Sarah noch einen Welthit mit meinem Morse-Code-Generator. Genau, nächstes

00:23:23.380 --> 00:23:31.300
kurzes Thema. Bei Working Draft gab es jetzt gerade eine Folge zum Barrierefreiheitsstärkungsgesetz,

00:23:31.300 --> 00:23:37.700
die sei an der Stelle empfohlen und ich bin auch darauf gestoßen, weil wir da erwähnt wurden und

00:23:37.700 --> 00:23:41.940
unsere Folge mit der Daniela Kubisch, unsere letzte Folge, das war nett, weil die haben auch

00:23:41.940 --> 00:23:47.500
über Accessibility-Overlays gesprochen und da sind wir auch vorgekommen sozusagen mit der Folge,

00:23:47.500 --> 00:23:53.180
mit der Daniela. Vielen Dank nochmal fürs Verlinken. Ich kann die Folge auch sehr empfehlen,

00:23:53.180 --> 00:24:00.260
also der Chef spricht da mit der Sonja Weckenmann. Also ich muss sagen, ich habe mir unter einer

00:24:00.260 --> 00:24:04.780
Folge zum Barrierefreiheitsstärkungsgesetz was völlig anderes vorgestellt und ich fand es

00:24:04.780 --> 00:24:13.700
trotzdem super, weil es wurden Aspekte, es ist trockener Stoff, es wurden ganz viele trockene

00:24:13.700 --> 00:24:18.580
Aspekte beleuchtet, mit denen ich mich noch nie beschäftigt hatte. Somit, ja, welche Verordnung

00:24:18.580 --> 00:24:22.540
ist, greift denn da in was und seit wann ist das gültig und das sind eigentlich schon sehr

00:24:22.540 --> 00:24:28.500
interessante Informationen. Ich muss von meiner Seite sagen, ich versuche Barrierefreiheit immer,

00:24:28.500 --> 00:24:35.660
ich will jetzt nicht sagen, dass andere das nicht machen, vorab Disclaimer wichtig, ich versuche es

00:24:35.660 --> 00:24:41.260
immer von der Benutzung her zu denken. Also ich lese natürlich auch die Standards und versuche

00:24:41.260 --> 00:24:45.860
mich daran zu halten, beziehungsweise die sind natürlich extrem nützlich in der Umsetzung und

00:24:45.860 --> 00:24:51.020
auch was für Regeln es gibt, aber ich bin da mehr so, ich versuche die Experience irgendwie,

00:24:51.020 --> 00:24:57.820
soweit ich das eben verstehe und machen kann, gut zu machen. Und trotzdem sind diese ganzen

00:24:57.820 --> 00:25:03.940
rechtlichen Dinge, die da noch mit rein spielen. Ich meine klar, es ging um das Gesetz, aber welche

00:25:03.940 --> 00:25:09.580
Verordnung gilt denn jetzt wie und dann gibt es noch diese en-irgendwas-Verordnung, das ist aber

00:25:09.580 --> 00:25:15.820
nicht das Gesetz. Und wie spielt die WCAG damit rein, fand ich echt eine spannende Folge, würde

00:25:15.820 --> 00:25:21.940
ich an der Stelle ans Herz legen. Genau, kann man gut mal reinhören und die Sonja Weckenmann,

00:25:21.940 --> 00:25:25.940
die ist eh super, also die haben wir ja auch schon bei der Biontelerant getroffen. Die schreibt auch

00:25:25.940 --> 00:25:35.540
ganz fantastische Artikel für Tollwerk, also sei an der Stelle sehr empfohlen. Dann haben wir noch

00:25:35.540 --> 00:25:39.460
ein Thema, da habe ich mal uns beide dran geschrieben, ein Retro-Thema, aber ich reiße

00:25:39.460 --> 00:25:43.220
es vielleicht jetzt, da ich jetzt gerade schon im Flash drin bin, reiße ich es noch mal kurz an.

00:25:43.220 --> 00:25:54.140
Wir haben es auf dem Mastodon schon angekündigt. Wir haben nach dem letzten Twitch-Stream letztes

00:25:54.140 --> 00:25:59.460
Jahr noch mal darüber gesprochen, über Podcast versus Twitch und was macht uns Spaß und was ist

00:25:59.460 --> 00:26:05.860
wichtig und was kostet wie viel Zeit und wo haben wir das Gefühl kommt, also wir haben gemerkt,

00:26:05.860 --> 00:26:12.180
es ist zu viel gleichzeitig. Und wir haben vor allem den Podcast sträflich vernachlässigt,

00:26:12.180 --> 00:26:15.900
das muss man schon auch mal so sagen. Wir haben den Podcast sehr vernachlässigt und deswegen haben

00:26:15.900 --> 00:26:22.420
wir jetzt gesagt, der Twitch-Stream, der ist jetzt nicht gekillt auf alle Zeit, aber wir lassen den

00:26:22.420 --> 00:26:27.460
jetzt erst mal ruhen. Wir werden jetzt erst mal nicht mehr bei Twitch streamen und dafür aber

00:26:27.460 --> 00:26:31.980
versuchen jetzt wieder regelmäßig, also so wie früher, alle zwei Wochen eine Podcast-Folge

00:26:31.980 --> 00:26:37.460
rauszuhauen. Wir werden nach wie vor uns nicht nehmen lassen, auch mal eine Woche ausfallen zu

00:26:37.460 --> 00:26:44.420
lassen oder so. Wir sind da nicht so streng wie, ich muss da gerade an die Subscribe denken. Hallo

00:26:44.420 --> 00:26:50.140
Nikolas Wöhrl, falls du das hörst. Nikolas Wöhrl hat auf der Subscribe gesagt, wenn ihr einen

00:26:50.140 --> 00:26:54.460
Podcast machen wollt, dann macht es und lasst euch auf keinen Fall erklären, lasst euch auf

00:26:54.460 --> 00:26:59.460
keinen Fall sagen, man muss Podcast genauso machen, aber man muss regelmäßig veröffentlichen und darf

00:26:59.460 --> 00:27:03.340
auf keinen Fall was auslassen, womit er sich natürlich im selben Satz sozusagen widersprochen

00:27:03.340 --> 00:27:08.620
hat. Nein, ich weiß, wie er es gemeint hat. Er hat gesagt, für ihn ist das so, wenn er was,

00:27:08.620 --> 00:27:12.220
wenn er irgendwie was konsumiert, dann braucht er da regelmäßig neuen Content, er möchte da nicht

00:27:12.220 --> 00:27:17.460
irgendwelche Pausen zwischendrin haben. Das wird bei uns jetzt dadurch wahrscheinlich nicht weggehen,

00:27:17.460 --> 00:27:20.460
es wird auch immer mal wieder so eine Pause geben, aber das ist jetzt auf jeden Fall,

00:27:20.460 --> 00:27:24.740
der Stream wird es jetzt erst mal nicht mehr auffressen. Genau. Wir sind jetzt erst mal

00:27:24.740 --> 00:27:30.660
wieder hier im Podcast zu Hause und ich würde mich sehr freuen, wir haben im Stream ja immer

00:27:30.660 --> 00:27:36.460
sehr viel Feedback bekommen, so richtig Live-Feedback durch den Live-Chat da. Und wenn wir

00:27:36.460 --> 00:27:41.380
es irgendwie schaffen würden, das ein bisschen zum Podcast zu migrieren, gerne in die Kommentare

00:27:41.380 --> 00:27:45.420
mal, gerne öfter mal Kommentare schreiben, da würden wir uns sehr drüber freuen. Auch wenn

00:27:45.420 --> 00:27:51.460
ihr Fragen habt, das wird auch mal Covid-19, das sind das Besprechte, das habe ich nicht ganz

00:27:51.460 --> 00:27:56.100
verstanden oder so. Und auch wenn wir es nicht beantworten können, vielleicht finden wir Gästinnen,

00:27:56.100 --> 00:28:00.540
die das können. Ja, also einfach, weil das war natürlich, also das klingt jetzt so, als hätte

00:28:00.540 --> 00:28:05.140
uns der Stream nichts gebracht, das wollen wir jetzt natürlich nicht sagen. Also das war im

00:28:05.140 --> 00:28:09.940
Gegenteil, es war sehr schön, eben diese Interaktion zu haben, was halt was ganz anderes ist als beim

00:28:09.940 --> 00:28:16.980
Podcast. Aber das war halt einfach, wie gesagt, zu viel und auch viel Zeit, die natürlich bei

00:28:16.980 --> 00:28:20.820
so einem Stream, da kannst du halt nicht nach zwei Stunden schon sagen, so jetzt ist aber Schluss,

00:28:20.820 --> 00:28:25.900
lassen. Da willst du ja dann doch irgendwie den ganzen Abend mit verbringen. Aber der Vorteil war

00:28:25.900 --> 00:28:29.260
halt eben diese Interaktion und das hat sehr viel Spaß gemacht und das fehlt so ein bisschen beim

00:28:29.260 --> 00:28:35.140
Podcast dafür. Und ja, wäre schön, wenn das in Zukunft noch ein bisschen mehr Austausch gibt.

00:28:35.140 --> 00:28:41.500
Genau, ganz genau. Also der Stream, ich muss es jetzt nochmal sagen, ich glaube es kam vorhin

00:28:41.500 --> 00:28:47.460
vielleicht echt ein bisschen falsch rüber. Also ich habe das ja geliebt. Ich habe es ja wirklich

00:28:47.460 --> 00:28:53.220
geliebt, den Austausch, aber auch der Support auf vielen, vielen Ebenen, auch finanziell,

00:28:53.220 --> 00:29:01.980
der war unglaublich. Also wie die Twitch-Community uns Subs geschenkt hat und also wie die Verrückten,

00:29:01.980 --> 00:29:07.700
wirklich vielen, vielen, vielen Dank dafür nochmal. Das war unglaublicher Support. Also

00:29:07.700 --> 00:29:12.460
ich will jetzt nicht sagen, dass im Podcast der Support, doch ich muss es glaube ich sagen,

00:29:12.460 --> 00:29:20.980
der finanzielle Support im Podcast, der war immer deutlich geringer als im Stream. Das

00:29:20.980 --> 00:29:26.020
ist so. Es ist jetzt nicht so, dass wir sagen, das ist jetzt schlimm, weil wir machen das ja,

00:29:26.020 --> 00:29:31.180
weil es uns Spaß macht und wir machen ja auch keine Werbung. Trotzdem würden wir uns darüber

00:29:31.180 --> 00:29:36.580
freuen, wenn wir da ab und zu mal ein bisschen supported werden, dass auch das Format weiterleben

00:29:36.580 --> 00:29:40.620
kann. Und das macht uns natürlich auch die Arbeit ein bisschen einfacher, weil wir die

00:29:40.620 --> 00:29:45.700
Domain bezahlen können, die einfach viel zu teuer ist. Das muss doch das Showdomain sein.

00:29:45.700 --> 00:29:54.460
Macht sowas nicht. Ist jetzt kein Rieseninvest, aber so, da würden wir uns freuen, wenn wir ein

00:29:54.460 --> 00:30:00.980
bisschen was mit rübernehmen können von Twitch, das wäre schön. Spendenadressen und sowas,

00:30:00.980 --> 00:30:06.100
haben wir alles auf unserer Webseite unter www.scv.de. Aber da kommt später noch Werbung.

00:30:06.100 --> 00:30:08.820
Übrigens, die Werbung habe ich an eine andere Stelle geschoben. Du wirst es dann sehen.

00:30:08.820 --> 00:30:10.220
Ja, ich habe es schon gesehen.

00:30:10.220 --> 00:30:14.220
Gut, alles klar. Gibt es noch was zu Twitch?

00:30:14.220 --> 00:30:19.660
Nee, also schön war es und es war bestimmt kein Abschied für immer, aber danke.

00:30:19.660 --> 00:30:24.660
Genau, und wer uns unbedingt wieder auf Twitch haben will, der muss uns einfach eine unerhört

00:30:24.660 --> 00:30:29.140
große Summe spenden mit dem Betreff. Macht doch mal wieder einen Twitch-Stream. Und dann machen

00:30:29.140 --> 00:30:32.260
wir wieder einen Twitch-Stream, weil wir sind natürlich, wie alle anderen auch, kann jeder

00:30:32.260 --> 00:30:36.980
sagen, was er will, käuflich. Käuflich zu erwerben im Internet.

00:30:36.980 --> 00:30:39.860
Gut, dann hast du als nächstes eine Property dabei, ne?

00:30:39.860 --> 00:30:40.980
Jo.

00:30:40.980 --> 00:30:54.580
Du erinnerst dich sicher, dass wir mal zusammen ein JavaScript gebaut haben,

00:30:54.580 --> 00:31:04.180
dass die beliebte Funktionalität eine Text-Area wächst mit ihrem Inhalt nachrüstet. Und zwar so,

00:31:04.180 --> 00:31:09.420
wir haben es damals versucht, so möglichst abstrakt zu bauen, dass man es mit einem

00:31:09.420 --> 00:31:13.700
Data-Attribut einfach auf die Text-Area, dass man der Text-Area einfach ein Data-Attribut gibt

00:31:13.700 --> 00:31:20.500
und dann noch so ein Minimal-CSS dazu. Und dann sollte das einfach funktionieren, so.

00:31:20.500 --> 00:31:29.460
Damals haben wir festgestellt, dass es gar nicht so wenig Edge-Cases gibt in dem ganzen Ding. Also,

00:31:29.460 --> 00:31:34.540
der Klassiker war, worauf wir dann irgendwann gestoßen sind oder worauf ich dann im

00:31:34.540 --> 00:31:39.380
Produktiveinsatz gestoßen bin, dass wenn zum Beispiel so eine Text-Area eine gewisse Höhe hat,

00:31:39.380 --> 00:31:44.020
dass es dann merkwürdige Effekte gibt. Wenn man was hinzufügt, wenn man nochmal Enter drückt,

00:31:44.020 --> 00:31:47.740
dann sprang das in manchen Browsern hin und her. Das war alles irgendwie nicht so ganz

00:31:47.740 --> 00:31:51.900
ausgegoren. Ist ja aber auch was, und das haben wir damals dann schon so im Gespräch,

00:31:51.900 --> 00:31:55.500
weil erinnere ich mich, haben wir noch gesagt, aber wieso macht das eigentlich nicht der Browser

00:31:55.500 --> 00:32:01.540
für uns? Warum kann, also der Klassiker ist, du hast halt irgendwie so ein kleines Eingabefeld,

00:32:01.540 --> 00:32:05.820
Kommentarfeld im Blog, ja? Und du möchtest eigentlich jetzt standardmäßig nicht so viel

00:32:05.820 --> 00:32:11.020
Platz vorreservieren dafür, sondern naja, so drei, vier, fünf Zeilen oder sowas. Aber wenn es größer,

00:32:11.020 --> 00:32:14.220
wenn es mehr wird, möchte ich nicht unbedingt scrollen müssen, sondern es wäre cool, wenn dann

00:32:14.220 --> 00:32:18.300
kein Scrollbalken kommen würde, sondern wenn die Textarea bis zu einer gewissen Größe einfach

00:32:18.300 --> 00:32:23.580
mitwächst oder vielleicht so groß, wie der Inhalt ist. Weil dann muss ich nicht rumscrollen und kann

00:32:23.580 --> 00:32:28.380
theoretisch alles irgendwie sehen. Immerhin konnte man ja das CSS-Resize-Property benutzen,

00:32:28.380 --> 00:32:33.060
damit der User wenigstens das manuell hochziehen kann. Das war ja immerhin schon mal besser als

00:32:33.060 --> 00:32:39.740
hier scrollbar mit drei Zeilen, aber schön war es auch nicht. Genau. Und wenn es aber automatisch

00:32:39.740 --> 00:32:47.580
direkt mitwächst, ist halt cool. Deswegen haben das auch viele Seiten so implementiert. Und jetzt

00:32:47.580 --> 00:32:55.180
soll es was geben. Und ich muss dazu sagen, es ist noch nicht, es ist noch experimental. Und

00:32:55.180 --> 00:33:00.020
derzeit ist es aber schon in Chrome und Edge und allem, was da so irgendwie dazugehört,

00:33:00.020 --> 00:33:03.580
ist es tatsächlich schon richtig implementiert. Auch nicht hinter Flag, genau. Nicht hinter Flag,

00:33:03.580 --> 00:33:09.420
schon richtig drin. Firefox und Safari haben es noch nicht. Und zwar heißt die CSS-Property

00:33:09.420 --> 00:33:16.620
dazu. Field-Sizing. Und der Standardwert, also wie es jetzt ist, das heißt, das Ding verändert

00:33:16.620 --> 00:33:20.860
die Größe nicht, das Field-Sizing fixt. Und wenn man Field-Sizing-Content nimmt,

00:33:20.860 --> 00:33:29.300
dann wächst das Ding mit. Und auch wenn man möchte, das muss man dann noch selbst festlegen,

00:33:29.300 --> 00:33:37.660
also mit anderen CSS-Eigenschaften wie With zum Beispiel, auch in beide Achsen. Also nicht nur

00:33:37.660 --> 00:33:41.700
von oben nach unten, sondern wenn man möchte, auch in die Breite. Und interessanterweise,

00:33:41.700 --> 00:33:49.180
das kann man auf der MDN-Seite dann auch sehen, da sind ein paar Demos, das betrifft auch nicht

00:33:49.180 --> 00:33:54.020
nur Text-Areas, sondern auch ganz normale Input-Felder, die dann einfach in der Breite

00:33:54.020 --> 00:33:58.740
wachsen, wenn man das möchte, was auch immer. Ja, ich kann mir vorstellen, wo das sinnvoll ist. Ich

00:33:58.740 --> 00:34:05.220
kann mir aber auch vorstellen, dass das Probleme machen könnte. Aber auch Select-Boxen, die ihre

00:34:05.220 --> 00:34:13.140
Breite verändern, je nachdem, welcher Value gerade ausgewählt ist. Das ist schon eine coole Sache und

00:34:13.140 --> 00:34:18.100
das ist genau so ein Webstandard, wie ich immer sage, sowas brauchen wir viel öfter, so ganz

00:34:18.100 --> 00:34:24.380
einfach. Der Browser nimmt mir was ab, der macht vielleicht kompliziertes Verhalten, was ich irgendwie

00:34:24.380 --> 00:34:27.700
sonst da hin programmieren möchte, macht er mir ganz einfach. Das ist irgendwie so wie Loading

00:34:27.700 --> 00:34:34.900
Lazy für mich. Man muss nicht groß nachdenken. Ganz simpel kann ich einfach mit einer CSS-Eigenschaft

00:34:34.900 --> 00:34:39.700
das packe ich da drauf und zack geht es einfach. Und das ist das Schöne, dass wir jetzt an diesem

00:34:39.700 --> 00:34:46.060
Punkt sind, wo wir solche Sachen, so kosmetische Sachen einfach als Features bekommen, weil diese

00:34:46.060 --> 00:34:51.300
ganzen Layout-Geschichten und Grid und was weiß ich, das ist jetzt alles, das Layout kann man

00:34:51.300 --> 00:34:56.900
jetzt schön machen. Und dass man jetzt solche kleinen Details immer wieder bekommt in CSS,

00:34:56.900 --> 00:34:59.700
das ist echt cool. Die haben doch unseren Podcast gehört, ich weiß gar nicht, ob wir damals im

00:34:59.700 --> 00:35:02.940
Podcast darüber gesprochen haben. Es kann auch sein. Ich glaube über das Text-Area weiß ich jetzt

00:35:02.940 --> 00:35:07.860
gar nicht. Aber wir hatten es schon öfter über Sachen und irgendwie ein paar Monate später war

00:35:07.860 --> 00:35:14.060
das dann da. Also vielleicht haben wir einfach immer so den Zeitgeist einfach erwischt. Nein,

00:35:14.060 --> 00:35:18.620
natürlich werden wir gehört. Ich überhöre uns jetzt komplett und sage, die haben uns zugehört.

00:35:18.620 --> 00:35:23.460
Die alle Chrome-Entwickler hören uns auf Deutsch. Und ich habe dann einfach, vielleicht war ich

00:35:23.460 --> 00:35:30.100
da auch ein bisschen voreilig, die Demo, die wir damals gebaut hatten, einfach umgestellt auf eben

00:35:30.100 --> 00:35:36.100
Field-Sizing-Content und habe das JavaScript rausgeworfen und habe da aber auch hingeschrieben,

00:35:36.100 --> 00:35:41.260
dass es jetzt derzeit nur Chrome-only ist. Aber bei dieser Eigenschaft bin ich sehr zuversichtlich,

00:35:41.260 --> 00:35:44.620
dass das in den anderen Browsern ziemlich schnell nachgerüstet werden wird, weil ich glaube,

00:35:44.620 --> 00:35:51.660
das ist an sich nicht kompliziert zu implementieren auf Browserseite. Wahrscheinlich viel einfacher als

00:35:51.660 --> 00:35:59.420
irgendwie auf JavaScript-Seite oder so. Und es ist so nützlich. Ich finde es wahnsinnig nützlich,

00:35:59.420 --> 00:36:06.740
das hätte schon immer so sein sollen. Also, ja. Schöne kleine Sache. So was lieb ich, ja. Und

00:36:06.740 --> 00:36:10.340
genau, die Demo habe ich jetzt auch nochmal. Ich weiß nicht, ob die jetzt wirklich so extrem viel,

00:36:10.340 --> 00:36:13.180
die ich damals gebaut hatte, die ich dann umgestellt habe, ob die jetzt so viel bringt.

00:36:13.180 --> 00:36:17.500
Egal. Die ist auch mal verlinkt in den Shownotes. Könnt ihr ja mal gucken. Jetzt haben wir gerade

00:36:17.500 --> 00:36:27.660
gleichzeitig auf den Haken geklickt. Ja. Okay. Dann ist das auch durch und wir kommen schon in

00:36:27.660 --> 00:36:32.620
Anfangsstrichen zum Thema. Ich weiß gar nicht, wie viel haben wir denn schon auf der Uhr? 40

00:36:32.620 --> 00:36:39.260
Minuten. Ja. Gut, dann muss ich jetzt noch das richtige Knöpfchen finden. Tagesthema,

00:36:39.260 --> 00:36:55.660
Tagesthema. Hier ist WWSIV mit dem Tagesthema. Das Tagesthema. Ja, wir machen weiter mit unserer

00:36:55.660 --> 00:37:01.900
HTML-Serie, wie angekündigt. Und ich starte mal direkt ein mit dem Image-Tag. Genau,

00:37:01.900 --> 00:37:07.260
wir sind jetzt in diesem Abschnitt. Warte mal, ich muss mal noch mal die Elements ... Elements,

00:37:07.260 --> 00:37:12.780
HTML-Elements ... Wie hieß das bei MDN? Elements Reference. Wir sind ... Ich höre

00:37:12.780 --> 00:37:19.940
dir mal ein bisschen ... Genau, wir sind in dem Bereich Image und Multimedia. Wir haben uns jetzt

00:37:19.940 --> 00:37:25.580
mal diese drei Sachen rausgesucht. Bilder, also Image-Tag und Map und Area, weil das

00:37:25.580 --> 00:37:29.740
zusammenpasst und damit das nicht so viel auf einmal wird und wir ein bisschen mehr in die

00:37:29.740 --> 00:37:34.100
Tiefe gehen können. Und ich denke, da bekommen wir auch einiges zusammen. Ich habe nämlich auch,

00:37:34.100 --> 00:37:38.020
obwohl ich dachte, naja, gut, Area, alter Hut, dann benutzt man ja kaum noch. Ich habe was

00:37:38.020 --> 00:37:44.380
dazugelernt. Aber jetzt kommen wir erst mal zu den Image-Attributen. Und ich gehe die auch mal,

00:37:44.380 --> 00:37:49.620
ich glaube, ich gehe sie ... Was? Nee, Attribute. Ach so, du meinst die Attribute bei Image-Tag,

00:37:49.620 --> 00:37:54.860
die Attribute. Genau, also vielleicht ganz allgemein für die, die jetzt erst noch lernen

00:37:54.860 --> 00:37:58.380
und das vielleicht noch gar nicht wissen. Aber Image ist so basic. Egal, wir sagen es noch mal

00:37:58.380 --> 00:38:02.620
kurz. Image ist natürlich einfach, um ein Bild auf einer Webseite anzuzeigen. Ich weiß nicht,

00:38:02.620 --> 00:38:08.980
ob ihr es seht. Jetzt haben schon wieder ganz viele abgeschlossen. Egal, weiter geht's.

00:38:08.980 --> 00:38:15.860
Genau, ich gehe mal die alphabetisch, glaube ich, sogar durch, die Attribute. Deswegen fangen wir

00:38:15.860 --> 00:38:19.380
mit dem Alt-Attribut an. Auch wenn man natürlich erst mal vielleicht eigentlich ein Bild angeben

00:38:19.380 --> 00:38:22.380
will. Aber wir machen es alphabetisch. Das Alt-Attribut. Da hatten wir es auch schon

00:38:22.380 --> 00:38:28.380
ganz oft drüber, zum Thema Accessibility. Wenn das Bild wichtig ist für die BesucherInnen,

00:38:28.380 --> 00:38:34.500
dann sollte es, also es muss auf jeden Fall laut SPEC ein Alt-Attribut geben. Das darf leer sein,

00:38:34.500 --> 00:38:38.220
wenn es eben eine Grafik ist, die keinen informationellen Wert hat, sondern es ist

00:38:38.220 --> 00:38:42.660
bloß ein Icon. Aber nebendran steht eh nochmal der Text, der erklärt, was es ist oder sowas.

00:38:42.660 --> 00:38:50.420
Aber wenn es nicht selbsterklärend ist, dann sollte die Grafik entsprechenden Alt-Text besitzen,

00:38:50.420 --> 00:38:55.680
der für blinde oder seheingeschränkte Menschen beschreibt, was da zu sehen ist.

00:38:55.680 --> 00:39:03.740
Also wenn das jetzt irgendwie ein Visual ist, das einfach nur, keine Ahnung, ein paar junge Leute,

00:39:03.740 --> 00:39:07.780
die am Schreibtisch sitzen, wenn das jetzt nicht zum Text irgendwie groß in Bezug hat,

00:39:07.780 --> 00:39:11.540
sondern einfach nur so ein Stimmungsbild ist, würde ich sagen, kann man sich vielleicht auch

00:39:11.540 --> 00:39:16.940
sparen. Wenn das jetzt eine Grafik ist, ein Diagramm, dann sollte da zumindest drin erklärt

00:39:16.940 --> 00:39:20.380
werden im Alt-Text, was ist das für ein Diagramm, was ist die Information, die ich aus diesem

00:39:20.380 --> 00:39:27.820
Diagramm ziehen kann. Genau, also ich habe hier gerade noch einen Link ergänzt, die Geschichte,

00:39:27.820 --> 00:39:33.420
wann welches Alt-Attribut zu verwenden ist, wann man was reinschreiben soll und wie es sein soll,

00:39:33.420 --> 00:39:41.580
das ist gar nicht so einfach. Dafür hat das B3C aber den sogenannten Alt-Decision-Tree gebaut,

00:39:41.580 --> 00:39:46.700
der einem so ein paar Fragen stellt. Wenn man sich daran entlanghangelt, dann kommt man sehr

00:39:46.700 --> 00:39:51.380
schnell zu dem, wie sollte denn das Alt-Attribut für meinen Fall jetzt befüllt werden.

00:39:51.380 --> 00:39:57.020
Das ist doch super, das finde ich eine tolle Idee, um sowas einzubauen in Content-Management-Systeme.

00:39:57.020 --> 00:40:02.660
Da sollte eigentlich, weil oft ist es so, ich lasse das leer, weil keine Ahnung, was soll ich

00:40:02.660 --> 00:40:06.340
denn da reinschreiben. Und wenn man da sowas hätte wie einen kleinen Wizard, der eben sagt,

00:40:06.340 --> 00:40:11.060
okay, du hast ein Bild eingefügt, enthält das Bild Text und so weiter, also dass man das einfach

00:40:11.060 --> 00:40:15.020
durchgeht und je nachdem, was du angibst, sagt es dir, ah ja, dann schreibt das und das rein.

00:40:15.020 --> 00:40:24.500
Genau, also Old Decision Tree ist ein Go-To-Resource von mir, die ich ständig überall irgendwie

00:40:24.500 --> 00:40:30.620
rumwerfe, weil ich es fantastisch finde und weil viele Menschen nicht viel mehr,

00:40:30.620 --> 00:40:35.180
wenn sie überhaupt schon wissen, dass es ein Altattribut gibt und dass man es befüllen soll,

00:40:35.180 --> 00:40:40.860
dann hört es damit meistens schon auf. Also wie befüllen, in welchem Fall und wie man hier sieht,

00:40:40.860 --> 00:40:46.740
es gibt dann ein paar, gibt ein paar Fälle, ist dann da, ja, aber es ist auch nicht schlimm. Dann

00:40:46.740 --> 00:40:49.620
kann man einfach da nachgucken, dann hangelt man sich durch die Fragen durch und ist dann

00:40:49.620 --> 00:40:57.220
ziemlich schnell bei der Antwort. Dann ist das nächste Cross-Origin. Also da geht es darum,

00:40:57.220 --> 00:41:05.060
wenn ich ein Bild einbinde von einer, also von einer anderen Domain, möchte ich zum Beispiel

00:41:05.060 --> 00:41:11.420
Cookies oder einen Authentication-Header, möchte ich die mit hinschicken? Sollte ich die von der

00:41:11.420 --> 00:41:17.260
Seite übernehmen oder möchte ich das anonym anfragen? Und… Da habe ich nie drüber nachgedacht.

00:41:17.260 --> 00:41:26.100
Ich auch nicht. Ich glaube, dass ich das im Zusammenhang mit dieser Content Security Policy

00:41:26.100 --> 00:41:32.700
Geschichte schon mal gelesen hatte, aber ja, das ist eben speziell für Bilder, um zu sagen,

00:41:32.700 --> 00:41:37.660
keine Ahnung, das sind Bilder, die eben halt nur unter, wenn ich die entsprechenden Credentials

00:41:37.660 --> 00:41:41.900
habe, aufgerufen werden dürfen. Und damit ich das dann auch von der Seite aus kann,

00:41:41.900 --> 00:41:49.420
kann ich dann eben die Cookies und so damit hinschicken. Genau. Dann, Decoding. Da haben

00:41:49.420 --> 00:41:56.260
wir, glaube ich, auch schon mal drüber gesprochen, als es darum ging, um so Optimierungen und so,

00:41:56.260 --> 00:42:08.100
so teilweise fast unnötige Optimierungen. Und zwar geht es da darum, ob der Browser auf dieses

00:42:08.100 --> 00:42:14.740
Bild vor dem nächsten Render-Event warten soll. Also wenn das nächste Rendering stattfindet der

00:42:14.740 --> 00:42:19.580
Seite, soll dieses Bild dabei berücksichtigt werden oder nicht? Also das Bild wird auf jeden

00:42:19.580 --> 00:42:25.340
Fall geladen, aber das Decoden ist ja auch nochmal ein extra Schritt. Der dauert in der Regel zwar

00:42:25.340 --> 00:42:30.540
deutlich kürzer als das Laden selbst, aber es kann halt eine sichtbare Verzögerung verursachen. Also

00:42:30.540 --> 00:42:36.340
es ist nicht so, dass das Bild da im Browser jetzt den Main-Thread irgendwie verzögern würde. Das

00:42:36.340 --> 00:42:40.260
wäre ja Blödsinn, wenn du dann aufs Bild warten müsstest und danach wird erst der Content

00:42:40.260 --> 00:42:49.220
nachgeladen. Aber es kann eben von der, wie soll ich sagen, so visuell hat man das Gefühl, da ist

00:42:49.220 --> 00:42:55.860
was verzögert und das kann man damit abfangen. Es macht aber wirklich wohl keinen wirklich

00:42:55.860 --> 00:43:03.020
messbaren Unterschied. Das klingt für mich nach eine große Firma, die irgendeinen ganz speziellen

00:43:03.020 --> 00:43:10.100
Anwendungsfall hatte, hat das in den Webstandard mit eingebracht, also für was ganz Spezielles.

00:43:10.100 --> 00:43:14.340
Interessanterweise der Artikel, den du verlinkt hast, sag ich gleich noch. Jetzt kommt nämlich

00:43:14.340 --> 00:43:22.980
das große Außer. Und zwar, wenn ich Bilder einfüge per JavaScript, dann kann das einen

00:43:22.980 --> 00:43:29.020
Unterschied machen. Und der Anwendungsfall war tatsächlich die Google-Bildersuche. Wenn ich

00:43:29.020 --> 00:43:35.380
da auf ein Vorschaubild klicke und es öffnet sich dann das Bild in groß, dann hat das wohl

00:43:35.380 --> 00:43:40.980
geflaggert, weil das alte Bild, das kleine, die kleine Version wurde ausgeblendet und das neue

00:43:40.980 --> 00:43:47.820
Source-Attribut gesetzt. Aber dadurch gab es ein visuelles Flackern, weil das ja erst geladen und

00:43:47.820 --> 00:43:53.580
decoded werden musste. Und wenn du das Dynamisch-Pad-JavaScript sowieso machst, dann kannst

00:43:53.580 --> 00:44:01.460
du dieses Decoding auch auslösen manuell, also indem du Decode aufrufst. Das steht auch in dem

00:44:01.460 --> 00:44:08.380
Artikel noch drin. Und dann eben das Bild erst einfügst, nachdem es decoded ist und dadurch

00:44:08.380 --> 00:44:15.580
dann erst irgendwie das austauscht. Genau. Also, interessant, der Artikel, den du dazu

00:44:15.580 --> 00:44:20.660
verlinkt hast. Ich habe nur ganz grob jetzt mal drüber geguckt und bin dann am letzten Satz

00:44:20.660 --> 00:44:36.620
hängen geblieben oder am vorletzten. Ja, Jake Archibald hat ja bei Google gearbeitet und ist

00:44:36.620 --> 00:44:43.420
jetzt glaube ich bei, das darf ich nicht falsch sagen, bei Shopify. Er hat auf jeden Fall mittlerweile

00:44:43.420 --> 00:44:52.420
wieder ein Podcast mit Sorma und den kann ich auch sehr empfehlen. Ah ja, bei Shopify, genau,

00:44:52.420 --> 00:44:57.660
habe gerade nochmal nachgeschaut und die haben zusammen einen Podcast, der heißt Off the Main

00:44:57.660 --> 00:45:03.980
Thread, OTMT, und den kann ich sehr empfehlen. Das ist gerade momentan. Ich oute mich jetzt ganz

00:45:03.980 --> 00:45:08.820
kurz. Ich habe ja irgendwann, ich weiß nicht, ob ich es schon mal gesagt habe, seit wir den Podcast

00:45:08.820 --> 00:45:15.220
hier haben, höre ich viel weniger Tech-Podcasts, weil ich so quasi meine eigene Dosis mir abhole,

00:45:15.220 --> 00:45:20.580
so an Specs und so. Ich habe dann irgendwie gemerkt, ich interessiere mich weniger dafür,

00:45:20.580 --> 00:45:25.420
jetzt selbst Podcasts dann noch im Tech-Bereich zu hören, aber für den mache ich mittlerweile

00:45:25.420 --> 00:45:30.860
eine Ausnahme. Ich bringe auch nicht so oft neue Folgen, aber ich finde das immer sehr interessante

00:45:30.860 --> 00:45:36.300
und die gehen oft wahnsinnig in die Tiefe rein, weil die, ja, die, ich meine, die haben

00:45:36.300 --> 00:45:42.420
beide vorher bei Google gearbeitet, die sind da extrem tief in der Browser- und Standardentwicklung

00:45:42.420 --> 00:45:48.420
drin und das kann ich nur sehr empfehlen, hier an der Stelle, Shoutout OTMT, und dann

00:45:48.420 --> 00:45:54.300
mal reinhören, guter Podcast. Sorry, jetzt habe ich genug unterbrochen, das darfst du

00:45:54.300 --> 00:46:01.060
nicht sagen. Genau, also am Schluss heißt es auch nochmal, der Performance-Unterschied,

00:46:01.060 --> 00:46:04.500
also es wird zwar auch hier gezeigt, mit den Performance-Tools und geguckt, wie gesagt,

00:46:04.500 --> 00:46:11.540
Images blockieren nicht den Main-Thread, aber dieses decoden und dann warten drauf, blockiert

00:46:11.540 --> 00:46:15.540
dann irgendwo eben doch, also am besten mal den Artikel durchlesen, um es genau zu wissen.

00:46:15.540 --> 00:46:23.940
Aber bevor man sich um sowas kümmert, schreiben sie sogar explizit, LoadingGleichLazy, unser

00:46:23.940 --> 00:46:29.900
Lieblingsattribut, benutzt das und spiel vielleicht noch mit FetchPriority gleich high, da kommen

00:46:29.900 --> 00:46:34.180
wir auch gleich noch dazu und dann kannst du dich vielleicht, also das hat einen viel

00:46:34.180 --> 00:46:38.860
größeren Impact als jetzt diese Decoding-Geschichte zu verlagern.

00:46:38.860 --> 00:46:42.740
Aber vielleicht ist es interessant, um es im Hinterkopf zu behalten, wenn ich Bilder

00:46:42.740 --> 00:46:48.820
per JavaScript dynamisch irgendwie einfüge, tut es ja eigentlich auch nicht weh, das Decoding

00:46:48.820 --> 00:46:49.820
zu machen.

00:46:49.820 --> 00:46:55.340
Ich habe überlegt, wenn wir nochmal einen Tech-Podcast machen über Frontend und wir

00:46:55.340 --> 00:46:58.380
brauchen noch einen Namen, dann nennen wir ihn Coding gleich lazy.

00:46:58.380 --> 00:47:06.700
Das passt dann auch zu dem JetGPT macht das für mich Mindset.

00:47:06.700 --> 00:47:15.460
Coding lazy, oh man, ich musste das kurz bei Mastodon jetzt raushauen.

00:47:15.460 --> 00:47:19.300
Genau, wir kommen auch schon als nächstes zu FetchPriority, aber da will ich auch gar

00:47:19.300 --> 00:47:23.380
nicht so viel dazu sagen, weil wir haben das in unserer Folge 60, die auf Verlink, da haben

00:47:23.380 --> 00:47:26.820
wir ja schon mal drüber gesprochen und da geht es im Endeffekt nur darum, dass ich

00:47:26.820 --> 00:47:30.940
sagen kann, welche Bilder auf der Seite sind besonders wichtig, welche sind nicht so wichtig

00:47:30.940 --> 00:47:34.980
und kann dann eben sagen, die auf jeden Fall priorisieren und zuerst laden und dann die

00:47:34.980 --> 00:47:35.980
anderen.

00:47:35.980 --> 00:47:38.460
Das ist eigentlich auch arg viel mehr gibt es dazu nicht zu sagen, wenn man jetzt nicht

00:47:38.460 --> 00:47:40.700
komplett in der Technik versinken will.

00:47:40.700 --> 00:47:49.380
Dann, und jetzt kommt das, was ich komplett neu gelernt habe, ISMAP. Es gibt ein Attribut

00:47:49.380 --> 00:47:55.900
auf Image Tags, ISMAP. Und das ist ein Boolean Attribut, das heißt entweder ist es gesetzt

00:47:55.900 --> 00:47:56.900
oder es ist nicht gesetzt.

00:47:56.900 --> 00:47:58.780
Das habe ich noch nie gehört.

00:47:58.780 --> 00:48:03.940
Habe ich auch noch nie gehört, das gibt es aber schon seit, keine Ahnung, seit Urzeiten,

00:48:03.940 --> 00:48:12.260
also seit dem ersten, also Chrome 4, Safari 3.1, also wirklich Firefox 2, gut, IE weiß

00:48:12.260 --> 00:48:13.260
ich jetzt nicht, ist aber auch interessant.

00:48:13.260 --> 00:48:14.500
Hat das was mit Image Maps zu tun?

00:48:14.500 --> 00:48:16.180
Es hat was mit Image Maps zu tun, ja.

00:48:16.180 --> 00:48:17.900
Ich habe gerade überlegt, was könnte es sein?

00:48:17.900 --> 00:48:26.500
Und zwar, und jetzt halte ich fest, Server-Side-Image-Maps. What? Denkt man, ja. Also man darf das Attribut

00:48:26.500 --> 00:48:34.780
nur setzen, wenn das Bild innerhalb von einem A-Tag ist, mit einem gültigen href. Und wenn

00:48:34.780 --> 00:48:42.860
ich da dann draufklicke, dann lande ich auf der URL, die im href angegeben ist, mit den

00:48:42.860 --> 00:48:49.740
Koordinaten, auf denen ich auf dem Bild geklickt habe, als Parameter oben angehängt. Und kann

00:48:49.740 --> 00:48:53.940
dann Server-Seitig entscheiden, wie ich da drauf reagieren möchte.

00:48:53.940 --> 00:49:00.740
The fuck? Ja, genau das. Also da ist dann Fragezeichen

00:49:00.740 --> 00:49:07.020
x, y angehängt an die URL. Und dann kann der Server entscheiden, je nachdem, wo geklickt

00:49:07.020 --> 00:49:11.660
wurde, mache ich dies oder mache ich das. Okay, das klingt wie was wirklich Altes, weil

00:49:11.660 --> 00:49:17.980
wieso braucht man dafür ein Attribut? Also das könnte man ja auch von Hand machen, oder?

00:49:17.980 --> 00:49:24.980
Ja, aber dann brauchst du JavaScript. Ach so, Moment. Da, wo ich geklickt habe.

00:49:24.980 --> 00:49:29.740
Genau, also ausgehend von der linksoberen Ecke von dem Bild.

00:49:29.740 --> 00:49:33.340
Ach du Kacke. Die Koordinate, auf die ich geklickt habe in dem Bild.

00:49:33.340 --> 00:49:36.020
Das ist ja fancy. Ja, die wird dann angehängt.

00:49:36.020 --> 00:49:41.860
Das ist ja fancy. Oh Gott, das dürfen wir ... Leute, falls ihr Werbung schreibt im

00:49:41.860 --> 00:49:47.140
Internet oder sowas, vergesst ganz schnell wieder, dass wir das hier ... Das ist nichts,

00:49:47.140 --> 00:49:57.020
ihr düftigen Podcastern. Da kannst du ja alle möglichen Schweinereien mitmachen. Also krass,

00:49:57.020 --> 00:50:04.740
nie gehört. Geil. Ich auch nicht. Und wie gesagt, das ist wirklich uralt. Es war irgendwo ... War

00:50:04.740 --> 00:50:09.980
ein Link auch, da stand dann, das gab es schon im Blablabla-Browser-Einspunkt-irgendwas oder so.

00:50:09.980 --> 00:50:14.420
Also das ist wirklich uralt und ich habe es aber ... Entweder habe ich es komplett verdrängt,

00:50:14.420 --> 00:50:30.740
weil man einfach nicht mehr sowas häufig irgendwie braucht. Und zu anderen Image Maps kommen wir ja

00:50:30.740 --> 00:50:39.380
gleich noch. Genau. So viel dazu. Also war ich echt überrascht, dass ich da noch was Neues lerne,

00:50:39.380 --> 00:50:45.620
was Altes, Neues. Dann, Loading-Attribut hatten wir es gerade eben schon drüber und wir hatten

00:50:45.620 --> 00:50:49.140
es auch in unserer Folge 2. So lange ist das schon her, dass wir das hatten. Das war eine

00:50:49.140 --> 00:50:54.340
der ersten Sachen, die wir da auch für uns neu entdeckt haben, durch unseren Podcast,

00:50:54.340 --> 00:50:59.780
durch den eigenen. Genau, Folge 2 auch verlinkt. Loading gleich lazy. Coole Sache. Nochmal ganz

00:50:59.780 --> 00:51:06.220
kurz umrissen. Heißt, das Bild wird erst geladen, wenn es in den sichtbaren Viewport gescrollt wird.

00:51:06.220 --> 00:51:12.380
Deswegen soll man es auch nur für Bilder, die also below the fold sind, beim Laden der Seite,

00:51:12.380 --> 00:51:17.100
wo ich das erwarten kann, dass die below the fold sind, nur dann einsetzen. Weil wenn ich

00:51:17.100 --> 00:51:22.740
das Loading gleich lazy auf Bilder setze, die direkt schon beim Laden da sind, dann hat das

00:51:22.740 --> 00:51:26.420
wiederum Nachteile. Also dann habe ich keinen Performancegewinn, sondern ich habe eher einen

00:51:26.420 --> 00:51:32.220
Nachteil dadurch. Wobei ich auch sagen muss, also das ist für mich so gering. Ich habe da mal mit

00:51:32.220 --> 00:51:36.140
rumgespielt und ich habe jetzt nicht so sonderlich großen Nachteil gesehen. Aber gut,

00:51:36.140 --> 00:51:42.860
so als Vorausregelmerken. Dann Referral Policy ist auch was, wo ich auf eine andere Folge verweisen

00:51:42.860 --> 00:51:47.060
kann. Das ist nämlich komplett analog zum A-Element, das wir ja schon hatten. Und das

00:51:47.060 --> 00:51:52.860
ist unsere Folge 62, wo wir uns eigentlich, glaube ich, nur um das A-Element auch gekümmert haben.

00:51:52.860 --> 00:51:58.460
Das heißt, da kann ich angeben, sollen Referral mitgeschickt werden, sollen Referral nur dann

00:51:58.460 --> 00:52:07.100
mitgeschickt werden, wenn es Same-Origin ist und so weiter. So, und jetzt kommen wir zu einem

00:52:07.100 --> 00:52:12.860
bisschen größeren Blog. Und wo ich ganz froh war, dass ich den nochmal angegangen bin. Ich habe da

00:52:12.860 --> 00:52:17.080
drüber nämlich schon erzählt. Ich meine, auch im Podcast. Deine Notizen, die nehmen ja gar kein

00:52:17.080 --> 00:52:22.500
Ende. Ja, ich habe schon ein bisschen was da. Aber ich glaube, es dauert nicht so lange. Ich habe

00:52:22.500 --> 00:52:28.840
schon mal drüber erzählt, dass wir auf unserer eigenen Firmenseite, das wird alles dynamisch

00:52:28.840 --> 00:52:33.280
generiert. Und wir haben auch die Bilder werden in verschiedene Größen generiert. Und wir haben

00:52:33.280 --> 00:52:39.400
teilweise auch so eine Art Direction, wo dann eben das Bild in der großen Größe ist der Text dann

00:52:39.400 --> 00:52:44.440
links davon. Und wenn das Bild aber schmaler wird, dann rutscht der Text im Bild oben drüber und so.

00:52:44.440 --> 00:52:53.560
Und das machen wir alles eigentlich mit Picture Element. Aber auch teilweise mit dem Image Element

00:52:53.560 --> 00:52:59.200
selbst, also Responsive Images, direkt mit Attributen. Da gibt es das Source Set, also

00:52:59.200 --> 00:53:04.520
SRC Set Attribut und das Sizes Attribut. Und da habe ich schon darüber berichtet,

00:53:04.520 --> 00:53:09.320
wie kompliziert das schnell wird. Und ich dachte nur, vielleicht stelle ich mich nur blöd an,

00:53:09.320 --> 00:53:15.080
aber ich habe Artikel gefunden, unter anderem von Stefan Judis, aber auch von Chris. Und jetzt

00:53:15.080 --> 00:53:22.520
weiß ich, reimt es sich auf Lawyer oder nicht? Ja, auf Lawyer. Also Chris Coyer, nicht Coyer,

00:53:22.520 --> 00:53:28.400
wie wir, glaube ich, am Anfang gesagt haben. Die auch beide gesagt haben, okay, das ist einfach

00:53:28.400 --> 00:53:37.640
messy und schnell kompliziert. Und ich erkläre mal kurz, warum. Also Source Set, da gebe ich

00:53:37.640 --> 00:53:46.240
verschiedene Bilder an und hinten dran dann eine Größe, also eine Zahl und die Unit W. Und das ist

00:53:46.240 --> 00:53:52.280
am Anfang erstmal verwirrend. Was soll das jetzt sein, das W? Warum sind es keine Pixel? Aber das

00:53:52.280 --> 00:53:58.920
W ist die tatsächliche Breite in der Bilddatei. Und die Pixel, die könnten ja aufgrund der Density

00:53:58.920 --> 00:54:04.000
oder so, könnten ja anders sein auf dem Screen. Da geht es also wirklich darum, dieses Bild hat

00:54:04.000 --> 00:54:09.400
wirklich die intrinsische Breite von so und so viele Pixeln. Deswegen ist es diese eigene W,

00:54:09.400 --> 00:54:18.400
Unit for the Width. Und dann kann ich noch das Sizes Attribut angeben und da gebe ich Media

00:54:18.400 --> 00:54:28.120
Queries an, also reagiere auf die Viewport Breite und sage dann, wenn der Viewport kleiner ist oder

00:54:28.120 --> 00:54:35.540
größer ist als das, dann hat das Bild die und die Breite. Das dann aber wiederum in Pixel oder in

00:54:35.540 --> 00:54:42.040
VW, wenn ich will. Also wirklich, wie ist es dann in dem Zustand? So, und jetzt ist ja schon mal,

00:54:42.040 --> 00:54:47.240
also erst mal ist ja schon mal komisch. Jetzt muss ich Media Queries plötzlich in einem Attribut da

00:54:47.240 --> 00:54:54.840
auch noch schreiben und warum kann ich das nicht im CSS machen? Und dann beziehen sich diese Media

00:54:54.840 --> 00:54:59.840
Queries auch noch auf den Viewport, aber nicht auf den Container. Und es wird halt ganz schnell,

00:54:59.840 --> 00:55:05.600
also ich muss wirklich das CSS quasi noch mal duplizieren. Und warum muss ich das machen?

00:55:05.600 --> 00:55:13.200
Weil der Browser erst nach dem Layout-Schritt weiß, welche Abmessungen das Bild hat. Und auch

00:55:13.200 --> 00:55:18.720
das CSS ja vielleicht erst nachher geladen wird. Und zu dem Zeitpunkt einfach noch nicht klar ist,

00:55:18.720 --> 00:55:24.680
welche Größe wird das Bild da überhaupt haben. Und deswegen muss ich das dann noch mal wiederholen.

00:55:24.680 --> 00:55:28.520
Aber dann habe ich ja vielleicht verschiedene Breakpoints. Und wenn das Bild jetzt immer auf

00:55:28.520 --> 00:55:32.560
die komplette Breite geht, dann ist das noch relativ einfach. Aber wenn das Bild zum Beispiel

00:55:32.560 --> 00:55:37.640
in der Masonry-Galerie ist und mal über die komplette Breite geht oder je nach Bilderanzahl,

00:55:37.640 --> 00:55:41.520
die da drin sind, dann vielleicht die Hälfte oder ein Drittel vom Bildschirm einnimmt und das letzte

00:55:41.520 --> 00:55:45.440
Bild vielleicht wieder die komplette Breite und so, da wird es dann halt ganz schnell kompliziert.

00:55:45.440 --> 00:55:53.000
Weil ich halt wissen muss, welche verschiedenen Größen kann denn dieses, oder ja, in jedem

00:55:53.000 --> 00:55:59.400
Breakpoint, welche Größe nimmt denn dieses Bild ein. Also das muss ich genau planen und mir vorher

00:55:59.400 --> 00:56:05.120
halt eine Logik überlegen, die ich dann nicht nur im CSS umsetze, sondern eben auch zu dem Zeitpunkt,

00:56:05.120 --> 00:56:09.440
wo das Markup generiert wird, da schon mit berücksichtige. Und das ist echt so,

00:56:09.440 --> 00:56:13.600
das wird einfach so schnell, so komplex, dass ich gar nicht mehr den Überblick habe,

00:56:13.600 --> 00:56:18.640
wann ist denn das Bild wie breit. Und gerade, wenn es dann ein Grid ist und automatisch dann

00:56:18.640 --> 00:56:22.080
irgendwie umbricht und so, dann kann ich das vielleicht vorher sogar gar nicht wissen,

00:56:22.080 --> 00:56:26.160
weil ich viel zu viele Zustände habe. Und jetzt könnte man sich denken,

00:56:26.160 --> 00:56:32.640
sind denn Container-Querys da nicht die Lösung dafür? Also das war auch gleich mein erster

00:56:32.640 --> 00:56:37.040
Gedanke, so naja, wir haben jetzt Container-Querys, kann man das nicht irgendwie verbinden? Und ich

00:56:37.040 --> 00:56:42.720
bin natürlich nicht als als Einziger auf die Idee gekommen. Also es gibt, wie gesagt, Artikel von

00:56:42.720 --> 00:56:48.120
Stefan Judis und Chris Coyer, die ich auch verlinke. Stefan Judis hat geschrieben,

00:56:48.120 --> 00:56:54.880
should responsive images work with Container-Querys? Und Chris Coyer geht dann auf Cises gleich Auto

00:56:54.880 --> 00:57:01.880
ein, wo ich auch noch gleich drauf eingehe. Und die Antwort ist, ja, wäre natürlich cool,

00:57:01.880 --> 00:57:07.960
wenn Container-Querys da die Abhilfe schaffen würden. Gibt aber eben halt auch wieder andere

00:57:07.960 --> 00:57:14.080
Dinge, die man berücksichtigen muss, wo man erst so, wenn man technisch da in der Tiefe drin ist,

00:57:14.080 --> 00:57:17.720
dann erst drauf kommt, okay, das macht eventuell wieder andere Probleme.

00:57:17.720 --> 00:57:21.440
Ja, aber das haben sie uns, bevor wir Container-Querys bekommen, auch jahrelang gesagt.

00:57:21.440 --> 00:57:24.640
Genau, da hieß es auch, das geht nicht. Das geht nie, das wird nie gehen.

00:57:24.640 --> 00:57:26.880
Das verrückt, das wird nie funktionieren.

00:57:26.880 --> 00:57:37.440
Aber es gibt ein GitHub-Issue beim CSS-WG, also beim CSS-Standard zu dem Draft,

00:57:37.440 --> 00:57:43.200
oder beziehungsweise es ist ein Draft, das Issue, und zwar von Una Kravitz,

00:57:43.200 --> 00:57:50.480
auch wieder ein Name, den man ja so kennt und vielleicht auch von diversen Konferenzen als Speakerin kennt,

00:57:50.480 --> 00:57:54.520
die da eben geschrieben hat, Sources and Sizes Interaction with Container-Queries.

00:57:54.520 --> 00:57:56.840
Und da einfach mal so als Input so, ja, wie schaut's denn aus?

00:57:56.840 --> 00:58:03.480
Kann man da irgendwie mit bestimmten Container-Units was drin arbeiten?

00:58:03.480 --> 00:58:13.040
Oder brauchen wir vielleicht ein Container-Attribut, wo man dann eben nicht die Media-Queries für den Viewport schreibt,

00:58:13.040 --> 00:58:17.520
sondern eben für den Container. Und das finde ich eigentlich einen ganz guten Ansatz.

00:58:17.520 --> 00:58:25.160
Also da gibt's natürlich eine Diskussion mit ewig viel Input unten drunter, den ich mir jetzt nicht komplett durchgelesen habe.

00:58:25.160 --> 00:58:29.320
Und es gibt wohl, ja, verschiedene Überlegungen, vielleicht sind es nicht mal Probleme,

00:58:29.320 --> 00:58:34.960
aber einfach, wo man halt sagen muss, was ist denn der beste Weg, um das zu erreichen, und auf was muss man da achten,

00:58:34.960 --> 00:58:40.480
wo die Leute natürlich viel tiefer in der Technik drin sind, auch wie der Browser da intern arbeitet und so.

00:58:40.480 --> 00:58:47.400
Genau, aber man sieht, es tut sich da was, und das wäre schon ziemlich cool, wenn das in Zukunft wirklich gehen würde,

00:58:47.400 --> 00:58:53.840
dass ich sage, okay, egal wie jetzt mein Viewport aussieht, aber wenn dieses Bild die und die Breite hat,

00:58:53.840 --> 00:58:58.600
und zwar wirklich die Breite am Schluss rausspuckt, dann soll der Inhalt sich verändern,

00:58:58.600 --> 00:59:02.880
dann möchte ich eine andere Auflösung haben, weil ich brauche für einen kleinen Screen,

00:59:02.880 --> 00:59:08.760
der keine große Retina-Auflösung hat, brauche ich, kann ich ein Low-Quality-Bild nehmen,

00:59:08.760 --> 00:59:15.760
aber wenn ich natürlich irgendwie dreifach Auflösung habe, dann will ich gute Qualität und so weiter.

00:59:15.760 --> 00:59:20.480
Also das hätte uns viel Arbeit gespart für unsere Seite, wenn das schon wäre.

00:59:20.480 --> 00:59:26.720
Ich muss ganz ehrlich sagen, ich bin ja, ich versuche ja immer so faul zu entwickeln, wie es nur geht,

00:59:26.720 --> 00:59:31.520
und das ist ein Thema, wo ich mich bisher so gut wie nicht mit beschäftigt habe.

00:59:31.520 --> 00:59:38.120
Und ich habe irgendwie so das Gefühl, das ist noch nicht das Ende der Fahnenstange, das muss noch einfacher werden als das.

00:59:38.120 --> 00:59:44.360
Finde ich eigentlich auch, ja. Aber da ist halt immer das Problem, wann weiß der Browser, wie da wirklich die Breite ist und so.

00:59:44.360 --> 00:59:47.480
Also du kannst halt nicht sagen, der Browser soll das einfach automatisch machen.

00:59:47.480 --> 00:59:53.000
Ich habe jetzt, jetzt dürfen die Leute, und jetzt ist gleich der Moment gekommen, wo wir sagen können,

00:59:53.000 --> 00:59:58.400
was, der hat doch keine Ahnung, ich muss einen Kommentar schreiben. Ich gebe euch jetzt das Futter.

00:59:58.400 --> 01:00:07.040
Warum kann es nicht Teil des Bildes sein und das Bild kann quasi, der Browser kann entscheiden,

01:00:07.040 --> 01:00:11.720
wie viel Resolution er von dem Bild zieht. Ja, dafür bräuchte man ein neues Bildformat wahrscheinlich.

01:00:11.720 --> 01:00:18.200
Ich habe gerade so an die alten JPEG-Progressive-Loading-Bilder denken müssen.

01:00:18.200 --> 01:00:24.280
Falls du das noch kennst, das wurde ja erst in einer niedrigen Auflösung geladen und dann ist es immer schärfer geworden.

01:00:24.280 --> 01:00:28.880
Da muss man wirklich schon sehr alt sein, dass man das noch erlebt hat.

01:00:28.880 --> 01:00:36.480
Aber jetzt stell dir vor, du machst mit deinem Bild gar nichts, du hast es in einem Format vorliegen,

01:00:36.480 --> 01:00:43.120
das erlaubt, dass quasi ein Browser sich Teile davon lädt und nicht immer die gesamte Datei.

01:00:43.120 --> 01:00:51.480
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.

01:00:51.480 --> 01:00:55.880
Also ähnlich wie zum Beispiel das Range-Request bei Medien-Dateien.

01:00:55.880 --> 01:01:01.840
Ich möchte nicht das komplette Video, sondern ich möchte ab der und der Stelle und so lange.

01:01:01.840 --> 01:01:04.240
Genau, das wäre die Möglichkeit.

01:01:04.240 --> 01:01:09.080
Ich lehne mich sehr weit aus dem Fenster, weil wenn man, keine Ahnung, ob das irgendwie machbar ist,

01:01:09.080 --> 01:01:12.360
aber wir wissen ja alles, wo die Leute sagen, es ist nicht machbar, es geht irgendwann.

01:01:12.360 --> 01:01:18.080
Und ich habe halt nur gerade überlegt, so als Developer möchte ich mich um diesen ganzen Kram gar nicht kümmern müssen.

01:01:18.080 --> 01:01:22.680
Wenn es nicht sein muss, ich würde gerne einfach, mein Workflow wäre am liebsten,

01:01:22.680 --> 01:01:30.320
ich lege in irgendeinem Format, das mein Bildprogramm oder mein Bildstep irgendwo rauswirft,

01:01:30.320 --> 01:01:35.120
das Bild einfach auf den Server von mir aus in einer sehr hochauflösenden Variante

01:01:35.120 --> 01:01:37.840
oder in einer Variante, die sehr viel Informationen hat.

01:01:37.840 --> 01:01:44.960
Und der Browser zieht sich nicht einzelne Bilder sogar, sondern er zieht sich aus diesem Bild das,

01:01:44.960 --> 01:01:49.600
was er jetzt gerade braucht, abhängig von natürlich Regeln, die ich schon definieren muss.

01:01:49.600 --> 01:01:54.520
Ja, das ist schon, aber auch, dass ich dann am Ende, das wäre auch geil, oder?

01:01:54.520 --> 01:02:00.560
Das wäre schon cool. Ich bin gerade überlegen, ob das das ursprüngliche Problem löst,

01:02:00.560 --> 01:02:06.280
weil du ja, also das Bild müsste quasi im Header trotzdem schon alle Abmessungen,

01:02:06.280 --> 01:02:09.960
die es rausspucken kann aus diesem Bild, wie auch immer das angelegt ist,

01:02:09.960 --> 01:02:14.200
müsste es schon mitliefern, weil das Problem ja ist, der Browser muss zum Beispiel wissen,

01:02:14.200 --> 01:02:16.760
wie ist die Aspect Ratio von dem Bild, in welcher Breite.

01:02:16.760 --> 01:02:22.280
Gerade wenn es Richtung Art Direction geht, wo ich halt nicht das gleiche Bild hab,

01:02:22.280 --> 01:02:27.080
mit dem gleichen Aspect Ratio und nur anders groß, ja, sondern wo ich vielleicht wirklich

01:02:27.080 --> 01:02:30.160
im schmalen Zustand ist das Bild auch einfach ein bisschen höher,

01:02:30.160 --> 01:02:32.160
weil der Text oben drüber rutscht zum Beispiel.

01:02:32.160 --> 01:02:37.200
Jetzt spinne ich einfach mal und sage, wenn wir eh schon ein Dateiformat haben,

01:02:37.200 --> 01:02:40.000
von dem sich unterschiedliche Dinge gezogen werden können,

01:02:40.000 --> 01:02:43.720
könnte man auch als ersten Request einen machen, der ganz klein ist,

01:02:43.720 --> 01:02:46.320
der mir nur diese Metainformationen gibt.

01:02:46.320 --> 01:02:50.760
So was wie Options, ne? Wie ein Options-Request auf die Bilddatei.

01:02:50.760 --> 01:02:56.000
Und vielleicht gleich schon mitliefern als Request-Header.

01:02:56.000 --> 01:03:02.040
Ich hab die und die Pixeldichte und dann kriege ich nur für die, was angemessen ist,

01:03:02.040 --> 01:03:04.600
das zurück und dann könnte der Browser mit umgehen.

01:03:04.600 --> 01:03:09.000
Die Leute, die HTTP 2 gebaut haben, sagen ja, Requests kosten nichts mehr.

01:03:09.000 --> 01:03:11.000
Das ist jetzt ein bisschen übertrieben.

01:03:11.000 --> 01:03:14.000
Aber die sind natürlich nicht mehr so teuer, einzelne Requests, wie früher.

01:03:14.000 --> 01:03:16.000
Das heißt, man könnte das vielleicht schon ...

01:03:16.000 --> 01:03:20.080
Keine Ahnung, ich spinn jetzt grad nur irgendwas in die Zukunft rein.

01:03:20.080 --> 01:03:24.320
Ich bin der faule Webdeveloper, der sich eigentlich um nix kümmern möchte

01:03:24.320 --> 01:03:27.360
und schon gar nicht um so was Komplexes.

01:03:27.360 --> 01:03:31.000
Und jetzt hab ich einfach nur mal was hier reingesponnen ganz schnell für euch.

01:03:31.000 --> 01:03:35.760
Und ihr dürft mir jetzt in den Kommentaren alle erklären, warum das absolut nicht möglich ist.

01:03:35.760 --> 01:03:39.560
Interessant ist übrigens, auf Stefans Seite, stefanjudes.com,

01:03:39.560 --> 01:03:43.040
wenn man eine Weile nicht mit der Seite interagiert, dann kommt ein Bildschirmschoner.

01:03:43.040 --> 01:03:45.480
Ja, das hab ich auch schon gesehen.

01:03:45.480 --> 01:03:46.760
Ist das vorhin so hoch? Was ist das denn jetzt?

01:03:46.760 --> 01:03:48.240
Das ist die einzige Seite, die ich ...

01:03:48.240 --> 01:03:50.520
Und dann ändert sich auch irgendwas im Title, glaub ich, gell?

01:03:50.520 --> 01:03:52.040
Ja, hab ich nicht gesehen.

01:03:52.040 --> 01:03:55.920
Ich glaub, man sieht am Titel, der Title, da bewegt sich dann auch was,

01:03:55.920 --> 01:03:58.960
sodass man dann tatsächlich noch mal auf den Tab aufmerksam wird

01:03:58.960 --> 01:04:00.760
und dann den Bildschirmschoner sieht.

01:04:00.760 --> 01:04:04.400
Ja, das ist die einzige Seite, die ich kenne, den Bildschirmschoner,

01:04:04.400 --> 01:04:08.160
aber es ist aber, glaub ich, tatsächlich eine JavaScript-Library,

01:04:08.160 --> 01:04:09.600
die er dafür findet.

01:04:09.600 --> 01:04:10.920
Screensaver.js, oder so.

01:04:10.920 --> 01:04:14.640
Das könntest du dir irgendwie ... Screensaver.js oder so was, ja.

01:04:14.640 --> 01:04:17.120
Gut, genau, also, die Media Craters beziehen sich auf den Viewport,

01:04:17.120 --> 01:04:19.400
nicht den Container, das hab ich gesagt.

01:04:19.400 --> 01:04:24.360
Dann kam noch eine andere Idee, Off-Size ist gleich Auto.

01:04:24.360 --> 01:04:27.960
Der Catch war, dass du das nur benutzen kannst,

01:04:27.960 --> 01:04:31.560
wenn du's mit Loading gleich Lazy kombinierst.

01:04:31.560 --> 01:04:36.280
Weil du dann ja sowieso das Bild erst im Nachhinein lädst

01:04:36.280 --> 01:04:38.120
und erst dann die Abmessung weißt.

01:04:38.120 --> 01:04:39.560
Aber wenn du die dann weißt,

01:04:39.560 --> 01:04:42.400
dann kannst du mit Size ist gleich Auto eben auch drauf reagieren.

01:04:42.400 --> 01:04:43.640
Das war der Catch.

01:04:43.640 --> 01:04:47.120
Wenn du das benutzt, dann in Kombination mit Loading gleich Lazy.

01:04:47.120 --> 01:04:49.160
Und dann kann Chrome das aber jetzt eben auch,

01:04:49.160 --> 01:04:52.520
dass du diese ganzen Sizes nicht mehr angeben brauchst.

01:04:52.520 --> 01:04:54.520
Das heißt, du sparst es dir zumindest für Bilder,

01:04:54.520 --> 01:04:56.440
die du below the fold hast.

01:04:56.440 --> 01:04:59.280
Was ja schon mal bei uns einen großen Unterschied machen würde.

01:04:59.280 --> 01:05:01.200
Weil wir haben ein großes Header-Bild oben

01:05:01.200 --> 01:05:06.240
und haben unten eben genauso ein Mesen wie mit unseren ganzen Projekten und so weiter.

01:05:06.240 --> 01:05:10.960
Bei Content-Heavy-Seiten sind die meisten wahrscheinlich below the fold.

01:05:10.960 --> 01:05:13.920
Aber halt leider erst in Chrome.

01:05:13.920 --> 01:05:16.800
Und dann ist halt auch das Problem,

01:05:16.800 --> 01:05:18.600
für die anderen Browser würde ich ja eigentlich,

01:05:18.600 --> 01:05:20.040
also eigentlich war das da ungeschickt,

01:05:20.040 --> 01:05:23.760
dass sie das als neuen Wert von dem Sizes-Attribut gemacht haben,

01:05:23.760 --> 01:05:26.440
solange es eben halt nicht überall implementiert ist.

01:05:26.440 --> 01:05:28.960
Weil wenn ich jetzt Sizes gleich auto setze,

01:05:28.960 --> 01:05:31.520
dann habe ich halt in den anderen Browsern, die es nicht unterstützen,

01:05:31.520 --> 01:05:33.760
diese ganzen Informationen nicht mehr.

01:05:33.760 --> 01:05:37.880
Welche Sizes es dann tatsächlich gibt.

01:05:37.880 --> 01:05:41.360
Also das ist so ein bisschen, aber gut.

01:05:41.360 --> 01:05:44.120
Genau.

01:05:44.120 --> 01:05:49.360
Dann habe ich hier auch verlinkt noch die verschiedenen Bug-Tracking

01:05:49.360 --> 01:05:53.720
beziehungsweise Intent-to-Implement, Intent-to-Ship-Tickets.

01:05:53.720 --> 01:05:55.720
Von Chromium, Firefox und WebKit.

01:05:55.720 --> 01:05:58.720
Chromium, wie gesagt, in 126 schon geschippt

01:05:58.720 --> 01:06:01.720
und Firefox und WebKit haben zumindest Interesse dran bekundet.

01:06:01.720 --> 01:06:04.920
Da habe ich einen doppelten Link drin, der kann raus.

01:06:04.920 --> 01:06:10.120
Und ja, mal gucken, wie lange das dauern wird, bis das kommt.

01:06:10.120 --> 01:06:13.720
Wäre jedenfalls cool, weil es einem doch die Arbeit sehr vereinfacht.

01:06:13.720 --> 01:06:18.720
Dann kommen wir zu Width- und Height-Attributen.

01:06:18.720 --> 01:06:23.720
Und das kommt auch so ein bisschen damit jetzt zum Zug.

01:06:23.720 --> 01:06:25.720
Der Browser muss ja wissen, wie groß ist das Bild.

01:06:25.720 --> 01:06:30.720
Weil mit Width und Height gebe ich die Aspect Ratio vor, die das Bild hat,

01:06:30.720 --> 01:06:33.720
in dem Standardzustand, wenn es geladen wird.

01:06:33.720 --> 01:06:38.720
Und dadurch, dass der Browser dann zumindest die Aspect Ratio weiß,

01:06:38.720 --> 01:06:42.720
und ja weiß, naja, wenn ich das jetzt auf die Breite von der Spalt hier aufspanne,

01:06:42.720 --> 01:06:45.720
dann habe ich die und die Höhe auf jeden Fall,

01:06:45.720 --> 01:06:48.720
kann ich Layout Shift reduzieren oder sogar komplett verhindern.

01:06:48.720 --> 01:06:52.720
Weil der Browser anhand dieser Aspect Ratio zumindest mal schon mal Anhaltspunkte hat,

01:06:52.720 --> 01:06:55.720
wie viel Platz muss ich denn dafür reservieren.

01:06:55.720 --> 01:06:59.720
Deswegen ist es nicht unsinnig, Width und Height anzugeben,

01:06:59.720 --> 01:07:02.720
weil man könnte denken, naja, das wird ja eh alles, ich hau das Bild da rein

01:07:02.720 --> 01:07:05.720
und wird ja eh am Schluss dann per CSS gemacht.

01:07:05.720 --> 01:07:08.720
Aber ich finde es zum Beispiel, manchmal lädt vielleicht das CSS nicht,

01:07:08.720 --> 01:07:10.720
manchmal hat man irgendwie Netzwerkprobleme,

01:07:10.720 --> 01:07:13.720
dann hast du da eine Seite, die ohne CSS dargestellt wird,

01:07:13.720 --> 01:07:16.720
du könntest eigentlich den Inhalt schon dir zuführen,

01:07:16.720 --> 01:07:20.720
aber du hast halt Bilder, die irgendwie 2000 Pixel breit sind

01:07:20.720 --> 01:07:24.720
und entsprechend sich halt dann auch aufspannen auf den kompletten Bildschirm.

01:07:24.720 --> 01:07:28.720
Ja, und es ist halt Quatsch, wenn es eigentlich nur so kleine Thumbnails sein sollen.

01:07:28.720 --> 01:07:32.720
Gut, also Width und Height am besten angeben.

01:07:32.720 --> 01:07:37.720
UseMap, das passt perfekt, dass das jetzt mit U als letztes kommt,

01:07:37.720 --> 01:07:41.720
weil es ist eine gute Überleitung dann gleich zu deinem Abschnitt mit den Maps.

01:07:41.720 --> 01:07:46.720
Ich gebe da eben eine Raute gefolgt von dem Namen einer Map.

01:07:46.720 --> 01:07:48.720
Was ist eine Image-Map? Wissen wir gleich mehr.

01:07:48.720 --> 01:07:51.720
Das werden wir gleich erfahren. Gleich nach der Werbung.

01:07:51.720 --> 01:07:59.720
Hey, hey du. Schön, dass du da bist. Na, öfter hier?

01:07:59.720 --> 01:08:06.720
Dir gefällt, was du hörst und du magst es am liebsten werbefrei und unabhängig?

01:08:06.720 --> 01:08:12.720
Dann freuen wir uns sehr über ein paar Euro in unserem digitalen Strumpfband

01:08:12.720 --> 01:08:18.720
unter bwsiv.de slash spende.

01:08:18.720 --> 01:08:27.720
Auf bwsiv.de slash unterstützen findest du noch ca. 69 weitere Wege uns zu supporten.

01:08:27.720 --> 01:08:34.720
Wir danken dir.

01:08:34.720 --> 01:08:44.720
69 Wege uns zu supporten in Folge Nummer 69.

01:08:44.720 --> 01:08:48.720
Also, jetzt könnt ihr euch mal überlegen, wer das eingesprochen hat.

01:08:48.720 --> 01:08:51.720
Vielleicht war ich es, vielleicht war ich es nicht.

01:08:51.720 --> 01:08:54.720
Vielleicht war es irgendjemand, vielleicht war es Manuel Neuer.

01:08:54.720 --> 01:08:57.720
Wir werden es nie herausfinden.

01:08:57.720 --> 01:09:15.720
Neujahrsvorsätze.

01:09:15.720 --> 01:09:17.720
Und der völlig irritiert.

01:09:17.720 --> 01:09:20.720
Da müsste man Manuel schon selbst fragen.

01:09:20.720 --> 01:09:23.720
Neujahrsvorsätze.

01:09:23.720 --> 01:09:27.720
Es ist wirklich, das ist gut.

01:09:27.720 --> 01:09:29.720
Neujahrsvorsätze.

01:09:29.720 --> 01:09:31.720
Da müsste man Manuel schon selbst fragen.

01:09:31.720 --> 01:09:34.720
So, wir reden jetzt über Sachen, die alt sind.

01:09:34.720 --> 01:09:37.720
Die ich aber tatsächlich auch schon mal eingesetzt habe.

01:09:37.720 --> 01:09:39.720
Mehr dazu gleich.

01:09:39.720 --> 01:09:42.720
Und zwar reden wir jetzt über Image Maps.

01:09:42.720 --> 01:09:46.720
Weil das ja gut zu den Images passt, die wir jetzt gerade schon hatten.

01:09:46.720 --> 01:09:52.720
Und zwar ganz konkret über die beiden Tags Map und Area.

01:09:52.720 --> 01:09:56.720
Die zusammengehören wie Passion Travel.

01:09:56.720 --> 01:10:02.720
Ich muss jetzt hier gerade noch mal meine Notizen umsortieren,

01:10:02.720 --> 01:10:04.720
weil ich merke gerade, es ergibt keinen Sinn.

01:10:04.720 --> 01:10:07.720
Also, was sind Image Maps?

01:10:07.720 --> 01:10:14.720
Ich habe ein Bild und ich möchte darauf Bereiche klickbar machen.

01:10:14.720 --> 01:10:18.720
Also Links auf irgendwas anderes, was auch immer.

01:10:18.720 --> 01:10:22.720
Aber ich möchte jetzt nicht einfach das komplette Bild verlinken,

01:10:22.720 --> 01:10:28.720
sondern ich möchte bestimmte Bereiche des Bildes auf unterschiedliche Ziele verlinken.

01:10:28.720 --> 01:10:32.720
So ein Klassiker, der mir eingefallen ist, was man vielleicht schon mal gesehen hat,

01:10:32.720 --> 01:10:36.720
ist eine Karte, zum Beispiel von den USA oder von Deutschland.

01:10:36.720 --> 01:10:39.720
Und in Deutschland würde man die einzelnen Bundesländer irgendwie,

01:10:39.720 --> 01:10:42.720
kannst du dann verlinken auf die einzelnen, auf Seiten von den einzelnen Bundesländern

01:10:42.720 --> 01:10:45.720
oder eine Karte von den USA, die einzelnen Bundesstaaten.

01:10:45.720 --> 01:10:49.720
Sowas, das ist so ein Klassiker, das hat man vielleicht schon mal gesehen, so ein Element.

01:10:49.720 --> 01:10:53.720
Ob das jetzt am Ende eine Image-Map war, das steht jetzt mal infrage,

01:10:53.720 --> 01:10:57.720
weil Image-Maps haben ein paar Probleme, weil sie einfach sehr alt sind

01:10:57.720 --> 01:11:02.720
und bestimmte Dinge damit einfach nicht gehen, die man jetzt heutzutage erwarten würde.

01:11:02.720 --> 01:11:07.720
Aber fangen wir mal einfach mit dem Map-Tag an.

01:11:07.720 --> 01:11:13.720
Das hat tatsächlich, also man braucht erstmal ein Image, das ist wichtig,

01:11:13.720 --> 01:11:18.720
du hast es gerade schon gesagt, ein Image mit dem Use-Map-Attribut.

01:11:18.720 --> 01:11:24.720
Das gehört da dazu. Und dann habe ich nochmal das Map-Tag mit,

01:11:24.720 --> 01:11:31.720
interessanterweise, es wird verknüpft mit dem Image, was in dem Use-Map mit Raute-Name drinsteht.

01:11:31.720 --> 01:11:37.720
Und jetzt wird es interessant. In den Demos, die ich gefunden habe, steht eigentlich immer das Name-Attribut in dem Map-Tag.

01:11:37.720 --> 01:11:42.720
Das ist quasi, dadurch finden die sich. Aber ich habe ID ausprobiert und es geht auch.

01:11:42.720 --> 01:11:45.720
Also wenn du nur ID benutzt und Name weglässt, geht es trotzdem?

01:11:45.720 --> 01:11:51.720
Nein, wenn ich einfach Name durch ID ersetze, hat es in meinem Browser auch funktioniert.

01:11:51.720 --> 01:11:56.720
Da steht nämlich in der Speck, wenn es ein ID-Attribut gibt, muss es identisch sein mit dem Name, was auch Sinn macht.

01:11:56.720 --> 01:11:58.720
Ich habe es ohne Name ausprobiert.

01:11:58.720 --> 01:12:00.720
Aber dass es auch ohne Name funktioniert, interessant.

01:12:00.720 --> 01:12:06.720
Wir können es gerne nochmal testen. In meiner Demo habe ich, glaube ich, eins dabei, wo ich es umgebaut habe.

01:12:06.720 --> 01:12:08.720
Das können wir gleich nochmal gucken.

01:12:08.720 --> 01:12:12.720
Ich habe nämlich gedacht, dieses Name-Attribut, das wird doch eigentlich für nichts mehr so richtig verwendet.

01:12:12.720 --> 01:12:16.720
Das wurde früher ja auch für Anker-Links verwendet, da haben wir ja schon mal drüber gesprochen.

01:12:16.720 --> 01:12:20.720
Aber mittlerweile gibt es dafür eigentlich immer ID für solche Anwendungsfälle.

01:12:20.720 --> 01:12:22.720
Und mich hat jetzt einfach, ich war einfach am experimentieren.

01:12:22.720 --> 01:12:26.720
Ich wollte einfach wissen, geht das auch mit ID? Und bei mir hat es funktioniert.

01:12:26.720 --> 01:12:29.720
Können wir uns gleich in der Demo nochmal anschauen.

01:12:29.720 --> 01:12:37.720
Und damit hat sich das Map-Tag eigentlich schon fast erledigt, weil das Map-Tag ist eigentlich nur ein Wrapper.

01:12:37.720 --> 01:12:41.720
Für die Areas, die dann da reinkommen.

01:12:41.720 --> 01:12:51.720
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.

01:12:51.720 --> 01:12:58.720
Das letzte Mal, als ich drüber nachgedacht habe, eine Image-Map einzusetzen, habe ich dann relativ schnell gemerkt, dass das nicht responsive geht.

01:12:58.720 --> 01:13:06.720
Also sobald sich die Größe des Bildes irgendwie verändert, passt sich die Map nicht an.

01:13:06.720 --> 01:13:12.720
Also ich habe jetzt noch rausgefunden, wenn man zoomt im Browser, dann funktioniert das durchaus.

01:13:12.720 --> 01:13:16.720
Also so ein Browsersoom, das geht. Da werden auch die Maps nicht vergrößert.

01:13:16.720 --> 01:13:25.720
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.

01:13:25.720 --> 01:13:29.720
Also in meinem Fall, Browsersoom hat es zumindest dann doch berücksichtigt.

01:13:29.720 --> 01:13:35.720
Browsersoom hat funktioniert, aber ich habe, vielleicht habe ich aber auch einen Fehler gemacht, ich will es nicht zu 100% ausschließen.

01:13:35.720 --> 01:13:44.720
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

01:13:44.720 --> 01:13:52.720
und hatte vergessen, das CSS mit zu kopieren, da im CSS stehen width und height Werte für das Bild.

01:13:52.720 --> 01:13:56.720
Und dann waren die Maps komplett verschoben und an der falschen Stelle.

01:13:56.720 --> 01:14:06.720
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,

01:14:06.720 --> 01:14:16.720
aber die Maps sind, also die areas, also die einzelnen Bereiche, die klickbar sind, die werden angegeben durch Pixel-Koordinaten.

01:14:16.720 --> 01:14:24.720
Und da kann ich jetzt nicht sowas sagen wie, wenn ich jetzt, keine Ahnung, Screen Size so habe, dann bitte andere Koordinaten.

01:14:24.720 --> 01:14:28.720
Das könnte ich mit JavaScript irgendwie hinfummeln, aber ich habe da keine Möglichkeit.

01:14:28.720 --> 01:14:37.720
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.

01:14:37.720 --> 01:14:42.720
Vielleicht habe ich einen Fehler gemacht. In meinem Fall hat das mit Width und Height, ist das schon kaputt gegangen.

01:14:42.720 --> 01:14:46.720
Mit Width und Height in CSS für das Bild ist die ganze Geschichte schon kaputt gegangen.

01:14:46.720 --> 01:14:56.720
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,

01:14:56.720 --> 01:15:05.720
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.

01:15:05.720 --> 01:15:17.720
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.

01:15:17.720 --> 01:15:25.720
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.

01:15:25.720 --> 01:15:33.720
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.

01:15:33.720 --> 01:15:39.720
Von daher habe ich das jetzt auch nicht extra aufgeführt, aber stimmt, danke, dass du es noch ergänzt hast.

01:15:39.720 --> 01:15:49.720
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.

01:15:49.720 --> 01:16:00.720
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.

01:16:00.720 --> 01:16:13.720
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.

01:16:13.720 --> 01:16:29.720
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.

01:16:29.720 --> 01:16:41.720
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.

01:16:41.720 --> 01:16:46.720
Oder halt Poly ist tatsächlich eine Freiform, die kann ich selbst definieren.

01:16:46.720 --> 01:16:48.720
Genau, immer alternierend x-y-Werte.

01:16:48.720 --> 01:17:00.720
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,

01:17:00.720 --> 01:17:09.720
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.

01:17:09.720 --> 01:17:19.720
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,

01:17:19.720 --> 01:17:27.720
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,

01:17:27.720 --> 01:17:34.720
weil wir kommen noch auf so ein paar Einschränkungen zu sprechen, die damals auch schon da waren.

01:17:34.720 --> 01:17:43.720
Auf jeden Fall, ich wollte diese Image-Maps, und die waren relativ kompliziert, wollte ich nicht von Hand irgendwie jetzt diese Koordinaten mir raussuchen,

01:17:43.720 --> 01:17:52.720
aber Dreamweaver, vielleicht kennen es der eine oder andere noch, der schöne Editor, ich weiß gar nicht, eine IDE kann man nicht nennen,

01:17:52.720 --> 01:18:02.720
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.

01:18:02.720 --> 01:18:11.720
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.

01:18:11.720 --> 01:18:20.720
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,

01:18:20.720 --> 01:18:29.720
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.

01:18:29.720 --> 01:18:41.720
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.

01:18:41.720 --> 01:18:55.720
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.

01:18:55.720 --> 01:19:20.720
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.

01:19:20.720 --> 01:19:29.720
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.

01:19:29.720 --> 01:19:47.720
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.

01:19:47.720 --> 01:20:02.720
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.

01:20:02.720 --> 01:20:14.720
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.

01:20:14.720 --> 01:20:22.720
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.

01:20:22.720 --> 01:20:38.720
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.

01:20:38.720 --> 01:20:52.720
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.

01:20:52.720 --> 01:21:15.720
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.

01:21:15.720 --> 01:21:36.720
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.

01:21:36.720 --> 01:22:00.720
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.

01:22:00.720 --> 01:22:07.720
Bei Vektoren wird es dann relativ schnell haarig, wenn du dann irgendwie noch so die Biegung davon hast und sowas.

01:22:07.720 --> 01:22:12.720
Wenn man dann mal versucht, in SVG zum Beispiel zu verstehen, was jetzt gerade das D-Attribut, was mir das sagen soll.

01:22:12.720 --> 01:22:34.720
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.

01:22:34.720 --> 01:22:49.720
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.

01:22:49.720 --> 01:23:08.720
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.

01:23:08.720 --> 01:23:35.720
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.

01:23:35.720 --> 01:23:49.720
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.

01:23:49.720 --> 01:24:13.720
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?

01:24:13.720 --> 01:24:25.720
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.

01:24:25.720 --> 01:24:46.720
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.

01:24:46.720 --> 01:25:01.720
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.

01:25:01.720 --> 01:25:14.720
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?

01:25:14.720 --> 01:25:37.720
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?

01:25:37.720 --> 01:25:46.720
Also vom Gefühl her hätte ich jetzt gesagt, die eigentliche Fläche zuerst und dann das, was ausgeschnitten wird.

01:25:46.720 --> 01:26:15.720
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?

01:26:15.720 --> 01:26:20.720
Hm, das kommt drauf an, wie die Shapes davon sind.

01:26:20.720 --> 01:26:22.720
Die Shapes sind einfach, die liegen einfach übereinander.

01:26:22.720 --> 01:26:28.720
Ja, aber, aber, aber stehen die über oder ist die eine komplett in der anderen enthalten oder?

01:26:28.720 --> 01:26:35.720
Die sind, ne, die sind ja nicht, das ist doch egal. Die Reihenfolge muss ja irgendwie determined werden. Okay, ich, ich spann dich nicht.

01:26:35.720 --> 01:26:40.720
Naja, aber das war das, was ich meinte. Also zuerst das eigentliche Viereck und dann das, was ausgeschnitten werden soll.

01:26:40.720 --> 01:26:49.720
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.

01:26:49.720 --> 01:26:53.720
Achso. Es ist nicht wirklich ausgeschnitten. Es liegt nur über dem anderen drüber.

01:26:53.720 --> 01:27:01.720
Ah, okay. So, äh, aber jetzt kommt's. Ich, äh, vielleicht weißt du schon, worauf ich hinaus will.

01:27:01.720 --> 01:27:07.720
Ich hätte jetzt angenommen, instinktiv, naja, wir gehen in der Dornenreihenfolge von oben nach unten.

01:27:07.720 --> 01:27:11.720
Und was ganz unten ist, liegt über dem, so wie man's kennt, ja?

01:27:11.720 --> 01:27:17.720
Also, wenn man HTML-Elemente alle übereinander platziert, über Position Absolut oder sowas,

01:27:17.720 --> 01:27:22.720
dann ist das ganz oben, was ganz, was im Code ganz unten steht.

01:27:22.720 --> 01:27:25.720
Da ist es aber genau umgekehrt.

01:27:25.720 --> 01:27:30.720
Ah, ah, okay. Ich seh's jetzt auch gerade. Als erstes kommt the hole in the red box.

01:27:30.720 --> 01:27:33.720
Und dann, ah, das ist ja verrückt.

01:27:33.720 --> 01:27:40.720
Das ist wirklich, ich hab echt im Standard nochmal nachlesen müssen und da steht es explizit drin,

01:27:40.720 --> 01:27:43.720
es ist in der DOM-Reihenfolge umgekehrt.

01:27:43.720 --> 01:27:45.720
Verrückt.

01:27:45.720 --> 01:27:48.720
Ja, also das fand ich echt abgefahren.

01:27:48.720 --> 01:27:53.720
Und da dachte ich, okay, dann lohnt es sich vielleicht jetzt echt, dass ich da nochmal ein bisschen tiefer eingestiegen bin.

01:27:53.720 --> 01:27:56.720
Und ich bin mir ziemlich sicher, das ist wahrscheinlich schon immer so.

01:27:56.720 --> 01:27:59.720
Und das ist so tiefgreifend, das kannst du auch nie mehr ändern.

01:27:59.720 --> 01:28:03.720
Ne, klar, weil du Rückwärtskompatibilität hast.

01:28:03.720 --> 01:28:06.720
Auf keinen Fall, genau.

01:28:06.720 --> 01:28:12.720
Und dass man Sachen ausspart, indem man nochmal was drüberlegt, was aber kein href-Attribut hat,

01:28:12.720 --> 01:28:17.720
oder in dem Fall dann wahrscheinlich auch kein alt-Attribut, weil das brauchst du dann auch nicht,

01:28:17.720 --> 01:28:20.720
ist irgendwie schon ein abgefahrener Hack.

01:28:20.720 --> 01:28:25.720
Somit kannst du aber halt eigentlich so ziemlich jeden Shape kannst du damit bauen,

01:28:25.720 --> 01:28:28.720
ohne dass du jetzt mehrere zusammenbauen müsstest.

01:28:28.720 --> 01:28:36.720
Du kannst einfach Löcher rein definieren, indem du so einen Void, nenne ich das jetzt mal, drüberlegst.

01:28:36.720 --> 01:28:41.720
Genau. Was allerdings nicht passiert, logischerweise, ist, wenn man jetzt,

01:28:41.720 --> 01:28:45.720
also das finde ich ganz interessant, ich empfehle mal in der Demo, die ich da gebaut habe,

01:28:45.720 --> 01:28:49.720
ich muss dazu sagen, davon ist nur eine Sache von mir, die anderen habe ich mir aus anderen Demos zusammen kopiert,

01:28:49.720 --> 01:28:52.720
ich wollte es aber an einem Ort haben.

01:28:52.720 --> 01:28:57.720
Ich finde es ganz cool, da mal mit Tab und Shift-Tab ein bisschen drumherum zu springen

01:28:57.720 --> 01:29:01.720
und dann quasi die Outlines zu sehen in so Shapes, das finde ich schon abgefahren.

01:29:01.720 --> 01:29:04.720
Und bei dem Quadrat sieht man dann auch, das Innen ist nicht ausgeschnitten,

01:29:04.720 --> 01:29:07.720
er hat einfach den Shape außen, dass man in das sich blicken kann.

01:29:07.720 --> 01:29:10.720
Stimmt, das ist nämlich ein Viereck und nicht, wie man es erwarten würde,

01:29:10.720 --> 01:29:12.720
dann den Ausschnitt auch mit einer Outline versehen.

01:29:12.720 --> 01:29:15.720
Genau, der hat keine Outline, sondern das ist halt tatsächlich einfach nur,

01:29:15.720 --> 01:29:20.720
das ist nicht wirklich ausgeschnitten, da liegt halt nur was oben drüber, was nicht verlinkt ist.

01:29:20.720 --> 01:29:32.720
Also total abgefahren, ich glaube, ein Detail aus der MDN ist mir noch aufgefallen,

01:29:32.720 --> 01:29:36.720
den ich auch irgendwie interessant fand, wo ich nicht so richtig wusste, warum das so ist.

01:29:36.720 --> 01:29:41.720
Und zwar, das Area Element braucht ein Map drumherum,

01:29:41.720 --> 01:29:44.720
aber das muss nicht das direkte Eltern Element sein,

01:29:44.720 --> 01:29:46.720
das darf auch irgendwo weiter oben sein.

01:29:46.720 --> 01:29:51.720
Und da habe ich mich gefragt, was will man denn da dazwischen noch haben, oder warum?

01:29:51.720 --> 01:29:59.720
Also da wäre ich auf Anwendungsfälle gespannt.

01:29:59.720 --> 01:30:04.720
Ja, aber Map kann doch nur Area enthalten.

01:30:04.720 --> 01:30:08.720
Na ja, offenbar kann es auch noch was anderes enthalten.

01:30:08.720 --> 01:30:11.720
Und da frage ich mich halt, was denn?

01:30:11.720 --> 01:30:14.720
Was passiert, wenn ich da noch Text reinschreibe?

01:30:15.720 --> 01:30:18.720
Also der Standard sieht es so vor.

01:30:18.720 --> 01:30:21.720
Ich weiß nicht, ob das jemals jemand ausprobiert hat, keine Ahnung.

01:30:21.720 --> 01:30:23.720
Aber das fand ich noch ein interessantes Detail.

01:30:23.720 --> 01:30:26.720
Und dann wäre ich damit tatsächlich schon durch.

01:30:26.720 --> 01:30:29.720
Eine Sache ist mir noch eingefallen bei dem Rectangle,

01:30:29.720 --> 01:30:32.720
also wo auch wirklich Rectangle unten drin steht als Text,

01:30:32.720 --> 01:30:36.720
da sind die oberen zehn Pixel oder so nur klickbar.

01:30:36.720 --> 01:30:38.720
Und das untere nicht, ist das Absicht?

01:30:38.720 --> 01:30:42.720
Ist das auch zum Demonstrieren von dieser Reihenfolge wahrscheinlich, ne?

01:30:42.720 --> 01:30:44.720
Ähm, genau.

01:30:44.720 --> 01:30:48.720
Da wollte ich noch mal das mit der Reihenfolge,

01:30:48.720 --> 01:30:50.720
und das habe ich nicht dazugeschrieben,

01:30:50.720 --> 01:30:53.720
und dem Ich-spar-etwas-aus-Demonstrieren.

01:30:53.720 --> 01:30:56.720
Ah ja, genau, also links und oben kann ich klicken.

01:30:56.720 --> 01:31:01.720
Und das andere, das Rect liegt aber drüber, ja, okay.

01:31:01.720 --> 01:31:03.720
Ja, genau.

01:31:03.720 --> 01:31:07.720
Ja, wenn die Reihenfolge andersrum ist, macht Sinn.

01:31:07.720 --> 01:31:10.720
Das hat mich irritiert, warum das nicht klickbar ist.

01:31:10.720 --> 01:31:12.720
Ja, es ist anders.

01:31:12.720 --> 01:31:15.720
Ich kenne nichts im Web, was irgendwie so rum ist.

01:31:15.720 --> 01:31:17.720
Es ist immer unten schlägt oben.

01:31:17.720 --> 01:31:19.720
Und da ist es genau umgekehrt.

01:31:19.720 --> 01:31:21.720
Das ist, ja, bemerkenswert.

01:31:21.720 --> 01:31:23.720
Und da bin ich halt nur durch Zufall drauf gestoßen,

01:31:23.720 --> 01:31:26.720
weil ich gedacht habe, hä, bei diesem Rectangle-Demo,

01:31:26.720 --> 01:31:29.720
bei diesem, genau, dieser Kommentar ist mir aufgefallen.

01:31:29.720 --> 01:31:32.720
Hole in the Red Box, warum ist das das erste Element?

01:31:32.720 --> 01:31:34.720
Wie kann das eigentlich sein?

01:31:34.720 --> 01:31:38.720
Zu wichtiger Reihenfolge noch ein Nachtrag zum Sizes-Attribut bei Bildern.

01:31:38.720 --> 01:31:40.720
Das habe ich nämlich, glaube ich, vergessen zu sagen.

01:31:40.720 --> 01:31:42.720
Auch da ist die Reihenfolge wichtig,

01:31:42.720 --> 01:31:45.720
weil der Browser die Sizes durchgeht.

01:31:45.720 --> 01:31:47.720
Das ist ja eine Komma-separierte Liste.

01:31:47.720 --> 01:31:50.720
Und die erste, die ihr findet, die greift.

01:31:50.720 --> 01:31:52.720
Also die erste, die matcht.

01:31:52.720 --> 01:31:54.720
Und alles dahinter wird ignoriert.

01:31:54.720 --> 01:31:56.720
Deswegen ist wichtig, welche Reihenfolge man da wählt,

01:31:56.720 --> 01:31:59.720
um zu gucken, ja, welches greift zuerst

01:31:59.720 --> 01:32:01.720
und welches nimmt an den Browser.

01:32:01.720 --> 01:32:03.720
Das noch als Nachtrag.

01:32:03.720 --> 01:32:04.720
Okay.

01:32:04.720 --> 01:32:05.720
Jetzt habe ich mir jetzt gerade aufgefallen,

01:32:05.720 --> 01:32:07.720
dass wir kein Guild-Teil auf dem Star haben.

01:32:07.720 --> 01:32:09.720
Ja, habe ich jetzt auch gerade erst gesehen.

01:32:09.720 --> 01:32:10.720
Und ich überlege, ob ich gerade ...

01:32:10.720 --> 01:32:11.720
Ach, weißt du, ich mache spontan.

01:32:11.720 --> 01:32:12.720
Machst du spontan was. Sehr schön.

01:32:12.720 --> 01:32:13.720
Ich mache spontan noch eins.

01:32:13.720 --> 01:32:16.720
Dann mache ich den Guild-Teil-Trailer-Teaser-Challenge.

01:32:16.720 --> 01:32:17.720
Ja.

01:32:17.720 --> 01:32:19.720
Also, übrigens, warte.

01:32:19.720 --> 01:32:21.720
Ja, komm.

01:32:21.720 --> 01:32:22.720
Ich wollte nur sagen,

01:32:22.720 --> 01:32:24.720
ich wollte nur irgendwie noch abschließende Worte

01:32:24.720 --> 01:32:26.720
für das Thema finden.

01:32:26.720 --> 01:32:32.720
Wir haben jetzt Map, Area und Image uns heute angeschaut.

01:32:32.720 --> 01:32:35.720
Und das nächste Mal, wenn wir mit der Serie weitermachen,

01:32:35.720 --> 01:32:38.720
das muss nicht notwendigerweise die nächste Folge sein,

01:32:38.720 --> 01:32:41.720
dann werden wir uns Audio, Video und Track vornehmen.

01:32:41.720 --> 01:32:45.720
Das sind nämlich die anderen, die noch zu diesem Block gehören.

01:32:45.720 --> 01:32:47.720
Das wollte ich eigentlich nur noch sagen.

01:32:47.720 --> 01:32:49.720
Was ist mit dem Picture-Element?

01:32:49.720 --> 01:32:52.720
Haben wir da nicht sogar schon mal drüber gesprochen?

01:32:52.720 --> 01:32:55.720
Bei Embedded Content ist das dann ...

01:32:55.720 --> 01:32:57.720
Das kommt dann nach dem Multimedia-Block,

01:32:57.720 --> 01:33:00.720
kommt dann Embedded Content, da ist eine Picture auch dabei.

01:33:00.720 --> 01:33:03.720
Ist ja aber eigentlich von der Reihenfolge her gut,

01:33:03.720 --> 01:33:05.720
weil wir jetzt ja dann quasi Image schon haben.

01:33:05.720 --> 01:33:08.720
Und das baut ja quasi so ein bisschen darauf auf.

01:33:08.720 --> 01:33:10.720
Okay, dann jetzt aber.

01:33:10.720 --> 01:33:11.720
Jetzt.

01:33:11.720 --> 01:33:13.720
Das Geil-Time.

01:33:13.720 --> 01:33:15.720
Geil-Time.

01:33:15.720 --> 01:33:18.720
So.

01:33:18.720 --> 01:33:20.720
Was hast du dir aus dem Ärmel geschüttelt?

01:33:20.720 --> 01:33:24.720
Absolut muss ich vorweg schicken, weil wir hier keine Werbung machen.

01:33:24.720 --> 01:33:27.720
Absolut unbezahlte Werbung jetzt, also nicht jetzt denken ...

01:33:27.720 --> 01:33:32.720
Also, ich war zwischen den Jahren im Musical ...

01:33:33.720 --> 01:33:34.720
In Stuttgart.

01:33:34.720 --> 01:33:35.720
Stage-Musical.

01:33:35.720 --> 01:33:39.720
Ich glaube, wenn man Musicals mag, dann kennt man Stage-Entertainment.

01:33:39.720 --> 01:33:42.720
Zumindest wenn man in Baden-Württemberg lebt und Musicals mag.

01:33:42.720 --> 01:33:45.720
Ja, es gibt auch in Hamburg Stage-Entertainment.

01:33:45.720 --> 01:33:47.720
Die machen das da auch.

01:33:47.720 --> 01:33:50.720
Also, wenn man irgendwie aus der Hamburger Ecke kommt,

01:33:50.720 --> 01:33:52.720
dann kennt man es vielleicht auch.

01:33:52.720 --> 01:33:55.720
Ich war schon mal in einem Stage-Entertainment-Musical.

01:33:55.720 --> 01:33:57.720
Das war damals Tanz der Vampire.

01:33:57.720 --> 01:33:59.720
Aber diesmal war ich in Die Eiskönigin.

01:33:59.720 --> 01:34:00.720
Ah, und?

01:34:00.720 --> 01:34:03.720
Und es war ganz bezaubernd.

01:34:03.720 --> 01:34:05.720
Es war ganz, ganz toll.

01:34:05.720 --> 01:34:10.720
Ich weiß gar nicht, ob ...

01:34:10.720 --> 01:34:12.720
Ja, darf man das irgendwie ...

01:34:12.720 --> 01:34:13.720
Doch, ich darf das.

01:34:13.720 --> 01:34:14.720
Ich darf das gut finden.

01:34:14.720 --> 01:34:16.720
Natürlich darfst du das gut finden.

01:34:16.720 --> 01:34:19.720
Du darfst auch im rosa Tutu tanzen, wenn du möchtest.

01:34:19.720 --> 01:34:23.720
Ich hatte Pippi in den Augen die ganze Zeit.

01:34:23.720 --> 01:34:26.720
Ich habe auch hinterher mich noch mal

01:34:26.720 --> 01:34:28.720
mit der Musik ein bisschen beschäftigt.

01:34:28.720 --> 01:34:34.720
Ich muss sagen, die Stage-Musicals sind teuer.

01:34:34.720 --> 01:34:36.720
Es kostet viel Eintritt.

01:34:36.720 --> 01:34:39.720
Aber es ist jeden Cent wert, meiner Meinung nach.

01:34:39.720 --> 01:34:40.720
Ja, finde ich auch.

01:34:40.720 --> 01:34:42.720
Es ist unglaublich gut inszeniert.

01:34:42.720 --> 01:34:46.720
Es ist ja alles mit Live-Musik.

01:34:46.720 --> 01:34:48.720
Es wird live gesungen.

01:34:48.720 --> 01:34:53.720
Es ist eine Live-Band, Live-Orchester muss man dazu sagen,

01:34:53.720 --> 01:34:58.720
die auf Disney-Filmmusikniveau abliefern.

01:34:58.720 --> 01:35:00.720
Also alle.

01:35:00.720 --> 01:35:02.720
Und dazu wird noch geschauspielert.

01:35:02.720 --> 01:35:08.720
Ich glaube, man kann eine Show nicht perfekter machen als das,

01:35:08.720 --> 01:35:09.720
was ich da gesehen habe.

01:35:09.720 --> 01:35:11.720
Es war einfach ganz toll.

01:35:11.720 --> 01:35:14.720
Und die Musik ist auch ganz toll.

01:35:14.720 --> 01:35:20.720
Ich muss sagen, die englischen Varianten liegen mir manchmal ein bisschen näher,

01:35:20.720 --> 01:35:25.720
wobei ich jetzt auch ganz tolle Kinderschauspielerinnen,

01:35:25.720 --> 01:35:32.720
die Elsa und Anna als Kinder spielen, gar keine so kleine Rolle gehabt.

01:35:32.720 --> 01:35:34.720
Die haben das fantastisch gemacht.

01:35:34.720 --> 01:35:36.720
Die haben auch ganz toll gesungen.

01:35:36.720 --> 01:35:40.720
Die waren so zwischen acht und zehn oder so.

01:35:40.720 --> 01:35:43.720
Und die haben alle ganz toll abgeliefert.

01:35:43.720 --> 01:35:45.720
Es war wirklich ganz, ganz toll.

01:35:45.720 --> 01:35:53.720
Und vielleicht kennt man diejenige, die Elsa jetzt da in Stuttgart spielt,

01:35:53.720 --> 01:35:56.720
oder die Erstbesetzung, Hauptbesetzung von der Elsa.

01:35:56.720 --> 01:36:01.720
Und zwar ist das, die hat mal für Deutschland im Eurovision Song Contest

01:36:01.720 --> 01:36:03.720
den gloriosen letzten Platz gemacht.

01:36:03.720 --> 01:36:04.720
Ah, was?

01:36:04.720 --> 01:36:05.720
Die heißt Anne-Sophie.

01:36:05.720 --> 01:36:07.720
Vielleicht erinnert sich noch jemand dran.

01:36:07.720 --> 01:36:08.720
Okay.

01:36:08.720 --> 01:36:09.720
Warte mal.

01:36:09.720 --> 01:36:11.720
Doch, ich glaube, die hat den letzten Platz gemacht.

01:36:11.720 --> 01:36:12.720
Ist auch egal.

01:36:12.720 --> 01:36:16.720
Die Elsa-Rolle spielt sie fantastisch.

01:36:16.720 --> 01:36:18.720
Und die singt auch unglaublich gut.

01:36:18.720 --> 01:36:20.720
Und das war alles ganz wunderbar.

01:36:20.720 --> 01:36:23.720
Und ich möchte generell dafür Werbung machen.

01:36:23.720 --> 01:36:27.720
Also wenn ihr irgendwie, wenn ihr euch für Musicals erweichen könnt

01:36:27.720 --> 01:36:29.720
und vielleicht irgendwo da aus der Gegend kommt,

01:36:29.720 --> 01:36:33.720
ich kann das nur ganz, ganz, ganz toll empfehlen.

01:36:33.720 --> 01:36:35.720
Es war ganz schön.

01:36:35.720 --> 01:36:38.720
Und das war mein spontan aus dem Ärmel geschütteltes Geilteil.

01:36:38.720 --> 01:36:43.720
Und wenn ich daran denke, kriege ich wieder ein bisschen Pipi in die Augen.

01:36:43.720 --> 01:36:48.720
Es gibt noch was, was für unsere Tochter auch interessant sein könnte.

01:36:48.720 --> 01:36:52.720
Ich glaube, das ist sehr gut inszeniert für jung und alt.

01:36:52.720 --> 01:36:56.720
Und es gibt auch, glaube ich, am Tag zwei Vorstellungen.

01:36:56.720 --> 01:36:58.720
Es gibt eine, die wirklich ...

01:36:58.720 --> 01:36:59.720
Meistens mittags und abends.

01:36:59.720 --> 01:37:00.720
Eine mittags und eine ...

01:37:00.720 --> 01:37:02.720
Also die Abendvorstellung ist auch gar nicht so spät.

01:37:02.720 --> 01:37:05.720
Ich glaube, wann hat die? Um 18 Uhr begonnen oder so?

01:37:05.720 --> 01:37:08.720
Also tatsächlich auch noch, würde ich sagen, kindertauglich.

01:37:08.720 --> 01:37:09.720
Mehr oder weniger.

01:37:09.720 --> 01:37:10.720
Ja.

01:37:10.720 --> 01:37:12.720
Genau.

01:37:12.720 --> 01:37:15.720
Also, es gibt auch eine schöne,

01:37:15.720 --> 01:37:18.720
habe ich dann hinterher gesehen, eine schöne kleine Doku vom SWR.

01:37:18.720 --> 01:37:19.720
Ah ja.

01:37:19.720 --> 01:37:23.720
Die das so ein bisschen begleitet haben bis zur Premiere hin.

01:37:23.720 --> 01:37:25.720
Das ist irgendwie so eine Dreiviertelstunde.

01:37:25.720 --> 01:37:28.720
Das kann ich auch nur empfehlen, sich das mal anzugucken.

01:37:28.720 --> 01:37:30.720
Vielleicht suche ich da den Link gleich noch raus.

01:37:30.720 --> 01:37:33.720
Da sieht man dann auch die Kids so ein bisschen.

01:37:33.720 --> 01:37:35.720
Die sind natürlich doppelt und dreifach besetzt,

01:37:35.720 --> 01:37:38.720
weil die können natürlich nicht, die Kinder zwischen 8 und 10,

01:37:38.720 --> 01:37:42.720
die können nicht wochenlang am Tag zwei Vorstellungen spielen.

01:37:42.720 --> 01:37:46.720
Ist klar, da gibt es Mehrfachbesetzung von den Rollen.

01:37:46.720 --> 01:37:48.720
Und das ist alles ganz bezaubernd.

01:37:48.720 --> 01:37:52.720
Ja, das stand eh noch bei uns auf der Wunschliste.

01:37:52.720 --> 01:37:54.720
Also ich liebe ja Musicals auch total

01:37:54.720 --> 01:37:57.720
und habe zum Beispiel König der Löwen in London gesehen.

01:37:57.720 --> 01:38:00.720
Und da ist halt auch, Nala und Simba

01:38:00.720 --> 01:38:02.720
werden da auch von Kindern am Anfang gespielt.

01:38:02.720 --> 01:38:06.720
Allein schon, wie die singen können in dem Alter schon

01:38:06.720 --> 01:38:08.720
und performen können auf der Bühne, fantastisch.

01:38:08.720 --> 01:38:10.720
Und auch, wer König der Löwen noch nicht gesehen hat,

01:38:10.720 --> 01:38:12.720
das finde ich, lohnt sich auch total.

01:38:12.720 --> 01:38:15.720
Weil da, also da habe ich auch schon Gänsehaut bekommen,

01:38:15.720 --> 01:38:16.720
direkt am Anfang.

01:38:16.720 --> 01:38:19.720
Man kennt das ja, dieses Nancingonia, was da gesungen wird.

01:38:19.720 --> 01:38:22.720
Und dann marschiert halt so ein riesengroßer Elefant

01:38:22.720 --> 01:38:23.720
durch den Gang in der Mitte,

01:38:23.720 --> 01:38:26.720
wo halt in jedem Bein quasi ein Mensch steckt.

01:38:26.720 --> 01:38:29.720
Und dann bewegt der sich so grazil da durch die Menge

01:38:29.720 --> 01:38:31.720
und dann die Gazellen, die da springen.

01:38:31.720 --> 01:38:33.720
Also das ist auch total cool.

01:38:33.720 --> 01:38:35.720
Und weil du Tanz der Vampire gesagt hast,

01:38:35.720 --> 01:38:37.720
auch eins meiner absoluten Lieblingsmusicals.

01:38:37.720 --> 01:38:39.720
Ich glaube, ich weiß nicht, wie oft ich das,

01:38:39.720 --> 01:38:41.720
fünfmal, sechsmal habe ich das bestimmt schon gesehen.

01:38:41.720 --> 01:38:43.720
Finde ich auch super.

01:38:43.720 --> 01:38:45.720
Also ihr könnt euch dann schon mal überlegen,

01:38:45.720 --> 01:38:47.720
wie wird bei einem Musical eigentlich Olaf dargestellt.

01:38:47.720 --> 01:38:49.720
Oh ja, stimmt.

01:38:49.720 --> 01:38:51.720
Und, aber noch viel krasser,

01:38:51.720 --> 01:38:53.720
also Olaf,

01:38:53.720 --> 01:38:55.720
ich nehme jetzt mal nichts vorweg,

01:38:55.720 --> 01:38:57.720
Olaf hat mich nicht so überrascht,

01:38:57.720 --> 01:38:59.720
aber was mich extrem überrascht hat,

01:38:59.720 --> 01:39:00.720
war das Rentier.

01:39:00.720 --> 01:39:02.720
Sven heißt es, glaube ich, gell?

01:39:02.720 --> 01:39:06.720
Das war wirklich sehr gut gemacht,

01:39:06.720 --> 01:39:08.720
muss ich sagen.

01:39:08.720 --> 01:39:10.720
Aber könnt ihr überlegen,

01:39:10.720 --> 01:39:11.720
wenn ihr mal dagegen seid,

01:39:11.720 --> 01:39:13.720
das ist auf jeden Fall eine Reise wert,

01:39:13.720 --> 01:39:14.720
würde ich sagen.

01:39:14.720 --> 01:39:15.720
Sehr schön.

01:39:15.720 --> 01:39:16.720
Dann sagt er uns Bescheid,

01:39:16.720 --> 01:39:17.720
dann gehen wir was trinken noch,

01:39:17.720 --> 01:39:18.720
wenn ihr in der Ecke seid.

01:39:18.720 --> 01:39:20.720
Also falls ihr von weiter her kommt.

01:39:20.720 --> 01:39:22.720
Genau.

01:39:22.720 --> 01:39:23.720
So machen wir das dann.

01:39:23.720 --> 01:39:24.720
Gut.

01:39:24.720 --> 01:39:26.720
Okay, jetzt sind wir am Ende.

01:39:26.720 --> 01:39:28.720
Und deswegen kommt jetzt

01:39:28.720 --> 01:39:32.720
das Ende.

01:39:32.720 --> 01:39:33.720
Das Ende zum Ende.

01:39:33.720 --> 01:39:37.720
Wer hätte es gedacht.

01:39:37.720 --> 01:39:38.720
Ja, Mensch,

01:39:38.720 --> 01:39:41.720
jetzt haben wir wieder Podcast gemacht.

01:39:41.720 --> 01:39:42.720
Ich muss sagen,

01:39:42.720 --> 01:39:45.720
es ist schon ein bisschen entspannter

01:39:45.720 --> 01:39:46.720
als Stream,

01:39:46.720 --> 01:39:48.720
weil nicht so viel gleichzeitig passiert.

01:39:48.720 --> 01:39:51.720
Und ich bin ja eh leicht abgelenkt.

01:39:51.720 --> 01:39:53.720
Währenddessen ja.

01:39:53.720 --> 01:39:55.720
Die Vorbereitung ist deutlich intensiver.

01:39:55.720 --> 01:39:56.720
Das stimmt.

01:39:56.720 --> 01:39:59.720
Aber insgesamt finde ich jetzt,

01:39:59.720 --> 01:40:02.720
war das echt sehr entspannt.

01:40:02.720 --> 01:40:04.720
Wir haben es schon länger nicht mehr gemacht.

01:40:04.720 --> 01:40:05.720
Vor allem nicht zu zweit.

01:40:05.720 --> 01:40:08.720
Mit Gast muss man sich ja nochmal anders konzentrieren.

01:40:08.720 --> 01:40:09.720
Aber ja, macht echt Spaß.

01:40:09.720 --> 01:40:10.720
Und ich freue mich da auch drauf,

01:40:10.720 --> 01:40:11.720
dass wir jetzt dieses Jahr gesagt haben,

01:40:11.720 --> 01:40:13.720
wir machen mal wieder ein bisschen hier Back to the Roots

01:40:13.720 --> 01:40:15.720
und machen mehr Podcast.

01:40:15.720 --> 01:40:16.720
Und ich hoffe,

01:40:16.720 --> 01:40:20.720
ihr freut euch darüber genauso wie wir.

01:40:20.720 --> 01:40:24.720
Ja, ihr habt ja keine Wahl.

01:40:24.720 --> 01:40:25.720
Naja, abschalten.

01:40:25.720 --> 01:40:26.720
Achso, stimmt.

01:40:26.720 --> 01:40:28.720
Peter Lustig ist auch noch da.

01:40:28.720 --> 01:40:29.720
Ja, genau.

01:40:29.720 --> 01:40:32.720
Also ja, vielen, vielen Dank schon mal fürs Zuhören,

01:40:32.720 --> 01:40:34.720
falls ihr es bis hierher geschafft habt.

01:40:34.720 --> 01:40:37.720
Wir würden uns natürlich auch wie immer sehr freuen,

01:40:37.720 --> 01:40:40.720
wenn ihr uns auf Podcast-Portalen bewertet.

01:40:40.720 --> 01:40:43.720
Wir versuchen das auch immer zu lesen.

01:40:43.720 --> 01:40:45.720
Wie schon vorher gesagt,

01:40:45.720 --> 01:40:47.720
wir freuen uns auch über jegliche Unterstützung

01:40:47.720 --> 01:40:49.720
unter www.sev.de-unterstützen

01:40:49.720 --> 01:40:51.720
findet ihr viele, viele Wege, wie ihr das tun könnt.

01:40:51.720 --> 01:40:54.720
Es muss auch gar nicht irgendwie finanziell oder so sein,

01:40:54.720 --> 01:40:56.720
sondern eine Bewertung auf Podcast-Portalen

01:40:56.720 --> 01:40:58.720
hilft uns ungemein.

01:40:58.720 --> 01:41:02.720
Oder erzählt anderen Leuten, dass es uns gibt.

01:41:02.720 --> 01:41:04.720
Das würde uns auch sehr freuen.

01:41:04.720 --> 01:41:06.720
Und wie schon gesagt,

01:41:06.720 --> 01:41:08.720
wir würden uns auch über Kommentare freuen zur Folge,

01:41:08.720 --> 01:41:10.720
falls wir irgendwo Quatsch erzählt haben

01:41:10.720 --> 01:41:12.720
oder falls ihr irgendwo nur sagen wollt,

01:41:12.720 --> 01:41:16.720
ah, coole Folge, sowas darf man auch schreiben.

01:41:16.720 --> 01:41:18.720
Ja, und dann bleibt mir eigentlich

01:41:18.720 --> 01:41:20.720
gar nichts weiteres hinzuzufügen.

01:41:20.720 --> 01:41:22.720
Ja, ich habe auch nichts mehr groß zu sagen.

01:41:22.720 --> 01:41:24.720
Ich starte einfach schon mal das Outro.

01:41:24.720 --> 01:41:26.720
Vielen Dank fürs Zuhören

01:41:26.720 --> 01:41:28.720
und ja, wir hören uns jetzt wieder öfter.

01:41:28.720 --> 01:41:30.720
Macht's gut. Bis dann.

01:41:30.720 --> 01:41:32.720
Ciao.

01:41:32.720 --> 01:41:34.720
Ciao.