 Wo wir sind ist vorne Folge 57, heute live von der Gulasch-Programmier Nacht in Karlsruhe. Herzlich Willkommen bei Wo wir sind ist vorne Front & Fakten-Frotze-Line. Der Late-Night-Front & Talk-Show rund um Webdesign und Entwicklung. Es reden sich um Head und Kragen. HTML-Fundamentalist Moritz Giesmann und JavaScript-Jongler Konstantin Gross. Herzlich Willkommen, schön, dass ihr alle hier seid und schön, dass ihr auch da seid an den Empfangsgeräte 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 URL kommt natürlich in die Show-Notes. Genau. Ja, ein paar Menschen haben sich gefunden, ist aber nett. Das finde ich allein hier. Wir machen mal hier so Show of Hands. Wer kennt uns denn noch überhaupt nicht? Fast alle. Also wir müssen uns benehmen. Und wer hört den Podcast ab und zu? Die vordere Reihe nur. Wer schaut den Stream ab und zu? Okay, auch nur die vordere Reihe. Gut, habe ich schon fast gedacht. Und wer ist nicht freiwillig hier? Okay, das ganze Bock ist nicht freiwillig hier. Okay, alles klar. Ja, aber ihr macht das doch, weil es Freude macht, oder? 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 langweilig, oder? Ja, egal, aber das sind ja vielleicht dann auch die ein oder die andere dabei, dass 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 haben 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 Podcast und nicht Podcast, da ist halt, dass wir halt Podcasten. Also, das hat nicht unbedingt etwas mit, dass wir schlauer sind, als andere zu tun, sondern wir haben halt ein Mikrofon statt irgendwo... Genau, wir saßen auch zusammen irgendwie bei einem Bier und haben gesagt, Mensch, eigentlich könnte man da fast ein Podcast draus machen und dann haben wir irgendwann zwei Mikros hingestellt und haben es gemacht. Genau, so ist es entstanden. Also, ich glaube, da sind viele Podcasts so entstanden. So, hey, warum haben wir jetzt nicht gerade ein Mikrofonneben dran 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, viel Jahre machen wir das jetzt, glaube ich, schon, ne? Gut. 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. Sondern mal mit was zu trinken. Wir sitzen auf dem Trockner. Ja, wir müssen mal. Genau, wir haben mich immer traditionell... Beginnen wir jede Folge mit einem Kaltgetränk. Spürbar immer Bier. Irgendwann haben wir gesagt, wir werden schon zu Podcast-Alkoholikern. Deswegen ist es jetzt oft was alkoholfreies, aber heute habe ich tatsächlich auch wieder was alkoholfreies. Aber das ist serious. Wenn man dann einmal die Woche streamt und einmal die Woche podcastet, dann trinkt man mindestens zwei Flaschen Bier pro Woche. Und das ist schon regelmäßig auch so Fragebögen, so trinkt nicht regelmäßig Alkohol. Aber ich habe heute also tatsächlich ausnahmsweise zu Feier des Tages... Ich hatte... Was brauchst du denn? Ne, wo ist mein Becher? Ah, das ist mein Becher. Ja, ich habe mich im Urlaub in Österreich oder an der Grenze zu Österreich und habe dir was mitgebracht. Und zwar einmal vom Stieldreuz in Salzburg. Für mich? Für jetzt hier Schneeweißchen und Orangenrot. Heißt das, ein Bier? Und Almdutler Mate Gorana. Das ist auch ein sehr hübsches Etikett. Almdutler Mate Gorana. Und hier den guten alten Flaschen Dosenöffner universell von der Oma Erbstück. Sehr gut. In der Zeit, als man noch Sachen so produziert hat, dass sie 100 Jahre halten. Aber hier Mate Gorana, Almdutler, das klingt so ein bisschen wie... Da bin ich auch sehr gespannt drauf. Bio-Brause passt die Nake oder so. Die ein oder andere kennst du vielleicht vom Kängur. Ich habe es leider nicht erfunden. Das ist auch was so... So, was wie... Ach so, Moment. Du musst jetzt entscheiden, was du... Fangen hier mit, ich will das jetzt mal probieren. Achtung, das schäumt ein bisschen. Das ist von dem Rad durchgeschüttelt worden. Ach so, du hast auch eine. Perfekt. Ja, ja, ich hab... Okay, und dann... Warte mal, das ist gleich auch aufmachen. Aber die mache ich jetzt noch... Hier für ASMR. Das machen wir in unserem Podcast und Stream immer, alle mitspüren dürfen, wie sie uns getränke anhören. Ihr wartet auf Technik und so, gell? Ja, ihr könnt da lange warten. Es ist oft so, dass wir in einer dreiviertel Stunde brauchen in der Folge, bis wir dann zum Technik teilkommen. Aber die Folgen sind auch manchmal vier Stunden lang. Genau, heute haben wir nur eine. Also müssen wir uns glaube ich ein bisschen ranhalten. Jetzt können wir echt mal einen Anschluss normalerweise stoßen, weil immer durch ein Portal an, weil jeder bei sich zu Hause sitzt. Aber... Ich muss dazu sagen, vielleicht für die, die es jetzt nicht sehen können, es ist eine sehr, sehr kleine Flasche. Nudelschnie, weiß ich nur, Orangenbrot, wer ist noch da draufgekommen? Kostmotiz des Braumeisters. Ich lese kurz vor. Okay. Stroblond, Schaum gekrönt, fruchtig, runde, Zitrus, Orangen, Aromatik, schlank und mild, angenehm, spritzig und belehmend, trockener Abgang. Also eigentlich alles. Hab ich jetzt nicht gemerkt. Schmeckt halt nach Bier. Ja. So. Genau, also wir machen... Wir haben die Podcast, wir haben aber auch seit, glaube ich, zwei Jahren jetzt in einem Stream, wo wir dann ein bisschen näher, weil Podcast immer schwierig Technikthemen, Programmierungen beibringen, durch nur hören. Und dann haben wir gesagt, wir machen einfach, oder ich habe gesagt, wir machen ein Stream, ich musste dann im Ort ein bisschen... Stimmt, das war halt etwas komisch. Ich musste konstantin dazu beraten, was wir Podcast machen. Und er musste mich dazu beraten, mein Radio-Gesicht ins Fernsehen zu halten. Und der Psalm war eigentlich hekul, dann können wir mehr Technik zeigen. Manchmal klappt das. Manchmal machen wir auch andere Dinge. Ja, oft ist es so. Gemeinsam mit der Community. Wir wissen eigentlich, ob es stimmt. Aber wir behaupten einfach, wir sind Deutschlands einziger Stream mit Fax-Nummer. Genau. Können wir hier rechts oben sehen. Also Fax-Nummer könnt ihr uns wirklich schicken. Ihr könnt uns auch jetzt ein Fax schicken, wenn ihr Lust habt. Genau. Wenn das reinkommt... Am Ende der Sendung, gucken wir mal kurz rein, ob wir Fax gekriegt haben und dann würden wir das vielleicht auch zeigen. Genau. Und Hot Hubs Stream lasst euch davon nicht irritieren. Dann müsst ihr bei Twitch mal dazu kommen. Erklären wir das genauer, was es damit auf sich hat. Genau. Da produzieren wir auch immer so vorteilhafte Bilder wie das hier oder ich spring noch mal irgendwo anders hin. Es ist immer sehr... Manchmal spielen wir auch am Ende noch eine Runde. Aber wir sehen vor allem immer sehr vorteilhaft aus dabei. Jeden Frame, jeder Frame-Eintreffer. Es 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, das der fürchterlich aussieht. Also ich habe jetzt wirklich nur ein Bild rumgeklickt und irgendwie man sieht immer blöd dabei aus. Vielleicht liegt es an uns. So, warte mal, ich muss jetzt gerade mal... 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 es 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 ein bisschen nerdig. Man kann da so Zahlen zusammenschieben, bei uns muss man nur auf 64 kommen. Das ist die einfache Variante. Sonst sitzen wir ja ewig. 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 Note-Script gebastelt, was da beziehungsweise der NWJ ist, ist das so ein kleines Programm, das da läuft und geht nach draußen durch die Firewall und der Mode kann dann auf den Knopf drücken und dann spielt das im Stream oder im Portraster. Ich habe noch ein bisschen Geschütze aufgefahren. Genau. Aber es sieht jetzt aus, als ob ich der super Alkoholiker wäre, aber das ist eigentlich für euch. Wenn jemand ein Bier will, können wir es euch hier abholen, ja? Ja? Das gute Wölfe, vielleicht hier aus Karlsruhe. Noch jemand? Ah, sehr gut. Bitte schön. Eins brauche ich vielleicht noch für später, aber eins wäre noch, ich lass das 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. 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 Talk kann man ja gar nicht sagen, ihr erwartet das vielleicht irgendwas, wenn ihr behauptet, einen technischen Hintergrund habt, Programmierhintergrund, Web, was mit Scoping, Heusting, Ne. Der Titel ist einfach nur Quatsch. Was passt zu einem Chaos-Event, irgendeine Tech-Anspielung, auf Star Wars? Genau, und wir haben das uns natürlich langweiligerweise von ChatGPT 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-I, ich habe keine Ahnung, was das ist, statt die Rückkehr, aber Minus-I. Ach so, damit es mit Jedi passt. Damit es mit die Rückkehr der Jedi reicht, egal, oder das HTML schlägt zurück. Also ChatGPT war da nicht sehr kreativ. Super. Aber du hast tatsächlich was zu erzählen. Das ist nur ganz kurz, ich habe am Donnerstag erfolglos die Essensschlange bescheiden 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, also danke. Hattest du, why does it always rain on me in your playlist? Nee, aber it's Raining Man. Aber das habe ich erst spontan, da müssen wir nicht mehr darüber reden. Das haken wir ab. Wir müssen jetzt schnell zu was anderem kommen. Ja, GPN Highlights. Ja, Highlights bislang. Ich habe zum Beispiel den Talk gesehen über das Karlsruher Modell. Uns war schon lange in Karlsruher, wusste ich gar nicht. Was ich bescheide, hat es noch jemand gesehen im Talk über das Karlsruher Modell. Weißt du jemand, was das Karlsruher Modell ist? Da geht es darum, das ist, glaube ich, so für Trainsporter. Bin ich eigentlich, gehört ich nicht dazu, aber es ist trotzdem super interessant, die Straßenbahnen in Karlsruher fahren auf der gleichen Spurbreite wie Deutsche Bahn. Das ist für Straßenbahnen ja 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 Stromlings runter, kann man wieder weiterfahren. Deswegen kann man von der Innenstadt aus extrem weit fahren und zuckt. Das zeigt den Querschnitt und die Vielfalt hier bei der GPN. Die Schnittbänge aus Technik-Nurz und Bahn-Nurz ist, glaube ich, eben auch nicht sehr gering. Aber es zeigt halt ja, um was es hier alles geht. Kann man empfehlen, ist meine erste GPN auch dieses Jahr. Aber ich finde es echt cool, was hier geboten wird. Ich habe leider nicht geschafft, vor Ort anzuschauen aus Familiengründen. Aber ich habe dann zu Hause, die auch nachgeschauen. Auch das finde ich cool, dass man da, erstens, dass es hier nichts kostet und du kannst auch noch zu Hause das spenden. Natürlich spenden. Aber dass man hier einfach reinstehen kann, sich das angucken kann, aber auch von zu Hause alles nachverfolgen kann. Sehr cooles Konzept. Sehr geiles Event. Schön, dass wir auch hier sein dürfen. Hier noch mal vielleicht, danke falls er zu, nee, der ist bestimmt schon beschäftigt und das ist auch was Neues. Ein bisschen ist, der Titel hat schon was damit zu tun. Ein New Scope, für uns ist das hier ein Neues Scope. Also wir haben noch nie live auf einer Bühne gesendet. Aber es kommt noch ein bisschen Technik. Ja, ein bisschen kommt auch noch. Ihr dürft auch rausgehen, wenn es euch reicht. Ich glaube, du hast nicht mehr geupdatet, aber das macht nichts. Ach so, ja, okay. Sollte das nicht automatisch updaten? Ja, tut es aber nicht. Trello updatet nicht immer automatisch, aber vielleicht weil du nicht hier bist, hier nicht im WLAN, deswegen. Ach so. Dann kommt jetzt eigentlich die nächste, also ich mach, ich fahr einfach... 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 zum nächsten Thema. Also muss man jetzt gut stecken, oder? Nein, das ist eben die Frage. Oh Gott, wer fängt denn da jetzt an? Na ja, egal. Das ist ein kleines Spielchen, dass wir mit unseren Gästen gerne spielen, zum Aufwärmen reinkommen, die Gäste kennenlernen. Entscheidet dich. Es werden Fragen gestellt aller Cuts or Downed. Und dann muss man aus der Pistole sagen... Banane. Nein, natürlich nicht. Wir dachten jetzt 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 über uns noch nicht so wirklich privat, was wir sind. Wir spielen das mal mit uns und es ist immer ganz lustig, ja, es ist ganz lustig, sich da Fragen auszudenken für die Gäste. Aber das wir selber machen, das ist lustig. Das klang witzig beim Ausdenken, also ich anfange. Ich hätt's hier. Du hast auf einem großen Display, dann kann ich ja sehen. Wir brauchen aber noch, warte mal, hier, ein bisschen Spannung reinbringen. Wo ist sie denn? Ach so, das heißt so. Das ist echt schon stressig für mich jetzt, wenn ich noch viel stelle. Red Bull Cola oder Pale Ale? Red Bull Cola, Pizza oder Sushi? Pink oder Glitzer? Pink oder Glitzer. Was jetzt? Glitzer. RGB oder Monochrom? RGB. Schneller oder Perfekt? Perfekt. Vue.js oder OpenType.js? Vue.js. Corona-Warn-App-Anbindung oder OBS-Box? OBS-Box. 24 Stunden Hot-Up-Stream oder 2 Wochen Subwoofer? Hot-Up-Stream. Worms Armageddon oder Worms VMD? Worms VMD. Lüfter oder kein Lüfter? Kein Lüfter. Blue Screen oder Beach Ball of Death? Blue Screen. Gpn oder Beyond Tellerrand? Zäge mein jetzt. Beyond Tellerrand? Okay. Okay. Der kann es laufen lassen. Ach so. Safari oder Chrome? Safari. Accessibility oder Usability? Accessibility. Regeln folgen oder folgen regeln? Folgen regeln. Dream Theater oder Fun and Plus? Dream Theater. Han oder Greedo? Han oder Greedo? Star Wars oder Star Trek? Star Trek. Original Series oder Next Generation? Discovery oder Enterprise? Discovery. Vegan oder Nicht-Vegan? Vegan. Gulasch oder Waffel? Gaffel. Gulasch. Flora oder Club? Club. Gpn oder Congress? Gpn. Hey. Okay. Du hast dir aber auch Mühe gegeben. 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. Aber jetzt. Endlich. Hier ist WWSIV mit dem Tagesthema. Nicht zu schnell. Wir sind zusammen ein bisschen schnell. So. Okay, dann gehe ich hier mal weiter. Unsere Slides sind heute ein Browser, weil wir machen ja Frontend. Wir haben kein Kino oder so was. Wir nutzen einfach Browser-Tubs. Und vielleicht hätte ich mir jetzt noch merken sollen, wie der Shortcut war mit zum nächsten Tap springen. Aber ich muss es jetzt von Hand machen. Sieh konnte ich dir sagen. Ja, weiß ich nicht. Es ist aber Chrome. Es ist total egal. Was? Auf Windows ist das Schraubtap. Nein. Alles geht kaputt. Nein, das ist es nicht. Ich habe das nicht vergessen. Ich habe tatsächlich vergessen, hier auf Dings da. Notifications. Nicht stören zu stellen. Das hätte ich vielleicht noch mal sagen sollen. Übrigens, dieses kleine Eicheln da oben, das ist eine App, die heißt Amphetamin. Und die hält den Rechner wach. Ist mir gerade noch eingefallen, was ich gerade gesehen habe. Ist klar. Ist klar. Wir haben uns überlegt für die GPN mit so, was waren in unseren vergangenen Podcast-Folgen Dinge, die wir so ein bisschen kaputt gespielt haben. Das Thema ist generell so, wie kann man denn Dinge benutzen, anders als die eigentlich gedacht sind? Oder wo sind sie aus? Denn die Grenzen davon, 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. Wir haben angefangen mit Grenzen ausloten hier. Und zwar, weiß nicht, wer von euch schreibt HTML ab und zu mal. Doch schon. Ja, sehr gut. Dann kennt ihr wahrscheinlich die ordered list, OL. Genau, also das ist einfach nur eine Auflistung von Dingen, die dann eben durchnummeriert wird, automatisch vom System. Also OL, tag, mit li-Elementen. Ich habe also darin, kann man auch verschachteln, wie ihr hier sehen könnt. Vielleicht mal gucken, kann man das gut lesen. Ich mache es vielleicht noch ein bisschen größer. Ist das irgendwie okay so? Kann man das halbwegs lesen, auch den Code rechts? Ja, nicken auch in der letzten... Dann mache ich gerne noch eins größer, gucken wir mal. Besser? Okay, sehr gut. Genau, wir müssen mal gucken. Wir müssen wahrscheinlich 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. Die Section da, die muss euch nicht kümmern. Oder das hat zwei auch nicht. Es geht tatsächlich nur um dieses OL, mit li-Elementen und dann nochmal verschachtelt OL li. Und das ist jetzt erst mal relativ unspektakulär. Die Zahlen kommen da einfach automatisch hin. Das macht der Browser. Das kann ich gleich mal ausprobieren, dann beim nächsten. Halt mal so lange hoch, bis ich zum nächsten springe. Danke. Okay, also so weit so gut. Aber wenn man dann ein bisschen tiefer schürft in den Standards, dann findet man raus, dass es da so ein paar Attribute gibt, die man den Listen geben kann, die zumindest ich nicht so kannte. Also es geht so ein bisschen über die Standards. So auch gleich mal hier schon auf Hands machen. Wenn wir schon mal die Möglichkeit haben, Feedback einzuholen. Kennt jemand Attribute, die man dem OL geben kann, da hinten? Okay. Ah, ja, genau. Das kommt auf jeden Fall noch. Ich glaube, wir müssen das wiederholen, weil das hört man schön auf. Es gibt das Numandsystem. Genau, das kommt auf jeden Fall noch. Aber ich zeige jetzt mal was. Man kann zum Beispiel den Start festlegen. Ich kann zum Beispiel sagen, starte mir mit dem vierten Punkt, also mit der Nummer 4. Dann schreibe ich einfach hier Start 4. Okay, schon mal gesehen, immerhin. Ein bisschen unsicher auch hier. Man kann das auch mit negativen Werten nehmen. Also das hier ist 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 3 starten und geht dann bis zu null. Oder man kann zwischendurch nochmal sagen, ich möchte gern bei 42.235 starten oder so. Das geht auch. Genau, so. Was aber auch geht, das ist schon ein bisschen, da wurde ich schon ein bisschen unsicherer reversed. Kann man auch sagen, man dreht sich das ganze Ding rum. Das ist tatsächlich einfach nur das reversed Attribut, was damit reingegeben wird. Und dann starte ich halt bei einer Liste, und hier ist auch noch Start, es ist auch noch 4. Also das heißt, es geht dann quasi rückwärts von 4. Man startet dann hier 4, 3, 2, 1 und dann null minus 1. Also das wird dann schon irgendwie ein bisschen funky. Das geht immerhin, und es verhält sich, finde ich, erwartungsgemäß, würde ich jetzt sagen. Natürlich immer auch in Kombination macht es 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 dann tatsächlich dann ins negative geht. So, dann den Type, das hatten wir gerade, das Attribut heißt Type, da kann man dann zum Beispiel man kann auch Klein-E nehmen, das sind dann kleine römische Ziffern, auch das kann man reversen. Es gibt auch Type A, dann wird mit Buchstaben durchgezählt und in dem Fall war der Start hier 42.235 und das sind die Buchstabenrepräsentationen davon, also reversed. Das wäre jetzt tatsächlich die BJLK 42.235 in Buchstabenrepräsentationen. Okay. Dann geht es weiter und dann geht es weiter, das war noch in der ursprünglichen nicht drin, oder? Ich habe es ja noch mehr kaputt gespielt. Egal. Wir kommen gleich noch zu, Konstantin hat noch andere schlimme Sachen damit gemacht. So, und dann gibt es noch ein paar Sachen, die nicht gehen, wo das ganze System dann aussteigt, nämlich zum Beispiel negativer Start bei römischen Ziffern, keine Ahnung, warum man das braucht, aber das geht auf jeden Fall nicht, da gibt es noch keine Null. Also es gibt auch dem Freuge keine minus 1 oder sowas. Gut, römische Ziffern, logischerweise. Lowercase, letters und negativer, also mit Buchstaben kann ich auch nicht ins minus gehen, weil was ist minus A? Ich habe keine Ahnung, wie das dann weitergehen würde, aber das ist auf jeden Fall nicht spezifiziert. Also was hier vorne steht immer minus 1, weil das einfach nicht geht, das haben wir ja ausprobiert und die Demo ist hier. Bei minus 1 zu starten mit Roman und dann kommt halt einfach trotzdem mit minus 1, das ist dann offenbar der Fallback, der immer auf die Gesundheit zurückgeht. Dann habe ich jetzt hier was, ich habe mal geguckt, wie weit kann man denn mit römischen Ziffern gehen? Ich weiß nicht, ob sich damit jemand auskennt, ich habe auch erst dann mich ein bisschen damit beschäftigt. Das ist nämlich die in dem normalen römischen Zahlensystem, das sagt, du darfst nur maximal 3, ihr habt es voll nochmal nachgeschaut, du darfst maximal 3 gleiche. Genau, weil die Präzision der Probleme entscheidet, ob du abziehst oder addierst. Und deswegen ist die größte Zahl, die man in diesem System machen kann, 3.999. Ich weiß nicht, ob man offene Liste braucht, die länger ist als das mit römischen Zahlen. Aber wenn ich jetzt bei der 4.000 zu 4.000 gehe, dann stört die tatsächlich wieder als arabische Ziffer dargestellt, was ich irgendwie schon interessant fand. Das geht nicht und Lowercase geht natürlich dann auch nicht. Ich habe noch in den Standart mal geschaut, weil wir dachten, es ist doch komisch, dass es bei 4.000 einfach stehen bleibt. Also ich hätte jetzt erwartet, dass es dann irgendwie 4.000 1.000 in den arabischen Zahlen weiter macht. Und genau, dann haben wir geguckt, was sagt in der Standart und es gibt da tatsächlich Eigenstände. Da ist was Interessantes. Man ist sich nicht so richtig einig gehört, das ist jetzt so richtig dazu oder nicht, aber es gibt wohl so eine Möglichkeit, da so mal so ein Strich drüber zu machen und dann wird das mal 1.000 genommen, dann haben wir... Oh, das ist schön. Wir haben Post gekriegt. Ich wollte nur kurz stören, weiter machen. An einem Speaker in einem Saal, ja, es gelungen. Vielen, vielen Dank an die Chaos Post. Ich habe mich schon gefragt, wann wir die erste Chaos Post kriegen. Also schickt uns jetzt alle Chaos Post, kann man auch online machen, glaube ich. Genau, also diese Schreibweise, ich glaube, ich brauche es nie, aber es ist auf jeden Fall interessant, ihr seht hier, das ist die HTML-Spec, es ist offenbar spezifiziert, aber kein Browser macht das. Also weder Firefox noch Chromium hat das irgendwie umgesetzt. Ich habe es nicht ausprobiert, aber ja. Egal, fand ich irgendwie trotzdem interessant. Es gibt was, ich glaube, ich habe mal ein Standard gefunden, wo stand danach, kommt halt nichts mehr und aber offenbar ist es spezifiziert jetzt aktuell, aber... Jo, ja. Das ist das, was wir gerne machen, die Grenzen, der Standards und der Implementierung in Austest. So, und das auch jetzt, war das nämlich noch nicht kaputt genug? Und dann habe ich gedacht, was passiert denn, wenn ich es mit Buchstaben durchnummerieren lasse, aber den Start so setze, genau, also das ist reversed umgedreht mit Buchstaben und noch den Start so gesetzt, dass ich dann irgendwann auf A zu laufe und dann, was es dann macht, interessanterweise fängt es an, mit 0, minus 1, minus 2 weiter durchzunummerieren. Ist halt immer da voll weg. Also ist halt immer da voll weg. Genau, das haben wir jetzt vorhin schon gesehen, deswegen, ich glaube, du hast da nochmal, du hast hier nochmal erweitert, weil es war nämlich ursprünglich nicht drin und da habe ich gedacht, was passiert denn, aber wenn ich bei Z bin und ich habe mehr als irgendwie 26 Punkte und dann macht es eben weiter mit A, A, B, A, C und so weiter, das geht immer weiter, bis man dann diese komischen Buchstaben-Kombination hat, die du vorhin gezeigt hast. Genau, also jetzt darf man, man braucht es wahrscheinlich nie, aber so, ich weiß nicht, wir haben noch hier den Wikipedia-Artikel zu den Roman numerals, wo genau das irgendwie erklärt wird und wie das heißt. Das geht immer noch weiter, man kann nämlich statt einem Strich auch eine Box-Tromo machen und dann wird es mit 10.000 multipliziert. Ja, es ist... Ich glaube, ja. Dass man es mal gehört hat, ne? So, machen wir das nächste, machen wir jetzt ein bisschen Bund. Also ihr kennt ja Scroll-Bars, das ist hier auch rechts am Rand, Scroll-Bars. Früher, ganz, ganz, ganz früher durfte man Scroll-Bars im Internet Explorer mal stylen und dann wurde das irgendwie ausgebaut mit dem Grund, es ist nicht so gut mit User-Interface-Elementen die Leute rumspielen zu lassen, sondern dann weiß halt keiner mehr, was da mit zu tun ist, aber ich glaube, damals konnte man nur einfärben. Ich glaube, man konnte eine Farbe geben für die komplette Scroll-Bars. Das wurde halt nicht übernommen, das war halt nur so ein Internet Explorer-Ding, wenn ihr euch nicht an den Internet Explorer erinnert, dann ist das gut. Also, der... Das ist total okay. So, und es geht aber jetzt wieder, es gibt in WebKit wieder eine Möglichkeit, also in WebKit basiert ein Browser, ich weiß gar nicht, ich hab Safari, ich glaube, ich glaube, ich geh das in Chrome und alles, was da so dazugehört. Firefox geht es meines Wissens nach nicht, aber die Wolken, das ist falsch, das wissen, egal. Und dann kann man, das sind Scroll-Balken, also man kann ich sage auch nicht, dass es sinnvoll ist, ihr sollt es nicht machen, wir sagen euch hier, was ihr nicht machen soll, auf jeden Fall. Ja, genau, das Ding ist mit so einem komischen WebKit-Prefix scrollbar, das ist tatsächlich jetzt in dem Fall die Breite und die Minimalbreite und die Minimalhöhe, deswegen wird das Ding so fett. Dann haben wir Scrollbar Track, das ist der Hintergrund, dann seht ihr hier so repeating das musste habe ich nicht selbst gebaut, aber man kann halt mit Radial Gradients oder mit verschiedenen Gradients in CSS kann man halt so kleine Totenköpfe bauen und eben auch, wie ihr seht, dieses Biohersatz-Symbol, was auf diesem sogenannten scrollbar Thump, genau, das ist das Ding, was man anfasst, was man hin und her schiebt. Das kann man damit machen, wenn man möchte. Und ich habe gestern, oder ne Foxen, als wir vorbereitet haben, den Konstantin gefragt sag mal, kann man das vielleicht auch animieren? Das war noch nicht kaputt genug? Genau. Was heißt kaputt, aber es war noch nicht, da geht noch mehr. Genau, kannst du mal... Ich gehe mal... Also, okay, Bier, kann ich gerne weitergehen, bitte schön. Habt ihr einen Öffner? Sehr gut. Hoppla. Also, jetzt ist das der Moment für ein Applaus, oder? Also, habe ich gelernt. Das ist die Ernährung für den Podcast, dass gerade jemand vom Stuhl gefallen ist. Das sind so Kino-Sätze. Wenn es draußen klapper, dann wird geklatscht. Genau, es wird geklatscht. Das sehen wir gleich. Das ist aber auch nix ausgelaufen, oder? Sehr gut. Meine erste Intention war, okay, da machen wir EWK Frames und eine CSS-Animation und animieren den Hintergrund, aber da haben sich die Browserhersteller wohl irgendwie gedacht, das ist zu viel des Guten, das verhindern wir. Aber wir wären nicht wir, es geht, indem man die Hintergrundfarbe oder die Animation der Hintergrundfarbe nicht auf diese Pseudo-Animation ersetzt, sondern auf den Container, zu dem die Skrollbars gehören. Und dann kann ich Background Inherit setzen und dann funktioniert das auch mit der Animation. Ach so, ist das hier ja, man sieht so ein bisschen. Das ist ein relativ dezenter, CSS-Gradient, der halt Durchwanderer, der sich größer aufspannender als das Element ist und dann durchanimiert wird mit der Transition, mit der Influenzform 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 hat dann gemeint, vielleicht kriegen wir noch was anderes hin. Und dann ist mir eingefallen, ja klar, es gibt animierte SVGs. Ja, es gibt animierte SVGs und das geht offenbar. Wie wir dann gelernt haben, also hier tatsächlich, Hotlinking auf andere Seiten ist immer erwünscht, das ist immer eine gute Idee, um auf den anderen Seiten zu ziehen. In dem Fall natürlich schön, was ist das eigentlich, das ist so ein Androids, der auf jeden Fall, der irgendwie verschiedene Browser ist. Ja, ist auf jeden Fall, das ist das Edge-Logo, es kann nicht mehr Internet Explorer Edge, Firefox und ein grüner Apfel, seh ich das richtig, Rot-Grün-Schwäche oder ist er orange? Es ist grün. Ja, sehr schön, unbedingt nachmachen, auf eurer Seite so einbauen, die Demos, keine Ahnung, die Demos angucken, die sind alle öffentlich oder halt, wenn die Demos von mir sind, Schornhorts angucken, genau, oder halt die Demos von mir, normalerweise würde man vielleicht einfach eine Schmuckfarbe wählen oder zwei für den Anfasser noch und damit arbeiten. Also man könnte das zum Beispiel so machen, wie auf unserer Codcast-Seite, das ist eher dezent, sag ich mal, so sich an die Farben annähern aber ich finde eigentlich, ich finde es schon schöner, dass ich bei uns auch einbauen kann. Ja, aber vielleicht, mir ist das noch nicht hektisch genug, ehrlich gesagt, aber wir haben jetzt nichts hektischeres, keine Ahnung, also doch, wir haben noch ne hektische, nee, haben wir, ich weiß gar nicht genau. Okay, dann kommen wir jetzt, warte mal, Moment, ah so, das Carat ist da hinten, okay, gut, die Reihenfolge ist glaube ich ein bisschen anders als im Kopf, hat er egal, dann kommen wir jetzt noch zu was Schönem, was irgendwann kommen wird, hoffentlich, aber wir haben vorhin festgestellt, das ist eine Formu, die ich dafür mal gebaut habe, komplett kaputt gegangen ist, weil die Browserhersteller mittlerweile irgendwie, also das ist ein Standard im Entstehen, ich zeig dann gleich mal, um was es geht. Wenn ihr Webseiten baut, dann seid ihr bestimmt schon mal auf das Problem gestoßen, dass ihr so ne Selectbox, dass jemand so euch sagt, die würde ich jetzt gern stylen, also auf Maxi das ist so aus, das ist so ein ganz Standard, ich hab hier so ein Auswahlfeld, ich drück da drauf und hab ich verschiedene Optionen, die ich auswählen kann, das ist schon immer ein Schmerz gewesen, wenn Grafiker dann kommen oder UX Designer und sagen, hey, styl das mal und man kann ein bisschen was machen, man kann ein bisschen was machen, das hier ist zum Beispiel 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, man hat ein 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 und man möchte das aus vielen verschiedenen Gründen, möchte man eigentlich immer die nativen Browser-DUI-Elemente verwenden, man möchte das nicht von Hand, mit JavaScript, irgendwelchen Layern nachbauen, weil es einfach so ist, es barrierefrei, es funktioniert immer mit der Tastatur und so weiter, also kann ich hier mal zeigen, ich hab das mal angetappt, ich hab das Ler-Taste öffnen, mit dem Pfeil-Tasten hin und her, das ist Verhalten, was ich eigentlich von der Select-Box immer haben will, genau. Also das ist so ziemlich alles, was die meiste Zeit irgendwie ging und lange ging ja auch gar nichts. Also da hat man sich früher auch ausgehäufen, wie vielleicht noch, aber auch nicht in allen Browsern, also früher hat man sich damit ausgeholfen, dass man die Teile tatsächlich komplett transparent gemacht hat und was drunter gelegt hat, was so aussehen soll, wie die Select-Box, die man haben will und trotzdem das native Element irgendwie verwenden kann, aber das ist irgendwie eklig. Aber es wissen die Browserhersteller und diverse Interessengruppen schon sehr, sehr lange, dass das kein Spaß macht, das zu stylen und dass es diese Anforderung irgendwann mal wieder gibt und viele Leute bauen dann so was, also das sieht jetzt erstmal gut aus, da sieht man hier irgendwie Select und so, ich kann mal zeigen, wie es aussieht, wenn man es bedient. Schön, schick, es ist komplett anders, es ist komplett umgestylt. So, und jetzt zeige ich euch aber mal, was da wirklich dahinter tickt, weil der Code hier, der ist ein bisschen misleading, weil da passiert eine Menge Javascript im Hintergrund, es ist tatsächlich nur auf jQuery basierend, die kennt vielleicht auch der eine oder andere noch. So, was aber hier, wie Wirklichkeit passiert ist, oops sie, also, jetzt hat sie es rumgedreht, interessant. So, das ist vielleicht gar nicht so schlecht. So, was ist hier denn eigentlich wirklich? Sorry, Nippon Paraka, dass wir deinen Demo als negativ Beispiel zeigen, tut mir leid. Genau, was hier nämlich eigentlich sichtbar ist, da unten ist es Select noch, aber das hat Display none bekommen und wenn ein Eingabe für, egal, wenn irgendein HTML Display none bekommt, dann wird es komplett entfernt aus dem DOM Tree, das bedeutet auch zum Beispiel Screenreader oder irgendwelche Technologien, das ist weg, es ist verschwunden dann, das heißt, es ist nicht mehr bedienbar, auch nicht mehr mit der Trastatur. Was wir jetzt hier eigentlich sehen, ist ein Span mit irgendwas drin, mit irgendwelchen CSS-Klassen und dann irgendwie auch nochmal ein Diff mit, das ist jetzt der Inhalt und das wird alles per Javascript auf und also die ganze Funktionärität ist mit Javascript nachimplementiert worden, natürlich aber nicht alles, aber wenn ich jetzt da Versuch reinzutabben, dann habe ich überhaupt gar kein fokussierbares Element, also ihr seht, es ist irgendwie nach unten gesprungen, ich gehe nochmal nach oben, ich klick hier rein, es ist einfach nichts. Wir können gar nicht mit der Trastatur machen und Screenreader sehen, das Element überhaupt nicht. Also das ist nicht so die beste Idee, so was zu lösen, wenn man jetzt irgendwie so Designanforderungen hat. Deswegen 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 einen halben 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 steht auch hier genau. Experimental Web Track Form Feature, das muss man dafür anschalten. Deswegen habe ich jetzt hier extra einen ganz neuen Chrome mit dem Kram an. Übrigens, wenn man immer damit bräust, dann passieren manchmal komische Dinge, wenn man das immer annahnt. 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, würde ich von abraten. Aber was die erfunden haben ist, wir erfinden jetzt was Neues. Wir nehmen das alte und verändern, sondern wir erfinden was Neues. Das heißt jetzt Select Menu, kann mehr, klingt ja schon mal super. Aber seitdem die die Seite hier aufgesetzt haben, hat sich die Implementierung 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 ein rundes Emoji-Button, auf das ich draufklicken kann und dann habe ich eine runde Selectbox, in der ich Sachen auswählen kann und das kann ich tatsächlich auch ein echtes Browser-Element, was der Browser unterstützt, mit allem PiPapo, aber ich kann halt zum Beispiel das ganze Ding runddesign, was vorher halt nicht ging, das Betriebssystem hat entschieden, wie es aussehen soll. Man kann es aber noch ganz anders machen. Also zum Beispiel auch so Material-Design-artig, mit Schatten geht so ein Ding auf, das weiß es und das wird so grau hinterlegt. Also ich kann tatsächlich auch den Inhalt irgendwie verändern. Die Demo geht glaube ich nicht mehr. Die geht auch nicht, wie ihr seht. Es gibt hier diesen, das finde ich noch ganz nett. Also das sind genauso diese Design-Anforderungen, die man gerne bekommt. Mach das Ding noch mal größer, ich will da noch ein Text 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 es dann auch. Bild ist schon, es ist schon Gülle geht nicht und hier also auch so was, bisschen komplexer mit so einer, mit verschiedenen Gruppierungen, dann habe ich unten Emojis und genau. Oder zum Beispiel auch Color Picker. Input Type Color glaube ich, wenn ich es richtig weiß. Aber dann habe ich nicht so voraus gewählte Farben. Das Ding ist tatsächlich komplett... Du hast keine Palette, du hast halt ein Farbfeld. So und das, ja gut, habe ich jetzt natürlich wieder was sehr Schübsches ausgewählt. So, aber wir haben natürlich ja versucht, das kaputt zu machen. Weil ich habe mich dann gefragt, wenn man da schon so viel verrücktes Zeug mitmachen kann, was kann man denn da alles reinpacken? Wie geht das? Und natürlich wieder eine kleine Demo gebaut. Also das hier ist, Moment, wir müssen wieder ganz nach oben scrollen. Nicht gleich mit dem Strange On Stuff beginnen. Also das ist jetzt Select Menu Plane. Wenn ich einfach gar nichts damit mache, kein Style, nichts, was ich verändere. Also das zeige ich nochmal im HTML. Statt Select, einfach nur, steht da jetzt Select Menu und Opt Group und Option, das gibt es bei Select auch schon, also eine Gruppierung. Und das sieht dann so aus, das sieht schon ein bisschen anders aus. Das sieht schon irgendwie mit weißem Hintergrund und sieht schon, aber daran habe ich am Style tatsächlich gar nichts geändert. Das macht der Browser irgendwie so. Dann habe ich mir gedacht, okay, Regenbögen werden doch irgendwie mal versucht wert. Ihr seht schon, das Ding sieht schon ein bisschen anders aus. Das Teil hier ist irgendwie rot und es ist farblich hinterlegt mit dem Pfeil. Das hätte man vielleicht mit CSS noch so. Ich glaube, den dicken roten Rahmen hätte man, glaube ich, nicht mehr bekommen. Aber man kann halt die Options auch mit Regenbögen hinterlegen, und man kann da drin auch schön scrollen. Da sieht man schon, die Implementierung ist ein bisschen komisch, weil wenn ich eben das größer geworden beim scrollen, also an meinem Code liegt es auf keinen Fall. Nein. Es liegt definitiv am Browser, das hat schon mal funktioniert. Works on my Machine, ihr wisst es ja, ne? So, genau. Ist das das? Nein, das ist das hier. Da gibt es eigentlich nur eine CSS-Klasse, die ich da draufgelegt habe. Die heißt Styled und dann habe ich halt, wie es generell gestylt wird. Da gibt es ein Pseudo-Element mit Doppelpunkt, Doppelpunkt, Part. Das ist irgendwie, glaube ich, dafür erfunden worden. Das habe ich sonst noch nirgends gesehen. Das sind nicht für Web-Komponents auch, ne? Ja, ich glaube es auch für Web-Komponents. In diesem Fall gibt es 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 den übergeben wird als Partner. Genau, da seht ihr hier, Background-Color-Peach-Puff. Das ist das hier, ich weiß nicht, wie das bei euch aussieht, eine meiner Lieblingsfarben. Dann haben wir Selected Value, das ist das Rote, also seht ihr background red. Also das ist wirklich der aus, derzeit ausgewählte Text oder vielleicht auch was anderes, wie wir gleich noch sehen werden. Nicht vielleicht nicht nur Text. Und dann gibt es noch Listbox. Das ist die Box, die da aufgeht. Da sieht man hier BorderRadius, was man da vertreibt. Genau, aber wer nicht wir, wenn wir nicht noch anderes komisches Zeug damit versucht hätten. Ich habe jetzt dann mal versucht, in das Select-Menu alles reinzupacken, was mir so einfällt, was da nichts suchen hat. Also so, ich habe mir gedacht, okay, keine Ahnung, was, wenn wir da vielleicht drin haben, Bilder oder so, vielleicht noch Text, klar. Aber okay, es ergibt irgendwie keinen Sinn, weil ich klick ja schon auf was drauf, ich wähle was aus, Link funktioniert, haben wir hier. Geht es hier auf ewsv.de, also unsere Webseite SVG-Grafik, okay, jetzt ist es gar nicht so wild. Man kann zum Beispiel anderes HTML reinpacken, eine Liste und eine Überschrift, geht vielleicht auch noch. Ups, Moment, ein Eingabe fällt. Weiß nicht, wofür das gut sein soll. Aber vielleicht, ah doch, das habe ich in einer anderen Demo gesehen, so als Filter zum Beispiel, könnte noch sinnvoll sein. Ein weiteres Select geht auch. Es ist ein bisschen schwierig draufzuklicken. Es geht da nämlich zu, aber ich habe jetzt hier, ihr seht, ich habe es ausgewählt, also Option 1, Option 2, das ist jetzt das, was ich ausgewählt habe, das ist dieses komplette Selectfeld hier. Also das steht dann quasi bei dem Ausgewählten immer das drin, was sich auch mit Text-Content, mit dem Attribut rausbekommt. Also wenn da kein Text drin steht und das nur irgendwie jetzt ein HTML-Element ist, ohne Text, zum Beispiel bei SVG, habe ich SVG dazu geschrieben. Das ist einfach leer. Ein Date Picker geht auch. Und ein YouTube Live Stream Video. Was im Endeffekt ein Iframe ist. Also ich stecke jetzt das nicht um, aber ihr glaubt mir, das läuft jetzt tatsächlich und da kommt jetzt Sound raus. Also auch das geht. Man kann natürlich noch andere Input-Felder reintuten und ein Range-Input. Jetzt muss ich aufpassen, dass ich da rausgehe. Ah nee, es geht trotzdem zu schade. Das ist voll das ist. Vielleicht habt ihr noch Ideen, was man da noch reinpacken könnte, was da nicht hingehört. Ich glaube, das YouTube Live Video war das krasseste, was mir eingefallen ist. Das ist im Endeffekt unrestriktiert. Ich habe nichts gefunden, was nicht funktioniert da drin. Außer das Design ist jetzt irgendwie, es geht jetzt irgendwie in eine komische Richtung auf, weil ich möchte vielleicht noch zeigen. Also es hat mal so funktioniert, wie man es vermuten würde. Aber wenn ich es jetzt aufklappe, es ist jetzt am oberen Bildschirmrand. Was würde dir sagen, in welche Richtung klappt es auf, wenn ich jetzt drauf drücke? Nach unten? Genau, falsch. Es klappt nach oben. Keine Ahnung. Es hat schon mal funktioniert, ich vermute, wir haben vor einer Weile mal die Pop-Over-API vorgestellt und da gab es dann so ein ganz crazy CSS-Notation mit Add-Position, wo ich dann Berechnungen drin anstellen konnte. Wie viel Platz habe ich im Viewport jetzt oben und dann unten angezeigt werden und so weiter. Und ich vermute, dass in Chromium das schon implementiert wurde, auch jetzt für diese Select-Menus und wir das in der Demo im Endeffekt updaten müssten. Aber ich würde trotzdem erwarten, dass der Default-Zustand das automatisch macht, dass er den Viewport sich das... Aber wie gesagt, das ist alles irgendwie so Top-Notsch, alles ganz neu und wir haben ja auch die CSS und das wird jetzt irgendwie schon seit 2 Jahren verfolgt im Backtracker von Chromium. Also die Sachen brauchen einfach eine Weile bis implementiert werden und ich bin gespannt, ob da noch was zusammengestrichen wird, dass ich dann nicht alles reinpacken darf oder ob das so bleibt und wie schnell wir das nutzen können. Aber ich befürchte, im nächsten Jahr wird das noch nix. Ich bin ein großer Fan von, das soll unbedingt ganz schnell live gehen, weil da so viele Probleme mit gelöst werden. Ich erinnere mich noch, wo ein damaliger Mitarbeiter von Microsoft irgendwie so eine große Kampagne gefahren hat. Ich will jetzt wissen, mit welchen Formularelementen habt ihr den meisten Payne? Er hat eine Umfrage gemacht und da kam am Ende mit Abstand raus. Selekt ist der größte Schmerz, weil man damit quasi gar nix machen kann und das wäre wirklich, wirklich tolle Sache. Es ist halt vor allem, dass das letzte Inselchen noch ein Formularelementen bisher, außer was, wo wir gleich noch draufkommen, was sich halt noch nicht steilen lässt. Also selbst Checkboxen, das war ja auch früher versteckt hat oder umpositioniert hat und dann irgendwie ein anderes Element hin, sparen hinten ran und mit dem Checked Pseudoselektor dann irgendwelche Dinge gebastelt hat. Selbst das geht ja jetzt inzwischen eigentlich ganz gut. Da auch Checkboxen und Radiobattens und so was, das kann man mittlerweile eigentlich alles ganz gut mit Bordmitteln machen. Oder es gibt anerkannte Workarounds, die wirklich gut auch für alle Systeme funktionieren. Auch Accessible sind. Genau, auch Accessible sind, aber das Select ist einfach ein pain in the butt. So, ihr seht jetzt hier gerade noch einen Cursor blinken. Ich habe hier gerade nochmal, also, ich mag es ja gerne bunt. Was meinst du, wäre eine Schande, wenn der nicht auch in Regenbogenfarben blinken könnte, oder? Find ich auch. Gut, also schwache Überleitung, ich weiß, aber in unserer nächsten Demo habe ich genau das mal versucht, weil es gibt nämlich tatsächlich eine Eigenschaft in CSS, die heißt wir haben vorhin tatsächlich live noch Debakt, ob wir irgendwie hinkriegen können, dass der Cursor ein bisschen breiter ist und wir haben es tatsächlich auch dann geschafft, weil ich wenn ich jetzt da reinklicke, dann macht euch gefasst auf Regenbogen, weil es ist tatsächlich möglich, nicht nur in einer Farbe einzufärben, sondern tatsächlich mit einer CSS Animation, hier mit einer Keyframe Animation einfach durch verschiedene Farben durchzurotieren, in dem Fall einfach so, und genau, die Übergänge werden vom Brauser gemacht und es blinkt halt so, ich glaube irgendwo habe ich noch die Zeit angegeben, noch 0,5 Sekunden und das infinite, das heißt es rotiert immer weiter und der Cursor blinkt jetzt sehr, sehr bunt und ich glaube man kann es aber, man kann es auch ganz gut sehen. Standardmäßig ist der aber immer nur ein Pixel dünn und ich kann das auch nicht irgendwie, ich kann da keine Width setzen oder so und dann, irgendjemand hat uns vorhin ich glaube du warst das, aber dann probier doch mal das Ganze mit einem Transform hoch zu skalieren und das war tatsächlich die wir haben hier Transform Scale 8 in dem Fall, also wirklich achtfache Vergrößerung von diesem Eingabefeld also mit Zoom hat es nicht funktioniert mit Font Size hat es nicht funktioniert aber mit Transform Scale hat es funktioniert und jetzt ist das Ding tatsächlich auch relativ breites, natürlich nur für Demo-Zwecke jetzt so groß aber Degenbogen Cursor auf eurer Seite ab morgen. Also das sind natürlich jetzt Kleinigkeiten die wir vorstellen ist natürlich alles immer viel gespiele und nicht unbedingt für den Alltagseinsatz gedacht aber es ist halt wir kommen an den Punkt wo wir kaum noch Elemente haben die vom Browser vorgegeben oder aus dem System UI kommen sondern wir können alles beeinflussen ob das jetzt unbedingt gut ist oder schlecht kann man sich darü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 Layout Funktionalitäten in CSS endlich alles möglich wird und früher gab es nicht mal abgerundete Ecken wie man sie jetzt hier sieht und jetzt kommt halt an Implementierung wenn nichts mehr Großbahnen brechen, das geht halt in die Details und ich kann jetzt halt die Caratfarbe da ändern und ich kann Selects ändern und so weiter also ich finde das nicht schlecht also man kann einfach aus vieles wissen das auch noch gar nicht und man kann aber irgendwie auf einer Seite vielleicht dadurch hervorstechen wenn man die Textkürser auch zu der Farbe passt jetzt nicht unbedingt grundblinkt aber dass er halt von der Farbe her passt und das meines Rollbars irgendwie schickert ich glaube den meisten Fällen sollte man die Finger davon lassen wenn man es gut macht, kann man es durchaus benutzen ich bin da auch sehr gespalten ob man das tun sollte oder nicht oder ob man so wirklich diese Möglichkeit da bin ich mir echt nie sicher ob es eine gute Idee ist aber keine Ahnung, vielleicht gibt es ja gute Anwendungsfälle mir fällt jetzt außerdem hier keiner ein aber ja, weil meistens der Browser eigentlich ganz gut weiß wenn man die Farbe von einem Element kennt wo ein Kürser drin blinkt, dann weiß er auch ganz gut in was für eine Farbe der Kürser sein sollte um dann ausreichenden Kontrast zu bieten das ist ja wichtig gut, dann? ja, ich habe gerade schon angesprochen eine der letzten Bastionen im Formularbereich war immer der Auswahl-Button das High Auswählen also Import Type File und da haben wir in der Folge mit Manuel Matusowicz der ja auch schon sehr lange im Game dabei ist, habe ich festgestellt dass wir das alle drei nicht kannten obwohl das schon irgendwie seit 8 Jahren oder so funktioniert und man sieht das auch ganz oft auf Formularen auf Seiten in freier Wildbahn die sind irgendwie schön gestylt und alles ist irgendwie schön in Cifarbe aber diese Upload-Geschichten die sehen entweder sind sie komplett ersetzt durch so ein File Picker mit mit ich kann Drag & Drop benutzen oder sie sind halt einfach hässlich grau und man kann das mit so einer Button als Pseudo-Element kann man das tatsächlich steilen und kann es dann ganz normal background color Padding, Border, Margin und so weiter den Button steilen und das wussten wir alle drei die wir da saßen und das schon lange machen wussten wir das nicht kannte das schon jemand, wusste das jemand das hätte es sein ja, meistens 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 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 runter wenn ich da drauf drücke dann sehe ich tatsächlich auch also ich kann auch unten draufklicken auf den Text, jeder Browser macht es anders also bei mich auch um alles froh wie man das Ding irgendwie steilen kann okay, so, wir haben gerade angezeigt bekommen wir haben noch fünf Minuten müssen wir uns jetzt beallen wir haben noch ja, du hast wir haben noch eine Rubrik und das Ende ich glaube da kommen wir schon ich glaube auch mal gar nichts mehr okay, Musik machen wir nicht mehr okay, alles klar, gut, hätte ich jetzt gesagt was haben wir denn noch dann kommt jetzt Moment normalerweise wird beim Dringel mitgesungen hier vorne sehr schön immer, wir müssen vielleicht im Livestream diese Jingle vielleicht auch mal wir brauchen Rückkanal, ihr müsst alle parallel auch live gehen so das Geilteil seid natürlich ihr ja, ich weiß ich habe tatsächlich ein kleines Geilteil mitgebracht was jetzt ziemlich gut zu den Sachen passt weil wir haben jetzt so ein bisschen gesagt ja, Standards Geilteil ist bei uns immer so ein Ding einer von uns beiden sucht sich irgendwas raus und das muss dann auch gar nichts mit Technik zu tun haben, sondern es kann auch ein Künstler sein Musik, irgendwas aber heute hat es tatsächlich was mitgebracht heute ist es was technisches und zwar eine Initiative auch von Emmanuel Matusowicz wir haben ihn gerade schon angesprochen und zwar die Seite html.dev kennt vielleicht der ein oder andere da werden so ein bisschen Negativbeispiele gesammelt die man html nicht verwenden soll da geht es meistens um barrierefreies html aber auch semanisches html die man mit html nativ hat aber oft sieht man trotzdem dann irgendwie so die diffsuppe, also wird irgendwie nur das diff Element verwendet und dann javascript drauf geworfen und in den meisten Fällen ist das keine gute Idee also da, ich hab fast noch nie gesehen dass jemand zum Beispiel in select mit javascript vernünftig nachimplementiert hat weil es wird immer irgendwas vergessen irgendwie irgendeine Tastaturkombination die damit verwendet kannst du die escape-Taste waswertig, es gibt so viele Sachen die da standardmäßig drin sind und bei html werden so Negativbeispiele gepostet aber es ist nicht nur Negativ also ihr habt da oben auch gesehen da gibt es auch den html heaven aber bei jedem Beispiel was hier zum Beispiel Button Displeflex Roll Button also Roll Button auf dem Button der ist schon Button, weiß ich jetzt weiß vielleicht nicht jeder, es gibt auch immer ein Tipp wie man das dann löst und ich finde es ist eine super Seite ich mag das sehr gerne da auf jeden Fall mal ab und zu die Beispiele reingucken da kommt nicht so extrem oft was Neues dazu wie ihr seht ihr hier gerade 18 der Juli es sind 32 Beispiele die Alten sind auch schon ganz gut und sehr aufschlussreich genau also wenn man jetzt hier nochmal eins anguckt hier Link, Aria Label warum, warum hast du nicht einfach ein Link Text es ergibt irgendwie keinen Sinn aber es ist halt schön, dass nicht mal gemäckert wird und irgendwie so Fingerzeig sondern dass man eben auch sieht wie macht man es dann richtig und gerade so für Einsteiger ist es ja dann auch sehr schön zu sehen wie man es dann richtig machen kann und wie man es beeilen also dann zeigen wir noch kurz unsere Seite da dürft ihr gerne mal draufgehen wo wir es in des fauna.show oder www.sv.de dann schon umgleitet kürzer zum tippen ihr könnt ja gerne mal draufgehen wir streamen regelmäßig auf Twitch wie wir vorhin schon gesagt haben wir machen Podcast den könnt ihr ganz normal abonnieren per rssfeed in eurem Podcatcher findet ihr den hoffentlich auch einfach so dann könnt ihr auch jetzt mal kurz abscannen wer will würde ich jetzt einfach mal so stehen lassen und damit kommen wir so das endet ja ich schäme mich da immer selbst wenn die immer... dieser Jiggle stammt aus einer Zeit in der wir noch keine Jiggle hatten und alle selber eingesungen haben und dann haben wir konstantin irgendwann mal gemeint jetzt schneiden wir mal einen zusammen aus den Sachen die wir da irgendwie gemacht haben ich bin schon zupf vielleicht brauchen wir neun normalerweise wenn wir einen Gast eine Gäste haben dann hat der die Gäste das letzte Wort und da wir heute bei euch zu Gast sind habt ihr das letzte, weil ich sehe jetzt bis 3 und dann darf einfach jeder ein Wort sagen 1, 2, 3 mega sehr schön das war's, dann vielen Dank fürs zuhören und zu schauen machts gut