Wo wir sind, ist vorne, Folge 41. Haben ist besser als brauchen.
Herzlich willkommen bei Wo wir sind, ist vorne.
Frontend Fakten Frotzelein.
Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.
Hallo.
Da sind wir wieder eine Woche aus dem Takt. Ich war etwas aus dem Takt.
Jetzt sind wir wieder.
Wir sind immer wieder im Takt.
Wir sind immer wieder eingetaktet.
Eingetaktet. Du hast alleine gestreamt.
Ich habe alleine gestreamt, ja.
Also ohne jetzt schon in der Retro zu starten, aber so kurzer ...
Ja, das war nett. Das war nett.
Das war jetzt nicht ... Entschuldigung, ich weiß gar nicht, darf ich das jetzt sagen?
Oder mache ich dir dann ein schlechtes Gewissen?
Das war besser als wenn ich ...
Ja, es war genau so viel los wie sonst auch.
Ja, cool.
Sag ich jetzt mal.
Und ich habe es sogar relativ lang, also ich glaube knapp vier Stunden bis kurz vor zwölf oder so, von acht bis kurz vor zwölf.
Wenn ich dich nicht bremse, dann wird's.
Ja, richtig.
Du alter Bremsklotz.
Ich muss mit Konstantin mal loswerden.
Wir machen die Show ab sofort.
Ich mache die Show ab sofort allein.
Alles klar.
Nein, natürlich nicht.
Dann starten wir doch lieber mit einem Dank in diese Podcast-Folge, oder?
Und zwar einem Dank an Jonas, unseren Hörer Jonas, der uns eine komplette Kiste Bier, einen kompletten Karton voll Bier hat zukommen lassen.
Vielen Dank, Jonas.
Ja, Mensch.
Danke.
Also ich habe noch nichts davon gesehen.
Nee, das muss noch irgendwie zur Hälfte zu dir.
Ich habe auch schon mal reingeschaut und habe mir alle durchgeschaut.
Und es ist auch aus dem schönen Neustadt in Holstein ein Klüvers, was ich ja auch schon mal, da hatte ich mir ein paar aus dem Urlaub mitgebracht.
Das ist da auch wieder dabei.
Aber das kriegst du diesmal, weil du kennst es ja noch nicht und ich kenne es ja schon.
Ich habe mir dafür heute, dann gehen wir gleich zum Bier auch über, einen Lübzerpilz dort ausgesucht.
Traditionell gebraut in Lübz, Mecklenburg-Vorpommern.
Das heißt bestimmt Lübz.
Behaupte ich jetzt einfach mal, ohne es zu wissen.
Also ein Lübzer.
Lübzer.
Das ist dem Rülps-Geräusch, was man da mal macht, nachempfunden.
Das ist eigentlich eine Automatopoesie.
Okay.
Lübz.
Machst du, wenn du das trinkst?
Bin ich mal gespannt, ob wir hier ein Lübz-Gate fabrizieren.
Ich weiß nicht, wovon du sprichst.
Ich auch nicht.
Was sagst du denn?
Ich habe wieder ein Wölfle.
Brauchen wir nicht weiter erklären.
Wer wissen will, was es damit auf sich hat, hört sich die letzte Sendung an oder irgendeine alte.
Irgendwas hört sich irgendeinen anderen Podcast an.
Ja, hört euch zum Beispiel mal den Portlovers-Podcast zum Beispiel.
Der ist gut.
Weil da ist schon lange keine Folge mehr erschienen.
Falls jemand von den Portlovers hier zuhört, macht doch mal wieder eine Folge.
Ich habe das immer sehr gerne gehört.
Die letzte ist nämlich die, wo ich zu Gast war.
Ach.
Tatsächlich.
Und danach kam.
Also vielleicht habe ich den Podcast kaputt gemacht.
Wie so oft der Moritz macht es und dann macht das kaputt.
Die hatten dann keinen Pog mehr.
Oh Gott.
Oh nein.
Nein, Moritz.
Man soll aufhören, wenn es am schönsten ist.
Tja, das kann man jetzt auslegen.
Okay.
So.
Jetzt haben wir.
Ne, die Retro kommt ja erst noch.
Die Retro kommt ja erst noch.
Die Retro kommt ja erst.
Dann stellt sich das Problem, dass eigentlich keins ist, auch erst gleich.
Genau.
Ich weiß gar nicht, wovon du sprichst.
Problem erst gleich.
Ja, nee.
Machen wir gleich.
Du darfst anfangen.
Ach, wir haben das Video noch nicht aufgemacht.
Mensch.
Wir sind ja Vögel, oder?
Vor lauter Quatschen.
Piep, piep, piep.
Haben wir die Vögel eigentlich noch?
Die Vögel?
Ja, warte mal.
Nein, nein, nein.
Lass, lass, lass.
Zu spät.
Also, wie gesagt, das Lübser-Pilz.
Hören wir mal.
Gucken wir mal, wie es sich anhört.
Lübs.
Oh, nee.
So ein ganz, ganz geiles Tisch.
Und meins wahrscheinlich erwartungsgemäß normalerweise nicht so gut.
Ich warte, ich schüttel so ein bisschen vorher mal.
Ah, das ist dann ein bisschen besser, wenn es ein bisschen schüttelt.
Habe ich schlechte Erfahrungen hier gemacht auf dem Schreibtisch.
Na dann, sowohl durchs Portal.
Ach, die Vöglein.
Oh ja, das lässt sich gut trinken.
Sehr leicht.
Das ist gut.
Ja.
Aus Lübs.
Lübs.
Aus Lübs.
Lübs oder Lübs.
Lübs.
Nein, jetzt müssen wir aufhören.
Wenn es lübt, dann lübt es.
Mit dem Quatsch.
Gut.
Also, jetzt aber Retro.
Retro.
Genau.
Ich hatte einen Aha-Moment so für mich selbst in den letzten Tagen.
Und zwar bin ich gerade dabei, eine interne Accessibility-Dokumentation zu schreiben.
So für andere Kollegen in der Firma.
Und Kolleginnen natürlich.
Und war so an dem Punkt, wenn man so Doku schreibt, dass man dann irgendwie, man hat sehr viel Brainstorming gemacht und sich überlegt, was muss denn da jetzt alles in diesen Absatz rein?
Und es ist sehr viel und es ist sehr chaotisch.
Und dann, da muss ich mich immer wieder daran erinnern, dass das funktioniert, was ich jetzt gleich sage.
Dann habe ich gedacht, Mensch, wie strukturiere ich das?
Wie kriege ich denn das jetzt runtergedampft, sodass es wirklich aufs Wesentliche kommt?
Und dann habe ich gemerkt, ich könnte ja mal einen Tweet draus schreiben.
Ich könnte ja mal versuchen, diese gefühlten zwei-Diener-Vier-Seiten-Text in einen Tweet zusammenzufassen.
Und siehe da, plötzlich merkt man dann, was ist denn jetzt eigentlich wichtig und was nicht.
Und das hat mir extrem geholfen, das zu strukturieren.
Also die Information insgesamt ist jetzt nicht viel weniger geworden, aber es hat mir extrem geholfen, das nach Überschriften zum Beispiel zu strukturieren.
Weil in einem Tweet kannst du keine lange Prosa schreiben, also musst du eigentlich eine Checkliste machen oder irgendwie eine Liste mit Punkten.
Und das ist dann irgendwie auch draus geworden.
Den Tweet, den könnt ihr selbst mal suchen, den muss man jetzt nicht, das mache ich ja öfter, so Tweets mit Listen drin.
Bei dem Fall, das wollte ich einfach mal teilen. Das war irgendwie so eine Erkenntnis und das muss ich mir irgendwie auch immer wieder im Hinterkopf behalten, wenn ich mit komplexen Informationen zu tun habe und viel und nicht so richtig weiß, wie strukturiere ich denn das jetzt?
Einfach mal versuchen, einen Tweet draus zu schreiben, irgendwie 280 Zeichen, da wird es dann schon eng.
Und dann will man vielleicht noch ein Hashtag mit unterbringen und so und dann muss man wirklich jedes Zeichen, mit jedem Zeichen, mit jedem Wort feilschen und dann überlegen, gibt es da noch ein Wort, was es selber irgendwie macht, aber noch kürzer oder eine Formulierung und so.
Und dann kommt man ziemlich gut zum Punkt. Fand ich irgendwie eine, fand ich irgendwie eine coole Idee, ist bestimmt nichts Neues, hat vielleicht der ein oder andere von euch auch schon mal gemacht, aber ich fand es irgendwie erwähnenswert, so als kleinen Tipp am Rande.
Cool. Die haben gleichzeitig geklickt, glaube ich, aber trotzdem ist es abgehakt worden.
Ja, ne, okay.
Egal, hat sich exakt überschnitten und hat gesagt, oh, da will jemand anhaken.
In dem Augenblick, wo ich deinen Klick gehört habe, habe ich auch geklickt, das war ein bisschen verwirrend.
Okay.
Ja, ich habe so irgendwie fünf Minuten vor der Sendung festgestellt, oh Mist, ich habe ja noch gar keinen Retropunkt und dann dachte ich, naja, dann mache ich das zu meinem Retropunkt.
Ich habe halt irgendwie, war nichts Besonderes, ist alles gerade ein bisschen wieder in ruhigeren Bahnen, Bahnen, Gefahrwässern bei mir und es ist nicht viel passiert.
Trotzdem natürlich gearbeitet, ist jetzt nicht so, dass ich nichts getan habe, trotz Kranksein.
Aber dann ist mir eingefallen, ach, ich habe so einen Tweet gemacht, der so einen kleinen, also für mich, so drei Likes ist für mich schon ein bisschen Aufmerksamkeit auf Twitter.
Und zwar habe ich im WordPress-Source-Code ein bisschen was, ja, tiefes, nachdenkliches gelesen, obwohl es gar nicht so die Intention ist, glaube ich.
Also ich habe mit Capabilities da irgendwie was zu tun gehabt, musste da irgendwie was überschreiben, so von wegen, unter bestimmten Umständen tue so, als hätte der User die und die Berechtigung.
Und dann habe ich in den Source-Code reingeguckt, weil ich ja irgendwie nicht das so hinbekommen habe, wie ich es wollte.
Und dann steht da, das sind zwei Kommentare untereinander und jeweils eine Zeit der Code.
Und da steht da oben, everyone is allowed to exist.
Und das setzt die Capability, also Capability-Array, den Key exist auf true.
Und unten drunter, nobody is allowed to do things they are not allowed to do.
Und das setzt, also das löscht den Key do not allow aus den Capabilities.
Und das fand ich so, für sich stehend hatte das schon fast was Philosophisches.
Aber es hat wahrscheinlich auch einen Sinn.
Also ich weiß nicht, ob das als Easter Egg da nur drin ist.
Das hat, glaube ich, im erweiterten WordPress-Kontext mit irgendwelchen Multisite-Geschichten und sowas hat das tatsächlich auch einen Sinn.
Aber das fand ich irgendwie schön.
Es ist halt aber auch speziell formuliert.
Das hätte man deutlich technisch oder anders formulieren können.
Es ist ja fast bewusst philosophisch formuliert.
Ja, das denke ich nämlich auch.
Everyone is allowed to exist.
Ja, sehr schön.
Sehr schön, ja.
Nobody is allowed to do things they are not allowed to do.
Und auch immer schon ein Punkt hinten dran.
Ja, es liest sich fast, bin mal gespannt, wie geht es denn da eigentlich weiter?
Nee, ich sehe es ja, es ist ja eigentlich fast langweilig.
Must have all requested caps.
Okay, gut.
Das ist dann schon wieder, das ist nur eine Erklärung.
Weißt du da was, da ist richtig tief drin in Gedanken und dann kommt wieder sowas.
Also den Tweet verlinke ich natürlich auch mit Alttext sogar.
Da hast du mich darauf hingewiesen.
Ich hatte ihn zuerst ohne Alttext gepostet, obwohl ich eigentlich da immer hinterher bin,
dass ich dann selber auch einen Text dazu schreibe und ich habe es diesmal echt vergessen.
Und erweitern wir die Rede noch kurz.
Du hast mich nämlich so darauf hingewiesen, auf einen Account, den es da gibt, das muss
ich gerade selber nochmal gucken hier in den DMs, Alttext Reminder, also Alt-TXT-Reminder
ist ein Account auf Twitter, den man folgen kann.
Ich glaube, es ist Remind drin, oder?
Ich bin mir gerade nicht sicher.
Nee, tatsächlich Reminder mit E-E-R hinten.
Wenn man das tut und ein Bild twittert, ohne Beschreibung, dann sagt der nette Bot, hey, du hast den Alttext vergessen.
Sagt per DM Bescheid.
Die sagen, glaube ich, dass es ein bisschen dauert, bis es eingerichtet ist und der folgt dir dann zurück, weil ansonsten kann er dir auch keine DM schreiben.
Aber ich habe es mal ausprobiert und nachdem das dann eingerichtet war und mein Account da irgendwie hinterlegt war, innerhalb von ein paar Sekunden hat er mir geschrieben und hat gesagt, hey, da fehlt jetzt irgendwie der Alttext.
Ganz wichtig, nicht Alt-Tag, das hast du auch nicht gesagt, aber nicht, dass man es verwechselt, weil es vielleicht so ähnlich klingt, Alt-Attribut im HTML und Alt-Text haben wir gesagt.
Alt-Tag gibt es nicht.
Richtig.
Ganz wichtig.
Hatten wir schon tausendmal, kann man immer mal wieder sagen, glaube ich.
Ja, also Alt-Text ist schon mal eine supergeile Idee, weil, ja, dann muss man auch gar nicht mehr so groß nachdenken und man wird dann sofort erinnert.
Aber ich befürchte, man kann immer noch, das dachte ich nämlich, dass das geht, man kann aber nachträglich keinen Alt-Text hinzufügen im Bild.
Aber man kann dann zumindest einen Thread quasi draus machen und drunter dann irgendwie, man macht ja dann viele ja mit Hashtag B-Bash für Bildbeschreibung auf Deutsch, im deutschen Twitter-Umfeld habe ich das öfter mal gelesen.
Daher kommt das, oh Gott, B-Bash.
Oder einfach Ausrufezeichen B, wobei man damit, glaube ich, Tweets kennzeichnet, die tatsächlich eine Description hinterlegt haben im Bild.
B-Bash.
B-Bash, Bildbeschreibung, ja.
Ich habe das mal gelesen und habe gedacht, hä, was wollt ihr?
Bisch bescheuert?
B-Bash, Alter.
Ja gut, also das war meine spontanen Retro.
Und ich habe dann tatsächlich noch so einen zweiten Retro-Punkt gefunden.
Aber jetzt darfst du erst mal wieder.
Ja, genau.
Ich habe noch ein neues Internet-Wort gelernt diese Woche.
Und zwar Deep-Fried-Meme.
Ich weiß nicht, wie umschreibe ich jetzt, wie wir da hingekommen sind.
Ich sage es mal so, es sind Dinge gepostet worden und dann wieder runtergeladen und verändert und so weiter und so weiter und so weiter und so weiter.
Bis dann irgendwann man es auf die Spitze getrieben hat.
So wie das bei Memes halt funktioniert, ja?
Also irgendjemand hat eine Idee und dann sagt einer, oh, das ist ja lustig, oh, das wäre aber noch lustiger, wenn so.
Und wäre noch lustiger, wenn es jetzt in Comic Sansia und wäre noch lustiger, wenn es jetzt grün auf rot ist und wäre noch lustiger, wenn ein Einhorn dabei wäre.
Und irgendwann ist es halt, ähm, ist es halt durch, ja?
Aber Deep-Fried-Meme, da wurde eigentlich gesagt, ja, das ist ja jetzt Deep-Fried, meinte jemand zu mir.
Und ich dachte so, okay, das ist ein geiler Ausdruck für, das ist jetzt fertig, da kann man nichts mehr, keinen mehr draufsetzen.
Aber was es eigentlich bedeutet, und das kannte ich nicht, wir verlinken auch Urban Dictionary, ähm, ist, das ist so ein Effekt, der sich einstellt, wenn ein Bild sehr oft kopiert, runtergeladen, wieder durch eine Kompression läuft, wieder hochgeladen.
Immer wieder neue Artefakte, ja.
Immer wieder neue Artefakte und laut Urban Dictionary, ähm, wird dann, kriegt das so eine Art Gelbstich, äh, als ob's frittiert wäre.
Ach so, okay.
Sagen die, also ich hab das jetzt im Gelbstich, ich hab das jetzt nicht, äh, konfirmen können.
Ich weiß nicht, ob das wirklich einen Gelbstich kriegt, äh, oder ob das dann noch drauf ankommt, was für ein Bildformat das ist oder keine Ahnung.
Ähm, aber man kennt diesen Effekt von Bildern, die schon tausendfach kopiert und durch wieder Kompressionsalgorithmen geladen wurden.
Ähm, die sehen dann irgendwann anders aus. Man sieht denen anders, die schon ein bisschen was hinter sich haben.
Ähm, und das fand ich irgendwie coole, coole Formulierung, äh, könnt ihr mal in euren Wortschatz übernehmen, falls ihr es noch nicht kanntet.
Deep-Fried-Meme.
Wieder was gelernt. Ich kann's auch nicht.
Ich hab dann auch mir noch gedacht, naja, und die Profis fangen wahrscheinlich direkt damit schon an. Äh, sodass, wenn du ein Meme wirklich etablieren willst, dann machst du dein erstes Bild, dass es direkt schon so aussieht, als ob's tausendmal kopiert worden wäre.
Äh, ja, okay, gut. Das, äh, ja, eine kleine Geschichte am Rande des Internets. Ist wirklich am Rande.
Ja, ich hab dann, äh, vorhin im Vorgespräch, als ich dann, äh, dachte, ah, okay, da hab ich ja doch noch einen Retropunkt, äh, sind wir irgendwie auf, auf Tweets gekommen und, ähm, haben uns über, ich weiß nicht mehr, aus irgendeinem Apple-Feature unterhalten.
Universal Control.
Universal Control, genau. Und dann hab ich dran denken müssen, ah, okay, da hatte ich doch einen Tweet gesehen.
Ähm, und tatsächlich hab ich jetzt mal einen, einen Apple, und zwar keinen Apple-Rant, äh, Retropunkt, sondern wirklich einen, einen positiven Apple, einfach nur so Retropunkt.
Und zwar, uh, da, wir brauchen diesen Sound, ja, wir haben's schon mehrfach festgestellt.
Äh, ich verdiene auch den.
Den gibt's ja, den gibt's ja in Jitsi, ne?
Ja, echt?
Da, da, da gibt's einen.
Vielleicht kann man den da rausklauen.
Warte mal, ich, äh, wie, ich weiß, das ist da, ich weiß nicht, warte mal, ich guck grad mal, äh, warte mal, ich guck, guck mal, ah nee, wir haben jetzt, wir haben das gemutet.
Das kann man jetzt ja nicht hören.
Aber in Jitsi, in Jitsi gibt es Reactions, und da gibt's so ein, so ein, so ein, so ein, so ein, so ein, so ein, so ein, so ein, so ein, so ein mit offenem Mund-Emoji.
Erstaunen, ja.
Genau, und der macht genau das.
Ah, okay.
Das können wir mal gucken.
Vielleicht kriegen wir das irgendwo her, genau.
Jitsi ist ja Open-Source, da kann man den Sound bestimmt auch.
Ah, ja, ah, okay, perfekt.
Äh, ja, aber wie dem auch sei, also, ähm, es, das war ein Tweet mit einem Video, ähm, please tell me I am not the only one who didn't know about this feature.
Äh, darauf ist zu sehen, wie jemand ein Bild auf einem iPhone geöffnet hat und mit der Hand so tut, als würde er das, wie wenn man irgendwie ein Tempo-Taschentuch, das da liegt, irgendwie auf, aufklaubt.
So, ne, die Hände zusammen und vom Bildschirm weg, äh, die Finger so zusammen von einer Hand und vom Bildschirm weg.
Quasi die, die, die, die Pinch geht so nur mit mehr Fingern.
Wegziehen, genau, genau, pinchen, aber mit der ganzen Hand so, als ob ich das wirklich, ne, ich stehe dieses Bild in die Hand.
Also wahrscheinlich brauchen wir mindestens drei oder vier Finger, nehme ich jetzt mal an.
Und, ähm, da nimmt er das und geht über ein, ein, äh, iPad, ich glaub, da ist die Notiz-App oder sowas geöffnet, also irgendwas muss wahrscheinlich schon offen sein.
Und dann macht er das Ganze umgekehrt, also als ob er das da drauf ausbreitet wieder, so mit den Fingern.
Und dann erscheint nach kurzem Laden dieses Bild auf dem iPad.
Und, ähm, das ist wie so, wie man sich das so vorgestellt hat vor 20 Jahren, die Zukunft.
Ich kann was nehmen und dann schmeiß ich's hier an die Wand und hier und da mit den Händen gestikulieren.
Auf den Schirm.
Genau, auf den Schirm werfen, ja, äh, wortwörtlich.
Und, äh, das funktioniert.
Und das, und das haben sie nie mit Gesten gemacht bei Star Trek.
Das hat immer der Käpt'n gesagt und dann hat irgendjemand einen Knopf gedrückt, wie Oldschool.
Tja.
Und jetzt kann man sowas drücken.
Jetzt kann man das so machen und, ähm, das kannten tatsächlich viele nicht in den, so in den Kommentaren.
Äh, andere haben dann gesagt, ja, das ist einfach, ähm, Universal Clipboard.
Und das ist eine Geste dafür, die es halt da gibt.
Also, Universal Clipboard ist ja, äh, einfach, dass du Text da kopierst auf dem iOS-Gerät und auf dem anderen einfügst.
Ähm, und das geht eben mit Bildern so über diese Geste.
Äh, find ich, find ich echt nett.
Ja, vielleicht müssen wir noch kurz Universal Control, äh, erklären.
Das ist jetzt ein neues Feature, ähm, was jetzt, äh, seit, ja, seit kurzem erst, glaub ich, final ist.
Ähm, wo man zwischen verschiedenen Macs, äh, aber auch iPads, ich glaube, ich weiß nicht, ob iPhones auch in dem Verbund mit drin sind,
ich glaube nicht. Ähm, die zum Beispiel die Tastatur und die Maus für mehrere Geräte verwenden kann.
Aber auch sowas wie, ich zieh jetzt genau das, was du jetzt gerade gesagt hast.
Ich, ich, ich fahr jetzt zum Beispiel mit der Maus auf mein iPad von meinem Mac aus.
Und, äh, schnapp mir dort ein Bild und zieh das rüber. Und dann ist es da.
Ist ja, ist sehr, sehr, sehr ähnlich. Also wirklich so geräteübergreifend.
Das ist nicht so, dass dann das iPad in dem Augenblick mein Monitor war, sondern das iPad ist das iPad mit seinen Daten.
Und ich zieh's rüber auf den Mac oder von Mac zu Mac. Ich hab's auch, ich glaube, ich hab's mit insgesamt drei Geräten nebeneinander ausprobiert.
Zwei Macs und ein iPad. Äh, und, äh, konnte dann mit einer Maus von, äh, über, über die Geräte hinweg, äh, da navigieren und Sachen hin und her kopieren.
Und das ist ziemlich cool. Und ja, Achtung, ich komm mal ein bisschen näher.
Ich weiß, dass es Software gibt, die das auf Windows schon länger möglich macht.
Erspart mir diese Kommentare. Dankeschön.
Ja, aber coole Sache. Also es ist schon geschickt gemacht.
Ja, das, äh, das war's von mir mit der Retro. Und dann können wir jetzt zum, äh, problematischen.
Teil. Achso, der problematische, jetzt weiß ich, was der, jetzt weiß ich, was der problematische Teil ist.
Ja, wir haben einen, einen Doppel-Jingle. Also ich, ich mach einfach mal hier.
Ja, mach einfach mal.
Ähm, äh, hier, wenn ich, äh, wenn ich's finde. So.
Ich kann ...
Die Property der Woche.
Hier ist WWSIV mit dem Tagesthema.
Ja, wir haben heute nämlich, äh, eine Property als Tagesthema.
Ja, das haben wir ja schon angekündigt, dass das vielleicht mal passieren würde, dass wir, also eigentlich andersrum, wir haben gesagt, wir machen nur Properties, weil wir nicht so viel Zeit haben gerade.
Aber jetzt ist es anders, wie auch hier rum ist.
Nachdem wir letztes Mal, nach der letzten Folge einfach das, äh, den Tagesthema Jingle vergessen haben, äh, vor lauter, äh, netter Blauterei mit, äh, mit unserem Gast.
Ähm, machen wir jetzt einfach nochmal doppelt.
Genau, falls ihr noch nicht gehört habt, äh, unserer letzten Folge haben wir mit Anselm Hannemann über das Gärtnern gesprochen.
Sehr lohnenswert, wie ich.
Eine schöne Ergänzung zum Tech-Alltag sein kann. Also auf jeden Fall, da mal reinhören, das war sehr, sehr erhellend und, ähm, ja, einfach, einfach nett und, und gut. Danke nochmal Anselm, falls du zuhörst.
Genau, aber heute soll's um, äh, um Hess gehen. Und, äh, wir haben heute schon vor der Sendung den Titel festgelegt, der Sendung. Und vielleicht, äh, ist der eine oder andere, oder die oder eine oder andere verwirrt, ähm, von diesem Titel.
Und deswegen müssen wir den, glaub ich, auch mal erklären, also.
Ah, warte mal, darf ich, darf ich noch was vorweg schicken? Ganz kurz, ähm, äh, es gibt eine Person, die sich besonders, äh, über das Intro freuen dürfte, was du heute gesprochen hast.
Ja, ja.
Das wollte ich noch sagen, bevor du zu dem Titel, äh, zu dem Titel kommst. Ähm, also, hallo Olli.
Ja, hallo Olli.
An der Stelle, diese Sendung ist für dich.
Speziell für dich, genau. Ja, das ist, äh, ein, ein ehemaliger Kollege von uns beiden, der, der diesen Spruch, äh, geprägt hat.
Ja, wir kennen das beide von ihm, glaub ich, ja.
Genau. Okay.
Also, es geht um, haben ist besser als brauchen, ne, falls, falls man jetzt nicht mehr weiß, was ich davor überhaupt gesagt hab.
Aber auch um den Titel, genau. Also, unser Titel, äh, I can have parent selector.
Ähm, äh, das ist ein, äh, ein Meme, weil wir es vorhin auch von Memes hatten, wahrscheinlich auch ein Deep-Fried-Meme inzwischen. Ähm, und das ist eine Katze, die eigentlich nur in die Kamera schaut und, äh, und da steht drüber, äh, I can have, äh, I can have cheeseburger, in Fragezeichen.
Und da ist eine ganze Seite auch irgendwann draus entstanden, die so Memes, äh, gesammelt hat und so. Ähm, und, äh, ich verlinke auch auf die Seite, äh, die dann, die das Original-Meme zeigt.
Also, die Katze guckt so ein bisschen, die hat den Mund so offen stehen, als ob sie gerade wirklich redet. I can have cheeseburger.
Ich weiß jetzt nicht genau, also, es ist natürlich, es ranken sich da Mythen drumherum. Ich weiß nicht, ob das jetzt das erste Bild war, das diese Art Meme war, mit, ich hab ein Bild und, äh, und hab da Text drauf und das sagt dann irgendwas und Katzenbilder.
Aber es war auf jeden Fall eins der ganz frühen Katzenbilder-Memes, äh, und, also, ja, absoluter Klassiker. Und ich seh schon, auf dieser Seite ist die Qualität von diesem Bild schon ganz, ganz, ganz mies.
Ja, aber es ist hochskaliert. Es ist hochskaliert noch dazu.
Ah, okay. Ja, stimmt. Das ist doch aus einer Zeit, als Monitore noch klein und niedrig auflösend waren. Von wann ist das eigentlich?
Oh, ich weiß nicht.
Das muss ich jetzt mal, warte mal.
Know your meme, I can have, ähm, da, da, da, da, das ist von?
2000, nee. Ach, da, die, die, da, ah, ich bin auf der Seite gelandet, ich bin auf der Seite gelandet von dieser, nee, ich bin auf der Seite gelandet, wo die Firma erklärt wird, also, und die Seite, die dahinter steckt, aber das Meme ist ja viel, viel älter.
Aber vielleicht ist es dann doch besser, mal bei Wikipedia zu gucken.
Also, 2007 ist die Seite gelauncht.
Ja, aber das ist ja, da gab's das Meme schon längst.
Ja, das war aber das erste Meme, das da so gesammelt wurde. Also, das muss so die Zeit wohl gewesen sein.
Ja, das Meme muss aber eigentlich schon populär gewesen sein, bevor eine Seite sich so nennt.
Das kann ich mir nicht vorstellen, dass, dass das quasi, nee, das, das muss älter gewesen sein.
Comedy-Website-something.
Egal.
Ja, egal. Also, wir kommen, wir schweifen schon wieder völlig ab.
Oh, ja, da kommt auch aus dieser, aus dieser, aus dieser, aus dieser Zeit, äh, stammt auch eine, eine Formulierung, die ich immer noch manchmal ganz gern benutze, äh, bei Twitter, ähm, nämlich, äh, K-T-H-X-B-A-I.
K-T-H-X-B-A-I.
Ah, aha.
Aha.
Das finde ich, das finde ich sehr gut.
Also, es geht, es geht, um, um wieder mal zum Thema zurückzukommen, es geht um, äh, eine, äh, eine, eine, eine Pseudoklasse, eine CSS-Pseudoklasse, has, mit der ich, äh, Elemente selektieren kann, die, ein, ein, eine bestimmte, oder deren Kind-Elemente bestimmte Selektoren wiederum erfüllen.
Also, ich kann da eine Liste an, an Selektoren übergeben und dann wird das Element ausgewählt, ähm, das eben einen dieser Selektoren in sich hat.
Also, ich kann da zum Beispiel auch, äh, direkt den mit, mit Spitze Klammer, äh, also, größer als Zeichen, sagen, direkt das Kind-Element oder eben halt alle Kind-Elemente.
Also, wenn irgendwo als Kind-Element, äh, ein P zum Beispiel vorkommt, ne, dann würde ich jetzt, also, div mit einem P drin ist dann div, Doppelpunkt, has, Klammer auf, P, und dann würde dieses, äh, Element selektiert werden.
Und ich kann natürlich aber auch in dem Selektor hintendran dann wiederum Kind-Elemente, also alle, alle, die das haben und davon dann irgendwie, dann das P oder, äh.
Ich glaube, da kommt, ich glaube, da sollten wir langsam machen, weil da hat's zum ersten Mal mein Hirn durchgeschüttelt, als ich das gesehen hab.
Wir sollten vielleicht erst mal ein Beispiel, ähm, erklären, dass das Minimalbeispiel, bevor wir, bevor wir das Thema festgelegt haben, ähm, hatte ich nämlich gerade einen Anwendungsfall, gerade diese Tage erst, ähm, das, das war eine Notice, also auch wieder im WordPress-Umfeld, eine Notice, die auf, auf den Custom-Post-Type, den ich da hab, aber nicht zutrifft, weil da was, äh, das hat dann irgendwie, ich hab, hab eine neue Revision und so, aber ich brauch die Revision gar nicht, ich brauch kein Autosave.
Und ich, äh, kann da nur bedingt Einfluss nehmen, ob diese Notice geworfen wird, weil ich kann das, ich hab in den WordPress-Source-Code geguckt, das ist tatsächlich, ähm, ich kann mich da nicht einklinken und das heißt, ich müsste den WordPress-Source-Code beeinflussen, was ich halt, äh, nicht mal eben so kann.
Und dann hab ich mir gedacht, na, blend das Ding einfach aus, weil es interessiert mich wirklich nicht, ob das, also die kann von mir aus im Hintergrund keine neue Revision sein, brauch ich nicht.
Ich möchte diesen, äh, Notice ausblenden.
Dummerweise hat aber nicht das Wrapper-Element eine ID, die ich jetzt eindeutig ansprechen kann, sondern sinnigerweise nur ein, ein Paragraph-Element in dieser Notice.
Und jetzt wär's schön gewesen zu sagen, also irgendwie Class Notice oder wie auch immer die heißen, ähm, Class Notice und Has und dann das P mit der ID, ähm, keine Ahnung, Notice, New Revision oder wie auch immer die ID war, ja.
Und dann hätte ich sagen können, okay, ich blende die Notice gar nicht ein, weil ich kann zwar das P ausblenden, dann hab ich ne leere Notice, das ist so ne weiße Box dann mit nem, mit nem gelben Rahmen links.
Ähm, und da wär das halt wirklich, äh, super gewesen.
Jetzt muss ich mir dann doch überlegen, wie ich's irgendwie serverseitig quasi verhindern kann, dass das überhaupt kommt.
Mit jQuery ging das ganz einfach, äh, also, wenn du's in JavaScript machst, geht's natürlich, aber mit jQuery ging das super einfach, da gab's nämlich Closest und dann hat er, ist er so weit nach oben gegangen im Baum, bis er das gefunden hat.
Ja, und Closest hast du ja mittlerweile auch, äh, auch in die E6, äh, geht das, geht das nativ schon?
Ja, ja, klar.
Funktioniert das auch genauso wie in jQuery, also das, äh, äh, was ist das, äh, seit, seit, seit, Firefox 35, äh, ist das schon, Element RP Closest ist das gleiche, ne?
Element Closest?
Also, das ist, ja, schon ne Weile.
Also, IE11 kann's noch nicht, also, ähm, ist das wahrscheinlich, äh, das ist ja, das wusste ich nicht, das ist gut zu wissen.
Aber ging nicht auch in jQuery, hatte nicht jQuery auch Has?
Doch, aber das ging nach innen, das ging nicht nach außen.
Has-Selector.
Ach so, doch, ja, doch, ne, im Prinzip schon, doch, den Has-Selector gab's bei jQuery, ne, funktioniert eigentlich, doch, funktioniert eigentlich genauso.
Ja, genau, also so, wie, genau so, wie man das, ähm, äh, ja, wie man das jetzt eben auch kann in Zukunft.
Also, so ein, so ein klassisches Beispiel für mich, äh, für diese, für diese, für diese ganz, für diesen ganz einfachen Anwendungsfall, ähm, wäre für mich zum Beispiel gewesen, da, wo ich mir das öfter mal gewünscht hätte, ähm, man hat einen Button, den man irgendwie stylt, oder man hat so einen allgemeinen Button-Style, ähm, und jetzt gibt es da aber Varianten, je nachdem, was drin ist.
Also, muss ich ihn umstylen. Also, der Klassiker ist, du hast einen Button mit Text, und es gibt einen Button mit Text und Icon, zum Beispiel.
Und für das Icon muss ich unter Umständen Platz machen, damit es irgendwie da reinkommt, wie auch immer. Also, das ist so, und, äh, dann hat man das halt irgendwie so gelöst, naja, der Button, der kriegt dann halt noch irgendwie ne, ne, äh, ne Extraklasse mit, ja, Has-Icon oder irgendwas.
Genau, Button, das Icon, ja, genau.
Genau, sowas. Und, ähm, das kannst du dann, das ist dann komplett überflüssig mit Has, weil dann kannst du einfach sagen, ist da ein Icon drin oder ist da kein Icon drin?
Also, irgendwie ein Element mit einer bestimmten Klasse oder, keine Ahnung, vielleicht hast du ja sogar mit Web-Components hier ein Icon-Element gebastelt, wie auch immer, und dann kannst du sagen, ja, Has, äh, Punkt Icon oder sowas, und wenn das drin ist, dann kann ich sagen, ja, und dann mach irgendwie Padding-Left, äh, keine Ahnung, äh, ein Rem, und, äh, dann hast du Platz gemacht für dein Icon.
Also, es wäre so ein Fall.
Also, man kann sich da viele so, so Helper-Klassen sparen, die wirklich nur dafür da waren, zu sagen, ähm, unterscheide dieses Element, weil ich brauche dann da drin irgendwie was, wo ich, äh, drauf reagieren muss.
Und, äh, dann wird das alles ein bisschen aufgeräumt, hoffentlich.
Also, das ist ja genau, und ich glaub, da gibt's wahrscheinlich eine Million Anwendungsfälle, das war jetzt so das, was, wo ich sofort dran denken musste, dass ich das früher öfter mal gebaut hab, solche Konstrukte.
Ähm, und ich glaube, ganz viel, äh, so, ähm, wo man jetzt bei BEM ein Modifier nehmen würde, eine Modifier-Klasse vergeben würde, kann man, könnte man dann mit Has zukünftig abfrühstücken und sagen, naja, ich muss ja eigentlich nur wissen, ist da, äh, meistens, meistens basiert ja der Modifier darauf, da ist irgendwas anderes drin oder halt nicht.
Ist nicht immer so, manchmal will man auch das Element direkt verändern, aber meistens, oder oft hat das irgendwie, äh, ja, ist der Unterschied, dass etwas Bestimmtes drin ist oder nicht.
Und dann dafür, da kannst du dir dann den kompletten, äh, Quatsch sparen mit den langen Selektoren und machst einfach ein HES und dann, gut ist's.
Genau.
Dann gucken wir uns mal kurz an, äh, ich hab grad schon gesagt, es wird in Zukunft erst funktionieren, weil, äh, beziehungsweise, ja, wir sind schon in der Zukunft, zum Teil zumindest, ähm, seit Safari, äh, 15.4 im März, also doch noch recht jung.
Wir sehen diese Folge auf, am 83. März, 2798.
Also was ich damit sagen wollte, der Safari kann's jetzt schon, ähm, und das ist ja tatsächlich hervorhebenswert, mal der Safari, der sonst oft hinterherhängt, aber alle Achtung, äh, so ein krasses, äh, cooles Feature und ein begehrtes Feature, ähm, und der Safari kann's als erster und das kann tatsächlich sonst noch keiner offiziell, ähm, nur Chrome ab Version 101, äh, hinter einem Flag.
Also hinter diesem Experimental Web-Plattform-Feature-Flag, das heißt, im, äh, Chrome-Canary-Build, ähm, kann man sich das schon aktivieren und dann kann man damit rumspielen, aber das ist noch experimentell und der Safari, der kann's und der kann's, wie wir gleich feststellen werden, auch, äh, richtig gut.
Also es funktioniert, wie man's, wie man sich's vorstellt und, äh, welches ist das?
Genau, also und Safari, äh, kann das in der aktuellen, neuesten Version schon ganz ohne Flag und alles.
Genau, das meine ich, ja, also der kann's wirklich, äh, offiziell und da braucht man keinen, keinen speziellen Bild und so.
Äh, genau, und das ist, äh, weil ich grad gesagt hab, so ein großes und begehrtes Feature, also das ist tatsächlich was, ähm, im Endeffekt deckt das das Thema Parent Selector ab.
Und Parent Selector, das ist schon seit, seit Jahren, also ich glaub, seit es CSS gibt, äh, fragen Leute nach einem Parent Selector und das ist ja genau das.
Also ich möchte, äh, auf, äh, den Parent eingehen, ohne jetzt unbedingt, äh, das Parent Element selbst, ähm, damit zu meinen, sondern, ähm, eben halt vom Kind Element ausgehend, das da drin vorhanden ist.
Und, äh, das ging lange nicht und es gibt auch einen Grund, warum es, warum es nicht ging. Äh, ich hab das mal gelesen, da war im, im, im, es gibt natürlich auch einen CSS Tricks Artikel dazu, den verlinke ich in den Show Notes.
Und, äh, der wiederum hat verlinkt auf einen Artikel, der so ein bisschen, äh, ja, einen Einblick schafft, ähm, woran das denn lag.
Also das ist ein alter Artikel, der quasi sagt, ähm, ähm, ja, warum, warum, äh, gibt's keinen Parent Selector?
Und der beleuchtet das so ein bisschen, ist natürlich jetzt inzwischen überholt, das gibt ihn ja jetzt quasi mit, mit Has, lässt sich das abbilden, ähm, und die Schwierigkeit bei dieser Implementierung, ähm, und warum das jetzt sozusagen auf sich hat warten lassen, äh, die ist folgendes.
Und, äh, da hab ich gleich auch eine Demo dazu gebastelt, ähm, die bei, bei dir leider nicht funktioniert, ne?
Ich glaub, ich erkenn das, ich glaub, ich erkenn das Faf-Icon, oh ja, auf der Seite bin ich sehr gerne und die kenn ich schon sehr lange.
Und, äh, ich glaube, bei dem Menschen mit dem schönen Faf-Icon hab ich, glaub ich, sogar schon mal, äh, einen Workshop besucht, wenn ich mich recht erinnere.
Also snook.ca, darum geht's.
Ja, das ist Jonathan Snook.
Ein archivierter, ein archivierter Artikel, ich weiß gar nicht, ob da ein Datum dabei steht, also die Kommentare sind von 2010.
Eine sehr schöne Seite, die ist einfach wunderschön.
Also es steht jetzt nicht dabei, wann es veröffentlicht wurde, published doch, published, Oktober 10, 2010.
Ähm, ist aber schon, also schon vor 2010 hat man sich da Gedanken drum gemacht.
Und, also, warum ist das so?
Was ist das Problem dabei?
Also, ähm, HTML kann ja gestreamt werden.
Also, der Browser verarbeitet das HTML so, wie es reinkommt.
Das muss nicht immer sein, dass das erste alles geladen wird, also in den seltensten Fällen ist das eigentlich so,
sondern HTML kommt rein, wie es halt, wie es halt vom Server gestreamt wird.
in so, so Päckchen, ähm, und der Browser fängt direkt an zu bearbeiten.
Also er wartet nicht erst, bis alles da ist, sondern so, wie es reinkommt, äh, verarbeitet.
Das heißt, wenn ein, ein Div zuerst geladen wird, ähm, ein geöffnetes, dann hab ich erstmal nur das Div.
Für den Browser ist das erstmal leer, weil er weiß nicht, was, was danach kommt.
Und dementsprechend, äh, kann er beim Abarbeiten nicht schon sagen, ah ja, okay, das ist ein Div, das ein P enthält, weil das weiß er zu dem Zeitpunkt noch nicht.
Und bei CSS-Selektoren ist es so, dass die von rechts nach links ausgewertet werden, ne, weil das Performance-Vorteile hat, weil ich gucken kann, das, was ganz am Ende ist, das ist ja ausschlaggebend.
Wenn das schon nicht passt, dann kann ich das andere vorne dran im Endeffekt, äh, ignorieren.
Ähm, und das alles funktioniert halt nicht mehr so gut, wenn ich, äh, einen Parent-Selektor haben will und gucken will, was ist denn da drin und dann reagier bitte da drauf.
Weil ich muss ja immer, wenn ich dann weiß, was drin ist, rückwirkend sagen, ah, okay, dann muss ich aber das und das verändern.
Und, ähm, ne, da kommen da diese Repainting-Geschichten und, und so zum Tragen und das schluckt natürlich alles Performance.
Ich hab mich gerade gefragt, ob man damit eine Endlosschleife bauen kann.
Eine Endlosschleife?
Muss man mal...
Na gut, wenn's da ist, ist es da.
Na gut, du kriegst das bestimmt irgendwie kaputt.
Aber, ähm...
Ich kenn Leute, die können das, die können das noch besser, äh, mit dem Kaputtkriegen.
Vielleicht laden wir die mal in die Sendung, ich hätte da so, ich hätte da so ein paar Ideen.
Ähm, genau. Also das ist übrigens auch der Grund, warum der, äh, IE so lange kein Last-Child, keine Last-Child-Pseudoklasse hatte.
Ähm, man denkt ja vielleicht auch, First-Child kann er, warum kann er Last-Child nicht, kann ja so schwer nicht sein.
Aber das ist genau der Grund. Also, es ist geladen, es ist ein Diff, dann ist ein P geladen und ich hab vielleicht einen Selektor P, First-Child.
Gut, dann weiß ich, ja, das ist das erste P hier in dem Diff.
Aber ich weiß nicht, wie viele P's kommen da noch danach.
Ne, also...
Kann ja das letzte sein, muss aber halt nicht. Kann ja noch eins danach kommen.
Und, äh, das sind halt alles so, so Sachen, die da zum Tragen kommen, äh, wo der Browser eben halt nicht weiß.
Und dann im Nachhinein Dinge wieder verändern muss.
Und das war halt früher sehr, äh, kosten- oder, oder rechenintensiv.
Heute spielt das wahrscheinlich einfach auch weniger eine Rolle.
Ich hab versucht, ähm, was rauszufinden, so ein bisschen technisch, warum man sich dann doch entschieden hat, das zu machen.
Und was so der ausschlaggebende Punkt war, zu sagen, ja, okay, wenn wir es so und so machen, dann ist die Performance nicht ganz so schlimm.
Das heißt, ich kann nur vermuten, es ist einfach, ähm, wir haben heute mehr Rechenpower zur Verfügung.
Es spielt wahrscheinlich wirklich nicht mehr so eine große Rolle, ob ich jetzt ein paar Sachen repainten muss.
Die Browser, die Rendering-Engines an sich, äh, haben sich natürlich mit den Jahren verbessert.
Wir haben es ja auch schon mal angesprochen, äh, die Blink-Engine hatte da mal irgendwas ganz, ganz neu gemacht, ähm, neue Art und Weise, die Dinge zu berechnen.
Und auch irgendwie, dann werden ja eben verschiedene Layer erzeugt und dann kann ich nur den Layer austauschen, ohne, dass ich die ganze restliche Seite dann irgendwie repainten muss.
Und, ähm, mit den ganzen Optimierungen und mit der mehr Rechenpower ist das wahrscheinlich heute vernachlässigbarer im Vergleich zu früher.
Man sollte es wahrscheinlich trotzdem noch sparsamer einsetzen, ne, es gibt ja verschiedene, äh, Selektoren, die halt mehr oder weniger Rechenleistung brauchen.
Ähm, man sollte jetzt vielleicht nicht alles damit zukleistern, nur weil es geht, äh, aber haben es besser als brauchen.
Ich hab vorhin mal, ich hab vorhin mal im Zuge der Vorbereitung noch einen schlimmen Selektor gebaut.
Ich hab jetzt nicht drauf geachtet, dass er möglichst die Performance kaputt macht.
Äh, das kann man, so einen könnte man auch noch bauen, aber da kommen wir am Ende noch dazu.
Mhm.
Aber das zum Thema schlimmen Selektoren.
Ich, äh, noch kurz meine, meine Demo, die ich da, die ich da, äh, gebaut hab.
Also bei dir hat das leider nicht funktioniert.
Das heißt, im Safari scheint das aus irgendwelchen Gründen nicht zu funktionieren.
Ich kann sie aber, ich kann sie aber gerne noch mal ...
Vielleicht kannst du's noch mal probieren und noch mal irgendwie so hart reloaden, dass da nix im Cache irgendwie kommt.
Ich kann auch mal soft reloaden.
So, jetzt muss ich gerade mal gucken, wo ich den Link hab.
Ich hab versucht zu überspielen, dass ich den Link gerade ...
Ja, ich weiß, ich weiß, dass da ein Signal ist.
Nee, ein Signal ist er nicht.
Oder doch?
Ach, ich hab ihn dir auch per Signal geschickt, ja.
Wo hast du den denn noch geschickt?
Ich hab ihn jetzt Trello hier eingetragen.
Ah, ah, das wär ja noch einfacher gewesen.
Also ich lad's, ich lad's jetzt noch mal, ähm, aber er wartet, also er wartet lange, bis alles da ist.
Fünf Sekunden und dann kommt alles auf den Rutsch.
Ja, ja.
Okay, also im, im, im Chrome, äh, Canary-Build funktioniert's bei mir, wie's, wie's soll.
Also ich hab, äh, hab ne Seite, ähm, die besteht im Grunde nur aus dem, aus dem Diff und dem P und ein bisschen Text, äh, drinnen und draußen.
Und ich lade zuerst, äh, also ich hab ein eröffnendes Diff und, äh, da steht dann drinnen hier, dieses äußere Diff mit, äh, rotem Rahmen wird zuerst geladen, ähm, in fünf Sekunden und zwar mit PHP Sleep.
Das mach ich dann noch, bevor irgendwie was weitergeht und bevor irgendwas geschlossen wird, äh, lädt dann der Rest des Markups und darin ist dann ein, ein Paragraph-Child-Element mit grünem Rahmen.
Und, ähm, ich kann hier also zuschauen, wie sich da was verändert.
Ja, das heißt, es ist tatsächlich ein roter Rahmen zuerst und der wird dann, äh, es funktioniert jetzt bei mir gerade auch nicht mehr.
Irgendwas hab ich kaputt gemacht.
Cache.
Ah, ich hab die Demo kaputt gemacht.
Okay, muss ich nochmal, muss ich nochmal angucken.
Also ich hab's jetzt noch mehrfach extra.
Und bis diese Sendung, äh, live geht, ähm, wird es auch wieder funktionieren.
Ich hab in den DevTools, äh, jetzt gerade explizit in Safari nochmal den Cache ausgeschaltet, ähm, und es passiert trotzdem dasselbe.
Also der, der sagt, äh, ey, bevor du mir nicht das Dokument komplett gegeben hast, zeig ich.
dir gar nichts.
Okay, also ich mach das, ich mach das mit Sleep und mit Flush, also eigentlich, äh, eigentlich sollte er dann, äh, das machen, aber warum auch immer Safari das nicht, das nicht machen.
Hast du, äh, da ist aber noch kein schließender Body oder irgendwie sowas dran, oder?
Äh, nee, das kommt alles erst später dann.
Ja, genau, vielleicht, vielleicht wartet er deswegen, weil er sagt, ey, das Dokument ist noch nicht fertig.
Äh, keine Ahnung.
Aber das sollte er eigentlich nicht, also eigentlich geht's ja darum, das zu optimieren.
Aber vielleicht macht der Safari genau deswegen das nicht mehr, weil er ja jetzt, äh, Has unterstützt.
Das könnte natürlich sein, dass der sich sagt, nee, dann lad ich Seiten jetzt nur noch, wenn ich sie ganz da hab.
Ja.
Wer weiß, wer weiß.
Also jedenfalls, äh, ist es halt genau das, was ich gerade gesagt hab, ähm, ich kann erst auf diesen, auf diesen Parent Selector reagieren, oder auf diesen Has, äh, auf die Has-Pseudo-Klasse, äh, wenn der ganze Content da ist.
Und das heißt, erst mal wird halt gerendert, so wie der Browser das, äh, versteht, also da ist halt einfach ein Div und das hat einen roten Rahmen.
Und wenn ich dann aber halt später sag, alle Divs, die ein P beinhalten, die sollen einen blauen Rahmen kriegen, dann passiert das halt erst, wenn der, der restliche Content da ist.
Genau.
Also zur, äh, zur Erklärung noch bei mir, ich seh immer gleich den blauen Rahmen in Safari jetzt gerade derzeit bei der Demo.
Äh, die Demo packst du auch irgendwie in die Show Notes?
Genau, die ist in den Show Notes, ja.
Perfekt, super.
Okay, ich wollte noch drauf hinweisen, ähm, über Has, beziehungsweise, ähm, Parent Selector haben wir schon mal gesprochen in Jäger der Verlorenen CSS Features Kapitel 1.
Ähm, das war unsere Folge Nummer 10.
Meine Güte, ist das lang her, das war von 2020.
So lang machen wir das hier schon.
Ähm, genau, da wollte ich nochmal Cross verlinken, könnt ihr nochmal hören, damals haben wir in zwei Folgen, äh, mal so ein bisschen gesagt, was wir uns denn von CSS noch wünschen würden.
Und das war schon, also der Parent Selector, ich glaub, das war auch lange in Umfragen immer so, wenn du bei Twitter gefragt hast, was wollt ihr denn von CSS haben, haben die Leute immer als erstes gesagt, Parent Selector.
Und jetzt ist er ja tatsächlich am Horizont.
Über was können wir uns denn dann eigentlich noch beschweren?
Ja, äh, müssen mal unsere Folge, unsere Wunschlistenfolge mal rekapitulieren.
Ja, genau, das wär doch, das wär doch mal was.
Und gucken, was haben wir denn inzwischen alles.
Ey, das ist doch, das ist doch billig vorbereitet, das machen wir für die nächste Folge.
Mal schauen, was sich getan hat seit, äh, den, den verlorenen CSS-Features.
Ähm, genau, auf jeden Fall, da kann man nochmal reinhören, Folge 10, da war unsere Audioqualität noch nicht so gut wie jetzt.
Mhm.
Ähm, aber so, dass man es trotzdem anhören kann, weil sonst hättet ihr es nicht von uns bekommen.
So, okay, dann hätten wir das, so, jetzt bin, jetzt weiß ich natürlich nicht, ähm, wie jetzt du dir das weitere Vorgehen geplant hast.
Ich hab überhaupt gar nichts geplant.
Du hast gar nichts geplant, dafür hast du ganz schön viele Links hier reingepackt ins Trello.
Okay, gut, aber ich, ich geh jetzt mal durch.
Die Demo haben wir jetzt, die haben wir durch.
Ähm, haben wir über Can I Use schon gesprochen?
Ähm, ja, wie gesagt, äh, haben wir, also wir haben jetzt nicht Beziele Can I Use angesprochen, aber welche Browsers können wir nicht.
Genau, also das ist noch relativ schmal, ähm, alles, aber, äh, ja, okay, dann haben wir das auch.
Ähm, jetzt können wir ja mal ein bisschen über das, über das, über das kompliziertere Beispiel sprechen.
Ähm, ich hab, du hast das vorhin schon angesprochen, ich wollte es aber nochmal sagen, das ist das, wo, wo sich mein, mein Brain zum ersten Mal getwistet hat in diesem, in dieser ganzen Geschichte übrigens, gibt's einen sehr guten CSS-Tricks-Artikel, ähm, zum Thema.
Ich weiß nicht, ob du den schon erwähnt hast.
Hab ich auch erwähnt, genau, darüber bin ich auf diese, auf diese andere Geschichte gekommen, ja.
Das ist sinnlos mit meinem Kopf, das ist so schlimm.
Der ist wirklich sehr gut, ich, ich hab ihn auch gelesen, ähm, interessant ist, dass er am Ende irgendwie noch auf Nord, äh, eingeht, weil das aus derselben Spezifikation ist.
Ähm, ich bin gerade am überlegen, ob's dazu noch was zu sagen gibt, ähm, der hat da als Beispiel, zum Beispiel, äh, image, äh, ah, hasImage, was, äh, also ein direktes Image drin, was natürlich auch so ein, so ein Fall ist, wo man vielleicht das, den Link dann umstylen will.
Ähm, und interessant wird's dann da, wenn man quasi noch ein Kind von dem hasElement nimmt.
Also, wenn ich jetzt, äh, sage, ja, ich will dann aber eigentlich ein Kind-Element von dem haben, wo ich jetzt gerade überprüft hab, ob das irgendein, irgendein anderes Kind-Element hat, das muss ja auch nicht dasselbe sein.
Äh, und ich hab ja auch ne, ne kleine Demo gebaut, mal wieder, auf CodePen, die fürchterlich aussieht, weil ich immer versuch, solche Features zu quälen und ich hab's wieder nicht richtig kaputt gekriegt, muss ich, muss ich, äh, zugeben.
Ähm, und in meinem Fall, jetzt muss ich hier gerade mich nochmal durchklickern, habe ich zum Beispiel gebaut, äh, wo ist es, wo ist es, wo ist es, ah ja, ich glaube, ich hab die Demo ausprobiert aus dem, äh, aus dem CSS-Tricks-Artikel.
Und zwar, ähm, geht er davon aus, dass man, äh, ein, eine H2 hat, äh, Moment, jetzt muss ich, jetzt bin ich gerade verrutscht, Entschuldigung.
Ähm, es gibt ein Element-Header-Group, ähm, Klasse-Header-Group und darin ist dann halt entweder einfach nur eine Headline, also eine H2 oder eben, äh, ein, ein Subtitle noch mit dabei.
Also ein, äh, Diff-Class-Subtitle unter der H2. Und jetzt möchte man ja vielleicht, äh, die Abstände unterschiedlich machen, je nachdem, oder die Abstände von dem, von dem H2 zum Beispiel nach unten, äh, je nachdem anders machen.
Äh, ist das jetzt, ist das die falsche Demo, oder? Ich bin gerade, nee, das ist genau, das ist genau das Richtige, mein Frauser-Fenster ist nur zu schmal.
Mein Gott, bin ich schlecht organisiert gerade.
So. Und da ist dann halt genau, es ist der Selektor, der da gebaut wurde, ähm, Header-Group-Header-Group-Heads, und da wird, das sind zwei Sachen.
Die dann gleich noch dazukommen. Äh, Header-Group-Header-Group-Header-Group-Header-Group-Element.
Und, äh, Has-Subtitle, Punkt-Subtitle, also ist auch noch ein Element mit der Klasse Subtitle da drin.
Und dann, ab, äh, wenn das alles zutrifft, dann macht der H2 einen anderen Margin, als sie sonst hat.
Mhm. Ja, das ist echt, ist auch so ein klassischer Fall, ja, den man normalerweise dann mit einer, mit einer Extraklasse dann totgeschlagen hätte.
Äh, und das lässt sich dann damit einfach machen. Sehr cool.
Genau, und das, äh, ja, das ist, und da hat's zum ersten Mal dachte ich so, ah, da kann man auch noch was dahinter schreiben.
Ist ja eigentlich logisch, aber hab ich im ersten Augenblick erst gar nicht dran gedacht, dass das auch geht.
Und da kann man dann ganz schön komplizierte Sachen mitbauen, weil, wie ihr jetzt grad auch schon gehört habt, man kann Has auch mehrfach hintereinander schreiben.
Ähm, also das ist schon, und man kann innerhalb von Has auch eine, eine ganze, hast du vorhin auch schon gesagt, man kann auch eine ganze Liste von Elementen angeben.
Ähm, ja, es ist, äh, es ist verrückt. Und dann hab ich natürlich, äh, jetzt muss ich grad nochmal in meine, in meine Demo reinschauen, ich muss das Browserfenster mal breiter ziehen, meine Güte.
Ähm, ich hab damit ein bisschen rumgespielt und hab überlegt, was könnte man denn jetzt damit machen?
Äh, und das erste, was mir eingefallen ist, ist, äh, man könnte damit, ähm, leider, leider nur beschränkt in der Ausgabe, man könnte damit zum Beispiel überprüfen, ist denn auf der, gibt's denn auf der Seite irgendwas ganz Bestimmtes, also ein bestimmtes Konstrukt, was ich vielleicht nicht haben will, so zum Debuggen.
Ähm, und, äh, dann kann ich ja dem, im Zweifelsfall, falls es es gibt, dem HTML-Element zum Beispiel irgendwie ein, äh, Before- oder After-Content-Text geben, du hast hier jetzt ein bestimmtes Konstrukt, das möchtest du vielleicht nicht haben.
Und zwar ist so mein erster Use-Case, den ich damit, äh, gebaut hab, also, ähm, zum Beispiel zwei Br-Elemente nacheinander, ähm, kann man damit dann ganz gut abfragen und dann könnte man zum Beispiel dem HTML-Element sagen, ähm, oder hab ich hier HTML oder Body, äh, genau, ich hab's auf HTML, has, äh, br plus br, after, content, oh no, to, äh, br's after another.
Und dann kriegt das HTML-Element, äh, so eine, ja, einen kleinen Text.
So als, ja, das geht halt natürlich nicht, man kann natürlich nicht sammeln und sagen, jetzt hast du diese, diese fünf und dann geb ich dir für, für alle was einzeln aus, aber ich hab gedacht, naja, das kann man doch damit irgendwie mal, ähm, mal ausprobieren, was man, was man da machen kann.
Was ich als nächstes ausprobiert hab, war, ich wollte wissen, ähm, ich hab's eigentlich mir schon gedacht, dass es so ist, äh, ich wollte wissen, wenn jetzt das Element gar nicht da ist, wenn ich das jetzt ausblende per Display none, hat es dann trotzdem Auswirkungen.
Also kann ich, ähm, Moment, das war das mit dem ARIA, äh, Sekunde, wo ist es denn?
Ich, ich, ich fühl mich, ich fühl mich in meinem eigenen Dokument nicht mehr zurecht.
Wieso bin ich denn so langsam?
Ähm, genau, ich hab halt, äh, geguckt, ob ein Element ein Button enthält und dann das Element display none, also dass es quasi sich selbst ausblendet unter bestimmten Umständen, funktioniert natürlich.
Hab ich aber, hab ich mir gedacht, naja, mal ausprobieren, treten wir mal ein bisschen dagegen und gucken, ob irgendwie irgendwo was runterfällt und dann, äh, ja, keine Ahnung, ich hab da noch geschaut, zum Beispiel, man könnte man auch sagen, ja, wenn du jetzt ein Bild hast, das kein Altattribut hat, dann könnte man auch da, ähm, irgendwo eine Meldung ausgeben, ähm, das hab ich noch ein bisschen rumgespielt, äh, ja, und dann hab ich noch den mega bösen, schlimmen, ultimativen, äh, Einstellungsselektor gebaut.
Ich hab's zum Konstantin im Vorgespräch schon gesagt, wenn mir jemand den Selektor komplett erklären kann, dann stelle ich ihn ein, und zwar, ich, ich, ich diktiere mal, äh, und ich weiß nicht, ob alles darin Sinn ergibt, aber das können wir ja gleich mal auseinandernehmen.
Ähm, Punkt test, Doppelpunkt has, in Klammern b, s, p, Doppelpunkt has, in Klammern span, Doppelpunkt not, in Klammern Punkt site, Punkt ruby, Tilde, also Leerzeichen Tilde, Leerzeichen p, in eckigen Klammern id, Stern ist gleich hey, Doppelpunkt ent of type, in Klammern 4n, Doppelpunkt after.
Okay, ich hab mir gedacht, ich kombiniere mal.
Also, also was man da auch ganz, äh, ganz schön sieht, wenn ich das richtig verstehe, ich versuch's mal, ne, ich versuch mal den, äh, äh, den zu erklären.
Also er funktioniert tatsächlich, ich hab ihn ausprobiert.
Ja, man sieht's, man sieht's, dass er, das unten dann auch rot ist.
Also, äh, Punkt test, klar, ist die Klasse, das Element mit der Klasse test, und das muss haben, entweder ein b, ein s und ein p Tag in sich, und es muss ein span Tag in sich haben, ne, also die, das heißt, wenn ich den, die, die Liste, die ich da übergebe, das heißt, eins davon, ne, das muss nicht alles matchen.
So, wenn ich einfach so eine Resonatorenliste hab, in der Regel, deswegen hab ich das gemacht.
Ich mach mal ein has, damit auch wirklich das Span auch mit drin sein muss.
Genau.
Und es darf aber nicht die, die Klasse, äh, side oder ruby haben.
Ich weiß gar nicht, ob das irgendwas macht, äh, das mit dem has und not, da, da war ich mir jetzt nicht sicher, wie das zusammenspielt.
Ich hab das einfach mal ...
Ja, ist, ja gut, not schließt ja dann einfach nur aus, also, wie hast du das gebaut, diese Liste, haben da manche Elemente ...
Aber not, da müssten wir eigentlich mal ein paar Gegentests, ähm, eigentlich machen.
Ähm, das würd mich nämlich echt interessieren, weil not ist ja, damit ist ja im Prinzip eh schon alles ausgeschlossen, was nicht bei has drinsteht.
Ja, warte mal, du kannst das ja testen, wenn du, äh, jetzt irgendwie dem zweiten von diesen Elementen irgendwie noch die Class-Side gibst.
Lass mal laden.
Und wenn ich dann den Not-Selector wegmache ...
Also, nee, Ends of Type spielt da natürlich noch mit rein.
Nee, das nicht, das ist nämlich dann wieder wo ganz anders.
Da wird's nämlich jetzt interessant, weil ...
Ach so, ah, nee, stimmt, ja, okay, dann hab ich jetzt verwirren lassen, tatsächlich.
Ähm ...
Yes!
Ach, da drin muss dann das P ...
Nein.
Nee, warte mal, ich bin, ich bin, glaub ich, gar nicht in dieser Liste, kann das sein?
Jetzt, jetzt wird's nämlich interessant, mit der Tilde ...
Jetzt, jetzt kommt nämlich das Interessante tatsächlich, weil, mit der Tilde sag ich jetzt,
... das sind von dem Test, von dem Punkt-Test, Geschwister-Elemente.
Ach, da ist das nicht, die Class-Test, ja, okay, jetzt ...
Nachfolgende Geschwister-Elemente, die sind dann nämlich nicht mehr innerhalb.
Da wird's nämlich dann, das, das find ich, das find ich eigentlich das coolste.
Also, wenn ich den mit der Class-Test jetzt noch, äh, Seite dahin mache, dann dürfte der
Killer-Selektor ... Ja, genau.
Also, der Not-Selektor funktioniert, ne?
Das ist einfach eine Kombination.
Perfekt.
Also, es muss das alles beinhalten, aber es darf nicht selbst die Klasse-Seite der
Ruby haben.
Und dann kommt, genau, Tilde, dann kommt der ... Das ist auch ein bisschen blöd, ich hab hier
die Dev-Tools offen, noch zusätzlich, und dann ist das noch schmaler, deswegen ...
Oh, ich glaub, ich hab einen Detail vorhin vergessen, den Stern, glaub ich, oder?
Hab ich den gesagt?
Stern gleich, im Attributselektor, genau, also dann, äh, genau, Siblingselektor, also alle
nachfolgenden, äh, P's in dem Fall werden, werden dann auch selektiert, aber nur, wenn
das ID-Attribut an irgendeiner Stelle die Zeichenkette H-E-Y enthält.
Und in meinem Fall heißen die Oh-Hey-Ja.
Oh-Hey-Ja, ja, okay.
Und dann, äh, das, äh, vierte Element davon, beziehungsweise, äh, nicht das vierte, das
ist nicht End of Type 4, ne?
Das ist End of Type 4N.
Und diese Geschichte mit dem, mit dem 4N und N plus 1, das muss ich jedes Mal irgendwie
...
Das geht mir auch nicht ins Hirn rein.
Das ist einfach, äh, ja, vergeblich.
Genau, und dann eben noch After.
Und dann After, klar, gut.
Genau, das Pseudo-Element noch dran.
Ähm, okay, das mit dem 4N, das macht aber keinen Unterschied in dem Fall, ne?
Also wenn ich, äh, vier oder 4N, wir bräuchten, glaub ich, auch mehr Elemente, um das zu sehen.
Also, ne, wenn ich jetzt jedes vierte, wenn ich jetzt jedes vierte, äh, erledigen will.
Warte mal, ich mach hier mal ganz viele von diesen P's noch dazu.
Und dann gucken wir mal, ja genau, also wenn ich jetzt nur End of Type 4 mache, dann hab ich, äh, natürlich nur das, das vierte.
Ähm, aber warum ist das denn eigentlich das dritte?
Ich hab jetzt mal in der Demo, äh, bis 10 gemacht.
Das weiß ich tatsächlich auch nicht.
Das ist, äh, weil der ...
Eins macht er irgendwie gar nichts?
Warum muss ich denn da mit zwei anfangen?
Ja, das erklärt ihr uns mal in den Kommentaren.
Shep, Spaß.
Das muss ich jedes Mal nachgucken, das kann ich mir auch nicht merken.
Das find ich irgendwie, äh, ein bisschen merkwürdig.
Aber da gibt's bestimmt eine sehr plausible Erklärung dafür.
Aber wir müssen auch nicht jetzt, äh, uns noch tiefer da reinzustellen.
Ja, nee, nee, nee, nee, nee, wir kommen ja auch schon wieder von Hass weg, ne?
Genau.
Das ist ja jetzt, äh, was ganz anderes.
Ähm, so.
Mir ging's nur darum, ich wollte mal, ich hab, ich hab das zum Anlass genommen,
Hass, um mal einen verrückten Selektor zu bauen mit allen möglichen verrückten, äh, Sachen,
die nicht unbedingt jeder so kennt, behaupte ich jetzt einfach mal.
Und, äh, genau.
Das, das ist draus geworden und wie gesagt, wenn ihr euch mal bei mir bewerben solltet,
irgendwie, ähm, ich stell euch, ich stell normalerweise keine Leute ein bei uns,
aber falls doch mal, dann, äh, wenn ihr mir den erklärt, dann, dann bin ich happy.
Okay.
Ich hab grad einen lustigen Effekt mit dieser Demo, die vorher noch funktioniert hat
und jetzt nicht mehr.
Und ich hab nämlich gesehen, dass der, äh, Canary-Build sich geupdatet hat.
Seit ich vorhin die Demo gebaut hab, bis jetzt, äh, kam irgendwie nochmal ein Update rein
und irgendwie seitdem funktioniert's nicht mehr.
Hm.
Also, äh, haben die was gemacht?
Und das Interessante ist, wenn ich die Dev-Tools aufmache, dann sehe ich, dass meine Regel,
die den Rahmen danach eigentlich blau machen soll, dass die da ist und eigentlich auch gezogen
werden müsste und, und die andere Regel mit dem roten Border wird auch überschrieben.
Und wenn ich dann mit dieser Checkbox das einmal kurz weghacke und wieder dranhacke, dann funktioniert's auch.
Hm, das heißt, das heißt, das ist irgendwie, im Rendering kommt da was durcheinander.
Also, ich muss selber nochmal so ein Repaint, äh, triggern, damit das dann tatsächlich funktioniert.
Und das ging vorhin noch.
Also, ich will mich nochmal entschuldigen für meine chaotische, äh, Demo eben, ähm, wo ich mich selbst im Code nicht zurechtgefunden hab.
Schaut einfach mal in den Code rein. Ähm, ich glaub, dass das, äh, da funktioniert es dann am besten, dass es im Podcast auch irgendwie nicht so super, äh, zu erklären.
Ich hab da merkwürdige Demos.
Ja, ich glaub, man muss das wirklich sehen. Also, wie so oft bei den Demos, man muss das, glaub ich, wirklich einfach gesehen haben.
Ja, und warum meine, also, ich hoffe, meine Demo läuft, äh, bis der Podcast rauskommt wieder. Ansonsten, ähm, ja, doof.
Okay, ähm, vielleicht noch ein Hinweis von mir jetzt, dann bin ich eigentlich schon, äh, dann bin ich eigentlich mit meinem Teil schon fast durch, den ich vorbereitet habe.
Natürlich, der unvorbereitete Teil, der kommt dann noch. Ähm, ich hab in irgendeinem Artikel gelesen, äh, das, war das, war das bei MDN, ähm, dass es irgendwie bei der Implementierung darum ging, ob das denn auch mit JavaScript geht oder nicht.
Ob man diesen, äh, selekt, also, ob man Has verwenden kann innerhalb von Document Query Selector zum Beispiel. Ähm, und das funktioniert. Das hab ich einfach noch ausprobiert. Das ist in der, in meiner Demo hab ich das auch mit drin.
Dann kommt eine Console-Log-Ausgabe von dem Element, in dem Fall dem Body. Ähm, genau. Also, ich hab da, äh, reingeschrieben.
Wo ist es denn mein JavaScript? Ich hab einfach geschrieben Console-Log-Document-Query-Selector-Body-Has-Diff. Ähm, und das funktioniert auf jeden Fall, weil es hat mich nur interessiert, ob das, ob das da auch geht.
Wir haben den gleichen Artikel, glaub ich, gelesen. Es hieß nämlich ursprünglich mal, sollte eben aus diesen Performance-Gründen, sollte das nur mit dem Query-Selector gehen. Ja.
Und nicht über CSS. Und dann wurde das in der Spec aber gestrichen, weil's irgendwie, äh, weil's keiner so implementiert hat. Und dann stand aber in dem Artikel, und das ist einfach nachweislich falsch, beziehungsweise vielleicht zu dem Zeitpunkt des Artikels, mag es vielleicht gestimmt haben, dass es nur per Style-Sheet geht und, und nicht per Query-Selector. Und das stimmt aber nicht. Also, das funktioniert mit dem Query-Selector.
Das ist, glaub ich, in der MDN, äh, gewesen. Ich hab da so viele, ich hab so viele MDN-Tabs offen.
Genau. Ja, dann hab ich, äh, ich hab noch einen Punkt jetzt dazu konkret. Ähm, man kann mit, mit Ad-Supports, ähm, kann man überprüfen, ob, ob Has unterstützt wird. Ähm, das hab ich auch ganz oben in, in meiner Demo ist dann entweder in grün, dieser Browser unterstützt Has, oder es steht da in rot, äh, dieser Browser unterstützt Has noch nicht.
Ähm, ähm, und ich frage mich nur, wie sinnvoll das ist. Also, wenn's jetzt nicht nur um irgendwie, äh, kleine, farbige Dinger geht, oder so, oder es ist mir egal, ob jetzt eine Headline mit der, ähm, mit der, ähm, mit der, mit der, die eine Subline hat, dann halt irgendwie ein paar Pixel verschoben aussieht, oder so.
Wenn mir das egal ist, dann kann ich sagen, okay, ich mach das schon mit, mit Has, ähm, ansonsten ist die Frage, wenn ich sowieso ein Fallback einrichten muss, äh, macht das dann Sinn, das doppelt zu pflegen und trotzdem zusätzlich schon mit, mit Has-Selector? Wahrscheinlich noch nicht, oder?
Nee, nee. Würde ich, würde ich nicht sagen.
Wenn's, wenn's wirklich was Gravierendes ist, also zum Beispiel der Icon-Button, der sieht halt wirklich total doof aus, wenn, wenn da irgendwie das Icon falsch sitzt, weil da zu viel Abstand ist, oder so.
Ich glaub, wir sind noch nicht, ähm, dann, dann, dann, dann bringt mir auch dieses mit Supports abfragen das nicht so wirklich, ne?
Ähm, und was ich, das fand ich jetzt aber interessant, dass du das gesagt hast mit dem Supports, weil als ich die ersten Entwürfe gemacht habe für unsere Podcast-Seite, ähm, da hätte ich gerne für eine Stelle, ich weiß gar nicht mehr genau für was, Supports eingesetzt, aber eben für Selektoren.
Und Supports für Features, also für, äh, für, für Eigenschaften, ähm, das gibt's schon relativ lang und das funktioniert schon relativ gut, äh, ist eigentlich schon ziemlich etabliert, aber für Selektoren war das damals noch, äh, extrem, ähm, neu.
Okay, und ich hab jetzt grad mal nachgeguckt, mittlerweile kann man das eigentlich machen, würd ich sagen, äh, irgendwie, äh, Edge ab seit 83, ähm, Firefox seit 69, Chrome auch seit 83, äh, und Safari 14, ähm, aber das war, das ist, das gibt's noch gar nicht so lange, dass man mit Support-Selektoren abfragen kann.
Und das find ich aber eigentlich ziemlich, damals hätt ich's gebraucht, äh, und das gab's noch nicht, aber ich find's gut, dass das jetzt durch ist quasi, dass man's jetzt eigentlich einsetzen kann.
Ja, gerade für solche Übergangssachen, ja.
Ja, cool.
Okay.
Haben wir noch was?
Ähm, nee, ich glaub, das war's tatsächlich, wir sind unter einer Stunde und sind mit dem Thema, glaub ich, jetzt durch, oder?
Ja, macht nix, dafür ist es ein gutes Thema.
Und ich hab schon ganz viel rumgestammelt, was wir später noch nicht rausschneiden werden.
Nee, nee, klar, das bleibt alles drin.
Also ich überlege, da kannst du noch fünf Minuten rumgestammelt von mir abziehen.
Also was ich noch verlinke, ist, ähm, Chrome-Plattform-Status, äh, wo man sieht, wie's da, ja, wie der Stand gerade ist, ähm, und darin verlinkt ist auch nochmal das, das Ticket, wo man sieht, dass hier auch aktuell sich gerade was tut.
Ähm, 29. März ist der letzte, kommend, ähm, ja, also das ist, da wird dran gearbeitet und das wird in nicht allzu ferner Zeit dann wahrscheinlich auch in Chrome im, im Stable landen.
Ähm, ah, und es gibt ein Issue für, äh, Firefox auf GitHub, das haben sie, das ist nämlich da drin verlinkt, das ist interessant, äh, und da scheint's, das ist noch open auf jeden Fall.
Ja, no signal steht da beim, beim Chrome-Status, also ist irgendwie, ähm, ja, noch, noch keine Anzeichen dafür, dass das irgendwie angegangen wird, übernommen wird.
Und die, die, die, die quatschen da. Ich frag mich ja echt, wie das ist mit, also, hm, das, das würde ich, falls das irgendjemand von unseren HörerInnen, äh, weiß, das wird mich echt mal interessieren.
Ähm, so, so ein Algorithmus, um CSS zu parsen, das ist ja so, wenn ich den einmal geschrieben hab, ähm, dann, dann, und, und der ist gut getestet, dann funktioniert der, kann ich den dann nicht eigentlich für andere Browser auch einbauen?
Ja, frag ich mich grad, oder ist das da so unterschiedlich? Ich mein, das sind doch, nur ein Parser-Algorithmus, den, also, würde mich jetzt irgendwie wundern, wenn, keine Ahnung, das würde mich echt total interessieren.
Ja, hier ist die Frage, ob du, äh, äh, gut, lizenz, äh, technisch musst du halt dann sagen, hier vom Chrome-Team, ich weiß nicht, ob da nicht so Eitelheiten dann irgendwie auch so, äh, dahinterstecken, weißt du, dass du sagst, nee, wir kopieren das nicht von Chrome, wir machen das selber, wir machen das cooler.
Ich frag mich ja, wie das jetzt zum Beispiel ist, ähm, Apple, die bauen ja jetzt grad ganz viel an Safari rum und vorher hatte man so ein bisschen das Gefühl, das Safari ist so ein bisschen im Winterschlaf und jetzt geht's da grad ganz, ganz viel ab.
Bestimmt auch, äh, mit, äh, Verdienst von Jen Simmons, die ja jetzt, äh, da im, im Safari-Team arbeitet. Ähm, und ich hab mich gefragt, sind die nur deswegen so schnell, weil die jetzt die Blink-Sachen übernehmen können, weil das auf Webkit basiert?
Äh, äh, weil, äh, das wäre natürlich ja eine Richtung, die man, die man machen kann, ne? Also, wenn man jetzt halt sagt, naja, okay, äh, hier ist ja alles Open-Source, die Rendering-Engine, äh, da kann ich mich ja bedienen, dann geb ich das halt als Quelle an und so what.
Ähm, ja, also, ich weiß nicht, ja, das fände ich mal total interessant. Ist so ein Algorithmus für ein bestimmtes Feature, ist das portierbar zu einem anderen Browser in einer anderen Engine?
Ist, oder, oder schreibt man das tatsächlich neu, weil die Engines so unterschiedlich funktionieren, dass man das irgendwie machen muss? Weil es ist, jemand weiß, es wird mich extrem interessieren.
Bitte mal irgendwie dann bei Twitter melden oder einen Kommentar, äh, zur Folge schreiben.
Also, ich denke mal, ähm, allein von dem, was ich jetzt gesehen hab bei, ähm, bei dem anderen Chrome-Ticket, das ich ja schon mehrfach erwähnt hab, äh, Subgrid, ähm, das ist halt, da sind so viele Funktionsaufrufe, die ja andere Namen haben, ne?
Die ja, die du, das heißt dann irgendwie, Engie, was weiß ich was, ähm, das müsstest du ja alles umschreiben, dass das für deine Engine passt und, äh, wie du, wie du das verschachtelst und was du in welche Funktion auslagerst und so.
Wenn's natürlich mit anderen Features zusammenhängt, es ist ja, du hast recht, es ist ja nicht so, es ist ja nicht so, dass man das, äh, einfach reinwerfen kann und das hat gar keine Abhängigkeit.
Ja, die Variablen, wie die heißt, also, du hast schon, also, wie an dem Beispiel von dem Subgrid, da ist halt dann so, ja, das und das, äh, haben wir dahin ausgelagert und dann müssen wir erstmal, ähm, müssen wir hier alle, alle Grid-Elemente einmal durchgehen und so und das musst du ja alles, also, das heißt ja überall anders, bei, bei, bei, nachdem wir das geschrieben haben.
Ja, da könnte ich mir, könnte ich mir aber trotzdem tatsächlich vorstellen, dass einige Dinge in Blink, äh, halt immer noch genauso sind wie in Webkit und dass es da vielleicht besser geht, ähm, als wenn du jetzt sagst, naja, äh, die haben jetzt halt in Safari, in Webkit, äh, haben sie das jetzt mal eingebaut, ich schmeiß das jetzt mal in Firefox rein.
Das ist bestimmt, äh, nicht so einfach. Nee, das ist, ja, sehr guter Gedanke eigentlich, ja. Okay, cool. Dann, ja, wahrscheinlich, äh, wahrscheinlich ist es nicht so einfach. Das ist ja meistens, äh, meistens denkt man, ja, da muss man nur die,
die zwei Sachen jetzt zusammenklemmen und dann geht's und dann versuchst du. Ja, kopier auch einfach die Datei rein und dann funktioniert es. Und dann denkst du, ah, äh, irgendwie muss man da, da müssen die noch miteinander reden, da muss Datenaustauschformat und bla und, äh, ja, ist meistens, Dinge miteinander zu verheiraten, ist meistens schwieriger, als man denkt. Ja.
Okay, gut. So, den, den Chrome-Plattform-Status haben wir und, äh, du hast noch was mit Chromium? Äh, hab ich? Ja, das ist der, das ist das Ticket. Nochmal dieses, ähm, ja.
Wo man so ein bisschen sieht, was da passiert. Okay, gut, dann sind wir ja eigentlich jetzt, dann sind wir eigentlich tatsächlich durch. Sollen wir schon direkt, äh, zum Geil-Teil durchstarten oder? Danke mal. Ja. Hast du noch einen Nachtrag? Nee, ich hab einen Vortrag noch.
Einen Vortrag? Dann halt deinen Vortrag. Nee.
Das Geil-Teil. Geil-Teil.
Das ist mein Kopf voll los, ey.
Jetzt, jetzt hast du deinen, deinen Vortrag halt zum Geil-Teil.
Ja, das ist, ah, das ist eigentlich, das ist ganz kurz. Ähm, es geht um Musik. Es geht um Musik. Und zwar, äh, ich weiß nicht, ob das schon in der einen, hab ich, hab ich schon mal, hab ich irgendwie schon mal Proc? Ja, doch, wir hatten mal, wir hatten mal, ähm, äh, Dings da, Cory Wong und, äh, ja.
Ja. Äh, ich, äh, du weißt, was ich meine. Mir fällt, mir fällt grad die, die Dardy Loops, genau.
Ähm, ja, ich hab ja ein, ein großes Herz für Proc-Rock und Proc-Metal, aber nur für gut gemachten, natürlich. Ähm, und ich hab da jetzt vor, nee, eigentlich vor, vor ein paar Jahren was entdeckt und jetzt aber nochmal für mich wiederentdeckt und hab, bin jetzt voll drauf hängen geblieben.
Ähm, und, äh, hier meine kleine Empfehlung, ähm, die Band namens, äh, Haken.
Ähm, wie der Haken, ne?
Interessanterweise hab ich das, hab ich gelesen, es ist, äh, die Geschichte zu dem Namen, es ist ne britische Band.
Okay. Ähm, glaub ich sogar aus London und, äh, bei Wikipedia kann man nachlesen zum Bandnamen, dass es irgendwie mal, äh, entweder Haken mit zwei K oder mit zwei A, ich glaub mit zwei A, Haken, in Anspielung auf irgendeine nordische, nordische Mythologie, irgendeinen Gott oder sowas.
Ähm, ähm, ähm, und dann haben sie es aber irgendwann umgeändert mit einem A, ja, like German Hook, äh, tatsächlich in Anspielung auf den, warum auch immer, auf den Haken.
Ähm, ähm, ja, und, äh, ich bin jetzt nochmal drauf gestoßen, ähm, die haben, die haben in den letzten paar Jahren, äh, so, so ein paar bisschen härtere Alben gemacht und ich hab mich jetzt dem, äh, der Diskografie, äh, von Haken, äh, nochmal ein bisschen genähert.
Und da noch das Album, äh, gefunden, jetzt hat, Mensch, bin ich schlecht vorbereitet. Also generell Haken, geile Band, alles hören von denen. Ähm, aber ich mein das, ich mein das Album mit dem, äh, mit dem, mit dem Mountain drauf.
Genau, The Mountain heißt's. Einfach The Mountain. Das ist, äh, wunderschöner Proc Rock mit, mit ab und zu mal Tritt in die Fresse, so wie ich's gern mag.
Aber das sind, das sind so, das sind teilweise so wunderschöne, ähm, ähm, mehrere, mehrstimmige Gesangspassagen drin, da läuft's mir eiskalten Rücken runter, das ist einfach, also die haben mich, in der ersten Sekunde haben sie mich abgeholt mit dem Album, ähm, und, und es geht eigentlich, ich hab's in Dauerschleife gehört die letzten Tage, es geht, es geht einfach immer so weiter und ich, ich bin von, vom, vom einen Gefühlschaos im nächsten Gefühlschaos und immer voll drin und immer Gänsehaut und das ist einfach richtig, richtig gute Musik.
Also, Haken, äh, der Bandname ist mir schon lange ein Begriff und ich hab immer gedacht, ah, das kann ja nicht so gut sein, das ist ja nix, das ist ja nix.
Wie man manchmal so ein Vorurteil gegenüber Sachen hat, die man noch nicht so richtig gut kennt und dann lernt man sie kennen und du denkst so, boah, ist das geil.
Und, ähm, genau so Haken, also auch eine Empfehlung für dich, äh, Konstantin.
Ja, wenn ich auf jeden Fall reichne, ja.
Musikalisch, also, und ich muss sagen, die Alben, ähm, die neueren, das, äh, The Mountain, das ist jetzt schon ein bisschen älter, das ist von, äh,
2013, die neueren Alben, ähm, nämlich, ich glaub, das aktuell heißt Virus, ähm, die sind ein bisschen anderer Stil, die gehen, die gehen noch mehr nach vorne, die sind noch ein bisschen härter, find ich auch gut, wenn man, wenn man mal, wenn man so einen richtigen Schub braucht und so richtig, äh, einen harten, harten Gitarrentritt in die Fresse.
Ähm, aber das, The Mountain ist deutlich gefühlvoller und ich, ich find, ich kann beidem was abgewinnen und obwohl's komplett unterschiedlich ist, gefühlt für mich, also, genug gelabert über Musik.
Ich hab's gleich schon mal, ich hab's gleich schon mal hier, Apple Music aufgemacht mit dem Album.
Wir, ähm, wir müssen mal unseren Musikpodcast noch an den Start bringen, glaub ich, dann können wir über sowas länger, länger abnerven.
Und ganz wichtig, wir müssen mal was zusammen machen.
Wir müssen mal was zusammen machen.
Muss man das jetzt noch erklären?
Nee, wir haben auch schon hier.
Wir müssen, äh, Konstantin, wir müssen unbedingt mal was zusammen machen.
Unbedingt, ja.
Aus, aus, aus einem Konstantin, wir müssen unbedingt mal was zusammen machen, ist dieser Podcast geworden.
Ist dieser Podcast geworden.
Und ich hab vorhin, ich hab beim Klavierspielen vorhin, da war ich kurz am Klavier gesessen, hab ich so ein, so ein, so eine Melodie gespielt, äh, da hab ich gedacht, ah, da müsste ich mit Moritz mal was draus machen.
Das ist so ein, das ist so ein 80er Sound, so, ging schon Richtung, äh, hier, ähm, äh, na, wie hießen sie, ähm, wo wir es gerade vor ein paar Minuten davon hatten.
Toto?
Nee, nee, nee, nee.
Ach so, äh, du meinst, äh, Dirty Loops.
Ja, Dirty Loops, genau.
Das ist am Anfang dieses Baywatch-Gesample, äh, so klang das, und da hab ich gedacht, ah, das wär cool.
Ja.
Weil wir noch nicht genug, äh, Sachen am Hals haben, müssen wir noch, müssen wir auch noch Musik machen.
Ja, Musik und noch vier andere Podcasts, die, die alle schon in meinem Kopf fertig durchgeplant sind, ähm, ne, so, so war's halt.
Gut.
Dann kommt jetzt.
Dann kommt jetzt? Echt schon?
Ja.
Das Ende.
Wahnsinn.
Ja.
Super schnell, grad ein bisschen über eine Stunde, glaub ich.
Ja.
Ähm, ja.
Aber ist doch auch mal, auch mal nett, oder? Ich hab sogar noch Bier übrig.
Ich auch, und das ist nur eine 0,33er-Flasche, du hast, ist auch eine 0,33 bei dir, oder?
Äh, ja.
Sieht in der Kamera, interessanterweise, weil die, also, ich muss jetzt kurz das Bild erklären, was ich gerade gesehen hab, ähm, das, das, äh, das, äh, das, äh, das ist auch ein 0,33er-Flasche, oder?
Das Bier hat Konstantin gerade in der Hand gehalten, aber relativ am Rand von, von dem Bild, das ich sehe. Und ich hatte den Eindruck, dass es verzerrt, dass die Kamera zum Rand hin verzerrt und dass die, die Flasche, genau, die sieht am Rand viel größer aus, als in der Mitte.
Machen wir weiter in die Mitte.
Ach, tatsächlich?
Ja, ja. Die, die, die Kamera, die hat so einen, so einen, so einen leichten Fischei-Effekt.
Ja, ja, stimmt.
Und, äh, wenn du so am Rand hältst, ist es eine 0,5-Waffflasche und in der Mitte ist 0,33.
Tatsächlich.
Verrückt.
Das ist, ist, ist erstaunlich.
Mir hat grad zum ersten Mal aufgefallen, dass deine Kamera ein bisschen verzerrt.
Am Rand halten hat man mehr fürs Geld.
Also, halt mal den Rand jetzt.
Oh je.
Ja, gut, ich glaube, es reicht auch mit der Stunde, oder?
Ja, reicht auch.
Also, vielen Dank fürs Zuhören.
Ja, danke schön.
Ich hoffe, es war ein bisschen Informationen dabei, die ihr noch nicht kanntet.
Dabei ist es ja jetzt gar nicht so, dass das Allerneueste vom Neuen.
Es ist jetzt aber irgendwie in meiner Timeline öfter aufgeschlagen und mit Artikeln und Demo-Sage.
Ja, weil es jetzt gerade halt der erste Browser unterstützt, deswegen kommt das.
Der CS-Astrix-Artikel, der ist, der ist vom, warte mal, der ist von.
Vom März letztes Jahr, also der ist schon ein Jahr alt.
Das heißt, da konnte es noch keinen, kein Browser, aber jetzt.
Genau, so, jetzt kommt man mit rumspielen, schlimme Sachen damit machen, den Killer-Selektor
damit bauen, äh, den Einstellungs-Selektor.
Und, äh, genau.
Vielleicht hattet ihr ein bisschen Spaß, schreibt es in die Kommentare, drückt die Glocke,
ihr wisst es schon.
Ach so, bist du echt schnell genug?
Nein, nein, nein, nein, nein, nein, lass das.
Kriegen wir wieder Ärger für die Glocke.
Ja, ja, Mensch, ja, dann, äh, bleibt mir auch nur, danke und, äh, bis zum nächsten Mal,
weil ich, ich glaube, knapp viel fürs Outboarder finden.
Äh, und genau, in einer Woche wieder Stream, äh, würde ich sagen.
Das ist dann der, äh, 15., ja, wir machen, versuchen wieder, wenn ich nicht wieder fünfmal
krank werde, dazwischen, wieder den Rhythmus jetzt beizubehalten alle zwei Wochen.
Dann 15., 29., da wäre dann wieder Stream und am 22., beziehungsweise 24. dann die nächste
Podcast-Folge.
Genau, ja, 2022, äh, April, wollte ich noch dazu sagen, weil, ähm, unser Podcast wird
ja auch noch in 27.000 Jahren gehört.
So, jetzt machen wir das Outro.
Macht's gut, bis dann.
Tschau.