Wo wir sind, ist vorne, Folge 44. Heute geht's um die Stasi des Web-Developments. Aber pssst.
Herzlich willkommen bei Wo wir sind, ist vorne. Frontend-Fakten-Frotzeleien.
Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.
Hallo.
Hey, hey, hey, du. Hey, du.
Möchtest du ein A kaufen?
Was, ein A kaufen?
Pssst, genau.
Nicht so laut.
Ja, und damit willkommen zu einer neuen Folge.
Ja, oder so. Irgendwie sowas in der Richtung heute, ne?
Wir lösen das nachher noch auf, um was es geht.
Wir sind spät dran. Ja, ihr könnt es in den Shownotes ja dann schon lesen, wenn es veröffentlicht wird. Sollen wir es jetzt schon sagen? Oder sollen wir die Leute noch lesen?
Nee, sag mal beim Thema. Lassen die noch ein bisschen verwirrt zurück.
Okay.
Okay, dann, ja, schön, dass ihr wieder dabei seid. Und dann kommen wir doch direkt zum Bierchen.
Zum Bier, ja. Bierchen ist gut. Also, die Flasche ist irgendwie sehr schwer und ist ein 0,5er. Das ist das letzte HörerInnen-Bierchen. Ich weiß gar nicht mehr, wer uns das geschickt hatte.
Ich hab gar keins mehr.
Jedenfalls ist das das letzte, was ich noch aufgehoben hab über den Sommer für die dritte Staffel. Und das ist ein Duckstein-Rot-Blond-Original auf Buchenholz gereift.
Das hab ich, davon hab ich schon viel gehört.
Ja, okay, so sieht's aus.
Nämlich der Leute aus, ich glaube der Nikolaus Wörl aus Methodisch-Inkorrekt, vom Methodisch-Inkorrekt-Podcast, der trinkt das, glaube ich, öfter.
Ah, okay. Also, da bin ich mal sehr gespannt. 1640 steht hier drauf.
Ich weiß nicht, ob die Flasche ist, nicht von 1640.
Auf jeden Fall Duckstein. Ja, warum eigentlich nicht?
Und es hat ...
Ist ja braun, also ...
Es hat 4,9 Prozent.
4,9. Ja, ich bin wieder langweilig unterwegs.
Ich hab wieder ein kleines Wolf.
Und ich hab das aber ... Ich war da jetzt aber auch noch mal in dieser Brauerei-Gaststätte die Tage.
Und es ist ... Von denen würde ich ... Ich glaube, ich muss mal gucken, ob es das auch in Flaschen gibt.
Das Kreusen von denen schmeckt auch gut. Kreusen ist so eine komische Karlsruher Erfindung.
Keiner so genau weiß.
Ja, egal, was es eigentlich ist.
Was es eigentlich ist, aber es schmeckt ganz gut.
Okay.
Es gibt vor, Bier zu sein, ja.
Okay, dann machen wir mal ASMR-Öffnung. Also, ich fang mal an.
Ich hab heute wieder einen richtigen Glaschniff, ne?
Aha.
Das ist ja gut.
Hier ...
Pass auf, Konstantin, heute machen wir das ...
Das schäumt schon wieder.
Heute machen wir das mal synchronisiert über das Portal.
Ja, du brauchst nichts machen.
Wir stoßen jetzt an, aber du brauchst nichts machen.
Ja, okay.
Also dann, zum Wohl.
Ah, sehr schön.
So.
Bevor das wieder so vermurksklingt hier.
Also, ich bin gespannt, ob ich diese Buchenholznote überhaupt rausschmecke.
Ich bin mal wieder erkältet, wie so oft.
Und schmeckt nicht so viel, aber ich probier's mal.
Ja, also, meins schmeckt wie immer.
Ganz gut.
Es ist interessant, wenn man nicht wirklich so die Aromen rausschmeckt.
Es hat so ein bisschen was von Lakritz.
Ah.
Aber mehr schmeck ich auch nicht, wirklich.
Okay.
Ist eigentlich schade.
Ja, schade.
Also, dann müssen wir das vielleicht noch mal probieren.
Ja, ich glaube auch.
In anderem gesundheitlichem Zustand.
Und ich würd's dann auch gern mal probieren.
Und ich weiß jetzt, wie gesagt, nicht genau, ob's genau dieses Duckstein ist, was der
Nikola Swirl trinkt.
Aber es ist auf jeden Fall eins.
Übrigens, ja, methodisch inkorrekt, sehr guter Podcast zum Thema Physik.
Kann ich auf jeden Fall hier an der Stelle empfehlen.
Gut.
Okay.
Haben wir Bier und Einleitung hinter uns gebracht.
Ähm, und dann, äh, würden wir weitergehen zu ...
Ich hab vorhin noch mal umsortiert.
Ja, ich hab's grad gesehen.
Nicht, dass du verwirrt wirst, weil, äh, es kam, es kam noch was dazu von mir.
Und deswegen, ich wollt das, äh, ein bisschen abwechselnd machen können.
Genau.
Weil ich hab jetzt ganz, ganz spontan, und das ist auch das, warum wir ein bisschen später
jetzt aufnehmen, das wisst ihr natürlich nicht, aber der Konstantin, der musste noch ein bisschen
warten.
Ähm, weil es begab sich, äh, in meinem Umfeld, dass ein Airtag verloren ging.
Wir haben ja schon mal über Airtags gesprochen, äh, die Apple-Dinger, mit denen man, äh,
die man an Schlüssel machen kann und so, mit denen man Sachen wiederfinden kann.
Interessanterweise ist aber nur das Airtag verloren gegangen, nicht das, was dran hing.
Ach.
War aber trotzdem interessant, ähm, dann zu gucken, findet man denn das jetzt wieder?
Aha.
Und dann, ähm, es war nämlich auch nicht klar, wo ist es verloren gegangen?
Und, äh, man hat aber auf der Karte dann tatsächlich gesehen, ähm, ja, das ist irgendwo
gesehen worden in der Karlsruher Weststadt.
Mhm.
So.
Und zwar auch mit einem Punkt, mit einer Straße und Hausnummer.
Ähm, genau.
Und das war dann, das war dann schon, okay, Straße, Hausnummer, Haus, also der, der, der
Böbel, der war auf der Karte schon so ein bisschen, dass man so dachte, das ist wahrscheinlich
in diesem Haus.
Und dann war jetzt so die Hausnummer.
Und sagt er euch aber auch nix, äh, die Adresse irgendwie, oder?
Nee, nee, überhaupt nicht, überhaupt nicht.
Und, ähm, jetzt war die Frage, ist das jetzt wirklich, kommen wir da jetzt wieder dran
oder liegt das jetzt irgendwo im Busch, findet man es da wieder oder ist es tatsächlich bei
jemandem zu Hause, weil das ist, glaube ich, relativ nutzlos, wenn so ein AirTag einmal
registriert ist auf ein Gerät.
Äh, ich glaube, das ist sinnlos, da kannst du da nix mit anfangen.
Also, ich weiß nicht, ob es da irgendwie findige Hacker gibt, die das dann irgendwie, ähm,
entsperren können, aber ich glaube, ich glaube aber, das ist ja auch bei iPhones ziemlich
schwierig, ähm, wenn die auf irgendeinem Account registriert sind.
Also, Apple, die geben, die geben sich da relativ, äh, große Mühe, glaube ich, dass das nicht
so einfach geht.
Ähm, ja, und dann, ähm, haben wir halt einfach mal, also wir sind so ein bisschen rumgelaufen,
da gab es auch irgendwie so einen Innenhof, ähm, da war nichts und, ähm, ich weiß nicht,
wer das kennt mit dieser Woist-App und den AirTags, ähm, es ist so, dass, äh, generell mal
angezeigt wird, wenn man irgendwie da, da an diesem Punkt ist, ja, lauf mal noch ein bisschen
weiter rum, ich hab keine Connection, das ist so dieser, dieses, ich hab noch keine Verbindung
zu dem Gerät-Screen, das hatten wir eigentlich die ganze Zeit, dann haben wir gedacht, ich
glaube, wir müssen mal in das Haus rein, so. Und dann halt mal an verschiedenen Klingeln
geklingelt, dann hat auch tatsächlich jemand aufgemacht und den haben wir dann auch mal
gefragt, ja, ob er das zufällig hat, ähm, hat er nicht. Und, äh, dann sind wir noch, haben
wir gedacht, okay, ich hab auch vor kurzem festgestellt, ich hab meinen Schlüssel mal
gesucht und der war tatsächlich bei mir in der Wohnung, aber auf der anderen Seite, selbst
da war die Entfernung schon zu groß.
Oh, okay.
Und dann hab ich dann auch gedacht, okay, gut, und keine Ahnung, wie viel, also du,
du warst ja schon mal bei mir, also ich war bei mir in der Küche, äh, und der Schlüssel
lag im Bad und die haben, haben sich nicht gefunden.
Das reicht schon nicht, ich meine, das ist ja nicht so ein Riesenweg.
Ich glaube, es ist Bluetooth, ähm, und ich weiß auch, dass, wenn ich mit den Kopfhörern
in meinem Bad lauf, äh, dass da die Verbindung dann schon schlecht wird.
Okay.
Ähm, also ich nehme an, das ist einfach die normale Bluetooth-Reichweite und dann haben wir,
sind wir echt in dem Haus irgendwie hoch und runter und haben irgendwie so das, das Handy
an die Türen gehalten und tatsächlich, interessanterweise neben dem, der uns aufgemacht hat, war dann
plötzlich, ähm, du bist sehr weit entfernt.
Und ich dachte so, okay, da stand eben schon, lauf irgendwie noch ein bisschen rum, aber dieser
Screen ist jetzt anders, wieso sollte der sich verändern?
Ähm, und dann so, hm, lassen wir doch mal bimmeln, vielleicht geht es ja jetzt.
Und das ging dann und dann haben wir tatsächlich aus dieser Wohnung ein Bimmeln gehört.
Und dann haben wir da geklingelt und da war tatsächlich auch jemand zu Hause.
Und, ähm, ich unterstelle auch niemandem irgendwie, dass das, äh, dass es wohl einfach runtergefallen
lag irgendwo und jemand neugierig ist, hat es mitgenommen und hat sich gedacht, da ist irgendwie
ein Apfel drauf, da gucken wir mal, was es ist.
Ich glaube, so in diese Richtung muss das gelaufen sein.
Und dann haben wir gesagt, ja, wir haben hier irgendwie eine Schlüssel, war auch alles
ganz nett, hier so, äh, Schlüsselanhänger irgendwie verloren und, äh, habt ihr den
vielleicht und, äh, wir lassen es noch mal bimmeln.
Und, ah ja, tatsächlich, ah ja, der hat, hat, derjenige, der das gefunden hat, war, war gar
nicht anwesend, sondern gesagt, ja, klar, kein Problem hier, bitteschön.
Also, es hat tatsächlich geklappt.
Krass.
Das Ding wieder zu bekommen.
Ähm, ich meine, das wäre jetzt, naja, ich wollte gerade sagen, wäre kein schlimmer
Verlust gewesen.
Ich meine, der Schlüssel war halt nicht dran, aber das Ding hat halt schon Geld gekostet.
Und jetzt hat sich auch bewiesen, man kann es tatsächlich wieder finden.
Ähm, also zumindest in der Stadt.
Ähm, ja, das war jetzt, äh, also es hat sich jetzt, ich hab's ja noch nie, äh, im Ernstfall
ausprobiert, ich hab nur halt mal, äh, es irgendwo hingelegt und dann geguckt, find ich's
wieder und, äh, es hat tatsächlich geklappt jetzt, also, ohne dass man wusste, wo es ist.
Das ist doch gut zu wissen.
Es war jetzt aber auch echt Glück, weil, ähm, wenn, ich, ich glaube, wenn das Ding jetzt
in dieser Wohnung weiter weggelegen hätte von der Eingangstür, in, in, in einem, in einem
Raum, der noch weiter entfernt ist, ich glaube, dann hätten wir's nicht gefunden.
Nee, dann wär's zu weit weg, also, oder zu dicke Wände, irgendwie dicker Altbau, keine
Ahnung, ähm, ja, aber das nur so, äh, als, als schöne kleine Erfolgsgeschichte, erst mal
so, fuck, da muss man jetzt irgendwie was machen, müssen wir möglichst schnell, ähm, und
ja, hat am Ende geklappt, fand ich gut.
Sehr gut.
Ja, das dazu.
Ja, äh, mein nächster Retro-Punkt ist einfach nur so ein lustiges Ding, äh, haben wahrscheinlich
eh schon alle gesehen, aber, äh, Tim, Tim Cook, auch bekannt als Tim Apple, ähm, hat auf
Twitter was auf Deutsch gepostet und nicht nur auf Deutsch, sondern auf Bayerisch und zwar
schön, dass wir wieder einmal gemütlich zusammensitzen.
So happy to be back to Oktoberfest, Prost.
Äh, und zwar, also nicht nur genug, dass es auf, auf Deutsch dasteht, auf Bayerisch, es
ist ein Bild, ähm, mit Kai Pflaume, Tim Cook und Kai Pflaume, die sich, äh, zu posten
auf einem Bild, ähm, ja, die anscheinend irgendwie sich kennen.
Ich glaube, mir fällt grad der Name nicht ein, aber der, der Links von Tim Cook ist, glaube
ich, auch einen Apple-Mitarbeiter.
Okay.
Den hab ich, glaube ich, in, in Keynotes irgendwie schon mal gesehen.
Ähm, und die, die Dame, die noch drauf ist, ist wahrscheinlich irgendwie die Freundin
von Kai Pflaume, oder was weiß ich, keine Ahnung, ähm, aber ja, tatsächlich, aber Kai Pflaume,
das ist ja echt, der altert ja gar nicht.
Nee, nee, krass, ne?
Der ist doch schon hunderttausend Jahre alt und, äh, der sieht auf dem Bild aus, so wie
schon, wie schon immer.
Wie schon immer, wie Kai Pflaume halt aussieht, ja.
Das gibt's gar nicht.
Ja, aber, ist, äh, ja, fand ich einfach irgendwie lustig, diese Connection und dann schreibt
der auf, auf, auf Bayerisch.
Das hat er nicht selbst, das hat dem doch der Kai Pflaume.
Wahrscheinlich hat der Kai ihm das eingetippt, ja.
Aber ist, ist, ist, ist der, ist der Kai Bayer, weiß man das?
Das, das muss ja, das ist ja, das ist ja schon, das ist ja schon sehr gekonnt, bayerisch,
oder?
Ich glaub einfach, Kai Pflaume ist halt einfach überall.
Kai Pflaume ist, Kai Pflaume ist einfach überall.
In der Halle an der Saale geboren.
Ah ja, dann eher nicht so.
Nee, Sachsen-Anhalt ist das.
Äh, okay, ja, aber das ist, ja, das ist, das ist echt witzig.
Und passt auch gut zum Apple-Thema, also danke, alles richtig.
Genau, also, wollte ich vorhin den Übergang machen, aber jetzt ist der Übergang von deinem
Thema zu, zu Tim Cook, äh, genau.
Genau.
Und das, das war's auch schon dazu.
Gut, ich hatte, wir bleiben, wir bleiben bei Apple.
Wir bleiben nochmal bei Apple.
Ja, wir bleiben nochmal bei Apple, ähm, weil VoiceOver ist ja der, ist ja der Screenreader,
der, ähm, auf Apple-Geräten mit fest eingebaut ist, also tatsächlich, ich glaube sogar, äh,
auf so ziemlich allen, die irgendwie ein Bildschirm haben, also auf Mac gibt's den, auf
dem iPad gibt's den, auf dem iPhone gibt's den, ähm, genau, und da hab ich jetzt gerade
einen Test mitgemacht, das ist halt, da ich ja Mac benutze auch zum Entwickeln, ist das
so mein, äh, Screenreader, mit dem ich normalerweise die Sachen als erstes ausprobiere.
Ähm, auch wenn ich weiß, dass das wahrscheinlich nicht der am häufigsten genutzte Screenreader
ist, ich hab, hab so, so im, im, im Blick, dass das wahrscheinlich NVDA auf Windows ist
momentan und JAWS ist auch noch weit vorne, ähm, aber egal, das ist halt so das, womit
ich zuerst teste und ich hatte da echt so einen richtigen What-the-Fuck-Moment und ich hab
das auch in den Code-Pen gepackt und ich konnte es mir immer noch nicht so richtig herleiten.
Ich hatte, hatte es zu tun mit einer Tabelle, ähm, in der VoiceOver, auch, auch wenn das,
ich weiß, das HTML davon ist nicht perfekt, aber das ist leider generiert von einem Skript,
das konnte ich jetzt nicht verändern, ähm, ich wollte aber verstehen, ähm,
und zwar nach der zweiten, in der zweiten, äh, Zeile, ab der zweiten Zeile wird der
Inhalt der Tabelle komplett übersprungen.
Hm.
Wird einfach, es tut so, als ob da nichts mehr kommt.
Ähm, geht dann einfach zum nächsten Element nach der Tabelle weiter, ähm, und das sogar
auch, also ich hab erst gedacht, naja, das ist jetzt wahrscheinlich irgendwie per CSS, ist
da irgendwie was ausgeblendet oder so.
Nee, die Tabelle ist auch, auch wenn gar kein CSS dabei ist, passiert das.
Hm.
Ähm, es ist ein Konstrukt aus mit T-Head und T-Body und TH-Elementen und innen drin sind
nochmal Diffs und mit irgendwelchen Tab-Indexen und A-Elementen, die keine Links sind und so.
Und ich hab, ich weiß, wenn ich das Ding jetzt komplett runterstrippe und diese ganzen Spezialelemente
rausnehme, dann funktioniert's.
Aber ich hab noch nicht den einen Teil isolieren können.
Ich hab das Gefühl, es ist eine Kombination aus verschiedenen Dingen.
Ähm, also ich hab auch, äh, ein Tweet, äh, wo ich mal gefragt hab, vielleicht weiß ja
irgendjemand, woran's genau liegt.
Mhm.
Ähm, ich hab angefangen runterzustrippen und es muss eine Kombination aus verschiedenen
Dingen sein, nicht nur eins.
Weil ich hab so ziemlich alles einzeln schon rausgenommen.
Also vielleicht, vielleicht hab ich auch genau die eine Sache vergessen, äh, zu ändern.
Aber ich hab schon extrem viel damit rumgespielt und ich kann das Verhalten nicht ändern,
außer ich, ähm, schreib die Tabelle im Prinzip komplett neu, ohne, also mach nur Text rein,
dann geht's, ja.
Und das ist, meiner Meinung nach, muss das eigentlich ein Bug im Screenreader sein.
Ähm, aber, äh, würde mich freuen, wenn jemand da draußen das hört und, ähm, meckert mit
VoiceOver oder sich damit vielleicht auskennt und das benutzt.
Gerne mal meine CodePen-Demo aufmachen, die in dem Tweet drin ist, ähm, und, und mal nachschauen.
Also wenn du schaffst, da ein minimal reproduzierbares Beispiel draus zu machen, dann am besten ein
Backticket erstellen, ne?
Genau.
Genau, das, das wär dann das Nächste, was ich auf jeden Fall, äh, vorhabe.
Aber bisher weiß ich noch gar nicht genau, woran's liegt.
Ich kann's noch nicht, ich kann's noch nicht richtig, äh, festzuhren.
Genau.
Das dazu.
Dann sind wir jetzt, glaub ich, fertig mit Apple.
Okay, ähm, ich hab noch mal so einen kleinen Rückgriff auf die letzte Property der Woche.
Da hattest du was vorgestellt, so ein, so ein Range-Slider mit solchen Tick, äh, Dingern.
Und da hast du so eine Data-List benutzt, um diese verschiedenen Schritte da festzulegen.
Und ich hatte heute einen Fall, da hätte ich das gebrauchen können, äh, für einen Number-Input.
Weil ich da bestimmte Nummern, die schon vergeben sind, da gar nicht drin haben will.
Also nicht mit Ticks, ne?
Nicht, nicht visuell, aber, aber so eine Data-List.
Und ich wusste gar nicht, ob das, ob das da auch geht.
Und hab ich einfach mal ausprobiert und, äh, sieh da, funktioniert.
Also ich kann da auch eine Data-List festlegen.
Und dann hab ich, wenn ich diese, diese Pfeilchen hoch und runter, äh, die es da gibt, dann springt das auch zu den einzelnen Schritten.
Und, ähm, hab ich auch eine kleine, ähm, deine Demo umgebaut.
Und, äh, da kann man auch, wenn man, wenn es ganz leer ist, kann man auf dieses schwarze Pfeilchen klicken.
Und dann sieht man wirklich alle Schritte aufgelistet.
Hier 0, 10, 20, 30.
Und wenn ich auf die Pfeile hoch runterklicke, dann springt das echt zu den, zum nächsten Schritt.
Verrückt? Das wusste ich ja auch nicht.
Also es ist, äh.
Ich kann trotzdem händisch, äh, kann ich andere Werte eingeben.
Ich weiß nicht, was dann passieren würde, wenn ich das jetzt noch mit Validation irgendwie mache.
Müsste man mal ausprobieren.
Ähm, genau.
Aber es ist schon mal so als, als grobe Hilfe, dass ich nicht auf die Idee komme, vielleicht was anderes einzugeben.
Ist doch schon mal ganz cool.
Ja, und alles nativ im Browser bin ich ja immer.
Genau.
Großer Fan von.
Coole Sache.
Das hast du einfach, das hast du einfach durch, durch Probieren rausgefunden.
Genau.
Also ich hab dann einfach, ich hab dann gedacht, ach der Moritz hatte das doch mit dieser Step-List, mit diesen Data-List-Gedöns.
Ähm, das hab ich an sich auch schon mal versucht, äh, benutzt für, für so, ähm, Suchvorschläge quasi, ne?
Also dass du was eingibst und dann macht's eine Data-List, äh, wo du dann unten auswählen kannst.
Und, ähm, aber mit den Steps, ob das bei, bei Input, äh, Type-Number funktioniert, das wusste ich nicht.
Einfach ausprobiert.
Ich hab also deine Demo genommen, hab einfach, äh, äh, äh, äh, den, den Range-Lider ersetzt durch Type-Number.
Und, ähm, siehe da.
Hast du das in verschiedenen Browsern getestet?
Ähm, ich hab es, ich weiß gar nicht, ob ich es von Firefox dann auch getestet hab, also, äh, Chromium auf jeden Fall.
Äh, Firefox kann ich auch mal kurz gucken. Äh, Firefox macht's auch.
Ja.
Ah, ja cool.
Das, ah, wieder.
Und, und das zufällig finden, das find ich ja am allergeilsten eigentlich. Also nicht irgendwie jetzt in der Doku irgendwo so, na, probier mal aus, vielleicht geht das ja so. Oh, es geht so. Äh, das ist dann meiner Meinung nach, ähm, ein gut geschriebene, ich weiß gar nicht, ist das eine gut geschriebene Spezifikation oder auf jeden Fall eine gute Umsetzung?
Ja, ich weiß auch nicht. Also, klar, man könnte denken, ja gut, wenn es, äh, generell für Input-Elemente funktioniert, aber ich find halt, Number ist halt schon immer so ein spezielles Ding, ne, mit diesem hoch- und runterklicken und, äh, hab mich überrascht auch positiv, dass das funktioniert.
Ja, dieses hoch- und runterklicken, das hat sich mir noch nicht erschlossen, wofür man das wirklich braucht. Ähm, da können wir ja vielleicht nochmal überlegen, wofür das ist.
Ja, zumal das nicht mal mit der Tastatur, wenn ich diese Step-Liste da jetzt hab, dann spring ich nur in diese Liste, wo nur ein Element drin ist, also, nicht mal, nicht mal mit hoch- und runter kann ich da jetzt irgendwie das triggern. Ja, keine Ahnung, warum man das, äh, warum man das benutzt.
Ja, generell, ja, dieses hoch- runter, das ist, äh, vielleicht ist es, aber wobei, ich kann auch diese Pfeile, die lassen sich auch nicht antappen. Das heißt, ich kann auch mit einem Screenreader oder so, kann ich die gar nicht, kann ich gar nicht bedienen mit Eingabehilfen.
Ich kann aber mit, ähm, wenn ich mit, wenn ich mit, wenn ich reintappe, wenn ich das Element fokussiert habe, kann ich auch mit Pfeiltasten hoch und runter die Schritte auswenden.
Also, in Firefox geht es nicht.
Äh, ich hab's jetzt gerade in Chrome, da geht's, glaube ich.
Ah ja, in Chrome funktioniert das so, wie man sich's vorstellt, ja.
Naja, wir werden's, äh, wahrscheinlich nie erfahren.
Aber es funktioniert nicht.
Wahrscheinlich aus Versehen implementiert.
Genau, es sollte gar nicht funktionieren, aber, ja.
Jo.
Ja, ähm, dann noch, äh, kleine, kleine Rückschau, ähm, auch nochmal zu Twitter.
Wir haben eine kleine Umfrage gemacht, weil wir, äh, in der letzten, in der letzten Sendung, im letzten Stream?
Im letzten Stream haben wir es gesagt.
Im Stream, glaube ich, äh, angekündigt haben, dass wir auf die nächste Beyond-Tellerand-Konferenz gehen werden.
So, also Konstantin und ich, so wir beide, äh, so als Podcast.
Und dann haben wir uns überlegt, ja, wenn wir da eh schon zusammen hingehen, äh, und dann noch irgendwie die, die passenden T-Shirts anhaben, sodass ihr uns da auch finden könnt, ähm, dann könnte man ja da auch noch was machen, irgendwie so.
Und dann, äh, und dann, äh, und dann haben wir einfach mal eine Umfrage gemacht bei Twitter und, äh, mal gefragt, so ein paar Sachen in den Raum geworfen, was wir denn da machen sollen.
Wir haben mal geschrieben, Shirts mitbringen, HörerInnen treffen, Livestream vor Ort oder Podcast aufnehmen.
Ähm, und gewonnen hat auf jeden Fall, ich weiß nicht, ist es komisch, komisch sowas gegeneinander antreten zu lassen.
Also man sieht auch schon an den Ergebnissen, ähm, dass die meisten Sachen davon irgendwie populär sind.
Die Abstände sind nicht so groß, weil HörerInnen, HörerInnen treffen hat gewonnen mit 33,3 Prozent.
Ähm, aber danach kommt schon Podcast aufnehmen mit 28,6, Livestream vor Ort 23,8.
Und gut, Shirts mitbringen, die Shirts sind irgendwie nicht so beliebt.
Nee, nee.
Keine Ahnung, ähm, dann bringen wir sie, ähm, aber vielleicht sind ja alle Sachen einfach beliebter, ne, also.
Wir bringen einfach mal, ja, ich find's auch, ja, bei den Umfragen lässt man natürlich Sachen gegeneinander antreten, aber HörerInnen treffen, das wäre auch das jetzt gewesen, wo ich gesagt hätte, das, äh, bietet sich total an.
Das kann man auf jeden Fall machen, klar.
Hätten wir auch, wenn es nicht gewonnen, hätte wahrscheinlich gemacht, ne, also.
Hätten wir, ja, wahrscheinlich.
Wir sagen ja nicht so, ach so, äh, nee, gib bitte woanders hin.
Wir wollen jetzt nicht mit dir sprechen.
Ja, wir haben ja auch geschrieben, äh, wenn es ein Leben- und Wunschkonzert wäre, stand in dem Tweet, ähm, ähm, äh,
und wir würden uns natürlich offen halten, einfach was komplett anderes zu machen, als da das Ergebnis rauskommt.
Aber, ähm, nee, wir wollten einfach mal so, so, äh, eure Meinung einfangen, das haben wir, haben wir getan, ähm, und, äh, das werden wir auf jeden Fall dann machen.
Also, wir werden das noch rechtzeitig ankündigen, das ist ja erst im April, glaube ich.
Das machen wir auch einfach alles.
Das machen wir auch einfach alles, genau.
Wir treffen uns mit euch dort und, äh, machen einen Livestream vor Ort.
Ich glaube, das Komplizierteste, zumindest, wenn wir unserer Qualität treu bleiben wollen, ist Podcast.
aufnehmen.
Ähm, ja, da müssten wir hier die Interface und so weiter mitschalten.
Da muss man, da müssten wir ein bisschen mehr Equipment mitnehmen.
Äh, Livestream würde ich knallhart einfach mit dem Handy machen.
Ja, ja.
Äh, mit, mit Twitch irgendwie, einfach dann so, äh, mit, mit Selfiesticks, sowas besitze ich tatsächlich.
Ja, ohne, ohne Overlay und was weiß ich.
Ohne, ohne alles einfach, äh, würde ich einfach mit dem Handy live gehen.
Das ist, braucht man eigentlich nur eine stabile Internetverbindung.
Ja.
Ähm, genau.
Und Shirts mitbringen, ich glaube, das machen wir ja trotzdem.
Äh, da, da werden wir noch eine kleine Stellung nehmen.
Eine oder zwei.
Genau, und die werden dann, die werden dann höchst bietend versteigert.
Genau.
Oder so.
Wahrscheinlich, wahrscheinlich verkaufen sie sie dann für fünf Euro, wenn keiner mehr bietet.
Gut.
Dabei muss ich sagen, vielleicht bringen wir auch Hoodies mit.
Unsere Hoodies sind sehr gut.
Ja.
Also, ich werde mir auch demnächst nochmal, ich schicke dir, das wollte ich eigentlich
noch machen, äh, ich brauche noch ein paar T-Shirts und ein paar Hoodies für mich.
Mhm.
Schreibst du ja auch, vielleicht bestellst du ja auch du.
Wer weiß.
Ja, ach so, kann ich natürlich auch machen, ja.
Müssen wir mal gucken, genau.
Okay, das war das.
Ähm, und dann, das ist jetzt was, wo ich nicht genau weiß, inwieweit ich darüber, ich sag's
jetzt mal und dann sagst du mir hinterher, ob du glaubst, dass das eventuell sicherheitsrelevant
ist und wenn du sagst, es ist sicherheitsrelevant aus deiner Sicht, dann schneiden wir es raus.
Okay.
Also, ich hab, äh, vorhin, äh, eine kleine Demo noch gebaut für das Thema, ähm, auf CodePen
und, äh, dabei eine Text-Area eingefügt und zwar ohne schließendes Text-Area-Tag.
Und interessanterweise, ich, äh, das ist der Bug, den ich dann vielleicht auch mal melden
möchte, ist, wenn man das tut, steht in der Text-Area dann aber plötzlich was drin,
nämlich Code, der danach kommt und ich weiß nicht genau, ob das, das ist normalerweise
nicht so, oder?
Mh, naja.
Weißt du, kannst du dir ...
Also, alles, was danach kommt, ist, ist, ist, ist ja quasi Text-Area.
Alles, was danach kommt, ist Text in der Text-Area, dann, dann lieg ich, dann lieg ich vielleicht
falsch und es ist einfach komplett normales Verhalten.
Dann vergisst du, was ich gesagt habe, ich, ich behaupte das Gegenteil.
Ähm, da ist halt die Frage ...
Aber wenn da jetzt HTML wirklich, also öffnende und schließende HTML-Elemente sind ...
Also, ich mein, an den Quelltext kommst du ja eh ran, da ist ja jetzt nix drin, was
du, was du nicht sonst sehen würdest, ne?
Ja, ich, man weiß ja nie, kann ich da dann irgendwie ... Ich weiß nicht, was man da wird.
Du hast einfach den nachfolgenden Inhalt von, von der Seite, den siehst du dann.
Genau.
Du hast in dem Fall einfach noch ein Script-Tag und schließender Body und schließender HTML.
Genau.
Und da kommst du ja aber auch dran, wenn du, wenn du einfach dir mit Elements-Inspector
in den Dev-Tools die Seite anschaust.
Mich hat's nur, mich hat's gewundert, dass das passiert.
Und warte mal, ich mach jetzt mal hier noch den Live-View und guck, ob es da auch passiert.
Tatsächlich. Das scheint, ist das normales Verhalten.
Ich hätte gedacht, dass der Browser da ein bisschen mehr failsafe ist und sagt, naja, da kommt jetzt irgendwie
HTML, das soll wahrscheinlich nicht da drin sein, jetzt in der Text-Area, aber kann natürlich auch sein, dass man HTML die Text-Area reinschreibt.
Nee, wahrscheinlich ist es einfach ganz normales Verhalten, was ich so noch nie beobachtet habe.
Ja.
Ja, okay, dann, ähm, dann lassen wir es drin.
Ja.
Richtig.
Dann hab ich einfach nur was, dann hab ich einfach nur ganz stinknormales Verhalten gefunden, was, äh, ihr wahrscheinlich alle schon längst kennt und denkt, sag mal, was labert ihr denn da jetzt schon?
Ich glaube, da hat sich einfach noch niemand so wirklich Gedanken drüber gemacht.
Also,
Ja.
Ja, okay.
Das heißt, man muss auch, man muss HTML theoretisch gar nicht, äh, also das sollte man natürlich trotzdem tun, aber man muss das gar nicht, ähm, Entity encoden, um es in der Text-Area drin zu haben, sondern solange keine schließende Text-Area drin ist, macht es anscheinend alles automatisch.
Auch gut zu wissen.
Ja, wer weiß, wofür, wofür das noch ein interessanter Hack sein könnte.
Wenn du irgendwo Leute verwirren willst, schreibst du einfach am Anfang der Seite eine öffnende Text-Area und dann, ähm, der Rest ist dann, ja, keine Ahnung, muss man mal überlegen.
Man weiß ja nie so genau, wofür das noch gut sein könnte.
Irgendwas kriegen wir damit kaputt gemacht.
Ja, das schaffen wir schon.
Sehr gut.
Okay, dann sind wir schon durch mit der Retro.
Ja.
Nicht mal eine halbe Stunde, Mensch, sind wir heute fix.
Ja, ich hab schon überlegt, wir müssen heute schnell, wir müssen heute schnell machen, zack, zack.
Ja, wir sind spät dran, da müssen wir schon.
Aber wir haben, wir haben auch noch ein bisschen was.
Ja, ja, ja, klar, wir haben ja noch ein Thema.
Jetzt kommt erst noch eine Property, aber die wird auch, auch schnell, aber, äh, macht ja nix.
Die Property der Woche.
Dann hab ich auch weniger zu schneiden, das ist schön.
Äh, ja, die Property der Woche ist heute ein Event, ähm, und zwar das Input-Event.
Äh, wahrscheinlich kennen das schon viele, aber ich bin jetzt gerade erst die Tage wieder, äh, irgendwo auf einer Seite auf den Fall gestoßen, wo ich, ähm, was in der Text-Area eingeben musste und es hat nicht auf das, äh, auf Paste reagiert.
Also es hat immer nur reagiert, wenn ich tatsächlich, also und nicht nur das, sondern es hat nicht mal irgendwie auf Keydown oder so reagiert, sondern wirklich, ich musste das eingeben und dann den Fokus aus der Text-Area nehmen, damit sich das geändert hat.
Ich weiß nicht mehr, was es war, irgendwie so ein Sicherheits-Code eingeben oder was, ja.
Ähm.
Und dann musste ich erst echt, ich dachte so, okay, jetzt hab ich's eingegeben, was, was ist jetzt? Geht's jetzt weiter?
Und dann hab ich den Fokus aus der, aus dem Input genommen und zack, dann, dann, dann, dann hat's erst getriggert und es hat ja einfach auf das Change-Event, äh, reagiert.
Und, ähm, deswegen, vielleicht kennen das ja tatsächlich doch manche noch nicht, ähm, das Input-Event, ähm, also einfach Ad, äh, also ein Input und dann Add-Event-Listener und, äh, Input und ein Callback.
Und, ähm, ähm, das reagiert auf, direkt auf die Eingabe, sobald ich Buchstaben eintippe und aber eben auch auf Copy, Paste und auch Cut, weil früher, bevor es das gab, haben dann Leute dann, okay, ja, wenn C gedrückt wird und der, äh, äh, Steuerungs-Key-Modifier ist, ja, dann, dann, oder, äh, mit V und Steuerungs-Modifier, äh, dann wurde was eingefügt und dann gucke danach.
Dann haben die aber oft vergessen, dann Steuerung X zu reagieren und du hast was ausgeschnitten und dann hat es halt nicht das getriggert, dass, dass sich das geändert hat, äh, obwohl es das eigentlich halt logisch hätte müssen, ähm, mit dem Input-Event ist das alles in einem Rutsch, äh, ich krieg jede Änderung in dem Feld mit, live, auch ohne Blur, ähm, und Copy, Paste, Cut, funktioniert alles.
Ich erinnere mich noch an Zeiten, wo es das noch nicht gab, wo man eben diese komischen Workarounds noch bauen musste, ähm, aber seit's das gibt, gibt's eigentlich aus meiner Sicht so gut wie keinen Grund mehr,
etwas anderes zu verwenden bei Eingabefeldern.
Richtig, das ist ja auch so weit verbreitet, also ich hab jetzt keine News, hab ich jetzt gar nicht dazu, äh, ich hab's, ich hab's grad mal aufgemacht, also, das ist, das gibt's schon unglaublich lange, äh, also hier, ähm, Chrome 15, äh, interessanterweise, Safari 5.1, Safari 6 nicht, nee, Support Unknown, okay, ah, das ist, okay, grau ist unknown, also, Chrome 4 bis 14 ist offenbar auch unknown, ähm, aber es war zum Beispiel in Firefox,
Äh, Firefox 3 schon drin, aber da gab's noch Probleme mit bestimmten Edge-Cases, aber in Firefox 3 gab's das schon, das ist schon wirklich lange her, das ist kein Firefox 3, 2000, warte mal, 2008, 2008, 2008 Release, Firefox 3, also, könnt ihr euch, äh, überlegen.
Kann man, kann man nutzen, gibt eigentlich keine Ausrede, ähm, außer man will nicht bei jedem Keypress das haben.
Und, und da, und da wird's jetzt wieder interessant, damit, damit die, ähm, die jüngeren Leute unter euch, die, äh, vielleicht diese alte, diese alte Browser-War-Geschichte nicht mitgekriegt haben, ähm, also, wenn ich sag, Firefox 3 hatte das eingebaut, der 2008 released wurde, im Internet Explorer, war das erst richtig drin, äh, mit richtigem Support ab Version 10, 2012.
Ha, krass.
Beziehungsweise, es gab's schon irgendwie in Kaputt mit Partial Support in IE9 2011, was aber auch drei Jahre nach Firefox ist. Ähm, ja, das muss man sich, das muss man sich mal geben.
Ja, wir haben jetzt Evergreen-Browser, eigentlich alle, ich weiß nicht, ob ich jetzt das bei Safari so nennen würde, aber der wird auch deutlich häufiger geupdatet mittlerweile. Ähm, zumindest auf dem Mac wird der relativ häufig geupdatet. Ich glaube, auf den iOS-Geräten ist er immer noch ans System gekoppelt. Also, da, da muss ein OS-Update kommen, dass der, äh, Browser auch ein Update kriegt. Das ist noch eigentlich das, das Langsamste. Alle anderen sind ja mittlerweile sehr schnell geworden.
Ja, hoffentlich ändert sich da auch mal was dran. Wäre schon schön, wenn das da auch ein bisschen schneller ging. Weil es ist ja doch so, ne, wir wollen jetzt nicht sagen, es ist der neue IE, aber es ist halt schon immer so, naja, gut, aber auf Safari, auf Mobil müssen wir halt noch warten.
Ja, also, aber bei Input müsst ihr nicht warten, das könnt ihr einfach überall einsetzen.
Genau. Und da fällt mir gerade auf, das ist, äh, eigentlich auch eine gute Überleitung zu unserem Thema, so Dinge, die man früher anders und viel komplizierter gemacht hat und die man jetzt ganz einfach machen kann, ne?
Ja. Ist doch echt ein guter Übergang.
Dann kommen wir da mit.
Hier ist WWS IV mit dem Tagesthema.
Ja, war wieder grammatikalisch. Also, ich weiß auch gar nicht, was wir dabei gedacht haben. Also, selbst wenn es nur mit das Tagesthema, hätte auch mein Satz keinen Sinn gemacht.
Aber gut. Es ist, aber, aber das, das Jingle oder den Jingle, weiß gar nicht genau, ähm, haben wir schon lange nicht mehr gehört. Ähm, von daher ist das okay.
Ja, weil wir immer dann direkt die, die Property zum, oder die Retro zum, zum, zum Tagesthema gemacht haben. Das stimmt.
Genau. So, heute gibt's wieder ein Thema. Ähm, und ich hab ja vorhin schon gesagt, es geht um Stasi und Stalking und Observation.
Und dann sind wir halt, da sind wir eigentlich dann schon.
Genau. Es geht um, äh, Observer im, im Allgemeinen. Und zwar um den Mutation-Observer, den Resize-Observer und den Intersection-Observer. Und dann gibt's der Vollständigkeit halber, hab ich noch aufgeschrieben, einen Performance-Observer und Reporting-Observer. Äh, da kann man sich dann irgendwie aus den, ich meine, dass damit die Dev-Tools gemeint sind, ne? Wenn diese Performance-Geschichte da, sobald's da, äh, quasi neue Daten gibt, dann kann man sich die irgendwie abgreifen.
Hm.
Aber das, das werden wir heute nicht, äh, nicht besprechen. Ähm, das war nur der Vollständigkeit halber, wir machen also, äh, den Mutation-Observer, Resize-Observer und Intersection-Observer, da sprechen wir heute drüber.
Und, äh, vielleicht, zumindest ist jetzt so mein Gefühl, ich weiß, du hast, äh, du hast wahrscheinlich wieder mehr vorbereitet als ich, ich hab mir Mühe gegeben, aber ich hab mir die MDN-Artikel dazu angefangen durchzulesen.
Und das sag ich extra deswegen, weil Resize-Observer und, äh, Mutation-Observer sind relativ kurze Artikel.
Mhm.
Aber der Intersection-Observer, das, der hat's in sich. Ich glaub, da könnte man eine komplett eigene Sendung dazu machen.
Das stimmt, ja.
Ähm, da ist, äh, da gibt's einiges, ich glaube, da werden wir, wir werden nicht mit allem ...
Wir werden da an der Oberfläche kratzen erst mal.
Genau, wir kratzen heute ...
Vielleicht schaffen wir's irgendwann mal, äh, noch ein bisschen tiefer einzusteigen.
Genau, wir kratzen heute, das wollte ich nur vorweg schicken, äh, wir kratzen da heute eher so ein bisschen an der Oberfläche, was ist denn das überhaupt, was kann man damit machen?
Ähm, und, und gehen jetzt nicht in, in jede, jede erdenkliche Tiefe rein, sondern, ja.
Aber insgesamt kann man sagen, äh, sind sie alle relativ ähnlich.
Also vom Grund, Grundsystem her, ähm, registriere ich einmal so einen Observer oder beziehungsweise erstelle eine neue Instanz davon, also New Intersection-Observer, New, äh, Mutation-Observer, New Resize-Observer.
Ähm, übergebe dann Callback als erstes Argument und, äh, Optionen als zweites Argument.
Und dann hab ich einmal diesen Observer, der ist noch gar nicht irgendwo dran gebunden, jetzt an irgendwelche Elemente, die ich, die ich observieren will, äh, sondern ich kann dann wiederum sagen, äh, dieser Observer soll jetzt, ähm, Punkt Observe als Methode, äh, und dann übergebe ich das, das Element, das ich observen will.
Und ich kann das auch jederzeit wieder unobserven, das Element, oder ich kann den komplett, ähm, ähm, äh, destroyen.
Weiß gar nicht, das Destroyer war, glaub ich, äh, äh, an, äh, Disconnect, Disconnect ist dann die Methode.
Da werden dann alle, äh, aufgelöst.
Und, ähm, ähm, ist so ein bisschen ähnlich wie mit diesen Audio-Notes und sowas, die ich, die ich immer wieder, ähm, neu verbinden kann und so.
Also, das Konzept gefällt mir, äh, eigentlich ganz gut, dass ich sagen kann, ich, äh, aus Performance-Gründen stoppe ich zwischendrin was und lass es dann wieder weiterlaufen und so, ähm, ist eine, ist eine gute Geschichte.
Und generell Performance ist auch so ein, so ein Thema, warum diese Observer eigentlich notwendig sind, ähm, weil früher hat man halt einfach, äh, irgendwie aufs, aufs Resize-Event gehört und dann.
Genau, wir haben ja noch gar nicht gesagt, was sie eigentlich tun.
Genau, wir haben noch gar nicht gesagt, was sie tun, ja, aber jedenfalls noch als Übergang, ähm, es war früher komplizierter und wir haben das alles im Main-Thread gemacht und haben, äh, haben irgendwie Set-Intervall oder so gemacht, ja.
Vielleicht später, wenn wir dann, äh, Schlüsse gehabt wollten, dann mit, ähm, äh, wie heißt's, ähm, Request-Animation-Frame.
Ähm, aber es lief halt alles im Main-Thread und es war langsam und es war nicht schön. Und jetzt gibt's diese Observer.
Ja, ich, äh, ich hatte das Thema irgendwann mal draufgeschrieben, weil ich, äh, drauf gestoßen bin, also mein, mein Use-Case war ganz konkret und, äh, ich muss dazu sagen, ich hab, ähm, mit Mutation Observer und, äh, Moment, ich, nee, der, der, den ich auf jeden Fall auf dem, auf dem Tablett hatte, war Resize Observer.
Mhm.
Ähm, das war der mit dem, wo ich draufgekommen bin, hey, da gibt's, stimmt, da gibt's ja sowas Neues und ich hab damit noch nie rumgespielt und dann hab ich tatsächlich mal, äh, eine Stelle gebraucht, äh, es an der Stelle gebraucht und dachte dann so, äh, okay, das ist ja eigentlich relativ easy.
Und ich muss dazu auch sagen, dass die, äh, die, das gilt eigentlich für fast alles in der MDN, die MDN-Demo-Codes sind meistens meiner Meinung nach viel komplizierter, als sie sein müssten.
Mhm.
Weil ich erwarte eigentlich von so einer Dokumentation ganz am Anfang, die erste Demo, das soll das minimalste Beispiel sein, was man machen kann.
Und meistens sind es relativ große, komplizierte Beispiele, also auch bei diesen Observern, wo ich so denke, das geht doch mit drei Zeilen, das ist die Essenz, wieso müsst ihr denn jetzt 27 machen?
Warum? Also, da sieht man doch dann gar nicht mehr, um was geht's jetzt eigentlich? Naja, wie auch immer. Also, ähm, ich weiß gar nicht, welche Reihenfolge Mutational Observer wolltest du zuerst?
Also, Mutational Observer, äh, observiert ein Element und ob sich darin etwas tut oder sich an Attributen von dem Element etwas ändert. Oder ob sich im DOM was ändert, so ganz grob gesagt.
Weil du sagst, oder das, äh, also ich kann, äh, mit den Einstellungen, mit der Config, die ich da übergebe, kann ich darauf Einfluss nehmen, was ich überhaupt berichtet haben will.
Also, standardmäßig, äh, ist da vieles deaktiviert und ich kann halt wirklich sagen, möchte ich erstmal, dass, ähm, dass ich auch, ähm, benachrichtigt werde, wenn sich Kind-Elemente irgendwie ändern, möchte ich benachrichtigt werden, wenn neue Kind-Elemente hinzukommen oder entfernt werden, möchte ich über diese Attributänderung, ähm, informiert werden.
Das heißt, da muss man vorher, also als ich das am Anfang mal ausprobieren wollte, hab ich ihn halt draufgeklatscht, hab das Config-Objekt eigentlich leer gelassen, ähm, und mich dann gewundert, warum ich irgendwie nichts zurückbekomme.
Und dann erstmal doch nochmal die Doku genau angeschaut und, naja, okay, ich muss das erst alles anfragen. Und das ist vielleicht am Anfang ein bisschen nervig, denkt man so, ähm, aber es dient halt der Performance.
Also, ich muss nicht Sachen, weil im Hintergrund läuft das ja ähnlich ab, wie wir das früher gemacht haben, sprich, es wird ständig geguckt, tut sich irgendwie was, ähm, beziehungsweise die Objekte geben halt dann wieder Rückmeldungen, wenn sie wissen, okay, ich werde observiert, ähm, und damit das nicht sein muss, damit möglichst wenig an Ressourcen verbraucht wird, ähm, gibt man eben frei, ich brauche die und die Informationen.
Genau, also, ich hab da eine, wir haben da noch mehrere Demos, die wir später zeigen, ähm, ich hab so eine kleine, kleine Demo bei Co-Kern gebaut.
Zeigen können wir sie nicht, aber ihr könnt sie anklicken.
Ihr könnt sie dann anklicken, genau. Ähm, ja, aber wollen wir, wollen wir auf jeden Fall noch drüber sprechen. Und, äh, wenn ich mich so was nähere oder nähern möchte, äh, dann, dann versuch ich immer so eine Minimaldemo zu bauen von dem, also wirklich, was ich vorhin gesagt habe, so ein Dreizeiler, der, äh, um, um die Essenz irgendwie abzubilden und irgendwie rauszufinden.
Ähm, wie gesagt, ich bin nicht mehr, ähm, am Ende zu Intersection Observer gekommen, weil das war tatsächlich dann, äh, zu kompliziert, um in der kurzen Vorbereitungszeit, die ich hier heute noch hatte, äh, das zu bauen, weil ihr wisst ja, AirTags.
Ähm, ähm, genau.
Aber, äh, der Mutation Observer, der geht ziemlich einfach und, äh, was ich da nämlich gemacht hab, und ich fand das jetzt in dem Fall, die, die, für mich war das die schnellste und einfachste Sache, tatsächlich das mit dem Attribut, ähm, zu schauen.
Und ich hab da, äh, einfach dann gesagt, naja, also in, in der Demo, die ihr da noch seht, äh, du kannst halt einen, äh, Knopf drücken und, äh, der fügt dem Body Tag dann eine Klasse hinzu.
Und dann kann ich, hab ich, geb ich unten aus, wie oft das denn jetzt schon sich verändert hat.
Äh, genau, kannst, jedes Mal, wenn du klickst, Observer, und dann, äh, kann man dann sehen, am Body, da kommt irgendwie eine Klasse dazu.
Genau. Ähm, so einfach kann's sein.
Aber dazu muss man dem, wie du eben grad schon gesagt hast, dann aber sagen, dass er Attribute angucken soll.
Da muss man, äh, die, ähm, als Parameter-Attributes, also Parameter-Objekt, äh, Config-Objekt, äh, Attributes-True, äh, übergeben, zum Beispiel, wenn man, wenn man die haben will.
Und wenn man das nicht macht, dann kriegst du davon gar nichts mit. Also ...
Und so ist es auch mit, äh, wenn ich jetzt wissen möchte, was war denn das vorherige, der vorherige Wert und was ist der neue Wert, krieg ich standardmäßig auch nicht.
Da muss ich dann, äh, Old Value heißt das, glaub ich, oder Old Values, ähm, angeben und das auf True setzen.
Und nur dann krieg ich eben auch in dem, was ich dann in dem Callback zurückbekomme, nur dann krieg ich eben auch, äh, das alte Value zurück.
Weil das ist ja auch wieder wie Sourcenverbrauch, ne, ich muss das, das muss ja irgendwo zwischengespeichert werden.
Weil in dem Moment, wo ich die Benachrichtigung bekomme, ist es ja eigentlich schon wieder weg.
Genau, hast du da nicht, warte mal, hast du Mutation-Observer, hast du keine Demo gemacht?
Äh, zum, nee, eine eigene Demo nicht. Also bei Mutation-Observer find ich's, fand ich's auch immer schwierig, da eine gescheite Demo zu finden, mit einem, irgendwie, also so Strip-Down, wie du gesagt hast, ne, möglichst wenig Kletterer-Datsch, aber trotzdem irgendwie so ein, so ein, so ein, so ein Real-Life-Anwendungsfall.
Na gut, das hab ich jetzt bei mir nicht.
Ne, klar, weil es waren viele so Demos, ähm, du öffnest die im Code-Pen, du klickst irgendwo drauf und es passiert nichts, weil du musst erst die Konsole aufmachen, in der Konsole lockt es dann, dass sich was verändert hat.
Und ich hätte gerne eine Demo gehabt, aber hatte auch nicht die Zeit, dann selber noch eine zu stricken, ähm, wo ich direkt auf der Seite einfach sehe, okay, da hat's jetzt was getan und, äh, warum wäre das nützlich, das jetzt zu wissen?
Also klar, ob irgendwo eine Klasse dazukommt, äh, ja, also wichtig ist, glaub ich, echt, kommen neue Elemente hinzu, wenn ich die dynamisch hinzufüge, weil dann, dann kann ich mir nämlich sparen, bei dem, bei dem, zum Beispiel jetzt Click-Event-Listener auf einem Button, der ein Element hinzufügt, da dann zu sagen, ah ja, und wenn das passiert, dann ruft das in das Callback auf.
Sondern ich kann einfach sagen, okay, ich hab hier eine Liste, ich hab ein UL-Element, ähm, und ich möchte jetzt nicht irgendwie auf den, auf den Button oder ich hab vielleicht sogar eine fertige Anwendung und möchte die erweitern und komm da gar nicht rein, dass ich irgendwie genau an die richtige Stelle des Click-Event-Listeners, äh, komme und müsste dann einen eigenen registrieren, dann kann ich auch einfach sagen, okay, wenn sich an diesem UL etwas ändert innen drin und da kommen Elemente hinzu, das werden welche entfernt, Beispiel To-Do-Liste oder so, ähm, dann nachrichtige mich und dann kann ich da drauf reagieren.
Genau, das Geile ist halt, du kannst, äh, auf asynchrone Dinge reagieren, wenn sie dann tatsächlich erst passiert sind.
Genau.
Und musst jetzt nicht früher dann irgendwie so denken, genau.
Vielleicht ist dann noch gar nicht das Element da, also müsste ich sagen, okay, warte, bis das Ajax-Request fertig ist, aber wann ist das dann fertig?
Äh, wenn ich jetzt irgendwie eine, eine, eine Library hab, ähm, und kein, kein Standard-Ajax, dann kann ich mich da vielleicht einklinken, ähm, gut, kann ich bei Fetch auch, aber ist kompliziert, ähm, und das kann ich mir einfach sparen, indem ich, wenn die einzige Information, die ich wissen will, ist, ist da jetzt was Neues hinzugekommen,
Perfekt, Mutation-Observer.
Genau, und, äh, wer, wer das lernen möchte, ähm, was ich da jetzt noch gefunden hab bei der Recherche, was ich eigentlich ziemlich gut fand, besser als die, äh, die MDN-Demos, die, die es da gab, ähm, es gibt einen schönen Artikel vom Smashing Magazine von 2019,
Getting to know the Mutation-Observer-AP, äh, die genau, äh, mit so einem, mit so einem Minimal-Demo beginnt, ähm, und das fand ich eigentlich irgendwie sehr nett und gut erklärt, und da hab ich mich ein bisschen besser abgeholt gefühlt als, äh, in der MDN an der Stelle, jetzt könnte man natürlich sagen, ja, dann editier halt die MDN, ja, das mach ich dann übermorgen.
Ja, okay, ich seh jetzt auch ein Artikel, das ist schön, das sind so, das wird immer komplexer, ne, am Anfang so ganz, genau, genau, am Anfang ist es, am Anfang ist es halt quasi, quasi, äh, der, der Dreizeiler oder so, oder der vierte, ne, das ist eigentlich tatsächlich ein Dreizeiler, ähm, und dann wird's immer ein bisschen komplizierter und so, was macht man denn damit, also das find ich tatsächlich einen ziemlich guten Artikel, äh, zu dem Thema, und dann kann die...
Okay, das sind auch, äh, Sachen dabei, die ich auf CodePen jetzt direkt nicht gefunden hatte, also Demos, okay, cool.
Und das verweist aber auch wieder auf CodePen, also...
Genau, genau, aber die Demos hatte ich nicht gefunden bei der Suche, ja.
Genau, auch das, äh, auch das, das mit dem Stop, äh, also mit dem, äh, das mit dem, äh...
Genau, das sind eben Schaden und das ist da auch drin, und da kann man sich mal angucken, wie das funktioniert.
So, als, als Info am Rande, weil wir es vorhin auch über IE hatten, äh, ist das der, der Mutation Observer ist der einzige von den dreien, der es schon in den IE 11 geschafft hatte, die anderen, äh,
kamen dann erst mit Edge, teilweise erst mit Edge Chromium dann, ähm, und gar nicht in Edge direkt.
Wobei generell, äh, glaub ich, dass man mittlerweile ziemlich safe sagen kann, dass man die benutzen kann, alle drei, ne?
Inzwischen ja, ja, würd ich sagen.
Das ist, ich guck grad noch mal, äh...
Ich glaub, waren alle so 95, 98 Prozent, äh...
Ja, ja, ja, 95, 98, tatsächlich ganz genau, zwischen 95 und 98, du hast es ganz genau gesagt.
Aber ich seh grad noch Intersection Observer Version 2.
Hab ich auch gesehen, ja, da gibt's noch mal irgendwie, äh, speziellere, ob, ob was überlagert ist, äh, und irgendwie Click-Tracking kann man da verhindern, und was weiß ich.
Aber das ist in Firefox, glaub ich, noch nicht, war das, ne? Safari und Firefox sind da, glaub ich, noch.
Ja, in Safari und Firefox ist das noch nicht in Chromium-Browsern.
Aber das hab ich mir so genau jetzt genau gar nicht angeschaut.
Nee, ich, tatsächlich, ich auch nicht, hab's jetzt grade auf Can I Use zum ersten Mal gesehen, weil das hat irgendwie 74 Prozent oder so, ähm, ja, okay.
Auf der Suche nach einem Real-Beispiel, äh, hab ich da noch was gefunden, äh, ein, ein Code-Pen, ein bisschen umfangreicher, ähm, das ist ein, ein Polyfill für das CSS, äh, für die Attribute-CSS-Funktion, also ATTR, Klammer auf, Klammer zu.
Ähm, die kann man ja nutzen im Content aktuell nur, also wenn ich ein Before- oder After-Pseudo-Element hab, dann kann ich ja im Content-Attribut nutzen und krieg dann wirklich den, von dem Data-Attribut, ähm, den, den Wert dann da rein.
Funktioniert aber aktuell nur dort und ist wohl schon so gedacht von der Speck her, ähm, dass das überall funktionieren soll.
Und da gibt es jetzt, äh, so ein Polyfill, ich muss allerdings gleich die Warnung dazu senden, ich will das nicht für den Produktiveinsatz empfehlen.
Also zum einen, äh, funktioniert das, wenn ich das richtig gesehen hab, nur mit, äh, Inline-Style-Blöcken.
Also erstmal ist das ja eigentlich schon gegen die Spezifikation, dass Style-Blöcke einfach mitten im, im Dokument sind, die sollten eigentlich im Head-Bereich sein.
Ah, darf man das nicht mittlerweile?
Äh, darf man, wird von allen Browsern eigentlich, glaub ich, auch richtig, äh, umgesetzt, aber es ist eigentlich nicht richtig.
Also eigentlich ist das Style-Element nicht, nicht erlaubt im Body-Bereich.
Es ist quasi so ein Living-Standard, dass das funktioniert.
Ich bin, also war mein letzter Stand zumindest, korrigiert mich gerne, wenn ich da falsch lieg.
Ja genau, wir sagen jetzt, wir behaupten das jetzt einfach und wir werden dann schon rausfinden, weil dann so ein paar Rage-Kommentare kommen, ihr habt doch keine Ahnung.
Äh, ich geb ja zu, ich mach das auch, also ich hab auch schon Style-Blöcke im, im, im, im, im, im, im, im drin benutzt.
Hast du?
Also jedenfalls, äh, genau, was das, äh, der Kopf dicker als der Hals.
Der Hals, genau.
Und da sieht man halt, das sind so Range-Slider im, im Data-Width und Data-Height-Attribut, ähm, die auch nicht auf Input reagieren, sondern auch erst auf Change.
Das könnte man doch schön live machen, naja.
Ähm.
Guck mal, das ist von 2013.
Muss ich sagen.
Das sehen wir dem Fabrice jetzt mal nach.
Das steht, äh, das steht im JavaScript-Blog, also in so einem Kommentar drin.
Weiß ich nicht, ob das, sieht aber so aus, als ob das.
Ah ja, okay, ja, dann sehen wir es mir nach.
Ähm, genau, also da, da sind jedenfalls so Data-Width und Data-Height-Attribute auf so einem Diff und in dem CSS-Blog, den man unten drunter sieht, und das finde ich auch interessant, äh, wissen auch viele nicht, ähm, dass man einem Style-Blog, Display-Blog geben kann und dann wird der wirklich dargestellt.
Also das, was du da siehst, diese grünen Felder mit dem CSS drin, das sind nicht irgendwie Diffs, wo nochmal dann zur Sichtbarkeit das, äh, CSS drin ist, sondern das sind wirklich Style-Blöcke mit Display-Blog.
Ich, äh, ich, äh, ich kenne jemanden, der, der mit solchen Edge-Cases sich mal eine große Zeit verbracht hat.
Okay.
Ähm, ja, man kann auch einen Script-Blog sichtbar machen, wenn man möchte.
Ja, genau, bei Script- und Style.
Und so, das ist eigentlich, äh, ist auch echt interessant, das sind ganz normale Elemente eigentlich, ähm, sie sind halt standardmäßig auf Display-None.
Und, äh, wenn ich das ändere, dann sind sie da.
Ja, dann sind sie einfach da.
Schon ein bisschen fies.
Aber okay, also auch das nur in Ausnahmefällen machen.
Ja, in dem Fall ist es halt wirklich, ne, es geht darum, CSS zu visualisieren und zu zeigen, hey, das ist das CSS dazu.
Ja, perfekt, warum nicht?
Also besser als nochmal ein Diff mit dem exakt gleichen Inhalt innen dran zu glatschen, ne?
Aber egal, also da ist jedenfalls drin dann Width, Doppelpunkt, äh, Attribute, also ATTR, Klammer auf, Data Width und dann sogar noch mit Einheit, also Data Width und dann noch Leerzeichen PX.
Das, äh, wusste ich auch nicht, dass das so ohne weiteres geht.
Ähm, zumindest soll es wohl laut dem, dem Standard gehen.
Und, äh, ja, damit ist das, ist das machbar.
Also es reagiert einfach auf den, auf den Change von diesem Data Attribut und entsprechend wird dann mit einem Haufen JavaScript, äh, wird dann das CSS entsprechend geparsed, auch mit Regex.
Also wie gesagt, nicht für den, nicht tatsächlich für den Einsatz, äh, gedacht.
Aber ich fand's mal ganz interessant zu sehen, okay, dafür könnte man's gebrauchen.
Hm.
Coole Sache.
Ja, dann kommen wir auch, ähm, glaube ich schon zum Resize Observer, ne?
Das war ja der Ausgangspunkt, wegen was wir das auf die Liste genommen hatten.
Das war mein Ausgangspunkt.
Ich kann ja mal kurz erklären, ähm, wofür ich das damals gebraucht habe.
Ähm, und zwar, äh, wollte ich den, ähm, es war, es war ein, ein, warte mal, ich glaube ich hatte es gebaut mit Details und Summary.
Ähm, oh, jetzt, ich weiß tatsächlich gerade nicht mehr zu 100%.
Ich weiß tatsächlich gerade nicht mehr zu 100%, warum es an der Stelle dann gebraucht wurde.
Auf jeden Fall war es so ein klassisches Element, was man größer und kleiner klappen kann, ne?
Mhm.
Und da musste ich eben wissen, ähm, wie hoch ist es denn am Ende und diesen Moment abpassen, wo sich die Größe geändert hat.
Ähm, ich weiß jetzt gerade gar nicht mehr genau, warum wir das dann am Ende so umgesetzt haben.
Hehe, hätte ich mich mal besser vorbereitet.
Ähm, egal.
Ähm, das war aber in dem Fall eine Anforderung und, äh, man hätte das irgendwie kompliziert irgendwie drumherum bauen können.
Und ich bin ja immer Fan von Lösungen, die irgendwie ohne JavaScript auskommen.
Aber da war das tatsächlich eine elegante Lösung, äh, weil, wie gesagt, am Ende war es tatsächlich genau dieser Dreizeiler.
Mehr habe ich nicht gebraucht.
Ähm, ich glaube, da wird dann, ich glaube, auf Basis dessen wurde dann irgendwie ein Button, ähm, geändert.
Der dann irgendwie, äh, der eine wird eingeblendet, der andere wird ausgeblendet, ähm, und das, äh, war dann immer ganz gut.
Ich glaube, die Höhe hat irgendwie noch eine Rolle gespielt von der Höhe.
Und das ist auch egal.
Ähm, auf jeden Fall, ähm, dafür gibt es, glaube ich, einige Anwendungsfälle, dass man rausfinden möchte, ob ein Element die Größe ändert.
Weil es kann ja auch sein, ah, doch, ich weiß es wieder, weil da nämlich auch Bilder drin sein konnten, von denen wir die Höhe nicht wussten.
Mhm.
Ähm, und die unter Umständen auch nachgeladen werden, ähm, weil du Lazy Loading, weil wir, äh, Loading klicken.
Und wenn du dann gleich Lazy drin hattest, ja, das heißt, im initialen Zustand wussten wir nicht, wie hoch das Bild ist, oder, ja, doch, wie hoch das Bild ist in dem Element.
Ähm, aber man wollte was, man wollte, ähm, ausblenden können trotzdem.
Und, aber dann, wenn man aufklappt, sollte es trotzdem die richtige Höhe haben, dass man auf 100 Prozent gehen kann.
Ich glaube, das, ich glaube, das war der Anwendungsfall, genau.
Ähm, und, äh, das hat, das funktioniert total gut mit Resize Observer, weil ich sofort dann bei einem Element irgendwie mitkrieg, wenn sich die Höhe ändert.
Und ich weiß dann auch genau die Höhe, wo es hingeht und kann dann dementsprechend da drauf reagieren.
Ähm, letzten Endes funktioniert es, äh, ziemlich genauso, äh, wie Mutation Observer vom Prinzip her, was wir gerade schon erklärt haben.
Ähm, ich kann hier gerade nochmal da in meine Minimal-Demo reingehen.
Ähm, also ich hab hier da zum Beispiel, äh, auf den Body, äh, in meiner Demo, ähm, einen Resize Observer gelegt.
Und hab dann, ähm, ganz wirklich ganz simpel, das bringt in dem Fall nicht wirklich viel, weil ich lese nichts aus.
Aber ich lese einfach nur aus, wie oft hat sich's verändert in meiner Demo.
Das heißt, wenn ich jetzt, ähm, die Breite von dem Browser verändere, dann geht die Zahl hoch, wie oft das jetzt schon resized wurde.
Das ist jetzt kein, das ist jetzt nichts, was mir jetzt wirklich was bringt.
Aber das wäre der klassische Fall, den man früher mit, mit Window, ähm, eventless in der Resize, äh, getriggert hätte oder abgefangen hätte.
Aber das ist halt das, das super, das ist das Positive, ähm, dass man das eben jetzt nicht nur auf das Browserfenster beziehen kann, sondern wirklich auf jedes einzelne Element, wenn darin irgendwas passiert, wird das eben getriggert und dann bekomme ich das mit.
Es wäre jetzt natürlich, äh, die Demo, ich hab's ja vorhin mit heißer Nadel gestrickt, es wäre natürlich viel cleverer jetzt zum Beispiel die Breite dann auszugeben von dem Element, ähm, weil die sich ja ändert.
Dafür hab ich eine Demo gebastelt.
Ah, perfekt.
Ähm, wenn du mal auf Konstantins Demo klickst.
Konstantins Demo?
Das ist eine Text-Area.
Ah, ja.
Und, äh, wenn ich da das Code-Pen in der Höhe oder in der Breite ändere, oder aber auch, weil das ist nämlich per VH und VW, ähm, das heißt, oder einfach diesen Anfasser nehme, rechts unten in der Text-Area, und den größer und kleiner ziehe.
Weil eine Text-Area ja ein Element ist, was man theoretisch tatsächlich ohne irgendwelches weiteres Skript oder irgendwas resizen kann.
Ja.
Hm, ja, cool. Und dann wird, äh, werden die Pixel angezeigt.
Naja.
Aber was ich, äh, die, die Text-Größe ändert sich ja auch. Das ist ja fancy.
Ja, ja.
Aha, ja.
Ich seh auch, was du da gemacht hast. Die Höhe durch vier.
Mhm. Nice.
Nice. Nicht schlecht.
Cool.
Ja, das ist tatsächlich, äh, eine Demo, die, ja, ähm, ja, eigentlich ein bisschen besser als meine, weil du da nämlich, da nämlich dann auch noch zeigst, dass man da innen drin dann eben auch noch Dinge auslesen kann, ähm, von dem aktuellen Zustand.
Ähm, ja, das ist, äh, das ist, äh, das ist cool.
I like, das solltet ihr euch unbedingt, also meine Demo müsst ihr euch nicht unbedingt angucken, aber Konstantin's Demo solltet ihr euch anschauen.
Ja, ich hab da, vielleicht erklären wir auch mal noch kurz in diesem Callback, ähm, da hab ich nämlich dann richtig Entries zurück und das ist eine Sammlung von, von allen Elementen, die ich beobachte und beziehungsweise die sich geändert haben.
Und das heißt, ich muss darüber noch mal mit 4-H drüber loopen, weil da könnten auch durchaus mehrere zurückkommen.
Und, äh, dann kann ich eben sagen, Entry, äh, Punkt Target, so wie bei, wie ich bei Event, Punkt Target, ähm, ähm, mir das Event, das, das, das Element holen kann, das das getriggert hat, ist das da eben Entry.
Also, das ist dann, glaub ich, auch, äh, ein Objekt vom, äh, vom, vom Typ Resize Observer Entry, zumindest ist das beim, beim, äh, bei dem Intersection Observer so.
Und, genau, Entry.Target, da krieg ich dann das Element und dann kann ich eben ganz normal, äh, Value, Style, äh, mir rausholen und denn die Höhe und die Breite, die bekomme ich über Entry.ContentRect.
Und das ist halt was, was man früher gemacht hätte, äh, mit, ähm, also einerseits eben mit dem Resize Event Listener.
Was halt nicht so performant ist, aber auch mit Get Bounding ClientRect, ja, um dann wirklich die, die Höhe und Breite inklusive Margin, Padding und so weiter zu holen.
Und Get Bounding ClientRect erzeugt aber halt einen, einen, ja, zwei, benutze ich bestimmt den falschen Begriff, Redraw, Reflow, also irgendwas von beidem, äh, was, was halt Konsequenzen hat auf die Performance, weil das dann wirklich neu gezeichnet werden muss.
Das heißt, das sollte man nur in Ausnahmefällen benutzen und es ist halt wenig performant.
Und in dem Fall kriege ich das zurück direkt, ähm, mit, mit, mit Höhe und Breite.
Du musst ja sagen, als ich zum ersten Mal Get Client, nee, wie heißt es, Get Bound, Get Client, Bound, äh, Get, Get Bounding ClientRect.
Get Bounding ClientRect.
Als ich das zum ersten Mal benutzt habe, da habe ich mich so ein bisschen wie ein kleiner Magier gefühlt.
Ah, ja, das fand ich, das ist witzig, ja, das fand ich auch so, boah, krass, und dann kriege ich genau die Werte zurück, wie das Element da gerendert ist.
Wie cool ist das denn? Bis ich dann irgendwo gelesen habe, A macht das nicht, das ist sehr unfair vermannt.
Warte mal, ich muss gerade mal gucken, wie lange es das schon gibt, weil ich, ich hab so irgendwie im Kopf, dass es das nicht schon immer gibt.
Nee, nee, das kam auch erst später, ne?
Weil, weil ich auch, äh, das war, das war ja früher, davor, bevor es Get Bounding ClientRect, ich kann's echt nicht aussprechen.
Spezifizität.
Ja, ja, genau, Spezifizität, richtig, ähm, ja, weil das war sowas, man wollte vorher, früher, davor, bevor es das gab, ja auch schon rausfinden, wie groß ist denn jetzt ein Element und zu welchem Zeitpunkt.
Und dann war, aber hat das ein Marge, hat das ein Padding, ist, äh, Box-Sizing gesetzt und so weiter.
Dann musstest du alle möglichen Sachen mit einbeziehen, ja, völlig.
Dann hast du doch irgendwas vergessen und es hat doch nicht gestimmt.
Ja, genau.
Also heute ist die Folge der Dinge, die man früher kompliziert gemacht hat und heute einfach, wir kommen immer wieder an diesen, an diesen Punkt heute, ja, das ist ja der Grund, Grundtenor.
Get Bounding ClientRect.
Also ich weiß es noch genau, als ich das zum ersten Mal, das, das war, das war toll.
Das weiß ich auch noch, wo ich das, äh, hatte, das war, das hab ich, glaub ich, auch mal gezeigt, das haben wir von Kunden, ähm, so alte Flash-Animationen umgebaut.
Mit SVG und, und JavaScript, äh, die animiert.
Das waren so ganz viele Bestandteile und dann hat man auch was klicken können und dann hat sich das bewegt und wenn man das geklickt hat, ging's zum nächsten Schritt und so.
Und da war halt auch das Problem, die müssen ja skalieren und dann musste ich halt berechnen, äh, in welchem Verhältnis ist es jetzt gerade und dann hatte ich, bin ich da drauf gestoßen, das ist jetzt schon einige Jahre her und das war auch so dieses Gefühl so, boah, krass, ich muss da jetzt gar nicht mehr viel rum, äh, rumrechnen, ich krieg das einfach direkt, ja.
Oh, ich seh, da gibt's noch ne Demo, die du verlinkt hast.
Genau, dann hab ich noch ne Demo, ähm, die, die, die, die find ich auch cool. Äh, da gibt's drei Buttons, Start-Stop-Animation und Grow und Shrink, wir machen mal die rechten beiden zuerst.
Wenn ich da Grow macht, dann wird einfach so ein dickrandiges, äh, grünes Diff, wird dann größer und irgendwann, das sind so, so Spalten und Zeilen mit, mit Emojis drin.
Und wenn das groß genug wird, dass da noch ne Spalte theoretisch dazu passen würde, dann kommt auch automatische Spalte dazu und, und ne Zeile.
Und bei Shrink wird's wieder kleiner. Aber so richtig fancy wird's, wenn ich den Start-Stop-Animation-Button klicke und das, was man da sieht, dass das so größer und kleiner wird,
das ist tatsächlich einfach nur ne CSS-Animation.
Also, das ist nicht irgendwie, oh, mit JavaScript und dann wird halt geguckt, naja, wo bin ich jetzt an welcher Stelle und wie viele passen da rein,
sondern das ist wirklich ne CSS-Animation und darauf kann ich aber reagieren anhand von diesem Resize-Observer.
Und je nachdem, wie viel Platz dann da ist in dem Diff, werden da halt entsprechend viele Zeilen und, äh, Spalten an Emojis drin ausgegeben.
Hm, das ist von Avent U.
Ist es?
Ja.
Tatsächlich, Avent U, ja.
Ja, der, äh, Hauptentwickler und Erfinder von Vue.js, ja.
Ha, hab ich grad gedacht, hä, Avent U, das hab ich doch schon mal gehört.
Hm.
Aber das kann eigentlich nicht sein, oder?
Wie, das kann nicht sein.
Der hat nur, der hat nur zwei Follower bei Codefans.
Ist das nicht der Avent U?
Ja, keine Ahnung.
Aber es ist auch vom Bild her, ähm, es hat ja irgendwie ein Alt-Account.
Land, genau, Location China.
Ja.
Das ist schon ein bisschen, das ist doch, das ist doch nicht der echte Avent U.
Ich weiß es nicht.
Hm.
Zwei Follower finde ich ein bisschen wenig für ein Avent U.
Aber vielleicht weiß er mal sein Passwort vergessen und seine E-Mail-Adresse.
Ja, vielleicht weiß aber auch einfach keiner, dass das ist, also vielleicht ist er einfach nie gefunden worden.
Vielleicht ist er auch einfach auf CodePen so gut wie nicht aktiv und hat halt irgendwie mal so eine Demo da.
Ja, stimmt, der hat da so.
Keiner hat was gemacht.
Man weiß es nicht.
Ich finde, das ist auch nur ein Namensvetter, kann auch sein.
Aber ich fand das echt ganz cool, weil ich zuerst dachte so, das kann doch nicht nur eine CSS-Animation sein.
Aber klar, äh, die CSS-Animation triggert eben auch den, den Resize.
Ja, ich glaube, das habe ich nur zur Hälfte verstanden, das müsste ich mir im Detail nochmal angucken.
Also, dieses Groß- und Kleinwerden, das ist wirklich nur Keyframes, 0%, 100% und 50%.
Und bei 50% setzt es halt auf 600 Pixel Breite und 300 Pixel Höhe.
Und ansonsten die Werte, die es halt gerade hat.
Und dieser Resize-Observer sagt halt nur, okay, wie viel Platz habe ich denn?
Und eine Kachel, die braucht ungefähr so und so viel Platz.
Und jetzt loop mal durch, wie viele du da reinkriegst.
Und dementsprechend wird es mit so Kacheln gefüllt.
Wo kommen diese scheiß Emojis her?
Oh, das ist gar nicht, gar nicht gut.
Ja, wo sind die Emojis?
Eigentlich ist doch Magie.
Nee, ist nicht wurscht.
Wo sind die Emojis?
Ja, da wird Serena-Text und dann wird, ähm, was macht er denn hier, äh, jetzt willst du das wissen, ne?
Ja, wahrscheinlich irgendwie mit so, mit so Unicode, äh.
Ach, der baut tatsächlich String from Codepoint, Unicode, ach du Scheiße, okay, gut.
Ja, weil er dann halt wirklich dynamisch drauf reagieren kann, ne?
Also je nachdem.
Deswegen sind's auch, es fällt mir auch jetzt erst auf, in jeder Zeile sind's ja andere.
Genau, es werden wirklich immer mehr.
Und dann müsste er ja alle Fälle abfangen und so, oder sie, äh, nee, er redet you.
Genau, und dann kannst du halt sagen, ja, nimm einfach den nächsten Emoji in der Reihe.
Das ist natürlich auch noch, das hat nebenbei lernt man noch eine fancy Art Emojis, äh, zu generieren.
Zu generieren, ja.
Also hier steht Stringpunkt from Codepoint in Klammern 0x1f00 plus r, äh, und r wird hochgezählt dann wahrscheinlich, genau.
Ja, r plus plus.
Fancy schmenzig.
Ja, das ist wirklich, äh, ja, ich hab die ganze Zeit rumgescrollt und dachte, wo sind denn die Emojis?
Die müssen doch, irgendwo müssen die doch sein, die müssen ja eigentlich im Javascript sein, wenn es dynamisch generiert wird.
Und da waren keine.
Ja, was?
Was?
Also, Resize Observer könnt ihr auch benutzen, äh, außer ihr müsst irgendwie noch den IE supporten, dann tut ihr mir wirklich leid.
Ähm, und, ja, das war's zum Resize Observer.
Ja, dann habt ihr aber auch keinen so richtigen Spaß in diesem Podcast, wenn ihr den IE supportet.
Dann habt ihr auch keinen so richtigen Spaß an der Arbeit und wahrscheinlich keinen richtigen Spaß am Leben.
Oh je.
Behaupte ich jetzt mal.
Oh je.
Nein.
Ja, der, äh.
Also, jetzt hat sich's auch endlich geklärt, wer von uns der Gute und wer der Böse ist, der Konstantin ist der Böse.
Aber nur so ganz subtil.
Ganz subtil, aber er ist einfach der Böse von uns beiden.
So, das wollte ich nur ein für alle mal klären, weil das war, das war bislang nicht klar.
War das nicht ganz klar, okay.
Nee, jetzt, jetzt.
Ich glaub, die Tendenz ging bisher in eine andere Richtung.
Richtig, und jetzt ist es endlich mal klargestellt.
Okay, also, Intersection Observer.
Oh ja, toll.
Die große Baustelle.
Nee, aber vor allem, ähm, ich fand da auf der MDN tatsächlich diesen, da find ich's ganz nett, dass da, also der Artikel ist lang und ich fand's ganz interessant tatsächlich, den, äh, den Anfang da zu lesen, weil da nämlich so ein bisschen erklärt wird, warum hat man denn das jetzt irgendwie gebraucht?
Ähm, was sind denn jetzt die konkreten Anwendungsfälle für Intersection Observer?
Also, vielleicht erst mal ganz kurz gesagt, Intersection Observer, ähm, sagt mir, ob ein Element im View-, ob sichtbar ist, ich weiß gar nicht, im Viewport?
Nee, ob sichtbar ist, es kann ja auch innerhalb von einem, von einem anderen Element mit Scrollbalken versteckt sein, ob es sichtbar ist und wenn ja, wie viel Prozent davon sichtbar sind?
Also, ich glaube, so weit, so weit geht's.
Also, das sieht man auch in dem, in der ersten visuellen Demo in dem MDN-Artikel, also so ungefähr nach 20 Mal scrollen, sieht man das auch ganz gut, das sind so orange Boxen, die man hoch und runter scrollen kann, ähm, und die haben in allen vier Ecken Prozentwerte stehen und da sieht man eben, äh, die verändern sich.
Ja, und das ist auch interessant, ähm, man muss sich mal angucken, wie die Prozentwerte sich da verändern, ähm, weil bei der, bei der obersten Box, äh, in ein Prozent Schritten, ähm, bei der nächsten sind es, äh, es ist ein bisschen komisch.
Die nächste verstehe ich auch nicht, weil die ist irgendwie mal 50.
Und dann bei der nächsten sind's, bei der nächsten sind's wieder ein, nee, da sind's zehn Prozent Schritte und bei der letzten sind's, es sind auf jeden Fall größere Schritte, da sind's irgendwie 25 Prozent Schritte, ah, genau.
Bei der letzten sind's 25 Prozent Schritte, genau.
Also, man kann auch, äh, man muss das auch nicht ...
Genau, das ist die eine Option, Threshold nennt sich die, da kann man halt sagen, okay, wie, wie krass soll's denn reagieren? Brauch ich wirklich die Information bei jeder Pixeländerung oder reicht mir das auch, wenn's, wenn's, wenn's ein bisschen später passiert?
Genau, also, und ich kann halt auch, äh, mir sagen lassen, ähm, es ist irgendwie ein Pixel davon sichtbar, sag mir dann mal Bescheid oder sag mir erst Bescheid, wenn die Hälfte mindestens davon sichtbar ist oder so.
Ähm, und, äh, die, die Anwendungsfälle dafür, äh, die sind zum Beispiel Lazy Loading von Bildern früher, mittlerweile, würd ich sagen, braucht man's nicht mehr, aber als man das so was noch selbst gebaut hat, Lazy Loading beim Runterscrollen, ähm, Infinite Scrolling, äh, auf Webseiten, also so der Klassiker, ich scroll runter und,
äh, sobald ich einen bestimmten Punkt geladen, äh, den Punkt erreicht hab, wird was nachgeladen, ähm, am besten nicht erst, wenn man ganz unten ist, das nervt mich immer, wenn Infinite Scrolling, wenn ich immer erst, oder wenn ich einen Knopf drücken muss.
Ja, und, und vor allem, bitte, bitte, dann macht, wenn ihr noch eine Sockelleiste habt, die irgendwie, entweder sticky, oder macht, macht die Links nicht in eine Sockelleiste, weil ich hab echt schon Seiten gesehen, du konntest, du konntest nicht, du kommst nicht zum Impressum, also der Impressumslink ist da, und du kommst aber nicht hin, weil sobald du unten bist, lädst du was nach.
Das war bei Facebook mal eine Zeit lang so.
Ja? Ähm, ja, das war bei Facebook mal, man ist nicht zum, ich weiß nicht, Impressum hatten die wahrscheinlich eh nie, aber in diese, in diese Futterleiste ist man nie hingekommen, oder nur, immer in dem Augenblick, wo man dachte, ah, jetzt kann ich klicken, es wurde wieder nachgeladen.
Ja, der hatte da bescheuert.
Ähm, ja, dann musste man halt relativ lange scrollen, bis irgendwann, weil die hatten irgendwie so ein Limit drin, nach, nach 95 Mal nachladen, konntest du dann zu dem.
Da hast du Facebook zu Ende gespielt.
Genau, das geht, das geht immer noch übrigens, ich hab da nämlich mal so ein kleines Skript gebaut, wo ich, egal, wo ich Werbung irgendwie, äh, nicht so wichtig.
Ja, ich, ich hab, ich hab manchmal Spaß mit der Browserkonsole und diversen Social Networks und probier da Sachen aus, wenn mich was nervt, irgendwie Werbung oder so, dann.
Ähm, ja, äh, ich weiß auf jeden Fall, dass es immer noch ein Limit gibt, vertraut mir.
Ähm, es gibt auch ein Limit bei Xing, wie oft man auf Profile klickt, wusstest du das?
Nein, das wusste ich nicht. Das hast du aber auch nicht durch manuell klicken.
Mehr sage ich dazu jetzt auch nicht.
Ich glaube, es könnte vielleicht sein, dass großes Interesse an unseren Skripten besteht, so in Zukunft.
Die sollten wir dann, die, die veröffentlichen wir dann mal, ähm, unter Pseudonym.
Genau.
Wir sagen dann, ah, wir haben da was, was Interessantes gefunden von, von Avenue.
Guy, Guy, guck ich, genau.
Von Avenue mit zwei Followern.
Avenue bei Code Penden mit zwei Followern.
Location China.
Location China hat, hat was Interessantes da irgendwie.
Das müsst ihr euch unbedingt mal angucken, da kann man, da kann man verrückte Sachen mitmachen.
Egal.
Können wir nie tun, aber dass das jemand, das da immer noch auf die Idee kam.
Nee, also, vielleicht, egal, ich versuche nochmal zurück zum Thema zu kommen.
Ich habe zwar nicht nur so halb Lust, aber egal, das andere ist auch interessant.
Ähm, und jetzt kommt der Punkt, wo ich mir gedacht habe, das ist was, womit ich schon zu tun hatte und mir gedacht habe, ja, das ist das, was die wollen.
Nämlich, äh, Sichtbarkeit von Werbemitteln.
Ähm, ich weiß, ich habe, also wer sich mal Werbe, so Bannerwerbung angeguckt hat, was darin so technisch passiert, da kann man eine Menge lernen.
Und das sollte man dann, das meiste davon sollte man sofort wieder vergessen.
Das, ähm, das ist die, die, wenn, wer die schwarzeste Magie im Internet finden will, das waren früher die, äh, die Click-Jacking-Skripte, äh, mit denen man bei Facebook heimlich Klicks, äh, Like-Klicks eingesammelt hat.
Und jetzt ist es, oder wahrscheinlich damals auch schon, es ist auf jeden Fall die Werbung.
Wer wirklich in, in, in den dunklen, bösen Schlund des Internets gucken will, der soll sich mal, der soll sich mal Werbemittel inspizieren, äh, inspekten im, im Browser.
Das ist wirklich die Hölle. Also, was da abgeht, wie viele verschachtelte iFrames da ineinander sind.
Und die benutzen dann teilweise noch irgendwelche uralten, obskuren HTML- und, und JavaScript-Sachen, die eigentlich schon gar nicht mehr im Standard sind,
aber irgendwie noch unterstützt werden und einem irgendeine komische Information geben kann.
Und glaub mir, die tracken alles, was geht.
Alles, wo nicht unbedingt so eine, so eine, so eine, so eine, äh, ja, so ein Request aufgeht, darf ich das tracken.
Alles, wo das nicht aufgeht, garantiert trackt das Werbemittel das.
Ob das irgendwie die Position vom Device ist oder sonst irgendwas.
Alles, alles, jede Schnittstelle, jede Scheiß-Schnittstelle wird da abgefragt.
Das ist richtig pervers, ähm, aber es war mir schon klar, weil das war immer wieder die Frage, wenn, wenn, wenn, wenn wir es mit Werbemitteln zu tun haben, wie findet man denn raus, ob was angezeigt wurde und wie oft und wie viel davon.
Und das geht dann natürlich mit Intersection Observer perfekt, weil du tatsächlich sogar sagen kannst, ich bezahle dir nur ein, wurde nun zum Drittel, du kriegst nur ein Drittel vom Geld, weil das Werbemittel wurde nur ein Drittel angezeigt.
Könnte man theoretisch machen.
Ja, ja.
Damit, ähm, natürlich, äh, glaube ich, dass du nicht jeden Edge-Case damit abgebildet kriegst, weil man vielleicht dann doch noch irgendwie schafft, was drüber zu legen, was aber nicht, also ich glaube, man kann, wenn man ganz obskur unterwegs ist, könnte man es schaffen, dass etwas als sichtbar angezeigt, äh, oder wo Intersection Observer sagt, es ist sichtbar, es ist aber doch nicht sichtbar.
Ich glaube, da gibt es eine Menge interessanter Wege.
Ja, gut, klar, drüberlegen kannst du immer was, also darum geht's ja beim Intersection Observer auch gar nicht, sondern du sagst ja, das Element ist das Root-Element, ähm, und das sind die Elemente, die ich beobachten will, und im Verhältnis zueinander sind die, äh, die Intersection.
Naja, den Werbern geht's schon darum.
Ja, ja, denen geht's schon darum, ja klar.
Also, gut, als Werber musst du nicht, also, das Skript läuft ja am Ende bei dem Anbieter, wo die Werbung halt geschaltet wird, und der kann ja auch nur die Tracking-Informationen weitergeben.
Das glaubst du.
Achso, beziehungsweise gut, über iFrames kannst du theoretisch auch, ja, ne, ne, ne, ne, es ist noch viel schlimmer, ähm, wenn, ähm, wenn du sie lässt, die Leute, die die Werbemittel ausspielen, dann geben die dir ein Skript, was du direkt bei dir einbindest, ja, was, was von denen kommt.
Das ist das Allerschlimmste, dann übernehmen die komplett deine Seite eigentlich und können damit alles machen, was sie wollen. Das dürft ihr, also, wenn ihr irgendwo mal Werbung einbaut, das dürft ihr auf keinen Fall machen.
Nee, immer irgendwie Sandboxen, eigentlich immer ein iFrame.
Ich glaube, auch Google möchte das, ich glaube, auch Google möchte das mit seinem AdSense, der Standardweg ist, glaube ich, so, den die, der Standardweg, schon lang nicht mehr gemacht, aber früher war das so, der Standardweg war, hier hast du ein Skript, tu das mal in die Seite und dann kannst du hier Werbemittel ausspielen.
Und, äh, nee, das macht man nicht. Unbedingt immer einen iFrame drumherum machen, weil sonst kann, sonst kann das, was, was, ja, das Werbemittel oder keine Ahnung, was ihr auch immer einbindet, mit eurer Seite alles Mögliche machen.
Ähm, wieso ist das denn so verkratzt?
Hm, ich glaube, meine Kamera ist kaputt. Egal, so.
Ähm, genau, also, aber ihr könnt euch vorstellen, wenn man tatsächlich prozentual anzeigen kann, welches Element wie viel, wie viel sichtbar ist, ähm, dass das natürlich für Leute, die Werbung anzeigen wollen, sehr interessant ist.
Dann haben wir hier noch als, als weiteren Punkt irgendwie, ähm, ob es sinnvoll ist, irgendwie Animations zu starten, ähm, je nachdem, ob man es überhaupt sehen kann oder nicht, finde ich auch, tatsächlich ist es auch so ein Performance-Ding, was man damit machen kann, ähm, genau, und da wird auch nochmal Get Bowning Client Wrecked, äh, erwähnt, weil man damit natürlich auch früher irgendwelche wilden Berechnungen gemacht hat, mit denen man hat versucht hat, rauszufinden, ähm, ob denn etwas sichtbar ist oder nicht.
Wobei, ich glaube, richtig rausfinden kann.
Der letzte, der letzte Halbsatz sagt es eigentlich, äh, in dem Absatz über Get Bowning Client Wrecked, things can get downright ugly.
Genau, und vom Prinzip her funktioniert es wieder, ähm, eigentlich genauso, wie wir es vorhin schon gesagt haben.
Was da aber sehr interessant ist, ist dieser Threshold auf jeden Fall.
Ähm, genau, also, ich kann einen Margin einerseits festlegen, also wirklich nochmal, okay, lass so und so viel Pixel spielen,
Raum, aber eben auch diesen Threshold, dass ich sage, ich möchte nicht über jede Änderung informiert werden, ist so ein bisschen wie so ein De-Bouncing, ne, ähm, sondern erst, wenn, wenn die Schwelle groß genug ist, erst dann brauche ich die Information.
Und das ist auch das, was wir gesehen haben, wo wir uns gewundert haben bei dem zweiten, bei dieser zweiten Box, ähm, die da sich nur so sporadisch updatet, das ist eben genau das, also die hat einen Threshold von 50%, also bei der, genau bei der 50%-Marke.
Das heißt, nur, wenn ich diese 50%-Marke über oder unterschreite von dieser Box, ändert sich, kriege ich überhaupt irgendwie was mit, äh, von dem Wert.
Also ich kriege nur mit, wenn die zur Hälfte verschwindet oder zur Hälfte wieder auftaucht.
Ah ja, steht da, hätten sie auch mal lesen können, steht natürlich direkt oben drüber.
Genau.
Ja genau, und die letzte tatsächlich 25%, das ist das, was ich vorhin schon gesagt habe, wobei da auch bei mir obskure Zahlen rauskommen.
Ich kriege nämlich erst mal 99 und dann kriege ich irgendwie 73 und dann kriege ich 48 und dann kriege ich 24.
Naja, das hat vorhin irgendwie besser geklappt, ich glaub, ich muss die Seite nochmal neu laden.
Ähm, genau, also, und da gibt's, da, wie schon gesagt, dazu könnte man eine komplette oder vielleicht sogar zwei Sendungen machen, wenn man da wirklich in die Tiefe geht.
Genau, weil da kommen dann so Sachen wie dann, Overflow spielt dann irgendwie da eine Rolle und so Clipping, das dann passiert und, äh, mit iFrames ist nochmal irgendwie speziell und, also, da gibt's viele verschiedene Edge-Cases und, ähm.
Hast du aber jetzt, äh, ne Demo, äh, verlinkt, die ich ziemlich cool finde, ehrlich gesagt, ich, ich, ich nehm die dir jetzt, die kommt nämlich als nächstes jetzt, die nehm ich dir jetzt, nehm ich dir jetzt einfach mal weg.
Ähm, da hast du nämlich auch ne CodePen-Demo, wo, äh, diesmal nicht von Evan Yu, sondern von Simon Evans, aber irgendwie wieder was mit Evan, das ist irgendwie, ähm, genau, du hast, du hast rechts oben, äh, so ein, so ein, äh, so ein Rechteck, wo drinsteht, nothing is visible, scroll und dann scrollt man und dann kommt irgendwann ein Element reingefahren
und das scheint, äh, tatsächlich beim ersten Pixel direkt das schon zu ändern, weil sobald, wirklich nur ein ganz kleiner Teil davon sichtbar ist, steht Item 1 is visible, ähm, also tatsächlich, äh, ja genau, da fährt halt von unten diese Box rein
und sobald's wieder verschwindet, steht da wieder nothing is visible und dann kommt Item 2 und dann steht ja Item 2 is visible und so weiter
und dann, äh, das Item 3 ist dann noch ein bisschen kleiner, ähm, genau, und so, so kann man sich dann, äh, da durchscrollen und, ähm, kriegt relativ schön gezeigt, ähm, dass, dass diese, diese, diese, ja, diese Sichtbarkeitserkennung
tatsächlich ziemlich gut funktioniert.
Finde ich, finde ich echt eine schöne Demo, ist auch visuell, finde ich, schön gemacht, ähm, braucht man eigentlich dann gar nichts.
Ja, mir auch gefallen, deswegen hab ich die aufgenommen.
Deswegen darf ich auch, brauche ich nix selber stricken.
Genau, und aber auch bei der muss ich sagen, ähm, ich hätte mir, das, und da bin ich dann leider am Ende nicht mehr ganz dazu gekommen,
weil das eben das Komplizierteste war, umzusetzen und sich zu überlegen, ja, was ist denn jetzt sinnvoller Anwendungsfall und wie kann ich denn jetzt so minimal runterbrechen, dass ich vier Zeilen Code hab oder so, und das, daran bin ich dann gescheitert, äh, das hab ich nicht auf die Schnelle hingekriegt, aber das baue ich vielleicht noch ein hinterher, muss ich mal gucken. Genau.
Aber die Demo ist echt, die, die zeigt wirklich sehr, sehr gut, äh, wie das Ding funktioniert und, äh, ich, ja, auch nur ein Teil von den Optionen wahrscheinlich.
Ist auch schon fast ein bisschen zu komplex, also wenn man das JavaScript anschaut, ist schon trotzdem viel, was da passiert, aber es ist halbwegs nachvollziehbar, ne, was da, äh, das nimmt sich halt den Text aus diesen Elementen dann raus und zeigt dann den an und es lockt auch noch in die Konsole, das könnte man, hätte man sich auch sparen können in der CodePen-Demo.
Das ist das, was ich meinte mit ne Minimaldemo, das ist das, was ich immer versuche, wenn ich ne Demo baue, dass man halt wirklich, dass kein Quatsch drumherum ist, dass man wirklich die Essenz von, von dem Ding irgendwie, äh, begreift, aber, ja gut, ich, ich finde die auf jeden Fall, äh,
sehr schön gemacht, um das oben zu verstehen, wie das Ding generell, was es tut.
Und dann gibt's noch, äh, das fand ich auch ganz schön, einen Intersection Observer Visualizer, auch als CodePen, ich glaube allerdings, dass da was nicht so ganz sauber funktioniert, aber vom, vom Grundprinzip her ist es, äh, cool gemacht, ich hab da so ein, ähm, türkisenes, gestricheltes, äh, Rechteck und innen drin einen weißen Container mit Scrollbar, in dem wiederum sich mehrere pinke Container befinden, die ich scrollen kann.
Und da kann ich dann links an so zwei, ähm, Input-Reglern, kann ich das Root-Margin und das Threshold, was ich eben halt als, äh, in dem Konfigurationsobjekt übergeben kann, bei dem, bei der Instanzierung, ähm, kann ich mit rumspielen,
so eine Shadow-Box, äh, in der Größe von dieser pinken Box, was sich dadurch verändert an dem Threshold.
Und, äh, es scheint mir nur, also die Boxen sind nicht ganz aligned, diese Shadows sind ein bisschen zu weit nach rechts versetzt und auch unten, wenn ich da raus und rein scrolle, hab ich das Gefühl, es entfärbt sich schon ein paar Pixel zu früh eigentlich.
Das, genau das hab ich grad auch gesehen, ja.
Also, ich glaube, dass da leider irgendwas verschoben ist in der Demo, vielleicht funktioniert die im Safari besser oder ich weiß es nicht, was da falsch ist, ähm, ist wahrscheinlich auch schon ein bisschen älter jetzt, aber ich fand die eigentlich ganz cool gemacht.
Ähm, und ich hab dann auch mal geguckt, wer hat die denn gemacht? Michelle Barker, weil ich fand das cool visualisiert, also, dass man sich das besser vorstellen kann und dafür tut die immer noch, also, auch wenn es jetzt nicht ganz stimmt, aber so grob schafft das ein besseres Verständnis, was macht denn dieser Root-Margin eigentlich überhaupt und, und dieser Threshold, wofür sorgt der denn?
Ähm, und da hab ich geguckt, Michelle Barker ist eine Entwicklerin und die hat auch eine, eine sehr fancy Seite, wenn du da mal draufklickst.
Oh, sowas mag ich ja. Sehr schön.
Und dann warte mal, bis der Text ganz da ist und dann kannst du mit der Maus da mit so einer Lupe drüberfahren und diesen Texteffekt, wollte ich noch gucken, wie sie das gemacht hat, ob das dann SVG ist oder wie sie das da füllt, also, schaut euch das mal an.
Und der Rand von diesem Kreis zeigt auch schon Text an, also, da ist ja nochmal so ein Rahmen drumherum, so ein runder.
Genau, der wird ja auch irgendwie über so Compositing.
Und auch der zeigt was an, was irgendwie unten drunter ist, ist ja crazy. Interesting. Sehr cool.
Und auch der, also der Effekt gefällt mir auch gut, das sieht wirklich so Neonröhren leuchtmäßig aus, also so für unsere Seite auch.
Und die Farbe des Kreises ändert sich je nach der Position, wo das Ding auf der Seite ist.
Genau, ich denke mal, das ist so ein Gradialverlauf, der da dann irgendwie einfach im Hintergrund liegt.
Und dann dieser Kreis um die Maus schneidet das aus, aber ich fand's, also, es ist echt fancy.
Fancy.
Ja.
Ja, wobei ich jetzt ja tippen würde, dass man irgendwie so eine Art Maskierung ist und das Ding halt quasi doppelt da ist.
Genau, genau, hätte ich jetzt auch gedacht, ja.
Ja, aber es ist total cool.
Und ich finde auch, dass, ich mag auch das, das, das, das ist die Animation, die ich gerne für unsere Seite hätte, fürs Hamburger Menü, dass du quasi sowas hast, was ich tatsächlich vom Hamburger Menü ausfällt.
Genau, aber das ist dann auch der gleiche, der gleiche Radialverlauf im Hintergrund.
Genau, dieser, dieser Kreis fährt dann auf.
Also, das ist der Kreis von dem Maus-Cursor.
Also, wenn du guckst ...
Nee, das ist ein anderer.
Das ist ein anderer.
Nee, das ist orange bis pink und grün.
Ja, aber geh mal ganz, geh mal ganz, geh mal ganz, geh mal ganz nach links unten.
Aber am Anfang sieht's so aus.
Interessant.
Ja.
Das ist lila und ...
Aber kann es sein, dass er sich tatsächlich, kann es sein, dass er sich wirklich verändert mit der Position?
Keine Ahnung.
Ich glaub, der verändert sich wirklich mit der Position.
Also, der ist, weil es würde mich, es ist jetzt sehr ...
Also, es ist jedenfalls echt schön gemacht.
Wir reden jetzt sehr visuell, das ist grad, ihr müsst euch angucken.
Vielleicht zeigen wir die Seite auch mal noch im Stream nächstes Mal.
Ja, das ist eine gute Idee.
Ich kann die mal ...
Und dann können wir uns auch im Stream mal gemeinsam anschauen, wie's gemacht ist.
Wie sie das gemacht hat, ja.
Ja.
Sehr gerne.
Äh ...
Das find ich gut.
Gleich mal hier ...
Wo haben wir denn ...
Streams?
Das ist sehr gut.
Siebter Zehnter.
Sehr gut.
Genau.
Sehr gut.
So.
Ja, wollte ich nur am Rand, weil ich die Seite gesehen hab und dachte, da ist echt ...
Das ist doch was für uns.
Nee, das ist doch was für uns.
Das ist doch was für uns.
So.
Ja, genau.
Meine Demo, die kommt auch noch in die ... in die Show Notes.
Ähm ...
Aber wie gesagt, das ist nichts Verrücktes.
Ich hab halt versucht, es minimal runterzubrechen.
und Intersection Observer ist jetzt halt nicht mit dabei, aber die beiden anderen.
Mhm.
Äh, genau.
Und dann ... vielleicht noch ... ähm ... das, was ich jetzt gerade am Anfang geschoben hab,
ich muss es noch kurz erinnern.
Ich hab mich ... ich hab mich vorhin verschrieben ... bei Observer und hatte ein E zu viel drin.
Und hab dann gelesen, Obis Server.
Also ... also ein ... ein fettleibiger Kellner.
Und ich ... und ich hab das ... ich hab das gelesen ...
Ja, das musst du, das musst du in die Show Notes packen.
Ich war auch noch auf Trello und hab das gelesen und hab's direkt kopiert
und hab eine Instanz von Stable Diffusion aufgemacht.
Also von diesem Text-to-to-Image-AI-Gedöns, über das wir im letzten Stream gesprochen haben.
Pack das Bild bitte in die Show Notes.
Und das Bild kommt auch in die Show Notes und ...
Obis Server.
Obis Server und es kam halt heraus eine ...
Es ist gut.
Eine stark übergewichtige Kellnerin, die mit einem Lächeln zwei Teller mit Essen serviert.
Vielleicht sollte man da den Image-Filter noch mal drüber laufen lassen.
Aber nee, das passt schon, das ist ...
Face, äh, Face, äh, ja, genau, Face-Things.
Aber ist egal, das passt schon, das ist, das ist genau so ...
Ich würde sagen, äh ...
Genau.
Ich mein, das ist sehr witzig.
Ich hab das aus Spaß reingeschrieben in die Show Notes, weil ich eben diesen Vertipper und diesen Verleser hatte.
Ja, ein paar Sekunden später hat das ...
Ich hab das durchgeführt, das ist das Bild.
Wieso ist da jetzt plötzlich ein Bild drin?
Und dann seh ich: Ah, okay.
Eine dicke Kellnerin, sehr gut.
Ähm ...
Ja, aber das ist auch interessant, äh, das Server ...
Das ist ja ... Also, ich find das so aus ... aus ... aus Gender-Sicht interessant.
Ich hab natürlich an einen Mann gedacht, bei Kellner, ne?
Mhm.
Und, ähm, es kam jetzt aber eine Frau raus.
Oder zumindest eine weiblich gelesene Person.
Ich hab mehrere Iterationen gemacht, also, es kam auch, ähm, das war halt die erste, und es kamen dann auch noch männliche Kellner.
Nee, das fand ich gut.
Das fand ich gut.
Das ist halt im Englischen, es gibt halt einfach diese Unterscheidung nicht.
Genau.
Gut.
Ja, dann sind wir auch schon durch mit dem Thema.
Das war relativ abstrakt heute, glaub ich, aber es ist vielleicht mehr so ein, äh ...
weniger ein "Wir erklären euch ganz genau, wie das geht, sondern mehr so ein Häppchen."
Richtig, eher so ein Anreiz, so "Hey, guck mal, das gibt's", weil ich glaub, dass viele von diesen Observern vielleicht auch gar noch nicht gehört haben, ähm, und ...
Genau.
Ja, schaut euch das an, also, ich mein, das machen wir hier auch, dass wir einfach Sachen sagen, "Hey, guck mal, das gibt's überhaupt", und, äh, mehr Details erhaltet ihr in den Links, und, äh, oder ihr könnt mal dran denken, also, klar, das nächste Mal, wenn ihr in der Situation seid, "Ah, ich brauch, ich muss bei Resize irgendwas machen", dann denkt ihr halt eben vielleicht nicht, "Ah, dann mach ich halt wieder Add-Event-Listener-Resize",
und mach hier "Get Bown-In-Client-Racked", sondern ihr wisst, "Ah, da gab's doch was", und dann guckt ihr nochmal da.
Vielleicht aber eh nur so alte Leute wie mir.
Vielleicht.
Ja, gut, dann, äh, sind wir durch mit dem Thema. Mensch, heute alles echt zackig.
Raggi-zacki, aber wir sind trotzdem schon bei anderthalb Stunden.
Ja, ich fäng dann, dann machen wir jetzt noch das "Geil-Teil", und dann, dann ist es auch gut, ne?
Ajo, Dohane.
Das "Geil-Teil".
"Geil-Teil".
Das war live.
Ähm, ja.
Etwas, ein kleines, das sind eigentlich zwei. Das eine, das mache ich, weil ich euch das Outro ersparen will, was wir schon mal hatten.
Ähm, weiß nicht, ob ihr das schon angehört habt. Egal, äh, wir fangen mit dem, äh, mit dem ersten fangen wir an, oder?
Wie wär's, wir fangen mal an mit dem ersten.
Ja, ja, das ist gut, ja.
Und zwar gibt es jetzt, äh, "canidev.tools". Äh, also ihr kennt vielleicht "can I use" und "can I email" und keine Ahnung, was es sonst noch alles gibt, ähm, es gibt auch "canidev.tools".
Und das ist, äh, eine Liste, ähm, von, von Features, von Dev-Tools in Browsern und von welchem Browser sie unterstützt werden.
Und das finde ich ziemlich, äh, ziemlich hilfreich.
Also erstens, weil man dadurch, weil man dadurch neue Features vielleicht entdeckt, die man in seinem Standardbrowser gar nicht hat, aber denkt so, ey, das, das wäre doch mal nützlich, wenn ich irgendwie entwickle.
Ähm, das war bei mir früher so, als ich Firefox verwendet hab noch, ich hab, ich hab eine Weile Firefox verwendet zum Entwickeln, ähm, also noch gar nicht, noch gar nicht so lange her, äh, deswegen sag ich jetzt, weil früher haben alle Firefox verwendet zum Entwickeln mit Firebug.
Ich meine aber später danach nochmal, als irgendwie Firefox-Quantum rauskam, ähm, hab ich dann gesagt, ha, jetzt mach ich das nochmal und hab ich ein paar Jahre noch benutzt.
Wusste aber, dass es, ähm, in Chrome, in den Dev-Tools, äh, was gibt, was es in Firefox damals nicht gab, nämlich, ähm, dass man dieses Break-On, kennst du das?
Also, dass das JavaScript, ähm, dass das ein Break-Point gesetzt wird, ähm, sobald zum Beispiel sich im DOM was ändert. Also, quasi, äh, wie wir jetzt heute gelernt haben, Mutation Observer, wenn man so will, ne?
Ja, ähm, dass dann aber tatsächlich ein Break-Point genau an die Stelle ins JavaScript geht, das dann eben diesen, diesen Change ausgelöst hat. Und das gab's halt, ich weiß nicht, ob's das mittlerweile in Firefox gibt, gab's damals nicht. Und das heißt, ich bin dann immer, um das zu machen, hab ich dann halt Chrome aufgemacht.
Und darum gibt's in Firefox was, was ich, was meines Wissens nach bis heute in Chrome nicht gibt, ähm, nämlich, äh, dieses, dass man angezeigt kriegt, welche Schriftart wirklich geladen wird jetzt.
Also, welche Schriftart ist das jetzt gerade? Und dann so, mit so, mit noch, mit noch Font-Infos dabei.
Firefox hatte zum Beispiel auch den ersten Grid-Inspektor, sowas gibt's mittlerweile, glaub ich, in Chrome auch.
Aber genau für solche Sachen, wo die einen Dev-Tools was können und die anderen vielleicht nicht, ist es total nützlich, aber auf Can-I-Dev-Tools mal zu gucken, was gibt's denn so?
Und dann kann man sagen, ah, in dem Browser kann ich irgendwie dieses Tool, also hier, keine Ahnung, was gibt's denn zum Beispiel jetzt hier?
Ich geh jetzt einfach mal zum Spaß auf Accessibility, ähm, und sehe dann zum Beispiel in Safari gibt's keinen Find-Color-Contrast.
äh, und kein Show-Tab-Order, das gibt's aber in allen anderen.
Ähm, oder den Accessibility-Tree kann ich nicht angucken.
Ähm, aber in den anderen geht's. Also, wenn jetzt Safari mein Entwicklungsbrowser ist, kann ich sagen, okay, gut, ich könnte aber jetzt das in, in Chrome oder in Firefox, hab ich das, da kann ich das, äh, kann ich das machen.
Ähm, oder beispielsweise, ich geh mal jetzt zu JavaScript, ähm, ich denke, das wird auch noch erweitert werden, diese Liste, weil die sind noch nicht so richtig, da könnte meiner Meinung nach noch viel mehr drin sein, weil ich glaube, äh, da ...
Ja, man kann da auch selber dazu beitragen, man kann auf GitHub da Pull-Requests stellen.
Genau, das wollte ich, genau, also die Listen, die Listen sind noch relativ klein, ähm, aber es ist halt dann, ja, im Prinzip gibt's, da sind auch keine Browser-Versionen drin derzeit, es ist einfach nur, äh, wahrscheinlich die neueste Version, nehm ich mal an, auf die, die sich bezieht, äh, von, von den, äh, was haben wir hier, Chrome, Firefox, Edge, Safari und Opera, glaube ich.
Ähm, und das ist einfach nur ein Haken oder eben, eben keine, also, oder eben, ja, gibt's oder gibt's nicht. Es ist relativ einfach noch diese Daten, genau.
Und ich finde dieses Interface ganz cool gemacht, ähm, du kannst da irgendwie dann auch sortieren, äh, und, und kannst die einzelnen Kategorien durchgehen, also Konsole, Elemente, JavaScript, Network, Other, Sources, Accessibility, ähm, hast auch ein Filter, wo du eintippen kannst, wenn du irgendwie was Bestimmtes suchst.
Ähm, siehst dann auch, äh, wenn du auf All gehst, ich glaub nicht, das glaubst du bei allen, aber bei All ist es am eindrucksvollsten, ähm, welcher Browser wie viele von denen unterstützt, und da ist Chrome halt zum Beispiel ganz vorne mit 93, aber hat auch nicht alles, weil zum Beispiel at Audio Breakpoint, gibt's in Chrome nicht, aber dafür in Safari, äh, at Audio Breakpoint.
Wäre ich nie drauf gekommen, dass man sowas braucht, aber, ähm, ja, ich entwickle ja auch nicht mit der, äh, Web Audio API. Ähm, da sieht man dann zum Beispiel, äh, ja, also Chrome ist ganz vorne, äh, leider Safari irgendwie weit hinten, aber ich glaube, die Jen Simmons, äh, bei, bei Apple, die ist da, die ist da ganz vorne mit dabei, ähm, dass da jetzt sich ganz viel tut.
Also, ziemlich coole, äh, Übersicht, falls ihr mal irgendwie ein bestimmtes Tool sucht und denkt, ja, gibt's das denn eigentlich in meinem Browser, ähm, und genau, was du vorhin noch gesagt hast, da kann man auch selbst was hinzufügen,
und das find ich tatsächlich ganz witzig gelöst, weil auf dieser Seite hast du einen Add New Button, und wenn du auf den draufdrückst, dann kannst du, kommst du direkt zu GitHub, um Issue zu eröffnen.
Und das gibt auch, wenn du, wenn du eins ausgewählt hast, gibt's auch einen Edit Button, und dann kommst du auch, äh, an die entsprechende Stelle.
Ah, das hab ich noch gar nicht gesehen. Ah ja, da gibt's einen Edit Button, und dann komm ich auch direkt, ja, dann kann ich direkt, da komm ich zu Fork, dann kann ich direkt Forken.
Ja, das find ich deswegen eine schöne Identifikation.
Also direkt auch zu der Datei, Add Inline Styles jetzt zum Beispiel, also je nachdem, wo du da klickst, ist gut gemacht.
Würde mich interessieren, ob das ein Framework ist, was sie da genutzt haben, um aus dem Repo das zu generieren. Muss ich mir mal angucken, ja, also find ich, find ich echt schön. Also das Tool schön, ähm, die Art und Weise, wie's gemacht ist, schön. Schönes Geilteil.
Ja, dankeschön. Also, äh, ich denk, ich werd's die nächste Zeit auf jeden Fall noch ein paar Mal verwenden. Und, ähm, eigentlich find ich's auch total interessant wegen dieser Integration mit GitHub, das ist, das ist eine Sache, die man sich da echt abgucken kann.
Ich hab auch noch nicht auf jeden Knopf da draufgedrückt, den's da gibt. Äh, ich glaub, da gibt's vielleicht noch einiges zu entdecken. Okay, und so, weil ich euch einfach nicht entlassen kann, ohne was, ohne euch ein bisschen zu quälen.
Ohne Quatsch. Ohne Quatsch geht's halt nicht. Ähm, vielleicht erinnert sich der eine oder die andere an ein Outro, was wir mal hatten. Ähm, oh, ich hab's jetzt gerade aus Versehen schon gestartet, oh Gott, nein, ich kann's jetzt auf keinen Fall hören.
Ähm, und, äh, immer wieder, immer wieder hab ich viel mehr ein, es gibt doch diesen einen Menschen, der so, der so, äh, bekannte Stücke irgendwie mit, mit schräg klingender Flöte spielt.
Und ich weiß nicht, ob wir's vielleicht schon mal verlinkt haben, aber ich müsste jetzt einfach da nochmal durch. Ähm, Chariots of Fire, allerdings mit schlecht gespielter Blockflöte. Ähm, wer, also, vielleicht kennt ihr das Lied nicht, ähm, vom Namen her, aber wenn ihr's dann hört,
hört, dann kennt ihr's im Zusammenhang mit irgendwelchen, äh.
Ich hab bestimmt schon mal eine Szene gesehen, wo jemand in Zeitlupe rennt.
Ja, genau, wo jemand in Zeitlupe rennt, oder irgendwelche Olympiadensachen irgendwie, ich glaub, daher kenn ich's, oder zumindest bilde ich's mir ein, dass, dass es früher dafür verwendet wurde. Ähm, das mit Flöte, das ist quasi das, das inoffizielle Outro der Sendung heute. Wir haben natürlich noch das.
Ich hab's mir vorhin schon angehört, ja. Es lohnt sich.
Und es fängt, es fängt, es fängt auch einfach sehr, sehr, ähm, nett an und wird dann merkwürdig. Und, äh, ich kann's auf jeden Fall nur empfehlen. Also, Chariots of Fire von DJ Dettweiler Flute Emotional Remix heißt das.
Auch noch, ja. Es ist, äh, auf Soundcloud, da war ich auch schon länger nicht mehr. Das ist, äh, die, die machen, dass es die immer noch gibt.
Mhm.
Finde ich, finde ich irgendwie, ähm, ja, bemerkenswert. Und irgendwie hat sich auch, das Layout der Seite hat sich auch seit 100 Jahren nicht verändert, aber es war vielleicht auch einfach gut.
Es funktioniert, genau. Ähm, ja, das, hört, hört euch das mal an. Und ich, äh, nehme aber keine, keine Beschwerden oder Klagen entgegen. Beschwert euch, wenn, wenn das eure Ohren kaputt macht, beschwert euch einfach bei Olli Schulz.
Oder so. Weil nicht bei mir.
Sehr gut.
Sagt nicht, ich hätte euch nicht gewarnt.
Genau. Damit, ähm, ja.
Ist das geil, könnte sein.
Und dann kommt jetzt.
Ist das geil, oder? Oh Gott, nein.
Das Ende.
Ey, aber der Satz hat gepasst.
Immerhin.
Aus Versehen, ne?
Ja.
Mensch, wir haben es wieder geschafft.
Auch wenn, wenn ein bisschen später, äh, als geplant.
Ähm, wir haben eine, oh, nur eineinhalb Stunden, Mensch.
Das ist, wir sind ja quasi, kriegst recht durchgegangen.
Ganz kurze Folge hier.
Wahnsinn.
Naja, ihr sollt ja was kriegen für euer Geld, oder irgendwie so, ne?
Ihr sollt ja nichts kriegen für euer Geld.
Apropos euer Geld.
Jetzt habe ich natürlich noch keine Jingles produziert, die euch nach eurem Geld fragen.
Aber dann fragen wir jetzt einfach nochmal danach.
Wenn, äh, wenn euch das gefallen hat hier.
Wenn euch das, ja, das mache ich jetzt nochmal Freestyle, aber es kommen vielleicht, ja, irgendwann, wenn ich noch,
ach, mich muss die Muse küssen.
Es kann sein, dass es morgen ist, vielleicht auch in den ersten sieben Jahren.
Man weiß es nicht so genau.
Die, die Muse kommt und dann steckt sie einem die Zunge in den Hals.
So ist es halt manchmal.
Und manchmal bleibt sie halt einfach weg.
Ähm, genau.
Aber wenn euch das gefallen hat, ähm, dann denkt doch drüber nach, uns zu unterstützen, ähm, auf wo wir sind, ist vorne.show oder www.siv.de slash unterstützen.
Könnt ihr mal schauen, wie ihr uns unterstützen könnt.
Es gibt verschiedene Möglichkeiten.
Ihr könnt uns eine Spende da lassen.
Ihr könnt uns bei Twitch abonnieren.
Ihr könnt uns bei YouTube folgen.
Ihr könnt uns bei Twitter folgen.
Ihr könnt unser Merch kaufen.
Äh, ihr könnt uns was von unseren Wunschlisten schenken.
Ihr könnt dem Konstantin, äh, obskure, äh, Oliven schicken aus Spanien.
Es gibt eine Menge Möglichkeiten.
Wir würden uns sehr freuen, ähm, äh, wenn wir was zurückkriegen.
Und, äh, wir freuen uns auch sehr über Feedback.
Also, wenn ihr irgendwas habt, wenn wir irgendwas mal wieder falsch gesagt haben, dann gerne auch.
Oder auch, wenn wir was besonders gut gemacht haben.
Das freuen wir besonders gerne.
Genau.
Also, nach der letzten Sendung, wo wir, wo wir so einen kleinen Aufruf gestartet haben, kamen tatsächlich, äh, ich glaube, äh, ein paar Spenden.
Nee, nicht glaube, ich weiß, ein paar Spenden kamen tatsächlich rein.
Vielen, vielen Dank an der Stelle nochmal.
Ähm, damit hab ich gar nicht gerechnet.
Und die waren teilweise auch gar nicht so klein.
Ähm, also vielen Dank.
Und es kam auch tatsächlich Feedback.
Auch in Form von Kommentaren oder auf Twitter, äh, wo man uns geschrieben hat, dass es schön war, dass mal wieder eine Folge kam.
Und, äh, das ist schön zu sehen, dass, dass wir Menschen damit auch eine Freude machen, wenn wir, wenn wir hier reden.
Genau.
Das war bisher immer so, bis auf heute.
Heute hört das auf.
Nein, Spaß.
Ähm, genau.
Wenn ihr könnt, äh, und wir, es reicht uns.
Es reicht auch schon, wenn ihr uns, äh, eine Bewertung, eine schöne, positive, natürlich gute, positive Bewertung bei Podcastportalen, äh, gebt.
Oder auch bei Spotify, weil ich habe, glaube ich, gesehen, dass es da noch, ähm, eher mau ist mit den, äh, mit den Bewertungen.
Und da steht irgendwie ab, erst ab einer gewissen Mindestzahl und ich weiß nicht, wie die ist, weiß nicht genau, welche das ist, werden die Bewertungen überhaupt angezeigt?
Ich glaube, die haben wir noch nicht erreicht.
Aha.
Also, äh, falls ihr uns bei Spotify hört.
Ab auf Spotify, wenn ihr dort seid.
Genau.
Falls ihr uns bei Spotify hört oder falls ihr uns nicht bei Spotify hört, könnt ihr uns trotzdem dort eine gute Bewertung abgeben. Das wäre sehr schön.
Ja.
Okay.
Hast du noch was?
Ich hab nix mehr.
Und, äh, ich weiß jetzt noch nicht, wann die Folge dann erscheinen wird, ob wir dann schon gestreamt haben oder nicht.
Also, jedenfalls streamen wir oder haben gestreamt am, äh, 7. Oktober.
So ist der Plan.
Und, äh, ja, schaut rein oder, oder auch nicht.
Schaut rein, haut rein.
Und, äh.
Und, äh, ja, ansonsten, gute Zeit, bis zum nächsten Mal.
Ja, macht's gut, bis dann.
Ciao.
Dö, dö, dö, dö, dö, dö.
Dö, dö, dö, dö.