Wo wir sind, ist vorne, Folge 57, heute live von der Gulasch-Programmier-Nacht in Karlsruhe. 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ß. Ja, herzlich willkommen, schön, dass ihr alle hier seid und schön, dass ihr auch da seid an den Empfangsgeräten zu Hause.
Ja, man kann uns nämlich auch, wenn man das jetzt im Podcast hört, man kann uns auch live sehen, also nicht live, aber man kann die Folge, die wir jetzt gerade live aufnehmen, kann man dann im Nachhinein auch sehen. Die UL kommt natürlich in die Shownotes. Genau. Ja, ein paar Menschen haben sich gefunden, ist aber nett, dass wir nicht allein hier sind. Wir machen mal hier so Show of Hands, wer kennt uns denn noch überhaupt nicht? Oh, okay. Fast alle. Also wir müssen uns benehmen.
Und wer hört den Podcast ab und zu? Wahrscheinlich die vordere Reihe nur. Ja, okay. Ah, okay. Wer schaut den Stream ab und zu? Okay, auch nur die vordere Reihe. Gut, hab ich mir fast gedacht. Und wer ist nicht freiwillig hier? Okay. Okay. Das ganze Bock ist nicht freiwillig hier. Okay, alles klar. Ja, aber ihr macht das doch, weil es Freude macht, oder? Ja, ja, ja, genau. Ja, genau. Jetzt, glaube ich, da müssen wir uns kurz vorstellen, wer wir sind und was wir so machen.
Weil, wenn die meisten hier uns nicht kennen, gut in unserem Podcast, wenn wir es dann später veröffentlichen, dann... Das ist halt langweilig, oder? Ja, egal, aber das sind ja vielleicht dann auch der eine oder die andere dabei, die das dann zum ersten Mal hört. Genau. Ja, ich bin Moritz. Ich bin Konstantin. Wir machen Frontend-Development und wir reden viel drüber, wir reden gerne drüber. Wir machen das jetzt auch schon relativ lange, also wir haben was zu erzählen, glaube ich, oder?
Ja, wir erzählen halt was. Also, die Wahrheit ist, also wir haben halt irgendwann mal gesagt, der Unterschied zwischen Podcaster und Nicht-Podcaster ist halt, dass wir halt podcasten. Also, das hat nicht unbedingt jetzt was mit, dass wir schlauer sind als andere zu tun, sondern wir reden halt im Mikrofon statt irgendwo... Genau, wir saßen oft zusammen irgendwie bei einem Bier und haben gesagt, Mensch, eigentlich könnte man da fast einen Podcast draus machen.
Und dann haben wir irgendwann zwei Mikros hingestellt und haben das gemacht. Genau, so ist es entstanden. Also, so dieses, ich glaube, viele Podcasts sind so entstanden. So, hey, warum haben wir jetzt nicht gerade ein Mikrofon nebendran gestellt und beim nächsten Mal haben wir es dann gemacht. Haben dann zwischendurch noch ein halbes Jahr damit verbracht, die Webseite zu programmieren. Ungefähr. Weil wir halt Frontendler sind, das muss dann halt irgendwie halbwegs fein aussehen.
Genau, vier Jahre machen wir das jetzt, glaube ich schon, ne? Dieses Jahr. So lange, oh Gott. Ja, ähm, ja, was machen wir so im Podcast? Wir erzählen aus unserem Development-Alltag. Wir schauen uns immer mal wieder neue Sachen an. Kommen wir auch nachher gleich noch zu verschiedenen Kategorien, die wir da haben. Sollen wir mit was zu trinken? Wir sitzen auf dem Trocknen. Ja, wir müssen, wir müssen jetzt.
Genau, wir haben nämlich immer traditionell, beginnen wir jede Folge mit einem Kaltgetränk. Früher war es immer Bier. Aber irgendwann haben wir irgendwann gesagt, wir werden schon zu Podcast-Alkoholikern. Deswegen ist es jetzt oft was Alkoholfreies, aber heute habe ich tatsächlich auch wieder was Alkoholik. Aber das ist serious. Wenn man dann irgendwann einmal die Woche streamt und einmal die Woche podcastet, dann trinkt man mindestens zwei Flaschen Bier pro Woche.
Und das ist schon regelmäßig. Das ist regelmäßig. Das ist auch so Fragebögen, so trinken Sie regelmäßig Alkohol. Aber ich habe heute also tatsächlich ausnahmsweise zur Feier des Tages, ähm, ich hatte, ich hatte, ich hatte, nee, wo ist mein Becher? Ah, das ist mein Becher. Sehr gut. Ich war ja im Urlaub in Österreich oder an der Grenze zu Österreich und habe dir was mitgebracht. Und zwar einmal vom Stiegelbräu in Salzburg. Das ist jetzt wie, ja. Das ist eigentlich für jetzt hier.
Schneeweißchen und Orangenrot heißt das, so ein Bier. Und Almdudler, Marte, Guarana. Das ist auch ein sehr hübsches Etikett. Almdudler, Marte, Guarana. Und hier den guten alten Flaschen, Dosenöffner, universell von der Oma, Erbstück. Sehr gut. Das ist, ja, in der Zeit, als man noch Sachen so produziert hat, dass sie 100 Jahre halten. Aber hier, Marte, Guarana, Almdudler, das klingt so ein bisschen wie Bio-Brause-Pastinake oder so. Der eine oder andere kennt es vielleicht vom Känguru.
Ich habe es leider nicht erfunden. So, was, wie, achso, Moment. Muss ich jetzt entscheiden, was du... Das ist ja gar nicht. Achso, wir fangen hier mit, ich will das jetzt mal probieren. Achtung, das schäumt ein bisschen. Das ist von dem Rad durchgeschüttelt worden. Achso, du hast auch eine. Perfekt. Ja, ja, ich habe, äh, so. Okay, und dann, aber warte mal, das ist gleich auch noch aufmachen. Achso, hier für ASMR.
Das machen wir in unserem Podcast und Stream immer, dass wir alle mithören dürfen, wie sie unsere Getränke anhören. Ihr wartet auf Technik und so, gell? Tja, da könnt ihr lange warten. Also es ist oft so, dass wir irgendwie eine Dreiviertelstunde brauchen in der Folge, bis wir dann zum Technikteil kommen. Aber die Folgen sind auch manchmal vier Stunden lang, also. Genau, heute haben wir nur eine, also wir müssen uns, glaube ich, ein bisschen ranhalten.
Jetzt können wir echt mal in echt Anstoß. Normalerweise stoßen wir immer durch ein Portal an, weil jeder bei sich zu Hause sitzt. Aber, mhm. Man muss dazu sagen, vielleicht für die, die es jetzt nicht sehen können, es ist eine sehr, sehr kleine Flasche. Ähm, null. Nee, weiß ich nicht. Orangenrot, wer ist noch? Der ist da drauf gekommen. Kostnotiz des Braumeisters. Ich lese kurz vor.
Strohblond, schaumgekrönt, fruchtig, runde, Zitrusorangenaromatik, schlank und mild, angenehm, spritzig und belebend, trockener Abgang. Also eigentlich alles. Habe ich jetzt nicht gemerkt. Schmeckt halt nach Bier. Ja. So. Äh, genau. Also wir machen... Der Biersummel hier spricht aus dir. Du hast richtig Ahnung.
Ähm, wir, äh, genau, wir machen den Podcast, wir haben aber auch seit, glaube ich, zwei Jahren jetzt einen Stream, wo wir dann ein bisschen mehr, weil Podcast ist immer schwierig, Technikthemen, Programmierung beibringen durch nur Hören, ähm, und dann haben wir gesagt, wir machen einfach, oder ich habe gesagt, wir machen einen Stream, ich musste dann morgens ein bisschen, äh, überrumpeln. Stimmt, das war komisch.
Ich musste Konstantin dazu überreden, dass, was wir Podcast machen, und er musste mich dazu überreden, mein Radiogesicht, äh, ins Fernsehen zu halten. war eigentlich, hey, cool, dann können wir mehr Technik zeigen, und, äh, manchmal klappt das, und manchmal machen wir auch andere Dinge.
Ja, oft ist es so, auch so gemeinsam mit der Community, wir, wir, wir wissen nicht, ob das stimmt, aber wir, wir behaupten einfach, wir sind Deutschlands einziger Stream mit Faxnummer, also man kann uns einen Fax schicken. Genau, könnt ihr rechts oben sehen, also, äh, Faxnummer könnt ihr uns wirklich schicken, ihr könnt uns auch jetzt einen Fax schicken, wenn ihr Lust habt. Genau, wenn, wenn, wenn das reinkommt, lesen wir es am Ende der Sendung vor.
Gucken wir mal, gucken wir mal kurz rein, ob wir einen Fax gekriegt haben, und dann würden wir das vielleicht auch zeigen. Äh, genau, und Hot Hub Stream, lasst euch davon nicht irritieren, dann müsst ihr bei Twitch mal dazu kommen, dann erklären wir das genauer, was es damit auf sich hat.
Genau, also, da produzieren wir auf immer so vorteilhafte Bilder wie das hier, oder ich spring nochmal irgendwo anders hin, also, ist immer, ist immer sehr, manchmal, manchmal spielen wir auch am Ende noch eine Runde, ähm, aber wir sehen vor allem immer sehr vorteilhaft aus dabei. Immer in jedem Frame, jeder Frame eintreffer.
Ist eigentlich egal, was für ein Video man von sich macht, wenn man sich länger filmt, es ist eine sehr hohe Wahrscheinlichkeit, dass der einzelne Frame, den man dabei rauszieht, dass der fürchterlich aussieht. Also, ich habe jetzt wirklich nur wild rumgeklickt und irgendjemand sieht immer blöd dabei aus. Vielleicht liegt es an uns. So, äh, warte mal, ich muss hier grad mal... Ja, also, ich glaube, dann sind wir jetzt mit dem Intro-Teil fertig und kommen zum ersten Programmpunkt.
Wenn wir da dieses Bild stehen lassen, ist das ein bisschen verwirrend. Ja, machen wir was schöneres. Genau, am Anfang von unserem Stream kann man übrigens 2048 im Chat spielen. Wer das Spiel kennt, ist so ein bisschen nerdig. Man kann da so Zahlen zusammenschieben, bis man... Bei uns muss man nur auf 64 kommen, das ist die einfache Variante. Wir haben natürlich auch alles selber entwickelt und auch im Stream teilweise gezeigt.
Wir haben so ein Soundboard, also das, was wir jetzt hier haben, können wir auch im Stream. Und da wir remote sitzen, habe ich da ein Node-Skript gebastelt, was da beziehungsweise NWJS ist, das ist so ein kleines Programmchen, das da läuft und geht nach draußen durch die Firewall und der Moritz kann dann auf den Knopf drücken und dann spielt das im Stream. Oder im Podcast. Ach, du hast es noch. Ich habe noch ein bisschen... Geschütze aufgefallen. Genau.
Aber es sieht jetzt aus, als ob ich der Superalkoholiker wäre, aber das ist eigentlich für euch. Wenn jemand ein Bier will, könnt ihr es euch hier abholen. Ja, hier. Da. Das ist das gute Wölfe aus Karlsruhe. Aber den will ich wieder zurück. Noch jemand? Ah. Sehr gut. Bitteschön. Hahaha. Eins brauche ich vielleicht noch für später, aber eins wäre noch, wenn... Ich lasse es mal hier stehen, es ist nicht besonders kalt leider.
Also Retro ist bei uns, eigentlich reden wir am Anfang da immer so ein bisschen, was seit der letzten Podcast-Folge passiert ist bei uns. Also irgendwelche Dinge, die wir auf der Arbeit getan haben, die uns irgendwie geärgert haben oder erfreut haben, mit denen wir uns beschäftigt haben.
Und heute, der Titel, also der Talk kann man ja gar nicht sagen, ihr erwartet das vielleicht irgendwas, wenn ihr überhaupt einen technischen Hintergrund habt, Programmierhintergrund, Web, was mit Scoping, Hoisting, Kunst, was das war. Ne. Ne. Ähm. Der Titel ist einfach nur Quatsch. Ähm. Ja. Was passt zu einem Chaos-Event, irgendeine Tech-Anspielung auf Star Wars. Auf Star Wars. Genau. Und wir haben uns natürlich langweiligerweise von Chat-GPT verschiedene Sachen generieren lassen.
Und unter anderem kamen da auch noch ein paar andere Titel raus, die nicht so gut waren wie der, wie zum Beispiel die Rückkehr des JSX-E. I. Ich hab keine Ahnung, was das ist. JSX? Ne. Aber minus I. Achso, damit es mit Jedi passt. Damit es mit die Rückkehr der Jedi reicht. Egal. Oder das HTML schlägt zurück. Also Chat-GPT war da nicht sehr kreativ. Aber du hast tatsächlich was zu erzählen. Naja, das ist nur ganz kurz.
Ich hab am Donnerstag erfolglos die Essensschlange beschallen dürfen. Und dann hat es angefangen zu regnen. Das war glaube ich der einzige Regen, der überhaupt jetzt hier war während der GPN, war während meines DJ-Sets. Also, danke. Hattest du "Why does it always rain on me" in deiner Playlist? Nee, aber "It's raining men". Ah ja. Aber das hab ich tatsächlich erst spontan dann... Ja, da müssen wir nicht mehr drüber reden. Das haken wir ab.
Wir müssen jetzt schnell zu was anderem kommen. Ja, GPN, Highlights. Achso, ja, Highlights bislang. Ich hab zum Beispiel den Talk gesehen über das Karlsruher Modell. Also, wir wohnen zwar schon lange in Karlsruher, wusste ich gar nicht. Also, nicht so in der Tiefe Bescheid. Hat das noch jemand gesehen, den Talk über das Karlsruher Modell? Weiß jemand, was das Karlsruher Modell ist? Da geht es darum, dass... Das ist, glaube ich, so für Trainsport.
Da bin ich eigentlich, gehöre ich nicht dazu, aber ist trotzdem super interessant. Die Straßenbahnen in Karlsruher fahren auf der gleichen Spurbreite wie Deutsche Bahn. Das ist für Straßenbahnen eher ungewöhnlich. Die haben normalerweise schmalere Spur. Und deswegen können mit entsprechend ausgestatteter Technik die Züge auch auf normale Deutsche Bahnstrecken fahren. Fährt das eine Strom links runter, das andere fährt hoch und dann können die da weiterfahren.
Deswegen kann man von der Innenstadt aus quasi extrem weit fahren mit dem Zug, ohne dass man irgendwie an den Hauptbahnhof muss. Egal. Das zeigt halt sehr so den Querschnitt und die Vielfalt hier bei der GPN. Gut, ich meine die Schnittmenge aus Technik-Nerds und Bahn-Nerds ist, glaube ich, eben auch nicht sehr gering. Aber es zeigt halt ja, um was es hier alles geht. Also kann man nur empfehlen. Es ist meine erste GPN auch dieses Jahr. Aber ich finde es echt cool, was hier geboten wird.
Ich habe leider nicht geschafft, hier mir wirklich Talks vor Ort anzuschauen. Aus familiären Gründen. Aber ich habe dann zu Hause die auch nachgeschaut. Auch das finde ich cool, dass man da wirklich... Erstens, dass es hier nichts kostet und du kannst dann auch noch zu Hause das spenden. Spenden natürlich. Spenden. Aber dass man hier einfach reinmarschieren kann, sich das angucken kann, aber auch von zu Hause alles nachverfolgen kann. Sehr cool. Sehr cooles Konzept.
Ja, sehr geiles Event. Und schön, dass wir auch hier sein dürfen. Hier nochmal vielleicht... Danke, falls er zu... Nee, der ist bestimmt schon beschäftigt mit seinem Talk später. Danke an Madonius, der uns gefragt hat, ob wir das hier machen wollen. Genau. Das ist für uns auch was Neues. Also deswegen auch... Also ein bisschen hat der Titel schon was damit zu tun. A New Scope. Für uns ist das hier eine neue Scope. Also wir haben noch nie live auf einer Bühne gesendet.
Aber es kommt noch ein bisschen Technikgesprochen. Ja, ein bisschen kommt auch noch. Ein bisschen. Ihr dürft auch rausgehen, wenn es heißt... Achso, ich glaube, du hast nicht mehr geupdatet, aber das macht nichts. Du weißt... Achso, ja. Okay. Genau. So. Sollte das nicht automatisch updaten. Achso, ja. Tut es aber nicht. Trello updatet nicht immer automatisch. Das wissen wir jetzt auch. Aber vielleicht, weil du... Nee, du bist hier nicht im WLAN. Deswegen. Achso.
Egal. Lass es. Passt schon. Dann kommt jetzt eigentlich die nächste... Also ich fahr einfach mal ab. Ja, mach das. Die Property der Woche. Das ist eine Rubrik, die wir normalerweise im Podcast haben. Und da wir aber heute sehr, sehr, sehr viele Properties haben, die quasi das Thema sind, überspringen wir das im Prinzip und kommen eigentlich dann direkt zur nächsten Rubrik. Achso, das ist dann... Also du musst aber jetzt umstecken, oder? Nee, aber erst mal noch ein Jingle.
Ja, das ist eben die Frage, was... Oh Gott, wer fängt denn da jetzt an? Na ja, egal. Ähm, dann... Ähm, ja. Das ist ein kleines Spielchen, das wir mit unseren Gästen, Gäst*innen gerne spielen. So zum Aufwärmen reinkommen, die Gäst*innen kennenlernen. Ähm, entscheide dich. Es werden Fragen gestellt à la Katze oder Hund. Und dann muss man aus der Pistole sagen... Banane. Ja, genau. Nein, natürlich nicht. Katze.
Wir dachten jetzt, wäre vielleicht mal ganz nett, so für die, die uns nicht kennen, also für die meisten hier und auch für die Leute, die uns regelmäßig hören, aber so über uns noch nicht so wirklich privat, äh, was wir sind. Wir spielen das mal mit, mit uns. Und es ist immer ganz, ganz, äh, ganz lustig. Ja. Es ist ganz lustig, immer den, den, äh, sich da Fragen auszudenken für die, für die Gäst*innen. Ähm, aber dass wir selber machen, das wäre lustig.
Das klang witzig beim Ausdenken, aber ich halte sich mal vor, das war nichts. Also, magst du anfangen oder soll ich anfangen? Äh, ich hätt, ich hätt's hier. Du hast es da, aber du hast es auf dem großen Display, dann kann ich es ja sehen. Dann fang, dann fang ich an. Achso, achso, ja. Nee, stimmt. Ja, dann... Ja, wir brauchen aber noch, warte mal hier, äh... Ähm, äh... Bisschen Spannung reinbringen. Wo ist er denn? Achso, das heißt so, das hat...
So, das ist echt schon stressig für mich jetzt, allein, wenn ich mich losse. Okay, ähm, Red Bull Cola oder Pale Ale? Red Bull Cola. Pizza oder Sushi? Sushi. Pink oder Glitzer? Äh, Pink oder Glitzer. Was jetzt? Glitzer. RGB oder Monochrom? RGB. Schnell oder Perfekt? Perfekt. Vue.js oder Open5.js? Äh, Vue.js. Corona-Warn-App-Anbindung oder OBS-Bugs? OBS-Bugs. 24 Stunden Hot-Hub-Stream oder zwei Wochen Subathon? Hot-Hub-Stream. Worms-Armageddon oder Worms-WMD?
Worms-WMD. Lüfter oder kein Lüfter? Kein Lüfter. Blue Screen oder Beach Ball of Death? Blue Screen. GPN oder Beyond Tellerrand? Das ist ja gemein jetzt. Beyond Tellerrand? Okay. Oh, oh, oh, oh. Okay. Okay. Du kannst es laufen lassen. Achso. Mach ich erst weiter mit dir. Okay, dann, ja. Oh je. Safari oder Chrome? Safari. Accessibility oder Usability? Accessibility. Regeln folgen oder Folgenregeln? Folgenregeln. Dream Theater oder Fun and Plus?
Dream Theater. Han oder Guido? Han oder was? Han oder Greedo. Greedo. Star Wars oder Star Trek? Star Trek. Original Series oder Next Generation? Next Generation. Discovery oder Enterprise? Discovery. Vegan oder Vegan. Vegan. Vegan. Gulasch oder Waffel? Gaffel. Gulasch. Gulasch. Gulasch. Flora oder Club? Club. Gpn oder Congress. Gpn. Gpn. Hey. Okay. Oh Gott. Du hast dir aber auch Mühe gegeben. Ja. Das überrascht dich jetzt. Dass ich mir mal Mühe gegeben habe.
Wahrscheinlich hätte ich nicht ankündigen sollen, dass ich dich ein bisschen quälen will mit den Fragen. Ja. Und naja. So. Aber jetzt. Endlich. Hier ist WWS IV mit dem Tagesthema. Zu schnell. Wir sind nicht zu schnell. Wir sind zusammen ein bisschen schnell. So. Okay. Dann gehe ich hier mal weiter. Also unsere Slides sind heute ein Browser, weil wir machen ja Frontend. Also wir brauchen kein Keynote oder sowas. oder sowas. Wir nutzen einfach Browser Tabs.
Und vielleicht hätte ich mir jetzt noch merken sollen, wie der Shortcut war mit zum nächsten Tab springen. Aber ich muss es jetzt von Hand machen. PC könnte ich ja sagen. Apple weiß ich nicht. Ja. Es ist aber Chrome. Es ist total egal. Was? Ja auf Windows ist es schon mal Tab. Nee. Alles geht kaputt. Oh. Jetzt leaken wir noch irgendwelche Sachen hier schön. Ja. Ähm. Nein. Das ist es nicht. Tatsächlich vergessen hier auf Dings da. Ähm. Notifications. Ähm.
Nicht stören zu stellen. Das hätte ich vielleicht noch machen sollen. Übrigens dieses kleine Icon da oben. Das ist eine App, die heißt Amphetamin. Äh. Und die hält den Rechner wach. Ist mir gerade noch eingefallen, was ich da gerade gesehen habe. Ah ja. Ist klar. Ja. Ist klar. So. Äh. Wir fangen an. Also wir haben uns überlegt für die GPN mit so. Äh. Was waren denn in unseren vergangenen Podcast-Folgen oder Streams? Ähm. Dinge, die wir so ein bisschen kaputt gespielt haben.
Weil das ist ja irgendwie schon so ein bisschen. Äh. Das Thema ist generell so. Wie kann man denn Dinge benutzen? Äh. Anders als die eigentlich gedacht sind. Oder wo sind denn die Grenzen davon? Ja. Das ist nicht alles. Wir haben auch ein paar coole Sachen dabei. Die einfach nur nett sind. Wo wir nicht wissen, ob die jeder so weiß. Wo man vielleicht noch was lernen kann. Hoffentlich. Ähm. Aber wir haben angefangen mit Grenzen ausloten hier. Und zwar. Ähm. Weiß nicht.
Wer von euch schreibt HTML ab und zu mal? Ja. Doch. Schon ein paar. Sehr gut. Ähm. Dann kennt ihr wahrscheinlich die Ordered List. OL. Ähm. Genau. Also das ist einfach nur eine Auflistung von Dingen, die dann eben durchnummeriert wird automatisch vom System. Also OL Tag mit LI Elementen üblicherweise. Darin kann man auch verschachteln, wie ihr hier sehen könnt. Vielleicht mach ich's noch mal gucken. Kann man das gut lesen? Ich mach's vielleicht noch mal ein bisschen größer.
Ist das irgendwie okay so? Kann man das halbwegs lesen? Auch den Code rechts? Ja. Nicken. Auch in der letzten. Ah. Da hinten nicht. Ich mach noch. Dann mach ich gern noch eins größer. Gucken wir mal. Besser? Okay. Sehr gut. Genau. Wir müssen mal gucken. Wir müssen wahrscheinlich noch ein paar mal hin und her. Weil es geht nicht bei allen Demos so gut. Genau. Also das ist so eine ganz normale Ordered List. Äh. Die Section da, die muss euch nicht kümmern.
Oder das H2 auch nicht. Es geht tatsächlich nur um dieses OL. Mit LI drin. Und dann noch mal verschachtelt. OL, LI. Ähm. Das ist jetzt erst mal relativ unspektakulär. Die Zahlen kommen da einfach automatisch hin. Das macht, das macht der Browser. Ah. Ich sehe grad CTRL-Tab. Das, äh. Das kann ich gleich mal ausprobieren. Äh. Dann beim nächsten. Ja. Okay. Genau. Muss ich mir... Halt mal so lange hoch, bis ich zum nächsten springe. Danke. Okay. Genau. Also soweit so gut.
Ähm. Und dann findet man raus, dass es da so ein paar Attribute gibt, die man den Listen geben kann. Die zumindest ich nicht so kannte. Das ist also, geht so ein bisschen über die Standard... Können wir auch gleich mal hier schon auf Hands machen, ne? Wenn wir schon mal die Möglichkeit haben, Feedback einzuholen. Genau. Kennt jemand Attribute, die man dem OL geben kann? Da hinten? Okay. Ähm. Ah, ja. Genau. Das kommt auf jeden Fall noch. Ich glaub, wir müssen das wiederholen, ne?
Weil das hört man wahrscheinlich auf. Genau. Also es kam... Es kam die Antwort, es gibt das Nummernsystem. Genau. Das kommt auf jeden Fall noch. Aber ich zeig jetzt mal was. Also es gibt zum Beispiel, man kann zum Beispiel den Start festlegen. Ich kann zum Beispiel sagen, starte mir mit dem vierten Punkt. Also mit der Nummer vier. Dann schreib ich einfach hier Start vier. Wer kennt das? Wer weiß das? Aha. Okay. Schon mal gesehen, immerhin. Ah, so ein bisschen unsicher auch hier.
Man kann das auch mit negativen Werten nehmen. Also das ist jetzt eine ganz normale OL ohne weitere Attribute. Das heißt, das sind einfach nur ganz normale arabische Ziffern. Kann also auch zum Beispiel bei minus drei starten und geht dann bis zu null. Oder man kann zwischendurch nochmal sagen, ja, ich möchte gern bei 42.235 starten oder so. ähm, das geht auch. Ähm, das geht auch. Genau.
So. Was aber auch geht, und da wird's jetzt schon ein bisschen, da wurde ich schon ein bisschen unsicherer, reversed, äh, kann man auch sagen. Dann dreht sich das ganze Ding rum. Das ist tatsächlich einfach nur das reversed Attribut, was da mit reingegeben wird. Und dann starte ich halt, äh, bei einer Liste, die, ähm, und hier ist auch noch Start, ist auch noch vier. Also das heißt, äh, es geht dann quasi rückwärts von vier.
Man startet dann, äh, ja, vier, drei, zwei, eins und dann null minus eins. Also das wird dann schon irgendwie ein bisschen funky. Ich weiß nicht, wofür man das braucht, äh, aber es geht immerhin. Und das verhält sich, finde ich, äh, erwartungsgemäß, würde ich jetzt sagen. Ähm, natürlich immer auch nur, in Kombination macht's natürlich erst richtig Spaß, weil es jetzt einfach nur reversed wäre, wäre es langweilig.
Aber ich wollte halt einfach auch wissen, geht es auch, dass es tatsächlich dann ins Negative geht. So. Dann den Type, das hatten wir gerade, das, das Attribut heißt Type. Da kann man dann, ähm, zum Beispiel, äh, Type Groß I, wären große, äh, römische Ziffern. Äh, man kann auch klein i nehmen, das sind dann kleine römische Ziffern, auch das kann man reversen.
Es gibt auch Type A, dann wird mit Buchstaben durchgezählt, äh, und in dem Fall war der Startjahr 42.235 und das ist die Buchstaben, das sind die Buchstabenrepräsentationen davon, also reversed. Das wäre jetzt tatsächlich die, ähm, B, J, L, K, ist, äh, 42, äh, 42.235 in Buchstabenrepräsentation, okay. Äh, also von A weiter und dann geht es halt weiter und dann, das, das, hast du gesagt, weiter die Demo, das war doch in der ursprünglichen nicht drin, oder?
Nee. Weil ich hab's ja nochmal mehr kaputt gespielt, egal. Egal, da kommen wir gleich noch zu, Konstantin hat noch, noch andere schlimme Sachen da mitgemacht. Ähm, so, und dann gibt's noch ein paar Sachen, die nicht gehen, ähm, wo, wo das ganze System dann aussteigt, äh, nämlich zum Beispiel, äh, negativer Start bei römischen Ziffern, keine Ahnung, warum man das braucht, aber das geht auf jeden Fall nicht, weil es gibt ja auch bei römischen Zahlensystemen auch
keine Null, also es gibt auch dem, dem, dem Folge keine Minus Eins oder sowas. Ähm, gut, Roman lowercase, also kleine römische Ziffern logischerweise, ähm, lowercase letters und negativer, also mit, mit Buchstaben kann ich auch nicht ins Minus gehen, weil, was ist Minus A, ich hab keine Ahnung, wie das dann weitergehen würde, aber das ist auf jeden Fall nicht spezifiziert, also, was hier, hier vorne steht immer Minus Eins, weil das einfach nicht geht, das haben wir ja ausprobiert, Moment, die Demo ist hier, ähm, also ich hab's versucht, bei Minus Eins zu starten mit
Roman und dann kommt halt einfach trotzdem die Minus Eins, das ist dann offenbar der Fallback, der immer auf die, äh, Gesundheit, genau, Gesundheit zurückgeht, oder so. Ähm, dann hab ich jetzt hier was, äh, ich hab mal geguckt, wie weit kann man denn mit römischen Ziffern gehen, ich weiß nicht, ob sich damit jemand auskennt, ich hab auch erst dann mich ein bisschen damit
beschäftigt, das ist nämlich die, in, in, in dem normalen römischen Zahlensystem, das sagt, du darfst nur maximal drei, wir haben's vorhin nochmal nachgeschaut, du darfst maximal drei, äh, gleiche. Genau, weil die Präsentation der Buchstaben entscheidet ja, ob du abziehst oder, oder addierst, ne. Und deswegen ist die größte
Zahl, die man in diesem System machen kann, 3999. Ich weiß nicht, ob man oft eine Liste braucht, die länger ist als das mit römischen Zahlen, ähm, aber wenn ich jetzt bei der 4000, äh, zu 4000 gehe, ähm, dann wird die tatsächlich wieder als arabische Ziffer dargestellt, was ich irgendwie schon, äh,
interessant fand, das geht nicht und lowercase geht natürlich dann auch nicht. Und da haben wir nämlich dann vorher noch in den Standard, äh, mal geschaut, weil wir dachten, das ist doch komisch, dass es bei 4000 einfach stehen bleibt. Also ich hätte jetzt erwartet, dass es dann irgendwie 4001 halt in, in arabischen Zahlen, äh, weitermacht. Und, äh, genau, da haben wir geguckt, was, was sagt denn der Standard? Und es gibt da tatsächlich
eigentlich eine Lösung. Da ist was Interessantes, also es ist so, man ist sich nicht so richtig einig, gehört das jetzt so richtig dazu oder nicht, aber es gibt wohl so eine Möglichkeit, äh, da nochmal so einen Strich drüber zu machen und dann wird das mal 1000 genommen, glaub ich, was da steht. Ähm, ist, äh, schon irgendwie, oh. Oh, das ist schön, wir haben Post gekriegt. Ich, ich wollte nur kurz stören, weitermachen. An einen Speaker in einem Saal, ja, ist gelungen.
An einen Speaker, okay, gut. Vielen, vielen Dank an die Chaos Post. Ich hab mich schon gefragt, wann wir die erste, äh, die erste Chaos Post kriegen. Also schickt uns jetzt alle Chaos Post, kann man auch online machen, glaub ich, gell? Genau, also, ähm, diese Schreibweise, gut, ich, ich glaub, ich brauch's nie, aber es ist auf jeden Fall interessant, dass es das offenbar gibt. Es ist im, also, ihr seht hier, das ist die HTML-Spec, es ist offenbar spezifiziert, aber kein Browser macht das.
Also weder Firefox noch Chromium, äh, ja, hat das irgendwie umgesetzt. Safari hab ich's nicht ausprobiert, aber, ja, egal, äh, fand ich, fand ich irgendwie, äh, trotzdem interessant. Äh, es gibt was, ich glaube, ich hab mal einen Standard gefunden, wo stand, danach kommt halt nix mehr, und, ähm, aber offenbar ist es spezifiziert jetzt aktuell, ähm, aber, jo, ja. Das ist das, was wir gerne machen, äh, die Grenzen der Standards und der Implementierung und Austest.
So, und das auch jetzt, äh, hier geht's nämlich noch weiter. War das nämlich noch nicht kaputt genug, und dann hab ich gedacht, was passiert denn, wenn ich's, äh, mit Buchstaben durchnummerieren lasse, aber, äh, den Start so setze, äh, genau, also das ist, äh, reversed, umgedreht, mit, äh, Buchstaben, äh, und noch den Start so gesetzt, dass ich dann irgendwann auf A zulaufe, und dann, was es dann macht, interessanterweise fängt's an mit 0, minus 1, äh, minus 2 weiter durchzunummerieren.
Ist halt immer der Fall weg. Also, ist halt immer der Fall weg.
Ähm, und, äh, mit, mit Start 24, genau, das haben wir jetzt vorhin schon gesehen, deswegen, ich glaub, du hast da nochmal an der Demo, du hast dich nochmal erweitert, weil das war nämlich ursprünglich nicht drin, und da hab ich gedacht, was passiert denn, aber wenn ich bei Z bin, und ich hab aber mehr als irgendwie 26, äh, Punkte, äh, und dann macht's eben weiter mit A, A, A, B, A, C, und so weiter, und das geht immer weiter, bis man dann diese komischen Buchstabenkombinationen hat, die, äh, die du vorhin gezeigt hast.
Genau, also, weird stuff, man braucht's wahrscheinlich nie, aber, ist interessant. Ja, aber sag mal, einfach, bei uns geht's ja nicht drum, braucht man das, oder? Haben ist besser als brauchen. Ja, genau. Äh, so, ich weiß nicht, wie gerne, äh, es gibt, wir haben noch hier den Wikipedia-Artikel zu den, äh, Roman Numerals, ähm, wo genau das irgendwie erklärt wird, und wie das heißt.
Das geht nämlich noch weiter, man kann nämlich statt einem Strich auch eine Box drumrum machen, und dann wird's mit, äh, mit 10.000 multipliziert. Ja, verrückt. Ich glaub, ja. Nur, dass man's mal gehört hat, ne? So, machen wir das Nächste, machen wir jetzt, machen wir jetzt ein bisschen bunt.
Okay, also, ihr kennt ja Scrollbars, ne? Also, ihr seht das hier auch rechts am Rand, äh, Scrollbars, äh, früher, ganz, ganz, ganz früher durfte man Scrollbars im Internet Explorer mal stylen, und, äh, dann wurde das irgendwie ausgebaut mit dem Grund, äh, es ist nicht so gut mit User-Interface-Elementen die Leute rumspielen zu lassen, sondern dann weiß halt keiner mehr, was damit zu tun ist. Aber ich glaube, damals konnte man nur einfärben. Man konnte, glaub ich, sonst nicht.
Ich glaub, man konnte eine Farbe geben, ja, für die komplette Scrollbar. Ja, genau. Äh, das wurde irgendwann wieder, äh, wurde halt nicht übernommen, das war halt nur so ein Internet Explorer-Ding, die Älteren werden sich erinnern an den Internet Explorer. Wenn ihr euch nicht an den Internet Explorer erinnert, dann ist das gut. Also, den, den, den, der, das ist, das ist, das ist total okay.
So, und, ähm, es geht aber jetzt wieder, es gibt in WebKit wieder eine Möglichkeit, ähm, also in WebKit-basierten Browsern, ich weiß gar nicht, ob ich, ich hab Safari, hab ich, glaub ich, gar nicht getestet. Also, Chrome und alles, was da so dazugehört. In Firefox geht's meines Wissens nach nicht, aber die wollten das, glaub ich, äh, das ist verhaltetes Wissen, egal. Ähm, und dann kann man, wenn man möchte, das sind Scrollbalken.
Also, man kann, ich sag auch nicht, dass es sinnvoll ist, ihr sollt es nicht machen, wir sagen euch hier, was ihr nicht machen sollt, auf jeden Fall. Äh, ja genau, das Ding ist so mit so einem komischen, äh, WebKit-Prefix, äh, Scrollbar, das ist tatsächlich jetzt in dem Fall die, äh, die Breite und, äh, die Minimalbreite und die Minimalhöhe, deswegen wird das Ding so fett.
Ähm, dann haben wir Scrollbar-Track, das ist der Hintergrund, ähm, dann seht ihr hier so Repeating Radial Gradient, das ist jetzt so, das Muster hab ich nicht selbst gebaut, aber man kann halt mit, äh, mit Radial Gradients oder mit verschiedenen, Gradients, äh, in CSS kann man halt so kleine Totenköpfe bauen und eben auch, ähm, wie ihr seht, dieses Biohazard-Symbol, was auf diesem, ähm, so genannten Scrollbar-Thump, genau, das ist das Ding, was man anfasst, was man hin und her schiebt.
Ähm, das kann man damit machen, wenn man möchte und ich hab gestern, oder, nee, vorgestern, als wir vorbereitet haben, ähm, den Konstantin gefragt, sag mal, kann man das vielleicht auch animieren? Und das konnten wir natürlich nicht entgehen lassen, dass dann, äh, genau. Ja, was heißt kaputt, aber es war noch nicht, da muss noch mehr, da geht noch mehr. Also das ist so, und, ja. Genau, kannst du mal, äh, weiter schalten.
Achso, was, was war, äh, achso, okay, ja, Bier, kann ich, kann ich gerne weitergeben, bitteschön. Habt ihr den Öffner? Okay, sehr gut. Hoppla. Also, jetzt ist das der, das ist der Moment für einen Applaus, oder? Also, hab ich, hab ich gelernt, ja. Also, zur Erklärung für den Podcast ist gerade jemand vom Stuhl gefallen. Und Flasche umwerfen, hab ich, hab ich gelernt. Genau, wenn's draußen kleppert, dann wird geklatscht. Genau, es wird, es wird geklatscht. Sehr gut, sehr gut.
Genau, also meine erste Intention war, äh, okay, dann machen wir halt irgendwie Keyframes und eine CSS-Animation und animieren den Hintergrund. Aber da haben sich die Browser-Hersteller wohl irgendwie gedacht, das ist zu viel des Guten, das verhindern wir. Aber wir wären nicht wir, wenn wir nicht ein bisschen weiter versucht hätten.
Und es geht, indem man die Hintergrundfarbe, oder die Animation der Hintergrundfarbe nicht auf diese, diese Pseudo-Elemente setzt, sondern auf den Container, zu dem die Scrollbars gehören. Und dann kann ich Background Inherit setzen und dann funktioniert das auch mit der Animation. Achso, ist das hier, ja, man sieht's so ein bisschen. Genau, das ist ein, äh, das ist relativ dezent da unten.
Das ist ein CSS-Gradient, der halt durchwandert, der sich größer aufspannt, als das Element ist und dann durchanimiert wird mit einer Transition. Ja, mit einer Transform. Und, äh, ja. Kann man machen. Kann man machen, aber Konstantin hat da noch nicht aufgehört. Ich hab dann auch gemeint, es blinkt zu wenig, es war seine Idee. Er meinte, ja, vielleicht kriegen wir noch was anderes hin. Und dann ist mir eingefallen, ja klar, es gibt animierte SVGs.
Ja, es gibt animierte SVGs und, äh, ja, das geht offenbar, wie wir dann gelernt haben. Also, hier tatsächlich Hotlinking auf andere Seiten, das ist immer erwünscht. Immer eine gute Idee, das zu machen, sich die Grafiken von anderen Seiten zu ziehen. In dem Fall natürlich schön, was ist das eigentlich, das ist so ein Android? Das ist so ein Android mit aufgeklapptem Mund, der irgendwie verschiedene Browser ist.
Ja, ist auf jeden Fall, ne, das ist das Edge-Logo, ist gar nicht mal Internet Explorer. Edge, Firefox und ein grüner Apfel, sehe ich das richtig? Rot-Grün-Schwäche oder ist er orange? Ist grün. Okay, dann, immerhin. Äh, ja, sehr schön, äh, unbedingt nachmachen, auf eurer Seite so einbauen, die CodePen, die Demos, äh, keine Ahnung, könnt ihr, könnt ihr, könnt ihr Konum auf CodePen, äh, folgen und angucken.
Die sind alle öffentlich, oder halt, äh, wenn die Demos von mir sind, Show Notes angucken, genau. Ähm, oder halt die Demos von mir, das ist, äh, mein Name ist ... Also, normalerweise würde man vielleicht einfach eine, eine Schmuckfarbe wählen oder zwei für den, für den Anfasser noch und damit arbeiten.
Also, man könnte das zum Beispiel so machen, wie auf unserer Podcast-Seite, das ist ja eher dezent, sag ich mal, ja, so sich an die Farben annähern und, äh, aber ich find eigentlich, ich find's schon schöner. Ich find's eigentlich schon so schöner. Sollten wir eigentlich bei uns auch einbauen.
Ja. Aber vielleicht, mir ist es noch nicht hektisch genug, ehrlich gesagt, aber das, wir haben jetzt nichts Hektischeres, keine Ahnung, also das, doch, wir haben noch eine hektischere, nee, haben wir, ich weiß gar nicht genau. Ähm, okay, dann kommen wir jetzt, warte mal, Moment, ach so, das Carrot ist da hinten, okay, gut, die Reihenfolge ist, glaub ich, ein bisschen anders, als ich es im Kopf hatte, egal.
Dann kommen wir jetzt noch zu was, äh, zu was Schönem, ähm, was irgendwann kommen wird, hoffentlich, aber wir haben vorhin festgestellt, oder ich hab vorhin sieben Teils festgestellt, dass die Demo, die ich dafür mal gebaut hab, komplett kaputt gegangen ist, weil die Browser-Hersteller mittlerweile,
irgendwie, also das ist ein Standard im Entstehen, ich zeig dann gleich mal, um was es geht, ähm, äh, wenn ihr Webseiten baut, äh, dann seid ihr bestimmt schon mal auf das Problem gestoßen, dass ihr so eine Select-Box, dass jemand so euch sagt, die würde ich jetzt gern stylen, also auf dem Mac sieht das so aus, das ist so ein ganz Standard, ich hab hier so ein Auswahlfeld, ich drück da drauf und dann hab ich verschiedene Optionen, die ich auswählen kann, das ist so eine Standard, äh, Select-Box, so, ähm, das ist schon immer ein Schmerz gewesen, wenn Grafiker dann kommen, äh, oder, oder UX-Designer und sagen,
hey, äh, style das mal, und da, man kann ein bisschen was machen, man kann ein bisschen was machen, ähm, das hier ist zum Beispiel, äh, eine Demo von Chris Coyer, der hat die Seite CSS-Tricks gegründet, ich behaupte, der hat das ganz gut verstanden, was man so alles machen kann, aber was man, das Einzige, was man machen konnte, bislang, eigentlich war
immer nur, die Box selbst stylen, aber nicht den Content, also ihr seht, da ist jetzt irgendwie ein schöner blauer Rahmen drum, da ist irgendwie so ein Pfeil, das sieht jetzt irgendwie ganz anders aus als vorher, das ist immer noch, ihr könnt es hier sehen, tatsächlich ein echtes Select-Element, nicht irgendwas anderes, ähm, und man möchte das, äh, aus vielen verschiedenen Gründen, möchte man eigentlich immer die nativen, ähm, ähm, äh, Browser, äh,
UI-Elemente verwenden, man möchte das nicht von Hand irgendwie mit JavaScript und irgendwelchen Layern nachbauen, ähm, weil es ist einfach so, es ist barrierefrei, es funktioniert immer mit der Tastatur und so weiter, also, kann ich hier mal zeigen, äh, ich hab's jetzt mal angetappt, ich kann jetzt hier mit, mit Leertaste öffnen, mit den Pfeiltasten hin und her, das ist das Verhalten, was ich eigentlich von der Select-Box immer haben will, genau.
Also, das ist so ziemlich alles, was, was die, was die längste, was die meiste Zeit jetzt irgendwie ging und lange ging ja auch gar nix. Ja. Also, da hat man sich früher aufgehäufen, irgendwie vielleicht noch, aber auch nicht in allen Browsern.
Also, früher, früher hat man sich damit ausgeholfen, dass man die Teile tatsächlich komplett transparent gemacht hat, äh, und was drunter gelegt hat, was so aussehen soll, äh, wie die Select-Box, die man haben will und dass man trotzdem das native Element irgendwie verwenden kann, aber das ist irgendwie eklig.
So, aber, äh, es wissen die Browser-Hersteller und, und diverse Interessengruppen schon sehr, sehr lange, dass das, äh, keinen Spaß macht, äh, das zu stylen und dass es diese Anforderungen immer mal wieder gibt. Ähm, und, äh, viele Leute bauen dann sowas, also, äh, das sieht jetzt erstmal gut aus, da sieht man hier irgendwie Select und so. Ähm, ich kann mal zeigen, wie es aussieht, wenn man es bedient. Ja, schön, schick, ist komplett anders, ist komplett umgestylt.
So, und jetzt zeige ich euch einfach mal, was da wirklich dahinter tickt, weil der Code hier, der ist ein bisschen misleading, weil da passiert eine Menge JavaScript im Hintergrund. Das ist tatsächlich nur auf jQuery basierend. Oh. Die, kennt vielleicht auch der eine oder andere noch. So, was aber hier in Wirklichkeit passiert ist, ups, sie, ah, jetzt, äh, jetzt hat sich's rumgedreht, interessant. So, aber ist vielleicht gar nicht so schlecht. So, was ist hier denn eigentlich wirklich?
Sorry, Nippon Paratka, dass wir dein Demo als, äh, als Negativbeispiel zeigen, tut mir leid. Ähm, genau, was hier nämlich eigentlich sichtbar ist, da unten ist das Select noch, aber das hat Display None bekommen. Und wenn ein, äh, ein Eingabefeld, egal, wenn irgendein HTML-Element, äh, Display None bekommt, dann wird das komplett entfernt aus dem DOM-Tree. Das bedeutet auch zum Beispiel Screenreader oder irgendwelche Technologien, äh, das wird, ist, ist weg, es ist verschwunden dann.
Das heißt, es ist, äh, nicht mehr bedienbar, auch nicht mehr mit der Tastatur. So, was jetzt, was wir jetzt hier eigentlich sehen, ist ein Span mit irgendwas drin, mit irgendwelchen, äh, CSS-Klassen, ähm, und dann irgendwie auch nochmal ein Diff mit, mit, das ist jetzt der Inhalt. Und das wird alles per JavaScript auf und, äh, also die ganze Funktionalität ist mit JavaScript nachimplementiert worden.
Natürlich aber nicht alles, weil wenn ich jetzt da versuche reinzutabben, dann habe ich überhaupt gar kein fokussierbares Element. Also, ihr seht, es ist irgendwie nach unten gesprungen, ich gehe nochmal nach oben, also ich klicke hier rein, es ist einfach nichts. Äh, ich kann gar nichts mit der Tastatur machen und Screenreader sehen, das Element überhaupt nicht. Also, das ist nicht so die, die beste Idee, sowas zu lösen, wenn man jetzt irgendwie so Designanforderungen hat.
Deswegen, äh, sind Menschen auf die Idee gekommen, da muss man was dran ändern und das ist jetzt so ein Standard, den haben wir ja, glaube ich, vor einem Jahr oder eineinhalb mal vorgestellt. Und seitdem hat sich leider nicht so extrem viel getan, aber es gab dann Leute, die gesagt haben, hey, wir brauchen was Neues und was irgendwie barrierefrei ist und was richtig gut funktioniert. Das ist, glaube ich, nach wie vor immer noch nur, äh, Chromium, äh, äh, äh.
Das steht auch hier, genau, Experimental Web-Plattform-Feature, das muss man dafür anschalten. Und der Flag, das man extra aktivieren muss, hat sich auch nicht geändert. Deswegen habe ich jetzt hier extra einen ganz neuen Chrome mit dem, mit dem Kram an. Übrigens, äh, wenn man immer damit browset, dann passieren manchmal komische Dinge, äh, wenn man das immer anhat. Ich hatte da schon sehr merkwürdige Effekte, dass Bilder nicht mehr geladen haben und so.
Sollte man nicht als Standard-Browser verwenden, in diesem Zustand, äh, würde ich, äh, würde ich, ja, von abraten. Aber, was die erfunden haben, ist, die haben gesagt, naja, Select, wir wollen das Web nicht kaputt machen, äh, wir erfinden jetzt was Neues. Wir, wir, wir, nehmen nicht das Alte und verändern, sondern wir erfinden was Neues. Das heißt jetzt Select Menu, kann mehr, klingt, klingt ja schon mal super.
Ähm, aber seitdem die die Seite hier aufgesetzt haben, hat sich die Implementierung im Browser schon so verändert, dass die Demos leider nicht mehr alle funktionieren. Aber mich hat das hier schon extrem überzeugt. Das ist nämlich, äh, ein rundes Emoji-Button, auf das ich draufklicken kann. Und dann habe ich eine runde Select-Box, in der ich Sachen auswählen kann. Und das kann ich tatsächlich auch hier mit der Tastatur machen.
Also, das ist tatsächlich ein echtes Browser-Element, was der Browser unterstützt mit allem Pipapo. Aber ich kann halt zum Beispiel das ganze Ding rund designen, was vorher halt nicht ging. Das Betriebssystem hat entschieden, wie es aussehen soll. Man kann es aber auch noch ganz anders machen. Also, zum Beispiel auch so irgendwie so Material-Design-artig, irgendwie so mit Schatten geht so ein Ding auf, das weiß ist und das wird so grau hinterlegt.
Also, ich kann tatsächlich auch den Inhalt irgendwie verändern. Ähm, die Demo geht, glaube ich, nicht mehr. Ähm, die geht auch nicht, wie ihr seht. Äh, es gibt hier diesen ... Das finde ich noch ganz nett. Also, das sind genau so diese Design-Anforderungen, die man gerne bekommt. Ja, mach das Ding nochmal größer, ich will da noch einen Text unten drunter haben. Geht alles mit Select nicht. Ich kann da drin gar nichts designen. Da ist einfach nur Text drin.
Und vielleicht kann ich noch ein Emoji reinpacken. Und das war's dann auch. Bild ist schon, ist schon Gülle geht nicht. Und, ähm, hier also auch so was ein bisschen komplexer mit so einer, mit verschiedenen Gruppierungen. Und dann habe ich unten Emojis und, ähm, genau. Oder zum Beispiel auch Color-Picker. Es gibt natürlich auch nativen Color-Picker. Es gibt ja Input-Type-Color, glaube ich, wenn ich's richtig weiß. Aber dann habe ich nicht so vorausgewählte Farben.
Das Ding ist tatsächlich komplett ... Genau, das ist keine Palette, sondern du hast halt ein Farbfeld, ja. So, und das, äh, ja gut. Habe ich jetzt natürlich wieder was sehr Hübsches ausgewählt. So, ähm, aber wir haben natürlich ja versucht, das kaputt zu machen. Ähm, weil ich hab mich dann gefragt, äh, wenn man da schon so viel verrücktes Zeug mitmachen kann, was kann man denn da alles reinpacken? Wie, wie, wie geht denn das? Und, äh, natürlich wieder eine kleine Demo gebaut.
Ähm, also das hier ist, Moment, müssen wir da ganz nach oben scrollen. Nicht, nicht gleich mit dem Stranger-Stuff beginnen. Also das ist jetzt Select-Menu-Plane. Wenn ich einfach gar nichts damit mache, kein Style, nichts damit verändere. Also das, ich zeig nochmal im HTML. Ähm, genau. Statt Select einfach nur steht da jetzt Select-Menu und Opt-Group und Option. Das gibt's bei Select auch schon, also eine Gruppierung. Ähm, und das sieht dann so aus.
Das sieht schon ein bisschen anders aus. Das ist jetzt schon irgendwie mit weißem Hintergrund und sieht schon, aber daran hab ich am Style jetzt tatsächlich gar nichts geändert. Das macht der Browser irgendwie so. Ähm, dann hab ich mir gedacht, okay, äh, Regenbögen wären doch irgendwie mal, wären mal versucht wert. Ihr seht schon, äh, das Ding sieht schon ein bisschen anders aus. Das Teil hier ist irgendwie rot und das ist farblich hinterlegt mit dem Pfeil.
Das hätte man vielleicht mit CSS noch so, ah, ich glaube, den dicken roten Rahmen hätte man, glaube ich, nicht hingekriegt. Aber man kann halt die Options auch, äh, mit Regenbögen hinterlegen, sehr, sehr hübsch, nicht mehr lesbar eigentlich und man kann da drin auch schön scrollen. Ist das aber, okay, da sieht man schon, ähm, die Implementierung ist ein bisschen komisch, weil wenn ich jetzt, ähm, ist es größer geworden beim Scrollen.
Es ist, ähm, nee, also an meinem Code liegt's auf keinen Fall. Nein, das liegt definitiv am Browser. Das hat schon mal funktioniert. Works on my machine, ihr wisst ja, ne? So, genau, und das ist das, äh, Moment, ist das das? Ne, das ist das hier. Hab ich eigentlich nur, da gibt's eigentlich nur eine CSS-Klasse, die ich da draufgelegt hab, äh, die heißt styled und dann hab ich halt, genau, da könnte ich vielleicht noch erklären, wie das generell gestylt wird.
Ähm, es gibt, ähm, da gibt's ein Pseudo-Element mit Doppelpunkt, Doppelpunkt, Part, das ist irgendwie, glaube ich, dafür erfunden worden. Das hab ich sonst noch nirgends gesehen. Ist das nicht für Web-Components auch, ne? Ist, ja, ich glaube, ist auch für Web-Components, äh, in diesem Fall, äh, gibt's da fertige, äh, fertige, in dem Select-Box, äh, Select-Menu gibt's da fertige Werte, die da reingefüllt werden können, zum Beispiel der Button. Das ist das ganze Ding hier.
Das ist quasi wie nochmal ein Selektor, der da, der übergeben wird als Parameter. Genau, da seht ihr hier, äh, Background-Color-Peach-Puff, das ist das hier, ich weiß nicht, wie das bei euch aussieht, eine meiner Lieblingsfarben. Ähm, dann haben wir Selected-Value, das ist das Rote, also seht ihr hier Background-Red. Ähm, also das ist wirklich der derzeit ausgewählte Text. Oder vielleicht auch was anderes, wie wir gleich noch sehen werden, vielleicht nicht nur Text.
Ähm, und dann gibt es noch List-Box, das ist das, das ist die Box, die da aufgeht. Da sieht man hier Border-Radius, 100-Pixel, ähm, Padding und so weiter. Minheit, was nicht so richtig greift. Genau. So, aber, wenn wir, wenn wir noch anderes komisches Zeug damit versucht hätten, ähm, ich hab jetzt dann mal versucht, in ein Select-Menu alles reinzupacken, was mir so einfällt, was da nichts zu suchen hat.
Also so, ich hab mir gedacht, okay, ja, keine Ahnung, was sind wir da vielleicht drin haben, irgendwie Bilder oder so vielleicht noch, Text, klar. Aber, okay, was wäre mit einem Link? Das ergibt irgendwie keinen Sinn, weil ich klicke ja schon oft was drauf, ich wähle was aus, Link funktioniert, haben wir hier. Äh, geht's hier auf www.siv.de, also unsere Webseite, SVG-Grafik, okay, das ist jetzt gar nicht so wild.
Man kann zum Beispiel anderes HTML reinpacken, eine Liste und eine Überschrift, geht vielleicht auch noch. Ups, Moment, ein Eingabefeld, weiß nicht, wofür das gut sein soll, vielleicht, ah doch, das hab ich, glaub ich, in einer anderen Demo gesehen, so als Filter zum Beispiel, könnte noch sinnvoll sein.
Ein weiteres Select geht auch, ähm, es ist ein bisschen schwierig drauf zu klicken, ähm, es geht da nämlich zu, aber ich hab jetzt hier, ihr seht, ich hab's ausgewählt, also Option 1, Option 2, das ist jetzt das, was ich ausgewählt hab. Das ist dieses komplette Select-Feld hier. Also steht dann quasi bei dem ausgewählten immer das drin, was sich auch mit Text-Content, äh, mit dem Attribut rausbekommt.
Genau, also wenn da kein Text drinsteht und das nur irgendwie jetzt ein HTML-Element ist ohne Text, äh, zum Beispiel bei SVG hab ich SVG dazu geschrieben, also wenn jetzt kein SVG stehen würde, dann wäre das einfach leer. Ähm, ein Date-Picker geht auch und, äh, ein YouTube-Live-Stream-Video. Was im Endeffekt ein Live-Frame ist, der dann... Ähm, also ich hab jetzt, ich steck jetzt das nicht um, aber ihr glaubt mir, das läuft jetzt tatsächlich und da kommt jetzt Sound raus.
Also dass auch da, auch das geht, man kann natürlich noch andere Input-Felder, äh, reintoten, irgendwie Range-Input, jetzt muss ich aufpassen, dass ich da rausgehe, ah nee, es geht trotzdem zu, schade. Äh, also auch das, und ich weiß nicht so genau, wie sinnvoll das ist, ähm, vielleicht habt ihr noch Ideen, was man da noch reinpacken könnte, was da nicht hingehört. Äh, ich glaub, YouTube-Live-Video war so das, war so das, das krasseste, was mir eingefallen ist.
Also es ist im Endeffekt unrestriktiert, ne? Es ist komplett, ja, ich hab nichts gefunden, was nicht funktioniert da drin.
Ähm, außer das Design ist jetzt irgendwie, es geht jetzt irgendwie in eine komische Richtung auf, weil, das will ich vielleicht noch zeigen, also es hat mal so funktioniert, wie man es vermuten würde, aber wenn ich es jetzt aufklappe, Wenn ich es jetzt so weit gescrollt hab, es ist jetzt am oberen Bildschirmrand, was würdet ihr sagen, in welche Richtung klappt es auf, wenn ich jetzt drauf drücke? Nach unten? Genau, falsch. Es klappt nach oben.
Ähm, keine Ahnung, das, äh, wir wissen es nicht genau. Ja, das hat ja schon mal funktioniert und ich vermute, äh, wir haben vor einer Weile mal, ähm, die Popover, äh, API vorgestellt und da gab's dann so ein ganz crazy CSS-Notation mit Add Position, wo ich dann Berechnungen drin anstellen konnte, wie viel Platz hab ich im Viewport und soll das erst oben und dann unten angezeigt werden und so weiter.
Und ich, äh, vermute, dass, äh, in Chromium das, äh, schon implementiert wurde, auch jetzt für die, für diese Select Menus, äh, und wir das in der Demo im Endeffekt, äh, updaten müssen, aber ich würde trotzdem erwarten, dass der Default-Zustand das automatisch macht, dass er den, den, den Viewport nicht nutzt, aber wie gesagt, das ist alles irgendwie so, äh, ja, top, top-notch, äh, ähm, alles ganz neu und, ähm, wir haben ja auch diesen, äh, die, die CSS-Subgrid-Geschichte jetzt irgendwie schon seit zwei Jahren verfolgt, äh, im Bugtracker von, von, von Chromium.
Also, die Sachen brauchen einfach eine Weile, bis sie implementiert werden und ich bin gespannt, ob da noch was zusammengestrichen wird, dass ich da nicht alles reinpacken darf oder ob das so bleibt, ähm, und, äh, ja, wie, wie, wie schnell wir das nutzen können, aber ich befürchte so, im letzten Jahr wird das noch nix.
Das, das, das, ich bin ein großer Fan von, das soll unbedingt ganz schnell live gehen, weil da so viele Probleme mit gelöst werden. Also, ich, ich erinnere mich noch, dass ich mal auf einer, auf einer Konferenz war, JS-Cont war das, glaube ich, ähm, wo, äh, ein damaliger Mitarbeiter von Microsoft irgendwie so eine große Kampagne gefahren hat, ich will jetzt wissen, mit welchen Formularelementen
Elementen habt ihr den meisten Pain. Er hat da eine Umfrage gemacht und da kam am Ende mit Abstand raus, Select ist der größte Schmerz bei allen, weil man damit quasi gar nix machen kann und, äh, das wär wirklich, wirklich tolle Sache, weil zum Beispiel so was...
Es ist halt vor allem, dass das, das letzte Inselchen noch an Formularelementen bisher, außer was, wo wir gleich noch, äh, drauf kommen, was sich halt noch nicht stylen lässt. Also, selbst Checkboxen, das war ja auch früher, äh, eine ziemliche Pain, die man dann auch irgendwie versteckt hat oder, äh, umpositioniert hat und dann irgendwie ein anderes Element hin, Span hinten ran und mit dem Checkt, äh, Pseudoselektor dann irgendwelche Dinge gebastelt hat. Das, selbst das geht ja jetzt inzwischen eigentlich, äh, ganz gut. Und jetzt so das Select ist noch das letzte Ding.
Checkboxen und Radio Buttons und sowas, das kann man mittlerweile eigentlich alles ganz gut mit Bordmitteln machen oder es gibt, äh, anerkannte Workarounds, die wirklich gut auch für alle Systeme funktionieren und so. Accessible sind. Äh, genau, auch Accessible sind, aber das, das Select ist einfach ein Pain in the Butt. Das muss, das muss, äh, ich brauch Select Menu.
So, ihr seht jetzt hier grad noch, äh, ein Cursor blinken. Ich hab hier grad nochmal, also, ich mag's ja gern bunt. Was, was, was, was meinst du, wär, wär eine Schande, wenn, wenn der nicht auch als in Regenbogenfarben blinken könnte, oder? Find ich auch. Gut, also, ja, schwache Überleitung, ich weiß, aber, äh, in unserer nächsten Demo hab ich genau das mal versucht, weil es gibt nämlich tatsächlich eine Eigenschaft in CSS, die heißt Carrot Color.
Ähm, und wir haben vorhin tatsächlich, äh, live noch debugged, ob wir irgendwie hinkriegen können, dass man, dass der Cursor ein bisschen breiter ist und wir haben's tatsächlich auch dann geschafft, weil, äh, ich, ähm, Wenn ich jetzt da reinklicke, dann, äh, macht euch, macht euch gefasst auf, äh, Regenbogen, ähm, weil es ist tatsächlich möglich, äh, nicht, nicht nur in einer Farbe einzufärben, sondern tatsächlich mit einer CSS-Animation, hier mit einer Keyframe-Animation,
einfach durch verschiedene Farben, äh, durchzurotieren. In dem Fall halt einfach Green, Yellow, Red, äh, Blue und, äh, genau. Die Übergänge werden vom Browser gemacht und es blinkt halt so, ich glaube, irgendwo hab ich noch die Zeit angegeben, nur 0,5 Sekunden, ähm, und, äh, das, äh, infinite, das heißt, es, äh, rotiert immer weiter und der Cursor blinkt jetzt, äh, sehr, sehr bunt und ich glaube, man kann's aber, man kann's aber ganz gut sehen.
Und standardmäßig ist der aber immer nur ein Pixel dünn und ich kann das auch nicht irgendwie, ich kann da keine Width, äh, setzen oder so und dann, äh, irgendjemand hat uns vorhin, äh, ich glaub du warst das, ne, aber dann probiert doch mal, äh, das Ganze mit einer, mit einem Transform hoch zu skalieren. Und das war tatsächlich die, die Dosis.
Genau, und wir haben hier Transform Scale 8 in dem Fall, also wirklich achtfache Vergrößerung von diesem Eingabefeld, ähm, also mit Zoom hat's nicht funktioniert, ähm, mit, äh, Font Size hat's nicht funktioniert, aber mit, äh, mit Transform Scale hat's funktioniert und jetzt ist das Ding tatsächlich auch relativ breit, ist natürlich nur für Demo-Zwecke jetzt so groß, ähm, aber, Regenbogencursor auf eurer Seite ab morgen. Genau. Ganz einfach.
Also das sind, äh, das sind natürlich jetzt Kleinigkeiten und was wir hier vorstellen, ist natürlich alles immer viel, äh, Gespiele und, und nicht unbedingt für den Alltagseinsatz gedacht. Aber, ähm, es ist halt, äh, wir, wir kommen an einen Punkt, wo wir kaum noch Elemente haben, die vom Browser vorgegeben oder aus, aus dem System UI kommen, sondern wir können alles beeinflussen.
Ob das jetzt unbedingt gut ist oder schlecht, so mit den Scrollbars, ne, äh, kann man sich drüber streiten, aber es ist halt einfach, es ist möglich. Also wir sind einfach immer weniger eingeschränkt und wir haben jetzt so an, an Layout-Funktionalitäten, ähm, in CSS endlich, äh, auch einen Punkt, wo eigentlich alles möglich wird und, äh, früher gab's nicht mal abgerundete Ecken, wie man sie jetzt hier sieht, ja.
Ähm, ähm, und jetzt, jetzt kommt halt an Implementierung und nichts mehr groß Bahnbrechendes, sondern es geht halt in die Details und ich kann jetzt halt die, die, äh, Carat-Farbe da ändern und ich kann, äh, Selects ändern und so weiter. Also, äh, ich find das nicht schlecht, also, ähm, man kann einfach jetzt, ne, viele wissen das auch noch gar nicht und man kann aber irgendwie auf einer Seite vielleicht dadurch hervorstechen, dass halt mein Textcursor auch zu der Farbe passt.
Jetzt nicht unbedingt rund blinkt, aber dass er halt von der Farbe her passt und dass meine Scrollbars irgendwie, äh, schicker aussehen. Ich glaube, in den meisten Fällen sollte man die Finger davon lassen. Wenn man's gut macht, kann man's durchaus benutzen. Äh, ich, Iberg, bin da auch sehr gespalten, ob man das tun sollte oder nicht, oder ob man so ein, wirklich diese Möglichkeit, da bin ich mir echt nicht sicher, ob's eine gute Idee ist, aber,
Keine Ahnung, äh, vielleicht gibt's ja gute Anwendungsfälle, mir fällt jetzt außerdem hier keiner ein, aber, ja, weil meistens der Browser eigentlich ganz gut weiß, wenn er die Hintergrundfarbe von einem Element kennt, wo ein Cursor drin blinkt, dann weiß er auch ganz gut, in was für eine Farbe der Cursor sein sollte, um dann ausreichenden Kontrast zu bieten, das ist ja wichtig.
Gut, dann, äh, ja, dann, äh, ich hab grad schon angesprochen, die letzte, eine der letzten Bastionen im, im Formularbereich, ähm, war immer der, der Auswahlbutton, ähm, Datei auswählen, also, äh, Input-Type, äh, File Und, äh, da haben wir in der Folge mit, äh, Manuel Matusowitsch, der ja auch schon sehr lange in diesem Game dabei ist, haben wir festgestellt, dass wir das alle drei nicht kannten, obwohl das schon irgendwie seit acht Jahren oder so funktioniert.
Und man sieht das auch ganz oft auf Formularen, äh, auf, auf Seiten in freier Wildbahn, die sind irgendwie schön gestylt und alles, äh, ist irgendwie schön in CI-Farbe, aber diese Upload-Geschichten, die sehen, entweder sind sie komplett ersetzt durch so einen, äh, File-Picker mit, mit ich kann Drag-and-Drop benutzen und so, oder sie sind halt einfach hässlich grau.
Und, äh, man kann das mit, hier unten sieht man's, äh, File-Selector-Button, ähm, als Pseudo-Element, kann man, äh, das tatsächlich stylen und kann's dann ganz normal, Background-Color, äh, Padding-Border, äh, Margin und so weiter, äh, den Button stylen. Und das wussten wir alle drei, äh, die wir da saßen und das schon lange machen, wussten wir das nicht. Kannte das schon jemand? Wusste das jemand? Setz das ein. Ja. Schaut mal, wieder was gelernt.
Ja, meistens war, war der Weg früher drumherum, auch dieses Ding halt auf Opacity 0 zu setzen, also durchsichtig zu machen und dann irgendwas hinten dran zu legen, was fürchterlich hässlich ist und dann, was auch von Browser zu Browser extrem unterschiedlich, wie groß dieses Ding standardmäßig ist, weil manche haben noch einen Text, also hier steht zum Beispiel keine ausgewählt unten drunter, wenn ich da drauf drücke, dann seh ich tatsächlich auch, äh, also ich kann auch unten draufklicken,
auf den Text, äh, jeder Browser macht's anders, äh, also bin ich auch um alles froh, äh, wie man das Ding irgendwie stylen kann. Okay, so, äh, wir haben gerade angezeigt bekommen, wir haben noch fünf Minuten. Fünf Minuten. Müssen wir uns jetzt, müssen wir uns jetzt beeilen. Ähm, was zeigen wir noch? Äh, ja, du hast noch, wir haben noch eine Rubrik und das Ende, ich glaub, da kommen wir schon. Achso, meinst du, also, okay, Musik machen wir nicht mehr? Okay, alles klar, gut.
Hätte ich jetzt gesagt. Äh, was haben wir denn noch? Achso, ja, genau. Dann kommt jetzt, Moment, normalerweise ... Das Geiltein. Geiltein. Wird beim Jingle mitgesungen hier vorne. Sehr schön. Bitte ab jetzt immer, wir müssen vielleicht im Livestream, müssen wir diese Jingles vielleicht auch mal ... Ja, wir brauchen einen Rückkanal. Ihr müsst, ihr müsst alle parallel auch live gehen. Äh, egal. Ähm, so. Äh, das Geiltein seid natürlich ihr. Ja, okay, ja, ich weiß, ja.
Äh, ich hab tatsächlich ein kleines Geilteil mitgebracht, was jetzt ziemlich gut zu den, zu den Sachen passt, weil wir haben jetzt so ein bisschen gesagt, ja, Standards ...
Also, das müssen wir vielleicht kurz nochmal erklären, äh, also Geiltein ist bei uns, äh, immer so ein, ein Ding, einer von uns beiden sucht sich irgendwas raus und das muss dann auch gar nix, äh, mit dem, was wir täglich so machen, mit, mit Technik zu tun haben, sondern es kann auch ein Künstler sein, äh, ja, Musik, irgendwas. Ähm.
Ähm, aber heute hat's tatsächlich was mit dem, ähm, heute ist es was Technisches, ähm, und zwar eine Initiative auch von Emanuel Matusowitsch, wir haben ihn grad schon angesprochen, äh, und zwar die Seite html.dev, ähm, hatte ich ... kennt vielleicht der ein oder andere, ähm, genau, äh, da werden so ein bisschen Negativbeispiele gesammelt, wie man HTML nicht verwenden sollte, da geht's meistens um, ähm, barrierefreies HTML, aber auch semantisches HTML.
Also es gibt so viele Möglichkeiten, die man mit HTML nativ hat, äh, aber oft sieht man trotzdem dann irgendwie so die, die Diff-Suppe, also es wird irgendwie nur das Diff-Element verwendet und dann JavaScript draufgeworfen und in den, in den meisten Fällen, äh, ist das keine gute Idee, also da ist, ich hab fast noch nie gesehen, dass jemand zum Beispiel ein Select mit JavaScript vernünftig nachimplementiert hat, weil es wird immer irgendwas vergessen, irgendeine Tastaturkombination, die du damit verwenden kannst, die Escape-Taste, was weiß ich, gibt so viele Sachen, die da standardmäßig drin sind.
Und bei HTML werden so Negativbeispiele, ähm, gepostet, aber es ist nicht nur, äh, negativ, also ihr habt da oben auch gesehen, da gibt's auch den HTML-Heaven, ähm, aber bei jedem Beispiel, was hier, zum Beispiel Button, Display-Flex, Roll-Button, also, Roll-Button auf dem Button, der ist schon ein Button, weiß ich jetzt, weiß vielleicht nicht jeder, äh, es gibt auch immer, ähm, einen Tipp, wie man das dann löst, ähm, und ich finde, es ist eine, ist eine super Seite, ich mag das sehr gerne, ähm, da auf jeden Fall mal ab und zu irgendwie die Beispiele reingucken, da kommt, kommt nicht so extrem oft was Neues dazu, ihr seht ihr hier gerade, 18. Juli, aber die,
die alten, es sind 32 Beispiele, die alten, äh, sind auch schon ganz gut und, und sehr aufschlussreich, äh, genau, also, wenn man jetzt hier nochmal eins anguckt, hier, äh, hier, äh, Link, Aria-Label, äh, äh, äh, äh, warum, warum hast du nicht einfach einen Link-Text, das ergibt irgendwie keinen Sinn, ähm.
Aber es ist halt schön, dass nicht nur gemeckert wird und irgendwie so Finger zeigt, sondern, dass man eben halt auch sieht, wie, wie macht man es dann richtig. Und gerade so für Einsteiger ist es, äh, äh, dann auch sehr schön zu sehen, wie man es dann richtig machen kann. Genau, so, jetzt müssen wir uns beeilen, also, dann zeigen wir noch kurz, äh, achso. Zeigen wir noch was?
Äh, unsere Seite, da dürft ihr gerne mal draufgehen, wo wir sind, ist vorne.show oder www.siv.de, dann, äh, schon umgeleitet, äh, kürzer zum Tippen, da könnt ihr gerne mal draufgehen, äh, wir streamen regelmäßig auf Twitch, äh, wie wir vorhin schon gesagt haben, ähm, wir machen Podcast, den könnt ihr ganz normal abonnieren, ähm, äh, per RSS-Feed in eurem Podcatcher findet ihr den hoffentlich auch einfach so, wenn ihr, äh, unseren Namen eingebt.
Ähm, wenn ihr auf die Seite kommen wollt, dann könnt ihr auch jetzt mal kurz abscannen, wer will, ähm, würde ich jetzt einfach mal so stehen lassen und, äh, damit kommen wir zu ... Da ist Ende. Ja, ich schäme mich da immer. Dieser Jingle stammt aus einer Zeit, in der wir noch keine Jingle hatten und alle selber eingesungen haben.
Und dann haben wir, Konstantin hat irgendwann mal gemeint, jetzt schneiden wir mal einen zusammen aus den Sachen, die wir da irgendwie gemacht haben und das, äh, Jedes Mal, vor Publikum schäme ich mich schon so. Vielleicht brauchen wir neun, okay. Ähm, ja, normalerweise, wenn wir, äh, einen Gast, eine Gästin haben, dann hat, äh, der, die Gästin, das letzte Wort und da, äh, wir heute bei euch zu Gast sind, habt ihr das letzte Wort.
Ich zähle jetzt bis drei und dann darf einfach jeder ein Wort sagen. Eins, zwei, drei. Mega. Sehr schön. Super. Das war's. Dann vielen Dank fürs, äh, fürs Zuhören und Zuschauen. Macht's gut. Ciao. Vielen Dank. Vertraue und glaube, es hilft, es heilt die göttliche Kraft!