Wo wir sind, ist vorne, Folge 54, HTML von A bis ZZ, Teil 3, Text-Content. 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-Jungleur Konstantin Groß. Hallo. Hallöchen. Da sind wir wieder und es geht weiter mit unserer HTML-Serie. Ja, wir haben einen kurzen Intermezzo.
Intermezzo-Schmezzo, was sehr gut war, wie ich finde. Also auch nochmal Danke an den Manuel, der in der letzten Folge zu Gast war. Ja, so, wollen wir Getränk klären? Ja, ich habe heute tatsächlich was, was ich sonst nicht habe. Und zwar habe ich heute eine große Flasche, ich zeige es mal in die Kamera, Thomas Henry Dry Tonic, erfrischend trocken. Ohne Gin. Es ist ohne Gin, ja. Ich hätte sogar noch, wir hätten sogar noch alkoholfreien Gin im Haus gehabt. Alkoholfreien Gin?
Ja, ich habe dankend abgelehnt, ich habe mir gedacht, das ist ja dann auch nur Limo. Ja. Also kann ich, wenn ich jetzt Limo mit Limo mische, dann kann ich auch Limo-Bur trinken. Ich habe eine Fritz-Limo, Apfel-Kirsch-Holunder. Apfel-Kirsch-Holunder. Apfel-Kirsch-Holunder, die habe ich noch nicht probiert. Ich bin gespannt. Ach so, ja genau, es war jetzt ein relativ unspektakuläres Öffnungserlebnis, hat man so ein bisschen zitt gemacht. Ich würde jetzt aber dann mal ASMR einschenken.
Oh, du hast so ein Glas. Es klingt auch, man hört auch schon nicht, ich spreche gerade in das Glas rein. Also ich muss sagen. Also der Sound muss auf Free Sound, oder? Das war ein außergewöhnlich satter, bassiger Sound dafür, dass ich nur aus einer Flasche eingeschenkt habe. Ich wusste nicht, dass da so tiefe Frequenzen rauskommen. Nee, auf Pay Sound hätte ich den gerne. Der war es wert. Für Free Sound ist das so gut. Erstaunlich. Also das ist ja eine krasse Flasche.
Aber natürlich war ich jetzt auch extrem nah dran am Mikrofon. Aber ja, das war wirklich, wow. Jetzt kann ich ein bisschen, muss ich mal gucken, ob das mit anderen Flaschen auch so ist. Oder ob das tatsächlich eine Eigenheit dieser Flasche ist. Das habe ich, glaube ich, so noch nie gemacht. Ja, dann. Ja, zu wohl. Schon halb leer. Ja, großer Schluck. Aber ist echt lecker. Schmeckt so ein bisschen wie diese Kirschlollis, die man als Kind beim Bäcker früher geschenkt bekommen hat.
Erinnerst du dich? Ja. So schmeckt das ein bisschen. Ich muss sagen, ich bin ein bisschen enttäuscht von diesem Dry Tonic. Also Tonic Water schmeckt ja normalerweise schon so, wie soll ich sagen? Naja, das ist schon so ein bisschen Eigen im Geschmack. Bitter halt, ja. Bitter, so ein bisschen bitter, genau. Und das, jetzt habe ich Dry, also ich weiß, das ist das Thomas-Henry-Tonic. Das ist normalerweise nochmal eine Nummer härter gewesen. Habe ich es zumindest in Erinnerung.
Und jetzt heißt es auch noch Dry. Habe ich erwartet, dass es jetzt noch schlimmer ist. Und ich habe das Gefühl, das ist sogar jetzt gerade, aber es kann auch sein, dass es die Flasche schon ein bisschen länger rumsteht. Dass es vielleicht deswegen ist. Aber es schmeckt, finde ich jetzt gerade, sogar noch sanfter als das Normale von Schweppes. Ja. Das Tonic Water.
Also es ist irgendwie, also ich meine, es stört mich jetzt nicht, aber ich habe jetzt was Krasses erwartet und so ein bisschen, aber dafür klingt die Flasche krass, wenn man das ausschenkt. Müssen wir jetzt öfter mal ein, wir müssen auch mal Glas nehmen und dann schenken wir ein und gucken, was besser klingt. Ja. Der Glas-Vergleich. Okay. Jo. Soll mal. Weitermachen. Soll mal. Jo, mach mal. BWSEV präsentiert die Retrospektive.
Jo, wir haben jetzt hier nochmal die Ankündigung für unsere HörerInnen-Treffen bei der Beyond-Tolerant-Konferenz. Wenn ihr uns treffen wollt, dann kommt am 15.04. nach Düsseldorf das Einzige, was ihr dafür… Nee, Moment, das ist Blödsinn, 16. Ich habe es mir falsch aufgeschrieben. 16.04. Stimmt, ja, Sonntag. Am 16.04. Ihr dürft natürlich auch schon am 15.04. nach Düsseldorf kommen. Ja, aber dann trefft ihr recht mit anderen. Ich habe gehört, Einreizgenehmigung ist auch ab 14.04. schon.
Ja, okay. Darf man auch. Nee, also am 16.04. Entschuldigung, am 16.04., das ist ein Sonntag, wie der Konstantin schon gesagt hat, abends, ich glaube 18.30 war die Zeit, wenn ich es noch richtig weiß. Genau, das Einzige, was ihr dafür machen müsst, ist, ihr müsst euch anmelden für das Pre-Conference-Warm-Up. Da gibt es einen Link auf der Event-Seite, aber der kommt auch nochmal in die Show Notes.
Genau, weil wir werden dort sein, aber ihr könnt euch einfach, wenn ihr euch dort anmeldet, ihr müsst auch nicht KonferenzbesucherInnen sein, um auf das Warm-Up zu kommen. Ihr dürft da auch so hinkommen und dann treffen wir euch dort. Genau. Wir sind dann die mit dem Fähnchen. Nein, wir wissen noch nicht, wir haben überlegt, ob wir aus Spaß so ein Fähnchen mit dem Podcast-Logo irgendwie irgendwo hinstellen. Das war dann doch ein bisschen teuer. Vielleicht für so einen Spaß.
Aber deine Tochter könnte doch eins malen. Ja, das auf jeden Fall. Ja, das können wir mal. Wir können WSIV-Ausmalbilder. Gib dir doch mal so ein DIN-A1-Blatt und sag mal, mal mal das. Und dann nehmen wir das genau so, das, was dann rauskommt. Auch wenn da noch irgendwo noch ein Schiff dazu gemalt ist oder so. Okay. Ich könnte unser Logo ausdrucken, also nur mit den Umrisse, wie so ein Ausmalbild. Und dann sagen, hier kommt das mit einem pinken Stift.
Das wäre doch, das fände ich ja echt gut. Das ist eine gute Idee, ja. Guck mal, da hat sie was zu tun und wir beuten dein Kind einfach weiter aus für diese Show hier. Ich weiß gar nicht, ob das alle schon wissen, aber wir haben ja auch so kleine Soundbites, die von ihr eingesprochen wurden. Zum Beispiel das hier. Ja, was gibt's. Wer im Stream schon mal dabei war, der hat schon einiges davon gehört. Hier im Podcast haben wir das bisher eher ... Zurückhaltend. Zurückhaltend.
Aber es ist wirklich ... Fabelhaft. Ja, okay, also das hier, HörerInnen-Treffen, kommt unbedingt am 16. April nach Düsseldorf. Wir freuen uns mega. Wir freuen uns zu treffen mal in Person. Genau. Nach drei Jahren. Es wird danach, irgendwann in den Wochen danach, irgendwann wahrscheinlich noch was in Karlsruhe geben. Da sind wir gerade noch in Erklärung. Stimmt, kann man aber auch schon mal ankündigen. Es gibt noch keinen Termin, aber so nehmt euch in den nächsten Wochen nichts vor.
Nehmt euch in den nächsten Wochen. Nehmt euch in den nächsten Wochen. Nehmt euch in den nächsten Wochen. Nehmt euch in den 28 Wochen. Genau, nach der Konferenz. Nehmt euch dieses Jahr einfach nichts mehr vor. Wenn jemand fragt, hast du am Wochenende nicht schon was vor? Ja, da kann ich leider nicht. Ne, egal wann. Hast du dieses Jahr noch was vor? Ja. Ja. Tut mir leid. Keine Zeit. Ah, dieses Jahr kann ich leider nicht mehr. Dieses Jahr kann ich nicht. Nächstes Jahr?
Nee, nächstes Jahr haben wir auch leider keine Zeit. Ja, alter Helge Schneider-Spruch muss immer mal wieder sein. Okay, dann können wir zum nächsten.
Ja, ich hab heute ein bisschen rumgehackt an WordPress, man muss es so nennen, weil ich da gerade was versuche, also eigentlich versuche ich nur zu eruieren, wie viel Zeit ich in etwa brauche, um ein Angebot zu schreiben für ein Projekt und hab dafür aber schon sehr viel Zeit investiert, um überhaupt mal zu gucken, wie viel Zeit das dann brauchen wird, weil ich dann festgestellt hab, hm, okay, so trivial wie ich mir das vorgestellt hatte, ist es leider doch nicht.
Ich versuche da in den Media-Uploader von WordPress was reinzuhängen und vor ein paar Jahren war das, glaube ich, alles noch so PHP-seitig, halt irgendwelche Hooks und so und dann hat es schon irgendwie gepasst und inzwischen ist das aber alles JavaScript und ich weiß nicht, ob an der Stelle sogar schon React, weil der ganze guten Bergeditor basiert ja auf React-Komponenten
inzwischen. Und ja, es ist leider nicht so wirklich gut dokumentiert, das heißt, ich bin viel am, im Quellcode von WordPress rumsuchen und bei anderen Plugins, die sich an ähnliche Stellen einklinken, gucken, wie machen die das dann? Und ja, das ist so ein bisschen eine Welt für sich. Und dabei bin ich heute auf was gestoßen, was mir vorher nicht bewusst war, weil ich so häufig mit I-Frames nicht zu tun habe. Aber in dem Fall wird da eine externe API oder so ein SDK angebunden in
einem I-Frame, der dann mit Post-Message kommuniziert. Und jetzt ist es so, dass der in einem Tab von diesem Media-Uploader eingehängt wird. Und das Problem ist, weil das halt so Komponenten sind, sind die halt nicht dauerhaft im DOM. Das heißt, wenn ich das Tab wechsle, dann wird da was im DOM neu gerendert. Und das heißt, dass auch der I-Frame neu eingehängt wird. Oh ja. Und dann lädt der neu.
Ja. Und das war mir nicht bewusst. Also ich kann einen I-Frame, selbst wenn ich den einfach nur innerhalb vom Parent-Element irgendwie rumschiebe oder sowas, dann lädt der neu. Der bleibt, der behält nicht seinen Zustand. Aber okay. Aber ist das wirklich egal, wie man das macht? Es gibt ja unterschiedliche
technische Möglichkeiten, den I-Frame oder ein Element zu verschieben im DOM. Bist du dir sicher, dass das theoretisch eine Möglichkeit gibt, ein I-Frame zu verschieben, ohne dass er neu geladen wird? Da bin ich mir nämlich nicht so sicher. Ja, es gibt nämlich Bug-Tickets bei Mozilla und bei Safari,
bei WebKit. Und auch bei der Watch-WG-Gruppe gibt es ein Git-Issue. Und es gab mal die Möglichkeit in Firefox über Magic I-Frames, was auch immer das ist, habe ich nicht weiter recherchiert, das irgendwie zu machen. Und das gab dann aber, ja, Magic Mushrooms, Magic I-Frames. Und es gab dann aber irgendwie Security-Issues. Und deswegen wurde das dann wieder ausgebaut. den I-Frame geschnupft. Ja, und das ist, also die einzige Möglichkeit, die es irgendwie gibt,
ist wohl, mit Slots zu arbeiten. Aber da ich ja nicht direkt Einfluss auf diese Komponenten habe, die da benutzt werden, ist das für mich keine Möglichkeit. Also ich müsste ja, ja, habe ich mir dann gar nicht weiter angeschaut. Aber wie gesagt, ich kann soweit ja da gar nicht rein. Ich kann da halt nur an bestimmten Stellen was einhängen und ein bisschen erweitern. Aber so komplett, wie das Ding
funktioniert, kann ich halt nicht mehr einflussen. Und vielleicht schaue ich mir das mal noch an mit den Slots, wie das denn theoretisch funktioniert. Aber so wie ich es versucht hatte, also dass ich den I-Frame vielleicht, wenn das, bevor das verschwindet, quasi aus dem DOM aushänge, aber noch in der Variable speichere. Also so, dass er nur detached ist und halt nicht mehr im DOM ist. Und dann wieder
einhängen, bringt auch nichts. Also auch dann wird er wieder neu geladen. Und auch wenn ich ihn irgendwo anders hinschiebe, jetzt irgendwie ans Ende vom Body oder so und verstecke und wieder einbinde, funktioniert auch nicht. Also die einzige Möglichkeit, die ich jetzt sehen würde, wäre, den I-Frame quasi immer zu positionieren an der richtigen Stelle in diesem Model. Das heißt, dass ich auf Orientation Change und auf Resize und sowas auch, damit es
dann auch trotzdem noch responsive ist, reagiere. Und das Model hat ja immer eine entsprechende Größe vom Browserfenster abhängig, mit einem Rahmen außenrum. Und dass ich dann gucke, wie ist denn der Offset von diesem Content-Bereich in dem Model und dann den I-Frame hinschiebe. Aber sehr, sehr unschön. Gefällt mir nicht, die Lösung. Aber es wäre eine geile Lösung im Sinne von, du hast es einfach mit Gewalt trotzdem hingekriegt.
Das funktioniert trotzdem. Weil es ist halt für den User echt unschön. Ich wechsle da irgendwie das Tab und
jedes Mal lädt dieser I-Frame neu. Und da ich dem I-Frame ja auch keinen State übergeben kann, gut, beziehungsweise müsste man dann halt vielleicht aushandeln, ob man die Möglichkeit bekommt, da irgendwie zu sagen, okay, auf der und der Seite mit dem und dem Suchquery oder was, habe ich halt nicht die Möglichkeit zu sagen, okay, und jetzt lade den I-Frame genau an der Stelle, wo ich es jetzt gerade brauche und wähle die und die Dinge aus und so. Das war mir echt nicht bewusst, dass das…
Nee, war mir auch nicht bewusst. Also das ist schon sehr lange so, das Ticket ist auch irgendwie von 2020, aber die Bug-Tickets sind noch viel älter. Die sind, glaube ich, 2008, wenn ich mich nicht täusche. Und du willst halt, und du brauchst das… Oh, vor 19 Jahren. Vor 19 Jahren. Und vor neun Jahren geschlossen, das Ticket bei Mozilla. Achso, aber wenn es geschlossen ist? Ja, aber als Woundfix. Und das ist quasi das Webkit-Ticket auch 2007 eröffnet und 2014 das letzte Mal bearbeitet.
Also, ja, ist leider nicht. Jetzt muss ich mal gucken, ob wir vielleicht dann doch von der I-Frame-Lösung komplett wegkommen und quasi eine andere Component bekommen, die wir da reinschmeißen können, wobei dann das Problem wahrscheinlich das gleiche ist, dass das neu geladen wird. Okay, es geht aber nur mit… Ich muss nochmal nachfragen, wenn mir gerade ein Beispiel
eingefallen ist, wo ich glaube, dass das funktioniert. Das geht aber nur… Also, wieso muss der eigentlich bewegt werden im DOM? Also, wegen mir muss der gar nicht bewegt werden, aber er wird halt ausgehängt, dadurch, dass das Element weg ist. Weil wenn ich einen anderen Reiter klicke, wird der andere leer gemacht, oder was? Genau, der Content ist dann gar nicht mehr da. Okay, okay.
Und deswegen war dann mein Versuch, okay, dann habe ich halt einen Listener und gucke, wann ändert sich das und schmeiß das dann halt und hänge das dann aus und häng es dann wieder ein, aber dann ist er trotzdem wieder neu geladen. Also, ich setze dann quasi an der entsprechenden Stelle beim Laden den I-Frame wieder.
Ich habe nur gerade gedacht, weil im Hintergrund dürfte eigentlich kein Problem sein. Also, ich habe nur gerade überlegt, ob das auch ist, wenn er quasi nicht mehr sichtbar ist. Also, das geht. Also, das würde gehen. Also, der Parent wird quasi gelöscht. Genau, diese Lösung, mit dem ich platziere den einfach da drüber, indem ich mir die Werte hole, wo der sitzen muss, das würde theoretisch funktionieren, weil er halt zwischendrin dann nur ausgeblendet wird und trotzdem noch da ist.
Also, da bin ich, da bin ich sehr gespannt, was unsere HörerInnen dazu zu sagen haben. Also, wenn da jemand noch einen Tipp hat oder irgendwie so ein Workaround, wie man mit diesen Slots… Das klingt so nach, es könnte so eine komische, eklige Lösung geben, die aber keiner kennt oder die nicht so bekannt ist. Wer weiß. Weil ich weiß, es gibt ja auch so einige Tools, die total auf I-Frames setzen, wo du dir irgendwie Kommentarspalt und was weiß ich was einbinden
kannst. Da wird ganz viel krasse Magie gemacht, aber du hast keinen Einfluss auf das, was immer I-Frame ist, nehme ich an, ne? Ne. Okay. Also, indirekt. Aber wer weiß. Ich kann sagen, hey, wir brauchen da irgendwie eine Lösung und dann wird das vielleicht gemacht, aber ja, weiß ich noch nicht. Aber da wäre ich aber echt gespannt, weil könnte ich mir, das wäre so ein klassisches Ding, wo ich mir vorstellen könnte, dass es noch irgendwie was Fieses gibt.
Das sagen auch ganz viele in diesen Tickets so, das kann doch nicht sein, nach all den Jahren, dass es da immer noch keine Lösung gibt, weil sie halt eben irgendwelche, ich meine, es geht ja nicht nur darum, irgendwelche fremden Webseiten in meiner Webseite darzustellen, sondern ich meine, wir leben im Zeitalter von Web-Anwendungen und von irgendwelchen krassen Geschichten, die mit, wo Services miteinander kommunizieren und dass es da noch nicht möglich ist, das
Seamless irgendwie was hinzubekommen, das ist schon sehr seltsam. Aber es gibt bestimmt eine Möglichkeit, ich sage das jetzt einfach mal. Ja, und wenn es nur blöd rumpositioniert ist. Ja, aber ich meine, immerhin, immerhin. Ich meine, dein Vorwissen und deine Kreativität haben dich schon zu einer Lösung, einer potenziellen Lösung gebracht, die zwar hässlich ist, aber die funktioniert. Aber funktionieren würde. Immerhin, immerhin.
Und für mich klingt es auch nach, ich habe jetzt natürlich nicht alles durchdacht, aber das klingt nach, das könnte tatsächlich auch halbwegs robust sein. Aber ja, muss man gucken. Bin ich gespannt, bin ich sehr gespannt. Ja, ich auch.
Okay, dann haben wir noch einen kleinen Retro-Punkt, der ist, das haben wir im Stream schon öfter mal angesprochen und auch auf Social Media habt ihr schon davon gehört und das ist eigentlich nur so ein bisschen Quatsch, hat mit dem Podcast eigentlich so direkt nichts zu tun, aber ist so ein bisschen mein Projekt.
Und zwar habe ich mal angeregt, oder ich hatte mal die Idee, ich könnte doch mal so als DJ irgendwo auftreten, obwohl ich das gar nicht kann und würde so 90er-Trash- und Guilty-Pleasures-Musik auflegen, also so Britney Spears, NSYNC, Backstreet Boys, Celine Dion und Blümchen, Scooter. War ich gar nicht begeistert von. Ich könnte die Liste ewig fortführen.
Ja, habe einfach mega Spaß an dieser Musik und ich habe halt keinen DJ-Namen und weil das blöd ist, sich selbst was auszudenken, was dann irgendwie, was die Leute, habe ich mir gedacht, naja, gebe ich einfach die Verantwortung in die Community, habe sowohl Vorschläge einreichen lassen, als auch eine Abstimmung jetzt.
Die Vorschläge, Vorschlagszeit ist jetzt schon abgelaufen und jetzt kann abgestimmt werden, was der Name werden soll und es sind, Moment, ich weiß gar nicht, ich habe jetzt gar keine Zahl mehr, wie viele Vorschläge es sind, es sind aber knapp 100. Das sind sehr, sehr, sehr viele, wobei einige sich doppeln oder Kombinationen von anderen sind. Genau und den Link zur Abstimmung, ich glaube, das läuft jetzt noch eine Woche oder so.
Genau, Abstimmung endet, also stand jetzt Freitagabend, 31. März, sage ich jetzt dazu, noch sechs Tage, 23 Stunden, also geht, glaube ich, bis Freitagabend wieder nächste Woche. Dann im Stream wird das wahrscheinlich dann irgendwann enden, glaube ich. Ja, und ich würde mich sehr freuen, wenn ihr abstimmen würdet, da sind eine Menge lustiger Sachen dabei. Momentan, ich sage nicht, was jetzt gerade führt. Hast du noch die Einstellung geändert?
Vorher konnte man nach dem Abstimmen nämlich sehen, was und jetzt, okay. Ja, habe ich absichtlich nochmal geändert, weil ich nicht wollte, also man kann auch mehrfach theoretisch abstimmen, also wenn man irgendwie jetzt nochmal im anderen Browser oder so aufmacht und ich wollte nicht, dass das beeinflusst, was ausgewählt wird.
Mich stört schon die Reihenfolge, weil ich sehen kann an den Ergebnissen, dass die Reihenfolge, in der die Sachen da stehen, beeinflusst, welche angeguckt werden und was angeklickt wird, weil die, die weiter oben stehen, tendenziell öfter angeklickt werden. Das wäre doch mal was für so ein Pollsystem, dass die Antworten immer zufällig ausgesteuert werden. Das gibt es durchaus.
Ich weiß nicht, ob ich es vielleicht nochmal ändern kann, die Reihenfolge, das muss ich mal gucken, dann würde ich nämlich einfach nochmal durchschaffeln, weil ich will nicht, dass irgendwie, das finde ich irgendwie blöd, wenn einfach das genommen wird, was oben steht, weil die Leute zu faul sind, alles runterzulesen, sondern, ja genau.
Ja, genau, also das, da würde ich mich sehr freuen, der Link kommt in die Shownotes, würde mich extrem freuen, wenn ihr da mal lest und abstimmt, also es sind wirklich sehr, sehr, sehr lustige Vorschläge, dabei halt alle so ein bisschen, also die Aufgabe war quasi, so einen Namen zu finden, der sowohl so Frontend-Technologien oder irgendwie so Nerd-Zeug verbindet mit 90er und Musik. Und da sind sehr witzige Sachen rausgekommen. Also ich lese es einfach so mal zum Spaß ein bisschen quer.
Also zum Beispiel Katie Query, was auch ein guter Dragname wäre, Jason Derulo, Oli P., kann man tatsächlich komplett mit HTML-Text schreiben, da habe ich mir auch vorher nie drüber Gedanken gemacht, oder zum Beispiel tilde.trash slash 90er slash Guilty Pleasures oder Drop Table, MC On-Click, DJ Anti-Pattern. DJ Style Injection, finde ich es gut. Style Injection, genau, das ist auch sehr gut. Schoko Wave Flash. Ja, also eine Menge, eine Menge witziger Sachen sind da eingereicht worden.
Also ich finde sie alle gut. Und wer den Rickroll findet, der darf ihn behalten. Den kann ich auf jeden Fall auch schon mal ankündigen. Ich würde mich mega freuen, wenn ihr abstimmen würdet. Genau, das ist eigentlich nur hier an der Stelle schon viel zu viel drüber geredet, schon viel zu viel Redezeit draufgegangen. Also einfach mal draufklicken, durchlesen, abstimmen. Ich freue mich. Okay. Okay. Hey, hey du. Schön, dass du da bist. Na, öfter hier?
Dir gefällt, was du hörst und du magst es am liebsten werbefrei und unabhängig? Dann freuen wir uns sehr über ein paar Euro in unserem digitalen Strumpfband unter bwsev.de Auf bwsev.de findest du noch ca. 69 weitere Wege, uns zu supporten. Wir danken dir. Dreierkurs heute. Ja, da geht's direkt weiter. Hier ist WWS IV mit dem Tagesthema. Ja, du hast es schon angekündigt. Wir machen heute weiter mit der HTML-Element-Serie. Und es geht weiter zum nächsten Abschnitt.
Und das ist der, jetzt muss ich selber nochmal kurz aufmachen, Text-Content. Das ist im Endeffekt alles, was irgendwie zwischen dem öffnenden und dem schließenden Body-Tag-Platz findet. Und wir machen heute ein bisschen was anderes an der Reihenfolge. Vorher haben wir das alphabetisch gemacht innerhalb dieser Gruppen, was schon manchmal ein bisschen verwirrend war, weil dann Dinge in nicht logischen Reihenfolgen vorgekommen sind.
Und deswegen haben wir heute gesagt, da sind viele Sachen dabei, die sich so gruppieren lassen, weil die direkt zusammengehören, weil sie Kind-Elemente von bestimmten Elementen sind oder so. Und dementsprechend haben wir uns heute, wir haben auch nicht alle aus der Kategorie, sondern wir haben uns ein paar ausgesucht, damit es nicht zu lange wird, und gruppieren das so ein bisschen, was zusammengehört.
Genau, vielleicht muss man noch sagen, Text-Content, das sind alles eigentlich die Block-Elemente. Auf jeden Fall sind es nicht die klassischen Inline-Elemente wie B oder so was oder Span oder M. Genau, das ist dann die nächste Section, Inline-Text-Semantics. Genau. Okay, aber wir machen heute die Nicht-Inline-Elemente. Und ich fange an mit OL, UL, Menu und Lie. Die gehören alle zusammen und die kennen sicherlich fast alle, die hier zuhören, denke ich doch mal.
UL heißt Unordered List. Das heißt, es ist eine Liste, bei der die Reihenfolge der Elemente egal ist. Und ein UL hat immer Li-Elemente als Kind-Elemente. Und Li steht einfach für List-Item, soweit ich weiß. Genau, und die werden dann dargestellt im Browser mit entweder so runden Kreisen gefüllt oder schwarz gefüllten Vierecken, was ich natürlich auch bei CSS beeinflussen kann. Und wenn ich die schachtel, also wenn ich ein UL mit Li standardmäßig, hat es dann einen nicht gefüllten Kreis.
Und wenn ich dann in das Li nochmal ein UL reinmache, dann habe ich ein schwarz gefülltes Viereck. Also kann ich die verschachteln. Ansonsten haben die globale Attribute und bei ULs gibt es eigentlich soweit keine anderen Attribute. Zumindest keine mehr, die heute noch verwendet werden. Früher gab es da noch was, aber das macht man heute alles per CSS. Genau, Li-Elemente, wie gesagt, ist das, was drin ist. Und dann gibt es noch eine semantische Variante vom UL, und zwar das Menu.
Und das ist auch heute noch gültig, wurde aber früher, das ist so ein bisschen Trivia jetzt am Rande, auch noch anders verwendet, gab noch einen anderen Einsatzzweck. Also heute ist es so, es ist im Endeffekt nur eine semantische Variante davon für eben Menü-Elemente, die man damit kennzeichnen kann, auszeichnen kann. Ansonsten wird es in den Browsern genauso behandelt wie in UL auch.
Was ich aber früher machen konnte, war, ich konnte Menü-Type gleich Kontext setzen und konnte dann bei anderen Elementen, also zum Beispiel auf dem Body-Element, konnte ich dann sagen, Kontext-Menü als Attribut ist gleich und dann eine ID von so einem Menü-Type-Kontext. Und dann konnte ich dieses Menü als Rechtsklick-Menü, als Kontext-Menü verwenden. Und dann hat man in diesem Menü-Item als Child-Elemente benutzt, anstatt Li-Elemente.
Und konnte da drin dann halt interaktiv mit On-Click irgendwie Dinge ausführen. Und ich konnte sogar das HR-Element, das machen wir aber heute nicht, Aber das finde ich auch schon mal genau, als Trennlinie konnte ich dann da einsetzen. Das wusste ich nicht. Das fand ich ganz interessant, weil das irgendwie auch, ich meine, dass ich mal irgendwann damit rumgespielt habe.
Ich weiß aber nicht mal mehr, in welchem Browser das damals war, ob das sogar der EA war oder der Firefox, der das unterstützt hat. Ich behaupte, dass sowas in Firefox mal ging, für eine Zeit. Das kann gut sein. Wir können mal kurz … Ist aber lange her. Ist sehr lange her, ja. Aber habe ich mich jetzt wirklich, wenn du es nicht gesagt hättest, ich hätte mich nicht daran erinnert, dass das so ging. Ich gucke mal kurz hier. Browser-Compatibility.
No longer supported in any browser Firefox. The only browser that supported this element removed support in 85. Also auch schon einige Zeit her. Da hat mich mein Gedächtnis nicht im Stich gelassen. Ausnahmsweise. Genau. Eigentlich ja irgendwie schade, so eine native Möglichkeit, Menü-Elemente zu machen. Ja, es introduzt halt auch eine Menge Probleme. Weil was passiert mit dem anderen Kontext-Menü?
Und ich glaube, Firefox hat das eine Zeit lang dann so gelöst, dass diese Elemente hinzugefügt wurden. Ach hinzu, zu dem … ah, okay. Also das war, glaube ich, mal so, dass sie hinzugefügt wurden. Und dann wird das halt auch sehr, sehr lang unter Umständen, was du da machen willst. Und du hast halt noch 27 andere Optionen vor deinen, die du da hast. Oder du sagst halt, nein, es wird nicht hinzugefügt, sondern es gibt dann nur dieses Kontext-Menü.
Aber wieso, dann kann ich auf das normale Kontext-Menü nicht mehr zugreifen an der Stelle, wo ich das definiere. Also, es ist schwierig. Schwierig, weil … Ach so, habe ich jetzt … Haben wir das nicht? Nee, den Sound haben wir gleich. Nein, schade. Denen gibt es nur im Stream. Ja, genau. Den gibt es nur im Stream. Ja. Genau. Also, das ist halt … das muss man sich halt überlegen. Was passiert dann mit dem eigentlichen Kontext-Menü und was ist wichtiger?
Und ich glaube, im Zweifelsfall würde ich mich auch tatsächlich als Browser-Hersteller dafür entscheiden, dass die eigentlichen Menüpunkte, die sonst im Kontext-Menü sind, also die global sozusagen, egal wo ich hinklicke, dass die wichtiger sind, als das, was irgendein Web-Developer da reinfrickelt.
Aber man konnte doch zumindest früher, weiß gar nicht, ob das heute noch geht, man konnte auch den Rechtsklick abfangen und das Menü verhindern und dann irgendwie manuell irgendwie … Das geht immer noch. Ja, also dann hast du das gleiche Problem immer noch.
Das geht definitiv immer noch, dass man es abfängt, weil es gibt ja so Tools und mir fällt jetzt zum Beispiel ein, ich glaube bei Nextcloud ist das so oder Google Drive, also alle, die so ein bisschen betriebssystemartig daherkommen und zum Beispiel so ein, keine Ahnung, eine Baumstruktur von Foldern oder sowas irgendwie zeigen, also so ein Feind oder so ein Explorer halt im Browser, da hast du normalerweise immer so Rechtsklick-Aktionen drauf und das
gibt es auch. Ich habe jetzt gerade mein Nextcloud nochmal kurz aufgemacht, um es nochmal zu checken, ob ich auch jetzt keinen Quatsch erzähle. Also da muss der Rechtsklick abgefangen werden, das kann gar nicht anders sein und dann habe ich da so ein eigenes Menü, was halt im Browser gebaut ist, jetzt zum Beispiel Ordner teilen, Favoriten hinzufügen, Details umbenennen und sowas.
Ja, von daher denke ich mir, da es ja immer noch geht, das zu überschreiben, wäre das eigentlich nicht mehr als Argument zu sagen, wir machen das nicht nativ. So, dass man dann sagen würde, man ersetzt das durch das eigene. Ja. Ja, why not? Aber dann kommen die blöden Webdeveloper wieder daher und sagen, ja, aber ich hätte das jetzt gern selbst gestylt und ich hätte jetzt da gern Icons drin und ich hätte das gern in der Animation und das muss Blinky-Bundi und das muss Blinky-Bundi.
Ja, aber auch das hätte man ja erweitern können. Ja, aber ich kann auch verstehen, dass man dann sagt, macht doch euer Scheiß allein. Mit Select, das ist schon so schiefgegangen. Ist jetzt nichts, was ich jetzt total vermisse und jetzt sage, das brauchen wir unbedingt. Das mit Select ist schon so schiefgegangen. Das machen wir nicht nochmal mit mir. Nee, keine Ahnung, ich weiß nicht, ob das, ich bin mir tatsächlich unsicher, was ich empfinde
dazu. Ob ich der Meinung bin, dass sowas ein Webstandard sein sollte oder nicht. Ich bin unentschlossen. Ich finde den aktuellen Zustand jetzt, der ist cool, aber eigentlich bin ich ja immer großer Freund von, es ist standardisiert und das, was jetzt da ist, ist eben nicht standardisiert. Du fängst halt den Rechtsklick ab und blendest da halt irgendein Layer ein. Sieht halt nicht nach System aus, soll da wahrscheinlich auch nicht nach System aussehen.
Vielleicht ist das auch der Grund, aber man könnte, ich habe mal überlegt, so ein Mac OS Kontextmenü einfach mal nachbauen mit CSS. An andererseits bin ich kein Freund davon, Dinge zu überschreiben, die halt gewohntes Verhalten
sind oder Standard-UI-Elemente. Also klar, jetzt Select irgendwie schöner machen und checkboxen, okay, aber wenn ich dann per Rechtsklick nicht mehr die Dev-Konsole aufmachen kann und Elemente untersuchen und so oder Rechtsklick speichern unter oder was auch immer oder mit meinem Blogger. Ja, das kannst du aber an der Stelle in den Tools halt auch nicht, ne? Also hättest du jetzt doch gerne eine Mischung davon?
Nee, nee, ich meine nur, ich bin auch zwiegespalten und irgendwie fand ich es cool und auf der
anderen Seite bin ich kein Fan davon, dass Dinge verloren gehen, ja? Also ganz schlimm finde ich zum Beispiel, es gibt so eine bestimmte Forensoftware, ich weiß gar nicht, welche das ist, aber da bin ich jetzt schon mehrfach drüber gestolpert, wenn ich da Steuerung F mache in einem Thread, um was zu suchen und dann öffnet sich deren Suchmenü und sucht dann zwar in dem Thread, aber quasi mit einer, also wenn ich dann da draufklicke, lädt das neu
die Seite und springt da, also ganz schlimm, ganz schlimm. Also das geht gar nicht. Generell Steuerung F, Abfangen und weißt du, wer das auch macht? Es gibt zwei Tools, die wir beide gut kennen und gut kennen und benutzen, die das auch machen. Okay, was noch? Und zwar CodePen macht das. Ah ja, stimmt. Die machen das aber aus dem Grund. Und WordPress im Code Editor auch. Die machen das aber beide aus dem Grund.
Ja, die machen das beide, weil es nämlich eigentlich ein Canvas ist oder so. Ich weiß es gar nicht genau. Nein, es ist kein Canvas, aber es ist aus Performancegründen, weil da ja Code Highlighting drin ist, wenn du da zu viel hast, weil du ja quasi um alles Mögliche, das sind ja auch wieder nur Spans, die dann da drum gewickelt werden und irgendwie andere Farben verteilen und das sind dann zu viele Elemente und das ist performancemäßig schlecht.
und dementsprechend wird immer nur das angezeigt, plus minus so ein bisschen mehr, damit es flüssig scrollt und sich nicht langsam aufbaut. Nur das angezeigt, was du tatsächlich gerade siehst. Diese scheiß Computer, die zu wenig Performance haben. Und damit man es aber entsprechend durchsuchen kann, wird es dann halt abgefangen und dann springt das an die entsprechende Stelle und das Code Highlighting geht. Also alles unter 5 Terabyte Arbeitssprecher kommt mir nicht ins Haus.
Ja, aber das also bei dieser Forensucht, ich finde das ganz, ganz schlimm, weil es bringt halt keinen Vorteil. Also der einzige Vorteil ist, dass es halt über mehrere Seiten hinweg in diesem Thread, in diesem Post sucht. Ja, okay, aber da bin ich echt kein Fan davon. Ich klicke dann halt in die Adressleiste und drücke durch Strg-F und dann, weil in der Regel komme ich sowieso über eine Google-Suche auf diesen Thread und dann weiß ich, dass das, was ich gesucht habe, da drin vorkommt.
Da brauche ich nicht dann irgendwie auf Seite 20 von diesem Thread nochmal suchen. Also, ja, finde ich völlig ein Quatsch. Aber gut, zurück zu unserem ... Zurück zu Lück. Danke, Anke. Danke, Anke. Genau. Es gibt neben UL gibt es noch OL und das steht für Ordered List, wer hätte es gedacht. Und da gibt es aber jetzt noch ein paar mehr Attribute und die hatten wir auch schon.
Und zwar in unserer Folge Nummer 9, also schon sehr lange her, 2020 war das, da hatten wir das als Property der Woche, da hast du das vorgestellt. Und wir gehen jetzt trotzdem mal kurz drauf ein, aber wer da richtig in die Tiefe einsteigen will dazu, der hört sich die Folge einfach nochmal an. Und zwar kann ich das Attribut, also erstmal OL, heißt eben die Reihenfolge der Listen-Elemente, die hat einen bestimmten Sinn und dementsprechend werden die durchnummeriert.
Standardmäßig einfach unsere normalen arabischen Zahlen. 1, 2, 3, 4, 5. Mit Punkt. Mit Punkt, genau. Erstens, zweitens, drittens, viertens, fünftens. Und ich kann mit dem Attribut ... Sechstens, siebens. Reversed. Kann ich die Reihenfolge umdrehen, dann habe ich eben fünftens, viertens, drittens, zweitens, zweitens, erstens. Und ich kann mit dem Attribut Start, kann ich achtens, mit achtens anfangen.
Genau. Und mit dem Attribut, also kann ich ein Offset einfach festlegen, ab dem da mal gezählt wird. Also falls ich jetzt irgendwie, ich habe eine Liste und dann habe ich auch nochmal irgendwie ein Paragraph zwischendrin und schreibe dann irgendwie nochmal was dazu und im Folgenden geht die Auflistung weiter, Doppelpunkt, und dann kann ich eben sagen, hier ist die Liste fortgesetzt, ab Punkt achtens.
So, und genau, ich würde gerne noch auf ein paar Details da eingehen, also wenn wir schon bei dem Start sind. Ich habe damals in der beschriebenen Folge auch, das war glaube ich so der Anfang von, ich versuche Dinge kaputt zu spielen. Ja, und ich habe noch weiter gemacht, ich habe nämlich das geforkt und habe gleich noch ein paar Edge Cases, ja. Ah, okay, cool, das wusste ich gar nicht. Dann können wir gleich noch, wenn du willst, noch drüber reden.
Also, ich habe auf jeden Fall da mal versucht, was passiert, kann ich eigentlich mit einem negativen Start, geht das? Und das geht, aber nicht bei allen Ziffern. Also man kann tatsächlich mit dem minus dritten Element beginnen, zum Beispiel. Das ist durchaus drin. Geht aber halt nur bei bestimmten Zahlen. Aber da gehen wir jetzt noch drauf ein, auf das, was vorne dran steht, ne? Da gibt es nämlich noch das Attribute Type, ne, doch, doch Type.
Und da gibt es die Werte, kleines A für Lowercase Letters, großes A für Großbuchstaben, kleines I für kleine römische Zahlen, großes I für große römische Zahlen und 1, also der Default für normale Zahlen. Und damit kann ich, kann ich das dann variieren. Und ich habe jetzt noch so ein paar Sachen, noch mehr versucht kaputt zu spielen.
Und zwar habe ich gedacht, ich kombiniere mal Reverse, Start und Type und habe also Reverse gesetzt, habe Start auf 3 gesetzt und den Type auf A. Und das heißt, das fängt jetzt an mit C, B, A und was passiert dann? Hast du schon geschaut? Nicht schauen? Ne, ich habe nicht geschaut. Was meinst du, was passiert? Was, was, hm, was nach, was quasi vor A kommt. Ich habe keine Ahnung. Was kommt vor A? Es geht weiter mit 0, minus 1, 2.
Okay. Es springt dann einfach auf Zahlen und geht dann rückwärts. Oh. Ja. Okay. Dann habe ich gedacht, ja. Ich habe noch ein paar andere Edge-Case, mach du zuerst mal. Ich habe dann gedacht, was passiert, wenn ich das zwar alphabetisch haben möchte, aber ich fange erst bei 24 an und habe aber sechs Elemente. Was glaubst du, was passiert? Ja, es ist eine sehr gute Frage. Macht er dann mit Zahlen weiter, 27 oder sowas? Ne. Ne? Noch eine Idee? Ah, ne, warte, warte.
Macht er zwei Buchstaben, macht er dann A, A oder sowas? Ja, genau. Es geht also X, Y, Z, A, A, A, B, A, C. Ja, weil das, das habe ich irgendwie, wenn man die weiter einrückt, glaube ich, da habe ich das auf jeden Fall schon mal gesehen. Das kann sein, ja. Ich glaube, das sind die Standards, wenn man, wenn man, ja, das muss ich jetzt gerade mal kurz ausprobieren. Wenn man ...
Also es wäre dann die Frage, was passiert dann, aber wenn ich dann in den Doppelbuchstaben dann nochmal erlebe, das mache ich mal ganz schnell. Also ich habe hier auf jeden Fall, warte mal, ich muss gerade gucken, was habe ich da eigentlich für einen Quatsch fabriziert. Ich habe hier eine Liste, die ist reversed und Start und, ah ja, genau.
Ich habe, was steht denn da eigentlich für ... Ah, genau, da steht, ich starte in dem Kind Moment mit einer sehr, mit einer sehr großen Zahl und zwar ist es 42. 1235 und die wird dann repräsentiert durch die B.J.L.K. Block. Oder halt die 42.234, nee, was habe ich gesagt, 35? Nee, es ist sogar noch reversed, ich bin ja doof, ey. Das war die 35, war B.J.L.K. Die 42.234, die ist B.J.L.J. Und 42.234, die ist B.J.L.I.
Also, ja, also das geht auch mit reversed und, keine Ahnung, also es ist verrückt. Free. Genau, also die muss, verlinkt man natürlich, könnt ihr euch ... Immerhin scheint das relativ robust zu sein. Was natürlich, was mich damals überrascht hat, was ich vorher nicht wusste, was ich da dann gelernt habe, ist, dass die römischen Zahlen nur bis 3999 gehen.
Und dazu findet man auch einiges im Internet, das haben wir damals auch besprochen, da kamen, glaube ich, sogar noch Kommentare hinterher. Man kann auch nachlesen, warum dem so ist, weil da sind sich die Leute dann nicht mehr so richtig einig, wie es dann da weitergehen würde. Da gäbe es, gibt es verschiedene Möglichkeiten, wie man dann weiterzählen kann. Mit so hohen Zahlen hat man in Rom nicht gerechnet. Offenbar. Vielleicht geht dann die Welt unter.
Es gibt bestimmt wieder, 3999 gibt es dann wieder Verschwörungstheoretiker, die dann ... An die Verschwörungstheoretiker sollen wir nicht mehr sagen, hat jemand im Chat gemeint, ne? Ja. Verschwörungsideologen. Oder Mystiker. Mystiker, Mystiker-Verschwörungs-Mystiker. Weil es eben keine Theorien sind, sondern Humbug. So. Gut. Oh, da wird mal ... Ich habe gedacht ... Oh. Gutes Geräusch, oder? Schön. Ich weiß nicht, es gibt auch wahrscheinlich Leute, die jetzt angeekelt abschalten.
Ach so, meinst du? Ja, kann ich mir. Ich meine, du magst es ja auch nicht, du magst ja auch die ersten Geräusche nicht. Stimmt, ja. Da habe ich letztens einen Artikel gelesen, dass diese Misophonie irgendwie häufiger ist als gedacht. Also das haben irgendwie ganz viele Menschen. Ich habe das auch, wenn es sehr laut ist. Also wenn ich aus meiner Flasche trinke, da. Nee, wenn du trinkst ... Ja, okay, du trinkst ja nicht so.
Nee, aber ich hatte das schon mal auch bei uns beim Stream, wo du irgendwas ... Ja, diese Flasche, diese Trinkflasche. Ach so, stimmt. Ach, die, ach diese, ja, ja, die, das ist schrecklich. So, die blieb jetzt so. Ich mache es jetzt nicht. Noch einmal, nein. Okay. Jo, damit ... Haben wir es dann? Ja. Genau. Gut. Dann machen wir jetzt weiter mit dem P-Element. Dazu gibt es gar nicht so extrem viel zu sagen. Es ist ... P stört für Paragraph, also für Absatz.
Normalerweise werden da, wird es benutzt, um Textblöcke voneinander abzugrenzen oder einzelne Textblöcke einzufügen. Es empfiehlt sich also rein schon aus Lesbarkeitsgründen, die Texte schön zu strukturieren. Also immer mal wieder ein P verwenden und nicht einfach nur riesige Walls auf Text. Nicht nur ein P, sondern vielleicht, wenn ihr einen längeren Text habt, mehrere. Das wäre einfach sehr schön.
Es erzeugt jetzt standardmäßig, das hat jetzt mit dem HTML-Element erst mal nichts zu tun, im Browser einen kleinen Abstand nach unten. Das heißt, wenn ihr mehrere Absätze habt, also mehrere P's untereinander, dann sind die auch ein bisschen abgesetzt voneinander visuell. Standardmäßig, außer ihr macht das weg. Das ist natürlich das Browser-Standard-CSS. Das P-Element hat die implizite ARIA-Roll-Paragraph, also letzten Endes genau das, wie es auch heißt.
Da freuen sich alle Leute, die jetzt auf ihre Diffs, ARIA-Roll-Paragraph setzen. Ja, auf Diff kommen wir noch zu sprechen, mein Freund. Da habe ich noch was, da kommt noch. Über das Diff erzähle ich mehr als über das P, obwohl es über das Diff eigentlich weniger zu sagen gibt, aber irgendwie dann doch mehr. Auf eine komische Art. Dazu später. Genau. Das P kann für Screenreader zum Beispiel als eigener Block mit dem Screenreader angesprungen werden.
Ich habe das vorhin auch noch mal getestet. Ich habe das hier auf MDN gelesen und habe mir gedacht, das ist mir noch nie aufgefallen. Das stimmt bestimmt nicht. Und es ging doch, es ging tatsächlich, also der Screenreader ging tatsächlich paragrafweise vor, wenn halt mehrere P's untereinander sind. Genau, und vielleicht noch ein kleiner Tipp, der auch auf der MDN stand, dachte ich mir, ist vielleicht nicht schlecht, das noch zu erwähnen.
Das P-Element sollte man nicht leer benutzen, um irgendwelche Absätze oder Abstände zu erzeugen. Das hat man früher gerne gemacht, so als CSS noch nicht so verbreitet. Wir haben es noch irgendwie P und dann BR rein. Genau, dann lieber ganz viele BRs, also jetzt nur aus dem Grund, den ich jetzt nenne, nämlich so ein leeres P ist für Screenreader-Nutzer vielleicht ein bisschen blöd, da kommt ein Absatz, da springt er rein. Die kann man nämlich auch anspringen direkt.
Also man kann auch an sich anhand den P's durchnavigieren, wenn die dann leer sind, ist ein bisschen blöd. Das ist jetzt nichts, wo ich sage, dafür reiße ich dir den Kopf ab, aber vielleicht so ein halbes Ohr, so ein halbes Ohr, würde ich sagen. Genau, das war es eigentlich tatsächlich schon zum P. Okay. Dann komme ich nochmal zu Listen, aber eine andere Form von Liste, die Definition List, DL.
Und darin gibt es zwei eigene Elemente, nämlich DT und DD für Definition Term und Definition Definition. Und wer die benutzt, der kriegt von mir ein kleines Herzchen und ganz viel Liebe, weil das sieht man so selten im Web. Die gibt es schon so lange, die Elemente, und man sieht sie so selten.
Also ich meine, ihr solltet jetzt nicht einfach auf eurer Seite einbauen für irgendeinen anderen Quatsch, sondern man sollte sich schon überlegen, was Konstantin jetzt euch gleich sagt, wofür sie verwendet werden. Aber wenn ihr Anwendungsfall dafür findet, dann sagt mal Bescheid, dann will ich das sehen und freue ich mich einfach drüber. Diese DL, DL, DT, DD, ist einfach viel zu sein. Ich weiß gar nicht, ich benutze die schon, ich weiß jetzt aber gar nicht mehr, wo konkret.
Es ist halt nicht immer klassisch so eine Lexikondefinition, ich habe wirklich einen Begriff und dann erkläre ich den. Aber ich finde, und vielleicht ist das aber auch semantisch nicht so vorgesehen, das macht schon auch Sinn, weil ich habe irgendwie einen Begriff, keine Ahnung, bei einer Firmenseite, ich habe irgendwie bestimmte Kernbereiche und Erläuterungen dazu, was genau die Firma in diesem Kernbereich macht oder was die Firma da auszeichnet in dem Bereich.
Dafür würde ich es zum Beispiel auch sehen. Ich weiß nicht, wie du das siehst, aber für so Sachen habe ich das schon eingesetzt. Also ich finde, man kann es eigentlich immer dann einsetzen, wenn man Paare hat, die zusammengehörig sind. Ja. Also vielleicht ist es jetzt ein bisschen arg allgemein formuliert, aber dann sollte man darüber nachdenken, ob das vielleicht das richtige Element sein könnte.
Wenn ich immer Dinge habe, wo das eine, die gehören zusammen, das eine ist irgendwie so eine Art Beschreibung für das andere oder das eine ist so eine Art Überschrift für das andere und in dem zweiten steht es ein bisschen detaillierter. Genau. Natürlich jetzt bloß nicht für alle Sections, die eine Überschrift haben mit dem Anfang hier.
Jetzt könnte man natürlich argumentieren, warum Detail Summary ist doch irgendwie dasselbe. Habe ich gerade gedacht, weil das sind ja auch so Paare. Weiß ich nicht, ob ich das jetzt dafür verwenden würde. Wahrscheinlich eher nicht. Dafür gibt es halt Detail Summary. Ja, weil es ja eben Detail Summary ist ja schon für, die Details sind eben erstmal versteckt und ich kann die ausklappen bei Bedarf.
Aber es ist ähnlich. Also ich finde es gefühlt von der Semantik, es ist ähnlich. Also ich immer dann, wenn man so Paare hat, finde ich das eigentlich. Und apropos Paare, es ist nämlich auch möglich, und das wusste ich zum Beispiel auch nicht, das DT und DD, was zusammengehört, in ein Diff, in ein zusätzliches zu rappen. Jetzt hast du mir schon was vorweggenommen. Habe ich schon was vorweggenommen. Okay, das stand in dem Definition List Artikel auch drin. Ist gut, ist alles gut.
Und das wusste ich doch auch nicht. Habe ich bis jetzt, glaube ich, auch nicht gemacht, weil mir das gar nicht bewusst war. Was aber geht, ist mehrere DTs hintereinander zu benutzen. Also ich kann mehrere Begriffe auflisten, unter der Voraussetzung, dass der nachfolgende DD dann aber auch die Beschreibung für all diese Begriffe ist. Also wenn ich jetzt irgendwie mehrere Synonyme habe und eine Beschreibung, die alle diese Begriffe beschreibt, dann kann ich mehrere DTs hintereinander benutzen.
Und zu dieser Gruppierung nochmal mit Diff. Wofür könnte ich das gebrauchen? Zum einen für Microdata, also diese Auszeichnung von Podcast-Episoden oder was auch immer. Für globale Attribute, die auf beides zutreffen, also irgendwie einen Lang-Attribut, statt dass ich jetzt auf das DT und das DD ein Lang-Attribut setze, weil ich irgendwie eine Liste habe, die ihm in verschiedenen Sprachendefinitionen liefert, kann ich die beide in Diff rappen und gebe dem dann ein Lang-Attribut zum Beispiel.
Oder halt für Styling-Zwecke, weil ich die irgendwie in irgendeiner Form gruppiert haben möchte und dann irgendwie eine andere Farbe geben möchte oder was auch immer. Vielleicht noch ganz kurz, ich habe überlegt, ob ich vielleicht noch ein Beispiel ergänzen soll. Also was so das klassische Beispiel dafür ist, ist ein Glossar. Genau.
Also ich habe einfach eine Liste mit Begriffen, die erklärt werden und habe dann in den, also habe ich immer die Liste um alles drumherum, also die DL und habe die Begriffe, die erklärt werden im DT und dann jeweils ein zugehöriges DD mit der Erklärung für den Begriff. Ja, da merkt man halt auch wieder die Herkunft von HTML aus dem wissenschaftlichen Kontext, wo sowas halt öfter gebraucht wurde und dementsprechend schon sehr früh Einzug gehalten hat in diese Mark-Absprache.
Ich weiß gar nicht, ob das schon von Anfang an immer dabei war oder seit wann es das gibt. Könnte man vielleicht mal noch schnell versuchen rauszufinden. Aber da merkt man halt einfach, wo das herkommt. Genauso noch ein paar andere Elemente, die wir noch in nachfolgenden Sendungen dann besprechen werden, wo man auch merkt, ah okay, das ist so ganz klassisch, irgendwelche Zitierungen, Zitate mit Referenzen und so. Da merkt man eben halt diesen wissenschaftlichen Ursprung.
Kann es sein, dass das irgendwann mal den Namen geändert hat und wir gerade Quatsch erzählt haben? Wie hast du das genannt? Definition List. Heißt das gar nicht so? Description List heißt das. Ich glaube, das heißt, ich glaube, das hat irgendwann mal den Namen geändert. Ich habe nämlich es gerade nochmal gesehen. Also ich habe das als Definition kennengelernt. Ich auch ganz bestimmt, aber ich glaube, das hat den Namen irgendwann mal geändert. Witzig, ja.
Weil die DD steht auch wirklich für Definition. Vielleicht haben wir uns aber auch vertan. Laut Artikel steht es für Terms und Definitions. Tja, gute Frage. Vielleicht haben wir uns da auch einfach schon immer vertan. Das kann natürlich auch sein. Tja, das ist jetzt natürlich Definition List. Warte mal. Das in der alten, im alten W3. Also nee, ich habe jetzt eine Seite auf W3.org gefunden. Das hat mal den Namen geändert. Das hieß mal Definition List.
In dem Artikel für DT steht nämlich auch, HTML-Element specifies a term in a description or definition list. Also es wird wohl beides auch verwendet dafür. Ich habe hier bei HTML 3, da hieß es auf jeden Fall Definition List. Ja, vielleicht ist es, dann, das spricht auch dafür, dass wir nicht ganz falsch liegen mit unserer semantischen Erweiterung, dass es eben nicht nur um Definitionen geht, sondern eben um Beschreibungen.
Also dafür, ne, also wenn ich eben solche, ich habe so Schlagworte für diese Firma in dem Beispiel vorhin und ich habe eben eine Beschreibung dazu. Und dann ist es nicht mehr nur eine Definition. Weil Definition wäre ja, da steht irgendwie, keine Ahnung, Marketing. Dann müsst ihr jetzt eine Definition schreiben, was Marketing ist. Aber wenn ich sage, semantisch handelt es sich um eine Beschreibung, dann beschreibe ich einfach, was diese Firma im Bereich Marketing macht.
Und dann macht es schon nichts. Okay, das ist schon deutlich erweitert. Das wäre schon deutlich erweitert. Da habe ich es jetzt bisher in meinem Kopf immer eher strenger gesehen. Aber vielleicht muss ich mir auch den Standard dazu nochmal durchlesen. Was ich, was mir jetzt hier gerade, weil es ist kein Zählt-Opa, aber hart vom Krieg, ey, passt auf. Was mir jetzt hier nochmal über den Weg gelaufen ist, was ich schon lange nicht mehr gehört habe, ist das LH-Element.
Achtung, liebe Kinder, das gibt es nicht mehr. Nicht verwenden. Das konnte man nämlich bei HTML3, wie ich jetzt gerade sehe auf dieser Seite, mal in einer DL verwenden. Nämlich LH, List Header. Das gab es mal. Das durftest du aber, glaube ich, auch in OLs und ULs verwenden. Ja, und jetzt ganz schnell wieder vergessen. Ja. Schon weg. Was ich interessant fand, auch vorher nicht wusste, ist geblitzt Dings. Hast du mich? Was war?
Auch Script- und Template-Tags sind erlaubt in den Definition Lists. Aber sind Script-Tags nicht überall erlaubt? Oder liege ich da jetzt komplett falsch? Gute Frage. Also es stand zumindest extra in dem Artikel drin. Also ich weiß gar nicht. Ja gut, gibt es irgendeinen Fall, wo kein Script ... Also ein Script sollte jetzt nicht in einem Inline-Element, oder? Also ein Span und da drin ein Script ... Wahrscheinlich schmeißt kein Browser irgendwie einen Fehler, aber ...
Wir haben halt die ... Bei Script waren wir halt noch nichts. Ja, da kommen wir erst noch hin. Das spoilern wir jetzt nicht. Also jedenfalls auch Template-Element erlaubt in der Definition Lists. Ah ja. Warum auch immer man das darunter verschachteln wollen würde. Wahrscheinlich auch, weil du es überall darfst, glaube ich. Ich glaube, das Template ist genauso. Das darfst du, glaube ich, auch überall reinpacken.
Ja, da noch eine kleine Anmerkung zu Accessibility, stand da auf der MDN, dass man da vorsichtig sein muss, weil die Screenreader das wohl sehr unterschiedlich handhaben, wie sie diese Listen ausgeben und vorlesen. Und bei Voice-Over ist es wohl so, dass es keine Listen-Navigation anbietet in diesen Definition Lists. Also bei normalen Listen kann man eben wohl innerhalb von diesen Punkten springen. Bei Definition Lists funktioniert das bei Voice-Over nicht.
Ah, das habe ich tatsächlich nicht getestet, aber eigentlich sehr schade, muss ich sagen. Ja, können wir mal bei Apple ins Ticket reinschreiben, was es bestimmt schon gibt. Also kann ich mir nicht vorstellen, dass da noch keiner ein Ticket aufgemacht hat dazu. Beziehungsweise bei WebKit, das wäre ja die passende Browser-Engine an der Stelle. So, liebe Kinder, jetzt kommen wir zum ernsten Teil, habe ich beschlossen.
Und zwar zum Diff. Das Diff-Element ist ein Block-Element, das nichts ist, außer ein Block-Element, das einfach nur ein generischer Rapper ist. Ein generischer Rapper. Oh Gott. Ja, das wäre auch noch ein Name für deinen DJ. Generischer Rapper. Generischer Rapper. Aber ich rappe ja nicht, ich lege ja nur auf. Generischer DJ dann. Nee, also es ist einfach nur ein Element, das nur dafür da ist, Dinge reinzupacken und zu gruppieren. Es hat selbst keinerlei semantische Bedeutung.
Und deswegen ist es aus meiner Sicht, ach, jetzt lehne ich mich weit aus dem Fenster und kriege gleich ganz viel Shit von ganz vielen Leuten, ist es zu vermeiden, wenn ich, und ich sage es mal so, das Diff-Element ist, man sieht, also es ist wahrscheinlich das populärste Element überhaupt im Web. Wenn ich, ich weiß nicht, da müssen wir mal gucken, da gibt es doch Statistik dazu, irgendwie dieser Web-Almanake. Ich glaube, da haben die Statistiken auch zu sowas.
Ich würde behaupten, das ist auf jeden Fall unter den Top 3 in der Verwendungsanzahl. Und aus meiner Sicht ist das Diff wirklich ein Last Resort. Also wenn du die ganze Liste, die wir jetzt gerade hier im Podcast durchgehen, die ganze Liste der HTML-Elemente durchgegangen bist und du hast keins gefunden, das besser passt auf deinen Anwendungsfall als das Diff, dann darfst du es nehmen. Und ansonsten nimmst du eins von den anderen.
Also das wirklich, ich ertappe mich auch oft dabei, wenn ich irgendwie, wenn ich, ich tippe einfach ein Brainless irgendwie, ah ja, ich brauche jetzt irgendwie ein Element, ach Diff. Aber nee, ich sollte vielleicht in dem Fall einfach mal Section nehmen, so, statt ein Diff, wenn einem nichts einfällt. Wenn es dann Sinn ergibt, semantisch. Vielleicht einfach mal, ja genau.
Aber in den meisten Fällen, wenn man kurz drüber nachdenkt und so ein paar HTML-Elemente kennt, fällt einem dann ein, ah nee, das wäre ja vielleicht dann doch eher ein Section oder ein Header oder Footer oder Site oder keine Ahnung, davon hatten wir es ja schon in der zweiten Folge unserer Reihe, glaube ich, gell? In der ersten haben wir die, genau, in der ersten haben wir die Sachen, die eben Head sind, gemacht.
Genau, also die implizierte ARIA-Rolle, also die Rolle, was das denn eigentlich ist, ist Generic. Also quasi nix, hat keinerlei, ist wie gesagt, nur ein gruppierender Container. Interessant fand ich da auch die Seite von der Watt-WG, weil da noch so ein paar Infos mit dabei waren. Was in diesem Zusammenhang auch zu nennen ist, ist der Begriff, der ist auch schon wieder ein bisschen faltet, Divitis gab es mal. Also im Prinzip drückt das aus, dass die Leute für alles Diffs verwendet haben.
Und es geht ja teilweise noch ein bisschen drüber hinaus über, ich nutze halt als Standard-Element irgendwie ein Diff, aber habe vielleicht noch so ein paar A's oder sowas. Es gibt ja Leute, die, oder ich will da gar niemandem einen Vorwurf machen, aber vielleicht, wir edukieren jetzt hier, der Bildungsauftrag unseres Podcasts, spätestens jetzt sind wir da angekommen. Man kann natürlich jedes beliebige Element interaktiv machen mit einem On-Click-Händler oder so. Sollte man aber nicht.
Und das Div ist so ein klassisches Beispiel, wo Leute halt einfach nur Diffs hintereinander klatschen und dann alles damit bauen. Wirklich alles, alles, alles. Aber ich glaube, außer Images, weil obwohl Image könntest du theoretisch mit Background-Image auch noch machen. Du kannst theoretisch, das wäre eigentlich mal eine interessante Herausforderung, so ein Standard-Layout zu nehmen und komplett nur mit Diffs zu bauen. Wirklich nur, also sonst gar nichts.
Aber natürlich als Anti-Patter, also hier so Leute, bitte so nicht machen. Es geht viel damit, aber man sollte es einfach nicht tun, weil ganz viele Elemente existieren, die für den Anwendungsfall, wofür du wahrscheinlich ein Diff verwendest, viel, viel, viel besser sind. Also das Klassische, vielleicht ganz kurz noch zu Divitis. Die Divitis war so ein paar Kampfbegriffe, ich glaube so aus von 2010 oder so. Ich glaube, da ist mir das zum ersten Mal begegnet.
Es kann auch sein, dass es noch ein bisschen älter, noch ein bisschen länger her ist. Ich habe hier noch einen kleinen Artikel, den ich auch noch verlinken will. Der ist wirklich ganz kurz. Mir ist das zum ersten Mal extrem negativ aufgefallen im Zusammenhang mit Ext.js. Vielleicht kennt das der eine oder andere noch. Das war so ein JavaScript-Framework, das, also eines der frühen Stunden, das gab es schon irgendwie 2008 oder noch 2006 oder so.
Eins, das wirklich, wo dein komplettes, dein kompletter Baum, alles HTML von JavaScript geschrieben wurde. Du hast selbst keinen HTML geschrieben. Das war so gemacht für, ich nenne es mal, wie man es damals genannt hat, RIA, Rich Internet Applications. Du konntest also so tatsächlich so Desktop-artige Sachen im Browser komplett bauen. Und das hat extrem auf Divs gesetzt.
Da hast du teilweise, wenn du in den Browser-Dev-Tools das aufgemacht hast, also in dem Fall dann noch Firebug natürlich, hast du rein verschachtelt 25, 30, 40 Divs, die ineinander verschachtelt waren, die einfach nur so aufgeklopft waren. Das ist Divs gewesen, so von der schlimmsten Sorte. Also, das ist vielleicht, also wenn ihr solchen Code habt und nicht jetzt in der CSS-Art-Szene unterwegs seid, dann macht ihr wahrscheinlich was falsch.
Also da müsste man mir schon, das muss man mir schon sehr gut erklären, warum man fünf verschachtelte Divs hintereinander braucht und davon keins. Erstens ein anderes Element sein kann und warum man auch wirklich fünf braucht. Ja, also dürft ihr mir dann erklären in euren Webseiten. Könnt ihr mir Beispiele schicken und mir dann erklären, warum das so richtig ist.
Was natürlich noch ein klassischer Fall ist, weil ich vorhin schon gesagt habe, man kann alles Mögliche damit bauen, sollte man aber nicht, ist das klassische, a Div is not a button, diese Diskussion. Ich habe immer gedacht, es gibt eine Seite, die irgendwie so heißt, is it a div a button oder sowas, aber ich habe sie nicht mehr gefunden. Gibt es? Es gab vielleicht mal irgendjemanden, irgendwann ist es dann zu teuer geworden, all die Jahrzehnte zu hosten.
Weil eigentlich, das wäre halt so eine klassische Seite, die man schön designen könnte, auf der einfach nur No steht. Es gab mal einen Trend, es gab mal einen Trend, solche Seiten zu bauen. Ich habe auch mal so eine gebaut, die heißt nämlich is it capslockday.com. Da steht auch die meiste Zeit des Jahres No drauf. Ja, sogar aber die sind ein bisschen interaktiv, immerhin. Also an zwei Tagen im Jahr sagt sie yes.
Genau, also keine interaktiven Elemente mit Divs bauen, weil die interaktiven Elemente, die der Browser schon euch bereitstellt, nämlich sowas wie A oder Button, also ich meine jetzt gerade so welche, wo man draufklickt. Ich glaube, man könnte mit einem Div, mit Content Editable auch sogar ein Eingabefeld emulieren, aber das will man in den meisten Fällen auch nicht. Egal, aber ich glaube, der Klassiker ist der Button oder irgendwas, wo ich draufklicke und dann passiert was.
Ein A, also je nachdem, wo man hin will oder was es tun soll, würde sich entweder ein A oder ein Button anbieten, weil diese Elemente einfach schon so viel an Funktionalität im Browser mitbringen, das müsstest du theoretisch mit dem Div alles nachbauen oder egal, welches Element du nimmst, was eben nicht das A oder der Button ist. Das müsstest du mit dem Div-Element alles nachbauen und ich garantiere dir, ich werde etwas finden, was du vergessen hast.
Irgendeine Möglichkeit, das zu fokussieren mit der Tastatur, auszulösen mit der Tastatur, irgendwas wirst du vergessen haben. Ich habe noch keine Implementierung gesehen, wo ich nicht was gefunden habe, wo was vergessen wurde. Die gibt es bestimmt, aber die sind, glaube ich, sehr rar. Deswegen nimm einfach ein passendes semantisches Element und nimm nicht das Div.
Das Div darfst du nehmen, wenn dir sonst, ich sage es nochmal, in der Liste der HTML-Elemente kein anderes Element besser passt. Nur dann. Und was du vorhin schon gesagt hast, das vielleicht sei ja auch nochmal erwähnt, fand ich interessant auch, dass es erlaubt ist als Kind von DL. Das stand nämlich in dem Div-Artikel auch mit dabei. Genau, also um dann innerhalb die DT und DD-Elemente nochmal zu gruppieren.
Fand ich interessante, das wusste ich auch nicht, fand ich interessanter Fact, weil ich nicht gedacht hätte, dass es erlaubt ist an der Stelle, weil nämlich zum Beispiel, wenn ich es richtig weiß, innerhalb eines OL oder UL auch nichts erlaubt ist als LI-Elemente. Direkte Kind-Elemente müssen LI-Elemente sein. Du darfst Divs in die LI-Elemente packen, aber nicht als Kind vom OL oder vom UL.
Genau, also und wenn ich jetzt noch weitergehen würde, bin ja manchmal ein bisschen radikal, man nennt mich auch HTML-Fundamentalist, ja genau mein Ding hier gerade, wäre ich sogar fast dafür, dass das irgendwelche Warnings wirft, wenn man Divs einbaut. Also, dass man im Prinzip jedes Div, was man schreibt oder zumindest die IDE oder irgendwas im Bildprozess, irgendwas, während du deine Webseite baust, müsste eigentlich dich jedes Div bestätigen lassen aus meiner Sicht.
So, doch, dieses Div, ich habe es mir genau angeguckt, es ist für das jetzt hier das richtige Element. Doch, doch, vertrau mir, vertrau mir. Dann würde man das loswerden. Ich glaube, das wäre der einzige Weg, wenn man es loswerden würde. Aber ist halt die Frage, macht das wirklich Sinn, irgendwie jetzt alles in Sections zu machen? Ich sage, nein. Weil ich glaube, du hast halt einfach immer trotzdem proportional gesehen eine große Anzahl an Divs, wenn du die alle bestätigen müsstest.
Ich sage nicht, du darfst es nicht verwenden, aber das wäre der einzige Weg, wie man die Leute dazu bringt, jedes Mal darüber nachzudenken, gibt es nicht vielleicht was Besseres. Und du darfst dann natürlich sagen, nein, das ist jetzt für das genau das Richtige. Absolut okay. Aber einmal darüber nachdenken, bitte. Wenn der Bildprozess sich dann merkt, welchen ich schon zugestimmt habe, wo ich mich schon erklärt habe, weil wenn du das jedes Mal machen musst.
Also keine Ahnung, zum Beispiel SonarCube fällt mir da ein. SonarCube ist ein Tool für statische Code-Analyse, was hinterher, wo dein Code, das schaut deinen Code an und sagt dann, das sieht aber da ein bisschen komisch aus, kannst du das nicht manchmal irgendwie besser machen an der Stelle.
Also das hat ein festes Ruleset und du kannst auch bestimmte Rules ausschalten und so, hat ein festes Ruleset und das sagt dir zum Beispiel sowas wie, du hast jetzt in dem UL hier kein LI direkt als Kind. Das ist wahrscheinlich falsch. Und dann steht da auch immer ein Beispiel dabei, was ist richtig, was ist falsch, hier so. Und in SonarCube könnte man theoretisch so eine Regel implementieren, die sagt, ein Diff wird erstmal als Fehler angemerkt und dann kann man acken.
Man kann da sagen, nee, dieser Fehler, den akzeptiere ich oder nee, das ist keiner. Und der merkt das dann auch beim nächsten Mal nicht mehr an? Beim nächsten Mal, der merkt das, wenn, also, ich habe jetzt nicht ausprobiert, oben drüber eine Zeile Code hinzuschreiben, sodass es eins nach unten geschoben wird. Ich denke aber, also ich weiß, dass er wirklich sich Sachen merkt, wenn sie an der gleichen Stelle noch sind.
Ich habe jetzt nicht ausprobiert, wie das ist, wenn es jetzt um eine Zeile verschoben wird oder um mehrere, ob er es dann nochmal anmeckert. Aber bisher kann ich sagen, doch, das mit dem Acken, das funktioniert. Ich hatte nämlich genau diesen Fall, was ich gerade gesagt habe mit LI und UL. Es kann nämlich durchaus mal sein, dass, wenn man mit einem CMS was baut, dass die Listenpunkte, also dass der Output absolut korrekt ist, aber die Listenpunkte sind in einem eigenen File.
Und dann beschweren sich beide Seiten. Dann sagt der eine, hey, du hast hier ein UL, aber da sind gar keine LIs drin. Und dann hast du irgendwo ein anderes File und dann sagen, ja, das sind LIs, aber wo ist denn eigentlich deine UL? Das kann ja durchaus vom Code her, wenn du nur die Files hast, also nicht das Gerenderte im Browser, kann das ja durchaus so ein Fehler sein, den man dann aber acken kann.
Und das hat, den Fall hatte ich auf jeden Fall schon, das hat funktioniert, das war wunderbar. Und seitdem meckert er an der Stelle dann auch nicht mehr. Aber ich finde es trotzdem gut, dass er einmal gemeckert hat, weil dann kannst du dir das angucken und sagen, ah nee, okay, an der Stelle nicht. Passt. Ja, so. Dann haben wir es. Ja, sag bloß, wir sind schon durch, Mensch. Was? Nach einer Stunde, was ist denn hier los?
Da gibt es ja dann Leute, die das vielleicht tatsächlich komplett auf dem Weg zur Arbeit hören können. Ja, die sich dann jetzt nicht mehr beschweren können. Da müssen wir jetzt aber noch ein bisschen labern, oder? Ja, das kann ja noch. Wir waren hier pfeilschnell unterwegs, ich habe zu viel Deutschlandradio gehört, ich labere nicht mehr. Kein Lust mehr, es wird jetzt hier alles mit Stringenz durchgezogen, mit Knallhart, mit Peitsche. Also die 1.15 kriegen wir bestimmt noch voll.
Da stand einer hinter mir, der hat jedes Mal böse geguckt, wenn ich angefangen habe zu labern. Vielleicht dann lieber nicht. Ja, dann sind wir mit dem Thema fertig, würde ich sagen. Genau. Dann kommt jetzt noch. Das Geilteil. Geilteil. Oh, und das Geilteil, muss ich gleich vorweg schicken, wir werden da nicht gesponsert, weil es ist eigentlich, es ist ein Anbieter von AI-Lösungen und man kann das auch kaufen, was die da so anbieten. Aber ich finde es gut gemacht.
Hast du schon, hast du gehört? Ich habe es gerade aufgemacht. Und zwar, also ich sage mal generell, was die so anbieten, also man kann das kostenlos alles ausprobieren, indem man einfach Bilder rein droppt, hier haben wir auch so ein paar Beispielbilder, die bieten so Sachen an wie Hintergrund entfernen aus Bildern, aber ziemlich gut, muss ich sagen.
Image Upscaler, Background Removal, also genau, Background Removal war das, was ich gerade eben meinte, Clean Up ist, du kannst was markieren, Menschen zum Beispiel auf einer Straße und dann rendert er die raus. Es gibt Stable Diffusion natürlich irgendwie mit reingemurkst, wo man dann sagen kann, hier, mach mal Inpainting und so.
Text Remover gibt es, das heißt, du machst ein Bild rein von einem Straßenschild, jagst das drüber, dann ist der Text weg, das eignet sich natürlich hervorragend für so Mock-Ups oder irgendwelche T-Shirt-Texte oder sowas, dann hast du die dann blank und dann setzt du deinen eigenen Text drüber. Und was ich aber besonders krass fand, war das Feature ReLight. Das ist völlig krass. Ich meine, wahrscheinlich haben die die Demo-Bilder so rausgesucht, dass die besonders gut funktionieren.
Ich pack mal ein Bild von mir rein. Mach mal, genau. Und das ist aber echt krass. Also man kann da Fotos hochladen und dann kann man Lichter setzen, virtuelle. Das sind einfach bunte Punkte. Ich kann denen eine Lichtfarbe geben, eine Helligkeit und so weiter. Kann die rumschieben und ich weiß nicht, wie die das genau machen.
Die berechnen sich im Endeffekt den tiefen Kanal aus dem zweidimensionalen Bild und ich kann diese Lichter rumschieben und es verändern sich Highlights und Schatten und Farbe von den Lichtern auf diesen Personen oder Gegenständen, die in den Bildern drin sind.
Und das heißt, ich hab, wenn ich das kombiniere mit diesem Hintergrundentfernungstool von denen, dann kann ich halt eine Person nehmen, setz die vor einen anderen Hintergrund und dann sieht man das meistens ja, dass das reingeschnitten ist, weil die Farben einfach halt nicht mehr gescheit passen.
Und dann kann ich aber hergehen, schnapp mir ein paar Lichter mit der entsprechenden Farbe, die in der Umgebung vorkommt zieh die dahin, kann sogar noch sagen Distance, also liegt das vor dem Objekt oder hinter dem Objekt. Und wenn ich das nicht gerade so mache, dass es ziemlich klippt, dann kannst du auch mal mit STRG-C, STRG-V probieren. Du kannst auch direkt pasten aus der Zwischenablage.
Genau, und dann kann ich die Bilder neu ausleuchten und kann es damit halt schaffen, dass so ein Bild, ein Retuschiertes, dann halt doch in die Szene wieder reinpasst. Also gerade hier mit den Gesichtern, auch mit der Lichtintensität, das sieht einfach genial aus. Also mit den Beispielen sieht es super krass aus. Ich kriege es aber nicht hin, dass der mich mein Bild hier, dass der, also ich sehe es, Image too large.
Okay. Aber mit STRG-C, STRG-V musst du das eigentlich machen und dann runterrechnen im Zweifel. Nee, er sagt mir, es ist zu groß und den anderen Modus müsste ich erst freischalten. Dann müsste ich es jetzt kleiner machen, das Bild. Vielleicht nehme ich das mal von this person does not exist. Ah ja, das ist gut. Ah, das geht. Ah, perfekt. Ach, sogar mit farbigen Lichtern. Ja, ja.
Du kannst, das ist ja genau das, also du kannst dann grün, keine Ahnung, da steht jemand in einem grün ausgeleuchteten Studio, der aber eigentlich nicht, der eigentlich in einem rot ausgeleuchteten Studio stand, ja, muss man ganz krass zu sagen. Fuck. Und dann stellst du den da rein und machst halt ein grünes Licht und dann fertig. Ach, ist das krass? Ja. Ich habe gerade nur ein bisschen, das habe ich vorhin noch gar nicht gemacht, an den Reglern rumgespielt.
Das ist ja übel gut. Wow. Wow. Also, äh, boah. Ich werde dich gerade ... Also, ich weiß gar nicht, ich schicke dir das mal, was ich gerade gemacht habe, da sieht man es extrem gut. Ich habe ja auch gerade so ein Bild von dort geschnappt. Das ist einfach, das ist der Hammer. Also, das macht mich viel Spaß. Und dadurch kannst du es halt dann von einem anderen Hintergrund quasi seamless setzen. Also, ich meine, man sieht so ein bisschen die Grenzen.
Also, ich hatte jetzt bei dem Rot zum Beispiel, da ist es irgendwie so unter die Wange drunter oder so. Da kannst du mit der Distance dann aber arbeiten. Dann ist es quasi auf der Höhe von der Wange und dann läuft das Licht rein. wenn du mit Distance den Regler noch ein bisschen rumziehst. Nee, ich meine, es ist so unten drunter gegangen. Ich zeig dir mal, was ich meine. Ich mach dir mal, mach mal ein Screenshot. Aber, ja, aber ich meine, es ist insgesamt funktioniert extrem gut.
Also, das Ganze nennt sich Relight von ClipDrop, ne, doch, ClipDrop.co. Der Link kommt natürlich in die Shownotes. Und, wie gesagt, die bieten eine API an. Ich will das aber jetzt gar nicht, also, ich hab mir deren Pro-Version noch nicht angeschaut. Ich war nur begeistert von den Demos, auch mit, mit Nicht-Demo-Bildern von denen eben, sondern mit eigenen. Auch dieses Background-Removal und so, das funktioniert schon extrem gut.
Dementsprechend will ich jetzt nicht sagen, kauft deren API, aber vielleicht schaut es euch mal an. Und, äh, wenn es euch gefällt, ist es vielleicht sogar, war es vielleicht sogar ein wertvoller Tipp für eure Arbeit, falls ihr auch ein bisschen Grafik ab und zu macht. Das macht mich wirklich fertig. Upscaler und so habe ich jetzt noch gar nicht ausprobiert. Ähm, aber Background-Removal und Textentfernung und, äh, Menschenentfernen aus, aus Bildern und so.
Das ist einfach, das funktioniert schon echt sauber. Wow. Das muss ich mir jetzt nur merken, dass ich, wenn ich es mal brauche, weil das ist sowas, das ist ein klassisches Ding, wo ich, wo ich in drei Jahren denke, da gab es doch mal was. Da gab es doch mal was. Ja, da gab es doch mal was. Ja, da gab es doch mal was. Ah, da muss ich auf unserer Suche suchen und dann musst du mir jetzt ganz viele Keywords dahin schreiben, unter denen ich das wieder finde.
Bilder neu ausleuchten mit Relight. Da wäre es jetzt praktisch, geile SEO-Link. Wenn wir unsere Transcriptions hätten, dann hätten wir die ganzen Keywords nämlich automatisch drin. Ja. Vielleicht müssen wir das tatsächlich mal machen. Das wäre, glaube ich, schon gut. Ich bin geplättet. Das ist total cool. Vielen Dank. Gerne. So, aber jetzt haben wir immer die 1,15 noch nicht voll. Wir müssen noch ein bisschen labern, glaube ich. Ja, das kriegen wir hin, oder?
Jetzt machen wir noch den Jingle und dann schauen wir mal. Da ist Ende. Da ist das Ende. Was? War was? Ja, Mensch, wir müssen ja auch die 1,15 nicht voll machen. Aber das ist ja schon fast, also unter 100 Minuten ist ja eigentlich schon fast, können wir uns ja gar nicht blicken lassen. naja, krass, ne? Ja, wir hatten noch Angst, dass das irgendwie doch zu viel wird und deswegen extra ein paar Sachen gestrichen, aber man muss ja auch nicht immer übertreiben.
Ne, dann haben wir ja noch ungefähr 27 Folgen, die wir über HTML-Elemente machen können. Richtig. Ja, das ist ja auch schön. Richtig. Ja, es wurde sogar schon danach gefragt, ne? Es kam schon so, ja, macht ihr denn mit eurer HTML-Serie immer wieder weiter? Also das scheint wirklich Anklang zu finden. Das freut uns natürlich immer, wenn das hört. Nee, wir mussten erst die Telenovela abdrehen. Jetzt geht's weiter mit der HTML-Serie. So, hatte einfach zu viel Erfolg.
Jetzt gehen wir wieder zu den Sachen, die weniger erfolgreich sind. Bleiben wir also hier. Gut. Ja, dann haben wir noch hier so, genau. Wir klicken gerne gleichzeitig auf dieselben Sachen und dann haken sie sich an und wieder ab. Ja, also das stimmt ab beim DJ-Namen. Würde mich sehr freuen. Meldet euch an bei der Beyond Tellerrand. Also beziehungsweise bei der Beyond Tellerrand selber geht gar nicht mehr, weil die ist ausverkauft.
Aber für unser HörerInnen-Treffen wäre doch echt ganz nett. Und was gibt's sonst noch? Schaut mal, wenn es euch interessiert, bei unserem Stream vorbei. Das ist auch immer lustig. Dienstags und alle zwei Wochen freitags, wenn wir keinen Podcast aufnehmen. Das ist mehr so ein News-Format, würde ich mal sagen. Aber weniger jetzt so, was für eine Sauwut jetzt gerade durchs Dorf getrieben, sondern so Sachen, die uns vor die Füße gefallen sind. Gucken wir uns da an.
Manchmal coden wir auch ein bisschen im Stream. Es ist immer nett. Es ist immer eine schöne Community, immer schöne Interaktionen mit dem Chat. Immer eine Handvoll Leute dabei. So unser harter Kern. Genau, die nettesten Menschen der Welt sind im Livestream-Chat. Hashtag Vibes-Volk. Genau, sind da mit dabei. Und da haben wir immer eine Menge Spaß. Und falls du denkst, das klingt irgendwie gut, dann kannst du ja auch mal vorbeischauen.
Ich glaube, es ist tatsächlich am besten, wenn man live dabei ist. Man kann sich das natürlich manchmal auch, nicht alle Folgen laden wir hinterher irgendwo hoch oder kann man noch bei Twitch angucken. Manchmal müssen wir das aus Copyright-Gründen löschen oder auch aus Gründen, weil wir zu betrunken waren oder sowas. Das hatten wir auch schon mal. Aber genau, das ist immer sehr, sehr nett und immer sehr schön. Und wenn ihr wollt, das ist auch ein guter Austausch innerhalb der Community.
Also nicht nur mit uns, sondern auch untereinander. Finde ich das immer sehr schön. Ja, da kommt ihr einfach mal vorbei und guckt, ob das was für euch ist. Ansonsten empfehlt uns natürlich gerne weiter, euren KollegInnen bei der Arbeit. Und bewerten, bewerten wäre auch noch cool. Das haben wir auch schon ein paar Mal angesprochen bei Podcast-Seiten. Also Apple Podcasts, ich weiß gar nicht, Google Podcasts, kann man da auch Bewertungen schreiben. Das wäre cool.
Einfach irgendwie ein paar Sternchen da lassen und irgendwie einen kleinen, netten Kommentar. Da freuen wir uns auch immer drüber. Genau. So, und wenn ihr euch dann noch ein T-Shirt von uns kauft, bevor ihr zur Beyond-Tellerrand kommt, auf das HörerInnen-Treffen, dann sind wir im siebten Himmel. Oder vielleicht sogar im 23. Okay. Das war jetzt so schön. Dann haben wir jetzt doch noch die Viertelstunde auch voll. Gerade so. Gerade so.
Na, wir werden am Anfang ein bisschen wegschneiden. Komm, ein paar Sekunden müssen wir noch. Okay. Aber ich lasse jetzt das Auto schon mal laufen. Ja. Und, ähm, ja, vielen Dank, dass ihr wieder zugeschaut habt, äh, zugehört habt, wo wir gerade beim Streamen waren. Ähm, und bis zum nächsten Mal. Bis dann. Ciao. Tschüss. Musik