Wo wir sind, ist vorne, Folge 39. Heute gibt's zwei Properties zum Preis von einer.
Herzlich willkommen bei Wo wir sind, ist vorne. Frontend-Fakten-Frotzelein.
Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.
Hallo, schön, dass ihr uns wieder zuhört.
Herzlich willkommen.
Hi, Konstantin.
Wir versuchen es heute mal wieder mit einer kurzen Folge.
Das klappt ja immer sehr gut.
Das hat ja immer sehr gut funktioniert.
Aber wir haben tatsächlich wieder kein Tagesthema heute, sondern zwei Properties, wie von eben angekündigt.
Oh, wir brauchen einen Sound.
Genau, das ist heute der Plan und wir gucken mal, wie lange wir es dann noch schaffen, das hinaus zu zögern.
Ja, es gibt ja auch noch einen Geilteil.
Ja, also meine Property, ja.
Du hast viel gearbeitet, ne?
Du hast viel, habe ich schon gesehen.
Die Liste ist voll.
Dafür habe ich heute ein bisschen weniger.
Mal gucken.
Vielleicht ist es dann am Ende doch ein getarntes Tagesthema.
Man weiß es noch nicht so genau.
Dann lass uns doch direkt zu unserer typischen Bierfrage kommen.
Ich habe nämlich heute was von dir heute.
Es ist auch eiskalt in einer hier für eine Dose.
Muss mal gucken, dass die nicht ablaufen.
Ja, ja, ich habe schon geguckt.
Die sind alle noch haltbar, auch noch eine Weile.
Okay, sehr gut.
Das hat Moritz mir mitgebracht von seinen belgischen Bierausflügen.
Und ich habe da nichts mehr, ne?
Belgien ist mittlerweile leer bei mir.
Okay, ja, bei mir ist Belgien noch voll.
Ich habe ja noch genug anderes aufzubrauchen gehabt.
Jetzt habe ich aber angefangen.
Jetzt habe ich alles eingekühlt und jetzt probiere ich mich durch Moritz' Belgienbier.
Und ich habe dieses, das du auch hier schon probiert hast, glaube ich, Mexicanos, Tequila-flavored Bier.
Genau.
Erwarte, es wird süß.
Süß, okay, okay.
Es ist schon eher süßlich.
Und guck mal auf die Zutaten.
5,9 Prozent.
Und das ist, ach ja genau, du hast ja bei belgischem Bier festgestellt, dass da immer irgendwie ...
Das ist definitiv gemischt.
Bei dem, wie es schmeckt auch schon.
Ich weiß noch genau, wie es schmeckt.
Es hält Gerstenmalz, aber die ...
Es ist wie ein süßeres Desperados.
Das ist der Vesca Especial.
Ich finde gar keine Zutaten.
Also es ist Bier und Tequila.
Da ist einfach nichts drin.
Vakuum.
Na gut, ich bin sehr gespannt jedenfalls.
Was hast du denn?
Ich hab ein Chiemseher Hell.
So mit ...
Ah, ja.
Ah, hatte ich das nicht auch schon mal hier sogar?
Das kann sein, das weiß ich nicht.
Wir haben leider noch keine fangepflegte Bierliste.
Ja, stimmt, wir bräuchten so eine Bierliste.
Wer das machen möchte, wer jetzt gerade eh am Durchhören ist, irgendjemand hat erstens gemeint, er hört jetzt gerade erst alle Folgen gewirken durch.
Schreib dir doch gerne mal die Biere zusammen, wenn du die Muße dazu hast.
Genau, falls das jemand macht, irgendwo, sag uns Bescheid und wir machen dann auch einen schönen Weiterleitungslink von unserer Seite aus dahin, dass man das dann finden kann.
Wir könnten Bierrating dann noch machen, aber egal.
Genau, also, ja, wenn jemand Bock hat, eine Bierliste zu machen, wir sind offen für Listen.
Wir mögen einfach Listen.
Wir haben ja auch ganz viele Chattisten.
Okay, gut, ich glaube, du kannst gut ASMR machen heute.
Anstoßen ist nicht so gut, aber das Öffnen ist dafür gut.
Ja, Anstoßen funktioniert aber immer.
Ja, das kannst du ja durchs ...
Wir müssen ja erst öffnen.
Genau, also wir machen mal auf.
Genau, fangen wir an.
Ah.
Ja, klang gut.
So, ich habe jetzt hier wieder einen klassischen Verschluss.
Moment.
Es riecht schon wie Limo eigentlich.
Es klang gerade ein bisschen, als ob was rausgetropft wäre und es war auch so.
Okay.
Bei mir.
So, dann durch unser magisches Portal.
Ja, okay.
So.
Das klang gut für eine Blechdose, ja.
Ja, Wahnsinn, gell.
Kann ich empfehlen.
Super.
Die Dosen aus Belgien, die klingen sehr gut, wenn man anstoßen.
Ja, dann zum Wohl.
Oh ja.
Doch sehr süß.
Also, es ist tatsächlich wie Limonade und es schmeckt auch ... Es schmeckt nicht nach Tequila.
Vielleicht habe ich zu lange keine Tequila mehr getrunken, aber es ist einfach ... Es schmeckt wie ein Radler.
Ja, das stimmt.
Aber wenn was nicht nach Tequila schmeckt, ist das eigentlich gut, finde ich.
Okay.
Ich finde, es ist ein Qualitätsmerkmal.
Ja.
Dann können wir eigentlich direkt loslegen, oder?
Ach so.
Oder hast du noch ...
Ach, du hast da noch was aufgeschrieben.
Ich habe noch was aufgeschrieben gerade.
Ich habe aufgeschrieben, Podcast Koschlos.
Koschlos.
Und zwar, weil der Konstantin gerade geschrieben hat, ähm ...
Ja, geschrieben hat, im Info gesagt hat, hier zwei Properties zum Preis von einer.
Habe ich mich gerade gefragt, ja, was kostet denn dann überhaupt irgendwas?
Null durch zwei.
Ja.
Super.
Okay, spendet doch uns mal was.
Das wäre doch irgendwie schön.
Gut.
Hätten wir uns auch wieder untergebracht.
Ja, ich habe gedacht das vielleicht.
Ja, klar.
Kommen wir das mal irgendwie hin.
Ich habe es auch, witzigerweise auch gedacht, als ich das mir überlegt habe.
Ja, Null durch zwei.
Gut.
Als ob die sonst was kosten würden, Mensch.
Podcast.
Ja, nur die Premium-Podcast.
Nein, nein, Properties.
Ach, die Properties.
Unsere Properties.
Die sind ja immer kostenlos.
Richtig.
Egal wie viel.
So wie alles.
Hier bei uns.
So.
Gut.
Kostenlos, aber nicht umsonst.
Richtig.
TVS-EV präsentiert die Retrospektive.
Jo.
Wie fange ich denn da jetzt an?
Ich weiß nicht, wie viele von euch denn auch in größeren Firmen arbeiten und das gleiche
Problem haben, dass man dann manchmal das Gefühl hat, man arbeitet gar nichts mehr und man sitzt
nur noch in Meetings und quatscht oder redet halt über irgendwelche Sachen und das ist
ja auch wichtig.
Es ist auch wichtig irgendwie, dass man redet, weil sonst kommt man irgendwie nicht voran.
Man will ja auch irgendwie Dinge geplant machen und nicht einfach nur im Blindflug und irgendwie
nur so lustgetrieben, sage ich mal.
Man möchte ja schon irgendwie auch in die gleiche Richtung gehen.
Aber es ist dann oft so, dass man dann am Ende wirklich das Gefühl hat, ich habe jetzt
irgendwie gar nichts geschafft die Woche, weil irgendwie zwischen den Meetings war irgendwie
immer eine Stunde Platz und da kriegt man halt dann auch keinen vernünftigen Code mehr
geschrieben.
Also mir fällt es extrem schwer, mich dann, wie soll ich sagen, meine Rüstzeiten sind lang
und ich glaube, da geht es vielen anderen auch so.
Und um dem entgegenzuwirken, haben wir jetzt mal was ausprobiert bei uns und zwar haben
wir jetzt gesagt, wir machen eine Fokus-Woche, wo wir alle Termine außer die nötigen, die
wir dafür brauchen, also unser Daily, das hatten wir immer noch, also jeden Tag so eine Viertelstunde
Status-Update.
Alle anderen Termine haben wir, soweit es ging, abgesagt und haben gesagt, wir fokussieren
uns jetzt nur auf das Thema, das wir uns für diese Woche vorgenommen haben und in diesem Fall
war das Bugs fixen.
Wir haben unser Bug-Backlog mal durchpriorisiert und angeschaut und geschaut, wie groß sind
denn die Tickets und dann haben wir versucht, möglichst viele zu schließen und deswegen
haben wir halt auch die kleinen, das sind gerade so die nervigen kleinen Bugs, die oft nie
gemacht werden, die sind wir jetzt mal angegangen und das war eine super coole Woche und ich
wollte es einfach nur mal so, vielleicht so als Dialog auch, wenn ihr irgendwie sowas auch
schon mal gemacht habt oder nehmt es doch vielleicht mal mit.
Ich fand, es war wahnsinnig cool, mal wieder den Fokus irgendwie aufs Programmieren zu richten
und diese ganzen Meetings abzusagen, so als Experiment mal eine Woche und es hat super funktioniert.
Ist überall so gut angekommen im ganzen Team?
Das ist eine gute Frage, ich habe nicht mit allen gesprochen, wir machen dazu eine Retro
am Montag, also da werden wir dann darüber sprechen, aber die Zahl der Tickets, die wir
durchgeballert haben, die spricht auch für sich.
Also normalerweise, ich kann es jetzt nicht so genau sagen, haben wir pro Woche, weiß
ich nicht, es kommt drauf an, so maximal ein bis zwei Tickets, die pro Person abgearbeitet
werden.
Je nachdem, wie viele große dabei sind, dauert es auch weniger.
Also es sind auch manchmal nicht eins.
Also dass eins mehr länger als eine Woche dauert oder so.
Und wir haben jetzt gut, ich muss dazu sagen, es waren halt alles lauter kleine, recht überschaubare
Sachen und wir haben, keine Ahnung, sieben, acht oder so pro Person, so eins nach dem anderen
durch.
Ich weiß jetzt nicht genau die genaue Zahl, ich will jetzt auch niemandem auf die Füße
treten oder so.
Konntest du denn, bist du nur da?
Ich bin doch da, ja, ich hör dir zu.
Das Bild sah sehr eingefroren aus.
Genau, das war echt cool und da bin ich mal wieder so ein bisschen zurückgekommen, richtig
zum Programmieren mit wenig Terminen zwischendrin.
Wir haben das auch schon vorher lang geplant, sodass man sich die ganze Woche geblockt hat.
Dass da auch keine anderen Termine reinkommen.
Und das war echt gut.
Und ich glaube, das ist ein Problem, was du eigentlich so gut wie nie, ich weiß nicht,
hast du das Problem, dass du oft unterbrochen wirst, jetzt bei der Corona-Wahn-App öfter,
oder?
Ja, ja, durch Support-Anfragen halt und so.
Aber da wir ja jetzt gesagt haben, wir machen keinen Telefonsupport, ist das jetzt deutlich
besser geworden.
Ansonsten, ja, es kommt halt schon immer mal wieder ein Kunde, der dies und das will
und man springt dann zwischen Projekten hin und her.
Aber also im Vergleich zu, als ich als Freelancer noch in einem großen Unternehmen war, eher
weniger.
Ja, und das ist ... Also, ich weiß nicht, ich bin mal gespannt, was meine Kollegen
sagen.
Ich habe mich mit Zweien unterhalten, die fanden es, glaube ich, auch gut.
Fand ich jetzt irgendwie eine interessante Geschichte, habe ich mir überlegt, ob man das
irgendwie regelmäßig mal, ob man das irgendwie schafft, das in einem normalen Prozess zu überführen,
dass es sowas immer mal wieder gibt.
Und dann kann man sich auch andere Themen vornehmen.
Ich habe halt überlegt, man könnte auch noch eine Fokus-Woche zu Performance machen, jetzt
wo wir Bugs gemacht haben, wo wir sagen, jetzt gucken wir mal, dass wir jetzt alles richtig
schnell machen oder schneller machen und keine Ahnung.
Also ich meine, je nachdem, wie krass das ist im Team, wäre ja schon so ein Fokus-Tag
mal wünschenswert, dass wirklich mal wenigstens ein Tag ohne Meetings ist, oder?
Ja, vielleicht könnte man das ja auch so ein bisschen einschleichen, dass man wenigstens
mal einen Tag irgendwie in der Woche fix macht.
Ja, das ist sehr schwer.
Das ist sehr schwer.
Also eher dann doch eine ganze Woche, dass man das dann hinkriegt?
Ich, ja, weil das ist dann, wie soll ich denn sagen, Leute buchen einem ganz gern da in
die freien Slots halt was rein.
Du musst im Prinzip eigentlich überall Blocker reinmachen.
Und dann am Ende hast du deinen kompletten Terminkalender voll, was auch irgendwie so ein psychologischer,
Ding ist, auch wenn er quasi, auch wenn er voll ist für nix quasi.
Aber ja, keine Ahnung.
Ja, vielleicht, vielleicht ist es aber auch eine Idee, dass man, dass man versucht, das
so mit rein zu, zu flicken.
Ich denke aber, dass man, dass man sowas, man könnte vielleicht sagen, sowas gibt es einmal
im Monat oder alle zwei Monate einmal, man muss es vielleicht gar nicht so regelmäßig
machen, aber also nicht, nicht jetzt ständig, aber ich fand es jetzt echt gut, das mal
ausprobieren.
Für mich war das eine super Geschichte und mich würde interessieren, ob ihr das Problem auch
habt und wie ihr das löst, falls ihr noch andere Lösungen dafür habt für, ich sitze
so viel in Meetings und irgendwie komme ich zu nix und komme so schwer rein und dann habe
ich irgendwie nur zwei Stunden dazwischen Zeit und da kann ich das Projekt gerade mal auschecken
und irgendwie nochmal bauen und dann muss ich wieder ins nächste Meeting.
Würde mich, wäre ich sehr an euren Ideen und Lösungen interessiert.
Oder natürlich auch gerne, ja, hier ist auch so, würde mich auch interessieren, gerne in die
Kommentare oder bei Twitter mal melden.
Genau, das war mein erster Retro-Punkt.
Gut, dann komme ich zu einem Punkt, wo du schon befreundet, als du es gesehen hast, gesagt hast,
oh, wird vielleicht gar nicht so entspannt heute.
Aber es ist, ich wurde da jetzt nochmal drauf angesprochen und auch im Stream wurde letzte
Woche nachgefragt.
Da habe ich dann gesagt, oh, nee, da habe ich jetzt gar keine Nerven zu, drauf zu reagieren
oder noch was dazu zu sagen.
Es geht um diese T-Systems Corona-Warn-App-Anbindung.
Ja, und was soll ich sagen, jetzt rede ich notgedrungenerweise trotzdem nochmal drüber
und mache es aber hoffentlich kurz.
Wir haben tatsächlich, hat man sich erbarmt, uns eine Antwort zu geben, wirklich mal von
einem richtigen Menschen und mit richtigem Inhalt, der auch tatsächlich auf unsere Fragen
einging.
Das war ja schon mal toll.
Und ich tue mich ein bisschen schwer, ich tänze jetzt ein bisschen drum rum.
Ich möchte den exakten Inhalt dann nicht preisgeben, weil ich nicht weiß, ob ich das
überhaupt so darf.
Und dann, ja, nee, schnell das Nächste, mit was ich es rechtfertigen wollte, kann ich
jetzt gar nicht genau sagen, weil ich damit vielleicht was lostrete.
Aber im Endeffekt, wie formuliere ich es vorsichtig, online klingt das alles total tutti.
Hier so, jeder, der interessiert ist, kann da Anbieter und Drittsoftware-Nutzer und so
und einfach hier hinwenden und so.
Und das ist aber halt einfach nicht so, sondern da stehen andere Interessen im Vordergrund.
Das habe ich mir schon gedacht.
Ohne ins Detail zu gehen.
Das kannst du mir ja im Nachgang mal noch ein bisschen erzählen.
Und ich habe da, ach ja genau, das kann ich noch vielleicht parallel schnell raussuchen.
Da ging es nämlich um, ah, das finde ich wahrscheinlich jetzt auch die Schnelle.
Ich habe mir das schon gedacht, ich habe mir das schon gedacht, dass da andere Interessen
eine Rolle spielen.
Ja, auf Twitter hat jemand, es ging um den E-Personalausweis, um diese E-Funktion, ja, und
dass dir ja irgendwie kaum angeboten wird, obwohl du damit ja wirklich Behördenkommissionen
und so was vereinfachen könntest.
Ja, und warum nutzt das keiner?
Da braucht man ein bestimmtes Zertifikat.
Und dafür ist halt wiederum eine bestimmte Stelle zuständig.
Und die machen es einem so schwer wie möglich, es nur irgendwie geht quasi und verdienen
da auch noch mit dran, um da was, damit man das eben dann bekommt, ja, dieses Zertifikat.
Also es ist ein sehr komplexer Prozess.
Und da meinte dann jemand dazu, das ist wieder so typisch, Prozesse, die eigentlich total
straightforward laufen sollten und wo es eigentlich einfach offene Server dafür geben sollte.
Die werden total verkompliziert und es muss immer einen Gatekeeper geben, der daran verdient.
Und da habe ich nur gedacht, ja, exakt, das passt zu dieser Situation mit der CWA-Anbindung.
Und das Ende vom Lied ist, dass wir es im Endeffekt jetzt aufgegeben haben, dass wir im Endeffekt
das Feature einfach nicht mehr, dass wir das nicht mehr anbieten können, obwohl es technisch
einwandfrei funktioniert.
Witzigerweise kommen trotzdem manche Leute noch in diesen Prozess rein.
Also es ist so ein bisschen so ein Glücksspiel, ob die sagen, jo, kriegst du einen Zugang
zu der API oder nicht.
Und wenn nicht, dann verwende doch unser tolles Online-Portal statt der Schnittstelle.
Ja, und das ist der Stand und ich habe auch gar keinen Bock mehr.
Und ja, eigentlich müsste man das alles an die große Glocke hängen und ein bisschen eskalieren.
Aber die Kraft dazu und die Lust dazu, die habe ich momentan nicht.
Hm, aber ich hätte, lass uns da im Nachgang nochmal drüber sprechen.
Vielleicht habe ich eine Idee.
Alles klar.
Vielleicht habe ich eine Idee.
Wir gucken mal.
Ich habe ja, ich sage es mal so, auf Konferenzen lernt man oft interessante Leute kennen.
Vielleicht hätte ich da was für dich.
Okay, okay.
Wir gucken mal.
Vielleicht wird ja doch noch was, passiert ja doch noch was.
Dann halten wir euch natürlich auf dem Lauf.
Und bei ein paar Leuten von T-Systems, da gehen jetzt schon die Alarmglocken los, die das
jetzt anlegen.
Oh Gott, oh Gott, was passiert da jetzt?
Ich kann euch sagen, zu Recht.
Genau, ihr kriegen wieder Ärger.
So.
Okay.
Jo, ja, ja, mir.
Wenn ich jetzt richtig anfange, dann, ey, das ist heute nicht.
Nee.
Keine Motivation dazu.
Gut.
Okay, gut.
Ich habe noch einen zweiten Punkt.
Ich denke, bei vielen anderen wird es wahrscheinlich jetzt ähnlich laufen.
Wie soll ich sagen?
Die Homeoffice-Pflicht läuft aus.
Und viele Leute sollen dann wieder zurück ins Büro, habe ich gehört.
Und wie soll ich sagen?
Also, ich glaube, ich habe das schon an vielen Stellen online gelebt.
gelesen, wo Leute dann irgendwie sagen, was ihre, was ihre Firmen so darüber schreiben
oder sagen oder wie die jetzt verargumentieren, dass man doch jetzt unbedingt zurück ins
Büro muss.
Und die Argumentationen dahinter, die sind selten wirklich stichhaltig.
Das ist halt, das ist immer nur so, ja, wir, oder das ist so die Aussage, wir als Unternehmen
funktionieren halt so.
Oder sowas wie im Büro arbeiten wir alle viel besser zusammen.
Solche Sachen.
Das klingt ein bisschen nach, das haben wir schon immer so gemacht.
Völlig haltloser Kram, der überhaupt sich durch nichts belegen lässt.
Ja.
Im Gegenteil, bei den meisten, die ich kenne, mit denen ich so zu tun habe oder mit denen
ich gesprochen habe, die sagen, hey, das hat doch total gut funktioniert jetzt irgendwie
in der Corona-Zeit.
Und ich hatte da so ein Bild im Kopf und das wollte ich nur gerade noch loswerden, weil
ein bisschen erinnerte mich, dass dieses Gebetsmühlenartige Wiederholen dieser Aussage, ja, wir
müssen jetzt aber wieder, jetzt muss man wieder Normalität einkehren, wir müssen jetzt wieder
zurück ins Büro.
So ohne Sinn und Verstand an Get Brexit Done.
Das war ja irgendwie so eine Kampagne, wo man dann irgendwie so das Gefühl hatte, die englischen
Politiker, die das da irgendwie auf die Straße bringen wollten, das war ja irgendwie so fast
so ein Schlachtruf, Get Brexit Done, wir müssen jetzt Brexit Done getten, das muss jetzt gemacht
werden.
Ja, es ist total bescheuert, aber es ist jetzt durch und deswegen müssen wir es jetzt auch
durchziehen.
Jetzt müssen wir es machen.
Wir müssen das machen.
Wir müssen es machen.
Ist es überhaupt sinnvoll?
Wollen wir das überhaupt noch?
Hilft uns das bei irgendwas?
Egal.
Wir müssen es machen.
Und da musste ich so dran denken, ich war kurz davor, Memes in die Richtung zu erstellen
und hab's dann gelassen.
Aber diese ganze Geschichte, die da jetzt irgendwie so abläuft, und ich glaube, das ist bestimmt
an vielen Stellen, jetzt wird jetzt wahrscheinlich diese Diskussion losgetreten werden, weil jetzt
die Homeoffice-Pflicht, die offizielle fällt, dieses Wieso eigentlich und die Diskussionen
werden wahrscheinlich oft so laufen mit, nein, das Get Brexit Done.
Aber ist jetzt, Brexit ist zum Glück ja, was heißt zum Glück?
Es ist jetzt durch, da muss jetzt keiner mehr sagen, wir müssen es jetzt machen.
Sie merken, sie haben es jetzt gemacht und merken jetzt, dass es blöd war.
Ja.
Es ist halt einfach schade.
Man dachte irgendwie so, am Anfang der Pandemie und so, als das dann sich so doch ein bisschen
eingependelt hatte, so, hey, es geht ja plötzlich doch und viele Leute wollten das vorher und es
war halt irgendwie Policy, dass das einfach kategorisch verneint wird mit dem Homeoffice.
Und da dachte man dann irgendwie so, hey, das könnte jetzt echt so einen Wandel geben, schade,
dass es dafür eine Pandemie gebraucht hat.
Und andererseits dachte ich, dass mit dem Homeschooling dann auch, wo man dann gemerkt hat, okay,
nee, das funktioniert in Deutschland einfach nicht, in anderen Ländern funktioniert es komischerweise,
aber hier wird einfach gesagt, dass dieses Konzept Homeschooling an sich nicht funktionieren würde,
Aber es wird halt nicht gesagt, ja, es liegt an uns oder an unserer unvorbereiteten Vorbereitung
und an unserer nicht vorhandenen digitalen Infrastruktur und so.
Und dementsprechend zeichnet sich jetzt auch schon ab, dass das mit dem Homeoffice zumindest
vielerorts wohl auch nicht ist.
Also ich glaube, es hat sich schon so ein bisschen das Mindset geändert.
Es hat sich schon geändert.
Also dass du dann auch in Stellenausschreibungen das jetzt häufiger liest, das Wort irgendwie
100% Remote und so.
Also es hat sich schon viel geändert.
Da hat sich schon was getan, aber ich glaube so gerade so die großen Firmen, wo sich
die Mühle langsam bewegen, ja gut, okay.
SAP, die haben jetzt Full Homeoffice für immer, haben sie gesagt.
Cool.
Und das haben die letztes Jahr irgendwann, glaube ich, schon festgelegt.
Also man darf vielleicht halt auch einfach nicht erwarten, dass sich eine komplette Industrie
da oder einfach die komplette Wirtschaft dahingehend umorientiert fällt, ist das auch einfach
zu viel erwartet.
Aber es ist ja schön, wenn es wenigstens an manchen Stellen funktioniert hat.
Ich sage es mal so, der Markt wird es regeln am Ende.
Ganz genau.
Ich glaube, viel mehr Worte muss man dazu nicht verlieren.
Der Markt wird es regeln und der Markt verändert sich gerade.
Ich bin ja sonst nicht so liberal, aber in dem Fall der Markt wird es regeln.
Und der Markt wird es regeln und noch ein schönes Zitat von einer Kollegin von mir, habe
ich glaube ich auch schon mal gesagt hier im Podcast, wer nicht mit der Zeit geht, geht
mit der Zeit.
Ja.
In diesem Sinne können wir das abschließen.
Richtig.
Und macht daraus, was ihr wollt.
Dann kommt jetzt schon nach 20 Minuten nicht mal unser.
Und unser Tagesthema ist heute die Property der Woche.
So, wir haben Jingles, also lass sie uns auch benutzen.
Wie angekündigt, wir haben das ja, dann haben wir es beim nächsten Mal gleich nicht
gemacht.
Wie angekündigt, sind wir ein bisschen klamm mit der Zeit in der Vorbereitung und wollen
jetzt mehr Properties machen und keine so riesigen Themen mehr.
Aber wer weiß, vielleicht wird es doch groß.
Wir haben heute dann zwei Properties vorbereitet wieder, ich eine, der Konstantin eine.
Genau.
Und dann kommt gleich der Jingle nochmal, wenn ich ehrlich bin.
Ich bin sehr gespannt, was du uns präsentierst.
Ja, meine Property der Woche ist was, was gerade so ein bisschen Hypetrain-mäßig durch
Twitter gejagt wird, aber auch schon mal wurde.
Nämlich Select Menu.
Select Menu ist ein HTML-Element, ein neues, das gerade in der Standardisierungsphase ist.
In Chrome, im aktuellen Chrome kann man es schon ausprobieren, wenn man die, Moment,
habe ich das nicht mehr offen?
Ich habe es natürlich, genau, wenn man es in den Flags, das anschaltet und zwar, Moment,
jetzt, ich muss das nochmal kurz eingeben, damit ich es euch genau sagen kann, wie es heißt.
Also bei mir im Brave-Browser ist das, werden die Flags ja eingestellt unter Brave-Doppelpunkt,
Doppel-Slash-Flags, unter Chrome wäre Chrome-Doppelpunkt-Doppel-Slash-Flags und ich glaube, bei Edge müsste es sein Edge-Doppelpunkt-Doppel-Slash-Flags, also diese Chromium-basierten Browser, bei denen funktioniert das.
Und da muss man die Experimental Web-Plattform-Features anschalten und ich glaube, dann neu starten, da bin ich mir jetzt gerade nicht sicher.
Ich glaube, da muss man neu starten.
Und dann kann man das da schon ausprobieren.
So, aber was ist Select-Menu?
Select-Menu ist im Prinzip Select auf Drogen.
Und zwar nicht nur auf einer, sondern auf allen Drogen, die man sich so vorstellen kann und gleichzeitig noch in einer Achterbahn sitzend.
Ich würde es irgendwie mal so beschreiben.
Bei Select-Boxen, das ist ja so ein schönes Formularelement, da war immer das Problem, dass es weder irgendwie customizable ist, dass man das irgendwie groß anpassen kann in dem, was da reinkommt oder wie das aussieht.
Und halt aber auch generell, das Styling war immer extrem schwierig.
Also in den letzten Jahren wurde es ein bisschen besser mit dem initialen Zustand, das Ding, wo man draufklickt, zu stylen.
Das ging dann irgendwann so halbwegs.
Ja, oft dann aber auch mit so Vendor-Prefixes, dass wir dann irgendwie WebKit, Default, irgendwas oder den Pfeil ausblenden oder sowas.
Aber es ist immer noch nicht sehr schön.
Genau, aber das, was drinnen ist in dem Select, konnte man nicht stylen.
Und dann gibt es ja auch noch so Ideen, wie Selects an anderen Stellen funktionieren.
So eine Art Combo-Box heißt das dann manchmal.
Das ist dann so ein Select, wo man selbst dann noch filtern kann, indem man reintippt.
Und es gab viele, viele Sachen, die da gebaut wurden, die so drumherum gebaut wurden, um Select, beziehungsweise wo man gerne ein Select gehabt hätte, aber das ja einfach nicht ging vom Feature-Umfang her.
So, und Select-Menu verspricht, diese ganzen Probleme zu lösen.
Was mir da als erste Frage gleich in den Kopf kommt, ich weiß nicht, ob du da eine Antwort drauf hast, aber warum ein neues Element dafür?
Kann ich dir sofort sagen.
Don't break the web.
Ja, aber es geht ja um Styling.
Also wenn ich das richtig gesehen habe, willst du auf den ersten Blick?
Nein, nein.
Nee, es ist nicht nur einfach Select-Option?
Nein, es ist viel mehr.
Okay.
Es ist viel mehr.
Es ist nicht nur Styling, das ganze Ding ist customisable.
Komplett.
Okay.
Ich kann es komplett so zusammenbauen, wie ich will und ich kann da reinpacken, was ich will.
Also vielleicht an der Stelle erstmal erwähnt, es gibt einen schönen CSS-Tricks-Artikel dazu, der kommt in die Shownotes.
Der kam jetzt gerade, das war jetzt der Trigger auch dafür unter anderem.
Danke auch nochmal, warte mal, jetzt muss ich gerade überlegen.
Ich glaube, Danke Svenja, die hat das auch nochmal angesprochen, dass man das doch als, dass man das mal vorstellen könnte.
Genau, also es funktioniert komplett anders und es ist don't break the web.
Das heißt, Selects bleiben nach wie vor so, wie sie sind.
Und Selectbox ist tatsächlich, ist ein Ersatz dafür, der aber viel, viel, viel mächtiger ist.
Wie gesagt, CSS-Tricks-Artikel, genau, kam gestern raus.
Also wir nehmen heute am Freitag auf, also am Donnerstag, den dritten, kam das raus.
Und dann habe ich mir das mal angeschaut.
Das war irgendwie auch so mit so einem Trigger.
Mal angucken, was kann das denn überhaupt?
Und was mache ich dann immer?
Ich habe eine meiner berühmten Demos gebaut, um es kaputt zu spielen.
Weil das versuche ich oft, ich sehe sowas in eine neue Property und gucke dann mal, wie schlimm kann man es denn machen?
Wie bei uns an Scrollbars, ne?
Genau, wie wild kann man es treiben?
Und oftmals stößt man da dann an eine Grenze, wo dann irgendwas kommt, oder ich stoße dann meistens an eine Grenze, wo entweder der Browser abkackt oder irgendwas nicht mehr so funktioniert, wie man es erwarten würde.
Also einer von euch beiden gibt auf, du oder der Browser.
Einer von euch beiden gibt auf und diesmal habe ich aufgegeben.
Oha.
Tatsächlich.
Und ich habe eine Demo gebaut, die ist natürlich wieder nicht besonders hübsch, weil ich halt wirklich schlimme Dinge gemacht habe damit.
Also ich weiß gar nicht genau, sollte ich vielleicht erst mal die Eigenschaften erklären?
Darf ich es schon aufrufen?
Warte mal, die Demo vielleicht mal nicht aufrufen.
Ich wollte noch kurz einwerfen, weil ich gerade das gesehen habe in dem CSI-Strix-Artikel, dass das mal wieder von Microsoft vorangetrieben wird.
Ja.
Und ich hatte das ja auch schon gesagt bei der Subgrid-Geschichte, wo ich dieses Bug-Ticket ja auch verfolge.
Und da sind eigentlich ausschließlich an den Sachen, die sich da tun, von den E-Mail-Adressen immer at microsoft.com.
Also da muss man wirklich mal eine Lanze brechen für das Team von Microsoft, die da, seit die sich in Chromium mit eingeklinkt haben, wirklich, also wirklich elementare Dinge auch mit vorantreiben.
Da wirklich Chapeau.
So, genau.
Und wer das ursprünglich angetriggert hat, den habe ich auch mal auf einer Konferenz getroffen.
Das ist der Greg Whitworth.
Ich glaube, der ist mittlerweile nicht mehr bei Microsoft, der war es damals aber noch.
Und den habe ich bei der JSConf 2018 getroffen, wo es ihm genau darum ging, der hat damals eine Umfrage gemacht dort, was ist denn der größte Painpoint beim Webdesign und bei CSS?
Und da ist er im Speziellen auf Formularelemente.
Damals wurde quasi Groundwork gemacht für, woran müssen wir denn arbeiten?
Und dass das jetzt quasi, naja, so schnell, in Anführungsstrichen, innerhalb von vier Jahren quasi was ist, was man im Browser ausprobieren kann, hätte ich damals nicht gedacht.
Mir natürlich gewünscht, aber hätte ich mir nicht gedacht.
So, Entschuldigung.
Ich darf ja nicht mehr ins Mikrofon rülpsen, sonst kriegen wir Ärger.
So, genau.
Select Menu.
Ich gehe es vielleicht erst mal kurz durch und erkläre mal, was das denn so grob kann und wie das aussieht.
Also man kann Select Menu, das Element, so verwenden, ganz genauso wie Select.
Ich kann das einfach statt Select, Select Menu hinschreiben und dann da Option Elemente reinpacken.
Und dann hat das auch einen Standard Style, sieht genauso aus wie ein Select und dann klappen die da auf.
Und dann kann ich einfach, das zieht genauso aus wie ein Select.
Und ich kann auch damit so Sachen machen, genau die anderen, die Advanced Select Sachen machen, ganz genauso wie mit einem normalen Select.
Also sowas wie Multiple Auswahl oder Opt Groups, wo man dann so noch so eine, ja, wo man einzelne Gruppen definieren kann mit Überschrift.
Ähm, das geht alles damit auch.
Aber, es ist alles komplett stylbar.
Ähm, und ich kann auch mein eigenes Markup bauen und dem dann quasi mit bestimmten Attributen sagen, das hat jetzt diese Rolle.
Das macht jetzt das in diesem Select.
Ähm, ich bin jetzt gerade am überlegen, ob wir da jetzt vielleicht ein Beispiel mal durchgehen.
Ähm, vielleicht, ich guck grad mal, vielleicht nehmen wir mal, fangen wir mal mit dem Styling an.
Also ich hab, ich hab in dem, in der, jetzt kannst du die Demo mal aufmachen.
Juhu.
Ähm, ich hab, äh, ich hab zwei Demos gebaut, beziehungsweise ich hab drei, drei Select Boxen.
Ich hab einmal ...
Ich muss die aber natürlich dann in einem, äh, Chromium öffnen, wo ich das Flag gesetzt hab, ne?
Genau, genau.
So, gut, das hab ich gerade schon nebenher am Machen, jetzt muss ich das einmal neu starten.
Genau, ich, ich, also ich hab da drei, ich hab drei Boxen da drin.
Die erste ist einfach nur plain.
Select Menu, Opt Group mit nem Label, dann sind da zwei Opt Groups drin mit Options.
Ganz plain, nichts, nichts Verrücktes.
Wo ist denn da deine, deine, ach so, Select Menu Madness, ja, da ist ja.
Genau, Select Menu Madness, hab ich's genannt, es ist halt wirklich Madness.
Ich hab, ich hab's nicht geschafft, das Ding kaputt zu spielen.
Ich hab's nicht geschafft, egal, was ich gemacht hab.
Was ich interessant find, ich hab's jetzt grad in dem Standardbrowser geöffnet, wo ich das Flag nicht gesetzt hab, und dass Options, äh, einen Hover haben, auch wenn sie in einem, in einem nicht vorhandenen, in dem Fall Select Menu Tag drin sind.
Naja.
Da hab ich einen Hover-Effekt, interessant.
Gut, also.
Also, das, das oberste ist quasi plain Select Menu, gar nix, kein Style, nichts Verrücktes innen drin.
Ja.
So, ich hab, ähm, dieses ...
Ja, wobei, das ist ein bisschen abgerundet, ist das jetzt bei einem, bei einem normalen ...
Ah, steht's.
Also, ganz, also, ein bisschen anders sieht's aus, aber ich weiß gar nicht, wie hier so ein normales Select aussieht.
Aber, Moment, jetzt muss ich grad mal gucken, ist das, ist das, weil ich das gemacht hab?
Nee, eigentlich nicht.
Aber ich, ich mach hier mal aus dem, aus dem ...
Das ist Standard-Style.
Aber es sieht, es sieht im Prinzip so aus wie eine Selectbox, wie man sie kennt.
Ich mach jetzt grad mal aus dem obersten Select Menu bei mir, äh, Select, nur um das zu gucken, ob das wirklich exakt so aussieht.
Und, äh, nee, es ist tatsächlich ein bisschen anders.
Also, das, was aus, äh, rausfährt, die Liste, die ist tatsächlich abgerundet und das ist bei einem normalen Select nicht.
Also, daran kann man's ein bisschen erkennen. Ich weiß natürlich, ob nicht, ob das jeder Browser, der das so implementiert, dann so machen wird.
Ist auf jeden Fall der Default-Style. Also, ich hab da dran nichts, nichts verändert an dem ersten. Ganz bewusst. Ich wollt einfach so vorher, nachher.
Und die Schriftart ist auch eine andere. Ah, interessant. Also, es gibt ein paar, äh, Unterschiede.
Dann, beim zweiten, hab ich mich auf Styling, äh, fokussiert.
Wow.
Und hab, hab mir überlegt und hab versucht, alles zu stylen, was da so drin ist.
So, und zwar, äh, die Box hat jetzt tatsächlich, ich hab so Width und Height vergeben.
Ähm, ich hab mal Border-Radius vergeben. Ich hab mal eine Font-Size vergeben. Das wirkt, das funktioniert alles.
Ähm, diesen Pfeil, da hab ich, da hab ich nur ganz kurz danach geguckt. Der Pfeil, der jetzt da standardmäßig drin ist, ähm, den kann man, glaub ich, auch noch stylen.
Okay.
Dann kann ...
Die Scrollbar innen drin hättest du noch stylen können, aber die hat natürlich nix direkt mit dem ...
Stimmt, die Scrollbar, die Scrollbar, genau, Scrollbars gibt's da drin auch. Ähm, so, genau.
Also, ich sag mal, es sieht aus, als hätte ein, ähm, als hättet ihr ein Einhorn aufs Bild gekotzt.
Auf dem Bildschirm gekotzt.
Also, ich versuch mal Stück für Stück durchzugehen und versuch das so gut, wie es geht, äh, zu beschreiben.
Also, das Ding ist jetzt, äh, 500 Pixel breit, 60 Pixel hoch, das hab ich angegeben, hat ein Border-Radius von 10 Pixel, das wirkt auch.
Die Font-Size 20 Pixel, äh, das, das stimmt, glaube ich, nicht. Das ist nur die Innere, weil nämlich, dann kommen wir nämlich schon, ähm, zu den Bereichen, da wird's dann interessant.
Wie kann ich jetzt die einzelnen Elemente da innen drin stylen? Nämlich, die haben so eine, die haben so eine neue Art Pseudoklasse, nämlich Doppelpunkt, Doppelpunkt, Part, heißt das.
Und in Klammern steht da dann das Element, was ich, was ich davon stylen möchte. Da gibt's nämlich den Button, Selected Value und die Listbox.
Ich hoffe, ich hab jetzt nix vergessen. Das sind auf jeden Fall die, die ich hier mal gestylt hab. Ähm, genau.
Der Button ist das Element, wo ich drauf drücke, um das zu öffnen.
Ich hab gerade mal dieses Part kurz noch gegoogelt, weil das ja wirklich was Neues ist. Also das ist ein Pseudo-Element, ähm, um ein Element in einem Shadow-Tree zu matchen, das ein passendes Part-Attribute hat.
Also das ist tatsächlich wohl intern ein Shadow-Dom, was da dann, was da genutzt wird.
Ja, korrekt. Ähm, so, dann haben wir, dann haben wir den Button. Der Button ist der Teil, also der Shadow-Tree-Part, auf den man klickt. Also der, der wirklich dann interaktiv wird.
Wenn ich jetzt aber zum Beispiel, das ist übrigens, äh, ganz interessant, oder das sieht man jetzt in dem Beispiel nicht, aber das hab ich gemerkt beim Bauen. Ähm, wenn ich den Button jetzt nicht 100% Höhe und Breite gebe, aber das ist, äh, das Select-Menu eine bestimmte Größe hat, dann ist auch nur der Bereich klickbar, wo der, den der Button ausfüllt.
Und der Rest nicht. Also wenn ich da dann klicke, passiert nix. Das ist jetzt nur deswegen so, weil ich den Button 100% Höhe und Breite gegeben habe, also füllt quasi alles aus von dem, also das ist auf jeden Fall ein interessantes Detail.
Muss man wissen, glaube ich. Ähm, natürlich Background-Color-Peach-Puff, ganz wichtig.
Ähm, genau. Der Button, dem hab ich dann auch nochmal eine eigene Font-Size gegeben, der hat, ähm, auch nochmal Border-Radius. Ich glaube, das war tatsächlich nötig, damit es angezeigt wird, weil der Button vorher, wenn er 100% hatte, hat er darüber hinausgeragt.
Ähm, außerdem müsste, ähm, ah, Overflow-Hidden hätte ich machen können, auf das drumgebende Element, dann hätte das auch geklappt. Ähm, genau. So, ähm, dann gibt es, ähm, Selected Value.
Das ist quasi das Element, das gerade den Fokus hat, innerhalb, äh, von den ausgewählten Elementen, wenn ich's aufklicke. Ähm, und das Ganze, der ganze Bereich innerhalb dem, die ganzen einzelnen Optionen, die ich auswählen kann, drin sind.
Das ist, ähm, die List-Box in dem Fall. Und, äh, die List-Box, die hab ich ziemlich wild gestylt in dem Fall, ähm, die hat jetzt bei mir in dem Fall, äh, die, ne schwarze Hintergrundfarbe, ein Rem-Padding, damit man, ich wollte einfach mal ausprobieren, ob Padding funktioniert, hat ein Border-Radius, sodass ich tatsächlich so sehr, dass ich tatsächlich die, den Inhalt abschneide am Rand, dass man gar nicht mehr richtig lesen kann. Aber ich wollte einfach mal gucken, wollte einfach mal auf die Spitze treiben. Ähm, genau. Und die einzelnen Elemente
innen drin, das hab ich, äh, tatsächlich gemacht mit, äh, wo war das genau? Die ganze, also alle Kind-Elemente, die innen drin sind, haben so ein Rainbow, äh, Background.
Einfach nur mal, um, also,
Ja, ja, um zu gucken, wie sehr, aber es ist das schon ... Ich will gucken, ich will gucken, geht das? Kann ich da jetzt mit Gradients arbeiten? Kann ich da, geht da wirklich alles?
So, das ist aber noch, das ist alles low. Du hast das untere, hast das untere schon aufgeklickt? Nein. Ich hoffe nicht, ich hoffe nicht. Okay, lass die, lass die, lass die, lass die Spannung noch ein bisschen hoch. So, ähm, genau. Also, alles an Styling, was ich ausprobiert hab, hat funktioniert.
Ähm, ah, genau, Moment, stopp, ich hab was falsch gesagt. Selected Value ist nicht, ist nicht, ähm, der, der, der fokussierte Bereich, sondern Selected Value ist das, was ich ausgewählt hab, was dann aber innerhalb des Buttons angezeigt wird.
Das muss ich kurz korrigieren, ja, das war, war ich grad falsch. Das heißt, es gibt auch noch in der Liste, aber wahrscheinlich auch irgendwie die Möglichkeit über, was ist das dann, Selected wahrscheinlich wieder, also Option Selected, äh, Fokus.
Fokus. Es ist tatsächlich Fokus. Ich hab, ich hab grad nochmal nachgeschaut, ich hab's mit Fokus gestylt und das geht. Deswegen sind die nämlich weiß.
Aber gibt's da auch, warte mal, das heißt, wenn ich mit der Tastatur durchtappe, dann sind die, haben die einen weißen Hintergrund und das ist Fokus.
Ähm. Das müsste doch, das Option-Element müsste ja trotzdem Selected gehen, weil ...
Selected ist ja das, das derzeit ausgewählte.
Ja, genau. Das ist aber nicht fokussiert. Das ist aber nicht, das ist noch was anderes als der Fokus. Fokus ist das, was ich gerade auswählen würde, wenn ich dann Enter drücke.
Ja, na gut, das, na, Fokus ist ja, ob das Element den Fokus hat, ne?
Genau.
Und ob das ausgewählt ist, das wird ja irgendwann abgeschickt, also müsste ich ja eigentlich sagen können, aber Option Selected funktioniert jetzt komischerweise nicht, seh ich gerade.
So, also da hab ich mich jetzt nur um Styling gekümmert in dem ersten und dem zweiten hab ich mich drum gekümmert,
was kann denn da alles rein? Weil ursprünglich war, da hab ich da so Demos gekümmert, ja, da kann man jetzt, jetzt kann man endlich, was man schon immer mal machen wollte, den Options zum Beispiel Bilder geben bei, wenn man jetzt, wenn man jetzt ein Select hat, hast du schon aufgeklickt?
Nee, ich hab's noch nicht, okay, mach's erst, wenn ich sage, erst, wenn ich sage, ähm, also, äh, der Klassiker wäre halt, man will jetzt, man hat so ein Language Switcher und möchte Flaggen nebendran einblenden oder so, ja, das war, was man früher immer wollte, keine Ahnung, ob das eine gute Idee ist, wollte man früher immer machen, sowas.
Ähm, also quasi ein Bild, hab ich gedacht, okay, fangen wir mal an mit einem Bild. Bild, kein Problem. Bild hab ich reingemacht, ich hab unser WWS-EV-Logo mal reingepackt.
So, ähm, und dann hab ich mir gedacht, hm, was geht denn noch so? Und dann hab ich wirklich alles ausprobiert, was mir eingefallen ist, an schlimmen Dingen, die man da reinschreiben könnte.
Und es hat alles funktioniert. Alles. Ich beginne mit einem Link. Ein Link da drin, ich klicke drauf, der funktioniert sogar. In einer Option, ein Link, ich klicke drauf, er funktioniert.
Dann hab ich ein SVG reingepackt, ähm, es funktioniert. Dann hab ich diverse HTML, andere HTML-Dinger. Ich hab ne Headline drin, ich hab ne Liste drin, du darfst jetzt draufklicken.
Ja, ich hab schon, ich hab schon, ja.
Ich hab, äh, ein Input, ein Text-Input drin, ich habe ein weiteres Select-Menu drin.
Nee.
Wo ist es denn? Ach, da. Ach, was. Aber man kann es nicht so richtig bedienen, ne?
Man kann es nicht so richtig bedienen, aber es geht.
Okay, ein Date-Input auch, du bist doch...
Ich hab ein Date-Input drin und jetzt kommt, ich habe ein YouTube-Livestream-Video im Bett mit iFrame.
Ich hab erst gedacht, ein Video, und dann dachte ich mir, warte mal, bei iFrame könnte ich gleich...
Und es läuft auch, tatsächlich mit Sound.
Es läuft, es läuft, man kann es anklicken, es läuft tatsächlich.
Dann hab ich nur ein Range-Input, also, und dann hab ich, dann sind mir die Ideen ausgegangen.
Aber man muss alles in ein Option-Ding packen.
Ist das elementar, ne?
Also, es muss immer als direktes Kind-Element eine Option sein, aber da drin bist du dann frei in dem, was du tust.
Geht ein iFrame, hast du das gemacht?
Achso, das Video ist ja ein iFrame.
Ja, das ist ja, das Video ist ein iFrame.
Also, ich kann damit...
Und ich würde behaupten, das wird in der Standardisierungsphase, wird das wahrscheinlich noch etwas beschnitten werden in den Fähigkeiten.
Das kann grad momentan alles.
Alles, alles, alles.
Und ob das eine gute Idee ist, dass man da drin alles machen kann, weiß ich nicht, Digga.
Ja, weiß ich nicht, Digga.
Oh, der Rätsel ist da.
Der Rätsel ist da.
Nee, nee, das ist ein ganz bestimmtes Video, was ich anspiele.
Vielleicht verlinken wir das nochmal mal gucken.
Apropos verlinken, weil du gesagt hast, hier Language Flags reinbauen.
Da hab ich mal einen generellen Artikel gefunden, warum man niemals überhaupt Flaggen als Language Select benutzen sollte.
Da gibt's so ein paar Punkte, die dagegen sprechen. Verlinke ich einfach mal in den Show Notes.
Ja, klar, fällt mir sofort auch was ein, weil, welche Flagge nimmst du denn für Englisch?
Welche nimmst du denn für Deutsch?
Genau das.
Oder Multisprachländer, die halt, ja, also da macht halt die Landesfahne keinen Sinn.
Also könnte ich bei Deutsch jetzt auch die Schweizer Flagge, die mach ich bei Französisch auch hin und bei Italienisch auch.
Ja, genau.
Ich hab auch vorhin schon gesagt, es ist sehr fraglich, ob man's möchte, aber das war früher so ein Ding.
Ja, ja, ich hab das selber auch noch auf manchen Seiten, auf alten Seiten, wo wir es nicht nachträglich geändert haben.
Früher, früher.
Als wir noch unbedarft waren und nichts wussten.
So.
Ich bin jetzt gerade am überlegen.
Ich glaube, ich geh noch ein bisschen auf Demos ein, weil wir jetzt meine Demo hatten.
Geh ich noch ein bisschen auf die offiziellen Demos ein.
Es gibt nämlich eine sehr coole Demos-Seite, wo ich auch erst mal wirklich, wirklich geschluckt hab.
Aber krass, das geht jetzt alles mit so einem Ding.
Es fängt an mit Emojis.
Und das Ding ist der Knaller.
Das hat mich eigentlich dazu gebracht, das muss ich mir angucken, weil ich nicht glauben konnte, dass das jetzt schon im Browser geht.
Ja, Wahnsinn.
Und zwar ist das ein rundes Select mit einem Emoji drin.
Und wenn ich draufdrücke, öffnet sich darunter ein Kreis mit Emojis, die ich tatsächlich, und das kann man auch sofort ausprobieren, mit der Tastatur kann ich durchtappen.
Durchtappen, ja.
Die einzelnen Options, in denen Emojis drin sind, das ist wirklich komplett tastaturbedienbar.
auch, so wie man es eigentlich haben will.
Colorpicker könnte man auch, so mit fertigen Paletten fällt mir da als Beispiel auf.
Ist unten als Beispiel tatsächlich drin.
Ich hab schon direkt einen Bug gefunden, da kommt meine alte Qualitätssicherung.
Lass mich raten, du hast gescrollt.
Ja, wenn du, ne, also das macht es ja automatisch, genau, dass es nach oben oder unten aufgeht, je nachdem wie der, wie der, ähm, Platz verfügbar ist.
Und dann ist das Ding aber so gebaut, dass dieser Kreis da oben, ne, das geht mit so schönen Wundungen.
Und das wissen die auch, das wissen die auch, da steht in der Note, make sure there is enough room below the button to expand for this box, since CSS doesn't handle cases when it is about the button.
Das fände ich jetzt aber noch interessant, mit einer Pseudoklasse genau das abzufangen.
Das kann ja eigentlich so schwierig nicht sein, oder?
Ja.
Also, dass du sagen kannst, irgendwie, wenn, wenn die Position top ist, dann mach diese Rundungen unten hin und wenn dann top, also das fände ich schon nett, wenn die das tatsächlich machen würden.
Da sei vielleicht auch direkt, ähm, also genau, ich wollte nochmal sagen, wer da dran arbeitet, ähm, vielleicht ist das jetzt der richtige Moment, weil wenn du jetzt genau solche Ideen hast, das kann man damit einfließen lassen.
Du kannst bei GitHub, ähm, da einen Kommentar schreiben und sagen, hey, äh, das wäre aber schon wichtig, wenn ihr das noch einbaut und so.
Die haben es offenbar schon gemerkt, ähm, dass das ein Problem ist, ähm, dass man sie nochmal drauf hinweist.
Ja, ähm, nämlich, äh, die Seite, wo gerade ganz viele solche Sachen passieren, ähm, nicht nur Selectmenu, sondern auch andere, ähm, heißt OpenUI.org, Open-UI.org, ähm, und da werden ganz viele solche, ähm, solche Probleme gerade durchgesprochen, wie sollte man die denn lösen und so Vorschläge gemacht, ähm, für so, ähm, bin ich ein Riesenfan von, ähm, Probleme, die man hat und momentan manuell oder zu Fuß löst, dafür einen Webstandard schaffen.
Das ist das, das ist das Ziel von diesem Open-UI. Da ist Microsoft viel hinten dran gerade, ähm, das, da, da tut sich gerade richtig viel. Also da auf jeden Fall, die wollen auf jeden Fall auch Feedback haben.
Okay, das wäre nämlich, glaube ich, schon, also, weil bei dem Nächsten hast du genau das gleiche Problem, da steht auch wieder dabei, das funktioniert nur, wenn's, wenn's, äh, unten drunter erscheint und nicht, wenn's oben drüber erscheint, ähm, deswegen, ja.
Genau. So, genau, also dann, das, das ist relativ, äh, da gibt's, wie so, beim nächsten Beispiel haben sie so eine Art Label oben drüber, das ist eher unspektabel.
Ja, aber da geht's auch um, da geht's auch um mehr. Da geht's ja nicht um das Label, sondern wenn du das öffnest, dann erscheint die Liste genau an der Stelle, wo das Wort auch in der, das selektierte Wort auch in den Button erscheint.
Äh, also wenn du jetzt, äh, unten Pumpkin auswählst, und das geht halt nur, wenn, wenn's nach unten aufgeht. Wenn du da draufklickst, dann steht Pumpkin an der gleichen Stelle wie, wenn's ausgewählt ist.
Und bei Carrot öffnet sich's dann so, dass es auf der Höhe von... Es wackelt bei mir einen Pixel, aber...
Interessanterweise ist das bei mir nicht so.
Brave.
Brave, bei mir ist es in, in Edge, da funktioniert das so. Aber wie gesagt, nur wenn's nach unten aufgeht, wenn's nach oben aufgeht, dann stimmt's schon wieder gar nicht.
Äh, ich glaube, das sieht bei mir grad anders aus.
Ah, ja, okay. Interessant.
Aber nächstes Beispiel, das ist was, das was, da werden sich sehr viele sehr groß, äh, sehr, sehr drüber freuen. Nämlich, was ich vorhin schon angesprochen hab, die Combo-Box.
Nämlich ein filterbares Select haben die da mitgebaut.
Aha.
Ähm, das ist vielleicht die Lösung, also die, naja, was heißt, muss ja nicht genau dieses Beispiel sein, man kann sich nämlich, das kommen wir, kommen wir gleich noch dazu, das ist eine große Property heute, gell?
Äh, vielleicht dann doch ein Thema.
Ähm, man kann sich nämlich das ja komplett zusammenkustomisen und selbst zusammenbauen, das hab ich vorhin schon gesagt, kommen wir gleich noch drauf.
Aha, und da kommen wir nämlich bei dem mit dem, mit der Combo-Box, hast du das gesehen, dass das da eben nicht ein Option-Element direkt als Kind-Element vom Select-Menu ist?
Ähm.
Also das ist nämlich schon doch nicht verpflichtend.
Weil diese, diese Combo-Box mit der Suche, die haben die gebaut, Select-Menu, dann ist ein Button drin und dann ist ein Pop-Up-Element drin.
Genau, da komm ich noch drauf, das ist nämlich das mit dem Customisen, dass man es selbst komplett zusammenbauen, sich zusammenschrauben kann, wie man möchte.
Ähm, dann muss man es aber wirklich komplett selbst bauen und auch die ganzen Attribute vergeben, die dafür nötig sind.
Äh, und dann dieses Pop-Up-Element ist dafür verpflichtend, tatsächlich.
Ähm, genau.
Also diese Combo-Box, das heißt, es ist quasi ein Select, das ich filtern kann.
Ähm, und ich sehe schon, dass, das wird die hoffentlich, ich sag's mal so, es könnte die Zukunft werden von vielen so Suggest, äh, suchen.
Wobei, weiß ich nicht, ob dann Select jetzt das richtige Element ist, aber das wäre auf jeden Fall, wenn man das quasi nativ kann und mit nativen Elementen, dann ist es auch gleichzeitig noch barrierefrei, was total geil wäre, was momentan bei den Dingern echt schwierig ist.
Ähm, dann Multi-Select, das ist auch so ein klassischer Use-Case, ist, ich möchte mehrere auswählen, ähm, und ich kann die dann, die werden, die landen dann in einem Feld und ich hab dann so ein X, dass ich sie wieder raus-Xen kann.
Und ich kann viele verschiedene davon auswählen. Das haben sie sich da auch zurechtgeschneidert. Natürlich braucht das dann alles immer JavaScript, ne? Also das, das geht dann nicht, das geht dann nicht auf Out of the Box.
Wie machen die das mit dem X, ne, dass das dann auch wirklich das rauslöscht? Also das kann ja eigentlich nur mit, mit so einem JavaScript gehen.
Genau. Aber, aber es ist trotzdem dann, äh, es sind native Elemente, die da verwendet werden.
Mhm.
Ähm, und das ist, das ist ganz schön, das ist ganz schön cool. Also das JavaScript dahinter, ich hab's mir nicht alle angeguckt, die Skripte, aber ich fand die vom Umfang her immer relativ überschaubar. Also ich hab's mir nicht im Detail angeschaut,
und ich dachte immer so, naja, für die Funktionalität hätte man früher jetzt, äh, keine Ahnung, ähm, ne ganze Library eingebunden und da sind's jetzt hier irgendwie, äh, 50, 60 Zeilen JavaScript noch dazu, zu dem Select-Menu. Äh, das ist eigentlich ganz okay so.
Mhm.
Ähm, dann der Account-Switcher, okay, das ist eigentlich nicht, nicht so spektakulär. Da wird halt, was ich auch in der Demo schon gemacht hab, äh, verschiedenes HTML in eine Option reingepackt.
Hätt ich jetzt halt noch ein Bildchen dazu gepackt, dass es irgendwie, ne, dass man sieht, wow, ich kann da Bilder drinnen.
Genau, also es ist, da, da find ich meine Demo ein bisschen besser.
Äh, auch wenn sie nicht so hübsch aussieht.
Ja.
Ähm, Scroll-Indicator, da haben sie das, dass man die Liste, eine lange Liste innen drin, dass man die scrollen kann, wenn man da auch hovert, da hast du oben und unten noch so ein Pfeil.
Ähm, ist, ist nett, ähm, also es soll ja auch eigentlich nur zeigen, was alles theoretisch möglich ist und es geht noch viel, viel, viel mehr.
Ja, wie gesagt, man kann's komplett selbst sich zusammenschrauben. Ähm, dann GitHub-Issue-Filter. Ich weiß nicht, wer, wer's kennt bei GitHub, ähm, dass man da verschiedene, äh, Dinge auswählen kann, die, die man durchsucht.
Ähm, da sind auch, äh, noch gleichzeitig noch Emojis mit reingedöngelt. Übrigens, das hat im Screenreader bei mir nicht funktioniert. Ähm, ich hab mal einen kleinen Screenreader-Test gemacht. Ähm, dann haben wir so einfach ein anderes Select mal nachgebaut von Dribble, ähm, was relativ simpel ist. Ähm, zum Beispiel eben jetzt mit, tatsächlich mit Icons, Browser-Icons in dem, äh, in dem, äh, in der dritten Select-Box.
Und, ähm, dann, was du vorhin schon gesagt hast, Color-Picker mit, äh, mit bestimmten Farben, äh, ist da auch gebaut. Wobei ich mir das gar nicht angeguckt hab, wie das im Detail funktioniert.
Aber das sind tatsächlich einzelne Options, die da, die da drin sind. Color-Grid. Ja, na, da man ja komplettes HTML da drin machen kann, alles mit CSS und so weiter, kannst du auch so.
Und siehst du die Options bei dem, äh, Color-Dings? Ich seh da nur, äh, Diffs und Buttons.
Ich hab, ähm, ich hab einfach auf so einer Color, äh, Inspect, äh, gemacht und dann land ich auf einer Option.
Ist nämlich in dem Color-Grid. Ah, ja, okay, okay.
Ist ein Diff-Color-Grid drin, und, äh, das sind die einzelnen Farben.
Ja, weil du brauchst da am Schluss einen Wert, den du dann per Get oder Post, äh, irgendwie übermitteln kannst, wenn du ein Formular abschickst, ne?
Genau. Deswegen brauchst du eigentlich immer irgendwo eine Option drin.
An der Stelle aber, wenn ihr einfach nur einen Color-Picker haben wollt, irgendeinen, dann nimmt, äh, Input-Type-Color, glaub ich, gibt's das, ne?
Ja, genau. Ähm, ähm, ähm, das ist, das wär nur für, ähm, für Custom.
Aber da kannst du halt kein, kein Farb-Set, äh, Bereich beschränken oder sowas, das ist sehr rudimentär.
Genau.
So, äh, weiß gar nicht, jetzt reden wir schon relativ lange da drüber, ne?
Ähm, bin gerade überlegen, wie, wie tief wir jetzt noch einsteigen in, in die verschiedenen Möglichkeiten, die das Ding hat.
Klar, wir müssen uns jetzt ja auch nicht stressen.
Ähm, also, ich hab vorhin schon gesagt, äh, man kann, ähm, die einzelnen Parts stylen, eben mit diesem Doppelpunkt, Doppelpunkt, Part, und dann gibt es, äh, zum Beispiel Button oder Listbox.
Ähm, ähm, der nächste Schritt wäre, dass man sich komplett selbst von, äh, von, äh, mit HTML zusammenbaut, den Inhalt, dann muss man aber die einzelnen Elemente, die man drin haben will, denen muss man sagen, was ist was.
Also, es gibt zum Beispiel, da gibt es dann sogenannte Slots und Behaviors.
Das heißt, es ist das Slot-Attribut und das Behaviour-Attribut, ähm, und es gibt einen Button-Slot, in dem üblicherweise, normalerweise, ähm, äh, der, der Text drin ist, ähm, der gerade ausgewählte Text, ähm, und, ähm, der Button selbst, der hat einen Behaviour-Button.
Ich glaube, dass ihr müsst euch, ich weiß nicht, ob das sich das so gut erklären lässt, im Code, guckt euch die Beispiele auf jeden Fall auf openui.org an, ähm, da ist das alles sehr gut erklärt, auch gerne noch im CSS-Tricks-Artikel ist es auch gut erklärt, auch alles drin, ähm, und dann gibt es, also wie gesagt, und damit, damit kann man sich's komplett selbst zusammenstellen, wie man, wie man's haben will.
Dann kann ich sagen, da kommt, da kommt jetzt noch ein Input rein und das macht das, ähm, und, und der Button ist übrigens an der Stelle und ich verschachtel das anders als jetzt mein Select und das, der Inhalt, der von einem Ausgewählten, der muss nicht im Button drin sein, sondern der darf auch woanders sein, somit kann ich's mir komplett customisen mit diesen Attributen, die es da gibt.
Ähm, und dann gibt es wohl noch eine Möglichkeit, dass man, ähm, sich das ganze Ding, äh, per Shadow DOM selbst in JavaScript baut.
Das ist das unterste Beispiel bei openui.org, aber letzten Endes, äh, ist da quasi nur der ganze Code, den ich vorher halt in HTML drin hatte, den, den hab ich halt, äh, in JavaScript in, in einem String drin und, äh, baue das dann damit, das geht wohl auch.
Genau, jetzt muss ich grad gucken, hab ich jetzt noch was vergessen, ich guck mir grad nochmal das Extending the Markup an, äh, Listbox, ah, das mit dem Popup.
Genau, ähm.
Jetzt muss ich grad mal gucken, ich hatte doch dafür eine Erklärung, naja, hier.
Ähm, genau, da gibt's, da gibt's ein Beispiel, äh, wo, äh, wenn man das customizt, eben dieses Popup-Element drin vorkommt und da wurde, äh, gesagt, das ist, das ist nämlich noch ein anderer, ein anderer neuer Standard, der gerade gebaut wird.
Also, die basieren schon aufeinander, sozusagen.
Und, ähm, ich glaube, das ist, das muss genommen werden, äh, für die Listbox, für das Listbox-Element, ähm, also Behavior Listbox.
Wenn man das selbst customizt will, muss man dafür das Popup-Element nehmen, weil das nämlich eins ist, was aufpoppt.
Da kann ich nicht ein beliebiges HTML irgendwie nehmen, sondern das muss dann wohl das Popup-Element sein, wenn ich das richtig, äh, verstanden hab.
Ähm, genau.
Und das hat das, das hat dann Behavior Listbox, beziehungsweise das muss man, das muss man dem dann geben.
Ähm, und dann kann ich da dann wieder meine ganzen ...
Nee, Roll-Attribut ist das, oder?
Nee, das Behavior ...
Ah, im CSS, oder wie?
Nee, im HTML.
Im HTML.
Das ist ein, das ist ein Attribut, das da verwendet wird, Behavior.
Äh, damit werden, wenn ich das HTML selbst baue, gibt es diese Behavior-Geschichten, die eben das, also, damit kann ich dann zum Beispiel einen Button sagen, du bist jetzt dieser Button innerhalb, äh, des Select-Menus.
Ich seh hier gerade bei dieser Color-Demo, da ist es, äh, Popup, Slot gleich Listbox, Behavior gleich Listbox.
Ist mir jetzt noch nicht so ganz klar, ich hätte jetzt gedacht, das Slot müsste ja eigentlich reichen, dass es dann weiß, äh, dass es das ist, aber ...
Hm, ich glaube, da wollten sie, äh, wollten sie, ähm, ähm, flexibel genug sein, dass du eben, dass das nicht das gleiche Element sein muss, dass es den Behavior und der, der Rapper ist, dass du das quasi nochmal voneinander trennen kannst, wenn du möchtest.
Also, es funktioniert auch tatsächlich, wenn ich das Behavior wegmach, funktioniert's nicht mehr.
Interessant.
Ja, Wahnsinn, was sich da tut. Also, ich find's auch eine coole Initiative, dass die da jetzt mal so das UI ein bisschen angehen, weil das ist ja wirklich so ein Pain-Point gewesen.
Und ich muss jetzt nochmal sagen, dieses Select-Menu, das ist ein übermächtiges Teil, damit kannst du so viel Crazy-Shit machen, jetzt schon, in diesem, in diesem Standard, in diesem Teil der Standardisierung, also jetzt quasi ganz am Anfang, kannst du damit schon so viel Crazy-Shit machen.
Äh, ich bin, äh, ich bin, ich bin sehr gespannt, auf was für Ideen die Leute dann mit noch kommen, was man damit noch alles machen kann. Also, eigentlich, ich weiß, man soll, man soll das nicht machen, aber man kann, man könnte das auch für, für Dropdown-Navigationen missbrauchen, weil man kann ja auch Links reinpacken, ähm, man könnte, man kann da quasi alles damit machen.
Also, ich glaube, da ist, äh, die, die, die schaffen da jetzt einen sehr, sehr offenen, freien Standard, der extrem viel Freiheiten lässt, wo noch Dinge damit gebaut werden, wo wir jetzt überhaupt gar nicht drüber nachdenken, dass man die damit bauen kann, weil die haben jetzt im Prinzip sich hauptsächlich auf diese Use-Cases beschränkt, dass man die nachbauen kann, wo man jetzt schon sagt, ja, das ist was, was momentan mit selbst Custom nachgebaut wird, weil man es braucht, weil man den Need hat, gerade in Applications irgendwie.
Richtig viel Web-App-Zeug, was ich jetzt auch sehe, äh, Badge als Element, äh, wo du dann halt dieses klassische, du hast ein Icon und dann hast du so einen roten, einen roten Kreis mit einer Zahl, äh, drin oder halt hier auch so, ähm, ja, an Überschriften, irgendwie ein Label dran oder so.
Also, ich meine, jetzt gerade bei Select Menu haben sie sich in den Demos auf die, auf die Use-Cases weitestgehend, äh, gestürzt, die es halt jetzt schon gibt, die man kennt, wo man genau weiß, das würde man eigentlich gerne mit Standard-Elementen ab, äh, abfrühstücken und ich glaube aber, wenn das Standard ist,
da werden noch ganz krasse Sachen auf uns zukommen, wo Leute dann, äh, komplette Webseiten mit Select Menu bauen.
Gefährlich ist es halt dann, du hast auch schon Accessibility angesprochen, ähm, dass das dann halt trotzdem noch accessible ist, weil wenn du das halt selber baust und da quasi alles reinkloppen kannst, dann bist du halt auch wieder dafür verantwortlich, dass das accessible ist, ne?
Ja, aber nur zum Teil, ähm, solange du dich daran hältst, dass du diese, ähm, äh, Behavior-Geschichten da, äh, vergibst und, ähm, die Slots richtig, das musst du machen, damit das Ding überhaupt funktioniert, zum Aufklappen und so, ist die Accessibility dann mit eingebaut und du musst halt Options drin haben, ne?
Wenn du dich, wenn du dich daran hältst, ist Accessibility mit eingebaut. Das, das war extra, du musst dann keine, du musst nichts weiter tun. Das ist der Unterschied zu den anderen selbst gedöngelten Lösungen.
Mhm. Ähm, ähm, da musst du nämlich quasi Accessibility komplett noch, du hast quasi das Verhalten, dass es irgendwie auf- und zuklappt und du was reinschreiben kannst, das hast du gebaut, aber dann musst du Accessibility noch extra machen.
Das ist da dann aber quasi schon mit drin. Und ja, auch da, das schafft man bestimmt so kaputt zu spielen, dass es am Ende nicht mehr geht mit dem Screenreader oder mit der Tastatur, mit Sicherheit.
Aber, wenn man sich halbwegs an die Regeln hält, die die da, die die da vorgeben, ähm, dann sollte es funktionieren. Und das ist ein großer Fortschritt, äh, im Vergleich zu jetzt.
Meine Güte, das ist, wir haben doch, ich glaub, das mit ...
Die Stunde schon gefüllt mit ...
Ja, das ist, das mit der, äh ...
Ja, meins geht, aber meins geht wirklich ganz schnell.
Okay, jetzt bin ich grad im Überlegen, haben wir noch, ah ja, genau, haben wir noch was? Ja, äh, vielleicht abschließend noch, ähm, interessanterweise ist, äh, Stand heute, äh, Selectmenu bei Can I Use noch nicht mit drin.
Mhm, hast du auch schon gesehen, auch bei MDN gibt's nix dazu.
Ähm, genau, bei MDN gibt's nix dazu, aber es gibt schon, äh, ein Issue bei GitHub für Can I Use, äh, dass man das doch bitte hinzufügen könnte.
Ah ja, okay, perfekt.
Dann lassen wir doch gleich mal ein Däumchen da, so, dann gibt's vielleicht ein bisschen schwer.
Genau, ich hab auch schon einen Daumen oben dagelassen, ähm, dass, äh, dass das mal bei Can I Use reinkommt, äh, dass, äh, das auf jeden Fall ...
Von neun Stunden eröffnet.
Ja, ich bin, ich bin großer Fan von dem, von dem Element, das wird sehr viel, sehr vereinfachen, äh, ich war selten oder schon lange nicht mehr so excited, äh, wegen dem neuen Webstandard, aber das wird, das wird so viel bringen, das wird so viel bringen, so viel gute Sachen, ähm, so viele Dinge, so viel einfacher.
Ähm, ja, bin, bin Fan, bitte weitermachen, ähm, und wenn ihr, ähm, Probleme damit habt oder irgendwie sagt, ah, das müsste man noch machen, meldet euch gerne bei den Leuten, schreibt ein Issue bei GitHub rein, ähm, die freuen sich mit Sicherheit, ähm, wenn ihr da mithelft und die rufen auch explizit dazu auf, ähm, schickt uns Feedback, wenn ihr irgendwas findet.
Also, äh, äh, gute Sache, gut investierte Zeit und damit können wir, wenn du keine Fragen mehr hast, das Select Menu für heute abschließen.
Cool.
Sehr schön.
Ja, dann kommen wir jetzt zu
Die Property der Woche.
Nochmal.
Ja, wie angekündigt, ähm, ich mach's jetzt aber wirklich ganz, ganz kurz, hoffe ich.
Äh, meine Property der Woche ist, äh, eine CSS-Funktion namens Crossfade, enthalten im CSS-Images-Module Level 4.
Und, äh, was das macht, ist im Endeffekt einfach nur Bilder, also Hintergrundbilder in der Regel, ähm, übereinanderblenden zu bestimmten Prozentteilen, ja.
Und da gibt's eine, eine neue und eine alte Syntax und die alte Syntax ist die, die aktuell in Chromium und Safari implementiert ist.
Und die sieht so aus, also ich hab, äh, Background-Image-Property zum Beispiel und dann die Funktion, äh, Cross-Fade, Klammer auf,
und dann hab ich ein Image, also zum Beispiel URL-Funktion, wo das Bild angegeben ist, dürfte es in der Regel sein, äh, Image, Image und Percentage.
Und dann wird eben, äh, das Bild zu so und zu viel Prozent, ähm, übergefailtet.
Ich hab da auch mal eine Demo dazu gebaut.
Ah, okay.
Und die neue Syntax, ja.
Jetzt hab ich, äh, jetzt hab ich, jetzt hab ich direkt mal kurz zwischenrein, wo ist der Unterschied zu Opacity?
Äh, wie zu Opacity? Naja, im Endeffekt, also.
Bilder werden in Internet, aber da hab ich's falsch verstanden.
Naja, du müsstest, du müsstest ja normalerweise zwei Bilder übereinander legen, also du müsstest dann ein Webber-Element machen und dann machst du ein Bild rein, dann machst du noch ein Bild rein, die sind beide, aber, ne, und dann machst du einfach Background-Image.
Ah, okay.
Und Background-Image ist dann aktuell noch mit Webkit-Prefix auch, also Webkit minus Cross minus, äh, Fade.
Und dann gibst du eben in der alten Syntax zwei Bilder an und ne Prozentzahl und dann werden die zu so und so viel Teilen übergeblendet.
Okay, okay.
Und dann dachte ich gleich, wow, cool, ähm, ne Image-Gallery, ähm, mit Fading, ohne dass ich dafür JavaScript brauche, cool.
Und, ähm, hab dann gleich mal gedacht, wow, Transition einbauen und hab gedacht, okay, wie macht man das jetzt?
Die Bilder einfach, äh, gleich lassen und nur den Prozentwert ändern.
Und du kannst die Demo auch mal anschauen, wenn man da drüber hovert, über den Body, in der Code-Pen-Vorschau, ähm, ich hab den in den, in den, in den Dings reingesetzt, die Demo in, äh, hier bei Property der Woche, ah, ne, hab ich tatsächlich nicht rein.
Ne, ich hab keinen Code-Pen.
Ja, mach mal.
So, zack, da, guck.
Zack, da ist sie.
Zack, die Bohne, so, okay.
Genau, und, äh, so, dann, dann, dann, dann, es sind zwei Katzen übereinander und, ja, echt, tatsächlich?
Nein, nein, ich hab ja keine Lüfte an.
Also, aber das ist, das ist schon, äh, okay.
Genau, und dann, äh, man sieht zwei Katzenbilder, die sind übereinander geblendet und die eine Katze ist ein bisschen schwächer und die andere ist ein bisschen stärker und wenn ich drüber fahre, dann, äh, ändert sich das Verhältnis.
Und die kämpfen gleich miteinander, die schwache und die starke Katze.
Und, genau, und dann hab ich gedacht, äh, cool, äh, noch ein Transition, ähm, Property drauf klatschen und dann hätte ich schon den Fade und dann kann man da eine tolle Galerie oder so mit basteln.
Aber, ähm, das geht nicht, also Transition funktioniert nicht.
Hab ich gedacht, dann schreib ich doch mal, weil man findet generell sehr wenig.
Also, wenn du danach googelst, nach diesem Cross, äh, Crossfade, da, da gibt's sehr wenig.
Es gibt keinen CSS-Trix-Artikel dazu.
Es gibt aber immerhin, im Gegensatz zu deiner Property gerade, ähm, es gibt MDN und Can I Use schon dazu.
Ähm, aber so ansonsten an, an, an Demos oder so, ja, irgendwelche Artikel drüber, findet man da eigentlich nix.
Und dann hab ich in der Spec geguckt, bin da auch nicht so ganz schlau geworden und hab gedacht, jetzt schreib ich doch einfach mal auf Twitter die AutorInnen an.
Und, oh, jetzt hab ich grad eine Twitter-Nachrichtigung, äh, oh, jetzt hab ich, jetzt kann ich gleich direkt hier drauf, äh, drauf reagieren.
Also, ähm, so, genau, hab ich gedacht, ich, ich guck mal, wer hat das gemacht und das waren, äh, Lea Varou, äh, Elika, Jay, Atomat, weiß nicht, ob ich das richtig aussprungen hab, äh, und Tab Atkins, den man ja kennt.
Und jetzt hat Tab Atkins vorhin tatsächlich, äh, äh, geschrieben und hat aber nicht ganz verstanden, was ich meine.
Jetzt hab ich das nochmal geklärt und jetzt gerade in dieser Sekunde, wo wir jetzt drüber sprechen, krieg ich die Twitter-Notification.
Also, und hab gefragt, ist das dann geplant, sollte das dann funktionieren und, ähm, wenn, sollte das jetzt mit der aktuellen Umsetzung in den Browsern auch schon funktionieren.
Jetzt hat er gerade geschrieben, technically not currently defined, I haven't seriously touched the images back in several years and never got around to writing the interpolation rules for images.
Und dann hat er noch nachgetragen, that's that, since Chrome and WebKit at least transition plain image smoothly using Crossfade, they should be transitioning between any two images the same way.
In particular, your example should definitely work.
Hm.
Dann müsste ich das Ganze jetzt mal, ähm, kann man ja auch schnell noch live machen, äh, mit, äh, einem Web, beziehungsweise du kannst ja das, äh, in, in, in, in dem WebKit-Browser.
Ich, ach so, was hast du gerade?
Ja, ich hatte jetzt hier den, den, den Chromium, äh, also Chrome und, ähm, müsste es mal versuchen, ob es in.
Ach so, du meinst, du meinst, ich könnte Safari, äh.
Genau, in dem Safari einfach mal die Demo öffnen und gucken, ob das bei dir wuppt.
Das kann ich machen.
Dann brauch ich nämlich jetzt nicht Browser-Stack hier noch hochfahren.
Das kann ich machen, das kann ich machen, kein Problem.
Ah, Mensch, hast du hier live gerade hier.
Ja, bei mir transitiont das.
Ja, tatsächlich?
In Safari, ja, in Safari.
Ah, cool, okay.
Es habe ich einen schönen weichen Übergang.
Cool, das heißt, du hast richtig so richtig schönes ...
Das heißt, damit könnte man eine schöne ...
Das wäre der Ton, die ich dazu machen würde.
Cool.
Cool, dann kann ich Atkins gleich schreiben,
hier so Feedback für jeden, der das mal findet.
Cool.
Dann hätten wir das auch geklärt.
Also verdammt, dann braucht er Chromium vielleicht noch.
Vielleicht mit der neuen Syntax, vielleicht geht das dann.
Hm, ich weiß gar nicht, ob man dafür was Eigenes braucht
oder ob es nicht okay wäre,
das von Hand irgendwie zusammenzukloppen,
wenn man so was machen wollte.
Ich wäre jetzt nie auf die Idee gekommen,
danach nach der CSS-Properität zu ...
Cool, aber gibt es da sehr viele Anwendungsfälle dafür.
Und ich glaube, nachdem es kein Artikel gibt,
so, oh, endlich haben wir das, scheint es vielleicht auch nicht so ...
Also wenn das ein Webkit ist und es in Safari geht,
dann war das bestimmt mal so ein Ding,
die haben das für irgendeine Demo gebraucht.
Das unterstelle ich Apple immer.
Mit ihren komischen Safari-eigenen Syntaxen für CSS.
Die haben für irgendwas, haben sie gedacht,
da wäre es doch geil, wenn man das jetzt irgendwie im Browser hätte.
Ja, lass uns doch schnell einbauen.
Wir machen hier Webkit davor und dann passt das schon.
Wir brauchen es für die Apple-Seite.
Und solcher Chromium hat es jetzt mit Webkit-Prefix adaptiert.
Ja, also vielleicht schreibt es mal in die Kommentare,
wenn euch noch andere Dinge dazu einfallen.
Für mich war es halt so Gallery,
also so, dass man Bilder einfach überfaden kann,
war für mich jetzt so der Erste,
ja, das Erste, was mir dazu eingefallen ist.
Ich hätte jetzt einfach zwei Bilder übereinandergelegt
und das mit Opacity gemacht.
Ja, mir fällt wirklich kein konkretes Beispiel ein,
warum man das jetzt brauchen könnte.
Das ist halt einfach,
du hast halt weniger Elemente wieder.
Aber was man halt sagen muss,
wie immer bei Background-Image und bei Image,
die irgendwie in CSS gemacht werden,
Accessibility ist halt nicht vorhanden.
Also das ist dann wirklich nur für Schmuck-Grafiken eigentlich geeignet,
weil sobald du schon irgendwie eine Caption dazu machen willst,
kannst du es ja schon wieder vergessen.
Also du müsstest dann trotzdem Elemente für die Captions haben
und könntest dann nur das reine Bild dann per CSS rumschalten.
Also ich glaube halt,
dass es vielleicht ein Performance-Ding ist,
dass solche Sachen sich,
wenn der Browser das komplett übernimmt,
intern, wie die Bilder zusammengerendert werden,
dass das dann performanter ist,
als wenn ich jetzt wirklich zwei Elemente habe
und der Browser die dann verrechnen muss.
Weil, sobald ich das gesehen habe,
ist das wirklich,
also der Browser rendert das quasi als ein Bild,
das das entsprechend mit Blend-Modes halt irgendwie gemischt ist.
Und das ist vielleicht dann performanter,
ich weiß es nicht.
Ja.
Aber interessant auf jeden Fall,
kannte ich nicht,
habe ich noch nie gehört.
Das ist mir irgendwann zufällig mal irgendwo über den Weg gelaufen.
Ja.
Da habe ich gedacht, aha.
Cool.
Eine Property.
Haben wir noch eine mehr,
die wird jetzt hier besprochen.
Genau.
Und jetzt gerade noch, wie gesagt,
live hier was geklärt.
vielleicht kannst du auch gleich mal noch antworten.
Sehr gut.
Sagen, danke.
Ich kann es hier mal,
wenn du Deutsch lernen willst.
Genau.
Ja, der ist live im Prozess.
Gut.
Genau.
Okay, Mensch.
Dann sind wir,
probatimäßig jetzt schon durch hier.
Das ging jetzt kurz und schmerzlos, ne?
Das war doch super.
Dann hast du jetzt noch,
ich habe gesehen,
auch nicht nur eine,
sondern auch tatsächlich zwei Geilteile mitgebracht.
Ich habe zwei,
ich habe zwei Geilteile, ja.
Okay.
Damit sie mal wegkommen.
Reicht aber ein Jingle, oder?
Ah, weiß nicht.
Ja, doch.
Guck mal.
Weiß ich nicht.
Das Geilteile.
Geilteile.
Ach, kommen wir heute schnell durch.
Unklass nicht.
Wahnsinn.
Trotz, trotz, dass meine Property dann doch relativ lang war.
So, ich habe mir gedacht,
es ist absichtlich sind es zwei,
weil mit dem ersten Geilteil
schließe ich viele Leute aus,
die das vielleicht gar nicht ausprobieren können,
selbst wenn sie wollen,
weil es nämlich,
es ist ein Spiel,
es ist ein Handyspiel
und es geht,
soweit ich weiß,
nur auf iPhone.
ich weiß nicht mal,
ob es auf dem iPad geht,
ich glaube,
es geht nur auf iPhone.
Und das heißt Blackbox
und das hat mein Gehirn
ein bisschen kaputt gemacht
und gekabert.
Es ist ein,
ein Puzzle-Spiel,
so im weitesten Sinne,
im weitesten Sinne.
und es ist aber ein,
hm,
wie soll ich das sagen?
Es ist ein Spiel,
das anders funktioniert
als andere Spiele,
die man so kennt,
weil es nämlich über das,
über das,
ich öffne die App
und mache da drin Sachen hinausgeht.
Ähm,
man muss da drin Rätsel lösen
und die Rätsel haben meistens irgendwas
mit etwas zu tun,
was nicht,
was nicht jetzt innerhalb der App stattfindet.
Manchmal findet es innerhalb der App vom Spiel statt,
manchmal aber auch nicht.
Wie soll ich das jetzt?
Vielleicht muss ich mal ein Beispiel bringen.
Ähm,
es gibt ein Rätsel,
das bezieht sich auf die aktuelle Mondphase.
Ähm,
es,
das kannst du nur lösen,
wenn du in der richtigen Mondphase bist.
Okay.
Ähm,
es gibt ein Rätsel,
das,
also,
Kannst du das irgendwie ausführen?
Warum?
Im aller,
im allerweitesten Sinne,
naja,
es geht halt,
naja,
es ist halt einfach ein Rätselspiel,
das,
das sagt,
naja,
think outside the box.
Ja,
wie kann ich mir das jetzt vorstellen,
warum das,
was muss ich da machen?
Ich weiß nicht,
ich will jetzt nicht,
ich will es nicht verraten,
das hab ich nämlich schon gelöst.
Okay, okay.
Ich will das jetzt nicht verraten,
also,
ich muss,
man kann dieses,
man kann dieses Spiel auch nicht an einem Tag durchspielen,
das ist per Definition nicht möglich,
weil bestimmte Dinge zeitabhängig sind.
Ähm,
es spielt sehr viel mit den Sensoren des iPhones und mit den Funktionen von iOS.
Und zwar mit allen möglichen Funktionen.
Da sind,
da hab ich dann,
ich hab durch dieses Spiel gelernt,
dass es APIs gibt,
offenbar ein iOS für Dinge,
äh,
die ich nicht kannte,
wo ich dachte,
hä,
das,
das kann man tatsächlich abfragen mit einer App?
Krass.
So,
ähm,
weiß nicht,
nehm ich jetzt mal,
soll ich jetzt,
soll ich jetzt mal ein Beispiel?
Ja,
irgendwas wollen wir jetzt schon wissen,
das ist so abstrakt,
da kann ich mir grad gar nichts darunter vorstellen.
Ich will halt nicht zu viel verraten.
Ja,
du musst es ja nicht lösen,
aber so,
was,
was denn die so,
was ist denn die Prämisse?
Ähm,
ich kann,
ich zeig,
ich zeig dir einfach mal was,
ich zeig dir einfach mal was.
Ähm,
so,
ich zeig dir einfach mal eins der Rätsel.
So,
das ist ein Rätsel.
Und man muss dann nach und nach immer verschiedene Sensoren auch anschalten.
So,
was,
was sieht man jetzt auf dem Bildschirm?
Man sieht auf dem Bildschirm,
ähm,
so eine Pointer,
so,
so eine,
so eine Kartennadel.
Stecknadel,
ja.
Und dann sieht man,
also,
so Kreise ausdrucken.
was man immer,
was man immer schaffen muss,
man muss immer schaffen,
irgendwie diese,
ähm,
diese Rechtecke,
die da sind,
zu füllen.
Wenn du die alle gefüllt hast,
dann hast du das Rätsel gelöst.
So,
das ist eigentlich immer das Ding.
und die,
die Übersicht von dem Spiel,
die sieht so aus.
Das ist,
das ist das Spielfeld.
Das ist im Prinzip eine Matrix aus lauter bunten Rechtecken.
Und wenn du auf eins drauf drückst,
keine Ahnung,
nimm mal jetzt irgendeins,
dann öffnet sich das entsprechende Rätsel.
So,
da siehst du jetzt zum Beispiel,
das reagiert jetzt irgendwie auf die Position vom iPhone.
Mhm.
Und dann,
und das vibriert dann auch,
wenn bestimmte Dinge passieren.
so,
ja?
So,
ähm,
also,
ganz viele Gerätesensoren
und aber auch teilweise Dinge,
die zeitabhängig sind,
ähm,
Dinge,
die,
Dinge,
die von dem Ort abhängig sind,
wo du bist,
und so weiter.
Ähm,
ich will nicht zu viel verraten.
Das,
das,
äh,
man wird,
man wird ein bisschen verrückt.
Man,
man fängt dann an,
verrückte Dinge zu tun.
Ja,
und es gab Leute,
es steht da auch,
refreshingly oppressive puzzles.
Ja,
es macht einen ein bisschen Bananen.
Puzzle.
Also,
ich hab schon,
äh,
es gab schon Leute,
die,
die um mich rum,
die dann gesagt haben,
äh,
was stimmt mit dir jetzt gerade nicht?
Gut,
Moritz,
das liegt vielleicht gar nicht mal
nur an der App.
Du spielst schon wieder dieses Spiel.
Du spielst schon.
Ja,
der war billig,
der war billig.
Ähm,
ja,
genau,
also,
mehr möchte ich nicht verraten.
Ich hab's auch noch nicht komplett durch.
Es gibt auch Dinge,
wo ich noch komplett im,
also,
du hast gesehen,
es sind schon,
ich hab schon einige gelöst,
ne?
also die meisten.
Ähm,
ich hab auch schon geheimen Rätsel gefunden,
indem ich merkwürdige Dinge mit dieser App gemacht habe,
wo dann kam und sagt,
ja,
jetzt,
jetzt lass,
jetzt lass mal,
mach das mal jetzt nicht noch mal.
Und dann macht man's halt noch mal.
dann kriegst du halt,
dann kriegst du halt jetzt ein extra Rätsel.
Wenn du so,
wenn du so persistent bist.
So, äh,
ja,
also,
wie gesagt,
bei manchen tapp ich noch komplett im Dunkeln,
weiß noch gar nicht,
aber das ist tatsächlich ein sehr interessantes Spiel.
Das kann ich empfehlen.
Man kann auch ein paar Level kostenlos spielen.
Und es gibt auch keine Werbung oder sowas.
Wenn man dann,
wenn man dann die,
das finde ich immer unfassbar nervig,
wenn,
wenn irgendwie Werbe finanziert und so.
Also ich glaube,
genau,
der Standardumfang sind halt nur so ein paar von diesen Rätseln
und dann,
die anderen sind halt quasi verschlossen
und wenn du die halt spielen willst,
musst du halt Geld bezahlen.
Aber es ist total fair
und es ist echt ein geiles Spiel.
Was das natürlich am Ende macht,
ist,
am Ende hast du alle,
alle Sensoren und alle Freigaben auf dieser App gegeben.
Ja, ja.
Weil du die für die Rätsel brauchst.
Das ist ein bisschen.
Ja,
kommen die aus China oder aus Russland?
Ich hab keine Ahnung.
Ja.
Es ist sehr,
sehr clever.
Es ist wirklich sehr gut.
Ich kann dir im Nachgang gerne mal
die Lösung von so einem Rätsel zeigen,
dass du es vielleicht noch ein bisschen besser verstehst.
Ich will jetzt nicht so viel verraten,
vielleicht will es ja noch jemand spielen,
ich will euch jetzt nicht diese Rätsel lösen.
Manche sind sehr leicht
und wie gesagt,
manche da bin ich noch gar nicht drauf gekommen.
Zum Beispiel,
ich kann dir mal eins zeigen,
wo ich noch nicht drauf gekommen bin,
wo ich noch gar total im Dunkeln tappe.
Und zwar ist das das hier.
Da sind auf dem Monitor
einfach ein roter Kreis
und ein grüner Kreis unten.
Und oben drüber die zwei Kästchen.
Ich hab schon versucht,
ein Magnet ans Handy zu halten.
Ach Gott.
Okay.
Versuch's doch mal mit Starkstromkabeln.
Weil die haben ja Magnetsensoren,
die Smartphones.
Da hab ich gedacht,
na ja,
vielleicht muss ich da jetzt,
das ist Nordpol und Südpol.
Rot und Weiß nimmt man da oft als Farbe
für die Pole von Magneten.
Rot und Grün, oder?
Ich hab auch Rot und Weiß schon gesehen.
Rot und Weiß?
Okay, gut, ja, kann sein.
Ich hab, ja, vielleicht, ja.
Also,
es ist sehr verrückt, dieses Spiel.
Genau so,
es ist ein Geilteil.
Könnt ihr ja auch mal,
wenn es jemand spielt,
mal sagen,
ob es euch gefällt
oder ob ihr es komplett,
ob ihr dann verrückt geworden seid
oder so was.
Und das andere einfach für diese Zeiten,
die irgendwie so ein bisschen anstrengend sind,
unsicher und man weiß nicht so recht,
was, was,
wie soll man jetzt damit umgehen?
Und manchmal braucht man einfach so
einen Hort der Freude.
Dafür empfehle ich euch einen Twitter-Kanal,
der heißt nämlich Hourly Fox.
Und der macht genau das,
was der Name des Twitter-Kanals ist.
Jede Stunde wird ein Fuchs-Bild gepostet.
Und da sind so putzige Bilder dabei.
Das ist für die jetzige Zeit
genau das Richtige.
Also, vielleicht ...
Das ist ja schön,
dass man einfach so ein bisschen
die Timeline so ein bisschen gecleant wird.
Genau, genau.
Das werde ich direkt mal ...
Wirklich, jede Stunde ist ein Fuchs-Bild
bei mir dann da drin.
Das ist schön.
Und die sind alle ziemlich gut
und manche sind extrem putzig.
Also, ich glaube,
so was gibt es auch für andere Tiere.
Ich bin jetzt halt da drauf gestoßen,
auf die Füchse
und es ist einfach ein Traum.
Also, warte mal,
ich such dir mal eins meiner Favoriten raus.
Das war, glaube ich,
eins der ersten,
auf die ich überhaupt gestoßen bin.
Das wurde, glaube ich,
mir in die Timeline reingeteilt.
Ich habe sogar mal gesucht.
Es gibt auch Hourly-Kitten.
Natürlich, natürlich.
Hourly-Dog gibt es das auch?
Sag mal, wo ist denn der?
Ja, Hourly-Dog gibt es auch.
Natürlich, natürlich.
Aber ich fand die Füchse einfach gut.
Und ich empfehle die Füchse.
Ihr dürft natürlich euch
euer Lieblingstier raussuchen bei Twitter,
was ihr jede Stunde ...
Aber das ist so ...
Wenn bei Twitter so viel Schlimmes drinsteht,
ist manchmal nicht schlecht,
so ein kleines Tier,
irgendwie so ein kleines putziges Tierchen
dazwischen zu haben.
Das ist gerade jetzt wieder
vor 45 Sekunden.
Ich glaube,
sie wiederholen sich auch.
Aber das ist ...
Ah, da ist er.
Da ist er.
Der, den ich als erstes gesehen habe,
den packe ich auch mal noch hier rein.
Das war meine Einstiegsdroge.
Ich habe hier ...
Weiß nicht, hast du es gesehen?
Ich habe es ins Trello gebracht.
Achso, die.
Das ist einfach ...
Der ist einfach sehr gut.
Das ist eigentlich fast so ein kleines Hündchen.
Oh Gott.
Das ist ein Fuchs?
Das ist doch kein Fuchs.
Ja, offenbar.
Aber es sieht irgendwie schon ...
Verrückt.
Man weiß nicht so genau.
Vielleicht sind es auch nicht alles Füchse.
Man weiß nicht.
Aber es sind auch verschiedene Sorten.
Also es sind Polarfüchse dabei.
halt irgendwie so die Roten,
die man bei uns kennt
und in allen Größen
und Mama mit Baby
und alles.
Das ist ein voller Programm.
Es macht einfach große Freude.
Sehr schön.
Bisschen Positivität.
Mein zweites Geilteil
und das letzte für heute.
Dann sind wir schon bei einer Stunde ...
Also erst bei einer Stunde 15,
muss man ja sagen.
Und jetzt kommt ...
Du hast schon gar nicht mehr
so einen angsterfüllten Blick.
Nee.
Ich habe mich jetzt ein bisschen dran gewöhnt,
ehrlich gesagt.
Ich wusste jetzt ...
Ja, okay.
Und mein Bier ist erst ...
Ich habe auch noch was drin.
Das gibt es ja nicht.
Also wir müssen eigentlich schon so eine Bierzeit ...
Das muss die Folge schon dauern.
Aber ich kipps jetzt nicht mehr.
Aber ich habe auch langsam ...
Ich habe viel geredet und wenig getrunken heute.
Ich meine, andere Leute in einer Stunde,
die trinken in einer Stunde drei 05-Werflaschen.
Und ich habe jetzt eine halbe geschafft.
Ich werde sie wahrscheinlich noch leer trinken.
Ich finde nämlich das Chiemseher tatsächlich ganz lecker.
Das ist jetzt ...
Ja, doch.
Die Dose war auch noch fünf.
Ja, Mensch.
Das war doch jetzt schnell.
Und bevor wir es jetzt verlabern, oder?
Machen wir doch jetzt einfach recht zügig auch Schluss.
Und ihr könnt uns ja mal sagen,
wie euch diese tatsächlich kurze Folge jetzt gefallen hat.
Genau.
In nächster Woche gibt es wieder Stream.
Vielleicht das noch zum Abschluss.
Wie immer, ihr sollt uns bei Twitter folgen und so.
Wisst ihr ja alles, ne?
Das wisst ihr schon.
Genau.
Ja.
Und damit ...
Jetzt finde ich den Knopf nicht.
Ach so, soll ich ...
Nee, ich habe schon.
Jetzt läuft es an.
Gut, also, haltet die Ohren steif gerade jetzt.
Und wir freuen uns, wenn ihr nächstes Mal wieder dabei seid.
Macht's gut, bis dann.
Ciao.